:root {
    --blue: #0a0f44;
    --blue-rgb: 10, 15, 68;
    --yellow: #FED766;
    --yellow-rgb: 254, 215, 102;
    /* --yellow: #ffeb3b;
    --yellow-rgb: 255, 235, 59; */
    --purple: #513688;
    --purple-rgb: 81, 54, 136;
    --orange: #f15025;
    --orange-rgb: 241, 80, 37;
    --dark-purple: #2e174f;
    --dark-purple-rgb: 46, 23, 79;
    --pink: #ff206c;
    --pink-rgb: 255, 32, 108;
    --blue-light: #3066be;
    --blue-light-rgb: 48, 102, 190;
    --green: #0fa3b1;
    --green-rgb: 15, 163, 177;
    --dark-green: #0f4c5c;
    --dark-green-rgb: 15, 76, 92;
    --danger: #DB324D;
    --danger-rgb: 219, 50, 77;
    --celadon-blue: #247BA0;
    --celadon-blue-rgb: 36, 123, 160;
}

body, html {
    height: 100%;
    overflow-x: hidden;
}

/*  COLORS    */

.blue {
    color: var(--blue)!important;
}

.yellow {
    color: var(--yellow)!important;
}

.purple {
    color: var(--purple)!important;
}

.orange {
    color: var(--orange)!important;
}

.pink {
    color: var(--pink)!important;
}

.blue-light {
    color: var(--blue-light)!important;
}

.green {
    color: var(--green)!important;
}

.dark-green {
    color: var(--dark-green)!important;
}

.dark-purple {
    color: var(--dark-purple)!important;
}

.danger {
    color: var(--danger)!important;
}

.celadon-blue {
    color: var(--celadon-blue)!important;
}

/*  BACKGROUNDS    */

.bg-celadon-blue {
    background-color: var(--celadon-blue);
}

.bg-blue {
    background-color: var(--blue)!important;
}

.bg-yellow {
    background-color: var(--yellow)!important;
}

.bg-purple {
    background-color: var(--purple)!important;
}

.bg-orange {
    background-color: var(--orange)!important;
}

.bg-pink {
    background-color: var(--pink)!important;
}

.bg-blue-light {
    background-color: var(--blue-light)!important;
}

.bg-green {
    background-color: var(--green)!important;
}

.bg-dark-green {
    background-color: var(--dark-green)!important;
}

.bg-dark-purple {
    background-color: var(--dark-purple)!important;
}

.bg-danger {
    background-color: var(--danger);
}

/*  FONTS  **/

.f-8px {
    font-size: 8px!important;
}

.f-9px {
    font-size: 9px!important;
}

.f-10px {
    font-size: 10px!important;
}

.f-11px {
    font-size: 11px!important;
}

.f-12px {
    font-size: 12px!important;
}

.f-13px {
    font-size: 13px!important;
}

.f-14px {
    font-size: 14px!important;
}

.f-15px {
    font-size: 15px!important;
}

.f-16px {
    font-size: 16px!important;
}

.f-17px {
    font-size: 17px!important;
}

.f-18px {
    font-size: 18px!important;
}

.f-19px {
    font-size: 19px!important;
}

.f-20px {
    font-size: 20px!important;
}

.f-21px {
    font-size: 21px!important;
}

.f-28px {
    font-size: 28px!important;
}

.f-32px {
    font-size: 32px!important;
}

.bolder {
    font-weight: bolder!important;
}

.lighter {
    font-weight: lighter!important;
}

.Noto-Sans {
    font-family: 'Noto Sans'!important;
}

.Source-Sans-Pro {
    font-family: 'Source Sans Pro'!important;
}

.Open-Sans {
    font-family: 'Open Sans'!important;
}

.Poppins {
    font-family: 'Poppins'!important;
}

.Monserrat {
    font-family: 'Monserrat'!important;
}

.Heebo {
    font-family: 'Heebo'!important;
}

.Dosis {
    font-family: 'Dosis'!important;
}

/* TEXT ELEMENTS H1-H6, P, A, SPAN */

.us-h1 {
    font-size: 24px;
    font-family: 'Poppins';
    font-weight: 400;
}

.us-h2 {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 75%);
    font-weight: 600;
    font-size: 21px;
}

.us-h3 {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 75%);
    font-weight: 600;
    font-size: 19px;
}

.us-h4 {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 75%);
    font-weight: 600;
    font-size: 17px;
}

.us-h5 {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 75%);
    font-weight: 600;
    font-size: 15.75px;
    cursor: pointer;
}

.us-h6 {
    font-size: 12px;
}

/*  lOGO STYLES     */

.us-logo {
    width: 72px;
    height: 72px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 40px;
    /* animation: flipInX 1s ease; */
    position: relative;
    z-index: 0;
    padding: 8px;
    box-shadow: inset 0 0 0 3px var(--blue);
    border-radius: 4px;
    background-color: var(--blue);
}

.us-logo.bg-celadon-blue {
    box-shadow: inset 0 0 0 3px var(--celadon-blue);
}

.us-logo.bg-white {
    box-shadow: inset 0 0 0 3px #fff;
}

.us-logo-text {
    font-size: 32px;
    /* animation: fadeInRight 1s ease; */
    padding: 4px;
    display: inline-block;
    position: relative;
}

.us-logo-text::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* background-image: linear-gradient(45deg, rgb(255 255 255 / 100%), transparent); */
    z-index: -1;
}

.us-logo-text::after {
    content: '';
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    position: absolute;
    top: 4px;
    left: 4px;
    /* background-color: var(--blue); */
    z-index: -1;
    border-radius: 4px;
}

.us-h1.logo {
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
}

/*  LAYOUTS */

.seccion-view {
    position: relative;
    width: 100%;
    min-height: 100%;
}

.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*  EXTRA UTILS */

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.unshadow {
    box-shadow: none!important;
}

.bg-image-none {
    background-image: none!important;
}

.animated-none {
    animation: none!important;
}

.mouse-pointer {
    cursor: pointer!important;
}

.pointer-none {
    pointer-events: none!important;
}

/*  Inputs   */

.usl-form {
    position: relative;
    padding: 40px;
}

.usl-group {
    position: relative;
}

.usl-group input {
    border: 0;
    background-color: #fff;
    font-family: 'Poppins';
    font-size: 17px;
    color: var(--blue);
    border-radius: 24px 0 0px 24px!important;
    z-index: 0;
    padding: 6px 24px;
    animation: fadeInLeft 0.35s ease;
    border: 1px rgba(var(--dark-purple-rgb), 0.2) solid;
    transition: all 0.35s ease;
}

.usl-group textarea {
    border: 0;
    background-color: #fff;
    font-family: 'Poppins';
    font-size: 17px;
    color: var(--blue);
    border: 1px rgba(var(--dark-purple-rgb), 0.2) solid;
    border-radius: 8px!important;
    z-index: 0;
    padding: 12px;
    animation: fadeInLeft 0.35s ease;
    resize: none;
}

.usl-group input:focus, .usl-group textarea:focus {
    color: var(--blue);
    background-color: #fff;
    outline: 0;
    box-shadow: inset 0 0 4px 1px rgb(0 0 0 / 15%);
    border-color: rgba(var(--dark-purple-rgb), 0.15);
}

.usl-group .input-group-text {
    border: 0;
    border-radius: 0;
    background-color: var(--purple);
    color: #fff;
    font-size: 14px;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50px!important;
    box-shadow: 0 0 16px 1px rgba(var(--blue-rgb), 0.5);
    z-index: 4;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(45deg, rgb(0 0 0 / 40%), transparent);
    transition: box-shadow 0.35s ease;
    position: relative;
    left: -24px;
    animation: fadeInRight 0.35s ease;
    cursor: pointer;
}

.usl-group input:focus~.input-group-text {
    box-shadow: 0 0 40px 1px rgba(var(--blue-rgb), 0.75);
    z-index: 3;
}

.s-form .form-check {
    text-align: start;
    padding: 0;
    min-height: unset;
    margin: 0;
    display: inline-flex;
}

.s-form .form-check input[type="checkbox"] {
    box-shadow: none!important;
    display: none;
}

.switch-toggler {
    display: inline-block;
    width: 48px;
    height: 24px;
    background-color: #fff;
    border-radius: 48px;
    box-shadow: inset 0 0 8px rgb(0 0 0 / 15%);
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.box-square-check {
    position: relative;
    cursor: pointer;
    padding: 4px;
}

.box-square-check .square {
    display: inline-flex;
    width: 21px;
    height: 21px;
    box-shadow: 0 0 0 2px rgba(var(--orange-rgb), 1);
    border-radius: 0px;
    position: relative;
    overflow: hidden;
}

.box-square-check .square::before {
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: rgba(var(--orange-rgb), 1);
    animation: fadeInDown 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: none;
}

.box-square-check.xxs .square {
    width: 8px;
    height: 8px;
}

.box-square-check.xs .square {
    width: 10px;
    height: 10px;
}

.box-square-check.sm .square {
    width: 16px;
    height: 16px;
}

.box-square-check.md .square {
    width: 21px;
    height: 21px;
}

.box-square-check.lg .square {
    width: 24px;
    height: 24px;
}

.box-square-check.xl .square {
    width: 32px;
    height: 32px;
}

.box-square-check.xxl .square {
    width: 40px;
    height: 40px;
}

.s-form.blue .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--blue-rgb), 1);
}

.s-form.blue-light .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--blue-light-rgb), 1);
}

.s-form.yellow .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--yellow-rgb), 1);
}

.s-form.purple .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 1);
}

.s-form.orange .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--orange-rgb), 1);
}

.s-form.dark-purple .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--dark-purple-rgb), 1);
}

.s-form.pink .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--pink-rgb), 1);
}

.s-form.green .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--green-rgb), 1);
}

.s-form.dark-green .box-square-check .square {
    box-shadow: 0 0 0 2px rgba(var(--dark-green-rgb), 1);
}

.s-form.blue .box-square-check .square::before {
    background-color: rgba(var(--blue-rgb), 1);
}

.s-form.blue-light .box-square-check .square::before {
    background-color: rgba(var(--blue-light-rgb), 1);
}

.s-form.yellow .box-square-check .square::before {
    background-color: rgba(var(--yellow-rgb), 1);
}

.s-form.purple .box-square-check .square::before {
    background-color: rgba(var(--purple-rgb), 1);
}

.s-form.orange .box-square-check .square::before {
    background-color: rgba(var(--orange-rgb), 1);
}

.s-form.dark-purple .box-square-check .square::before {
    background-color: rgba(var(--dark-purple-rgb), 1);
}

.s-form.pink .box-square-check .square::before {
    background-color: rgba(var(--pink-rgb), 1);
}

.s-form.green .box-square-check .square::before {
    background-color: rgba(var(--green-rgb), 1);
}

.s-form.dark-green .box-square-check .square::before {
    background-color: rgba(var(--dark-green-rgb), 1);
}

.box-square-check input[type='checkbox']:checked~.square::before {
    display: inline-block;
}

.switch-toggler .circle {
    width: 24px;
    height: 24px;
    background-color: #fff;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transition: all 0.25s ease;
    transition-property: left;
    box-shadow: 0 0 12px rgb(0 0 0 / 35%);
}

.switch-toggler .circle::before {
    content: '\f00d';
    display: inline-flex;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    right: -24px;
    background-color: transparent;
    z-index: 0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    animation: flipInX 0.35s ease;
    color: var(--purple);
    z-index: -1;
    opacity: 0.25;
}

.switch-toggler .circle::after {
    content: '\f011';
    display: inline-flex;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: -24px;
    background-color: transparent;
    z-index: 0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    animation: flipInX 0.35s ease;
    color: var(--purple);
    z-index: -1;
    display: none;
}

input[type="checkbox"]:checked~.switch-toggler .circle::before {
    display: none;
}

input[type="checkbox"]:checked~.switch-toggler .circle::after {
    display: inline-flex;
}

input[type="checkbox"]:checked~.switch-toggler .circle {
    left: 24px;
    background-color: var(--blue);
    box-shadow: 0 0 14px;
}

/*  FORMS   */

.s-form {
    position: relative;
    padding: 17px;
}

.s-form .form-group {
    padding: 0 4px;
}

.s-form .input-box {
    position: relative;
    font-family: 'Heebo';
    width: 100%;
}

.s-form .input-box.file-image input[type='file'] {
    display: none;
}

.s-form .file-image .preview {
    width: calc(100% - 8px);
    height: 160px;
    background-color: transparent;
    position: relative;
    margin: 4px;
    cursor: pointer;
    border: 1px rgb(0 0 0 / 0.1) dashed;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    color: rgb(0 0 0 / 15%);
}

.s-form .file-image .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-form .file-image .preview.middle {
    height: 72px;
}

.s-form .file-image .preview .option {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(255 255 255 / 1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.25s ease;
    opacity: 0;
}

.s-form .file-image .preview.upload:hover .option {
    opacity: 1;
}

.s-form .form-label {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 75%);
    font-weight: 600;
    font-size: 15.75px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
}

.s-form .form-label.error {
    color: #DB324D;
    animation: flash 2s infinite;
}

.s-form .form-input {
    font-family: 'Source Sans Pro';
    color: rgb(0 0 0 / 0.8);
    font-weight: 400;
    font-size: 15.75px;
    resize: none;
    border-radius: 4px;
}

.s-form .form-input:focus {
    border-color: var(--blue-light);
    box-shadow: none;
}

.s-form.read input, .s-form.read textarea, .s-form.read label, .s-form.read .selectpicker-group {
    pointer-events: none;
    opacity: 0.85;
}

.s-form .form-input.error {
    border-color: #f00;
}

/*  COLORS FORMS */

.s-form.purple .form-input:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.s-form.dark-purple .form-input:focus {
    border-color: var(--dark-purple);
    box-shadow: none;
}

.s-form.yellow .form-input:focus {
    border-color: var(--yellow);
    box-shadow: none;
}

.s-form.blue .form-input:focus {
    border-color: var(--blue);
    box-shadow: none;
}

.s-form.pink .form-input:focus {
    border-color: var(--pink);
    box-shadow: none;
}

.s-form.blue-light .form-input:focus {
    border-color: var(--blue-light);
    box-shadow: none;
}

.s-form.green .form-input:focus {
    border-color: var(--green);
    box-shadow: none;
}

.s-form.dark-green .form-input:focus {
    border-color: var(--dark-green);
    box-shadow: none;
}

/*  SELECT PICKER COLORS */

.s-form.dark-purple .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.dark-purple .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--dark-purple);
    outline: 0
}

.s-form.blue .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.blue .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--blue);
    outline: 0
}

.s-form.pink .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.pink .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--pink);
    outline: 0
}

.s-form.blue-light .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.blue-light .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--blue-light);
    outline: 0
}

.s-form.green .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.green .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--green);
    outline: 0
}

.s-form.dark-green .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.dark-green .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--dark-green);
    outline: 0
}

.s-form.purple .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .s-form.purple .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--purple);
    outline: 0
}

.s-form.purple .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--purple-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.dark-purple .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--dark-purple-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.blue-light .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--blue-light-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.blue .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--blue-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.green .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--green-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.dark-green .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--dark-green-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.pink .selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--pink-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.s-form.purple .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--purple);
}

.s-form.blue .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--blue);
}

.s-form.yellow .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--yellow);
}

.s-form.dark-purple .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--dark-purple);
}

.s-form.pink .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--pink);
}

.s-form.blue-light .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--blue-light);
}

.s-form.green .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--green);
}

.s-form.dark-green .sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    background-color: var(--dark-green);
}

.info-text {
    padding: 14px;
    font-family: 'Source Sans Pro';
    color: var(--dark-green);
    text-align: justify;
    font-size: 12.75px;
}

/*  SELECPICKER     */

.selectpicker-group.option {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
}

.selectpicker-group.option .form-label {
    width: 100%;
}

.selectpicker-group.option .bootstrap-select.form-control {
    width: calc(100% - 56px)!important;
}

.selectpicker-group .dropdown.bootstrap-select {
    background-color: transparent
}

.selectpicker-group .dropdown-menu {
    padding: 8px;
    border-radius: 4px;
    border: 0;
    margin-top: 8px!important;
    box-shadow: 0 0 4px rgb(0 0 0/0.25)
}

.selectpicker-group .bs-searchbox input {
    border-radius: 4px!important;
    border-color: #ced4da;
}

.selectpicker-group .bs-searchbox input:focus {
    color: rgab(0, 0, 0, 0.8);
    background-color: #fff;
    border-color: rgba(var(--blue-light-rgb), 1);
    outline: 0;
    box-shadow: none;
}

.selectpicker-group .dropdown-toggle:focus, .select-group>select.mobile-device:focus+.dropdown-toggle {
    outline: 0!important;
    outline-color: transparent!important;
    outline-style: auto!important;
    outline-offset: 0!important
}

.selectpicker-group .bootstrap-select>.dropdown-toggle:after {
    color: var(--blue-light);
}

.selectpicker-group .bootstrap-select>.dropdown-toggle {
    font-family: Heebo';

}

.sys-selectpicker {
    border: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    padding-left: 16px;
    padding-right: 16px;
    font-family: 'Source Sans Pro';
    z-index: 1
}

.sys-selectpicker:focus {
    outline: 0;
    box-shadow: 0 0 0 2.5px rgba(var(--blue-light-RGB), 0.8);
    background-color: #fff;
    border-color: var(--blue-light)
}

.sys-selectpicker~.dropdown-menu .dropdown-item {
    font-family: 'Heebo';
    color: rgb(0 0 0 / 0.85);
    font-size: 15.75px;
}

.sys-selectpicker~.dropdown-menu .dropdown-item:hover, .sys-selectpicker~.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--blue-light);
    outline: 0
}

.sys-selectpicker~.dropdown-menu .dropdown-item:focus {
    color: #fff;
    text-decoration: none;
    background-color: var(--blue-light);
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(var(--blue-light-RGB), 0.5)
}

.s-form.blue .sys-selectpicker:focus, .sys-selectpicker.blue:focus {
    border-color: rgba(var(--blue-RGB), 1);
}

.s-form.yellow .sys-selectpicker:focus, .sys-selectpicker.yellow:focus {
    border-color: rgba(var(--yellow-RGB), 1);
}

.s-form.purple .sys-selectpicker:focus, .sys-selectpicker.purple:focus {
    border-color: rgba(var(--purple-RGB), 1);
}

.s-form.orange .sys-selectpicker:focus, .sys-selectpicker.orange:focus {
    border-color: rgba(var(--orange-RGB), 1);
}

.s-form.dark-purple .sys-selectpicker:focus, .sys-selectpicker.dark-purple:focus {
    border-color: rgba(var(--dark-purple-RGB), 1);
}

.s-form.pink .sys-selectpicker:focus, .sys-selectpicker.pink:focus {
    border-color: rgba(var(--pink-RGB), 1);
}

.s-form.blue-light .sys-selectpicker:focus, .sys-selectpicker.blue-light:focus {
    border-color: rgba(var(--blue-light-RGB), 1);
}

.s-form.green .sys-selectpicker:focus, .sys-selectpicker.green:focus {
    border-color: rgba(var(--green-RGB), 1);
}

.s-form.dark-green .sys-selectpicker:focus, .sys-selectpicker.dark-green:focus {
    border-color: rgba(var(--dark-green-RGB), 1);
}

/*  Buttons   */

.usl-btn {
    border: 0;
    background-color: var(--purple);
    color: #fff;
    font-size: 16px;
    margin: 0;
    border-radius: 48px!important;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 12px 24px;
    box-shadow: 0 0 4px;
    background-image: linear-gradient(45deg, rgb(0 0 0 / 25%), transparent);
    transition: all 0.35s ease;
}

.usl-btn::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 48px;
    box-shadow: none;
    transition: box-shadow 0.35s ease;
}

.usl-btn.sm {
    padding: 4px 24px;
}

.usl-btn.sm .icon {
    width: 24px;
    height: 24px;
}

.usl-btn:hover, .usl-btn.hover {
    animation: shadow-pulse 1s infinite!important;
}

.usl-btn:focus {
    animation: shadow-pulse 1s infinite!important;
}

.usl-btn:focus::before {
    box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
}

.usl-btn.default {
    width: 160px;
    transition: width 0.35s ease;
}

.usl-btn.default.large {
    width: 240px;
}

.usl-btn:hover {
    color: #fff;
}

.usl-btn .icon {
    margin-right: 4px;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.usl-btn:hover .icon, .usl-btn:active .icon {
    animation: flipInX 0.5s ease;
}

.usl-btn.circle {
    width: 48px;
    height: 48px;
    animation: shadow-pulse 0.5s infinite;
}

.usl-btn.square {
    border-radius: 0px!important;
    width: 40px;
    height: 40px;
    background-image: none;
}

.usl-btn.square.shadow {
    box-shadow: 0 0 12px 1px rgb(0 0 0 / 0.5)!important;
}

.usl-btn.bg-yellow {
    color: #000;
}

.label-circle {
    color: rgb(0 0 0 / 0.75);
    cursor: pointer;
    margin: 0 8px;
    display: inline-block;
    font-size: 12.75px;
    font-family: 'Noto Sans';
}

.label-circle:hover~.usl-btn.circle {
    animation: shadow-pulse 1s infinite!important;
}

.usl-btn.circle.xs {
    width: 19px;
    height: 19px;
}

.usl-btn.circle.sm {
    width: 32px;
    height: 32px;
    padding: 0;
}

.usl-btn.circle.md {
    width: 24px;
    height: 24px;
    padding: 0;
}

.usl-btn.circle.lg {
    width: 32px;
    height: 32px;
    padding: 0;
}

.usl-btn.circle.xl {
    width: 40px;
    height: 40px;
    padding: 0;
}

.usl-btn.circle.xxl {
    width: 48px;
    height: 48px;
    padding: 0;
}

.usl-btn.circle .counter {
    position: absolute;
    background-color: var(--orange);
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-family: 'Poppins';
    border-radius: 50%;
    bottom: 0;
    right: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.usl-btn.circle.options[aria-expanded="true"], .usl-btn.circle.options[aria-expanded="true"]:focus {
    animation: none!important;
    box-shadow: none!important;
}

.usl-btn.circle.options[aria-expanded="true"]:focus::before {
    box-shadow: none!important;
}

/*  NAVS    */

.nav-options {
    flex-direction: column;
    position: relative;
    width: 100%;
}

.nav-options::before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.2);
}

.nav-options .nav-link {
    position: relative;
    color: rgba(0, 0, 0, 0.35);
    font-size: 15px;
    font-family: 'Source Sans Pro';
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.nav-options .nav-link::before {
    content: '';
    width: 3px;
    height: 50%;
    position: absolute;
    top: 25%;
    left: -2px;
    background-color: var(--orange);
    animation: bounce 1s ease;
    box-shadow: 0 0 8px rgba(var(--orange-rgb), 0.75);
    display: none;
}

.nav-options .nav-link.active {
    color: rgba(var(--purple-rgb), 1);
}

.nav-options .nav-link .ico {
    color: rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.nav-options .nav-link:hover .ico {
    animation: flipInX 0.35s ease;
    color: var(--orange);
}

.nav-options .nav-link.active .ico {
    color: rgba(var(--orange-rgb), 1);
}

.nav-options .nav-link.active::before {
    display: inline-block;
}

/*  ICONS */

.icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon.sm {
    width: 24px;
    height: 24px;
    font-size: 11.25px;
}

.icon.md {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.icon.lg {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

.icon.xl {
    width: 64px;
    height: 64px;
    font-size: 15px;
}

.icon.xxl {
    width: 72px;
    height: 72px;
    font-size: 16.75px;
}

.icon.circle {
    border-radius: 50%;
}

.icon.bg-purple, .icon.bg-dark-purple, .icon.bg-blue, .icon.bg-blue-light, .icon.bg-orange, .icon.bg-green, .icon.bg-dark-green, .icon.bg-pink {
    color: #fff;
}

.icon.circle.shadow {
    box-shadow: 0 0 24px 1px rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.icon.circle.bg-purple.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--purple-rgb), 0.75)!important;
}

.icon.circle.bg-dark-purple.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--dark-purple-rgb), 0.75)!important;
}

.icon.circle.bg-blue.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--blue-rgb), 0.75)!important;
}

.icon.circle.bg-blue-light.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--blue-light-rgb), 0.75)!important;
}

.icon.circle.bg-orange.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--orange-rgb), 0.75)!important;
}

.icon.circle.bg-green.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--green-rgb), 0.75)!important;
}

.icon.circle.bg-dark-green.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--dark-green-rgb), 0.75)!important;
}

.icon.circle.bg-pink.shadow {
    box-shadow: 0 0 24px 1px rgba(var(--pink-rgb), 0.75)!important;
}

.icon img {
    width: 100%;
    height: 100%;
}

.icon.circle img {
    border-radius: 50%;
}

/*  LOGO    */

.logo {
    display: inline-flex;
    align-items: flex-end;
    color: var(--blue);
    font-family: 'Heebo';
}

.logo.sm .us-logo {
    width: 32px;
    height: 32px;
    font-size: 14px;
    padding: 4px;
}

.logo.sm .us-logo-text {
    font-size: 12px;
    padding: 3px;
}

.logo.md .us-logo {
    width: 40px;
    height: 40px;
    font-size: 14.75px;
}

.logo.md .us-logo-text {
    font-size: 12.75px;
}

.logo.lg .us-logo {
    width: 48px;
    height: 48px;
    font-size: 15.75px;
}

.logo.lg .us-logo-text {
    font-size: 14.75px;
}

.logo.xl .us-logo {
    width: 56px;
    height: 56px;
    font-size: 28.75px;
}

.logo.xl .us-logo-text {
    font-size: 16.75px;
}

.logo.xxl .us-logo {
    width: 64px;
    height: 64px;
    font-size: 32.75px;
}

.logo.xxl .us-logo-text {
    font-size: 21.75px;
}

/*  TABS    */

.nav-tabs.tabs-system {
    position: relative;
    border: 0;
    background-color: transparent;
    width: 100%;
    flex-direction: column;
}

.nav-tabs.tabs-system.horizontal {
    flex-direction: row;
}

.nav-tabs.tabs-system::before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.2);
}

.nav-tabs.tabs-system.horizontal::before {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: unset;
    bottom: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.2);
}

.nav-tabs.tabs-system.right::before {
    left: unset;
    right: 0;
}

.nav-tabs.tabs-system .nav-link {
    border: 0;
    color: rgb(0 0 0 / 35%);
    background-color: transparent;
    position: relative;
    font-size: 16px;
    font-family: 'Source Sans Pro';
    display: inline-flex;
    flex-direction: row-reverse;
    padding: 8px 21px!important;
    width: 100%;
    justify-content: space-between;
}

.nav-tabs.tabs-system.ico .nav-link {
    padding: 8px 4px!important;
}

.nav-tabs.tabs-system .nav-link::before {
    content: '';
    width: 3px;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 0;
    background-color: var(--orange);
    animation: bounce 1s ease;
    display: none;
    box-shadow: 0 0 4px rgba(var(--orange-rgb), 0.75);
}

.nav-tabs.tabs-system.right .nav-link::before {
    right: 0;
    left: unset;
}

.nav-tabs.tabs-system.horizontal .nav-link::before {
    content: '';
    width: 40px;
    height: 3px;
    position: absolute;
    top: unset;
    bottom: 0;
    left: 0;
    background-color: var(--orange);
    animation: fadeInUp 0.35s ease;
    display: none;
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
}

.nav-tabs.tabs-system .nav-link.active::after {
    width: 1px;
}

.nav-tabs.tabs-system .nav-link.active::before {
    display: inline-block;
}

.nav-tabs.tabs-system .nav-link .ico {
    width: 28px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: rgba(var(--orange-rgb), 0.5);
    position: relative;
    border-radius: 4px;
    transition: all 0.35s ease-out;
    transition-property: background-color;
    font-size: 12px;
}

.nav-tabs.tabs-system .nav-link:hover .ico {
    animation: flipInX 0.35s ease;
}

.nav-tabs.tabs-system .nav-link.active {
    color: #000;
}

.nav-tabs.tabs-system .nav-link.active .ico {
    color: var(--orange);
}

.nav-tabs.tabs-system .nav-link:hover .ico i {
    animation: fadeInX 0.5s ease;
}

/* TABS COLORS */

.nav-tabs.tabs-system.blue-light .nav-link .ico {
    color: rgba(var(--blue-light-rgb), 0.5);
}

.nav-tabs.tabs-system.blue-light .nav-link.active .ico {
    color: var(--blue-light);
}

.nav-tabs.tabs-system.blue-light.horizontal .nav-link::before {
    background-color: var(--blue-light);
    box-shadow: 0 0 4px 1px rgba(var(--blue-light-rgb), 0.75);
}

.nav-tabs.tabs-system.orange .nav-link .ico {
    color: rgba(var(--orange-rgb), 0.5);
}

.nav-tabs.tabs-system.orange .nav-link.active .ico {
    color: var(--orange);
}

.nav-tabs.tabs-system.orange.horizontal .nav-link::before {
    background-color: var(--orange);
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
}

.nav-tabs.tabs-system.pink .nav-link .ico {
    color: rgba(var(--pink-rgb), 0.5);
}

.nav-tabs.tabs-system.pink .nav-link.active .ico {
    color: var(--pink);
}

.nav-tabs.tabs-system.pink.horizontal .nav-link::before {
    background-color: var(--pink);
    box-shadow: 0 0 4px 1px rgba(var(--pink-rgb), 0.75);
}

.nav-tabs.tabs-system.blue .nav-link .ico {
    color: rgba(var(--blue-rgb), 0.5);
}

.nav-tabs.tabs-system.blue .nav-link.active .ico {
    color: var(--blue);
}

.nav-tabs.tabs-system.blue.horizontal .nav-link::before {
    background-color: var(--blue);
    box-shadow: 0 0 4px 1px rgba(var(--blue-rgb), 0.75);
}

.nav-tabs.tabs-system.purple .nav-link .ico {
    color: rgba(var(--purple-rgb), 0.5);
}

.nav-tabs.tabs-system.purple .nav-link.active .ico {
    color: var(--purple);
}

.nav-tabs.tabs-system.purple.horizontal .nav-link::before {
    background-color: var(--purple);
    box-shadow: 0 0 4px 1px rgba(var(--purple-rgb), 0.75);
}

.nav-tabs.tabs-system.dark-purple .nav-link .ico {
    color: rgba(var(--dark-purple-rgb), 0.5);
}

.nav-tabs.tabs-system.dark-purple .nav-link.active .ico {
    color: var(--dark-purple);
}

.nav-tabs.tabs-system.dark-purple.horizontal .nav-link::before {
    background-color: var(--dark-purple);
    box-shadow: 0 0 4px 1px rgba(var(--dark-purple-rgb), 0.75);
}

.nav-tabs.tabs-system.green .nav-link .ico {
    color: rgba(var(--green-rgb), 0.5);
}

.nav-tabs.tabs-system.green .nav-link.active .ico {
    color: var(--green);
}

.nav-tabs.tabs-system.green.horizontal .nav-link::before {
    background-color: var(--green);
    box-shadow: 0 0 4px 1px rgba(var(--green-rgb), 0.75);
}

.nav-tabs.tabs-system.dark-green .nav-link .ico {
    color: rgba(var(--dark-green-rgb), 0.5);
}

.nav-tabs.tabs-system.dark-green .nav-link.active .ico {
    color: var(--dark-green);
}

.nav-tabs.tabs-system.dark-green.horizontal .nav-link::before {
    background-color: var(--dark-green);
    box-shadow: 0 0 4px 1px rgba(var(--dark-green-rgb), 0.75);
}

.tabs-system.light .nav-link {
    color: #fff!important;
}

.tabs-system.small .nav-link {
    font-size: 12.5px;
    padding: 6px!important;
}

.container-fluid.table {
    padding: 24px;
    position: relative;
}

.usl-table thead tr {
    border: 0;
    position: relative;
}

.usl-table thead tr th {
    color: var(--dark-purple);
    font-family: 'Heebo';
    font-size: 15.75px;
    font-weight: 500;
    border: 0;
}

.usl-table thead th.ico {
    min-width: 48px;
    font-size: 12px;
    width: 48px;
    height: 48px;
    padding: 0;
}

.usl-table tbody tr td {
    padding: 4px;
    border-bottom: 1px rgba(var(--purple-rgb), 0.1) solid;
}

.usl-table tbody tr td.td-collapse {
    border-color: transparent;
    padding: 0;
}

.box-col {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.box-col.ico {
    width: 48px;
    height: 48px;
}

.box-td {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px;
}

.box-td.ico {
    justify-content: center;
}

.box-td.index {
    font-size: 12px;
    font-weight: bolder;
    font-family: 'Poppins';
}

/*  SMALL MESSAGES */

.message {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    align-content: center;
    padding: 8px;
    font-family: 'Source Sans Pro';
    margin: 8px;
    position: relative;
}

.message.danger::before {
    content: '';
    width: 50%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 25%;
    background-color: #DB324D;
    box-shadow: 0 0 4px #db324d;
    animation: flipInX 0.5s ease;
}

.message.danger {
    color: #db324d;
}

/*  SYSTEM DATEPICKER   */

.system-datepicker {
    position: relative;
}

.datepicker-panel>ul>li[data-view="day"].highlighted {
    background-color: rgba(var(--dark-green-rgb), 0.15);
}

.datepicker-panel>ul>li[data-view="day"]:hover {
    background-color: rgba(var(--dark-green-rgb), 0.1);
    border-radius: 50%;
}

.system-datepicker li[data-view="day picked"] {
    color: #fff!important;
    position: relative;
    z-index: 0;
}

.system-datepicker li[data-view="day picked"]::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(var(--dark-green-rgb), 1);
    z-index: -1;
    animation: flipInX 0.5s ease;
    border-radius: 50%;
}

/*  CAROUSEL IMAGES */

.carousel.images {
    padding: 12px;
    display: flex;
}

.carousel.images .carousel-indicators {
    bottom: -24px;
}

.carousel.images .carousel-control-prev, .carousel.images .carousel-control-next {
    position: relative;
    display: inline-block;
    width: 15%;
}

.carousel.images.blue-light .carousel-control-prev i, .carousel.images.blue-light .carousel-control-next i {
    color: rgba(var(--blue-light-rgb), 0.25);
}

.carousel.images.blue-light .carousel-indicators li {
    background-color: rgba(var(--blue-light-rgb), 0.25);
}

.carousel.images.blue-light .carousel-indicators li.active {
    background-color: rgba(var(--blue-light-rgb), 1);
}

.carousel.images.dark-purple .carousel-control-prev i, .carousel.images.dark-purple .carousel-control-next i {
    color: rgba(var(--dark-purple-rgb), 0.25);
}

.carousel.images.dark-purple .carousel-indicators li {
    background-color: rgba(var(--dark-purple-rgb), 0.25);
}

.carousel.images.dark-purple .carousel-indicators li.active {
    background-color: rgba(var(--dark-purple-rgb), 1);
}

.carousel.images.orange .carousel-control-prev i, .carousel.images.orange .carousel-control-next i {
    color: rgba(var(--orange-rgb), 0.25);
}

.carousel.images.orange .carousel-indicators li {
    background-color: rgba(var(--orange-rgb), 0.25);
}

.carousel.images.orange .carousel-indicators li.active {
    background-color: rgba(var(--orange-rgb), 1);
}

.carousel.images.pink .carousel-control-prev i, .carousel.images.pink .carousel-control-next i {
    color: rgba(var(--pink-rgb), 0.25);
}

.carousel.images.pink .carousel-indicators li {
    background-color: rgba(var(--pink-rgb), 0.25);
}

.carousel.images.pink .carousel-indicators li.active {
    background-color: rgba(var(--pink-rgb), 1);
}

.carousel.images.green .carousel-control-prev i, .carousel.images.green .carousel-control-next i {
    color: rgba(var(--green-rgb), 0.25);
}

.carousel.images.green .carousel-indicators li {
    background-color: rgba(var(--green-rgb), 0.25);
}

.carousel.images.green .carousel-indicators li.active {
    background-color: rgba(var(--green-rgb), 1);
}

.carousel.images.dark-green .carousel-control-prev i, .carousel.images.dark-green .carousel-control-next i {
    color: rgba(var(--dark-green-rgb), 0.25);
}

.carousel.images.dark-green .carousel-indicators li {
    background-color: rgba(var(--dark-green-rgb), 0.25);
}

.carousel.images.dark-green .carousel-indicators li.active {
    background-color: rgba(var(--dark-green-rgb), 1);
}

.carousel.paginacion .carousel-inner {
    overflow: unset;
}

.carousel.paginacion .system-pagination .page-link {
    animation: fadeInUp 0.25s ease;
}

/*  IMAGES */

.image-view {
    width: 40px;
    height: 40px;
    position: relative;
}

.image-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-view.circle img {
    border-radius: 50%;
}

.image-view .tag {
    margin: 0 8px;
    font-family: 'Source Sans Pro';
    font-size: 14.75px;
    font-weight: 600;
}

.image-view.xs {
    width: 21px;
    height: 21px;
}

.image-view.sm {
    width: 24px;
    height: 24px;
}

.image-view.sm {
    width: 32px;
    height: 32px;
}

.image-view.md {
    width: 40px;
    height: 40px;
}

.image-view.xl {
    width: 48px;
    height: 48px;
}

.image-view.xl {
    width: 56px;
    height: 56px;
}

/*  PAGINATION */

.pagination-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.system-pagination {
    position: relative;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.system-pagination .page-item {
    position: relative;
}

.system-pagination .page-link {
    border-radius: 0!important;
    border: 0;
    color: rgb(0 0 0 / 35%);
    background-color: transparent;
    position: relative;
    font-size: 16px;
    font-family: 'Source Sans Pro';
    display: inline-flex;
    padding: 8px 21px!important;
    width: 100%;
}

.system-pagination .page-link::before {
    content: '';
    width: 50%;
    height: 3px;
    position: absolute;
    top: unset;
    bottom: 0;
    left: 12.5%;
    background-color: var(--orange);
    animation: fadeInUp 0.35s ease;
    display: none;
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
    z-index: 1;
}

.system-pagination .page-link.active {
    color: #000;
}

.system-pagination .page-link:focus {
    box-shadow: none;
}

.system-pagination .page-link:focus::before {
    animation: flipInX 0.5s ease;
}

.system-pagination .page-link.active::before {
    display: inline-block;
}

/* PAGINATION COLORS  */

.system-pagination.blue .page-link::before {
    background-color: var(--blue);
    box-shadow: 0 0 4px 1px rgba(var(--blue-rgb), 0.75);
}

.system-pagination.blue-light .page-link::before {
    background-color: var(--blue-light);
    box-shadow: 0 0 4px 1px rgba(var(--blue-light-rgb), 0.75);
}

.system-pagination.yellow .page-link::before {
    background-color: var(--yellow);
    box-shadow: 0 0 4px 1px rgba(var(--yellow-rgb), 0.75);
}

.system-pagination.purple .page-link::before {
    background-color: var(--purple);
    box-shadow: 0 0 4px 1px rgba(var(--purple-rgb), 0.75);
}

.system-pagination.orange .page-link::before {
    background-color: var(--orange);
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
}

.system-pagination.dark-purple .page-link::before {
    background-color: var(--dark-purple);
    box-shadow: 0 0 4px 1px rgba(var(--dark-purple-rgb), 0.75);
}

.system-pagination.pink .page-link::before {
    background-color: var(--pink);
    box-shadow: 0 0 4px 1px rgba(var(--pink-rgb), 0.75);
}

.system-pagination.green .page-link::before {
    background-color: var(--green);
    box-shadow: 0 0 4px 1px rgba(var(--green-rgb), 0.75);
}

.system-pagination.dark-green .page-link::before {
    background-color: var(--dark-green);
    box-shadow: 0 0 4px 1px rgba(var(--dark-green-rgb), 0.75);
}

/*  MODAL */

.modal.system .modal-content {
    border: 0;
    border-radius: 0;
}

.modal.system .close {
    background-color: transparent;
    border: 0;
    outline: 0;
    font-size: 19px;
}

.modal.system .modal-body {
    min-height: 80px;
}

.modal.system .modal-footer, .modal.system .modal-header {
    border: 0;
    position: relative;
}

.modal.system .modal-header .modal-title {
    font-family: 'Poppins';
    color: rgb(0 0 0 / 75%);
    font-size: 21px;
}

.modal.system .modal-header {
    position: relative;
    /* border-bottom: 1px rgb(0 0 0 / 0.2) solid; */
}

.modal.system .modal-header::before {
    content: '';
    width: 40px;
    height: 3px;
    position: absolute;
    top: unset;
    bottom: 0;
    left: 0;
    background-color: var(--orange);
    animation: fadeInUp 0.35s ease;
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
}

/*  MODAL COLORS */

.modal.system.blue .modal-header::before {
    background-color: var(--blue);
    box-shadow: 0 0 4px 1px rgba(var(--blue-rgb), 0.75);
}

.modal.system.blue-light .modal-header::before {
    background-color: var(--blue-light);
    box-shadow: 0 0 4px 1px rgba(var(--blue-light-rgb), 0.75);
}

.modal.system.yellow .modal-header::before {
    background-color: var(--yellow);
    box-shadow: 0 0 4px 1px rgba(var(--yellow-rgb), 0.75);
}

.modal.system.purple .modal-header::before {
    background-color: var(--purple);
    box-shadow: 0 0 4px 1px rgba(var(--purple-rgb), 0.75);
}

.modal.system.orange .modal-header::before {
    background-color: var(--orange);
    box-shadow: 0 0 4px 1px rgba(var(--orange-rgb), 0.75);
}

.modal.system.dark-purple .modal-header::before {
    background-color: var(--dark-purple);
    box-shadow: 0 0 4px 1px rgba(var(--dark-purple-rgb), 0.75);
}

.modal.system.pink .modal-header::before {
    background-color: var(--pink);
    box-shadow: 0 0 4px 1px rgba(var(--pink-rgb), 0.75);
}

.modal.system.green .modal-header::before {
    background-color: var(--green);
    box-shadow: 0 0 4px 1px rgba(var(--green-rgb), 0.75);
}

.modal.system.dark-green .modal-header::before {
    background-color: var(--dark-green);
    box-shadow: 0 0 4px 1px rgba(var(--dark-green-rgb), 0.75);
}

.modal.system.blue .close {
    color: var(--blue);
}

.modal.system.blue-light .close {
    color: var(--blue-light);
}

.modal.system.yellow .close {
    color: var(--yellow);
}

.modal.system.purple .close {
    color: var(--purple);
}

.modal.system.orange .close {
    color: var(--orange);
}

.modal.system.dark-purple .close {
    color: var(--dark-purple);
}

.modal.system.pink .close {
    color: var(--pink);
}

.modal.system.green .close {
    color: var(--green);
}

.modal.system.dark-green .close {
    color: var(--dark-green);
}

.card-presentation {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 16px;
    /*     box-shadow: 0 0 40px rgb(0 0 0 / 5%); */
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.card-presentation::before {
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: -25%;
    left: -25%;
    background-color: #247ba0;
    z-index: -1;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: scale(2.5);
    opacity: 0.05;
}

.card-presentation .icon {
    font-size: 21px;
    color: #247ba0;
    margin-bottom: 8px;
}

.contacto .card-presentation .icon {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.contacto .card-presentation .icon img {
    border-radius: 8px;
}

.contacto .card-presentation .icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(36 123 160 / 0.75);
    z-index: 0;
}

.contacto .card-presentation .box-card {
    z-index: 2;
    color: #fff;
}

.contacto .card-presentation .box-card .us-h5 {
    color: #fff;
}

.card-presentation .box-card {
    padding: 16px;
    position: relative;
}

.card-presentation .box-card .us-h5 {
    text-align: center;
    font-size: 14px;
    margin-bottom: 16px;
}

.card-presentation .box-card .box-text {
    height: 48px;
    overflow: hidden;
    font-size: 12px;
    padding: 8px;
    text-align: center;
}

.i-corner {
    position: absolute;
    right: 0;
    top: -20px;
}

.box-logo {
    width: 100%;
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-image {
    position: relative;
    width: 100%;
    display: flex;
    padding: 4px;
}

.svg-image img {
    width: 100%;
    height: 120px;
    position: relative;
    display: inline-flex;
    object-fit: contain;
}

.svg-image.h-200 img {
    height: 200px;
}

.svg-image.h-240 img {
    height: 240px;
}

.svg-image.h-280 img {
    height: 280px;
}

.nav-social {
    position: relative;
    background-color: transparent;
    padding: 8px;
    justify-content: center;
    animation: fadeInUp 0.5s ease-out;
    align-content: center;
    margin: 0 16px;
}

.nav-social a {
    margin: 6px;
    color: rgb(0 0 0 / 50%);
    font-size: 17px;
}

.page-header {
    position: relative;
}

.page-header::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--celadon-blue);
    z-index: -1;
}

.page-header:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: var(--wave-purple);
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: grayscale(1);
    opacity: 0.15;
}

.page-header .ubications {
    max-width: 560px;
    height: 100%;
    position: relative;
    padding: 0 16px;
}

.page-header .ubications .breadcrumb {
    margin: 0;
}

.page-header .ubications .breadcrumb .breadcrumb-item a {
    font-size: 16.75px;
    text-decoration: none;
    color: rgb(255 255 255 / 50%);
    font-family: 'Source Sans Pro';
}

.page-header .ubications .breadcrumb .breadcrumb-item.active a {
    color: #fff;
}

.page-header .ubications .breadcrumb .breadcrumb-item.active a i {
    display: inline-block;
    animation: fadeInUp 0.5s ease;
}

.page-header .ubications .breadcrumb .breadcrumb-item::before {
    color: #fff;
    font-size: 17px;
}

.page-header .image {
    width: 100%;
    height: 160px;
    background-image: url('../IMAGES/login/01.svg');
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    animation: fadeInUp 0.5s ease;
}

.page-header .box-title {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    padding: 12px;
    position: relative;
}

.page-header .box-title .us-h1 {
    color: #fff;
}

.page-header .box-title .description {
    color: #fff;
    font-family: 'Heebo';
    font-size: 12.75px;
    animation: fadeIn 1s ease;
}

.page-header .box-title .description .icon {
    position: relative;
    box-shadow: inset 0 0 4px 1px rgb(0 0 0 / 50%);
    animation: flipInX 1s ease;
    background-image: linear-gradient(45deg, rgb(255 255 255 / 15%) 50%, transparent 50%);
}

.page-footer {
    position: relative;
    min-height: 320px;
    background-color: var(--celadon-blue);
    z-index: 0;
}

.page-footer::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: var(--wave-purple);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    filter: grayscale(1) invert(1);
    z-index: -1;
}

.page-footer .links {
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-footer .links .nav-link {
    color: #fff;
    font-family: 'Heebo';
    font-size: 15.75px;
}

.page-footer .card-presentation {
    /*     border: 1px #fff solid; */
    box-shadow: 0 0 40px 0px rgb(0 0 0 / 0.15);
    background-color: rgb(36 123 160 / 35%);
}

.page-footer .card-presentation {
    color: #fff;
}

.page-footer .card-presentation .icon {
    color: var(--yellow);
}

.page-footer .card-presentation .us-h5 {
    color: #fff;
}

.page-footer .nav-social a {
    color: #fff;
}

.page-footer .bottom .nav-link {
    color: #fff;
}

.page-footer .navigation {
    flex-direction: row;
    justify-content: center;
}

.page-footer .navigation .nav-link {
    color: #fff;
    padding: 16px;
    font-family: 'Poppins';
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .page-footer .card-presentation {
        width: 72px;
        height: 72px;
        margin: 8px;
    }
    .page-footer .card-presentation .icon {
        font-size: 12px;
        margin-bottom: 0;
    }
    .page-footer .card-presentation .us-h5 {
        margin: 0;
        font-size: 10px!important;
        color: #fff;
        font-weight: normal;
    }
    .page-footer .card-presentation .box-card {
        padding: 8px;
        width: 100%;
    }
    .page-footer .card-presentation .box-text {
        display: none;
    }
    .page-footer .bottom {
        justify-content: center!important;
    }
    .page-footer .bottom .nav-link {
        font-size: 12px;
        padding: 4px;
    }
    .page-footer .navigation {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .page-footer .navigation .nav-link {
        padding: 8px;
        font-size: 12.75px;
    }
}