/* TEXT */

.text-blue-title {
   color: #506ee4 !important;
}

.text-line-height-15 {
    line-height:1.5 !important;
}

/* TEXT */

/* TOPBAR */
/* Cambiar el color del hamburger */
.navbar-toggle span {
    background-color: #FFF !important;
}

/* Cambiar bk-color topbar */
[data-layout="horizontal"] .topbar {
    background-color: #0d1021 !important;
}

    [data-layout="horizontal"] .topbar .topbar-left {
        background-color: #0d1021;
    }

    /* Cambia el nombre de los roles del entorno */
    [data-layout="horizontal"] .topbar .navbar-custom .text-muted {
        /*color: rgb(46, 56, 100) !important;*/
        color: #506ee4 !important;
    }

    /* Usado para darle estilo 1l titulo en mobile del rol en el company group (SI,VO)*/ 
  /*  [data-layout="horizontal"] .topbar .navbar-custom .dropdown-item.text-muted {
        color: #ecdcdc !important;
    }*/

[data-layout="horizontal"] .navbar-custom {
    background-color: #0d1021;
}

[data-layout="horizontal"] .navigation-menu .topbar-item:hover {
    background-color: #1a203a !important;
    fill-opacity: 0.5;
}

/* Cambiar el color de los navlinks*/
.nav-pills .nav-link {
    color: white !important;
}

    .nav-pills .nav-link.disabled {
        color: #8c97b7 !important;
    }

/* override el backgrund del Profile del usuario */
[data-layout="horizontal"] .navbar-custom .topbar-nav li.show .nav-link {
    /*background-color: #617cff !important;*/
    background-color: transparent !important;
}

/* Seteo para marcar la empresa en la que estas logueado */
.nav-doubleline-link {
    color: #aaa8a8;
}

.nav-doubleline-link.currentrole {
    color: white;
    border-bottom: 3px solid #506ee4;
}



/* TOPBAR */
/* NAVBAR */
.navbar-custom-menu {
    background-color: #1a203a !important;
}

/* Hover de los items principales*/
/*[data-layout="horizontal"] .navigation-menu > li:hover .navbar-link::before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    border: solid transparent;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-color: transparent;
    border-bottom-width: medium;
    border-left-width: medium;
    border-bottom-color: #0d1021;
    border-width: 7px;
}*/

/* BK mas claro cuando se hace el hover */
[data-layout="horizontal"] .navigation-menu > li:hover {
    background-color: rgb(34, 42, 77) !important;
}

/* Color mas blanco del texto en hover de los links del navbar*/
[data-layout="horizontal"] .navigation-menu > li:hover a {
    color: #fff;
}


/* Cuando esta seleccionado el item colocar la flecha que indica que esta seleccionado */
[data-layout="horizontal"] .navigation-menu > li.active .navbar-link::before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    border: solid transparent;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-color: transparent;
    border-bottom-width: medium;
    border-left-width: medium;
    border-bottom-color: #0d1021;
    border-width: 7px;
}

/* Background para el hover */
[data-layout="horizontal"] .navigation-menu > li.active {
    background-color: rgb(46, 56, 100) !important;
}

/* Mas claro el color de los links */
.navbar-custom-menu .navigation-menu > li > a {
    color: #ecdcdc;
}

.navbar-custom-menu .navigation-menu > li.active > a {
    color: #fff;
}

/* Cambiar el fondo de los submenus cuando estan seleccionados */
/*.navbar-custom-menu .has-submenu.active .submenu li.active {
    background-color: rgb(46, 56, 100) !important;
}

    .navbar-custom-menu .has-submenu.active .submenu li.active a:hover {
        background-color: rgb(46, 56, 100) !important;
    }
    */
/* Usado para eliminar el bold de los link principales del menu  */

/* Saco el fondo del hover sobre el item del menu porque no cubre la zona requerida*/
.navbar-custom-menu .navigation-menu > li .submenu-tab li a:hover,
.navbar-custom-menu .navigation-menu > li .submenu li a:hover {
    background-color: unset !important;
}

.navigation-menu span {
    font-weight:normal;
}

@media (min-width: 992px) {
    .navbar-custom-menu .navigation-menu > li .submenu-tab, .navbar-custom-menu .navigation-menu > li .submenu {
        width: fit-content;
        min-width: unset;
    }

    .navbar-custom-menu .navigation-menu > li.last-elements .submenu {
        left: 0;
    }

    .navbar-custom-menu .navigation-menu > li .submenu-tab > li.has-submenu > a::after, .navbar-custom-menu .navigation-menu > li .submenu > li.has-submenu > a::after {
        position: static;
        padding-left: 10px;
    }
}

@media (max-width: 991px) {
    .navbar-custom-menu .navigation-menu > li.has-submenu.open > a {
        color: unset;
        background-color: rgb(46, 56, 100);
    }

    .navbar-custom-menu .has-submenu.active navbar-link {
        background-color: rgb(46, 56, 100) !important;
    
    }

    [data-layout="horizontal"] .navigation-menu > li.active, .navbar-custom-menu .has-submenu.active {
        background-color: rgb(46, 56, 100) !important;
    }
}

        /* NAVBAR */


        /* TAB - PILLS */
        /* Para ponerle el triangulo en los tabs cuando son seteados como pills */
        .nav-border .nav-link.active::before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 2px;
    border: solid transparent;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-color: transparent;
    border-bottom-width: medium;
    border-left-width: medium;
    border-bottom-color: #506ee4;
    border-width: 7px;
}

.nav-border .nav-link:hover, .nav-border .nav-link.active {
    background-color: rgb(34, 42, 77) !important;
}

/* TAB - PILLS */
/* BODY */
body {
    background-color: #0d1021 !important;
}
/* BODY */


/* LABEL */
label {
    color: #fff !important;
}
/* LABEL */


/* HEADING STYLE */
.h4 {
    font-size: 1.125rem !important;
}
/* HEADING STYLE */

/* ENVIRONMENT CARD */

.environment-card {
    background-color: #10163a !important;
}

/* ENVIRONMENT CARD */

/* BUTTONS */

.btn-text-blue {
    color: #1761fd;
}

    .btn-text-blue:hover {
        background-color: rgba(23, 97, 253, 0.1);
        color: #0051fd;
    }

/* Usado para que el boton de Delete Node en Tab Controller de Vehiculo este a la altura de los botones de Save*/
@media (min-width: 992px) {
    #btnDeleteNode {
        position: absolute;
    }
}

    /* BUTTONS */

    /* DATATABLE */

    /* El panel que se abre tipo acordeon para mostrar acciones de un vehiculo */
    .vehicle_panel {
        background-color: #4e505c !important;
    }

    /* Usado para indicar al usuario que el panel del vehiculo en la lista esta abierto*/
    .vehicle_options_active {
        background-color: #9ba7ca !important;
    }

    /* En vehiculos al usar la tabla como acordeon y tener un boton de dropdown esto evita que el menu no se trunque*/
    table.dataTable tbody tr.shown + tr td {
        overflow: visible !important;
        position: relative;
        z-index: 2;
    }

    .dataTables_processing {
        opacity: 0.8;
    }

    .table {
        color: #ecdcdc;
    }

        /* color del texto del header */
        .table th {
            color: #506ee4;
        }

    /* cambio el color del checkbox */
    table.dataTable tbody td.select-checkbox::before {
        border-color: white;
    }

    table.dataTable thead th.select-checkbox::before {
        border-color: #506ee4
    }

    table.dataTable td {
        white-space: nowrap !important;
        word-break: break-all;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    table.dataTable tbody tr:hover {
        background-color: rgb(46, 56, 100) !important;
    }

        table.dataTable tbody tr:hover > .sorting_1 {
            background-color: rgb(46, 56, 100) !important;
        }


    /* DATATABLE */

    /* MODALS */
    /* Cambio el fondo del modal para que quede igual que el de una card*/
    .modal-content,
    .modal-content .modal-header, .modal-content .modal-footer {
        background-color: #10163a !important;
    }
    /* MODALS */

    /* INPUTS */

    /* Le hago mas oscuro el color del placeholder */

    input.form-control::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #75757e;
    }

    input.form-control::-moz-placeholder, textarea.form-control::-moz-placeholder {
        /* Firefox 19+ */
        color: #75757e;
    }

    input.form-control:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder {
        /* IE 10+ */
        color: #75757e;
    }

    /* Modifico el color de blanco de los input con valor para homogenizar */
    .form-control {
        color: #edf0f5;
    }

    /* SELECT 2 */

    /* Modifico el estilo del select2 para los combos y que tengan igual que el form-control*/
    .select2-container--default .select2-selection--single {
        border: 1px solid #2a2f4e !important;
        border-bottom: 1px solid #2a2f4e !important;
        -webkit-transition: border-color 0s ease-out;
        transition: border-color 0s ease-out;
        height: 38px;
        background-color: #212744;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        background-color: #212744;
        border: 1px solid #2a2f4e;
        color: #d1d1e2;
    }

    .select2-container--default .select2-results__option[aria-selected=true]:not(:focus) {
        background-color: #5897fb !important;
    }

    /* El estado de select2 para disabled y hacerlo igual al resto*/
    .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: #171c40 !important;
        opacity: 1 !important;
    }

        .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
            color: #6c757d !important;
        }



    /* Estilo para el option cuando  sin valor */
    .select2-container--default .select2-results__option[data-value=""], .select2-container--default .select2-selection__rendered.option-any, .select2-results__option:not([id]) {
        color: #75757e;
    }

    .input-validation-error ~ .select2 .select2-selection {
        border-color: #ef4d56 !important;
    }

    /* SELECT 2 */


    /* Modifico el estilo de bootstrap-multiselect y que tengan igual que el form-control*/
    .multiselect-selected-text {
        color: #edf0f5 !important;
    }

    .multiselect-native-select .multiselect-option, .multiselect-native-select .multiselect-container {
        background-color: #10163a;
    }

    .multiselect-native-select .multiselect-container {
        border: 1px solid #2a2f4e !important;
    }

    .multiselect-native-select .multiselect-option:hover, .multiselect-native-select .multiselect-all:hover {
        background-color: #5897fb !important;
    }

    .multiselect-native-select .multiselect-option.active, .multiselect-native-select .multiselect-all.active {
        background-color: #5897fb !important;
    }

    /* Para la opcion de optgroup */
    .multiselect-native-select .multiselect-group.active, .multiselect-native-select .multiselect-group:hover {
        background-color: #1d73fc !important;
    }


    /* Modifico estilo de Jstree */
    .jstree {
        background-color: #212744;
        padding: 8px;
    }

    .jstree-anchor:hover {
        background-color: #5897fb !important;
    }


    /* Cambia en Chrome el user agent stylesheet el texto cuando hacel un auto fill del input*/
    /*input:-internal-autofill-selected,
input:-internal-autofill-selected:hover,
input:-internal-autofill-selected:focus,
textarea:-internal-autofill-selected,
textarea:-internal-autofill-selected:hover,
textarea:-internal-autofill-selected:focus,
select:-internal-autofill-selected,
select:-internal-autofill-selected:hover,
select:-internal-autofill-selected:focus,
input:-internal-autofill-previewed,
input:-internal-autofill-previewed:hover,
input:-internal-autofill-previewed:focus,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-previewed:hover,
textarea:-internal-autofill-previewed:focus,
select:-internal-autofill-previewed,
select:-internal-autofill-previewed:hover,
select:-internal-autofill-previewed:focus {
    -webkit-text-fill-color: #d1d1e2;
}*/

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: #d1d1e2 !important;
    }

    /* Cambio el color del switch cuando esta activado a blanco */
    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        background-color: #fff;
    }

    /* INPUTS */

    /* DATERANGEPICKER */

    .daterangepicker, .daterangepicker .calendar-table {
        background-color: #1c233f;
        color: #aeb4ce;
    }

        .daterangepicker .calendar-table th {
            color: #96b0fa !important;
        }

        .daterangepicker td.active, .daterangepicker td.active:hover {
            background-color: #4d79f6;
            color: #fff !important;
        }

        .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
            background-color: rgba(77, 121, 246, 0.1);
            border-color: transparent;
        }

        .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
            border: solid #fff !important;
            border-width: 0 2px 2px 0 !important;
        }

        .daterangepicker td:hover, .daterangepicker th.prev:hover, .daterangepicker th.next:hover {
            background-color: #4d79f6 !important;
        }
    /* DATERANGEPICKER */

    /* TAB */
    /* Override para que la linea punteada de los tabs sea solida */
    .nav-border.nav.nav-pills {
        border-bottom: 2px solid #2d3552 !important;
    }

    /* TAB */

    /* BACKGROUND AVATAR CONTACT CARD PICTURE */
    .avatar-box .avatar-title {
        background-color: #4e505c !important;
        border: 1px solid #9ba7ca !important;
    }
    /* BACKGROUND AVATAR CONTACT CARD PICTURE */


    /* CONTACT CARD - VALUES */

    .personal-detail {
        min-width: 0;
    }

        .personal-detail li span {
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            text-wrap: nowrap;
        }
    /* CONTACT CARD - VALUES */


    /* BOOTSTRAP MODAL */

    /* Aumento la opacidad del fondo para que resalte el modal */
    .modal-backdrop {
        opacity: 0.8 !important;
    }
    /* Le agrego un borde al modal*/
    .modal-dialog {
        border: 1px solid #506ee4;
    }

    /* BOOTSTRAP MODAL */

    /* FORMS */

    .border-bottom-solid-grey {
        border-bottom: 2px solid #2d3552 !important;
        width: 100%;
    }

        .border-bottom-solid-grey p, p.border-bottom-solid-grey {
            font-size: 0.845rem !important;
            padding-bottom: .5rem !important;
            color: #506ee4;
            margin-bottom: 0px;
        }

    /* FORMS */

    /* POPOVER */

    .popover-body {
        background-color: #212744 !important;
    }

    /* POPOVER */

    /* SWEET ALERT */

    .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
        background: rgba(0,0,0,.80) !important;
    }

    /* Achica el tamaño del titulo */
    .swal2-popup .swal2-title {
        font-size: 1rem !important;
    }

    /* SWEET ALERT */