:root{
    --main-color: blue;
    --color-dark: #1d2231;
    --text-grey: #8390a2;
}

*{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
    font-size: 11pt;
}

.espere {
    position: relative;
}

.espere .loader {
    width: 100px;
    height: 100px;
    border: solid 5px #064555;
    border-top: solid 5px #7cd6ec;
    border-radius: 50%;
    animation: loader .8s linear infinite;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.espere .message {
    position: absolute;
    color: #064555;
    top: 40%;
    left: 10%;
    /*transform: translate(-50%, -50%);*/
    animation: message 1s alternate infinite ease-in-out;
}

@keyframes message {
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

#sidebar-toggle{
    display: none;
}

.sidebar{
    height: 100%;
    width: 250px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background: var(--main-color);
    color:#fff;
    overflow-y: auto;
    transition: width 500ms;
}

.sidebar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0rem 1rem;
}

.logo-wcy{
    height: 150px;
    width: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    /*background-image: url(../assets/img/LogoUtcm.png);*/
    /*background-image: url(../assets/img/Western.png);*/
    /*background-image: url(../assets/img/TISol.JPG);*/
    background-image: url(../assets/img/Logo_Mepacsa.png);
    /*border-radius: 50%;*/
    margin-left: 40px;
}

.sidebar-menu{
    padding: 1rem;
}

.sidebar li{
    margin-bottom: 1.2rem;
}

.sidebar a{
    color: #fff;
    font-size: .9rem;
}

.sidebar a span{
    padding-left: .6rem;
}

#sidebar-toggle:checked ~.sidebar{
    width: 60px;
}

#sidebar-toggle:checked ~.sidebar .sidebar-header h3 i,
#sidebar-toggle:checked ~.sidebar .sidebar-header h3 span,
#sidebar-toggle:checked ~.sidebar .logo-wcy,
#sidebar-toggle:checked ~.sidebar li span{
    display: none;
}

#sidebar-toggle:checked ~.sidebar .sidebar-header,
#sidebar-toggle:checked ~.sidebar li{
    display: flex;
    justify-content: center;
}

#sidebar-toggle:checked ~.main-content{
    margin-left: 60px;
}

#sidebar-toggle:checked ~.main-content header {
    left: 60px;
}

.brand span{
    font-size: 1.2rem;
    font-weight: bold;
}

.main-content{
    position: relative;
    margin-left: 250px;
    transition: margin-left 500ms;
}

header{
    position: fixed;
    left: 250px;
    top: 0;
    z-index: 100;
    width: calc(100% - 250px);
    background: #fff;
    height: 60px;
    padding: 0rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    transition: left 500ms;
}

.search-wrapper{
    display: flex;
    align-items: center;
}

.search-wrapper input{
    border: 0;
    outline: 0;
    padding: 1rem;
    height: 38px;
    width: 500px;
}

.social-iconos{
    display: flex;
    align-items: center;
}

.social-iconos i,
.social-iconos div{
    margin-left: 1.2rem;
}

.social-iconos div a img{
    height: 38px;
    width: 38px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assets/img/new_logo.png);
    border-radius: 50%;
}

main{
    margin-top: 60px;
    background: #f1f5f9;
    min-height: 90vh;
    padding: 1rem 3rem;
}

.dash-title{
    color: var(--main-color);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.dash-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3rem;
}

.dash-cards2{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 3rem;
}

.card-single{
    background: #fff;
    border-radius: 7px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

.card-body{
    padding: 1.3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-body i{
    font-size: 1.rem;
    color: #777;
    padding-right: 1.4rem;
}

.card-body h5{
    color: var(--text-grey);
    font-size: 1rem;
}

.card-body h4{
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-top: .2rem;
}

.card-footer{
    padding: .2rem 1rem;
    background: #f9fafc;
}

.card-footer a{
    color: var(--main-color);
}

.card-rounded-0{
    background: #fff;
    border-radius: 7px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

.recent{
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.activity-grid{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-column-gap: 1.5rem;
}

.activity-card,
.summary-card,
.bday-card{
    background: #fff;
    border-radius: 7px;
}

.activity-card h3{
    color: var(--text-grey);
    margin: 1rem;
}

.activity-card table{
    width: 100%;
    border-collapse: collapse;

}

.activity-card thead{
    background: #efefef;
    text-align: left;
}

th, td{
    font-size: .9rem;
    padding: 1rem 1rem;
    color: var(--text-dark);
}

td{
    font-size: .85rem;
}

/*tbody td:nth-child(even){
    background: #f9fafc;
}*/

.badge{
    padding: .2rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: .7rem;
}

.badge.success{
    background: #def7ec;
    color: var(--main-color);
}

.badge.warning{
    background: #f0f6b2;
    color: orange;
}

.td-team{
    display: flex;
    align-items: center;
}

.img-1,
.img-2,
.img-3{
    height: 38px;
    width: 38px;
    border-radius: 50px;
    margin-left: -15px;
    border: 3px solid #efefef;
    background-size: cover;
    background-repeat: no-repeat;
}

.img-1{
    background-image: url(../assets/img/persona1.jpeg);
}

.img-2{
    background-image: url(../assets/img/persona2.jpeg);
}

.img-3{
    background-image: url(../assets/img/persona3.jpeg);
}

.summary-card{
    margin-bottom: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.summary-single{
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
}

.summary-single i{
    font-size: 1.5rem;
    color: #777;
    padding-right: 1rem;
}

.summary-single h5{
    color: var(--main-color);
    font-size: 1.1rem;
    margin-bottom: 0rem !important;
}

.summary-single small{
    font-weight: 700;
    color: var(--text-grey);
}

.bday-flex{
    display: flex;
    align-items: center;
    margin-bottom: .3rem;
}

.bday-card{
    padding: 1rem;
}

.bday-img{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 3px solid #efefef;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assets/img/persona3.jpeg);
    margin-right: .7rem;
}

.text-center{
    text-align: center;
}

.text-center button{
    background: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 4px;
    padding: .4rem 1rem;
}

.table-responsive{
    overflow-x: auto;
}

@media only screen and (max-width:1200px){
    .sidebar{
        width: 60px;
        z-index: 150;
    }
    
    .sidebar-header h3 span,
    .sidebar .sidebar-header h3 i,
    .sidebar .logo-wcy,
    .sidebar li span{
        display: none;
    }
    
    .sidebar .sidebar-header,
    .sidebar li{
        display: flex;
        justify-content: center;
    }
    
    .main-content{
        margin-left: 60px;
    }
    
    .main-content header {
        left: 60px;
        width: calc(100% - 60px);
    }

    #sidebar-toggle:checked ~ .sidebar{
        width: 250px;
    }
    
    #sidebar-toggle:checked ~ .sidebar .sidebar-header h3 span,
    #sidebar-toggle:checked ~ .sidebar .sidebar-header h3 i,
    #sidebar-toggle:checked ~ .sidebar li span{
        display: inline;
    }
    
    #sidebar-toggle:checked ~ .sidebar .sidebar-header{
        display: flex;
        justify-content: space-between;
    }

    #sidebar-toggle:checked ~ .sidebar li{
        display: block;
    }
    
    #sidebar-toggle:checked ~ .main-content{
        margin-left: 60px;
    }
    
    #sidebar-toggle:checked ~ .main-content header {
        left: 60px;
    }
}

@media only screen and (max-width:860px){
    .dash-cards{
        grid-template-columns: repeat(2, 1fr);
    }

    .card-single{
        margin-bottom: 1rem;
    }

    .activity-grid{
        display: block;
    }

    .summary{
        margin-top: 1.5rem;
    }

    .caja{
        width: 55px;
        height: 30px;
        background-color: #cccccc;
    }
}

@media only screen and (max-width:600px){
    .dash-cards{
        grid-template-columns: 100%;
    }
}

@media only screen and (max-width:450px){
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

#btnver, #btnimprime, #btnverSalida, #btnvergenerador, #btnversalidagenerador, #autorizaorden, #btnversolicitud, #btnverExtra, #btnVerEntrada{
    background: var(--main-color);
}

#btnverarticulos{
    background: var(--main-color);
}

#btneditar, #btneditarSalida, #btneditargenerador, #btneditarsalidagenerador{
    background: #eefa01;
    color: black;
}

#btneditardesconsolida{
    background: #eefa01;
    color: black;
}

#btneditararticulos, #btneditarentrada, #btneditarsalida, #btneditar02, #btneditarinventario{
    background: #eefa01;
    color: black;
}

#btninterno{
    background: #01faedd0;
    color: black;
}

#btnborrar, #btneliminarmovimiento, #btneliminarmarcado, #btnborrarSalida, #btnborrargenerador, #btnborrarsalidagenerador, #btnEliminar, #btnborrarTraslado{
    background: #fa3838;
}

#btnborrararticulos,#imprimeorden, #btnborradesconsolidar, #btnimprimeeir, #btnfecha, #btnfechaDesConsolida{
    background: #fa3838;
}

#btnSolicitudEntrada {
    background: #fa3838;
}

#btnautoriza, #btncuadro, #btnimprime, #btnimprimesalida, #agregaCambioPosicion, #btnTimbrar, #btnInstruccionEntrada, #btnInstruccionSalida, #btnSelecciona01, #btnSelecciona02, #btnSelecciona03, #btnInstruccionTraslado, #btnInstruccionEntradadesconsolidar, #btnsuspende02, #btnDescarga{
    background: blue;
}

#btnUbicaElimina, #btnEliminaRemanejo, #btnUbicaElimina2, #btnEliminaRemanejo2, #btnRegresa, #btnRegresa2, #btnRegresaContenedor, #btnRegresaRemanejo, #btnborrarExtra, #btnborrarProveedor{
    background: #fa3838;
    color: white;
}

#btnDescargar{
    background: grey;
    color: black;
}

#emailorden, #btnemailsolicitud{
    background: white;
    color: black;
}

#btnprefactura{
    background: white;
    color: var(--main-color);
}

.btn-catalogo{
    color: black;
    background: #FFC300 ;
    font-size: 1.05rem;
    text-align: center;
    height: 28px;
    width: 30px;
    text-decoration: none;
}

.btn-catalogo2{
    color: white;
    background: #001aff;
    font-size: 1.05rem;
    text-align: center;
    height: 28px;
    width: 30px;
    text-decoration: none;
}

#map {
    height: 100%;
    width: 100%;
}

.caja, .caja2{
    width: 55px;
    height: 30px;
    background-color: #cccccc;
}

.numero, .numero2{
    height: 50%;
    width: 100%;
    font-size: 10em;
    font-weight: bold;
    color:rgb(255, 0, 0);
    background-color: #fff;
    position: absolute;
    /*mix-blend-mode: screen;*/
    text-align: center;
    border: 1px solid rgb(199, 197, 197);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;
    grid-template-columns: 27px 27px 27px 27px 27px 27px 27px 27px 27px;
    /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
}

.container2 {
    display: grid;
    grid-template-columns: 68px 68px 68px 68px 68px 68px;
    /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;*/
}

.container3 {
    display: grid;
    grid-template-columns: 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px 27px;
    /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
}

.container > div {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(225,225,225);
    border: 2px solid rgb(79,185,227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    height: 20px;
}

.container2 > div {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(225,225,225);
    border: 2px solid rgb(79,185,227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 50px;
}

.container3 > div {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(225,225,225);
    border: 2px solid rgb(79,185,227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    height: 20px;
}

input#nombreArchivoEmail{
    display:block;
    padding: 10px 21px;
    border: none;
    color: #fff;
    font-size: 18px;
    background-color:  #1d2eb5  ;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}

/************************************************************************/

#idsolicitud{
    font-size: 5rem; 
    width: 100%;
    background:green ;
    color:white;
}

#imprimeorden {
    background: white;
    color: black;
}

#btnver, #btnimprime, #btnautorizaentrada, #btnasigna, #btncambioPosicion, #btnfactura, #btnVer, #nombreCxP{
    background: #346611;
}

#btnverMascota, #btnverCliente,#btnverpatio {
    background: #346611;
}

#btneditarUsuario,#btneditarAgenteAduanal,#btneditarTransportista{
    background: #eefa01;
    color: black;
}

#btneditarMascota, #btneditarCliente, #btneditarLinea {
    background: #eefa01;
    color: black;
}

#btnDeposito,#btnDepositoSalida{
    background: #346611;
}

#btneditar, #btneditarExcepcion, #btneditarsalida, #btncambioClase, #btneditarProveedor, #btnpersonalPreventivo{
    background: #eefa01;
    color: black;
}

#btneditarEntradaLocal,#btneditarSalidaLocal,#btneditarinventario02,#btneditarinventario03,#btneditarinventario04{
    background: #eefa01;
    color: black;
}

#btneditar, #btneditarHorometro, #btnpersonalCorrectivo, #btneditarordentrabajo, #btneditar07, #btneditarFactores{
    background: #eefa01;
    color: black;
}
#btneditarUsuarioInterno{
    background: #eefa01;
    color: black;
}

#btnimprimesolicitud,#btnborrarEntradaLocal,#btnborrarSalidaLocal, #btnrefaccionesCorrectivo{
    background: grey;
    color: black;
}

#btnborrar, #btnborrar03, #btnborrarCaptura, #btncorrige, #btnsolicitud, #btneliminarExcepcion, #btnsolicitudsalida, #btneliminaAsignacion, #btncancela, #btnEliminar, #btnCancelar{
    background: #fa3838;
    color: white;
}

#btncerrarPreventivo, #btnborrarhorometro, #btncerrarCorrectivo, #btnborrarOrden, #btnEliminarRelacion, #btnliberarinventario, #rechazaOrden, #btnEliminaInterno, #btnEliminaRollo01{
    background: #fa3838;
    color: white;
}

#btnborrarPartida,#btnEliminarParametros, #btnborrarLinea,#btneliminaSolicitudEntrada {
    background: #fa3838;
    color: white;
}

#btnborrarUsuario,#btnborrarAgenteAduanal,#btnborrarAsignacion,#btnborrarTransportista,#btnborrarUsuarioInterno{
    background: #fa3838;
    color: white;
}

#btnpublicarsalida,#btnpublicarentrada{
    background: #8ac67d;
    color: black;
}

#btnautoriza, #btncuadro, #autorizaorden, #btneir, #btneirsalida, #btncambioEmbalaje, #btnTimbrar, #btnModificaBL{
    background: blue;
    color: white;
}

#btnmodificaReferenciaSalida,#btnmodificaReferenciaEntrada, #btnimprimirPreventivo, #btnimprimirCorrectivo, #btnRequisicion{
    background: blue;
    color: white;
}

#btnvobo, #registraPago, #btnTrabajadores, #btnReciboMovimientos{
    background: blue;
    color: white;
}

#btninformacion, #btninformacionautoriza, #btninformacionmail, #btninformacionsalida, #btnprefactura{
    background: #06bed1;
    color: black;
}

#btninformacionLocal,#btninformacionsalidaLocal{
    background: #06bed1;
    color: black;
}

#btnRelacionado{
    background:darkorange;
    color: black;
}

.btn-purple, #btnTimbrarMovimientos {
    background-color: #9368E9;
}
  

  

/*folio liverpool audifonos 1-26856229359*/