@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

.bg-gradient-secondary{
    background-image: none;
    background-color: #ecedf0;
}

a.small{
    color:  #707070;
}

.fondo_cian{
    background-color: #01b0f1;
    margin-bottom: 25px;
    padding: 10px 0;
    border-radius: 10px 0 10px 0;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.35);
}

#search_button{
    padding: 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
    background-color: rgba(250,250,250,.1);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    color: #171725;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item {
    color: #5a607f;
}

#wrapper #content-wrapper{
    background-color: #ecedf0;
}

footer{
    background-color: #ecedf0;
}

.sidebar{
    width: initial;
}

.sidebar.toggled {
    width: 7.5rem !important;
}

.colorPpal{
    color: #01b0f1;
}

.btn.btn-primary {
    background-color: #01b0f1;
    border-color: #01b0f1;
}

.btn.btn-primary:hover {
    background-color: #018dc1;
    border-color: #018dc1;
}

.badge-primary {
    background-color: #01b0f1;
}

.big-number div .data-drag-box {
    font-size: 3rem;
}

.bottom_right{
    position: absolute;
    bottom: .85rem;
    right: .85rem;
}

.column_center{
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.column_center_2{
    position: absolute;
    bottom: 1.7rem;
    left: 0;
    width: 100%;
    margin-bottom: 0;
}

.bg-alert-red-light, .bg-alert-light-2 {
    background-color: white;
}

#alerts_aler, #alerts_prom, #alerts_sin, #alerts_con{
    color: #5a5c69!important;
}

.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: #018dc1;
    border-color: #018dc1;
}

.btn.disabled, .btn:disabled {
    opacity: 0.5;
}

/* Botones de sólo borde celeste */

.badge.badge-assigment {
    background-color: #fff;
    color: #018dc1!important;; 
    border: 1px solid #018dc1!important;
}

.badge.badge-assigment.badge-assigment__cancel {
    color: #018dc1!important;; 
    border: 1px solid #018dc1!important;
}

/* Pantalla Gestion de Combustible > Reporte programa */

tbody tr td.text-white{
    color: black!important;
}

a:hover.card.bg-light {
    background-color: #eaf6fa!important;
    border-color: #eaf6fa!important;
}

.badge-success {
    color: #fff;
    background-color: #018dc1!important;
}

.badge-danger {  /* Reportes>Listado de alertas > el cosito de Estado Por gestionar */
    color: white;
    border: solid 1px #018dc1;
    background-color: #018dc1;
}

a.dropdown-item:active{
    background-color: #018dc1;
}

button:active{
    background-color: #01b0f1!important;
    border-color: #01b0f1!important;
}

.btn:active,
button.btn-success:active,
td button.btn.btn-block.btn-secondary.btn-sm,
td button.btn.btn-block.btn-success.assignation_triad:active,
td button.btn.btn-block.btn-success.assignation_triad_automatic:active
{
    background-color: #01b0f1!important;
    border-color: #01b0f1!important;
}

a.btn-link:active,
td a.btn-link:active,
td button.btn:active,
.btn.btn-light.btn-special:active,
button.mapboxgl-ctrl-icon:active,
button.btn-transparent:active,
button.close:active,
button.btn.dropdown-toggle:active,
td a.btn-special:active,
td div.btn-special:active,
div div a.btn-special:active,
div.form-group button#btn_blocked_drivers,
td span.btn.btn-link.font-weight-bold:active,
button#download-btn, /* Facturacion/Digitacion/Descargar listado */
label.btn.btn-link /* Gestion de conductor/Crear conductor */
button#sidebarToggleTop:active
{
    background-color: transparent!important;
    border-color: transparent!important;
    box-shadow: none!important;
}

a.dropdown-item.text-uppercase.filter_order:active,
a.dropdown-item:active,
a.dropdown-item:active i {
    color: white!important;
}

.sidebar-category .category-content div form div div.form-group button#filter_menu:active{
    color: white!important;
    background-color: #3a3b45!important;
}

/*------------- Cambiarlo desde highcharts -------------- */
rect.highcharts-point.highcharts-color-0,
rect.highcharts-point.highcharts-color-1,
rect.highcharts-point.highcharts-color-2,
rect.highcharts-point.highcharts-color-3,
rect.highcharts-point.highcharts-color-4,
rect.highcharts-point.highcharts-color-5,
rect.highcharts-point.highcharts-color-6,
rect.highcharts-point.highcharts-color-7,
rect.highcharts-point.highcharts-color-8,
rect.highcharts-point.highcharts-color-9,
rect.highcharts-point.highcharts-color-10,
rect.highcharts-point.highcharts-color-11,
rect.highcharts-point.highcharts-color-12
{
    fill: rgb(124,181,236);
}

g.highcharts-axis-labels.highcharts-axis-labels text,
text.highcharts-axis-title{
    color: #5a5c69!important;
    fill: #5a5c69!important;
}

button.highcharts-a11y-proxy-button{
    color: #5a5c69!important;
    fill: #5a5c69!important;
}

/* FOCUS */

.form-control:focus{
    color: #6e707e;
    background-color: #fff;
    border-color: #d1d3e2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(93 169 213 / 25%);
}

button.btn.btn-success.btn-user.btn-block:focus,
.btn-primary.focus,
.btn-primary:focus,
.btn.focus,
.btn:focus
{
    box-shadow: 0 0 0 0.2rem rgb(93 169 213 / 25%)!important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #01b0f1;
    border-color: #01b0f1;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: #d1d3e2;
    box-shadow: 0 0 0 0.2rem rgb(93 169 213 / 25%);
  }

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgb(93 169 213 / 25%);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #d1d3e2;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #01b0f1;
    border-color: #01b0f1;
}

button.close:focus{
    outline: 0;
    color: #018dc1;
}

a.btn-link:focus,
td a.btn-link:focus,
td button.btn:focus,
.btn.btn-light.btn-special:focus,
button.mapboxgl-ctrl-icon:focus,
button.btn-transparent:focus,
button.close:focus,
button.btn.dropdown-toggle:focus,
td a.btn-special:focus,
td div.btn-special:focus,
div div a.btn-special:focus,
td span.btn.btn-link.font-weight-bold:focus,
label.btn.btn-link button#sidebarToggleTop:focus {
    box-shadow: none!important;
}

input[type="search"]:focus-visible,
ul.chosen-choices:focus-visible,
li.search-field:focus-visible {
    outline: none;
}


/* ------------------------- */
/* Tabla Panel de Proyección */

table#tabla{
    width: 100%!important;
}

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    border-radius: 40px;
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

.my-custom-scrollbar {
    position: relative;
    padding-top: 0!important;
    max-height: 400px;
    overflow: auto; 
    background-color: #fff;
}
.table-wrapper-scroll-y {
    display: block;
}  

.table{
    display: inline-table;
    flex-direction: column;
    overflow: auto;
    min-height: min-content;
    max-height: 70vh;
}

.table thead {
    position: -webkit-sticky;
    position: sticky;
    justify-self: flex-start;
    top: 0;
    background: white;
    width: fit-content;
    z-index: 10;
}

/* table.table__with-buttons tbody tr td,
table.table__with-buttons thead tr th{
    width: 500px!important;
    max-width: 500px!important;
    min-width: 150px!important;
} */

/* div#tablaContenedor table tbody tr,
div#tablaContenedor table thead tr {
    min-width: 100%!important;
    width: 100%!important;
    display: inline-table;
} */

/* .table{
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: min-content;
    max-height: 70vh;
    min-width: min-content;
    border: red solid 1px;
}


div#tablaContenedor table.table  tr  {
    width: fit-content;
    min-width: min-content!important;
    border: green solid 1px;
} */

/* div#tablaContenedor table tbody tr {
    width: 100%;
    min-width: 100%!important;
} */

.date_th{
    width: 500px!important;
    max-width: 500px!important;
    min-width: 150px!important;
}

table.table.table__with-buttons.table-responsive.table-hover thead tr th:first-child,
table.table.table__with-buttons.table-responsive.table-hover tbody tr td:first-child {
    min-width: 50px;
    max-width: 300px;
}

.dataTables_wrapper.no-footer{
    padding: 20px 0 0 0 !important;
}

/* CUANDO NO HAY INFO */

tr.sinInfo{
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-width: calc(100%)!important;
    position: absolute;
    background-color: #eaf6fa!important;
}

tbody#container_OS_pending .text-center.text__no-data.bg-alert-light.p-2{
    min-width: max-content;
    background-color: white!important;
}

td.sinInfo,
td.dataTables_empty,
tr#tr_chore_empty td.text-center.bg-alert-light,
tr#tr_buy_empty td.text-center.bg-alert-light,
tr#tr_sales_empty td.text-center.bg-alert-light,
.text-center.bg-alert-light.sinInfo{
    position: absolute!important;
    overflow: hidden!important;
    position: -webkit-sticky;
    position: sticky!important;
    justify-self: flex-start!important;
    top: 0;
    min-width: calc(100%)!important;
    padding: 12px 20px!important ;
    border-top: none;
}

tr#tr_buy_empty,
tr#tr_sales_empty,
tr#tr_chore_empty{ 
    display: flex;
    flex-direction: column;
    min-width: calc(100%)!important;
    background-color: #eaf6fa!important;
}

table.table__with-buttons tbody tr td.dataTables_empty{
    min-width: calc(100%)!important;
    max-width: calc(100%)!important;
    width: calc(100%)!important;
    font-size: 0.85rem;
}

#tabla_length{
    display: initial!important;
}

/* Hitos de viajes */

table.dataTable, table.dataTable th, table.dataTable td {
    box-sizing: inherit;
}

div#tabla_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 58px;
    margin-top: 15px;
}

div#tabla_paginate{
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 15px;
}

.inlineTable{
    display: inline-table!important;
}

#navbarToggleExternalContent1 li.nav-item a.nav-link span,
div.collapse-inner a,
#accordionSidebar li.nav-item a.nav-link span.font-weight-bold {
    font-family: 'Lato', sans-serif;
    font-weight: 100!important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active{
    font-family: 'Lato', sans-serif;
}

div.collapse-inner a.collapse-item.active{
    font-weight: 600!important;
}

table#tabla.table__with-buttons thead#thead tr th.px80,
table#tabla.table__with-buttons thead#tbody tr td.px80{
    min-width: 80px!important;
}

table#tabla.table__with-buttons thead#thead tr th.px90,
table#tabla.table__with-buttons thead#tbody tr td.px90{
    min-width: 90px!important;
}

table#tabla.table__with-buttons thead#thead tr th.px100,
table#tabla.table__with-buttons thead#tbody tr td.px100{
    min-width: 100px!important;
}

table#tabla.table__with-buttons thead#thead tr th.px110,
table#tabla.table__with-buttons thead#tbody tr td.px110{
    min-width: 110px!important;
}

table#tabla.table__with-buttons thead#thead tr th.px150,
table#tabla.table__with-buttons thead#tbody tr td.px150{
    min-width: 150px!important;
}

/* Loading */

.swal2-popup.swal2-modal.swal2-show {
    border-left: 0px!important;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 0 0 20px 0;
}

/* Login */

body.login{
    background-image: linear-gradient(104deg, #8fc9f7 25%, #1a8ae3 82%);
}

body.login div.container{
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    background-image: url("../img/curve.svg") ;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-origin:border-box;
    height: 100vh;
    background-size: 100vh;
    position: relative;
    top: 0;
}

body.login div.container .row.justify-content-center{
    height: 100vh;
    width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-around!important;
}

body.login div.container .row.justify-content-center .col-xl-6.col-lg-8.col-md-9{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}

body.login  div.container .row.justify-content-center div.sideTextLogin{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

div.sideTextLogin h2{
    font-weight: bold;
}

/* MIN-WIDTH */
table.table__with-buttons tbody tr td.min90,
table.table__with-buttons thead tr th.min90{
    min-width: 90px!important;
}

table.table__with-buttons tbody tr td.min130,
table.table__with-buttons thead tr th.min130{
    min-width: 130px!important;
}

/* PANEL DE RECEPCIÓN / milestones/reception */

div#documents_panel table tbody tr td span.alert,
div#reception_panel table tbody tr td span.alert{
    color: #e74a3b;
    font-weight: 700;
    padding: 9px;
    border: solid 2px #e74a3b;
    border-radius: 9px;
}

div#documents_panel table tbody tr td span.alert::before,
div#reception_panel table tbody tr td span.alert::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f06a";
    padding-right: 5px;
}

div#documents_panel table tbody tr td span.check,
div#reception_panel table tbody tr td span.check{
    color: #00a748;
    font-weight: 700;
    padding: 9px;
    border: solid 2px #00a748;
    border-radius: 9px;
}

div#documents_panel table tbody tr td span.check::before,
div#reception_panel table tbody tr td span.check::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f058";
    padding-right: 5px;
}

div#documents_panel table thead tr th.acciones,
div#documents_panel table tbody tr td.acciones,
div#reception_panel table thead tr th.acciones,
div#reception_panel table tbody tr td.acciones{
    min-width: 280px!important;
    max-width: 280px!important;
}

div#documents_panel table tbody tr td.acciones,
div#reception_panel table tbody tr td.acciones{
    display: flex;
}

div#documents_panel table tbody tr td.acciones a.btnAutorizar,
div#reception_panel table tbody tr td.acciones a.btnAutorizar,
div#documents_panel table tbody tr td.acciones a.btnCrear,
div#reception_panel table tbody tr td.acciones a.btnCrear,
div#documents_panel table tbody tr td.acciones a.btnCancelar,
div#reception_panel table tbody tr td.acciones a.btnCancelar{
    color: white;
    width: 88px;
    padding: 6px 0;
}

div#documents_panel table tbody tr td.acciones a.btnAutorizar,
div#reception_panel table tbody tr td.acciones a.btnAutorizar,
div#documents_panel table tbody tr td.acciones a.btnAutorizado,
div#reception_panel table tbody tr td.acciones a.btnAutorizado{
    margin-left: 6px;
    margin-right: 10px;
}

div#documents_panel table tbody tr td.acciones a.btnCreado,
div#reception_panel table tbody tr td.acciones a.btnCreado,
div#documents_panel table tbody tr td.acciones a.btnCrear,
div#reception_panel table tbody tr td.acciones a.btnCrear,
div#documents_panel table tbody tr td.acciones a.btnCancelar,
div#reception_panel table tbody tr td.acciones a.btnCancelar{
    margin-left: 0 !important;
}


div#documents_panel table tbody tr td.acciones a.btnCreado,
div#reception_panel table tbody tr td.acciones a.btnCreado,
div#documents_panel table tbody tr td.acciones a.btnAutorizado,
div#reception_panel table tbody tr td.acciones a.btnAutorizado{
    color: #01b0f1;
    border: solid 2px #01b0f1;
    width: 88px;
    padding: 6px 0;
    pointer-events: none;
    cursor: default;
}

button.btn.btnCreado{
    width: auto;
    padding: 6px 12px;
    color: #01b0f1;
    border: solid 2px #01b0f1;
}

button.btn.btnCreado:active{
    color: white;
    border: solid 2px #01b0f1;
}

button.btn.btnCreado:hover{
    background-color: #018dc1;
    border-color: #018dc1;
    color: white;
}

div#upload-files>.modal-dialog{
    max-width: 460px;
}

.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 25px;
    border: 1px dashed rgba(0,0,0, 0.4);
    border-radius: 3px;
    transition: 0.2s;
}

.file-drop-area.is-active {
    background-color: #eaf6fa;
}

.fake-btn {
    flex-shrink: 0;
    background-color: #01b0f1;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 12px;
    text-transform: uppercase;
}

.file-msg {
    font-size: small;
    font-weight: 300;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-document div.modal-body #carouselDocuments a div{
    background-color: #1a8ae3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#view-document div.modal-body #carouselDocuments div.carousel-inner div.carousel-item h6{
    padding-top: 25px;
    text-align: center;
}

#view-document div.modal-body #carouselDocuments a div span.carousel-control-prev-icon{
    margin-left: -2px;
}
#view-document div.modal-body #carouselDocuments a div span.carousel-control-next-icon{
    margin-right: -2px;
}


#view-document div.modal-body #carouselDocuments div.carousel-inner div.carousel-item img{
    margin: auto;
    max-height: 50vh;
}

.font-weight-medium {
    font-weight: 600!important;
}

.greyTop{
    border-top: 1px solid #e3e6f0;
}

input.form-control.ableGray{
    width: 150px;
    border: none;
    border-radius: 0;
}

input.form-control.ableGray:focus{
    box-shadow:none;
}

input.able{
    width: 150px;
}

.tipoGreen{
    color: #00a748;
}

.imgDocumento{
    width: 180px;
    height: 250px;
    border: 1px solid #333638;
}

div#div_general_search form{
    min-width: 230px;
}

#crear-programa .card,
#crear-programa .accordion>.card,
#crear-programa .card-header:first-child {
   border-radius: unset!important;
}

#crear-programa #acordionNotaVenta .card .card-header button.btn.btn-link{
    color: #6e707e;
    text-decoration: none;
}

#crear-programa #acordionNotaVenta .card .card-header button.btn.btn-link:active{
    background-color: white!important;
    border-color: white!important;
    text-decoration: none;
}

#crear-programa #acordionNotaVenta .card .card-header button.btn.btn-link:focus{
    box-shadow: 0 0 0 0.0rem rgb(93 169 213 / 25%)!important;
}

#crear-programa #acordionNotaVenta .card .card-header button.btn.btn-link.collapsed span.chevronDown::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    content: "\f078";
}

#crear-programa #acordionNotaVenta .card .card-header button.btn.btn-link span.chevronDown::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    content: "\f077";
}

div.blue-container{
    background-image: linear-gradient(130deg, #8fc9f7 16%, #1a8ae3 82%);
    border-radius: 10px;
}

div.blue-container div.plate-tag{
    padding: 7px 31.2px 6px 13.8px;
    background-color: #fff;
    border-radius: 25px 0px 0px 25px;
}

div.blue-container div.destination-tag{
    padding: 7px 31.2px 6px 13.8px;
    background-color: #fff;
    border-radius: 0px 25px 25px 0px;
    width: 32%;
}

div.blue-container button.add-destination{
    padding: 7px 13.8px;
    background-color: #fff;
    border-radius: 25px;
    width: 30%;
    border: 0;
}

div.blue-container button.add-destination h6{
    font-size: 15px;
    font-weight: 700;
    color: #1a8ae3;
}

div.blue-container button.add-destination:hover{
    background-color: #1a8ae3;
    border-color: #1a8ae3;
}

div.blue-container button.add-destination:hover h6,
div.blue-container button.add-destination:hover i.fas{
    color: white !important;
}

div.blue-container button.add-destination:not(.disabled):active{
    background-color: #018dc1 !important;
}

div.blue-container button.add-destination:not(.disabled):active h6
div.blue-container button.add-destination:not(.disabled):active i.fas{
    color: white !important;
}

div.blue-container input.form-control,
#crear-programa div.position-container input.form-control,
#crear-programa div.etiqueta-container input.form-control{
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #eaecf4;
    color: #eaecf4;
    border-radius: 0px;
}

#crear-programa div.etiqueta-container input.form-control,
#crear-programa div.position-container input.form-control{
    border-bottom: 1px solid #a2a4ad;
    color: #6e707e;
}

#crear-programa div.etiqueta-container input.form-control:focus,
#crear-programa div.position-container input.form-control:focus{
    box-shadow: none;
}

div.blue-container h4.font-weight-bold{
    font-size: 20px;
}

div.blue-container input.form-control:focus {
    box-shadow: none;
}

div.blue-container input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

#crear-programa .card .accordion>.card:first-of-type{
    border-bottom: 1px solid #e3e6f0;
}

#crear-programa .modal-dialog.modal-lg{
    max-width: 580px;
}

div.blue-container div.form-group.form-group-grid{
    display: grid;
    grid-template-columns: 31% 31% 31%;
    grid-column-gap: 3.5%;
}

#vue_container table.table__with-buttons tbody tr td,
#vue_container table.table__with-buttons thead tr th{
    min-width: 125px!important;
}

#vue_container div#reception_panel table.table__with-buttons thead tr th.conductor,
#vue_container div#reception_panel table.table__with-buttons tbody tr td.conductor{
    min-width: 120px!important;
}

#vue_container .table-responsive table.table__with-buttons tbody tr td.acciones a.btn i{
    font-size: 17px;
}

button.btn.btnCreado.rounded{
    border-radius: 20px !important;
}

/* RESPONSIVE */

@media (max-width: 991px){
    div#projection_panel .container-fluid .col-xl-12.col-lg-12 .row .col-lg-2.px-2 .card.shadow.text-center{
        margin-bottom: 1rem;
    }
}

@media (max-width: 735px){
    div#crear-programa.modal>div.modal-dialog.modal-lg{
        min-width: 100vw!important;
        max-width: 100vw!important;
    }

    #crear-programa div.form-group.form-group-grid {
        display: grid;
        grid-template-columns: 46% 46%;
        grid-column-gap: 4%;
    }

    div#crear-programa.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.form-group{
        flex-direction: column;
    }

    div#crear-programa.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.form-group>div{
        width: 100%!important;
    }

    div#crear-programa.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.form-group>div.d-flex.flex-column{
        margin-top: 3rem!important;
    }
}

@media (min-width: 768px){
    .sidebar {
        width: 16rem!important;
        padding-right: 5px;
        padding-left: 5px;
    }

    .sidebar.toggled .nav-item .nav-link{
        width: initial;
    }
}

@media (min-width: 2000px){
    .topbar .navbar-search{
        width: calc(((100vw - 266px) / 6) - 16px);
    }
}

@media (max-width: 1100px){

    body.login div.container{
        width: 100vw;
        display: flex;
        justify-content: center;
    }

    body.login div.container .row.justify-content-center{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    #view-document>div.modal-dialog>div.modal-content>div.modal-body>div.d-flex {
        flex-wrap: wrap;
    }
}

@media (max-width:990px){
    #documents_panel .container-fluid>div>.row,
    #reception_panel .container-fluid>div>.row{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    div.responsiveTitle>div{
        flex-direction: column;
    }
    div.responsiveTitle>div>span{
        padding-top: 16px;
    }
}

@media (max-width: 700px){
    #documents_panel .container-fluid>div>.row,
    #reception_panel .container-fluid>div>.row{
        grid-template-columns: auto ;
    }
}

@media (max-width: 575px){
    div.responsiveTitle>div>span>div.form-inline>.form-group{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 16px;
    }
    div.responsiveTitle>div>span>div.form-inline>.form-group>label{
        margin-bottom: 0;
    }
    div.responsiveTitle>div>span>div.form-inline>.form-group>button{
        min-width: 100px!important;
    }
}

@media (max-width: 500px){
    body.login div.container .row.justify-content-center .col-xl-6.col-lg-8.col-md-9{
        max-width: 400px;
    }

    body.login div.container .row.justify-content-center .col-xl-6.col-lg-8.col-md-9 .card.o-hidden.border-0.shadow-lg.my-5 .card-body.p-0 .row .col-lg-12 .p-5{
        padding: 35px 20px!important;
    }
}

@media (max-width: 475px){
    div#upload-files.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.form-group{
        flex-direction: column;
    }

    div#upload-files.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.form-group>div.custom-control{
        min-width: 100%;
    }

    div#upload-files.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.file-drop-area{
        flex-direction: column;
    }

    div#upload-files.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.file-drop-area>span.fake-btn{
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
}

@media (max-width: 310px){
    div#upload-files.modal>div.modal-dialog.modal-lg>div.modal-content>div.modal-body>form>div.file-drop-area{
        padding: 25px 0;
    }
}

/* TAMAÑOS MINIMOS */

table thead tr th.min50,
table tbody tr td.min50{
    min-width: 50px!important;
}

table thead tr th.min65,
table tbody tr td.min65{
    min-width: 65px!important;
}

table thead tr th.min70,
table tbody tr td.min70{
    min-width: 70px!important;
}

table thead tr th.min90,
table tbody tr td.min90{
    min-width: 90px!important;
}

table thead tr th.min100,
table tbody tr td.min100{
    min-width: 100px!important;
}

table thead tr th.min110,
table tbody tr td.min110{
    min-width: 110px!important;
}

table thead tr th.min120,
table tbody tr td.min120{
    min-width: 120px!important;
}

table thead tr th.min130,
table tbody tr td.min130{
    min-width: 130px!important;
}

table thead tr th.min150,
table tbody tr td.min150{
    min-width: 150px!important;
}

table thead tr th.min170,
table tbody tr td.min170{
    min-width: 170px!important;
}

table thead tr th.min200,
table tbody tr td.min200{
    min-width: 200px!important;
}

table thead tr th.min250,
table tbody tr td.min250{
    min-width: 250px!important;
}

.white{
    color: white !important;
}

.blue{
    color: #1a8ae3 !important;
}

.blue-bkc{
    background-color: #6ab5f1;
}

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

/* USER_TAC_PANEL */

#view-document #container-status-document{
    margin-left: 60px;
    margin-right: 60px;
}

#view-document #status_document {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 18px;
    margin: 0;
}

#view-document div#container-status-document {
    display: flex;
}

#view-document div#status_icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

#view-document div#container-status-document {
    padding: 10px 20px;
    border-radius: 7px;
}

#view-document div#container-status-document.aprobado{
    border: 1px solid #63b581;
    border-left: 0.25rem solid #63b581;
}

#view-document div#container-status-document.rechazado{
    border: 1px solid #e96464;
    border-left: 0.25rem solid #e96464;
}

#view-document div#container-status-document.pendiente{
    border: 1px solid #01b0f1;
    border-left: 0.25rem solid #01b0f1;
}

#view-document div#container-status-document.aprobado div#status_icon::before{
    color: #63b581; 
    content: "\f058";
}

#view-document div#container-status-document.rechazado div#status_icon::before{
    color: #e96464;
    content: "\f057";
}

#view-document div#container-status-document.pendiente div#status_icon::before{
    color: #01b0f1;
    content: "\f28b";
}

div.tag_aprobado,
div.tag_pendiente,
div.tag_rechazado{
    padding: 0.5em 0.4em;
    text-align: center;
    border-radius: 0.35rem;
    display: flex;
    flex-direction: row;
    max-width: 125px;
    margin: auto;
}

div.tag_aprobado{
    background-color: #63b581;
    color: white;
}

div.tag_pendiente{
    border: 1px solid #01b0f1;
    color: #01b0f1;
}

div.tag_rechazado{
    background-color: #e96464;
    color: white;
}

div.tag_aprobado::before,
div.tag_pendiente::before,
div.tag_rechazado::before{
    padding-right: 5px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
}

div.tag_aprobado::before{
    content: "\f058";
}

div.tag_rechazado::before{
    content: "\f057";
}

div.tag_pendiente::before{
    content: "\f28b";
}

p.no-info{
    margin: 1rem 0;
    text-align:center;
    padding: 0.8rem;
    box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 4px 14px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.25);
}