/* ---------------------------

[PERSONALIZADOS]

-----------------------------*/

body, html{
    background-color: #f8f9fa;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    margin:0 auto;
    width: 100%; }

a{ 
    color: #fff;
    font-size: 17px;
    text-decoration: none; }

a:hover{ 
    color: #0d6efd !important;
    transition-duration: 1s; }

h1, h2, h3, h4, h5, h6{ 
    font-family: 'Montserrat', sans-serif;
    font-weight: bold; } 


/*------------------------------
            [MENUS]
------------------------------*/
.top-menu{
    float: left;
    width: 30%; }

.logo{ 
    height: auto;
    margin-right: 15px;
    min-width: 70px;
    width: 5%; }

#menu{ 
    background-color: #171b21;
    height: auto;
    left:0px; 
    right:0px; 
    bottom:0px; 
    z-index:999;  }

#container-menu{
    margin: 0 auto;
    width: 52%; }

.box-menu{ 
    color: #F2F2F2;
    float: left; 
    margin: 0 2.23%;
    height: 35px;
    width: 35px;
    text-align: center;
    padding-top: 7px; }

.box-menu:hover{ 
    background-color: #50A7F2;
    border-radius: 8px;
    color: #FFF;
    transform: rotate(45deg);
    transition-duration: 1s; }

#container-login-menu{
    color: #e1e1e1;
    float: left;
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    width: 100%; }

#submenu{ display: none; }

.submenu-cat:hover{
    cursor: pointer;
    color: #ccc !important;
    transition-duration: 1s; }

/*------------------------------
        [RECUPERAR PASS]
------------------------------*/
.recover{ display: none; }

.btn-recover, .return{ cursor: pointer;}

/*------------------------------
        [COLORES]
------------------------------*/
#menu{ 
    background-color: #000; }

#nav-menu-top{
    background-color: #0d6efd;
    color: #fff; }

.box-border-access{
    background-color: #5E90F2;
    box-shadow: 0px 0px 8px #e8e5e5;
    height: 650px; }

.box-border{
    background-color: #5E90F2;
    box-shadow: 0px 0px 8px #e8e5e5; }

.base-color1{
        background-color: #7BD012; }

.base-color1:hover{
    color:#7BD012;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color1-static{ 
    background-color: #7BD012; 
    color:#fff; }

.base-color2{
        background-color: #FFA663; }

.base-color2:hover{
    color:#FFA663;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color2-static{ 
    background-color: #FFA663; 
    color:#fff; }

.base-color3{
        background-color: #F2766B; }

.base-color3:hover{
    color: #F2766B;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color3-static{ 
    background-color: #F2766B; 
    color:#fff; }

.base-color4{
        background-color: #50A7F2; }

.base-color4:hover{
    color: #50A7F2;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color4-static{ 
    background-color: #50A7F2; 
    color:#fff; }

.base-color5{
        background-color: #AA96FF; }

.base-color5:hover{
    color:#AA96FF;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color5-static{ 
    background-color: #AA96FF; 
    color:#fff; }

.base-color6{
        background-color: #FC5A7D; }

.base-color6:hover{
    color:#FC5A7D;
    cursor: pointer;
    background-color: #fff;
    transition-duration: 1s; }

.base-color6-static{ 
    background-color: #FC5A7D; 
    color:#fff; }

.button-add{ 
    background-color: #2AA5F6;
    color: #fff;
    width: 150px; }

.button-add:hover { 
    background-color: #5E90F2;
    color: #fff; }

.button-update{ 
    background-color: #7BD012;
    color: #fff;
    width: 150px; }

.button-update:hover { 
    background-color: #72bf12;
    color: #fff; }

.button-delete{
    background-color: #ff1f4f;
    color: #fff;
    width: 150px; }

.button-delete:hover { 
    background-color: #FC5A7D;
    color: #fff; }

.button-rest{
    background-color: #FFA663;
    color: #fff;
    width: 150px; }

.button-rest:hover { 
    background-color: #ffa663bd;
    color: #fff; }

.color-alert{ 
    color: #FFA663;
    font-size: 14px; }

.mandatory{ 
    text-decoration: underline;
    text-decoration-color: red; }

.nav-links{ color: #fff !important; }

.nav-links:hover{ color: #ccc !important; }

.hover-row-guides:hover{ 
    background-color: #f1f1f1; 
    transition-duration: 1s; }

.doctos-links{ 
    color: #14b720;
    font-size: 24px; }

.inProcess, 
.inClose,
.allOrders{ 
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    text-transform: uppercase; }

.inProcess:hover, 
.inClose:hover,
.allOrders:hover{ font-weight:bolder;  }

.bg-sucess-sheet{ background-color: #14b720 !important; }
.bg-warning-sheet{ background-color: #14b720 !important; }

.greensSheets{ background-color: #14b720; }

.email-link{ cursor: pointer; }

.email-link:hover{ 
    color: #14b720;
    transition-duration: 1s; }
/*------------------------------
     [REGISTRO/LOGIN]
------------------------------*/
.reg, .log{ cursor: pointer; }

.reg:hover, .log:hover{ color:#2AA5F6; }

.legal{ font-size: 13px; }


/*------------------------------
        [Sheets]
------------------------------*/
.box-sheet{ 
    border-radius: 35px 0 35px 0;
    max-width: 465px; }

.circle{
    background-color: #fff;
    border-radius: 45px;
    height: 90px;
    width: 90px;
    text-align: center; }

.truck{ margin-top: 25px; }

.goto{ color: #fff; }

.goto:hover{ color: #cdcdcd; }

#orders-ticket{ 
    border-radius: 0 0 35px 0;
    box-shadow:2px 2px 12px #ccc; }

.order-links{ color: #2a2a2a; }

.order-links:hover{ color: #e1e1e1; }

/*------------------------------
        [ELEMENTOS]
------------------------------*/
.event-box{ 
    float: left; 
    width: 49%; }

.event-box-large{ 
    float: left; 
    width: 100%; }

.box-content-resp{
    float: right;
    width: auto; }

.box-options{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 8px #e8e5e5;
    float: left;
    font-size: 15px;
    height: 80px;
    margin-right: 15px;
    padding: 15px;
    width: 250px; }

.box-opt-left{
    border-radius: 34px;
    color: #fff;
    float: left;
    height: 50px;
    padding: 14px;
    text-align: center;
    width: 50px; }

.box-opt-right{ 
    float: left;
    font-size: 18px;
    padding: 2px 13px;
    width: calc(100% - 66px);}

.fa-chevron-down,
.fa-times{ color: #dfdfdf; } 

.fa-chevron-down:hover,
.fa-times:hover{ color: #2a2a2a; } 

.text-links{ 
    color: #5E90F2;
    text-decoration: none; }

.text-links:hover{ 
    color: #e8b33b;
    transition-duration: 1s; }

.menu-icon-box{
    height: 50px;
    margin-bottom: 10px;
    padding: 14px 12px;
    text-align: center;
    width: 50px; }

.menu-icon-left{ 
    color: #50A7F2;
    font-size:23px; }

.menu-icon-left:hover{
    color: #AA96FF;
    cursor: pointer;
    transition-duration: 1s; }

.box-buttons-verify{ display: none; }

#overlay-mask{ 
    background-color: #2a2a2a;
    height: 100%;
    min-height: 1800px;
    opacity: 0.6;
    position: absolute;    
    width: 100%; }

.cards-contact{ font-size: 14px; }

.list-regions:hover,
.list-services:hover,
.list-turns:hover{ 
    cursor: pointer;
    text-decoration-line: underline; }

.directory-styles{ list-style: none;}

.fa-plus-square{ cursor: pointer; }
.fa-minus-square{ cursor: pointer; display: none; }

.subfolder{ display: none; }

.fa-link{ 
    color: #ced4da;
    cursor: pointer; }

.fa-link:hover{ 
    color: #2a2a2a;
    transition-duration: 1s; }

#accidents, #experience, #photos{ display: none;} 

.show-experience, 
.show-accidents,
.show-photos{ cursor: pointer; }

.box-addresses{ border-radius: 0px 40px 0px 40px; }

#bg-img{ 
    background-image: url("../img/img/bg-body.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    height: 100%; }

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    margin: 72px 0 0 -23px;
    position: absolute; }

.months{ font-size: 12px !important; }

/* -------------------------------
            [FORMS]
--------------------------------*/
.font-forms{ font-size: 14px; }

.form-label{
    color: #2a2a2a;
    font-size: 14px !important;
    font-weight: 600; }

/* -------------------------------
          [FORMS DB]
--------------------------------*/
.form-db{
    border: none;
    border-bottom: 1px solid #e1e1e1;
    padding: 10px;
    width: 100%; }

/* -------------------------------
        [MÓDULO CLIENTES]
--------------------------------*/
#address-panel, #billing-panel{ display: none; }

#cli-incidences-panel,
#cli-billing-panel,
#cli-contact-panel,
#cli-statics-panel,
#cli-quote-panel{ 
    float: left;
    display: none;}

.sub-cli-client,
.sub-cli-address,
.sub-cli-billing,
.sub-cli-contact,
.sub-cli-statics,
.sub-cli-quote{
    background-color: #fff;
    border-radius: 0px 123px 0px 0px;    
    height: 100%;
    float: left;
    width: 100%; }

.sub-cli-address-left{ background-color: #fff; }

.icon-head,
.icon-head-1,
.icon-head-2,
.icon-head-3,
.icon-head-4,
.icon-head-5{ display: none; }

.option-menu-left-2,
.option-menu-left-3,
.option-menu-left-4{ display: none; }

.option-menu-contact-2,
.option-menu-contact-3,
.option-menu-contact-4{ display: none; }

.font-size-address{ font-size: 14px; }

.box-address{ background-color: #f8f9fa; }

#popup-edit-address{ 
    height: auto;
    left: 50%;
    margin-left: -250px;
    position: absolute;
    top: 10%;
    width: 500px; }

.popup-box{ 
    float: left; 
    width: 100%; }

#popup-schedule{
    background-color: #5E90F2;
    height: auto;
    left: 50%;
    margin-left: -350px;
    position: absolute;
    top: 10%;
    width: 700px; }

.schedule-hour-input,
.schedule-min-input, 
.schedule-pt-input{
    border: none;
    font-size: 28px;
    padding: 8px;
    width: 120px; }

.table-shedule{
    text-align: center;
    width: 100%; }

/*------------------------------
    [CENTRO DE IMÁGENES]
------------------------------*/
#media-center-panel{
    background-color: #fff;
    box-shadow: 2px 2px 12px #2a2a2a;
    display: none;
    height: 80%;
    left: 50%;
    margin-left: -45%;
    position: fixed;
    top: 10%;
    width: 90%;
    z-index: 9999; }

#filtros{ 
    font-size: 12px;
    margin-top: 15px; }

#centro-medios{ 
    float:left;
    margin-top: 10px; }

.box-images{
    border: 1px solid #f1f1f1;
    float: left;
    height: 150px;
    margin: 10px;
    overflow: hidden;
    width: 150px; }

#images-panel{ 
    height: 520px;
    overflow-y: scroll; }

.detail-text{ 
    font-size: 12px; }

.open-media-center,
.close-media-center{ cursor: pointer; }

.open-media-center:hover,
.close-media-center:hover{ text-decoration: underline; }

#upload-panel{ display: none; }

.button-upload,
.button-library{ cursor: pointer; }

.drop-area{ 
    border: 2px dashed #ced4da;
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: center;
    margin: 10px auto;
    padding: 25px;
    align-items: center;
    width: calc(100% - 50px); }

.drop-area.active{
    background-color: #c1c1c1; }

.file-container{
    align-items: center;
    display: flex;
    grid-gap: 10px;
    padding: 10px; }

.preview{ 
    height: 186px;
    margin-top: 15px;
    overflow-y: scroll;
    padding: 25px; }

.status-text{ padding: 0 15px; }

.success-img{ color: #7BD012;  }

.failure-img{ color: #FC5A7D; }

.remove-img{ cursor: pointer;}

.thumb-img{
    cursor: pointer;
    height: auto;
    width: 100%; }

.thumb-img:hover{ 
    -webkit-transform:scale(1.3);
    transform:scale(1.3);
    transition-duration: 1s; }

.filter-1,
.filter-2,
.filter-3,
.filter-4{ cursor: pointer; }

#box-thumbnail{ overflow: hidden; }

.delete-img{ cursor: pointer;}

.delete-img:hover{ color: #818181; }

.trash-img{     
    color: #ffffff;
    cursor: pointer;
    text-shadow: 1px 1px 8px #2a2a2a;
    margin-top: 10px;
    position: absolute;
    margin-left: 85px; }

.view-img{     
    color: #ffffff;
    cursor: pointer;
    text-shadow: 1px 1px 8px #2a2a2a;
    margin-top: 80px;
    position: absolute;
    margin-left: 44px; }

.trash-img:hover,
.view-img:hover{ 
    color: #fff;
    font-size: 22px; }

#popup-image{
    border: 8px solid #fff;
    box-shadow: 2px 2px 12px #2a2a2a;
    display: none;
    height: auto;
    margin-left: 50%;
    left: -200px;
    position: fixed;
    top: 10%;
    width: 400px;
    z-index: 999; }

/*------------------------------
        [Profile]
------------------------------*/
.hide-add, .show-add{ cursor: pointer; }

.hide-add2, .show-add2{ cursor: pointer; }

.show-add, .hide-add2{ display: none; }

.address-links{ color: #2a2a2a; }

/*------------------------------
        [Shipping]
------------------------------*/
#msg-upload{ display: none; }

#box-excel{ 
    max-height: 430px;
    overflow: scroll; }

/*------------------------------
        [Pop-Up]
------------------------------*/

#pop-up{
    background-color: #fff;
    box-shadow: 1px 1px 18px #2a2a2a;
    display: none;
    margin-left: 5%;
    margin-top: -10%;
    padding: 25px;
    position: absolute;
    height: auto;
    width: calc(90% - 50px);
    z-index: 9999; }

.close{ cursor: pointer; }


/*------------------------------
    [jQuery Datatables]
------------------------------*/

.button, .dt-button, div.dt-button, a.dt-button, input.dt-button{ 
    background-color: #2AA5F6 !important;
    border: none !important;
    color: #fff !important; }

#table{ width: 100%;  font-size: 16px; }

.paginate_button, previous, next{ 
    cursor: pointer;
    color: #2a2a2a !important;
    margin: 5px; }

.head-table{ cursor: pointer;}

thead, td, .head-table sorting{ font-size: 15px; }

.dataTables_length{ float:right; }

#table_paginate{ float: right; }

/*------------------------------
        [Tracking]
------------------------------*/
.item{ font-size: 12px; }

.card {
    z-index: 0;
    background-color: #ECEFF1;
    padding-bottom: 20px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 10px;
}

.top {
    padding-top: 40px;
    padding-left: 13% !important;
    padding-right: 13% !important;
}

/*Icon progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: #455A64;
    padding-left: 0px;
    margin-top: 30px;
} 

#progressbar li {
    list-style-type: none;
    font-size: 14px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}

#progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f10c";
    color: #fff;
}

#progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    background: #C5CAE9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
}

/*ProgressBar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 12px;
    background: #C5CAE9;
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
}

#progressbar li:nth-child(2):after, #progressbar li:nth-child(3):after {
    left: -50%;
}

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/*Color number of the step and the connector before it*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #14b720;
}

#progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
}

.icon {
    width: 40px;
    height: 35px;
    margin-right: 15px;
}

.icon-content { 
    padding-bottom: 20px;
}

@media screen and (max-width: 992px) {
    .icon-content {
        width: 50%;
    }
}

div.dt-buttons {
    position: relative;
    float: right !important;
}

/*------------------------------
        [POP UP URL]
------------------------------*/

#pop-up-guide{ 
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 1px  1px 12px #2a2a2a;
    display: none;
    height: auto;
    margin-top: 15%;
    min-width: 490px;
    padding: 0;
    position: fixed;
    width: 55%;
    z-index: 9999; }

.pug-left{ 
    background-color: #5E90F2;
    border-radius: 12px 0px 0px 12px;
    float: left;
    padding: 30px;
    width: 20%; }

.pug-right{ 
    background-color: #fff;
    border-radius: 12px;
    float: right;
    height: 80px;
    padding: 30px;
    width: 80%; }

.text-for-client{ font-size: 18px; }

.lbl-url{ font-size: 12px; }

.url-client{ padding: 3px 8px; }

.close-url, .fa-copy{ cursor: pointer; }

.close-url:hover{ font-weight: 600; }

@media screen and (max-width: 1280px) {
    #bg-img{ 
        background-image: url("../img/img/bg-bodyx780.png"); 
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
        min-height: 780px;
        height: 100%; }
}

/*------------------------------
        [POP UP EMAIL]
------------------------------*/

#pop-up-email{ 
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 1px  1px 12px #2a2a2a;
    display: none;
    height: auto;
    margin-top: 15%;
    padding: 25px;
    position: fixed;
    text-align: center;
    width: 335px;
    z-index: 9999; }

/*------------------------------
        [RECEPITS]
------------------------------*/
#receipt-content{
    height: auto;
    margin: 0 auto;
    width: 271mm; }

#receipt-left{
    border: 1px solid #2a2a2a;
    height: 97mm;
    margin-right: 10px;
    width: 89mm; }

#receipt-right{
    border: 1px solid #2a2a2a;
    height: 97mm;
    margin-right: 10px;
    width: 175mm; }

.subbox-receipt{ border-bottom: 1px solid #2a2a2a; }

.business-address{
    line-height: 3mm;
    font-size: 2.5mm;
    text-align: justify; }

.titles-receipt{ 
    display: block;
    font-size: 3mm;
    font-weight: 600; }

.titles-receipt2{ 
    display: block;
    font-size: 3mm;
    font-weight: 600; }

.guide-receipt{ 
    font-size: 4.5mm;
    font-weight: 600; }

#receipt-right-start{
    border-right: 1px solid #2a2a2a;
    height: 95mm;
    width: 76mm; }

#receipt-right-end{
    height: 95mm;
    width: 98mm; }

.top-labels{
    font-size: 2.8mm;
    margin-left: 5px; }

.top-row-data-left{
    height: 10mm;
    margin: 0;
    padding: 0;
    width: 60mm; }

.top-row-data-right{
    border-left: 1px solid #2a2a2a;
    height: 10mm;
    margin: 0;
    padding: 0;
    width: 38mm; }

.row-data-left{
    height: 10mm;
    margin: 0;
    padding: 0;
    width: 40mm; }

.row-data-right{
    border-left: 1px solid #2a2a2a;
    height: 10mm;
    margin: 0;
    padding: 0;
    width: 58mm; }

.row-data-left-big{
    height: 60mm;
    margin: 0;
    padding: 0;
    width: 40mm; }

.row-data-right-big{
    border-left: 1px solid #2a2a2a;
    height: 60mm;
    margin: 0;
    padding: 0;
    width: 58mm; }

.box-data-left-1{
    border-bottom: 1px solid #2a2a2a;
    height: 11mm;
    margin: 0;
    padding: 0; }

.box-data-left-2{
    margin: 0;
    padding: 0; }

.list-text{ 
    display: block;
    font-size: 2.5mm; }

.box-data-right-1{
    border-bottom: 1px solid #2a2a2a; }

.table-receipt{
    font-size: 2.3mm;
    width: 100%; }

.head-receipt{ 
    border-bottom: 1px solid #2a2a2a;
    text-align: center; }

.body-receipt{ 
    font-size: 2.3mm;
    border-bottom: 1px solid #2a2a2a; }

.codebar{ width: 81%; }

/*------------------------------
        [TRACE ORDER]
------------------------------*/
#receipt-content-order{
    font-size: 12px;
    height: auto;
    margin: 0 auto;
    width: 200mm; }

#trace-order-top{ 
    text-align: center;
    width: 120mm; }

.border-left{ border-left: 1px solid #2a2a2a; }
.border-right{ border-right: 1px solid #2a2a2a; }
.border-topo{ border-top: 1px solid #2a2a2a; }
.border-bottomo{ border-bottom: 1px solid #2a2a2a; }

.font-min{ 
    height: 37px;
    font-size: 9px;
    text-align: center; }

.color-bars-order{ background-color: #e1e1e1; }

#table-trace-order{ width: 100%; }

.th-trace-order{ 
    border: 1px solid #2a2a2a;
    font-size: 12px;
    padding: 0 5px; }

.td-trace-order{ 
    border: 1px solid #2a2a2a;
    font-size: 12px;
    padding: 0 5px; }

.form-empty{ 
    border: none;
    padding:4px;
    text-align: right;
    width: 100%; }

/*------------------------------
        [TRACE CLIENTS]
------------------------------*/

#box-clients-tracking{ 
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 1px 1px 12px #ccc; }

/*------------------------------
        [REPORTS]
------------------------------*/
#date1, #date2, #month, #btn-query{ display: none;}

#send-reports{ 
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 2px 2px 12px #c1c1c1;
    display: none;
    height: auto;
    padding: 25px;
    position: fixed;
    margin-top: 15%;
    margin-left: 25%;
    width: 50%; }

/*------------------------------
        [LOADING BAR]
------------------------------*/
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Spinner */
.spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #007bff; /* Color del spinner */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

/* Ocultar el contenido hasta que cargue */
#content-loading {
    display: none;
}