body{
    background-image: url("../images/background.png");
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* padding-right: 0 !important; */
}

/* html {
    overflow-y: auto;
  } */

/* .swal2-shown {
    overflow: unset !important;
    padding-right: 0px !important;
    justify-content: center;
}  */


body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { height: 100% !important; overflow-y: visible !important; }

@keyframes zoomInOut {
0%,
100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.zoomingBox {
animation: zoomInOut 3s ease-in-out infinite;
}

.btnSubmit {
    background: linear-gradient(to right, #f5570e, #f98669, #ffac9b, #f89766, #f5570e);
    border: #f1f1f1 3px solid;
    border-radius: 15px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transition-div-top {
    transition: opacity 5s ease, transform 5s ease;
    opacity: 0;
    transform: translateY(-400px);
}
.transition-div-bottom {
    transition: opacity 3s ease, transform 3s ease;
    opacity: 0;
    transform: translateY(400px);
}
.visible-div {
    opacity: 1;
    transform: translateY(0);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background: linear-gradient(0deg,#f5570e, #f98669, #f6ad9e, #f89766, #f5570e) !important;
    color: #fff;
    font-size: 1em;
}