/**
 * Kia UI desarrollado por Kimerkia
 * Copyright 2022 Kimerkia all rights reserved
 * Visit https://kimerkia.com for more details
**/

/*  FONTS  */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


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

body,
html {
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    scroll-behavior: smooth;
}

:root {
 

    --ds-red: #D72638;
    --ds-red-rgb: 215, 38, 56;

    --ds-red-A: #D82735;
    --ds-red-rgb-A: 216, 39, 53;


    --ds-star-color: var(--ds-red);
    --ds-star-color-rgb: var(--ds-red-rgb);

    --ds-star-color: var(--ds-red);
    --ds-star-color-rgb: var(--ds-red-rgb);

    --ds-auxiliar-color: var(--ds-red);
    --ds-auxiliar-color-rgb: var(--ds-red-rgb);

    --ds-third-color: var(--ds-red);
    --ds-third-color: var(--ds-red-rgb);

    
}

/* COLORS */
.ds-blue {
    color: var(--ds-blue) !important;
}

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

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

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

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

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

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

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

.ds-red-A {
    color: var(--ds-red-A) !important;
}

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

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

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

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

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

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

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

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

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

.ds-light,
.ds-white {
    color: var(--ds-white) !important;
}

.ds-dark,
.ds-black {
    color: var(--ds-dark) !important;
}

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

/* BACKGROUNDS */
.ds-blue-bg {
    background-color: var(--ds-blue) !important;
}

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

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

.ds-gray-bg-5 {
    background-color: rgba(var(--ds-black-rgb), .05) !important;
}

.ds-gray-bg-10 {
    background-color: rgba(var(--ds-black-rgb), .1) !important;
}

.ds-gray-bg-15 {
    background-color: rgba(var(--ds-black-rgb), .15) !important;
}

.ds-gray-bg-25 {
    background-color: rgba(var(--ds-black-rgb), .25) !important;
}

.ds-gray-bg-50 {
    background-color: rgba(var(--ds-black-rgb), .50) !important;
}

.ds-gray-bg-75 {
    background-color: rgba(var(--ds-black-rgb), .75) !important;
}

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

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

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

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

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

.ds-red-A-bg {
    background-color: var(--ds-red-A) !important;
}

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

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

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

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

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

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

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

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

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

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

.ds-secondary-bg {
    background-color: var(--ds-gray) !important;
}

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

.ds-danger-bg {
    background-color: var(--ds-red) !important;
}

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

.ds-light-bg,
.ds-white-bg {
    background-color: var(--ds-white) !important;
}

.ds-dark-bg,
.ds-black-bg {
    background-color: var(--ds-dark) !important;
}

.ds-transparent-bg {
    background-color: transparent !important;
}

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


/* ACCORDION */
.ds-lista-items.ds-accordion {
    position: relative;
    flex-direction: column;
    border: 1px rgb(0 0 0 / 15%) solid;
    overflow: hidden;
}

.ds-lista-items.ds-accordion .item-li {
    width: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeInDown .3s ease-out;
    background: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ds-lista-items.ds-accordion .item-li .ds-h5 {
    text-align: center;
    font-size: 17.75px;
    padding: 16px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    border-bottom: 1px rgb(0 0 0 / 5%) solid;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ds-lista-items.ds-accordion .ds-item-active .ds-h5 {
    background: rgb(36 123 160 / 5%);
    border-color: var(--ds-star-color);
    color: var(--ds-star-color);
}


.ds-accordion .item-li:last-child .us-h5 {
    border-color: transparent;
}

.ds-lista-items.ds-accordion .item-li .us-h5 .icono {
    color: var(--ds-star-color);
}

.ds-lista-items.ds-accordion .item-li .ds-accordion-body {
    display: none;
    padding: 16px;
}

.ds-accordion .item-li.ds-item-active .ds-accordion-body {
    display: block;
}

/* ALERTS */
.ds-kia-alerts {
    position: fixed;
    z-index: 4020;
    margin: 6px;
}

.ds-kia-alerts.ds-alert-blur~*:not(.ds-kia-alerts):not(.ds-component-blur) {
    filter: blur(6px);
    opacity: .3;
    pointer-events: none;
}

.ds-kia-alerts.ds-alert-backdrop::before {
    content: '';
    background-color: #000;
    width: 100%;
    height: 100%;
    inset: 0;
    margin: auto;
    position: fixed;
    z-index: -1;
    opacity: 0.3;
}

.ds-kia-alerts.ds-alert-backdrop~*:not(.ds-kia-alerts):not(.ds-component-backdrop) {
    pointer-events: none;
}

.ds-kia-alerts.ds-alerts-top {
    top: 0;
}

.ds-kia-alerts.ds-alerts-bottom {
    bottom: 0;
}

.ds-kia-alerts.ds-alerts-center.ds-alerts-side-center {
    inset: 0;
    margin: auto;
    max-width: 400px;
    max-height: 72px;
}

.ds-kia-alerts.ds-alerts-bottom.ds-alerts-side-center,
.ds-kia-alerts.ds-alerts-top.ds-alerts-side-center {
    left: 0;
    right: 0;
    margin: 6px auto;
    max-width: 400px;
}


.ds-kia-alerts.ds-alerts-side-right,
.ds-kia-alerts.ds-alerts-side-center.ds-alerts-side-right {
    left: unset;
    right: 0;
}

.ds-kia-alerts.ds-alerts-side-left,
.ds-kia-alerts.ds-alerts-side-center.ds-alerts-side-left {
    left: 0;
    right: unset;
}

.ds-kia-alerts.ds-alerts-center.ds-alerts-side-left {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: unset;
    max-width: 400px;
    max-height: 72px;
}


.ds-kia-alerts.ds-alerts-center.ds-alerts-side-right {
    margin: auto 6px;
    top: 0;
    bottom: 0;
    left: unset;
    right: 0;
    max-height: 72px;
}

.ds-alerts-box {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ds-alert {
    width: 400px;
    min-height: 48px;
    /* margin: 6px; */
    box-shadow: none;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
    top: 4px;
    left: 4px;
    z-index: -1;
    transition: all .15s ease;
    animation-duration: .15s;
    box-shadow: 0 0 6px rgb(0 0 0 / 30%);
    padding-right: 80px;
}

.ds-alert.ds-active {
    position: relative;
    top: 0;
    left: 0;
    z-index: unset;
}

.ds-alert.ds-light code {
    color: var(--ds-red);
}

.ds-alert.ds-dark {
    background-color: rgb(0 0 0);
}


.ds-alert.ds-dark code {
    color: var(--ds-red);
    font-weight: bolder;
}

.ds-alert.ds-active~.ds-alert {
    box-shadow: none;
}

.ds-alert.ds-active+.ds-alert {
    box-shadow: 0 0 3px rgb(0 0 0 / 60%);
}

.ds-alert .ds-type {
    margin: 0;
    max-width: 56px;
    height: 48px;
    display: inline-flex;
    padding: 0;
    width: auto;
    align-items: center;
}

.ds-alert .ds-type svg {
    width: 24px;
    height: 24px;
    fill: var(--ds-white);
}

.ds-alert .ds-type::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: -1;
}

.ds-alert.ds-danger .ds-type .ds-triangle {
    color: var(--ds-red);
    border-radius: 0;
}

.ds-alert.ds-success .ds-type .ds-check {
    color: var(--ds-green);
    border-radius: 0;
}

.ds-alert.ds-warning .ds-type .ds-triangle {
    color: rgba(var(--ds-black-rgb), 0.9);
    border-radius: 0;
}

.ds-alert.ds-info .ds-type .ds-information {
    color: var(--ds-star-color);
    border-radius: 0;
}


.ds-alert .ds-close .ds-icono {
    font-size: .7rem;
    width: 24px;
    height: 24px;
}

.ds-alert .ds-close .ds-icono svg.ds-kimerkia {
    transform: rotate(45deg);
}

.ds-alert .ds-alert-area {
    padding: 16px;
    width: 0;
    flex: 1;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

@keyframes ds-close-animation {
    from {
        transform: scale(1.5);
    }

    to {
        transform: scale(-1.5);
    }
}

.ds-alert .ds-close {
    background-color: var(--ds-red);
    animation: ds-close-animation .3s ease;
    animation-fill-mode: forwards !important;
    border-radius: 50%;
    position: absolute;
    right: 16px;
    top: 16px;
    padding: 0;
}

.ds-alert.ds-closing {
    /* animation: fadeOutDown .3s ease; */
    animation-fill-mode: forwards;
    animation-duration: .3s;
}

.ds-alert .ds-alert-area code {
    font-family: var(--ds-font);
    font-weight: 600;
    width: auto;
    max-width: 100%;
}

@keyframes ds-timer {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(5);
    }
}

.ds-alert .ds-timer {
    content: '';
    width: 48px;
    height: 48px;
    position: absolute;
    inset: 0;
    margin: auto;
    top: 0;
    border-radius: 50%;
    z-index: -1;
    animation: ds-timer ease;
    animation-fill-mode: forwards;
    bottom: -80px;
    transform: scale(0);
    box-shadow: inset 0 0 0 6px var(--ds-red), 0 0 0 6px rgba(var(--ds-red-rgb), .3), 0 0 0 15px rgba(var(--ds-red-rgb), .15);
    opacity: .15;
}

.ds-alert.ds-dark .ds-timer {
    background-color: rgb(255 255 255 / 0.2);
}

.ds-alert.ds-active~.ds-alert .ds-timer,
.ds-alert.ds-active:hover .ds-timer {
    animation: none;
}

.ds-alert-counter {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--ds-red);
    bottom: 0;
    right: 0;
    color: var(--ds-light);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-family: var(--ds-font);
    font-size: .6rem;
    box-shadow: 0 0 4px #000;
    animation: bounce .9s ease;
}

.ds-close-all {
    width: 128px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--ds-red);
    color: #fff;
    font-family: var(--ds-font);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bolder;
    height: 24px;
    border-radius: 48px;
    position: absolute;
    top: -24px;
    left: 0;
    box-shadow: 0 0 4px rgb(0 0 0 / 30%);
    cursor: pointer;
    animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.ds-alerts-top .ds-close-all {
    top: unset;
    bottom: -24px;
}

.ds-close-all .ds-tag {
    padding: 0 9px;
}

.ds-close-all .ds-icono {
    width: 24px;
    height: 24px;
    font-size: .6rem;
}

.ds-close-all .ds-icono svg.ds-kimerkia {
    transform: rotate(45deg);
}

.ds-alert.ds-closing~.ds-alert:nth-child(2)+.ds-alert-counter,
.ds-alert.ds-closing:first-child+.ds-close-all,
.ds-alert.ds-closing+.ds-close-all+.ds-alert-counter,
.ds-alert.ds-closing~.ds-alert:nth-child(3)+.ds-close-all {
    animation: fade-out-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-fill-mode: forwards;
}

.ds-alert.ds-success code {
    color: var(--ds-green);
}

.ds-alert .ds-close {
    background-color: var(--ds-red);
    color: var(--ds-white);
}

.ds-alert.ds-success>.ds-icono {
    background-color: var(--ds-green);
    box-shadow: 0 0 24px 12px rgba(var(--ds-green-rgb), 0.3);
}

.ds-alert.ds-success .ds-close {
    background-color: var(--ds-green);
}

.ds-alert.ds-success code {
    color: var(--ds-green);
}

.ds-alert.ds-success .ds-timer {
    box-shadow: inset 0 0 0 3px rgba(var(--ds-green-rgb), 0.6), inset 0 0 0 4px rgba(var(--ds-green-rgb), 0.6), inset 0 0 0 6px rgba(var(--ds-green-rgb), 0.3);
}

.ds-alert.ds-warning>.ds-icono {
    background-color: var(--ds-yellow);
}

.ds-alert.ds-warning .ds-close {
    background-color: var(--ds-yellow);
    color: var(--ds-black);
}

.ds-alert.ds-warning code {
    color: var(--ds-black);
}

.ds-alert.ds-warning.ds-dark code {
    color: var(--ds-white);
}

.ds-alert.ds-warning .ds-timer {
    box-shadow: inset 0 0 0 3px rgba(var(--ds-yellow-rgb), .6), inset 0 0 0 4px rgba(var(--ds-yellow-rgb), .6), inset 0 0 0 6px rgba(var(--ds-yellow-rgb), 0.6);
    opacity: .6;
}

.ds-alert.ds-warning.ds-dark .ds-timer {
    opacity: .1;
}

.ds-alert.ds-info>.ds-icono {
    background-color: var(--ds-star-color);
    box-shadow: 0 0 24px 12px rgba(var(--ds-star-color-rgb), 0.3);
}

.ds-alert.ds-info .ds-close {
    background-color: var(--ds-star-color);
}

.ds-alert.ds-info code {
    color: var(--ds-star-color);
}

.ds-alert.ds-info .ds-timer {
    box-shadow: inset 0 0 0 3px rgba(var(--ds-star-color-rgb), 0.9), inset 0 0 0 4px rgba(var(--ds-star-color-rgb), 0.6), inset 0 0 0 6px rgba(var(--ds-star-color-rgb), 0.3);
}

.ds-alert.ds-white>.ds-icono {
    background-color: var(--ds-white);
    box-shadow: 0 0 24px 12px rgba(var(--ds-black-rgb), 0.3);
    color: var(--ds-black)
}

.ds-alert.ds-white .ds-close {
    background-color: rgba(var(--ds-white-rgb), 1);
}

.ds-alert.ds-white .ds-close .ds-icono {
    color: var(--ds-black);
}

.ds-alert.ds-white code {
    color: var(--ds-black);
}

.ds-alert.ds-white .ds-timer {
    box-shadow: inset 0 0 0 3px rgba(var(--ds-black-rgb), 0.3), inset 0 0 0 4px rgba(var(--ds-black-rgb), 0.3), inset 0 0 0 6px rgba(var(--ds-black-rgb), 0.3);
}

.ds-alert.ds-white.ds-dark code {
    color: var(--ds-white)
}

.ds-alert.ds-black {
    background-color: var(--ds-black);
}

.ds-alert.ds-black>.ds-icono {
    background-color: var(--ds-white);
    box-shadow: 0 0 24px 12px rgba(var(--ds-white-rgb), 0.3);
    color: var(--ds-black);
}

.ds-alert.ds-black .ds-close {
    background-color: transparent;
}

.ds-alert.ds-black .ds-close .ds-icono {
    color: var(--ds-white);
}

.ds-alert.ds-black code {
    color: var(--ds-white);
}

.ds-alert.ds-black .ds-timer {
    box-shadow: inset 0 0 0 3px rgba(var(--ds-white-rgb), 0.15), inset 0 0 0 4px rgba(var(--ds-white-rgb), 0.15), inset 0 0 0 6px rgba(var(--ds-white-rgb), 0.15);
}

.ds-alert.ds-black.ds-dark code {
    color: var(--ds-white)
}

.ds-alert.ds-close-disabled {
    padding-right: 0;
}


/* ICONS */
.ds-icono {
    width: 48px;
    height: 48px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    align-content: center;
    font-size: 1.25rem;
}

.ds-dual-icono {
    position: relative;
}

.ds-dual-icono .ds-icono.ds-stacked {
    transform: scale(0.5);
    position: absolute;
    right: -25%;
    top: -25%;
}

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

.ds-icono.ds-circle,
.ds-icono.ds-circle img {
    border-radius: 50%;
}

.ds-icono .ds-stacked {
    position: absolute;
    transform: scale(.9);
}

.ds-icono .ds-stacked.left {
    left: -12px;
}

.ds-icono.ds-xxs {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.ds-icono.ds-xs {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.ds-icono.ds-sm {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.ds-icono.ds-md {
    width: 64px;
    height: 64px;
    font-size: 2.5rem;
}

.ds-icono.ds-lg {
    width: 96px;
    height: 96px;
    font-size: 3.5rem;
}

.ds-icono.ds-xl {
    width: 128px;
    height: 128px;
    font-size: 5rem;
}

.ds-icono.ds-xxl {
    width: 256px;
    height: 256px;
    font-size: 10rem;
}

.ds-icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-ring {
    box-shadow: 0 0 0 4px;
}

.ds-icono.ds-hover-action {
    cursor: pointer;
    transition: all .3s ease;
    transition-property: background-color, color;
}

.ds-icono.ds-hover-action:hover {
    background-color: var(--ds-star-color) !important;
    color: var(--ds-white) !important;
}

svg.ds-kimerkia {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

svg.ds-kimerkia path:not([fill="none"]),
svg.ds-kimerkia rect:not([fill="none"]),
svg.ds-kimerkia circle:not([fill="none"]) {
    fill: currentColor;
}

.ds-spinner.ds-kimerkia {
    animation: ds-spinner 2s infinite linear;
}

/* LISTAS */
.ds-lista-items {
    list-style: none;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    overflow: visible;
}

.ds-lista-items .item-li {
    position: relative;
    display: flex;
    flex-direction: column;
}

.ds-lista-items .link-item {
    text-decoration: none;
    color: rgb(0 0 0 / 0.8);
    font-family: var(--ds-font);
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    margin: 0;
    padding: 3px 18px;
}

.ds-lista-items .link-item .ds-tag {
    display: inline-flex;
}

/* TABS */

.ds-lista-tabs .link-item .ds-icono {
    color: var(--ds-star-color);
}

.ds-lista-tabs .link-item {
    margin: 0;
    padding: 9px 12px;
    position: relative;
    display: inline-flex;
    cursor: pointer;
    overflow: hidden;
}

.ds-lista-tabs .link-item.ds-active .ds-icono {
    color: var(--ds-star-color);
    animation: flipInX .6s ease-in-out;
}

.ds-lista-tabs .link-item::before {
    content: '';
    width: 50%;
    height: 3px;
    background-color: var(--ds-star-color);
    position: absolute;
    bottom: 0;
    left: 25%;
    animation: fadeInLeft .3s ease;
    display: none;
}

.ds-lista-tabs .link-item[data-prev]::before {
    animation: fadeInRight .3s ease;
}

.ds-lista-tabs .link-item.ds-active::before {
    display: inline-block;
}

.ds-tabs-box {
    position: relative;
    z-index: 1;
}

.ds-tabs-box .ds-tab-inner {
    display: none;
    animation: fade-in-left .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.ds-tabs-box .ds-tab-inner[data-prev] {
    display: none;
    animation: fade-in-right .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.ds-tabs-box .ds-tab-inner.ds-active {
    display: block;
}

.ds-tabs-box .ds-tab-inner[not-animated] {
    animation: none;
}

/* BADGES */
.ds-badge {
    background-color: var(--ds-star-color);
    color: #fff;
    padding: 0px 9px;
    font-family: var(--ds-font);
    border-radius: 16px;
    font-size: .9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.ds-badge.ds-danger {
    background-color: var(--ds-red);
}

.ds-badge.ds-success {
    background-color: var(--ds-green);
}

.ds-badge.ds-warning {
    background-color: var(--ds-yellow);
    color: #000;
}

.ds-badge.ds-info {
    background-color: var(--ds-star-color);
}

.ds-badge.ds-white {
    background-color: var(--ds-white);
    box-shadow: 0 0 3px rgb(0 0 0 / .6);
}

.ds-badge.ds-black {
    background-color: var(--ds-black);
}

.ds-badge.ds-yellow-bg,
.ds-badge.ds-warning-bg,
.ds-badge.ds-white-bg {
    color: #000;
}

.ds-badge.ds-white-bg,
.ds-badge.ds-light-bg {
    box-shadow: 0 0 3px rgb(0 0 0 / 0.6);
}

.ds-badge .ds-close {
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-block;
    position: relative;
    margin-left: 6px;
}

.ds-badge .ds-close .ds-icono {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    inset: 0;
    margin: auto;
    transition: all .3s ease;
}

.ds-badge .ds-close:hover .ds-icono {
    color: var(--ds-red);
    background-color: var(--ds-white);
    box-shadow: 0 0 3px rgb(0 0 0 / .6);
}

.ds-badge .ds-close .ds-icono.ds-kimerkia svg {
    transform: rotate(45deg);
}

.ds-badge.ds-badge-button {
    padding-right: 0 !important;
}

/* BREADCRUMB */
.ds-lista-items.ds-breadcrumb {
    padding: 24px;
    background-color: rgba(var(--ds-gray-rgb), 0.15);
}

.ds-lista-items.ds-breadcrumb .item-li {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.ds-lista-items.ds-breadcrumb .item-li:not(:last-child)::after {
    content: '/';
    font-weight: bolder;
    font-size: 24px;
    margin: 0 6px;
}

.ds-lista-items.ds-breadcrumb .link-item.ds-active {
    color: var(--ds-star-color);
    font-weight: bolder;
    animation: flipInX .3s ease;
}

/* DROPDOWN */
.ds-lista-dropdown {
    overflow: visible !important;
    width: 100%;
}

.ds-dropdown-menu {
    position: absolute;
    display: none;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    min-width: 7.5rem;
    background-color: #fff;
    padding: 16px 0;
    box-shadow: 0 0 3px rgb(0 0 0 / 15%);
    border-radius: 3px;
    animation: fadeInUp .3s ease;
    left: 0;
    z-index: 3020;
}

.ds-dropdown-menu .ds-item {
    position: relative;
}

.ds-dropdown-box {
    position: relative;
    cursor: pointer;
}

.ds-dropdown-box>.link-item {
    padding: 9px !important;
    align-items: flex-start;
}

.ds-dropdown-box>.link-item .ds-data {
    border: 0;
    background-color: transparent;
    margin: 0;
    padding: 6px 0;
    height: 100%;
}

.ds-dropdown-box>.link-item .ds-data+.ds-icono {
    width: 24px;
    height: 100%;
    transition: all .3s ease;
}

.ds-dropdown-box.ds-active>.link-item {
    color: var(--ds-star-color);
    background-color: rgba(var(--ds-star-color-rgb), 0.25);
}

.ds-dropdown-box.ds-active>.link-item .ds-data+.ds-icono {
    transform: rotate(180deg);
}

.ds-dropdown-box:focus {
    background-color: var(--ds-star-color);
}

.ds-data-display:has(.ds-badge-selectbox)~.ds-placeholder-selectbox,
.ds-data-display:has(.ds-h5)~.ds-placeholder-selectbox {
    display: none;
}

.ds-data-display:not(:empty)~.ds-placeholder-selectbox {
    display: none;
}

.ds-lista-dropdown.ds-hover .item-li:focus-within>.ds-dropdown-menu,
.ds-lista-dropdown.ds-hover .item-li:hover>.ds-dropdown-menu,
.ds-lista-dropdown.ds-hover .item-li>.ds-dropdown-menu:focus,
.ds-lista-dropdown.ds-hover .item-li>.ds-dropdown-menu:hover {
    visibility: visible;
    opacity: 1;
    display: inline-flex;
}

.ds-lista-dropdown .ds-dropdown-box.ds-active .ds-dropdown-menu {
    visibility: visible;
    opacity: 1;
    display: inline-flex;
}

.ds-dropdown-menu.ds-calculating {
    visibility: visible;
    opacity: 0;
    display: inline-flex;
    animation: none !important;
}

.ds-lista-items .item-li .ds-dropdown-menu .item-li {
    clear: both;
    width: 100%;
}

.ds-dropdown-menu .ds-item .link-item {
    padding: 6px 16px;
    transition: all .3s ease;
    transition-property: background-color, color;
    position: relative;
    width: 100%;
}

.ds-dropdown-menu .ds-item .link-item:hover {
    background-color: var(--ds-star-color);
    color: #fff;
}

.ds-dropdown-menu .ds-item .link-item.ds-active {
    background-color: rgba(var(--ds-star-color-rgb), .05);
    color: var(--ds-star-color);
}

.ds-bottom-options {
    padding: 9px;
    display: flex;
    justify-content: flex-end;
}

.ds-bottom-options .ds-button-done {
    font-size: 1rem;
    height: 40px;
    padding: 0 21px;
    border-radius: 3px;
    background-color: rgba(var(--ds-star-color-rgb), 0.15);
    color: var(--ds-star-color);
}

.ds-bottom-options .ds-button-done .ds-icono {
    width: 28px;
    height: 28px;
    font-size: 1rem;
}

/*
    SELECT BOX
 */

.ds-lista-selectbox {
    width: 100%;
}

.ds-lista-selectbox .ds-dropdown-box,
.ds-lista-selectbox .ds-dropdown-box>.link-item,
.ds-lista-selectbox .ds-dropdown-menu {
    width: 100%;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-xxs>.ds-box-items {
    max-height: 80px;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-xs>.ds-box-items {
    max-height: 160px;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-sm>.ds-box-items {
    max-height: 240px;
}

/* DEFAULT SIZE MENU */
.ds-dropdown-box>.ds-dropdown-menu>.ds-box-items {
    max-height: 320px;
    overflow-y: auto;
    flex-wrap: nowrap;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-md>.ds-box-items {
    max-height: 400px;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-lg>.ds-box-items {
    max-height: 480px;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-xl>.ds-box-items {
    max-height: 560px;
}

.ds-dropdown-box>.ds-dropdown-menu.ds-xxl>.ds-box-items {
    max-height: 640px;
}

.ds-lista-selectbox .ds-dropdown-box>.link-item {
    border: 1px rgb(0 0 0 / 30%) solid;
    display: flex;
    justify-content: space-between;
    height: 48px;
    overflow: hidden;
    padding: 0 16px !important;
}

.ds-lista-selectbox .ds-dropdown-box.ds-active>.link-item {
    background-color: #fff;
    color: rgba(var(--ds-black-rgb), .75);
}

.ds-lista-selectbox .ds-form-search-select {
    padding: 0 16px;
}


.ds-badge-selectbox {
    background-color: rgba(var(--ds-black-rgb), 0) !important;
    color: rgba(var(--ds-star-color-rgb), 0.85) !important;
    margin: 3px;
    font-weight: 500;
}

.ds-badge-selectbox .ds-close .ds-icono {
    color: var(--ds-red);
    background-color: rgba(var(--ds-white-rgb), 1);
}

.ds-placeholder-selectbox {
    animation: fadeInUp .3s ease;
    font-family: var(--ds-font);
    color: rgba(var(--ds-black-rgb), .75);
    display: inline-block;
}

.ds-data-display {
    display: block;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-height: 100%;
}

.ds-box-select {
    flex-direction: row !important;
    flex-wrap: nowrap;
}

.ds-clean-selectbox {
    cursor: pointer;
    color: var(--ds-red);
}

.ds-selectbox-wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

/*  FORMULARIOS */

.ds-form {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 16px;
}

.ds-form .ds-form-group {
    margin-bottom: 16px;
    position: relative;
}

.ds-form-group label:not(.ds-checkbox) {
    font-family: var(--ds-font);
    font-size: 16px;
    font-weight: bolder;
    color: rgb(0 0 0 / 80%);
    margin: 4px;
    cursor: pointer;
    width: 100%;
    display: inline-flex;
    padding: 3px 12px;
    user-select: none;
}

.ds-form-group label .ds-icono {
    color: var(--ds-star-color);
}

.ds-form-group.ds-group-inline {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.ds-form-group.ds-group-inline .ds-input-box {
    width: 100%;
}

.ds-input-box {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.ds-input-box.box-inline {
    display: inline-flex;
    width: 100%;
}

.ds-input-box input,
.ds-input-text,
.ds-input-box textarea,


.ds-input-box input:focus,
.ds-input-text:focus,
.ds-input-box textarea:focus,


.ds-input-box input:focus~label,


.ds-input-box textarea,
.ds-input-area {
    height: auto;
}

.ds-input-box.ds-border-round {
    border-radius: 48px;
}

/*  FORM MATERIAL */
.ds-form.ds-material input,
.ds-form.ds-material textarea {
    border: 0;
    border-bottom: 1px var(--ds-gray) solid;
    background-color: transparent;
}

.ds-material .ds-input-box {
    position: relative;
}

.ds-material .ds-input-box input:focus,
.ds-material .ds-input-box textarea:focus {
    outline: 0;
    box-shadow: none !important;
    border-color: var(--ds-star-color);
}

.ds-material .ds-input-box input~label,
.ds-material .ds-input-box textarea~label {
    font-size: 14.75px;
    transform: translateY(40px);
    transition: all .3s ease;
    transition-property: transform;
    transform-origin: 0 0;
    z-index: -1;
}

.ds-material .ds-input-box input:focus~label,
.ds-material .ds-input-box textarea:focus~label,
.ds-material .ds-input-box input.ds-active~label,
.ds-material .ds-input-box textarea.ds-active~label {
    animation: none !important;
    color: var(--ds-star-color);
    transform: translateY(0) scale(.8);
    transform-origin: 0 0;
}

@keyframes width-border {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes transform-check-in {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes transform-check-out {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

.ds-material.ds-form-border input,
.ds-material.ds-form-border textarea {
    border: 0 !important;
}

.ds-border-material {
    position: absolute;
    z-index: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    overflow: hidden;
}

.ds-border-material::before {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--ds-gray);
}

.ds-border-material::after {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(0);
    background-color: var(--ds-star-color);
}

@keyframes transform-border-out {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

@keyframes transform-border-in {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.ds-material.ds-form-border input:focus~.ds-border-material::before,
.ds-material.ds-form-border textarea:focus~.ds-border-material::before {
    animation: transform-border-out .3s ease-out;
}

.ds-material.ds-form-border input:focus~.ds-border-material::after,
.ds-material.ds-form-border textarea:focus~.ds-border-material::after {
    animation: transform-border-in .3s ease-out;
    animation-fill-mode: forwards;
}

.ds-counter {
    position: absolute;
    bottom: -24px;
    right: 0;
    font-family: var(--ds-font);
    font-size: 14px;
    opacity: .6;
    width: 24px;
    height: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000;
}

.ds-material.ds-form-counter .ds-input-box {
    margin-bottom: 24px;
}

.ds-counters .ds-input-box input:focus~.ds-counter,
.ds-counters .ds-input-box textarea:focus~.ds-counter {
    color: var(--ds-orange);
    opacity: 1;
}

.ds-counter.ds-counter-animation {
    animation: flipInY .9s ease;
}

.ds-area-file {
    width: 100%;
    height: 320px;
    background-color: #fff;
    border: 3px rgba(var(--ds-star-color-rgb), 0.3) dashed;
    border-radius: 9px;
    position: relative;
}

.ds-area-file.ds-hidden {
    display: none !important;
}

.ds-message-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    position: relative;
    overflow: hidden;
}

.ds-dragNdrop-area {
    pointer-events: none !important;
}

.ds-form-image input[type='file'] {
    display: none !important;
}

.ds-message-area:not(.ds-active) {
    display: none !important;
}

.ds-lista-images-compressing {
    justify-content: center;
}

.ds-lista-images-compressing .link-item {
    padding: 0;
    margin: 6px;
}

.ds-progress-bar-box {
    width: 240px;
    height: 2px;
    position: relative;
    background-color: rgba(var(--ds-black-rgb), .05);
    display: inline-block;
}

.ds-progress-bar {
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: auto;
    background-color: var(--ds-star-color);
    transition: background-color 150ms ease;
}

.ds-lista-result {
    justify-content: center;
    counter-reset: lista-files-index;
}

.ds-lista-result .item-li {
    margin: 12px;
    counter-increment: lista-files-index;
    animation-fill-mode: forwards;
    align-items: center;
}

.ds-lista-result .item-li.ds-is-drag {
    opacity: .3;
}

.ds-lista-result .item-li.ds-is-drag-start {
    opacity: 0.9;
    filter: grayscale(1);
    transform: scale(0.8);
}

.ds-lista-result .link-item {
    padding: 0;
    margin: 0;
}

.ds-lista-result .link-item .ds-icono {
    width: 96px;
    height: 96px;
    font-size: 1.75rem;
}

.ds-lista-result .link-item .ds-icono,
.ds-lista-result .link-item .ds-icono img {
    border-radius: 6px;
    object-fit: contain;
    box-shadow: 0 0 9px 2px rgba(var(--ds-black-rgb), 0.1);
}


.ds-lista-result.ds-order-enabled {
    border: 2px rgba(var(--ds-star-color-rgb), .05) dashed;
}

.ds-lista-result.ds-order-enabled .ds-options-image,
.ds-lista-result.ds-order-enabled .item-label-add {
    display: none !important;
}

.ds-lista-result.ds-order-enabled .item-li {
    margin: 9px;
}

.ds-lista-result.ds-order-enabled .item-li::before {
    content: counter(lista-files-index);
    font-family: var(--ds-font);
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--ds-red);
    color: #fff;
    width: 21px;
    height: 21px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13.75px;
    z-index: 1;
    animation: fadeInUp .3s ease;
}

@media(max-width: 767.98px) {
    .ds-lista-result.ds-order-enabled .link-item .ds-icono {
        width: 72px;
        height: 72px;
    }

    .ds-lista-result.ds-order-enabled .item-li {
        margin: 3px;
    }
}

.ds-options-image {
    width: 120px;
    border-radius: 2rem;
    box-shadow: 0 0 6px 1px rgba(var(--ds-black-rgb), .15);
    margin: 9px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.ds-options-image.ds-hidden {
    display: none !important;
}

.ds-options-image .ds-icono {
    width: 40px !important;
    height: 40px;
    font-size: 1.05rem !important;
    border-radius: 50%;
    color: var(--ds-star-color) !important;
    cursor: pointer;
    transition: all .3s ease;
    transition-property: background-color;
    margin: 0 !important;
}

.ds-options-image .ds-icono:not(.ds-select-option):hover {
    background-color: var(--ds-star-color);
    color: #fff !important;
}

.ds-select-option input[type='checkbox'] {
    display: none !important;
}

.ds-select-option .ds-checkbox {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    display: inline-flex;
}

.ds-select-option .ds-checkbox svg {
    height: 100%;
    animation: fadeInUp .15s ease;
    display: none;
}

.ds-select-option input[type='checkbox']:checked~.ds-checkbox svg {
    display: inline-block;
    color: #fff;
}

.ds-mark-checkbox {
    position: absolute;
    width: 75%;
    height: 75%;
    margin: auto;
    inset: 0;
    z-index: -1;
    background-color: var(--ds-star-color);
    border-radius: 50%;
    animation: flipInX 0.3s both;
    display: none;
}

.ds-select-option input[type='checkbox']:checked~.ds-mark-checkbox {
    display: inline-block;
}

.item-label-add {
    width: 160px !important;
    height: 160px;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px rgba(var(--ds-star-color-rgb), 0.15) dashed;
    border-radius: 6px;
    padding: 0 !important;
    overflow: hidden;
    font-size: 14.75px !important;
}

.item-label-add.ds-hidden {
    display: none !important;
}

.ds-message-label {
    display: flex;
    flex-direction: column;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 12px;
}

.ds-message-label:not(.ds-active) {
    display: none !important;
}

.ds-message-result {
    width: 100%;
    height: auto;
}

.ds-message-result.ds-hidden {
    display: none !important;
}

.ds-lista-add-images {
    justify-content: center;
}

.ds-lista-add-images .link-item .ds-icono {
    color: var(--ds-star-color);
    background-color: transparent;
    box-shadow: none;
}

.ds-lista-add-images .item-li.ds-disabled {
    opacity: .6;
    filter: grayscale(1);
    cursor: not-allowed;
}

.ds-lista-add-images .item-li.ds-disabled .link-item {
    pointer-events: none;
}

.ds-order-images-option.ds-active~* {
    display: none !important;
}

.ds-order-images-option:not(.ds-active) .ds-disable-order {
    display: none !important;
}

.ds-order-images-option.ds-active .ds-enable-order {
    display: none !important;
}

.ds-order-images-option .ds-tag-option {
    display: inline-flex;
    align-items: center;
    /* background-color: rgba(var(--ds-blue-rgb), 0.1); */
    padding-right: 26px;
    border-radius: 8px;
}

.ds-order-images-option .ds-tag-option .ds-icono {
    animation: fadeInUp .3s ease;
}

/* CHECKBOX */
.ds-form-check {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

.ds-form-check>label:not(.ds-checkbox) {
    width: auto;
    transition: background-color .3s ease-out;
}

.ds-form-check>label:hover {
    background-color: rgba(var(--ds-black-rgb), .05);
}

.ds-form-check input[type='checkbox'],
.ds-form-check input[type='radio'] {
    display: none;
}

.ds-checkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 2px var(--ds-star-color);
    cursor: pointer;
}

.ds-checkbox.ds-xs {
    width: 12px;
    height: 12px;
}

.ds-form-check .ds-checkbox::before {
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    inset: 0;
    margin: auto;
    background-color: var(--ds-star-color);
    animation: fadeOutUp .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-fill-mode: forwards !important;
    display: inline-flex;
}

.ds-form-check.ds-check-pulse input[type='checkbox']:checked~.ds-checkbox,
.ds-form-check.ds-check-pulse input[type='radio']:checked~.ds-checkbox {
    animation: shadow-pulse .1s ease;
}

.ds-form-check input[type='checkbox']:checked~.ds-checkbox::before,
.ds-form-check input[type='radio']:checked~.ds-checkbox::before {
    animation: fadeInUp .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* PULSE  DOWN */
.ds-form-check.ds-direction-down .ds-checkbox::before {
    animation: fadeOutDown .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ds-form-check.ds-direction-down input[type='checkbox']:checked~.ds-checkbox::before,
.ds-form-check.ds-direction-down input[type='radio']:checked~.ds-checkbox::before {
    animation: fadeInDown .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* PULSE  LEFT */
.ds-form-check.ds-direction-left .ds-checkbox::before {
    animation: fadeOutLeft .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ds-form-check.ds-direction-left input[type='checkbox']:checked~.ds-checkbox::before,
.ds-form-check.ds-direction-left input[type='radio']:checked~.ds-checkbox::before {
    animation: fadeInLeft .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* PULSE  RIGHT */
.ds-form-check.ds-direction-right .ds-checkbox::before {
    animation: fadeOutRight .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ds-form-check.ds-direction-right input[type='checkbox']:checked~.ds-checkbox::before,
.ds-form-check.ds-direction-right input[type='radio']:checked~.ds-checkbox::before {
    animation: fadeInRight .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* CENTER */
.ds-form-check.ds-direction-center .ds-checkbox::before {
    animation: transform-check-out .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ds-form-check.ds-direction-center input[type='checkbox']:checked~.ds-checkbox::before,
.ds-form-check.ds-direction-center input[type='radio']:checked~.ds-checkbox::before {
    animation: transform-check-in .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ds-form-check-toggler {
    display: inline-flex;
    align-items: center;
}

.ds-checkbox.ds-circle,
.ds-checkbox.ds-circle::before {
    border-radius: 50%;
}

.ds-form-check.ds-check-hover {
    transition: background-color .3s ease;
}

.ds-form-check.ds-check-hover:hover,
.ds-form-check.ds-check-hover:focus {
    background-color: rgb(0 0 0 / .05);
}

.ds-checkbox-toggler {
    display: inline-block !important;
    width: 48px !important;
    height: 24px;
    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    border-radius: 32px;
    cursor: pointer;
    position: relative;
}

.ds-checkbox-toggler::before {
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    right: 24px;
    border-radius: 50%;
    box-shadow: 0 0 9px rgb(0 0 0 / 40%);
    transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    background-color: #fff;
}

.ds-form-check-toggler input[type='checkbox'],
.ds-form-check-toggler input[type='radio'] {
    display: none;
}

.ds-form-check-toggler input[type='checkbox']:checked~.ds-checkbox-toggler::before,
.ds-form-check-toggler input[type='radio']:checked~.ds-checkbox-toggler::before {
    right: 0;
    background-color: var(--ds-star-color);
    box-shadow: 0 0 16px var(--ds-star-color);
}

.ds-checkbox.ds-white {
    box-shadow: 0 0 0 2px #fff;
}

.ds-checkbox.ds-white::before {
    background-color: #fff;
}

.ds-box-error input,
.ds-box-error .ds-lista-selectbox .ds-dropdown-box>.link-item {
    box-shadow: 0 0 0 2px #f00 !important;
}

/* COLLAPSE */
.ds-collapse {
    display: none;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.ds-collapse.ds-collapsing {
    display: block;
    transition: height;
    transition-timing-function: ease-in;
    overflow: hidden;
}

.ds-collapse.ds-show {
    height: auto !important;
    display: block;
    overflow: visible;
}

.ds-collapse.ds-height-calculate {
    display: block;
    height: auto !important;
}

.ds-show-transition {
    height: 0 !important;
}

/* BUTTONS */
.ds-button-box {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* BUTTON DEFAULT */
.ds-button:hover,
.ds-button:focus {
    outline: 0;
}

.ds-button:hover .ds-icono,
.ds-button:focus .ds-icono {
    animation: fadeInUp .3s ease-in-out;
}

.ds-button .ds-tag {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
}

.ds-button.ds-button-rounded,
.ds-button.ds-button-rounded.ds-button-inverted::after {
    border-radius: 48px;
}

.ds-button.ds-white-bg,
.ds-button.ds-yellow-bg,
.ds-button.ds-gray-bg-5,
.ds-button.ds-gray-bg-10,
.ds-button.ds-gray-bg-15,
.ds-button.ds-gray-bg-25,
.ds-button.ds-light-bg,
.ds-button.ds-transparent-bg,
.ds-button.ds-warning-bg {
    color: #000;
}

/* BUTTON INVERTED */
.ds-button.ds-button-inverted {
    background-color: transparent !important;
    color: var(--ds-star-color);
    transition: all .3s ease-in-out;
}

.ds-blue-A-bg.ds-button-inverted,
.ds-blue-A-bg.ds-button-inverted::after {
    color: var(--ds-blue-A) !important;
}

.ds-gray-bg.ds-button-inverted,
.ds-gray-bg.ds-button-inverted::after {
    color: var(--ds-gray);
}

.ds-green-bg.ds-button-inverted,
.ds-green-bg.ds-button-inverted::after {
    color: var(--ds-green);
}

.ds-red-bg.ds-button-inverted,
.ds-red-bg.ds-button-inverted::after {
    color: var(--ds-red);
}

.ds-yellow-bg.ds-button-inverted {
    color: var(--ds-black);
}

.ds-yellow-bg.ds-button-inverted::after {
    color: var(--ds-yellow);
}

.ds-white-bg.ds-button-inverted,
.ds-black-bg.ds-button-inverted,
.ds-white-bg.ds-button-inverted::after,
.ds-black-bg.ds-button-inverted::after {
    color: var(--ds-black);
}

.ds-button.ds-button-inverted::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--ds-star-color);
    box-shadow: inset 0 0 0 3px;
    border-radius: 6px;
}

.ds-button.ds-button-inverted:hover,
.ds-button.ds-button-inverted:focus {
    background-color: var(--ds-star-color) !important;
    color: #fff !important;
}

.ds-gray-bg.ds-button-inverted:hover,
.ds-gray-bg.ds-button-inverted:focus {
    background-color: var(--ds-gray) !important;
    color: #fff !important;
}

.ds-green-bg.ds-button-inverted:hover,
.ds-green-bg.ds-button-inverted:focus {
    background-color: var(--ds-green) !important;
    color: #fff !important;
}

.ds-red-bg.ds-button-inverted:hover,
.ds-red-bg.ds-button-inverted:focus {
    background-color: var(--ds-red) !important;
    color: #fff !important;
}

.ds-yellow-bg.ds-button-inverted:hover,
.ds-yellow-bg.ds-button-inverted:focus {
    background-color: var(--ds-yellow) !important;
    color: #000 !important;
}

.ds-black-bg.ds-button-inverted:hover,
.ds-black-bg.ds-button-inverted:focus {
    background-color: var(--ds-black) !important;
    color: #fff !important;
}

.ds-white-bg.ds-button-inverted:hover,
.ds-white-bg.ds-button-inverted:focus {
    background-color: var(--ds-white) !important;
    color: #000 !important;
}

.ds-blue-A-bg.ds-button-inverted:hover,
.ds-blue-A-bg.ds-button-inverted:focus {
    color: var(--ds-white) !important;
    background-color: var(--ds-blue-A) !important;
}

.ds-gray-bg.ds-button-inverted::after {
    color: var(--ds-gray);
}

.ds-green-bg.ds-button-inverted::after {
    color: var(--ds-green);
}

.ds-red-bg.ds-button-inverted::after {
    color: var(--ds-red);
}

.ds-yellow-bg.ds-button-inverted::after {
    color: var(--ds-yellow);
}

.ds-black-bg.ds-button-inverted::after,
.ds-white-bg.ds-button-inverted::after {
    color: var(--ds-black);
}

.ds-button.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-star-color) !important;
}

.ds-gray-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-gray) !important;
}

.ds-green-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-green) !important;
}

.ds-red-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-red) !important;
}

.ds-yellow-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-yellow) !important;
}

.ds-white-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-white) !important;
}

.ds-black-bg.ds-button-inverted.ds-not-fill:hover,
.ds-white-bg.ds-button-inverted.ds-not-fill:hover {
    background-color: transparent !important;
    color: var(--ds-black) !important;
}

/* BUTTON RECT */
.ds-button.ds-button-rect,
.ds-button.ds-button-rect.ds-button-inverted::after {
    border-radius: 0px !important;
}

/* BUTTON CIRCLE */
.ds-button.ds-circle,
.ds-button.ds-circle::after {
    border-radius: 50% !important;
    padding: 0 !important;
}

/* BUTTON SHADOW */
.ds-button.ds-shadow-color {
    background-color: transparent;
    box-shadow: 0 0 0 3px;
    font-weight: bolder;
}

.ds-button-shadow::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    color: var(--ds-star-color);
    box-shadow: 0 0 12px 1px;
    transition: box-shadow .3s ease;
}

.ds-button-shadow:hover::before,
.ds-button-shadow:focus::before {
    box-shadow: 0 0 40px 1px;
}

.ds-button:focus {
    box-shadow: 0 0 0 4px rgba(var(--ds-star-color-rgb), 0.4);
}

.ds-bg-gray.ds-button-shadow::before {
    color: var(--ds-gray);
}

.ds-bg-green.ds-button-shadow::before {
    color: var(--ds-green);
}

.ds-bg-green.ds-button-shadow::before {
    color: var(--ds-green);
}

.ds-bg-red.ds-button-shadow::before {
    color: var(--ds-red);
}

.ds-bg-red.ds-button-shadow::before {
    color: var(--ds-red);
}

.ds-bg-yellow.ds-button-shadow::before {
    color: var(--ds-yellow);
}

.ds-bg-blue-light.ds-button-shadow::before {
    color: var(--ds-blue-light);
}

.ds-bg-white.ds-button-shadow::before,
.ds-bg-black.ds-button-shadow::before {
    color: var(--ds-black);
}

.ds-button-shadow.ds-circle::before {
    border-radius: 50%;
}

/* CARDS */

.ds-card {
    position: relative;
    cursor: pointer;
    margin: 8px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 16px);
    background-color: transparent;
    box-shadow: 0 0 6px 1px rgb(0 0 0 / 8%);
    padding: 40px;
}

.ds-card-image-header {
    position: relative;
    width: 100%;
    height: 144px;
    overflow: hidden;
}

.ds-card-image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.ds-card-text-header,
.ds-card-body {
    position: relative;
    padding: 12px;
    height: 9ch;
}

.ds-card:hover .ds-card-footer .ds-button .ds-icono {
    animation: fadeInUp .3s ease-in-out;
}

.ds-card:hover .ds-card-text-header::before {
    animation: flipInX .3s ease;
}

.ds-card-text-header .ds-h1 {
    font-weight: 500;
    font-size: 24px;
    color: var(--ds-star-color);
}

.ds-card-text-header .ds-h1 .ds-icono {
    color: var(--ds-star-color);
}

.ds-card-body {
    position: relative;
    width: 100%;
    min-height: 200px;
    background-color: transparent;
    display: flex;
    padding: 16px;
    padding-top: 8px;
    flex-direction: column;
}

.ds-card-body .ds-text {
    text-align: start;
    max-height: 21ch;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 400;
}

.ds-card-footer {
    display: flex;
    flex-wrap: wrap;
    padding: 9px;
    justify-content: flex-end;
}

.owl-nav {
    position: absolute;
    justify-content: space-between;
    display: flex;
    bottom: 22px;
    width: 100%;
    overflow: hidden;
}

.owl-nav button span {
    color: #000;
    font-size: 40px;
    margin: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--ds-font);
    font-weight: bolder;
    position: relative;
    color: var(--ds-star-color);
}

.owl-nav button span::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: -50%;
    /* background-color: var(--ds-yellow); */
    border-radius: 50%;
    transform: scale(2);
    z-index: -1;
    animation: shadow-pulse 1s infinite;
}

.owl-nav button span::after {
    content: "\ea21";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    color: #fff;
    font-family: 'LineIcons';
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    justify-content: center;
    font-weight: 800;
}

.owl-nav button:first-child span::after {
    content: "\ea1e";
}

.owl-nav button:last-child span::before {
    left: unset;
    right: -50%;
}

.owl-dots {
    text-align: end;
}

.owl-dots button span {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: #000;
    margin: 4px;
    border-radius: 50%;
    opacity: 0.15;
}

.owl-dots button.active span {
    opacity: 1;
    /* background-color: var(--ds-yellow); */
}