@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600&family=Roboto:wght@300;400;900&display=swap');
*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;outline:none;}
html{overflow-y:scroll; overflow-x:hidden;}
article,aside,details,figcaption,figure,footer,header,hgroup,sub,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{color:#333;font-family: 'Roboto', sans-serif;font-size:16px; font-weight:400;margin:0;counter-reset:contador;}
a{color:#333;background:transparent;text-decoration:none}
a:focus{outline:0}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:800}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0;line-height:0}
img{width:100%}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
.clear{clear:both}
[class^="show"]{display: none}
a,button,a:after,button:after,a:before,button:before,input[type="submit"],button[type="submit"],input[type="reset"],button[type="reset"]{
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
}
a:hover,a:after,button:after,a:before,button:before,button:hover,input[type="submit"]:hover,button[type="submit"]:hover,input[type="reset"]:hover,button[type="reset"]:hover{
  -webkit-transform: opacity(1);
  -moz-transform: opacity(1);
  -ms-transform: opacity(1);
  -o-transform: opacity(1);
  transform: opacity(1)
}
/*********************/
.iniciar-sesion {
    background-image:url('	https://rastreo.mobelo.com.mx/public/image/banner-rastreo-1.jpg');
    background-position:center;
    background-size:cover;
    height:100vh;
}
.blurred-box {
    position: relative;
    width: 250px;
    height: 350px;
    top: calc(50% - 175px);
    left: calc(50% - 125px);
    background: inherit;
    border-radius: 2px;
    overflow: hidden;
}
.user-login-box button {
    display:inline-block;
    text-align:center;
    background-color:#ffc100;
    padding:10px 15px;
    color:#FFF;
}
.user-login-box .user-name {
    color:#FFF;
    margin-bottom:5px;
    font-weight:600;
}
.user-login-box {
    position: relative;
    margin-top: 50px;
    text-align: center;
    z-index: 1;
}
input.user-password {
    width: 150px;
    height: 30px;
    opacity: 0.4;
    border-radius: 2px;
    padding: 5px 15px;
    border: 0;
    margin-bottom:15px;
}
.blurred-box:after {
    content: '';
    width: 300px;
    height: 300px;
    background: inherit;
    position: absolute;
    left: -25px;
    top: -25px;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
    filter: blur(10px);
}

.flex-component {
  height:75vh;
   color:#FFF;
  min-height: 300px;
  display:flex;
  justify-content:center;
  align-items: center;
  width: 100%;
  background-image: url('../image/banner-rastreo-1.jpg');
  background-position: center;
  margin-bottom: 15px;
}
.banner-component {
  max-width: 500px;
  width:100%;
}
.flex-component input {
  width:100%;
  color:#555;
  background-color: #FFF;
  border:none;
  display:block;
  padding:5px 10px;
  font-size:16px;
} 
.flex-component label {
  font-size:35px;
  font-weight:300;
  margin-bottom:25px;
  text-align:center;
  display:block;
  margin:0;
  color:#FFF;
}
.banner-component > div {
  display:flex;
}
#btn-rastreo {
    border:none;
    background-color:#FFF;
    color:#777;
    border-left:1px solid #CCC;
    padding:0 10px;
        display: flex;
    align-items: center;
}
#btn-rastreo:hover {
    color:#FFF;
    background-color:#ffc100;
}
/*********************/
.flex-rastreo {
    width:100%;
    max-width:1024px;
    margin:0 auto 25px auto;
    padding:0 35px;
    display:flex;
}
.flex-right {
    width:30%;
    order:2;
}
.flex-left {
    width:70%;
    order:1;
}
.content-status .status-complete,
.content-status .status-inv {
    position:relative;
    padding-left:45px;
    padding-bottom:40px;
    padding-top:0;
    display:block;
}
.content-status .status-inv:before {
    width:5px;
    content:'';
    display:block;
    height:100%;
    background-color:#CCC;
    position:absolute;
    bottom:0;
    left:7px;
}
.content-status .status-complete:after,
.content-status .status-inv:after {
    content:'';
    border-radius:50%;
    background-color:#CCC;
    width:15px;
    height:15px;
    display:block;
    position:absolute;
    top:0;
    left:2px;
}
.content-status .activo:after,
.content-status .activo:before {
    background-color:#333;
}
.content-status .status-complete h3,
.content-status .status-inv  h3 {
    font-size:20px;
    color:#CCC;
}
.content-status .status-complete p,
.content-status .status-inv p {
    font-size:15px;
    color:#CCC;
}
.content-status .activo h3,
.content-status .activo p {
    color:#444;
}
.flex-right h3 {
    font-size:20px;
    color:#333;
}
.flex-right h4 {
    font-size:16px;
    font-weight:400;
    color:#777;
}
/*********ADMIN************/
.save-status {
    position:fixed;
    right:15px;
    bottom:15px;
    border:1px solid #CCC;
    padding:15px;
    background-color:#CCC;
    z-index:1;
}
.save-status span {
    border:1px solid #CCC;
    color:#FFF;
    cursor:pointer;
    width:100%;
    margin-bottom:10px;
    padding:5px;
    display:display;
    background:#213555;
}
.admin-content {
    width:90%;
    max-width:1280px;
    margin:35px auto 0 auto;
    display:block;
}
.admin-content h1 {
    font-size:35px;
    color:#333;
    font-weight:400;
    margin:25px 0;
}
.agregar {
    background-color:#eee;
    padding:25px;
    border-radius:10px;
}
.admin-content .collapse {
    display:none;
}
.admin-search {
    display:flex;
}
   
.admin-search >div {
    display:flex;
}
.admin-search input {
    width: 250px;
    color: #555;
    background-color: #FFF;
    display: block;
    padding: 5px 10px;
    font-size: 14px;
}
#btn-rastreo {
    background-color: #213555;
    color: #FFF;
    border-left: 1px solid #CCC;
    padding: 0 5px;
    display: flex;
    align-items: center;
}
#btn-rastreo:hover {
     background-color: #213555;
}
.select-list {
    display:flex;
    position:relative;
     justify-content: space-between;
    margin:0;
    margin-bottom:15px;
}

.select-list a {
    padding:15px 10px;
    background:#FFF;
    border:1px solid #CCC;
    border-bottom:none;
    cursor:pointer;
    text-transform:uppercase;
}
.select-list a.active-list {
    font-weight:600;
    background-color:#c3daff;
}
.select-list a:first-child {
    border-top-left-radius: 10px;
} 
.select-list a:last-child {
    border-top-right-radius: 10px;
} 
.tabla-lsitado {
    margin-bottom:25px;
}
.tabla-lsitado table {
    width:100%;
    border-spacing: 0;
}
.tabla-lsitado table td {
    padding: 2px 10px;
    font-size:16px;
}
.tabla-lsitado table td select,
.tabla-lsitado table td input {
    font-size:12px;
    text-transform:uppercase;
    padding:5px;
}
.tabla-lsitado table td select option {
     text-transform:uppercase;
}
.tabla-lsitado table th {
    background-color:#213555;
    padding:5px 10px;
    text-align:center;
    color:#FFF;
    font-size:14px;
    font-weight:400;
}
.tabla-lsitado tr:nth-child(even){background-color: #f2f2f2;}

.tabla-lsitado tr:hover {background-color: #ddd;}

.tabla-lsitado th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #213555;
  color: white;
}
.tabla-lsitado table td.s-fecha {
    font-size:12px;
    color:#777;
}
.btn-style button {
    padding:5px;
    font-size:15px;
    color:#78a5ed;
    background-color:#f5f7fb;
    border:1px solid #CCC;
    border-radius:5px;
}
.btn-style button:nth-last-child(1) {
     color:red;
     
}
.agregar form {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.agregar form > div.field {
    width:30%;
    margin-bottom:10px;
}
.agregar form > div.btn-enviar {
    width:100%;
}
.agregar form label {
    font-size:15px;
    font-weight:600;
    color:#333;
    margin-bottom:5px;
    display:block;
    width:100%;
}
.agregar form select,
.agregar form input {
    width:100%;
    font-size:14px;
    min-height:35px;
    border:none;
    border-radius:5px;
    padding:5px;
}
.agregar form > div.btn-enviar button {
    padding:10px 25px;
    display:block;
    font-size:16px;
    background-color:#213555;
    border:none;
    color:#FFF;
    border-radius:10px;
}
@media screen and  (max-width : 930px) {
    .banner-component {
        width:90%;
    }
    .flex-component label {
        font-size:25px;
    }
    .flex-rastreo {
        
    }
}
@media screen and  (max-width : 736px) {
    .flex-rastreo {
        flex-wrap:wrap;
    }
    .flex-right {
        width:100%;
        margin-bottom:15px;
        order:1;
    }
    .flex-left {
      width:100%;
        order:2;  
    }
    .content-status .status-complete h3,
    .content-status .status-inv  h3 {
        font-size:18px;
    }
    .content-status .status-complete p,
    .content-status .status-inv p {
        font-size:13px;
    }
    .flex-rastreo {
        padding:0 15px;
    }
    .flex-component {
        background-size: cover;
    }
}