/* #region Sweet alert 2 classes */


.swal2-border-radius {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    /* border: solid var(--color-raisin-black) 1px; */
}



/* .swal2-border-radius:hover {
    border: solid red 1px;
    
} */



.swal2-close {
    color: var(--color-floral-white);
    /* Transitions: */
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -ms-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}

.swal2-close:hover {
    color: var(--color-pumpking);
}

/* .swal2-popup {
    background-color: var(--color-raisin-black);
    color: #FFFFFF;
    border: solid var(--color-raisin-black) 5px;
} */

.swal2-popup {
    background-color: var(--color-raisin-black) !important;
    color: #FFFFFF !important;
    /* border: solid var(--color-raisin-black) 5px !important; */
    /*Original config:*/
    position: relative !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 100%) !important;
    width: 32em !important;
    max-width: 100% !important;
    padding: 0 0 1.25em !important;
    text-align: center !important;
    scroll-behavior: smooth !important;
    overflow-wrap: break-word !important;
    line-height: normal !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    border-radius: 25px !important;
    /* animation: right-shifted 10s ease-in-out infinite */
    border: solid var(--color-raisin-black) 5px !important;
}

.swal2-popup:focus {
    border-top: solid var(--color-pumpking) 2px !important;
    border-right: solid var(--color-pumpking) 2px !important;
    border-bottom: solid var(--color-pumpking) 10px !important;
    border-left: solid var(--color-pumpking) 10px !important;
    /* -webkit-transition: all 1100ms ease-in-out;
    -moz-transition: all 1100ms ease-in-out;
    -o-transition: all 1100ms ease-in-out;
    transition: all 1100ms ease-in-out;  */
    transition-property: border-top, border-right, border-bottom, border-left;
    transition-duration: 125ms, 500ms, 375ms, 500ms;
}

.swal-whatss{
    background-color: #43b899 !important;
    color: var(--color-raisin-black) !important;
    /* border: solid var(--color-raisin-black) 5px !important; */
    /*Original config:*/
    position: relative !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 100%) !important;
    width: 32em !important;
    max-width: 100% !important;
    padding: 0 0 1.25em !important;
    text-align: center !important;
    scroll-behavior: smooth !important;
    overflow-wrap: break-word !important;
    line-height: normal !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    border-radius: 25px !important;
    /* animation: right-shifted 10s ease-in-out infinite */
    border: solid #2FBF71 5px !important;
}

.swal-whatss:focus {
    border-top: solid var(--color-floral-white) 2px !important;
    border-right: solid var(--color-floral-white) 2px !important;
    border-bottom: solid var(--color-floral-white) 10px !important;
    border-left: solid var(--color-floral-white)10px !important;
    /* -webkit-transition: all 1100ms ease-in-out;
    -moz-transition: all 1100ms ease-in-out;
    -o-transition: all 1100ms ease-in-out;
    transition: all 1100ms ease-in-out;  */
    transition-property: border-top, border-right, border-bottom, border-left;
    transition-duration: 125ms, 500ms, 375ms, 500ms;
}

.inputAlert{
    background-color: black;
    color: var(--color-floral-white);
}


/*.swal2-popup*/
/* .swal2-popup:hover {
    animation: border-fill-animation 5s linear 1 !important;
    -webkit-transition: border 1000ms ease-in-out !important;
    -moz-transition: border 1000ms ease-in-out !important;
    -o-transition: border 1000ms ease-in-out !important;
    transition: border 1000ms ease-in-out !important; 
} */


@keyframes border-fill-animation {
    0% {
        border-top-color: red solid 1px !important;
        /* border-right-color: var(--color-raisin-black) !important;
        border-bottom-color: var(--color-raisin-black) !important;
        border-left-color: var(--color-raisin-black) !important; */
    }

    25% {
        border-top-color: red solid 1px !important;
        /* border-top-color: var(--color-pumpking) !important;
        border-right-color: var(--color-raisin-black);
        border-bottom-color: var(--color-raisin-black);
        border-left-color: var(--color-raisin-black); */
    }

    50% {
        border-top-color: var(--color-pumpking);
        border-right-color: var(--color-pumpking);
        border-bottom-color: var(--color-raisin-black);
        border-left-color: var(--color-raisin-black);
    }

    75% {
        border-top-color: var(--color-pumpking);
        border-right-color: var(--color-pumpking);
        border-bottom-color: var(--color-pumpking);
        border-left-color: var(--color-raisin-black);
    }

    100% {
        border-top-color: var(--color-pumpking);
        border-right-color: var(--color-pumpking);
        border-bottom-color: var(--color-pumpking);
        border-left-color: var(--color-pumpking);
    }
}

/* .swal2-container.swal2-center>.swal2-popup{
    background-color: #121212 !important;
  }
  .swal2-html-container, .swal2-title{
    color: white !important;
  } */


.alert-image {
    /*clip path necesita webkit*/
    clip-path: circle(100px at center);

}

.alert-image-editable {
    width: 300px;
    position: absolute;
    margin: auto;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    clip-path: circle(95px at center);
}

.alert-image-editable-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--color-pumpking);
    clip-path: circle(100px at center);
}

.modal-title-font-style {
    font-family: MADEOuterSansAlt-Medium;
    font-size: 25px;
    font-weight: 100;
}

.modal-content-font-style {
    font-family: Bronova-Bold;
    font-size: 16px;
    font-weight: 10;
}

.alert-close {
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: none;
}

.alert-close:focus {
    box-shadow: none;
    /*Delete focus of close button*/
}


/* .swal2-popup:active{
    animation-name: fade-In-Down;
} */

/*@-webkit-*/
@keyframes fade-In-Down {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-In-Up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}




/* #endregion Sweet alert 2 classes*/