@media only screen and (max-width: 768px){
    #ordertracker-widget {
    margin: 10px 0;
    padding: 0 10px;
}
	.tracking {
    padding: 30px 10px !important;
    margin-top: 40px !important;
}
.form-container {width: 80%;}
}
.msg {
    font-family: sans-serif;
}
.tracking .tracking-form .track{margin-bottom:10px;width:30%;border:2px solid #001dbb}
.tracking {padding:30px 0;min-height:500px; text-align: center; align-content: center;margin: 100px 0 0 0;}
.tracking .tracking-form {max-width:600px;}
.tracking .tracking-form input{padding:15px 20px;border:1px solid #ddd;}
.tracking .tracking-form input[type='text']{width:70%;border-right:none}
button.button-track.track{height: 47px;;border:1px solid #0422a0;background-color: #0422a0; color:#fff;text-transform:uppercase;cursor:pointer }
.tracking .tracking-form p{padding:10px 0;}
.tracking .tracking-form p.msg{font-weight:bold;color:#f00}
.tracking .dhl-results {border:2px dashed #f00;padding:15px;margin:20px 0;}
.tracking .dhl-results table tr td{padding:5px 10px;}
.tracking .dhl-results table tr:nth-child(2n){background:#eee;}
.tracking .dhl-results .headline {background:#f00!important;color:#fff;font-size:14px;}
#ordertracker-widget {
    margin: 20px 0 0 0;
    padding: 0 10px;
}
p.dangnhap.title {
    font-size: 25px;
    font-weight: 700;
    color: rebeccapurple;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  font-weight:800;
  font-size: 15px;
  background-color: #1673f4;
  color: white;
  padding: 16px 25px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: realative;
  display: flex;
  bottom: 23px;
  margin: 0 auto;
  border-radius: 10px;
  cursor: pointer;
}
.btn.btn-signin {
    background-color: #00BCD4;
}
/* The popup form - hidden by default */
.form-popup {
    width: 100%;
    display: none;
    position: fixed;
    top: 0;
    background: #000000b5;
    z-index: 999;
    margin: 0 auto;
    height: 100%;
    left: 0;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
    padding: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #f1f1f1;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100% !important;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
button.btn.dangky {
    background-color: blueviolet;
}
button.btn.btn-signin {
    background-color: #9C27B0;
}
button.btn.dangnhap, button.btn.dangky {
    width: 48%;
    float: left;
    position: relative;
    display: block;
    margin: 50px 1%;
}
/* Set a style for the submit/login button */
button.btn,.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  border-bottom: 2px solid #ffe800;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
input.fast {
    margin: 0 0 15px 0;
}
button.btn:hover {
    background-color: #2b42e2;
    transition: 0.5s;
}
.msg span.loi {
    background: red;
    padding: 10px;
    margin-top: 20px;
    display: block;
    border: 3px dashed #333;
    color: white;
    font-size: 18px;
    line-height: 20px;
    font-weight: 800;
}