@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
    --main-color-gray: #50535C;
    --main-color-gray-rgb: 80, 83, 92;
    --main-color-gray-light: #AAAAAA;
    --main-color-gray-white: #EAEAEA;
    --main-text-color: var(--main-color-gray);
    --main-font-family: 'Encode Sans', sans-serif;
    --main-text-family: "Roboto", sans-serif;
}

body {
    font-family: var(--main-text-family)
}

a:hover {
    color: var(--bs-secondary)
}

/*/// INI COLORES GENERALES ///////////////////////////////////////////////////////////////////////////////////////////*/

.text-gray {
    color: var(--main-color-gray) !important;
}

.text-gray-light {
    color: var(--main-color-gray-light) !important;
}

.text-gray-white {
    color: var(--main-color-gray-white) !important;
}


/*/////////////////////////////////////////////////////////////////////////////////////// FIN COLORES GENERALES /////*/


/*/// INI FUENTES GENERALES ///////////////////////////////////////////////////////////////////////////////////////////*/

.fn-w-700 {
    font-weight: 700 !important;
}

.fn-w-600 {
    font-weight: 600 !important;
}

.fn-w-500 {
    font-weight: 500 !important;
}

.fn-w-400 {
    font-weight: 400 !important;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    font-family: var(--main-font-family);
    font-weight: 600;
    line-height: 1.1;
    color: var(--main-text-color);
    margin-bottom: 0.3rem;
}

p {
    margin-bottom: 0.2rem;
}

a,
p,
label,
input,
button {
    font-weight: 400;
    font-family: var(--main-text-family)
}

p,
label,
input,
button {
    color: var(--main-text-color);
}

.form-label,
small,
label {
    font-size: 1em
}


/*/////////////////////////////////////////////////////////////////////////////////////// FIN FUENTES GENERALES /////*/


/*/// INI BOTONES GENERALES ///////////////////////////////////////////////////////////////////////////////////////////*/

.btn-primary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}


/*/////////////////////////////////////////////////////////////////////////////////////// FIN BOTONES GENERALES /////*/


/*/// INI PANTALLA LOGIN ///////////////////////////////////////////////////////////////////////////////////////////*/

.container-bg {
    background-size: cover;
    background-position: center;
}

.authentication-wrapper.authentication-basic {
    justify-content: start
}

.authentication-inner:before,
.authentication-inner:after {
    background-image: none !important
}


/*/////////////////////////////////////////////////////////////////////////////////////// FIN PANTALLA LOGIN /////*/


/*/// INI MENU LATERAL ///////////////////////////////////////////////////////////////////////////////////////////*/

.gen2 .app-brand {
    height: 3.875rem;
    background-color: rgba(var(--bs-primary-rgb), 1);
}

.gen2 .app-brand .layout-menu-toggle i {
    color: white;
}

.gen2 .app-brand-text {
    color: white;
}

.app-brand-logo img {
    max-height: 36px;
}

.layout-menu-collapsed:not(.layout-menu-hover,
.layout-menu-expanded) .gen-sis-name {
    display: none;
}

.menu-inner-shadow {
    top: 3.875rem;
}

.menu-item:not(.active,
.gen-sis-name,
.open):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.4);
}


/*.menu-item:not(.active, .gen-sis-name):hover>.menu-link {
    color: var(--main-color-gray);
}
.menu-item:not(.active, .gen-sis-name):hover>.menu-link:not(.menu-toggle):before {
    background-color: var(--main-color-gray) !important;
}*/

.gen2 .layout-menu .menu-item.active {
    transition: all 0.2s;
}

.gen2 .layout-menu .menu-item .menu-link {
    color: var(--main-color-gray);
}

.gen2 .menu-item:not(.active,
.gen-sis-name) .menu-link:before {
    background-color: var(--main-color-gray) !important;
}

.gen2 .layout-menu .menu-item.active:not(.open) {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.gen2 .layout-menu .menu-item.active:not(.open)>a {
    color: white;
}


/*.gen2 .layout-menu .menu-item.active.open {
    background-color: var(--main-color-gray-white) !important;
}*/

.gen2 .layout-menu .menu-item.active>.menu-link:not(.menu-toggle) {
    background-color: var(--bs-primary);
    color: white;
}

.layout-menu-collapsed:not(.layout-menu-hover,
.layout-menu-expanded).gen2 .layout-menu .menu-inner>.menu-item.active .menu-link {
    background-color: var(--bs-primary);
    color: white !important;
}

.gen2 .layout-menu .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle):before {
    background-color: white !important;
}

.gen2 .layout-menu .menu-toggle-icon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f023";
    font-weight: 900;
    font-size: 1rem;
    line-height: 2;
}

.layout-menu-collapsed.gen2 .layout-menu .menu-toggle-icon:before {
    content: "\f3c1";
}


/*/////////////////////////////////////////////////////////////////////////////////////// FIN MENU LATERAL /////*/


/*/// INI TOP NAV ///////////////////////////////////////////////////////////////////////////////////////////////*/

/* .gen2 nav {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.gen2 nav .dropdown-item {
    color: var(--main-color-gray);
}

.gen2 nav .dropdown-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.5);
}

.gen2 nav .dropdown-notifications-list .list-group-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.5);
}

.gen2 nav .search-input::placeholder {
    color: white;
} */


/*///////////////////////////////////////////////////////////////////////////////////////////// FIN TOP NAV /////*/


/*/// INI CONTENIDO GENERAL ///////////////////////////////////////////////////////////////////////////////////////////////*/

.card-container {
    margin-bottom: 1.6rem;
}

.gen2 .card-header.card-header_bg-gray {
    background-color: rgba(var(--main-color-gray-rgb), 0.1);
    margin-bottom: 1.5rem;
}

.card-header,
.card-header * {
    color: rgba(var(--main-color-gray-rgb), 0.8);
}

.gen2 .titulo-seccion {
    margin-bottom: 2rem;
}

.gen2 .titulo-seccion h5 {
    color: var(--main-color-gray-light);
    font-weight: 400;
}

@media (min-width:1200px) {
    .gen2 .titulo-seccion h5 {
        width: 100%;
    }
}

.gen2 .breadcrumb-wrapper {
    margin-bottom: 1.2rem;
}

.gen2 .breadcrumb-wrapper span {
    font-size: 1rem;
    color: var(--main-color-gray-light);
}

.gen2 .table thead th {
    background-color: var(--main-color-gray-light);
    color: white !important;
}

.gen2 .table.table-gray thead th {
    background-color: var(--main-color-gray-light);
    color: white;
}

.gen2 .table td,
.gen2 .table.table-striped td {
    font-size: 0.8rem;
    color: var(--main-color-gray);
}

.gen2 .table .btn-call-action {
    font-size: 0.7rem;
    text-align: center;
    padding: 0.2rem 0.3rem;
    color: white;
    cursor: pointer;
    margin-bottom: 0.2rem;
    min-width: 24px;
}

.gen2 .table .tr-warning,
.gen2 .table.dataTable .tr-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
    --bs-table-striped-bg: rgba(var(--bs-warning-rgb), 0.1)
}

.gen2 .table .tr-danger,
.gen2 .table.dataTable .tr-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
    --bs-table-striped-bg: rgba(var(--bs-danger-rgb), 0.1)
}

@media (max-width: 560px) {
    .gen2 .table .btn-call-action {
        width: 100%;
        margin-bottom: 0.3rem;
        max-width: 36px;
        font-size: 1rem;
    }
}

.gen2 .table .badge {
    margin-bottom: 0.2rem;
}

.gen2 .accordion>.card:not(:last-of-type) {
    margin-bottom: 0.2rem;
}

.gen2 .accordion-body {
    margin-top: 1rem;
}

.gen2 .accordion-item .accordion-button {
    color: rgba(var(--main-color-gray-rgb), 0.7);
}

.gen2 .accordion-primary .accordion-item:nth-child(odd) {
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.gen2 .accordion-primary .accordion-item:nth-child(even) {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}

.gen2 .accordion-primary .accordion-item:nth-child(odd) .accordion-button {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.gen2 .accordion-primary .accordion-item:nth-child(even) .accordion-button {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.gen2 .accordion-primary .accordion-item:hover .accordion-button {
    background-color: rgba(var(--bs-primary-rgb), 0.5);
}

.gen2 .accordion-primary .accordion-item.active .accordion-button {
    background-color: rgba(var(--bs-primary-rgb), 1);
    color: white !important;
}

.gen2 .accordion-gray .accordion-item:nth-child(odd) {
    border-color: rgba(var(--main-color-gray-rgb), 0.2);
}

.gen2 .accordion-gray .accordion-item:nth-child(even) {
    border-color: rgba(var(--main-color-gray-rgb), 0.1);
}

.gen2 .accordion-gray .accordion-item:nth-child(odd) .accordion-button {
    background-color: rgba(var(--main-color-gray-rgb), 0.1);
}

.gen2 .accordion-gray .accordion-item:nth-child(even) .accordion-button {
    background-color: rgba(var(--main-color-gray-rgb), 0.05);
}

.gen2 .accordion-gray .accordion-item:hover .accordion-button {
    background-color: rgba(var(--main-color-gray-rgb), 0.3);
}

.gen2 .accordion-gray .accordion-item.active .accordion-button {
    background-color: rgba(var(--main-color-gray-rgb), 1);
    color: white !important;
}

.gen2 .accordion .accordion-item.active .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='m1.532 12 6.182-6-6.182-6L0 1.487 4.65 6 0 10.513z'/%3E%3C/defs%3E%3Cg transform='translate%282.571%29' fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23ffffff' xlink:href='%23a'/%3E%3Cuse fill-opacity='.1' xlink:href='%23a'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.gen2 .dataTables_wrapper {
    padding-bottom: 2rem;
}

.gen2 .dataTables_length,
.gen2 .dataTables_info {
    padding-left: 1.2rem;
}

.gen2 .dataTables_filter,
.gen2 .dataTables_paginate {
    padding-right: 1.2rem;
}
/* INPUT Readonly fix padding y algo mas */
input[readonly] {
    background-color: gray !important;
    padding-left: 7px !important;
    color: white !important;
}

input[readonly]::placeholder {
    background-color: gray !important;
    padding-left: 7px !important;
    color: white !important;
}


/*///////////////////////////////////////////////////////////////////////////////////////////// FIN CONTENIDO GENERAL /////*/


/*/// INI FOOTER //////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.gen2 .content-footer {
    background-color: var(--main-color-gray-white) !important;
    color: var(--main-color-gray);
}

.gen2 .content-footer span {
    font-size: 0.8rem;
}

.gen2 .content-footer a {
    color: var(--main-color-gray);
    margin-left: 0.5rem;
}

.gen2 .content-footer a:hover {
    color: var(--bs-primary);
}

/*///////////////////////////////////////////////////////////////////////////////////////////// FIN FOOTER /////*/


/*/// INI PERFIL NO EDITABLE ////////////////////////////////////////////////////////////////////////////////////////////////////*/

.no-edit .input-group *,
.no-edit .select2 * {
    background-color: white !important;
    border: none !important;
    border-color: transparent !important;
    /* pointer-events: none; */
}

.no-edit *::placeholder {
    color: var(--bs-secondary) !important;
    font-size: 1.2rem;
}

.no-edit .select2 span {
    color: var(--bs-secondary) !important;
    font-size: 1.2rem;
}

.no-edit .select2-selection__arrow {
    display: none;
}

.no-edit i {
    color: var(--bs-primary);
    font-size: 1.3rem
}

.no-edit select::selection {
    color: var(--bs-secondary);
}


/*///////////////////////////////////////////////////////////////////////////////////////////// FIN PERFIL NO EDITABLE /////*/


/*/// INI TOASTER CON FONTAWESOME //////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#toast-container>.toast {
    background-image: none !important;
}

#toast-container>.toast.toast {
    opacity: 1;
}

#toast-container>.toast:before {
    position: fixed;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    line-height: 0px;
    color: #FFF;
    position: absolute;
    left: 5%;
    top: 50%;
}

#toast-container>.toast-warning:before {
    content: "\f071";
}

#toast-container>.toast-error:before {
    content: "\f00d";
}

#toast-container>.toast-info:before {
    content: "\f05a";
}

#toast-container>.toast-info {
    background-color: rgba(var(--bs-primary-rgb), 1);
}

#toast-container>.toast-success:before {
    content: "\f058";
}


/*///////////////////////////////////////////////////////////////////////////////////////////// FIN TOASTER CON FONTAWESOME /////*/

/* topScroller */
#topScroller {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 100px;
    z-index: 99;
    font-size: 18px;
    outline: 3px solid #f26f21;
    background-color: #f26f21;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #fff;
  }

  #topScroller:hover {
    background-color: #003940;
    outline: 3px solid #003940;
  }

  html {
    scroll-behavior: smooth;
  }