/* Estilos alertas izitoast */
/* En web columnas 120px
    en tablet columnas 70px
    en mobile columnas 70px
*/

.iziToast-target .iziToast-capsule .iziToast {
    float: revert;
}

.iziToast-wrapper .iziToast-custom-wrapper-container {
    position: relative;
}

.iziToast-wrapper .iziToast-custom-wrapper-container .iziToast-capsule {
    position: absolute;
    bottom: 0;
}

.iziToast-customizer-new {
    display: inline-flex;
    align-items: center;
    box-shadow: var(--boxshadow-1);
    padding: var(--spacing-space-3) var(--spacing-space-4);
    background: var(--color-neutral-700);
    padding: var(--spacing-space-3) var(--spacing-space-4) !important;
    border-radius: var(--spacing-space-3);
    width: auto !important;
    max-width: 480px;
    margin: var(--spacing-space-3) 0 0 0;
}

.iziToast-customizer-new.no_x .iziToast-message {
    margin-bottom: 0;
}

.iziToast-wrapper {
    padding: var(--spacing-space-7) var(--spacing-space-7) var(--spacing-space-7) 0;
}

.iziToast {
    min-height: var(--spacing-space-10);
}

.iziToast:after {
    box-shadow: unset;
}

.iziToast:focus-visible {
    outline: unset;
}

.iziToast-wrapper.iziToast-wrapper-bottomRight>.iziToast-capsule {
    transform: translateZ(0);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: unset !important;
    height: 0;
    backface-visibility: hidden;
}

.iziToast-customizer-new .iziToast-body {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    min-height: revert;
}

.iziToast-customizer-new .iziToast-body .iziToast-texts {
    margin: 0 var(--spacing-space-3) 0 0 !important;
    white-space: nowrap;
}

.iziToast-customizer-new.no_x:not(.action) .iziToast-body .iziToast-texts {
    margin: 0 0 0 0 !important;
    white-space: nowrap;
}

.iziToast-cover {
    background-color: transparent !important;
    left: var(--spacing-space-4) !important;
    top: -2px !important;
}

.iziToast-close {
    color: var(--color-gray-0) !important;
    opacity: 1 !important;
    top: -2px !important;
}

.iziToast-customizer-new .iziToast-body .iziToast-texts .iziToast-message {
    font: var(--font-caption-medium);
    color: var(--color-neutral-0);
}

.iziToast-customizer-new .iziToast-body .iziToast-texts.transition {
    overflow: hidden;
    transition: width 0.1s ease-in-out, height .05s ease-in-out;
}

.toast-text {
    position: absolute;
    top: 0;
    left: 0;
    visibility: none;
    font: var(--font-caption-medium);
    color: var(--color-neutral-0);
    width: fit-content;
    max-width: 383.63px;
    pointer-events: none;
    user-select: none;
}

.iziToast>.iziToast-body .iziToast-icon {
    width: var(--spacing-space-7);
    height: var(--spacing-space-7);
    font-size: var(--spacing-space-6);
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    line-height: normal;
    margin: var(--spacing-space-0);
    margin-right: var(--spacing-space-3);
}

.iziToast>.iziToast-body .iziToast-buttons {
    min-height: unset;
    float: unset;
    margin: var(--spacing-space-0);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-space-3);
    margin-left: auto;
}

.iziToast.fadeInLeft-alert {
    -webkit-animation: fadeInLeft-alert 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    animation: fadeInLeft-alert 0.5s cubic-bezier(0.5, 1, 0.89, 1);
}

.iziToast.fadeOut-alert {
    -webkit-animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 0;
}

.iziToast-customizer-connection {
    max-width: 452px;
}

.iziToast-customizer-connection.iziToast.fadeOut-alert {
    -webkit-animation: fadeOut-alert-connection 1s cubic-bezier(0.33, 1, 0.68, 1);
    animation: fadeOut-alert-connection 1s cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 0;
}

.iziToast-customizer-connection .iziToast-body {
    align-items: start;
}

.iziToast-customizer-connection .iziToast-body comp-button button.medium {
    height: var(--spacing-space-8);
    width: var(--spacing-space-8);
    padding: var(--spacing-space-0);
}

.iziToast-customizer-connection .iziToast-body .iziToast-texts .iziToast-message {
    font: var(--font-body);
}

comp-button button.alert-connection {
    background-color: transparent;
    color: var(--color-neutral-100);
    border: none;
}

comp-button button.alert-connection:hover:not(:disabled) {
    background-color: var(--color-transparency-dark16);
}

comp-button button.alert-connection:active:not(:disabled) {
    background-color: var(--color-transparency-dark24);
}

comp-button button.alert-connection:disabled {
    color: var(--color-neutral-500);
    background-color: transparent;
}

.iziToast-buttons *:focus-visible {
    outline: none;
}

.iziToast-wrapper.iziToast-wrapper-topRight {
    padding: var(--spacing-space-7) var(--spacing-space-7) var(--spacing-space-0) var(--spacing-space-0) !important;
}

.iziToast-wrapper.iziToast-wrapper-topRight .iziToast-customizer-connection {
    margin: var(--spacing-space-0);
}

/* Animación de entrada */
@keyframes fadeInLeft-alert {
    from {
        transform: translateX(200%);
    }

    to {
        transform: translateX(0);
    }
}

/* Animación de salida */
@keyframes fadeOut-alert {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Animación de entrada connection */
@keyframes fadeInLeft-connection {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

/* Animación de salida btn_connection */
@keyframes fadeOut-connection {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* Animación de salida connection */
@keyframes fadeOut-alert-connection {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(200%);
    }
}

/* estilos button link-white "deshacer" */
comp-button button.link-white {
    background-color: transparent;
    color: var(--color-neutral-100);
    border: none;
    text-decoration: none;
    padding: var(--spacing-space-0) var(--spacing-space-4);
    height: 32px;
}

comp-button button.link-white:hover:not(:disabled) {
    background-color: var(--color-neutral-600);
}

comp-button button.link-white:active:not(:disabled) {
    background-color: var(--color-neutral-500);
}

comp-button button.link-white:focus-visible:not(:disabled) {
    border: 1px solid var(--color-neutral-0);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    background-color: var(--color-neutral-700);
}

comp-button button.link-white:focus-visible:active:not(:disabled) {
    background-color: var(--color-neutral-500);
    border: none;
    box-shadow: unset;
}

comp-button button.link-white:disabled {
    color: var(--color-neutral-500);
    background-color: transparent;
}

/* estilos button alert */
comp-button button.alert-btn {
    background-color: transparent;
    color: var(--color-neutral-100);
    border: none;
}

comp-button button.alert-btn:hover:not(:disabled) {
    background-color: var(--color-neutral-600);
}

comp-button button.alert-btn:active:not(:disabled) {
    background-color: var(--color-neutral-500);
    border: none;
    box-shadow: unset;
}

comp-button button.alert-btn:focus-visible:not(:disabled) {
    border: 1px solid var(--color-neutral-0);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    background-color: var(--color-neutral-700);
}

comp-button button.alert-btn:focus-visible:active:not(:disabled) {
    background-color: var(--color-neutral-500);
    border: none;
    box-shadow: unset;
}

comp-button button.alert-btn:disabled {
    color: var(--color-neutral-500);
    background-color: transparent;
}

comp-button button.alert-connection i,
comp-button button.alert-connection i.failure {
    color: var(--color-neutral-0);
}

comp-button button.alert-connection i.slow {
    color: var(--color-secondary-900);
}

comp-button button.alert-connection i.server {
    color: var(--color-neutral-100);
}

comp-button button.alert-connection:focus-visible:not(:disabled) {
    border: 1px solid var(--color-neutral-0);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    background-color: transparent;
}

comp-button button.alert-connection:focus-visible:active:not(:disabled) {
    background-color: transparent;
    border: none;
    box-shadow: unset;
}

comp-button-connection {
    position: fixed;
    top: var(--spacing-space-7);
    right: var(--spacing-space-0);
    width: 36px;
    height: 36px;
    -webkit-animation: fadeOut-connection 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fadeOut-connection 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    border-radius: var(--border-radius-corner-md) var(--border-radius-corner-xs) var(--border-radius-corner-xs) var(--border-radius-corner-md);
    box-shadow: var(--boxshadow-2);
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

comp-button-connection .icon_connection {
    width: var(--spacing-space-6);
    height: var(--spacing-space-6);
    font-size: var(--spacing-space-6);
}

comp-button-connection.hide {
    -webkit-animation: fadeInLeft-connection 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: fadeInLeft-connection 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

comp-button-connection,
comp-button-connection[type="failure"] {
    background-color: var(--color-danger-600);
    color: var(--color-neutral-0);
}

comp-button-connection[type="slow"] {
    background-color: var(--color-warning-600);
    color: var(--color-secondary-900);
}

comp-button-connection[type="server"] {
    background-color: var(--color-info-600);
    color: var(--color-neutral-100);
}

comp-button-connection:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5) !important;
}

@media (max-width: 1280px) {
    .iziToast-customizer-new {
        margin-top: var(--spacing-space-3);
        max-width: fit-content;
    }

    .iziToast-wrapper.iziToast-wrapper-bottomRight,
    .iziToast-wrapper.iziToast-wrapper-topRight {
        padding: var(--spacing-space-7) var(--spacing-space-7) var(--spacing-space-8) var(--spacing-space-7) !important;
        right: var(--spacing-space-0);
        left: var(--spacing-space-0);
        text-align: center;
    }

    .iziToast-wrapper {
        padding: var(--spacing-space-0) var(--spacing-space-6) var(--spacing-space-8);
    }

    .iziToast-wrapper.iziToast-wrapper-topCenter, .iziToast-wrapper.iziToast-wrapper-topRight {
        text-align: center;
        padding: 92px var(--spacing-space-8) var(--spacing-space-0) !important;
    }

    .iziToast-customizer-connection {
        margin: var(--spacing-space-0);
    }

    .iziToast.fadeIn-alert,
    .iziToast.fadeInLeft-alert {
        -webkit-animation: fadeIn-alert 0.5s cubic-bezier(0.5, 1, 0.89, 1);
        animation: fadeIn-alert 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    }

    .iziToast.fadeOut-alert,
    .iziToast.fadeOut-alert {
        -webkit-animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        opacity: 0;
    }

    .iziToast-customizer-connection.iziToast.fadeOut-alert {
        -webkit-animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        animation: fadeOut-alert 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        opacity: 0;
    }

    .iziToast-customizer-connection.iziToast.fadeIn-alert {
        -webkit-animation: fadeIn-alert-connection 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        animation: fadeIn-alert-connection 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    comp-button-connection {
        top: 92px;
    }

    /* Animación de entrada */
    @keyframes fadeIn-alert {
        from {
            /* opacity: 0; */
            transform: translateY(200%);
        }

        to {
            /* opacity: 1; */
            transform: translateY(0);
        }
    }

    /* Animación de entrada */
    @keyframes fadeIn-alert-connection {
        from {
            /* opacity: 0; */
            transform: translateY(-200%);
        }

        to {
            /* opacity: 1; */
            transform: translateY(0);
        }
    }

    /* Animación de salida */
    @keyframes fadeOut-alert {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
}

@media only screen and (max-width: 640px) {
    .iziToast-customizer-new {
        max-width: 100%;
    }

    .iziToast-wrapper {
        padding: var(--spacing-space-0) var(--spacing-space-6) var(--spacing-space-7);
    }

    .iziToast-wrapper.iziToast-wrapper-topCenter {
        text-align: center;
        padding: 80px var(--spacing-space-6) var(--spacing-space-0) !important;
    }

    comp-button-connection {
        top: 80px;
    }
}