* {
    font-family: 'Roboto Condensed', 'Open Sans', sans-serif;
    font-size: 1rem;
}

button:focus, div:focus, input:focus, img:focus, ul:focus, li:focus, form:focus, a:focus, input:focus, textarea:focus, select:focus {
    box-shadow: none !important;
    border-color: #ced4da !important;
}

:focus-visible {
    outline: none;
}

h1, h2, h3, h4, h5 {
    font-family: 'Roboto Condensed', sans-serif;
}

h1 {
    font-size: 4.5rem !important;
}

h2 {
    font-size: 3rem !important;
}

h3 {
    font-size: 2rem !important;
}

h4 {
    font-size: 1.5rem !important;
}

h5 {
    font-size: 1.125rem !important;
}

.gray-color-text {
    color: #4f4f4f !important;
}

.unir-color-text {
    color: #0098cd !important;
}

.proeduca-color-text {
    color: #af2630 !important;
}

.fs-7 {
    font-size: 0.875rem !important
}

.fs-8 {
    font-size: 0.75rem !important
}

.fill-available {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
}

.sub-title {
    color: #979797;
    font-size: 0.875rem;
}

.pointer, .pointer>* {
    cursor: pointer !important;
}

.scrollable-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.truncate {
    max-width: 100%; /* Ajusta el valor según tus necesidades */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-empty {
    position: relative; 
    width: 100%; 
    border: 1px dashed #d8d8d8; 
    padding: 10px 50px; 
    border-radius: 2px; 
    color: #979797;
}

.form-check {
    display: flex !important;
    align-items: center !important;
}

.form-check.active {
    background: #af2630;
    border-radius: 1rem;
    color: #ffffff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.form-check-input:checked {
    background-color: #af2630 !important;
    border-color: #af2630 !important;
}

.form-check-input.active:checked {
    background-color: #479c66 !important;
    border-color: #479c66 !important;
}

.form-check-input.inactive {
    background-color: #979797 !important;
    border-color: #979797 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.zoomed {
    width: 200rem !important;
    transition: width 0.5s !important;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.principal-button {
    --tw-bg-opacity: 1;
    background-color: rgb(175 38 48 / var(--tw-bg-opacity)) !important;
    --tw-shadow-color: rgb(175 38 48 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 0.5rem;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem !important;
}

.principal-button:hover {
    --tw-shadow-color: rgb(175 38 48 / 0.4);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.black-button {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
    --tw-shadow-color: rgb(0 0 0 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 0.5rem;
    width: 100%;
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    font-size: 0.875rem !important;
}

.black-button:hover {
    --tw-shadow-color: rgb(0 0 0 / 0.4);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cancel-button {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    --tw-shadow-color: rgba(154, 152, 152, 0.2);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #efefef), var(--tw-ring-shadow, 0 0 #efefef), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgb(0 152 205 / var(--tw-text-opacity));
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 0.5rem;
    width: 100%;
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    font-size: 0.875rem !important;
    border: 1px solid #0098cd;
}

.cancel-button:hover {
    --tw-shadow-color: rgb(188, 188, 188);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #b3b2b2), var(--tw-ring-shadow, 0 0 #b3b2b2), var(--tw-shadow);
}

/* Forms Config */

.form-container {
    margin-bottom: 0.75rem;
}

.form-label {
    margin-bottom: 0 !important;
}

.form-label label {
    font-size: 0.875rem !important;
    color: #979797;
    margin-bottom: 0;
}

.form-label span {
    font-size: 0.875rem !important;
    color: #B91919;
}

.form-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Alerts Config */

.alert {
    z-index: 5;
}

.menu-filter {
    transform: translate(0px, 40px) !important;
    border: none;
    box-shadow: 6px 6px 60px 5px #D6D6D6;
    border-radius: 4px;
    width: 100% !important;
}

/* Start Accordion config */

.accordion-item {
    border: none !important;
}

.accordion-button:focus {
    z-index: 3 !important;
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.accordion-button {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.accordion-button.odd, .accordion-button.odd:not(.collapsed) {
    background-color: #efefef !important;
}

.accordion-button:not(.collapsed) {
    color: #2A2B23 !important;
    background-color: #fff !important;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%) !important;
}

.accordion-button:not(.collapsed)::after {
    color: #2A2B23 !important;
}

.collapse {
    visibility: visible !important;
}

/* Finish Accordion config */