/* BASIC CONF */
:root {
    --primaryColor-0:   #E6F5F7;
    --primaryColor-100: #B3E2E8;
    --primaryColor-200: #80CED9;
    --primaryColor-300: #4DBAC9;
    --primaryColor-400: #1AA7BA;
    --primaryColor-500: #009DB2;
    --primaryColor-600: #008DA0;
    --primaryColor-700: #006E7D;
    --primaryColor-800: #004F59;
    --primaryColor-900: #042A2F;
    --primaryColor-1000:#031E21;

    --secondaryColor-0:   #ECF0F1;
    --secondaryColor-100: #D9E1E2;
    --secondaryColor-200: #B4C3C5;
    --secondaryColor-300: #8EA6A9;
    --secondaryColor-400: #69888C;
    --secondaryColor-500: #436A6F;
    --secondaryColor-600: #365559;
    --secondaryColor-700: #284043;
    --secondaryColor-800: #1B2A2C;
    --secondaryColor-900: #0D1516;
    --secondaryColor-1000:#070B0B;

    --terciaryColor-0:   #F7F8F8;
    --terciaryColor-100: #EEF1F1;
    --terciaryColor-200: #DDE3E3;
    --terciaryColor-300: #CDD6D6;
    --terciaryColor-400: #BCC8C8;
    --terciaryColor-500: #ABBABA;
    --terciaryColor-600: #899595;
    --terciaryColor-700: #677070;
    --terciaryColor-800: #444A4A;
    --terciaryColor-900: #222525;
    --terciaryColor-1000:#111313;

    --successColor-0: #F0FAEB;
    --successColor-100:#D1F0C2;
    --successColor-200:#B3E699;
    --successColor-300:#95DB70;
    --successColor-400:#76D147;
    --successColor-500:#67CC33;
    --successColor-600:#5DB82E;
    --successColor-700:#488F24;
    --successColor-800:#34661A;
    --successColor-900:#1F3D0F;
    --successColor-1000:#0A1405;

    --errorColor-0:    #FEEDE9;
    --errorColor-100:  #FCC9BE;
    --errorColor-200:  #FAA592;
    --errorColor-300:  #F78066;
    --errorColor-400:  #F55C3B;
    --errorColor-500:  #F44A25;
    --errorColor-600:  #DC4321;
    --errorColor-700:  #AB341A;
    --errorColor-800:  #7A2513;
    --errorColor-900:  #49160B;
    --errorColor-1000: #180704;

    --warningColor-0:    #FDF8E7;
    --warningColor-100:  #F9E9B8;
    --warningColor-200:  #F6DB89;
    --warningColor-300:  #F2CD5A;
    --warningColor-400:  #EEBE2B;
    --warningColor-500:  #ECB713;
    --warningColor-600:  #D4A511;
    --warningColor-700:  #A5800D;
    --warningColor-800:  #765C0A;
    --warningColor-900:  #473706;
    --warningColor-1000: #181202;

    --infoColor-0:    #E8F5FC;
    --infoColor-100:  #BAE0F7;
    --infoColor-200:  #8CCCF2;
    --infoColor-300:  #5EB7ED;
    --infoColor-400:  #30A2E8;
    --infoColor-500:  #1998E5;
    --infoColor-600:  #1789CE;
    --infoColor-700:  #126AA0;
    --infoColor-800:  #0D4C73;
    --infoColor-900:  #072E45;
    --infoColor-1000: #020F17;

    --backgroundGrey: #E8EFF7;
    --grey: #788490;

    --fs-smaller: 12px;
    --fs-small:   14px;
    --fs-normal:  16px;
    --fs-h6:      20px;
    --fs-h5:      24px;
    --fs-h4:      32px;
    --fs-h3:      40px;
    --fs-h2:      48px;
    --fs-h1:      56px;

    --livewire-progress-bar-color: var(--primaryColor-700) !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: "Inter", sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
    width: device-width;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 { 
    font-size: var(--fs-h1);
    line-height: 61.6px;
}

h2 { 
    font-size: var(--fs-h2);
    line-height: 52.8px;
}

h3 { 
    font-size: var(--fs-h3);
    line-height: 44px;
    color: var(--primaryColor-700);
    font-weight: 600;
}

h4 { 
    font-size: var(--fs-h4);
    line-height: 35.2px;
}

h5 { 
    font-size: var(--fs-h5);
    line-height: 26.4px;
}

h6 {
    color: var(--secondaryColor-700);
    font-size: var(--fs-h6);
    line-height: 22px;
}

@media (max-width: 900px) {
    h1 { 
        font-size: var(--fs-h2);
        line-height: 61.6px;
    }
    
    h2 { 
        font-size: var(--fs-h3);
    }
    
    h3 { 
        font-size: var(--fs-h4);
    }
    
    h4 { 
        font-size: var(--fs-h5);
    }
    
    h5 { 
        font-size: var(--fs-h6);
    }
    
    h6 {
        font-size: var(--fs-normal);
    }
}

.fs-normal {
    font-size: var(--fs-normal);
}

small {
    color: var(--secondaryColor-300);
    font-size: var(--fs-small);
}

.fs-small {
    font-size: var(--fs-small);
}

.smaller {
    color: var(--secondaryColor-400);
    font-size: var(--fs-smaller);
}

span {
    font-size: var(--fs-small);
}

.fw-normal {
    font-weight: normal;
}

.fw-600 {
    font-weight: 600;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    font-family: "Raleway", sans-serif;
    color: var(--primaryColor-600);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration:none;
}

.ff-secondary {
    font-family: "Raleway", sans-serif;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    height: 100vh;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #F1F4F9;
    overflow: hidden; /* Evitar barras de desplazamiento */
}

/* Si es un contenedor interno con scroll */
main::-webkit-scrollbar {
    width: 8px; /* Ajusta el ancho del scrollbar */
}

main::-webkit-scrollbar-thumb {
    background-color: #c0c0c0; /* Color del scrollbar */
    border-radius: 10px; /* Ajusta el radio de borde según tus preferencias */
}

main::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Color del fondo del scrollbar */
    border-radius: 10px; /* Ajusta el radio de borde según tus preferencias */
}

main {
    height: 100svh;
    /* margin-top: 60px; */
    padding: 0;
    overflow-x: hidden;
    background-image: url("/assets/img/backgrounds/cubos.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

main::-webkit-scrollbar-track {
    padding: 2px 0;
    background-color: var(--primaryColor-100);
}

.logo-clinica {
    max-width: 200px;
    max-height: 150px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .logo-clinica {
        max-width: 125px;
        max-height: 125px;
    }
}


main::-webkit-scrollbar {
    width: 6px;
}

main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--primaryColor-500);
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evitar barras de desplazamiento */
}

#nprogress .bar {
    height: 8px !important;
}

/** CHILD MARGINS **/

.c-mx-2 > * {
    margin-right: .5rem !important;
    margin-left: .5rem !important;
}

.c-mx-2 > *:first-child{
    margin-right: .5rem !important;
    margin-left: 0 !important;
}

.c-mx-2 > *:last-child{
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

.c-mx-2 > *:only-child {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mt-10 {
    margin-top: 6rem !important;
}

.p-8 {
    padding: 5.5rem !important;
}

.py-05 {
    padding-top: 0.12rem !important;
    padding-bottom: 0.12rem !important;
}

.br-5 {
    border-radius: 5px;
}

.br-20 {
    border-radius: 20px;
}

.br-bottom-0 {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.border-bottom-primary-600 {
    border-bottom: 2px solid var(--primaryColor-600);
}

.border-bottom-primary-700 {
    border-bottom: 2px solid var(--primaryColor-700);
}

.border-bottom-terciary-400 {
    border-bottom: 2px solid var(--terciaryColor-400);
}

.desktop-padding {
    padding-left: 150px;
    padding-right: 150px;
}

@media (max-width: 1200px) {
    .desktop-padding {
        padding-left: 100px;
        padding-right: 100px;
    }
}

@media (max-width: 900px) {
    .desktop-padding {
        padding-left: 75px;
        padding-right: 75px;
    }
}

@media (max-width: 600px) {
    .desktop-padding {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 500px) {
    .desktop-padding {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/*******************************************************************/
/****************************** AUTH *******************************/
/*******************************************************************/

.auth-container {
    /* background-color: var(--terciaryColor-100);
    background-image: url("/assets/img/backgrounds/cubos.svg");
    background-size: cover;
    background-repeat: no-repeat; */
    padding: 20px;
}

.auth-container > div {
    width: 465px;
}

@media (max-width: 768px) {
    .auth-container > div {
        width: 80%;
    }
}

/*******************************************************************/
/*************************** COMPONENTS ****************************/
/*******************************************************************/

.dashed-separator {
    height: 3px;
    width: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="280" height="2" viewBox="0 0 280 2" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L279 1.00002" stroke="%238EA6A9" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/></svg>');
}

/***** BOOTSTRAP SELECT ****/
.bootstrap-select>.dropdown-toggle {
    height: 36px;
}

.bootstrap-select>.dropdown-toggle::after {
    display: none;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important; 
}

.dropdown-item {
    display: flex;
    white-space: unset;
    align-items: center;
    padding: 8px var(--bs-dropdown-item-padding-x);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primaryColor-0);
    color: #000;
}

/*****************************/

/***** BOOTSTRAP TABS ****/
.nav-tabs {
    --bs-nav-tabs-border-color: var(--primaryColor-800);
    --bs-nav-tabs-border-width: 1px;
}


.nav-tabs .nav-link {
    border: none;
    color: var(--terciaryColor-600);
    font-weight: 600;
    background-color: var(--terciaryColor-100);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--primaryColor-700);
    background-color: var(--terciaryColor-100);
    border:none;
    border-bottom: 2px solid var(--primaryColor-800);
}

/*****************************/

.custom-overflow-y {
    overflow-y: auto !important;
}

.custom-overflow-y::-webkit-scrollbar-track {
    padding: 2px 0;
    background-color: var(--primaryColor-100);
}

.custom-overflow-y::-webkit-scrollbar {
    width: 6px;
}

.custom-overflow-y::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--primaryColor-500);
}

/*---- BOOTSRAP ACCORDION ----*/
.accordion {
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.accordion-button::after {
    background-image: url('../img/icons/mas.svg');
    filter: invert(89%) sepia(7%) saturate(319%) hue-rotate(139deg) brightness(86%) contrast(90%);
}

.accordion-button:not(.collapsed)::after {
    background-image: url('../img/icons/menos.svg');
    filter: invert(89%) sepia(7%) saturate(319%) hue-rotate(139deg) brightness(86%) contrast(90%);
}

.accordion-button:not(.collapsed) {
    background-color: white;
    box-shadow: none
}

.accordion-button:focus {
    box-shadow: none;
}

/*****************************/

/*---- BOOTSRAP PAGINATION ----*/
.pagination {
    margin-bottom: 0px;
}

.pagination .page-item > .page-link {
    background-color: var(--terciaryColor-0);
    border-color: var(--terciaryColor-0);
    color: var(--terciaryColor-700);
    font-size: var(--fs-small);
    font-weight: 600;
    border-radius: 5px;
}

.pagination .page-item.active > .page-link {
    background-color: var(--primaryColor-0);
    border-color: var(--primaryColor-0);
    color: var(--primaryColor-500);
    border-radius: 5px;
}

.pagination .page-item:not(:first-child):not(:last-child) > .page-link {
    padding: 6px;
}

.pagination .page-item {
    margin: 0px 5px;
    border-radius: 5px;
}

.pagination .page-item:first-child > .page-link {
    background-color: var(--primaryColor-100);
    border-color: var(--primaryColor-100);
    color: var(--primaryColor-700);
}

.pagination .page-item:last-child > .page-link {
    background-color: var(--primaryColor-100);
    border-color: var(--primaryColor-100);
    color: var(--primaryColor-700);
}

.file-upload {
    display: inline-block;
    padding: 7px 20px;
    cursor: pointer;
    border: 2px dashed #d3d3d3;
    border-radius: 4px;
    font-size: 16px;
    color: #6c757d;
}

.file-upload i {
    margin-right: 8px;
}

.file-upload:hover {
    background-color: #f8f9fa;
}

.file-upload-img-container .file-upload-img {
    width: 100%;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 70px;
}

@media (max-height: 700px) {
    .file-upload-img-container img {
        width: 50px;
        height: 50px;
    }
}


.circle {
    width: 20px;
    height: 20px;
    border-radius: 100%;
}

.circle.activated {
    background-color: var(--successColor-200);
}

.circle.deactivated {
    background-color: var(--errorColor-200);
}

.separator {
    border-top: 1px solid #c9c9c9;
    margin-top: 25px;
    margin-bottom: 25px;
}

.thick-separator {
    background-color: var(--secondaryColor-600, #365559);
    opacity: 0.1;
    height: 3px;
    border-radius: 5px;
}

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
}
.admin-table-wrapper::-webkit-scrollbar-track {
    padding: 2px 0;
    background-color: var(--primaryColor-100);
}

.admin-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.admin-table-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--primaryColor-500);
}

.admin-table {
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: var(--terciaryColor-400);
    font-size: var(--fs-small);
    color:  var(--primaryColor-800);
}

.admin-table thead tr {
    background-color: #FBFCFC;
    color: var(--secondaryColor-500);
    font-weight: 600;
}

.admin-table th {
    padding: 20px;
    border: 1px solid var(--terciaryColor-400);
}

.admin-table td {
    padding: 10px 20px;
    border-left: 1px solid var(--terciaryColor-400);
    border-right: 1px solid var(--terciaryColor-400);
}

.admin-table tr:last-child {
    border-bottom: 1px solid var(--terciaryColor-400);
}

.admin-table .table-row:nth-child(even) {
    background-color: var(--terciaryColor-0);
}

.idioma-select-wrapper > select {
    border: none;
    appearance: none;
    background-color: transparent;
    padding: 0px 8px 0px 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--primaryColor-800);
}

.idioma-select-wrapper {
    position: relative;
    display: inline-block;
}

.idioma-select-wrapper > select::-ms-expand {
    background-image: linear-gradient(to right, #ffffff, #d1d3d5);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.idioma-select-wrapper > .arrow {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: var(--primaryColor-800) transparent transparent transparent;
    transition: transform 0.3s ease;
}

.table-container {
    border-radius: 10px; /* Ajusta el valor según tu preferencia */
    box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    overflow-x: auto;
    border: 1px solid #d2d2d2;
}

/* Estilos para el scroll horizontal */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: #d2d2d2;
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 10px;
}

/* Estilos del botón flotante */
.floating-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primaryColor-500);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-decoration: none;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.floating-button > span {
    color: white;
}

.floating-button:hover {
    background-color: var(--primaryColor-700);
    color: white;
    text-decoration: none;
}

input[type="text"], input[type="password"], textarea {
    border-color: var(--terciaryColor-300) !important;
    color: var(--terciaryColor-700) !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 17px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 1px solid var(--primaryColor-500);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 2px;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: var(--secondaryColor-400);
    border: 1px solid var(--secondaryColor-400);
}

input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
    background-color: var(--successColor-200);
    border: 1px solid var(--successColor-600);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.rounded-avatar {
    border-radius: 100%;
    border: 3px solid var(--primaryColor-500);
    flex: none;
}

/*******************************************************************/
/***************************** EVENTS ***********^******************/
/*******************************************************************/

.cursor-pointer {
    cursor: pointer;
}

@media (max-width: 500px) {
    .toastify {
        max-width: calc(90% - 20px);
    }
}


/*******************************************************************/
/*************************** BACKGROUNDS ***************************/
/*******************************************************************/

.toastify.bg-success {
    background: none !important;
    background-color: var(--successColor-0) !important;
    border-left: 3px solid var(--successColor-500) !important;
    color: var(--successColor-700);
}

.toastify.bg-success h6 {
    color: var(--successColor-800);
    margin-bottom: 5px;
}


.toastify.bg-error {
    background: none !important;
    background-color: var(--errorColor-0) !important;
    border-left: 3px solid var(--errorColor-500) !important;
    color: var(--errorColor-700);
}

.toastify.bg-error h6 {
    color: var(--errorColor-800);
    margin-bottom: 5px;
}

.bg-primary-100 {
    background-color: var(--primaryColor-100) !important;
}

.bg-primary-500 {
    background-color: var(--primaryColor-500) !important;
}

.bg-primary-700 {
    background-color: var(--primaryColor-700) !important;
}

.bg-secondary-0 {
    background-color: var(--secondaryColor-0) !important;
}

/*******************************************************************/
/***************************** BUTTONS *****************************/
/*******************************************************************/


/*******************************************************************/
/***************************** ALERTS ******************************/
/*******************************************************************/

.alert {
    font-weight: 600;
}

.alert-primary-0 {
    --bs-alert-color: var(--primaryColor-0);
    --bs-alert-bg: var(--primaryColor-0);
    --bs-alert-border-color: var(--primaryColor-0);
    --bs-alert-link-color: var(--primaryColor-0);
    color: var(--primaryColor-600);
}

.alert-terciary-0 {
    --bs-alert-color: var(--terciaryColor-0);
    --bs-alert-bg: var(--terciaryColor-0);
    --bs-alert-border-color: var(--terciaryColor-0);
    --bs-alert-link-color: var(--terciaryColor-0);
    color: var(--primaryColor-800);
}

.alert-terciary-100 {
    --bs-alert-color: var(--terciaryColor-100);
    --bs-alert-bg: var(--terciaryColor-100);
    --bs-alert-border-color: var(--terciaryColor-100);
    --bs-alert-link-color: var(--terciaryColor-100);
    color: var(--primaryColor-800);
}

.alert-warning-0 {
    --bs-alert-color: var(--warningColor-0);
    --bs-alert-bg: var(--warningColor-0);
    --bs-alert-border-color: var(--warningColor-0);
    --bs-alert-link-color: var(--warningColor-0);
    color: var(--warningColor-700);
}

.alert-warning-100 {
    --bs-alert-color: var(--warningColor-100);
    --bs-alert-bg: var(--warningColor-100);
    --bs-alert-border-color: var(--warningColor-100);
    --bs-alert-link-color: var(--warningColor-100);
    color: var(--warningColor-900);
}

.alert-success-0 {
    --bs-alert-color: var(--successColor-0);
    --bs-alert-bg: var(--successColor-0);
    --bs-alert-border-color: var(--successColor-0);
    --bs-alert-link-color: var(--successColor-0);
    color: var(--successColor-800);
}

.alert-success-100 {
    --bs-alert-color: var(--successColor-100);
    --bs-alert-bg: var(--successColor-100);
    --bs-alert-border-color: var(--successColor-100);
    --bs-alert-link-color: var(--successColor-100);
    color: var(--successColor-900);
}

.alert-error-0 {
    --bs-alert-color: var(--errorColor-0);
    --bs-alert-bg: var(--errorColor-0);
    --bs-alert-border-color: var(--errorColor-0);
    --bs-alert-link-color: var(--errorColor-0);
    color: var(--errorColor-800);
}

.alert-info-100 {
    --bs-alert-color: var(--infoColor-100);
    --bs-alert-bg: var(--infoColor-100);
    --bs-alert-border-color: var(--infoColor-100);
    --bs-alert-link-color: var(--infoColor-100);
    color: var(--infoColor-800);
}

/*******************************************************************/
/****************************** WIDTHS *****************************/
/*******************************************************************/
.w-95 {width: 95%;}
.w-90 {width: 90%;}
.w-80 {width: 80%;}
.w-70 {width: 70%;}
.w-65 {width: 65%;}
.w-40 {width: 40%;}
.w-30 {width: 30%;}
.w-20 {width: 20%;}
.w-10 {width: 10%;}

/*******************************************************************/
/*************************** FORMULARIOS ***************************/
/*******************************************************************/

input.form-control, .form-control {
    display: inline-block !important;
    background: none !important;
    border: 1px solid var(--terciaryColor-300) !important;
    height: 36px;
    background-color: white !important;
    transition: background 0s ease-out;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px !important;
    font-size: 14px;
}

.icon-input-wrapper {
    position: relative;
}

.icon-input-wrapper > img, .icon-input-wrapper > i {
    position: absolute;
    top: 5px;
    right: 10px;
}

.icon-input-wrapper > input {
    padding-right: 40px;
}

.form-control:focus {
    box-shadow: none !important;
    border-color: var(--primaryColor-400) !important;
    border-width: 3px !important;
}

.form-control:disabled {
    background-color: var(--bs-secondary-bg) !important;
    opacity: 1;
}

.btn-outline-terciary-300 {
    border-color: var(--terciaryColor-300) !important;
}

.btn-outline-terciary-300:hover {
    border-color: var(--terciaryColor-500) !important;
}

.input-group > button {
    height: 36px; /* Mismo height que form-control */
}

.form-label {
    color: var(--terciaryColor-600);
    font-size: var(--fs-smaller);
}

.col-form-label {
    color: var(--terciaryColor-600);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.form-select {
    color: var(--terciaryColor-700) !important;
    border: 1px solid var(--terciaryColor-300) !important;
    font-size: var(--fs-small);
}

.form-select:focus {
    border-color: var(--primaryColor-400);
    box-shadow: 0 0 0 0.15rem var(--primaryColor-400);
}

.form-error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545; 
}

.form-check-input {
    border: 1px solid #9FA4AC !important;
    background-color: white;
}

.form-check-input.large {
    width: 2em;
    height: 2em;
}

.vertical-separator {
    width: 2px;
    height: 10px;
    background-color: var(--primaryColor-800);
}

/*******************************************************************/
/****************************** COLORS *****************************/
/*******************************************************************/
.c-white {
    color: #FFF !important;
}

.c-primary-500 {
    color: var(--primaryColor-500) !important;
}

.c-primary-600 {
    color: var(--primaryColor-600) !important;
}

.c-primary-700 {
    color: var(--primaryColor-700) !important;
}

.c-primary-800 {
    color: var(--primaryColor-800) !important;
}

.c-secondary-100 {
    color: var(--secondaryColor-100) !important;
}

.c-secondary-200 {
    color: var(--secondaryColor-200) !important;
}

.c-secondary-300 {
    color: var(--secondaryColor-300) !important;
}

.c-secondary-400 {
    color: var(--secondaryColor-400) !important;
}

.c-secondary-500 {
    color: var(--secondaryColor-500) !important;
}

.c-secondary-600 {
    color: var(--secondaryColor-600) !important;
}

.c-secondary-700 {
    color: var(--secondaryColor-700) !important;
}

.c-secondary-800 {
    color: var(--secondaryColor-800) !important;
}

.c-secondary-900 {
    color: var(--secondaryColor-900) !important;
}

.c-secondary-1000 {
    color: var(--secondaryColor-1000) !important;
}

.c-terciary-500 {
    color: var(--terciaryColor-500) !important;
}

.c-terciary-600 {
    color: var(--terciaryColor-600) !important;
}

.c-terciary-700 {
    color: var(--terciaryColor-700) !important;
}

.c-terciary-800 {
    color: var(--terciaryColor-800) !important;
}

.c-success-700 {
    color: var(--successColor-700) !important;
}

.c-error-400 {
    color: var(--errorColor-400);
}

.c-warning-700 {
    color: var(--warningColor-700) !important;
}

.c-warning-900 {
    color: var(--warningColor-900) !important;
}

/*******************************************************************/
/***************************** BUTTONS *****************************/
/*******************************************************************/

.btn-transparent-error {
    background-color: transparent;
    transition: background-color 0.3s ease; 
    border-color: transparent;
    color: var(--errorColor-600);
    font-weight: 600;
}

.btn-transparent-error:hover {
    border-color: var(--errorColor-600);
    color: var(--errorColor-600);
}

.btn-transparent {
    background-color: transparent;
    transition: background-color 0.3s ease; 
    border-color: transparent;
    color: var(--primaryColor-500);
    font-weight: 600;
}

.btn-transparent:hover {
    border-color: var(--primaryColor-500);
}

.btn-shadow {
    box-shadow: 0px 2px 4px 0px rgba(20, 30, 31, 0.10);
}

.btn-uae {
    background-color: black;
    color: white;
    border-radius: 10px;
    border: 4px solid black !important;
}

.btn-uae:hover, .btn-uae:active, .btn-uae:focus {
    background-color: black !important;
    color: white !important;
    border: 4px solid #17AC75 !important;
}

.btn-primary-0 {
    background-color: var(--primaryColor-0);
    transition: background-color 0.3s ease; 
    border-color: var(--primaryColor-0);
    color: var(--primaryColor-700);
    font-weight: 600;
}

.btn-primary-0:hover {
    background-color: var(--primaryColor-200);
    border-color: var(--primaryColor-200);
}

.btn-primary-0:disabled {
    background-color: var(--primaryColor-200);
    border-color: var(--primaryColor-200);
}

.btn-primary-0:not(:disabled):not(.disabled).active, .btn-primary-0:not(:disabled):not(.disabled):active, .show>.btn-primary-0.dropdown-toggle {
    background-color: var(--primaryColor-0);
    color: var(--primaryColor-700);
    border-color: var(--primaryColor-0);
}

.btn-primary-100 {
    background-color: var(--primaryColor-100);
    transition: background-color 0.3s ease; 
    border-color: var(--primaryColor-100);
    color: var(--primaryColor-700);
    font-weight: 600;
}

.btn-primary-100:hover {
    background-color: var(--primaryColor-300);
    color: var(--primaryColor-700);
    border-color: var(--primaryColor-300);
}

.btn-primary-100:disabled {
    background-color: var(--primaryColor-300);
    color: var(--primaryColor-700);
    border-color: var(--primaryColor-300);
}

.btn-primary-100:not(:disabled):not(.disabled).active, .btn-primary-100:not(:disabled):not(.disabled):active, .show>.btn-primary-100.dropdown-toggle {
    background-color: var(--primaryColor-100);
    color: var(--primaryColor-700);
    border-color: var(--primaryColor-100);
}

.btn-primary-500 {
    background-color: var(--primaryColor-500);
    transition: background-color 0.3s ease; 
    border-color: var(--primaryColor-500);
    color: var(--primaryColor-0);
    font-weight: 600;
}

.btn-primary-500:hover {
    background-color: var(--primaryColor-700);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-700);
}

.btn-primary-500:disabled {
    background-color: var(--primaryColor-700);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-700);
}

.btn-primary-500:not(:disabled):not(.disabled).active, .btn-primary-500:not(:disabled):not(.disabled):active, .show>.btn-primary-500.dropdown-toggle {
    background-color: var(--primaryColor-500);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-500);
}

.btn-primary-700 {
    background-color: var(--primaryColor-700);
    transition: background-color 0.3s ease; 
    border-color: var(--primaryColor-700);
    color: var(--primaryColor-0);
    font-weight: 600;
}

.btn-primary-700:hover {
    background-color: var(--primaryColor-900);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-900);
}

.btn-primary-700:disabled {
    background-color: var(--primaryColor-900);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-900);
}

.btn-primary-700:not(:disabled):not(.disabled).active, .btn-primary-700:not(:disabled):not(.disabled):active, .show>.btn-primary-700.dropdown-toggle {
    background-color: var(--primaryColor-700);
    color: var(--primaryColor-0);
    border-color: var(--primaryColor-700);
}

.btn-error-0 {
    background-color: var(--errorColor-0) !important;
    transition: background-color 0.3s ease; 
    border-color: var(--errorColor-0) !important;
    color: var(--errorColor-700) !important;
    font-weight: 600;
}

.btn-error-0:hover, .btn-error-0:active, .btn-error-0:disabled {
    background-color: var(--errorColor-100) !important;
    border-color: var(--errorColor-100) !important;
    color: var(--errorColor-700) !important;
}

.btn-error-0:not(:disabled):not(.disabled).active, .btn-error-500:not(:disabled):not(.disabled):active, .show>.btn-error-500.dropdown-toggle {
    background-color: var(--errorColor-0) !important;
    border-color: var(--errorColor-0) !important;
    color: var(--errorColor-700) !important;
}


.btn-error-500 {
    background-color: var(--errorColor-500);
    transition: background-color 0.3s ease; 
    border-color: var(--errorColor-500);
    color: var(--errorColor-0);
    font-weight: 600;
}

.btn-error-500:hover {
    background-color: var(--errorColor-700);
    color: var(--errorColor-0);
    border-color: var(--errorColor-700);
}

.btn-error-500:disabled {
    background-color: var(--errorColor-700);
    color: var(--errorColor-0);
    border-color: var(--errorColor-700);
}

.btn-error-500:not(:disabled):not(.disabled).active, .btn-error-500:not(:disabled):not(.disabled):active, .show>.btn-error-500.dropdown-toggle {
    background-color: var(--errorColor-500);
    color: var(--errorColor-0);
    border-color: var(--errorColor-500);
}
/*******************************************************************/
/****************************** BORDERS *******************************/
/*******************************************************************/

.border-bt-c-primary-400 {
    border-bottom-color: var(--primaryColor-400);
}

.b-c-primary-200 {
    border-color: var(--primaryColor-200);
}

/*******************************************************************/
/****************************** SVGS *******************************/
/*******************************************************************/

/* ESTO SOLO FUNCIONA SI SE APLICAN A SVGS QUE POR DEFECTO SON NEGROS */
/* EN CASO DE QUE SE QUIERA HACER DINAMICO EN UN FUTURO HABRÁ QUE PASAR TODOS LOS ICONOS A LA CARPETA RESOURCES E IMPORTARLOS CON @include PARA PODER PASARLE PARÁMETROS Y ASÍ PASAR EL COLOR */

.svg-blanco {
    filter: invert(1);
}

/* -------------------------- SVG PRIMARY ------------------------- */

.svg-primary-0 {
    filter: invert(91%) sepia(20%) saturate(279%) hue-rotate(179deg) brightness(105%) contrast(94%);
}

.svg-primary-100 {
    filter: invert(93%) sepia(12%) saturate(849%) hue-rotate(149deg) brightness(96%) contrast(89%);
}

.svg-primary-200 {
    filter: invert(91%) sepia(98%) saturate(5092%) hue-rotate(161deg) brightness(90%) contrast(87%);
}

.svg-primary-300 {
    filter: invert(62%) sepia(43%) saturate(466%) hue-rotate(139deg) brightness(95%) contrast(101%);
}

.svg-primary-400 {
    filter: invert(52%) sepia(22%) saturate(4261%) hue-rotate(151deg) brightness(96%) contrast(80%);
}

.svg-primary-500 {
    filter: invert(36%) sepia(22%) saturate(7328%) hue-rotate(164deg) brightness(102%) contrast(101%);
}

.svg-primary-600 {
    filter: invert(48%) sepia(69%) saturate(6183%) hue-rotate(164deg) brightness(92%) contrast(101%);
}

.svg-primary-700 {
    filter: invert(29%) sepia(39%) saturate(2299%) hue-rotate(155deg) brightness(93%) contrast(102%);
}

.svg-primary-800 {
    filter: invert(23%) sepia(13%) saturate(4999%) hue-rotate(148deg) brightness(98%) contrast(101%);
}

.svg-primary-900 {
    filter: invert(12%) sepia(11%) saturate(4601%) hue-rotate(144deg) brightness(92%) contrast(97%);
}

.svg-primary-1000 {
    filter: invert(11%) sepia(34%) saturate(843%) hue-rotate(138deg) brightness(95%) contrast(103%);
}

/* -------------------------- SVG SECONDARY ------------------------- */

.svg-secondary-200 {
    filter: invert(89%) sepia(7%) saturate(319%) hue-rotate(139deg) brightness(86%) contrast(90%);
}

.svg-secondary-400 {
    filter: invert(52%) sepia(31%) saturate(246%) hue-rotate(139deg) brightness(93%) contrast(93%);
}

.svg-secondary-500 {
    filter: invert(38%) sepia(41%) saturate(344%) hue-rotate(139deg) brightness(91%) contrast(89%);
}

.svg-secondary-700 {
    filter: invert(20%) sepia(10%) saturate(1417%) hue-rotate(138deg) brightness(99%) contrast(91%);
}

/* -------------------------- SVG TERCIARY ------------------------- */

.svg-terciary-300 {
    filter: invert(99%) sepia(11%) saturate(360%) hue-rotate(150deg) brightness(88%) contrast(89%);
}

.svg-terciary-400 {
    filter: invert(90%) sepia(3%) saturate(668%) hue-rotate(131deg) brightness(90%) contrast(88%);
}

/* -------------------------- SVG ERROR ------------------------- */

.svg-error-400 {
    filter: invert(39%) sepia(86%) saturate(1357%) hue-rotate(340deg) brightness(102%) contrast(92%);
}

.svg-error-500 {
    filter: invert(40%) sepia(42%) saturate(7205%) hue-rotate(350deg) brightness(104%) contrast(91%);
}

.svg-error-600 {
    filter: invert(30%) sepia(57%) saturate(2225%) hue-rotate(348deg) brightness(96%) contrast(94%);
}

.svg-error-700 {
    filter: invert(24%) sepia(46%) saturate(3503%) hue-rotate(353deg) brightness(83%) contrast(89%);
}

.svg-success {
    filter: invert(68%) sepia(29%) saturate(890%) hue-rotate(56deg) brightness(91%) contrast(110%);
}

.svg-dark-gold {
    filter: invert(35%) sepia(11%) saturate(4732%) hue-rotate(17deg) brightness(94%) contrast(92%);
}

.svg-arrow {
    filter: invert(30%) sepia(8%) saturate(1014%) hue-rotate(137deg) brightness(99%) contrast(93%);
}

/*******************************************************************/
/********************** CUSTOM BOOSTRAP CLASSES *********************
/*******************************************************************/

.form-check-input:checked {
    background-color: var(--primaryColor-500);
    border-color: var(--primaryColor-500);
}

.form-check-input { 
    width: 1.5em;
    height: 1.5em;
}

.text-wrap-balance {
    text-wrap: balance !important;
}

.w-fit-content {
    width: fit-content !important;
}

.checkbox-primary {
    cursor:pointer;
    background-color: transparent;
    background: transparent;
    border: 1px solid var(--primaryColor-800) !important;
    width: 1.2em;
    height: 1.2em;
    border-radius: 2px !important;
}

.checkbox-primary:checked {
    background-color: transparent;
    background: transparent;
}

.form-control::placeholder {
    color: var(--terciaryColor-500);
    opacity: 1; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--terciaryColor-500);
}

.checkbox-primary:focus {
    border-color:  var(--primaryColor-100);
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(179, 226, 232, .25);
}

.checkbox-primary:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22CheckSquare%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M13.4375%208.125L8.85156%2012.5L6.5625%2010.3125%22%20stroke%3D%22%23004F59%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
}

.grayscale-filter {
    filter: grayscale(1);
}

.noticia-tab {
    margin-right: 2.5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.filter-idioma-select, .select-2fa, #code-2fa-admin {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.sms-filter-idioma-select {
    border-bottom-right-radius: 0;
    border-bottom: 0 !important;
}

.icon-idioma-select, .icon-2fa, .timer-2fa-admin {
    border: 1px solid var(--terciaryColor-300);
    border-right: none;
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    padding: 0 5px;
    background-color: var(--terciaryColor-100);
}

.sms-icon-idioma-select {
    border-bottom-left-radius: 0;
    border-bottom: 0;
}

#sms_body {
    border-top-left-radius: 0 !important;
}

#empty-mail-overlay {
    width: 100%;
    min-height: 500px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.cod-2fa-field {
    font-size: 20px !important;
    width: 3ch;
    text-align: center;
    margin-right: 2px;
}

.cod-2fa-field:last-child {
    margin-right: 0;
}

#success-2fa {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    background-color: #e2feee;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
}

#email_body-display {
    border: 1px solid var(--terciaryColor-300) !important;
    border-radius: 5px !important;
}

#install-app-banner, #habilitar-notificaciones {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid var(--terciaryColor-100);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    z-index: 99;
}

.icon-pwa {
    margin: 0 15px 10px 0;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.safari-icon, .installed-pwa-icon {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border-radius: 5px;
    object-fit: contain;
}

.icon-pwa img {
    border-radius: 50%;
    width: 90px; 
    height: 90px; 
    object-fit: contain;
}

#title-app-banner {
    margin: 0 0 5px 0;
}

#install-pwa-btn {
    color: var(--primaryColor-600);
    padding: 10px;
    margin: 10px 0 0 0;
    background-color: var(--primaryColor-100);
    border-radius: 5px;
    transition: background-color 0.3s;
}

#install-pwa-btn:hover {
    background-color: var(--primaryColor-200);
}

#explanation-ios {
    padding: 10px 0;
    font-size: var(--fs-small);
}

.explanation-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

#close-2fa-modal {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px !important;
    height: 25px;
}

#habilitar-notificaciones img {
    margin-right: 5px;
}

.small-checkbox {
    width: 1em;
    height: 1em;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .g-sm-10, .gx-sm-10, .gx-md-10, .gx-lg-10 {
        --bs-gutter-x: 10rem;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-10 {
        width: 10% !important;
    }

    .w-sm-25 {
        width: 25% !important;
    }

    .w-sm-auto {
        width: auto !important;
    }

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }
}


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-25 {
        height: 25% !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-25 {
        width: 25% !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-25 {
        width: 25% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }
}

/* BORRAR */

.code-block {
    padding: 20px;
    background-color: #141313;
    border-radius: var(--bs-border-radius) !important;
}

.code-block > pre {
    color: #62b4ff;
    margin-bottom: 0;
}

.code-block.success {
    background-color: #88ffbd;
}

.code-block.success > pre {
    color: #003813;
}

.code-block.error {
    background-color: #ffab79;
}

.code-block.error > pre {
    color: #4e0000;
}

.hover-enlarge:hover {
    transform: scale(1.05);
    transition: transform 0.15s ease-in-out;
}

.bg-terciary-0 {
    background-color: var(--terciaryColor-0);
    color: var(--primaryColor-700);
}

.bg-pastel-danger {
    background-color: #f8d7da !important; 
    color: #721c24 !important; 
}

.bg-pastel-warning {
    background-color: #fff3cd !important; 
    color: #856404 !important; 
}

.bg-pastel-success {
    background-color: #d4edda !important; 
    color: #155724 !important; 
}

/* TESTS */

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--primaryColor-0);
    color: var(--primaryColor-600);
}

.dropdown-menu {
    width: 300px;
    padding: 10px;
}

.dropdown-item {
    display: flex;
    font-size: var(--fs-normal);
    color: var(--primaryColor-600);
    align-items: center;
}

.search-input{
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.category-item.selected {
    background-color: var(--primaryColor-0);
}

.dropdown > .form-select {
    text-align: start;
}
.dropdown > .form-select::after {
    display:none;
}

.nav-tabs-base-conocimiento > .nav-item{
    margin: 0px 5px;
}

.nav-tabs-base-conocimiento > .nav-item:first-child {
    margin-left: 0px;
}

.nav-tabs-base-conocimiento > .nav-item:last-child {
    margin-right: 0px;
}


.nav-tabs-base-conocimiento > .nav-item > .nav-link {
    border-radius: 5px;
    background: #E9EBEC;
    box-shadow: 0px 2px 4px 0px rgba(20, 30, 31, 0.10);
}

.nav-tabs-base-conocimiento > .nav-item > .nav-link.active {
    border-radius: 5px;
    color: var(--primaryColor-700);
    background: var(--primaryColor-0);
    box-shadow: 0px 2px 4px 0px rgba(20, 30, 31, 0.10);
}

@media (max-width: 700px) {
    .modal .modal-dialog:has(.bottom-sheet) {
        margin: auto;
    }

    .modal .bottom-sheet {
        position:absolute;
        bottom: 0px;
        border-width: 0px;
        border-radius: 20px;
        border-bottom-left-radius:0px;
        border-bottom-right-radius:0px;
    }
}

#main-div {
    padding-top: 20px !important;
}

@media (max-width: 1111px) {
    #main-div {
        padding-top: 80px !important;
    }
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: white;
    background-color: var(--primaryColor-700);
}
.nav-pills .nav-link{
    color: var(--primaryColor-700);
}

.btn-outline-primary-700 {
    --bs-btn-color: var(--primaryColor-700);
    --bs-btn-border-color: var(--primaryColor-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primaryColor-700);
    --bs-btn-hover-border-color: var(--primaryColor-700);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primaryColor-700);
    --bs-btn-active-border-color: var(--primaryColor-700);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primaryColor-700);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primaryColor-700);
    --bs-gradient: none;
}

.dm-sans-container span,h1,h2,h3,h4,h5,h6,p,label{
    font-family: "DM Sans", sans-serif !important;
}

.dm-sans {
    font-family: "DM Sans", sans-serif !important;
}