:root {
     --main-bg-color: #546e7a;
     --main-radius: 3px;
     --main-radius0: .0px;
     --main-transition: .5s;
     --animate-duration: .6s;
     --border-input-color: #bcbbbb;
     --bg-default: var(--main-bg-modcolor);
 }

 .bg-nov,
 .bg-nov:hover {
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important
 }

 .bg-fich,
 .bg-fich:hover {
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important
 }

 .bg-mob,
 .bg-mob:hover {
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important
 }

 .bg-gen,
 .bg-gen:hover {
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important
 }

 .bg-perfil,
 .bg-perfil:hover {
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important
 }

 .bg-custom,
 .bg-custom:hover {
     background-color: rgb(48, 47, 47) !important;
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important;
 }

 .border-custom,
 .border-custom:hover {
     border-color: 1px solid var(--main-bg-modcolor) !important;
 }

 .border-custom-top,
 .border-custom-top:hover {
     border-top: 1px solid var(--main-bg-modcolor) !important;
 }

 .border-custom-bottom,
 .border-custom-bottom:hover {
     border-bottom: 1px solid var(--main-bg-modcolor) !important;
 }

 .text-custom {
     color: var(--main-bg-modcolor) !important;
 }

 .bg-loading {
     background-color: #efefef !important;
     color: #efefef !important;
     border: 1px solid #efefef !important;
 }

 .bg-ddd {
     background-color: #efefef !important;
 }

 .text-ddd {
     color: #efefef !important;
 }

 .border-ddd {
     border: 1px solid var(--border-input-color) !important;
 }

 @font-face {
     font-family: 'Montserrat';
     font-style: normal !important;
     font-weight: 600 !important;
     src: local('Montserrat'), local('Montserrat-Regular'), url(Montserrat/Montserrat-Regular.ttf);
 }

 @font-face {
     font-family: 'Montserrat-SemiBold';
     font-style: normal;
     font-weight: 300;
     src: local('Montserrat-SemiBold'), local('Montserrat-SemiBold'), url(Montserrat/Montserrat-SemiBold.ttf);
 }

 html,
 body {
     /* height: 100%; */
     scroll-behavior: smooth;
     margin: 0 !important;
     padding: 0 !important;
     font-family: 'Montserrat' !important;
     /* font-family: 'Montserrat', sans-serif!important; */
     /* font-style: normal !important; */
     /* font-weight: 400 !important; */
     font-display: swap;
     /* -webkit-font-smoothing: antialiased!important; */
     /* background-color: #e6e6e6 !important; */
     /* background: linear-gradient(#cecece, #fff) !important; */
     background: rgb(250, 250, 250);
     background: -moz-linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     background: -webkit-linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     background: linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafafa", endColorstr="#c6c6c6", GradientType=1);
     letter-spacing: 0;
     touch-action: manipulation;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga" 0;
     position: relative;
     min-height: 100%;
 }

 select option {
     font-family: 'Montserrat', sans-serif;
 }

 #showuser {
     display: none
 }

 #contenedoruser:hover>#showuser {
     display: block;
     position: absolute;
     right: 10px;
 }

 body {
     view-transition-name: page;
 }

 ::view-transition-old(page) {
     animation: fade 0.2s linear forwards;
 }

 ::view-transition-new(page) {
     animation: fade 0.3s linear reverse;
 }

 @keyframes fade {
     0% {
         opacity: 1;
         transform: translateY(0);
     }

     100% {
         opacity: 0;
         transform: translateY(35px);
     }
 }

 .modal {
     padding: 0px !important;
 }

 .container {
     background: #fff !important;
     animation-fill-mode: unset !important;
     min-height: 100vh;
     border-radius: var(--main-radius);
     /* view-transition-name: page; */
 }

 .alert {
     border-radius: var(--main-radius)
 }

 .body-login {
     background: rgb(250, 250, 250);
     background: -moz-linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     background: -webkit-linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     background: linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(198, 198, 198, 1) 70%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafafa", endColorstr="#c6c6c6", GradientType=1);
 }

 .container-fluid {
     background: #ffffff !important;
     animation-fill-mode: unset !important;
     min-height: 100vh;
     border-radius: var(--main-radius)
 }

 .radius-0 {
     border-radius: var(--main-radius0) !important;
 }

 .radius {
     border-radius: var(--main-radius) !important;
 }

 .radius-left {
     border-top-left-radius: var(--main-radius) !important;
     border-bottom-left-radius: var(--main-radius) !important;
 }

 .radius-right {
     border-top-right-radius: var(--main-radius) !important;
     border-bottom-right-radius: var(--main-radius) !important;
 }

 p {
     border-radius: var(--main-radius);
     font-weight: 400 !important;
 }

 input:required:focus {
     border-color: red !important;
     outline: none !important
 }

 select:required:focus {
     border-color: red !important;
     outline: none !important
 }

 .btn {
     border-radius: var(--main-radius)
 }

 .row {
     border: 0 dotted #cecece
 }

 /* .custom-control-label {
    margin-bottom: -10px
} */

 .custom-control-input:checked~.custom-control-label::before {
     color: #fff !important;
     border-color: var(--main-bg-modcolor);
     background-color: var(--main-bg-modcolor);
     box-shadow: none !important;
     outline: 0 !important;
     opacity: .7;
 }

 .sub_menu:hover {
     color: #fff;
     border-color: var(--main-bg-modcolor);
     background-color: var(--main-bg-modcolor);
     opacity: 0.8;
     transition: var(--main-transition);
 }

 .btn {
     cursor: pointer;
     box-shadow: 0 0 0 #cecece !important;
     outline: 0 !important
 }

 .btn:hover {
     box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .15) !important;
     transition: .7s;
     opacity: 1 !important
 }

 @media print {
     .btn {
         display: none !important
     }
 }

 label {
     cursor: pointer;
     font-size: .8em;
     font-weight: 300 !important;
 }

 label:hover {
     font-weight: 400 !important;
     transition: .1s !important;
 }

 .fontt {
     font-size: 1.2rem
 }

 .font1 {
     font-size: 1rem
 }

 .font11 {
     font-size: 1.1rem !important
 }

 .font10 {
     font-size: 1rem !important
 }

 .font09 {
     font-size: .9rem !important
 }

 .font08 {
     font-size: .8rem !important
 }

 @media all and (max-width:767px) {
     .fontm {
         font-size: 1rem !important;
     }
 }

 .font07 {
     font-size: .7rem !important
 }

 .font06 {
     font-size: .6rem !important
 }

 .fontq {
     font-size: .8rem !important
 }

 .fonth {
     font-size: .9rem
 }

 .fontp {
     font-size: .7rem;
 }

 .fontpp {
     font-size: .6rem
 }

 .fontppp {
     font-size: .5rem
 }

 .text-tab {
     font-weight: 400 !important;
 }

 .menu {
     color: #333 !important;
 }
 /*
 .menu:hover {
     color: #fff !important;
     background-color: var(--main-bg-modcolor) !important;
     transition: .5s !important;
     border-radius: var(--main-radius) !important;
 } */

 .form-control {
     background-color: #fff;
     /* border-color: var(--border-input-color); */
     border: 1px solid var(--border-input-color);
     border-radius: var(--main-radius);
     color: #66615b;
     line-height: normal !important;
     font-size: .9rem !important;
     transition: color .5s ease-in-out, border-color .5s ease-in-out, background-color .5s ease-in-out !important;
     box-shadow: none !important;
     outline: 0 !important;
     height: 32px !important
 }

 .monthselect,
 .yearselect {
     background-color: #fff !important;
     border: 1px solid #ddd;
     border-radius: var(--main-radius);
     color: #66615b !important;
     line-height: normal !important;
     font-size: .8rem !important;
     transition: color .5s ease-in-out, border-color .5s ease-in-out, background-color .5s ease-in-out !important;
     box-shadow: none !important;
     outline: 0 !important;
     height: 25px !important;
 }

 .monthselect {
     width: 100px !important;
 }

 .form-control:focus {
     box-shadow: none !important;
     outline: 0 !important;
     border-color: var(--main-bg-modcolor) !important;
     background-color: #fafafa !important
 }

 .form-control-sm:focus {
     box-shadow: none !Important;
     outline: 0 !important;
     border-color: var(--main-bg-modcolor) !important;
     background-color: #fafafa !important
 }

 .custom-select:focus {
     box-shadow: none !Important;
     outline: 0 !important;
     border: 1px solid #3d8dbc !important;
     background-color: #fafafa !important
 }

 .custom-select-sm:focus {
     box-shadow: none !Important;
     outline: 0 !important;
     border: 1px solid #3d8dbc !important;
     background-color: #fafafa !important
 }

 td {
     font-size: 0.9rem !important;
     /* font-weight: 500 !important; */
     color: #333 !important;
     /* font-display: swap !important; */
 }

 tr:hover {
     transition: .5s;
     /* color: #333 !important; */
 }

 td.highlight {
     background-color: rgba(0, 0, 0, .075) !important
 }

 .dtr-title {
     font-weight: 300 !important
 }

 .hob {
     display: inline-block;
     color: var(--main-bg-color) !important;
     text-decoration: none
 }

 .hob::after {
     content: '';
     display: block;
     width: 0;
     height: 2px;
     background: var(--main-bg-color) !important;
     transition: width .6s
 }

 .hob:hover::after {
     width: 100%;
     transition: width .4s;
     color: var(--main-bg-color) !important
 }

 thead {
     font-weight: 300;
     font-size: .7rem
 }

 tfoot {
     font-weight: 300;
     font-size: .7rem
 }

 th {
     vertical-align: middle !important;
     font-weight: 500;
     border-top: 0 !important;
     white-space: nowrap !important
 }

 .th2 {
     vertical-align: middle !important;
     font-weight: 400;
     border-top: 2px solid #dee2e6 !important;
     white-space: nowrap !important
 }

 .bg-light2 {
     background-color: #efefef !important
 }

 .loader {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: url('loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
     opacity: 1;
     background-size: 90px
 }

 .loader2 {
     display: inline-table;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: url('loader.gif') 50% 50% no-repeat;
     opacity: 1;
     background-size: 30px
 }

 .loader-in {
     position: relative;
     left: 0;
     top: 0;
     width: 100%;
     opacity: 0.4;
     background-size: 30px;
     pointer-events: none;
     user-select: none;
 }

 @media (min-width:768px) {
     .collapse.dont-collapse-sm {
         display: block;
         height: auto !important;
         visibility: visible
     }
 }

 @media all and (max-width:480px) {
     .btn-mobile {
         width: 100%;
         height: 40px;
         display: block;
     }
 }

 .w550 {
     width: 550px !important
 }

 .w500 {
     width: 500px !important
 }

 .w450 {
     width: 450px !important
 }

 .w400 {
     width: 400px !important
 }

 .w350 {
     width: 350px !important
 }

 .Mw350 {
     min-width: 350px !important
 }

 .Mw80 {
     min-width: 80px !important
 }

 .Mw30 {
     min-width: 30px !important
 }

 .Mw40 {
     min-width: 40px !important
 }

 .w340 {
     width: 340px !important
 }

 .w330 {
     width: 330px !important
 }

 .w320 {
     width: 320px !important
 }

 .w310 {
     width: 310px !important
 }

 .w300 {
     width: 300px !important
 }

 .w250 {
     width: 250px !important
 }

 .w230 {
     width: 230px !important
 }

 .w200 {
     width: 200px !important
 }

 .w180 {
     width: 180px !important
 }

 .w160 {
     width: 160px !important
 }

 .w150 {
     width: 150px !important
 }

 .Mw150 {
     min-width: 150px !important
 }

 .Mw40 {
     min-width: 40px !important
 }

 .Mw350 {
     min-width: 350px !important
 }

 .minmax50 {
     min-width: 50px !important;
     max-width: 50px !important
 }

 .Mxw150 {
     max-width: 150px !important
 }

 .w140 {
     width: 140px !important
 }

 .w130 {
     width: 130px !important
 }

 .w120 {
     width: 120px !important
 }

 .w110 {
     width: 110px !important
 }

 .w100 {
     width: 100px !important
 }

 .w90 {
     width: 90px !important
 }

 .w85 {
     width: 85px !important
 }

 .w80 {
     width: 80px !important
 }

 .w75 {
     width: 75px !important
 }

 .w70 {
     width: 70px !important
 }

 .w60 {
     width: 60px !important
 }

 .w50 {
     width: 50px !important
 }

 .w30 {
     width: 30px !important
 }

 .w20 {
     width: 20px !important
 }

 .w35 {
     width: 35px !important
 }

 .Mw50 {
     min-width: 50px !important
 }

 .Mw150 {
     min-width: 150px !important
 }

 .w40 {
     width: 40px !important
 }

 .max-h-200 {
     max-height: 200px !important;
 }

 .max-h-300 {
     max-height: 300px !important;
 }

 .max-h-400 {
     max-height: 400px !important;
 }

 .max-h-500 {
     max-height: 500px !important;
 }

 .Mw40 {
     min-width: 40px !important
 }

 .w25 {
     width: 25px !important
 }

 .w15 {
     width: 15px !important
 }

 .wh15 {
     width: 15px !important;
     height: 15px !important
 }

 .w14 {
     width: 14px !important
 }

 .w13 {
     width: 13px !important
 }

 .w12 {
     width: 12px !important
 }

 .w10 {
     width: 10px !important
 }

 .h80 {
     height: 80px !important
 }

 .h70 {
     height: 70px !important
 }

 .h60 {
     height: 60px !important
 }

 .h50 {
     height: 50px !important
 }

 .h40 {
     height: 40px !important
 }

 .h35 {
     height: 35px !important
 }

 .h30 {
     height: 30px !important
 }

 .h25 {
     height: 25px !important
 }

 .h20 {
     height: 20px !important
 }

 .h10 {
     height: 10px !important
 }

 .h5 {
     height: 5px !important
 }

 .form-group {
     margin-bottom: .3rem
 }

 .btn:disabled {
     opacity: .35;
     cursor: not-allowed
 }

 .ls3 {
     letter-spacing: 3px
 }

 .ls2 {
     letter-spacing: 2px
 }

 .ls1 {
     letter-spacing: 1px
 }

 .ls0 {
     letter-spacing: 0
 }

 .fw4 {
     font-weight: 400 !important
 }

 .fw5 {
     font-family: 'Montserrat';
     font-weight: 700 !important;
 }

 .fw3 {
     font-weight: 300 !important
 }

 .fw2 {
     font-weight: 200 !important
 }

 .scale:hover {
     transform: scale(1.3);
     z-index: 1000;
     transition: 0.3s;
 }

 .opa1 {
     opacity: .1
 }

 .opa2 {
     opacity: .2
 }

 .opa3 {
     opacity: .3
 }

 .opa4 {
     opacity: .4
 }

 .opa5 {
     opacity: .5
 }

 .opa6 {
     opacity: .6
 }

 .opa7 {
     opacity: .7
 }

 .opa8 {
     opacity: .8
 }

 .opa8:hover {
     opacity: 1
 }

 .opa9 {
     opacity: .9
 }

 .opa9:hover {
     opacity: 1
 }

 .no-transition {
     -webkit-transition: height .001s;
     -moz-transition: height .001s;
     -ms-transition: height .001s;
     -o-transition: height .001s;
     transition: height .001s;
 }

 .table.dataTable {
     margin-bottom: 0 !important
 }

 input[type=search] {
     padding: 10px;
     background-color: #fff;
     border: 1px solid var(--border-input-color);
     border-radius: var(--main-radius);
     color: #66615b !important;
     line-height: normal !important;
     font-size: .9rem !important;
     transition: color .5s ease-in-out, border-color .5s ease-in-out, background-color .5s ease-in-out !important;
     box-shadow: none !important;
     outline: 0 !important;
     height: 35px !important
 }

 .search-input {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     appearance: none !important;

     ::-webkit-search-cancel-button {
         display: none;
     }

     ::-webkit-search-decoration {
         display: none;
     }

     ::-ms-clear {
         display: none;
     }

     ::-ms-reveal {
         display: none;
     }
 }

 input[type=checkbox] {
     box-shadow: none !important;
     outline: 0 !important;
     transition: .1s !important;
 }

 .btn-link:hover {
     box-shadow: none !important;
     color: var(--main-bg-modcolor) !important;
     font-weight: 400 !important;
     transition: .5s !important;
 }

 .btn-link {
     text-decoration: none !important;
     color: #333333 !important;
 }

 .dataTables_info {
     font-size: small;
     margin-top: 10px
 }

 .accordion,
 .card {
     border: 0 solid #cecece !important
 }

 .dataTables_paginate {
     margin-bottom: 10px !important;
     margin-top: 20px !important;
     border-radius: var(--main-radius-0)
 }

 .page-item {
     font-size: .7rem;
     border-radius: var(--main-radius-0);
     outline: 0 !important;
 }

 .page-item.active .page-link {
     z-index: 1;
     color: #fff !important;
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important;
     border-radius: var(--main-radius-0);
     outline: 0 !important;
 }

 .page-link {
     color: #666666 !important;
     letter-spacing: 1px !important;
     font-size: .8rem !important;
     box-shadow: 0 0 0 #cecece !important;
     outline: 0 !important;
     transition: .4s;
 }

 .page-link:hover {
     opacity: .7;
     color: #fff !important;
     background-color: var(--main-bg-modcolor) !important;
     border-radius: var(--main-radius-0)
 }

 .badge-secondary {
     background-color: var(--main-bg-modcolor) !important
 }

 .badge {
     padding: 5px !important;
     border-radius: var(--main-radius);
     font-weight: 500 !important;
     font-size: 85% !important;
 }

 .daterangepicker {
     font-family: 'Montserrat' !important;
     font-weight: 400;
     font-display: swap;
     box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .15) !important;
     background: #fff !important
 }

 .calendar-table {
     font-weight: 400 !important;
     font-display: swap !important
 }

 .daterangepicker .ranges li {
     font-size: 0.8rem !important;
 }

 .daterangepicker .ranges li:hover {
     transition: var(--main-transition) !important;
     background-color: var(--main-bg-modcolor) !important;
     border-radius: var(--main-radius) !important;
     color: #ffffff;
     opacity: 0.8;
 }

 .daterangepicker .ranges li.active {
     background-color: var(--main-bg-modcolor) !important;
     border-radius: var(--main-radius) !important;
     border-radius: var(--main-radius) !important;
 }

 .daterangepicker td.active,
 .daterangepicker td.active:hover {
     background-color: var(--main-bg-modcolor) !important;
     transition: var(--main-transition) !important;
     color: #fff !important;
 }

 .drp-selected {
     letter-spacing: 1px;
 }

 /* .daterangepicker.show-calendar .ranges {
     margin-top: 0px !important;
 } */

 .daterangepicker .calendar-table .next span,
 .daterangepicker .calendar-table .prev span {
     color: #fff;
     border: solid black;
     border-width: 0 1px 1px 0 !important;
     border-radius: var(--main-radius) !important;
     display: inline-block;
     padding: 3px;
 }

 .daterangepicker .available {
     padding: 5px !important;
     padding-left: 10px !important;
     padding-right: 10px !important;
     font-weight: 500 !important;
 }

 .daterangepicker .disabled {
     padding: 5px !important;
     padding-left: 10px !important;
     padding-right: 10px !important;
     font-weight: 300 !important;
     color: #9b9b9b !important;
 }

 .ranges {
     padding: 7px !important;
 }

 .drp-calendar {
     padding: 5px !important;
     border: 1px solid #efefef !important;
     margin: 8px !important;
     border-radius: var(--main-radius) !important;
 }

 .select2-dropdown {
     border: 1px solid var(--border-input-color) !important;
     border-top: none !important;
 }

 .select2-results__option[aria-selected=true] {
     display: none;
 }

 .select2-container--default.select2-container--focus .select2-selection--multiple {
     border: 1px solid var(--border-input-color) !important;
 }

 .select2-container--default.select2-container .select2-selection--multiple {
     border: 1px solid var(--border-input-color) !important;
     padding-left: 10px;
     border-radius: var(--main-radius)
 }

 .select2-container--default .select2-results>.select2-results__options {
     max-height: 500px;
     border-radius: var(--main-radius-0);
     margin-top: 5px;
     margin-bottom: 5px;
 }

 .select2-container .select2-selection--single .select2-selection__rendered {
     font-size: .9rem !important
 }

 .select2-container .select2-selection--multiple .select2-selection__rendered {
     font-size: .9rem
 }

 .select2-container--default .select2-selection--multiple .select2-selection__choice {
     background-color: var(--main-bg-modcolor) !important;
     opacity: .7 !important;
     color: #ffffff !important;
     border: 1px solid #ffffff;
     border-radius: var(--main-radius);
     cursor: default;
     float: left;
     font-size: .7rem;
     margin-right: 2px;
     margin-top: 7px;
     padding: 2px !important;
     padding-right: 8px !important;
     padding-left: 8px !important;
     transition: var(--main-transition) !important;
 }

 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
     color: #fff !important;
     cursor: pointer;
     display: inline-block;
     font-weight: normal !important;
     margin-right: 3px !important;
     font-size: 1rem;
 }

 .select2-container--default .select2-selection--single .select2-selection__clear {
     color: var(--main-bg-modcolor) !important;
     font-size: 1rem;
 }

 .select2-container--default .select2-selection--multiple .select2-selection__clear {
     color: var(--main-bg-modcolor) !important;
     font-size: 1rem;
 }

 .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: var(--main-bg-modcolor) !important;
     opacity: .8 !important;
     color: white;
     font-size: .9rem !important;
     border-radius: var(--main-radius);
     transition: var(--main-transition) !important;
 }

 .select2-results__option {
     font-size: .9rem !important;
     margin-left: 5px;
     margin-right: 5px;
 }

 .select2-container {
     box-sizing: border-box;
     display: inline-block;
     margin: 0;
     position: relative;
     vertical-align: middle;
     border-radius: var(--main-radius)
 }

 #filtros .select2-container {
     width: 100% !important;
     border-radius: var(--main-radius)
 }

 .select2-container .select2-selection--single {
     height: 40px;
     padding: 5px;
     border-radius: var(--main-radius) !important;
     border-color: var(--border-input-color) !important;
     transition: color .5s ease-in-out, border-color .5s ease-in-out, background-color .5s ease-in-out !important;
     box-shadow: none !important;
     outline: 0 !important
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
     top: 6px;
     right: 6px;
     width: 20px
 }

 .select2-container--default .select2-results>.select2-results__options {
     max-height: 200px !important;
 }

 table.dataTable tbody>tr.selected,
 table.dataTable tbody>tr>.selected {
     background-color: #c9c8c8 !important;
 }

 table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
 table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
     background-color: var(--main-bg-modcolor) !important;
     top: 12px !important
 }

 table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
 table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
     background-color: #cecece !important;
     transition: .5s !important
 }

 .select2-container .select2-selection--single:hover {
     border-color: var(--main-bg-modcolor) !important;
     background-color: #fafafa !important
 }

 .select2-container .select2-selection--multiple:hover {
     border-color: var(--main-bg-modcolor) !important;
     background-color: #fafafa !important
 }

 .tooltip-inner {
     background-color: #fafafa;
     color: #333;
     font-size: 0.7rem;
     z-index: 9999 !important;
     text-align: left !important;
 }

 .switch {
     font-size: 0.9rem !important;
 }

 .tooltip.bs-tooltip-right .arrow:before {
     border-right-color: #fafafa !important;
 }

 .tooltip.bs-tooltip-left .arrow:before {
     border-left-color: #fafafa !important;
 }

 .tooltip.bs-tooltip-top .arrow:before {
     border-top-color: #fafafa !important;
 }

 .tooltip.bs-tooltip-bottom .arrow:before {
     border-bottom-color: #fafafa !important;
 }

 .pointer {
     cursor: pointer !important;
 }

 .form-inline label {
     justify-content: left;
 }

 .nav-tabs .nav-link {
     border-top-left-radius: .0rem;
     border-top-right-radius: .0rem;
 }

 .nav-tabs:hover .nav-tabs:focus {
     transition: var(--main-transition) !important;
 }

 .nav-link:focus,
 .nav-link:hover {
     transition: var(--main-transition) !important;
 }

 .text-gris {
     color: #9b9b9b !important;
 }

 .text-gris:hover {
     color: inherit !important;
 }

 .selectHover:hover {
     color: inherit !important;
 }

 .icon:hover {
     cursor: pointer !important;
     color: #333 !important;
     transition: var(--main-transition) !important;
 }

 .modal-footer {
     border-top: 0px !important;
 }

 /* .modal-backdrop.show .bootbox {
     opacity: 0.2 !important;
 } */

 .modal-content {
     border-radius: var(--main-radius) !important;
 }

 .dropdown-toggle::after {
     margin-left: .455em !important;
     border: solid #767575 !important;
     border-width: 0 1px 1px 0 !important;
     display: inline-block !important;
     padding: 2px !important;
     transform: rotate(45deg) !important;
     -webkit-transform: rotate(45deg) !important;
 }

 .trash {
     margin-top: 5px;
     text-decoration: none !important;
     padding-left: .10rem;
     padding-right: .10rem;
     line-height: 1.5;
     color: #66615b !important;
     outline: 0 !important;
     cursor: pointer !important;
     opacity: 0.3 !important;
     transition: .5s !important;
     font-size: .8rem !important;
 }

 .trash:hover {
     transition: .5s !important;
     box-shadow: none !important;
     opacity: 1 !important;
     color: var(--main-bg-modcolor) !important;
     transition: var(--main-transition) !important;
 }

 .active {
     opacity: .8 !important;
 }

 .btn-outline-custom {
     color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor);
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-outline-custom.custom-white {
     background-color: #fff !important;
 }

 .table-custom,
 .table-custom>td,
 .table-custom>th {
     background-color: var(--main-bg-modcolor);
 }

 .table-light,
 .table-light>td,
 .table-light>th {
     background-color: #f8f9fa;
 }

 /* 
 .table-active {
     background-color: #fafafa !important;
 } */

 .btn-outline-custom:hover {
     color: #fff !important;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-outline-custom.custom-white:hover {
     color: #fff !important;
     background-color: var(--main-bg-modcolor) !important;
     border-color: var(--main-bg-modcolor) !important;
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-outline-custom.focus,
 .btn-outline-custom:focus {
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-outline-custom.disabled,
 .btn-outline-custom:disabled {
     color: var(--main-bg-modcolor) !important;
     background-color: transparent;
 }

 .btn-outline-custom:not(:disabled):not(.disabled).active,
 .btn-outline-custom:not(:disabled):not(.disabled):active,
 .show>.btn-outline-custom.dropdown-toggle {
     color: #fff !important;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-outline-custom:not(:disabled):not(.disabled).active:focus,
 .btn-outline-custom:not(:disabled):not(.disabled):active:focus,
 .show>.btn-outline-custom.dropdown-toggle:focus {
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 .btn-custom {
     color: #fff;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
 }

 .btn-custom:hover {
     color: #fff;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
     -webkit-box-shadow: inset 0px 0px 5px -3px #000000 !important;
     box-shadow: inset 0px 0px 5px -3px #000000 !important;
 }

 .btn-custom.focus,
 .btn-custom:focus {
     color: #fff;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
 }

 .btn-custom.disabled,
 .btn-custom:disabled {
     color: #fff;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
 }

 .btn-custom:not(:disabled):not(.disabled).active,
 .btn-custom:not(:disabled):not(.disabled):active,
 .show>.btn-custom.dropdown-toggle {
     color: #fff;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
 }

 .btn-custom:not(:disabled):not(.disabled).active:focus,
 .btn-custom:not(:disabled):not(.disabled):active:focus,
 .show>.btn-custom.dropdown-toggle:focus {
     box-shadow: 0px 0px 0px 0px var(--main-bg-modcolor) !important;
 }

 /** SPINNER CSS */

 .lds-ellipsis {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 15px;
 }

 .lds-ellipsis div {
     position: absolute;
     top: 6px;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--main-bg-modcolor);
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }

 .lds-ellipsis div:nth-child(1) {
     left: 8px;
     animation: lds-ellipsis1 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(2) {
     left: 8px;
     animation: lds-ellipsis2 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(3) {
     left: 32px;
     animation: lds-ellipsis2 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(4) {
     left: 56px;
     animation: lds-ellipsis3 0.6s infinite;
 }

 @keyframes lds-ellipsis1 {
     0% {
         transform: scale(0);
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes lds-ellipsis3 {
     0% {
         transform: scale(1);
     }

     100% {
         transform: scale(0);
     }
 }

 @keyframes lds-ellipsis2 {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(24px, 0);
     }
 }

 /** FIN SPINNER CSS */

 .pac-container {
     border-radius: var(--main-radius);
 }

 .pac-item {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
     color: #333333;
     padding: 5px;
 }

 .pac-item-query {
     font-style: normal;
     font-weight: 400;
     color: #333333;
     font-size: 1.3em;
 }

 .pac-matched {
     font-style: normal;
     font-weight: 400;
     background: #efefef;
     padding-top: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     border: 1px solid #cecece;
 }

 .pac-item:hover {
     background: #fafafa;
 }

 .pac-item-selected {
     background: #fafafa;
 }

 .pac-container:after {
     /* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */
     background-image: none !important;
     height: 0px;
 }

 /* a[href^="http://maps.google.com/maps"] {
     display: none !important
 }

 a[href^="https://maps.google.com/maps"] {
     display: none !important
 }

 .gmnoprint a, .gmnoprint span, .gm-style-cc {
     display: none !important;
     ;
 }

 .gmnoprint div {
     background: none !important;
 }
 */

 .gm-fullscreen-control {
     background: #fafafa !important;
     opacity: 0.5 !important;
 }

 input::placeholder {
     color: #999;
     opacity: 0.7 !important;
 }

 textarea::placeholder {
     color: #999;
     opacity: 0.7 !important;
 }

 .requerido {
     font-size: .7rem;
     letter-spacing: 1px;
     color: #999;
 }

 .dataTables_wrapper .dataTables_processing {
     position: absolute;
     /* top: 00% !important; */
     /* left: 50% !important; */
     width: 200px !important;
     height: 45px !important;
     margin-left: -20%;
     margin-top: 0px !important;
     padding-top: 20px;
     text-align: center;
     font-size: 0.8em;
     background-color: var(--main-bg-modcolor);
     border-color: var(--main-bg-modcolor);
     border-radius: var(--main-radius);
     color: #fff;
     opacity: 0.6;
 }

 /* width */

 ::-webkit-scrollbar {
     width: 5px !important;
     height: 7px !important;
 }

 /* Track */

 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 /* Handle */

 ::-webkit-scrollbar-thumb {
     background: #c4c3c3;
 }

 /* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
     background: #888;
     cursor: grab;
 }

 @media all and (max-width:480px) {
     /* width */

     ::-webkit-scrollbar {
         width: 2px !important;
         height: 2px !important;
     }

     /* Track */

     ::-webkit-scrollbar-track {
         background: #f1f1f1;
     }

     /* Handle */

     ::-webkit-scrollbar-thumb {
         background: #c4c3c3;
     }

     /* Handle on hover */

     ::-webkit-scrollbar-thumb:hover {
         background: #c4c3c3;
     }
 }

 .bi2::before {
     line-height: 1.5;
     vertical-align: text-top;
 }

 .tr-fw5,
 .tr-fw5>td,
 .tr-fw5>th {
     font-weight: 500 !important;
 }

 @media (min-width:768px) {
     [data-titlel]:hover:after {
         opacity: 0.9;
         transition: all 0.1s ease 0.2s;
         visibility: visible;
     }

     [data-titlel]:after {
         content: attr(data-titlel);
         background-color: #ffffff !important;
         color: #333;
         font-size: 12px;
         position: absolute;
         padding: 5px 20px;
         bottom: -0em;
         right: 110%;
         white-space: nowrap;
         box-shadow: 1px 1px 3px #cecece;
         opacity: 0.9;
         border: 1px solid #cecece;
         z-index: 9999999;
         visibility: hidden;
         border-radius: var(--main-radius);
         font-weight: 400;
     }

     [data-titlel] {
         position: relative;
     }

     [data-titler]:hover:after {
         opacity: 0.9;
         transition: all 0.1s ease 0.2s;
         visibility: visible;
     }

     [data-titler]:after {
         content: attr(data-titler);
         background-color: #ffffff !important;
         color: #333;
         font-size: 12px;
         position: absolute;
         padding: 5px 20px;
         bottom: -.4em;
         left: 110%;
         white-space: nowrap;
         box-shadow: 1px 1px 3px #cecece;
         opacity: 0.9;
         border: 1px solid #cecece;
         z-index: 9999999;
         visibility: hidden;
         border-radius: var(--main-radius);
         font-weight: 400;
     }

     [data-titler] {
         position: relative;
     }

     [data-titlet]:after {
         content: attr(data-titlet);
         background-color: #ffffff;
         color: #333;
         font-size: .8rem;
         position: absolute;
         padding: 5px 20px;
         /* bottom: -.4em; */
         top: -35px;
         left: 0px;
         white-space: nowrap;
         box-shadow: 1px 1px 3px #cecece;
         opacity: 0.9;
         border: 1px solid #cecece;
         z-index: 9999999;
         visibility: hidden;
         border-radius: var(--main-radius);
         font-weight: 400;
     }

     [data-titlet] {
         position: relative;
     }

     [data-titlet]:hover:after {
         opacity: 0.9;
         transition: all 0.1s ease 0.2s;
         visibility: visible;
     }
 }

 .woo-motivation-satisfaction {
     display: none !important;
 }

 .dotting {
     display: inline-block;
     width: 10px;
     min-height: 2px;
     padding-right: 2px;
     border-left: 2px solid currentColor;
     border-right: 2px solid currentColor;
     background-color: currentColor;
     background-clip: content-box;
     box-sizing: border-box;
     -webkit-animation: dot 4s infinite step-start both;
     animation: dot 4s infinite step-start both;
 }

 .dotting:before {
     content: '...';
 }

 /* IE8 */

 .dotting::before {
     content: '';
 }

 :root .dotting {
     margin-left: 2px;
     padding-left: 2px;
 }

 /* IE9+ */

 @-webkit-keyframes dot {
     25% {
         border-color: transparent;
         background-color: transparent;
     }

     50% {
         border-right-color: transparent;
         background-color: transparent;
     }

     75% {
         border-right-color: transparent;
     }
 }

 @keyframes dot {
     25% {
         border-color: transparent;
         background-color: transparent;
     }

     50% {
         border-right-color: transparent;
         background-color: transparent;
     }

     75% {
         border-right-color: transparent;
     }
 }

 [data-notify="container"] {
     font-size: .9rem !important;
     min-height: 60px !important;
     display: flex !important;
     align-items: bottom !important;
     font-weight: 500 !important;
 }

 .confirmDelete {
     border-top: 2px solid #c13333 !important;
 }

 .modal {
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
 }

 .blurtd {
     filter: blur(2px);
     color: #cecece !important;
 }

 .hr1 {
     border-bottom: 1px solid #cecece !important;
     padding-top: 5px !important;
     padding-bottom: 5px !important;
     width: 100% !important;
 }

 .hr2 {
     border-bottom: 2px solid #cecece !important;
     padding-top: 5px !important;
     padding-bottom: 5px !important;
     width: 100% !important;
 }

 #GetPersonal_wrapper .page-link {
     border: 0px solid #333;
 }

 #GetFechas_wrapper .page-link {
     border: 0px solid #333;
 }

 .rotado {
     transform: rotate(180deg);
 }

 .show {
     transition: opacity 700ms;
 }

 .hide {
     opacity: 0;
 }

 .fadeIn {
     animation: fadeIn 0.5s ease-in-out;
 }

 .fadeOut {
     animation: fadeOut 0.5s ease-in-out;
 }

 .fadeInUp {
     animation: fadeInUp 0.5s ease-in-out;
 }

 .flipInX {
     animation: flipInX 0.7s ease-in-out;
 }

 .flash {
     animation: flash 1s ease-in-out;
 }

 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fadeInDown {
     animation-name: fadeInDown;
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }

 @keyframes fadeInLeft {
     0% {
         opacity: 0;
         transform: translateX(-20px);
     }

     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .fadeInLeft {
     animation-name: fadeInLeft;
     animation-duration: 0.7s;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }

 button:focus {
     outline: 0px auto -webkit-focus-ring-color !important;
 }

 .gap5 {
     gap: 5px !important;
 }