/* TEXT */

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

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


/* CONSTRAINTS */
.ml-n6 {
    margin-left: -4.5rem !important;
}

.mt-n20 {
    margin-top: 20px !important;
}

/* CONSTRAINTS */

/* COLOR */

.riderbit_bk {
    background-color: #0d1021 !important;
}

/* Cambio los colores de estado - tanto de background, */
.badge-secondary {
    background-color: #33828c;
}

.badge-info {
    background-color: #787d8c;
}

.badge-success {
    background-color: #2F7F2F;
}

.badge-warning {
    background-color: #DF8F00;
}

.badge-danger, bg-danger{
    background-color: #CF2F2F;
}

.badge-sp {
    background-color: #5F0000;
}

.badge-vo {
    background-color: #FF6F00;
}

.badge-si {
    background-color: #004F00;
}

.radio-success {
    color: #2F7F2F;
}

.radio-warning {
    color: #DF8F00;
}
.radio-danger {
    color: #CF2F2F;
}

/* Cambio los colores de fondo, para usar en profile */


/* COLOR */

/* LOGO */
/* Modifico el logo para que de con el ancho */
[data-layout="horizontal"] .topbar .topbar-left .logo .logo-lg {
    height: 60px !important;
    /*left: 0px !important;
    position: fixed;
    margin-left: 4.5rem !important;*/
}

.topbar .topbar-left .logo .logo-sm {
    height: 50px !important;
    /*left: 0px !important;
    position: fixed;
    margin-left: 1rem !important;*/
}
/* LOGO */

/* TOPBAR */

/* Tamaño maximo de environment page */
.environment-page {
    max-width: 460px;
    position: relative;
    margin: 0 auto;
}

/* Elimino line-height en link de topbar para el enviroment */
.nav-doubleline-link {
    padding: 0.75rem;
    max-height: 70px;
    padding-top: 0.9rem !important;
}

/* Centrar los dropdown del topbar y navbar */
.dropdown-item, .navigation-menu > li a {
    display: flex !important;
    align-items: center;
}

.navigation-menu > li a i {
    display: flex !important;
}

.nav-doubleline-link.truncate {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* Alinear el icono de company en la triada en el topbar*/
.nav-user .avatar-box .avatar-title .mdi.rd-mdi-18px {
    position: relative;
    top: 1px;
}

/* 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;
}

/* TOPBAR */
/* NAVBAR */
/* Reglas para habilitar un segundo dropdown en el topbar */
.navbar-custom-menu .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: -1px;
    margin-right: 0;
}

/* Cambio de reglas para eliminar la flecha derecha que indica el submenu seleccionado por una background*/
.navbar-custom-menu .has-submenu.active .submenu li.active > a::before {
    content: unset;
    font-family: unset;
    position: absolute;
    left: unset;
    top: unset;
    font-size: unset;
}

.navbar-custom-menu .has-submenu.active .submenu li.active > a {
    padding-left: 12px;
}

@media (max-width: 768px) {
    .navbar-custom-menu .has-submenu.active .submenu li.active > a {
        padding-left: 20px;
    }
}

    /* Aumento a 15px el tamaño del menu y submenu*/
    [data-layout="horizontal"] .navbar-custom-menu .navigation-menu > li > a {
        font-size: 15px !important;
    }

    .navigation-menu > li a {
        font-size: 15px !important;
    }

    /* Le agrego z-index al menu para darle espacio al ribbon que indica roles*/
    .navbar-custom-menu {
        /*z-index:1000;*/
    }

/* Usado para eliminar el bold de los link principales del menu  */
.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: auto;
        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;
    }
}

    /* NAVBAR */

    /* TABS */
    /* Para luego poder poner el traingulo en el tab seleccionado */
    .nav-border li {
        display: inline-block;
        position: relative;
    }

    /* TABS */

    /* BUTTONS */
/* 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 */

    /* DATATABLES */
/* 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;
}

    /* Por el tema del mensaje de processing para que no sea tan fuerte*/
    .dataTables_processing {
        opacity:0.8;
    }

    /* Por el tema del responsive */
    table {
        width: 100% !important;
    }

    /* Modifico la alineacion vertical de los headers para que quede mejor alineado con checkbox*/
    .table thead th {
        vertical-align: middle;
    }

    /* Para mostrar botones en las filas de dataTables. AHORA NO LO USO */
    .table tr .links {
        display: none;
    }

    .table tr:hover .links {
        display: block;
    }

    /* Reseteo las rules CSS para los botones. La uso para agregar los botones de datatables como el toolbar del template*/
    .reset-btn-datatable {
        background-color: unset;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .reset-btn-datatable:focus,
        .reset-btn-datatable:hover {
            text-decoration: none !important;
            background-color: #171d34 !important;
            border: none !important;
            transition: none !important;
        }

    .dt-buttons {
        width: 100%;
    }

    .buttons-export-datatables .btn-group {
        display: unset;
    }

    .buttons-colvis-datatables .btn-group {
        display: unset;
    }


        /* Color grisado cuando ocultas una columna */
        .buttons-colvis-datatables .btn-group .colvis-disabled {
            color: #505d82 !important;
        }

    /* Hover New entidad en boton en datatable*/

    .btn-expand-label {
        display: flex;
        align-items: center;
        padding: .205rem .55rem;
    }

        .btn-expand-label span {
            max-width: 0;
            -webkit-transition: max-width 1s;
            transition: max-width 1s;
            display: inline-block;
            vertical-align: top;
            white-space: nowrap;
            overflow: hidden;
            /*transition: all 1s ease-in-out;*/
        }

        .btn-expand-label:hover::after span {
            margin-left: 0px;
        }

        .btn-expand-label:hover span {
            max-width: 20rem;
            /*margin-left: .25rem !important;*/
        }

    /* Padding para los botones que estan al lado de un boton expansivo para agregar entidades*/
    .expand-label-next-button {
        padding: .205rem .55rem;
    }

    /* Es para ordenar verticalmente  los checkbox en una tabla con un picture*/
    table.dataTable tbody td.select-checkbox::before {
        position: relative;
        top: 3px;
        border-radius: unset !important;
    }

    table.dataTable tbody td.select-checkbox::after {
        position: relative;
        top: -5px;
        margin-left: -6px !important;
    }



    /* Es para ordenar verticalmente  los checkbox en una tabla sin un picture*/
    .checkbox-aligned-row-wout-pic::before, .checkbox-aligned-row-wout-pic::after {
        top: 1.5em !important;
    }


    /* Agrega un checkbox al header de la tabla para hacer un select all*/
    table.dataTable thead th.select-checkbox {
        position: relative
    }

        table.dataTable thead th.select-checkbox:before,
        table.dataTable thead th.select-checkbox:after {
            display: block;
            position: relative;
            left: 50%;
            width: 12px;
            height: 12px;
            box-sizing: border-box
        }

        table.dataTable thead th.select-checkbox:before {
            content: ' ';
            margin-left: -6px;
            border: 1px solid black;
            border-radius: unset !important;
        }

        table.dataTable thead th.select-checkbox:after {
            top: -7px;
        }

    /* Clase para ordenar la columna con una imagen avatar y su label */
    .td-with-avatar {
        align-items: center;
        justify-content: flex-start;
        display: flex;
        flex-wrap: wrap;
    }

    /* Modifica el th del datatable para agregar centrado vertical cuandio colocamos un icono como un titulo (columan de pictures)*/
    th i.mdi.mdi-18px {
        position: relative;
        top: 2px;
        line-height: normal;
    }

    /* Ancho del menu en mobile para descargar o seleccionar columnas se pasaba del container*/
    .buttons-export-datatables, .buttons-colvis-datatables {
        min-width: unset;
    }

    /* Alineacion de icono para expandir la fila cuando estas en mobile */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
        top: 14px;
    }
    /* Con imagen */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dt-column-with-avatar:first-child::before {
        top: 22px;
    }

    /* DATATABLES */

        
    /* SELECT 2 */

/* Estilo para el option cuando  sin valor */
/* 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 */

    /* Padding para el radio group en formulario*/
    .radio_group_form_control {
        padding: .375rem .75rem !important;
    }


    /* BUTTON */

    /* Elimino la sombra de los botones*/
    .btn, .nav-link {
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    /* Le doy un mismo ancho a los botones de aceptar y cancelar */
    .button-items button.btn {
        min-width: 75px !important;
    }

    /* Adecua el boton que solo lleva un icono por el tema de la diferencia entre mdi y fa */
    table a.btn {
        padding: 0rem .5rem !important;
    }

    /* Adecua los botones de exportar y visibilidad por el tema de la diferencia entre mdi y fa */
    button[aria-controls="datatable"] {
        padding: .205rem .55rem;
    }


    /* BUTTON */

    /* LOGIN */
    /* Cambio la imagen de fondo paara el login */
    .loginbg {
        background-image: url("../images/login_background.png");
        background-size: cover !important;
    }

    .auth-card {
        border-radius: unset !important;
        background-color: #0d1021 !important;
        max-width: 400px !important;
        width: -moz-available; /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        width: fill-available;
    }

    .account-body .auth-card .auth-logo-box .auth-logo {
        padding: 0px !important;
        border: none !important;
    }

    .form-control {
        border-radius: unset !important;
    }

    .auth-form-icon {
        border-radius: unset !important;
    }

    .auth-page-alt {
        max-width: unset !important;
    }

    /* Adecuar el error del login para no te muestre la viñeta */
    .auth-page .validation-summary-errors ul {
        list-style: none;
        padding-left: 0px;
    }


    /* LOGIN */
    /* INPUT STYLES */
    /* Para agregar el cuadrado rojo con la cruz */
    .form-control.input-validation-error {
        border-color: #ef4d56;
        padding-right: calc(1.8em + .75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ef4d56' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23ef4d56' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(.45em + .1875rem) center;
        background-size: calc(.9em + .375rem) calc(.9em + .375rem);
    }

        .form-control.input-validation-error.has-input-append {
            background-position: right calc(2.85em + .1875rem) center !important;
        }

    select.form-control.input-validation-error {
        background-position: right calc(1.5em + .1875rem) center !important;
    }

    /* Achico el tamaño de los textos de error del asp validation*/
    .field-validation-error {
        font-size: smaller !important;
    }

    /* Estilo para el form control con grupos de checkbox*/
    .form-control-checkboxes {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        color: #8997bd;
        background-clip: padding-box;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* Cambiar el tamaño de la preview de la picture del profile */
    .thumb-xl {
        height: 128px !important;
        width: 128px !important;
    }

    /* Estilo para el punto rojo de obligatorio en los forms */
    .dot_red_required {
        font-size: 0.3rem;
        margin-right: 5px;
    }

    /* Estilos para el bootstrap-multiselect*/
    .multiselect-native-select .btn-group {
        width: 100%;
    }

.multiselect-native-select .multiselect.dropdown-toggle {
    border-radius: unset !important;
    text-align: initial;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-option label, .multiselect-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

    /* INPUT STYLES */
    /* FONT */
    /* Obligo a que se Poppins */
    p, .system-text, .divider-custom .divider-text, .morris-chart text, .morris-hover.morris-default-style,
    .flot-chart .flot-y-axis .flot-tick-label,
    .flot-chart .flot-x-axis .flot-tick-label, .apexcharts-legend-text,
    .apexcharts-datalabels text,
    .apexcharts-data-labels,
    .apexcharts-xaxis text,
    .apexcharts-yaxis text, .britechart,
    .tick text, .media, .title-text,
    .header-title, .lightpick, .skill-detail, .project-card,
    .account-body .auth-card .auth-logo-text, .blog-card h4 a {
        font-family: "Poppins", sans-serif !important;
    }

    /* Elimina el formato del texto*/
    .text-transform-none {
        text-transform: unset !important;
    }

    /* FONT */

    /* ICON */

    .rd-mdi-14px.mdi-set, .rd-mdi-14px.mdi::before {
        font-size: 14px;
    }

    .rd-mdi-18px.mdi-set, .rd-mdi-18px.mdi::before {
        font-size: 18px !important;
        padding-top: 1px;
    }


    /* Modifico el tamano del thumbail que muestra cuando no hay imagen y que tenga el mismo tamaño que cuando hay */
    .thumb-xs {
        height: 36px !important;
        width: 36px !important;
    }

    .input-group-mdi-icon {
        padding: .175rem .75rem !important;
    }

    /* Laburo para grupo de botones en la imagen del perfil */
    .second-profile_main-pic-change, .third-profile_main-pic-change {
        width: 24px !important;
        height: 24px !important;
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        transition: all 0.5s ease-in-out !important;
        -webkit-transition: all 0.5s ease-in-out !important; /** Chrome & Safari **/
        -moz-transition: all 0.5s ease-in-out !important; /** Firefox **/
        -o-transition: all 0.5s ease-in-out !important; /** Opera **/
        opacity: 0 !important;
    }

        .second-profile_main-pic-change.shows {
            transform: translate(12px, -32px) !important;
            opacity: 1 !important;
        }

        .third-profile_main-pic-change.shows {
            transform: translate(12px, -60px) !important;
            opacity: 1 !important;
        }

    /* ICON */

    /* Cambio color de tooltip para el apex chart*/
    .apexcharts-tooltip {
        color: #fff !important;
    }


    /* Cambio de los iconos en la view de reportes para que no centrarlo*/
    .align_flex_none {
        align-self: unset !important;
    }

    /* Input disabled text darle un color grisaeso */
.form-control:disabled, label.custom-control-label.disabled {
    color: #6c757d !important;
}

    .input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

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



    /* ENVIRONMENT CARD */
    .environment-card {
        max-width: none !important;
    }

    /* ENVIRONMENT CARD */

    /* IMAGE */

    .img-content-fit {
        object-fit: cover;
    }

    /* IMAGE */


    /*  CROPPER */

    /* Para hacer circular el area de seleccion */
    .cropper-view-box,
    .cropper-face {
        border-radius: 50%;
    }

    .img-container img {
        height: auto;
        width: 100%;
    }


    /* Setear el movimiento para que se achice un poquito */
    #imgContactCropped, .met-profile-main-pic .avatar-box {
        transition: transform .2s;
        cursor: pointer;
    }

        #imgContactCropped:hover, .met-profile-main-pic .avatar-box:hover {
            transform: scale(.9)
        }

    /* CROPPER */

    /* TOAST  */

    .toast-body p {
        margin-bottom: 0px;
        text-align: center;
    }

    /* TOAST */

    /* TABLE */

    #tablepermissions tbody tr {
        padding: .6rem;
    }

    #tablepermissions tbody td {
        font-size: 0.7rem !important;
    }

    /* TABLE */

    /* POPOVER */
    .popover-header {
        padding: 0.25rem 0.6rem;
    }

    .popover-body ul {
        line-height: normal;
        padding: 0.25rem 0.6rem;
    }

    /* POPOVER */

    /* MULTISELECT */

    /* Agrego el width heredado para que si el combo supera el col-3 de bootstrap el dropdown siga creciendo*/
    .multiselect-native-select .multiselect-container {
        width: inherit !important;
    }

    /* MULTISELECT */

/* 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 */


/* 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 */