* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: NotoSansMedium;
}

@font-face {
    font-family: 'NotoSansMedium';
    src: URL('../font/NotoSansThai-Medium.ttf') format('truetype');
}

@supports (-webkit-touch-callout: none) {
    * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
}

#mainpage {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.blurBack {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none
}

/* Button */
button:not(:disabled):hover, [type=button]:hover {
    filter: saturate(1.5);
}

button:active:not([disabled]), [type=button]:active {
    filter: none;
    opacity: 80%;
}

/* Color */
.color-1 {
    color: #F48400 !important;
}

.color-2 {
    color: #9e1015 !important;
}

.bg-1 {
    background-color: #3cc675;
}

.bg-2 {
    background-color: #e52f35;
}

.bg-3 {
    background-color: #f3f4f6;
}

/* Modal */
body.modal-open #mainpage {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none;
}

.popup_icon, .check_icon {
    font-size: 3rem;
    margin-top: 1.25rem;
}

.popup_icon {
    color: orange;
}

.check_icon {
    color: #20a969;
}

.text-alert {
    text-align: center;
    padding-top: 1rem;
}

/* Loading */
#loader {
    z-index: 30000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
}

#loader>div {
    font-size: 1.2rem;
    width: 1.1em;
    height: 1.075em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    top: 50%;
    left: 50%;
}

@-webkit-keyframes load5 {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #f38068, 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.5), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.7), 1.8em -1.8em 0 0em #f38068, 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.5), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.7), 2.5em 0em 0 0em #f38068, 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.5), 2.5em 0em 0 0em rgba(243, 128, 104, 0.7), 1.75em 1.75em 0 0em #f38068, 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.5), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.7), 0em 2.5em 0 0em #f38068, -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.5), 0em 2.5em 0 0em rgba(243, 128, 104, 0.7), -1.8em 1.8em 0 0em #f38068, -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.5), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.7), -2.6em 0em 0 0em #f38068, -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.5), -2.6em 0em 0 0em rgba(243, 128, 104, 0.7), -1.8em -1.8em 0 0em #f38068;
    }
}

@keyframes load5 {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #f38068, 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.5), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.7), 1.8em -1.8em 0 0em #f38068, 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.5), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.7), 2.5em 0em 0 0em #f38068, 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.5), 2.5em 0em 0 0em rgba(243, 128, 104, 0.7), 1.75em 1.75em 0 0em #f38068, 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.5), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.7), 0em 2.5em 0 0em #f38068, -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.2), -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.5), 0em 2.5em 0 0em rgba(243, 128, 104, 0.7), -1.8em 1.8em 0 0em #f38068, -2.6em 0em 0 0em rgba(243, 128, 104, 0.2), -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.5), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.7), -2.6em 0em 0 0em #f38068, -1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(243, 128, 104, 0.2), 1.8em -1.8em 0 0em rgba(243, 128, 104, 0.2), 2.5em 0em 0 0em rgba(243, 128, 104, 0.2), 1.75em 1.75em 0 0em rgba(243, 128, 104, 0.2), 0em 2.5em 0 0em rgba(243, 128, 104, 0.2), -1.8em 1.8em 0 0em rgba(243, 128, 104, 0.5), -2.6em 0em 0 0em rgba(243, 128, 104, 0.7), -1.8em -1.8em 0 0em #f38068;
    }
}

@media (min-width: 240px) {
    .modal, .modal-sm {
        --bs-modal-width: 34rem;
    }

    .modal-dialog {
        margin-right: auto;
        margin-left: auto;
    }

    .modal-30, .modal-35 {
        --bs-modal-width: 95%;
        max-width: 95%;
    }

    .modal-30 {
        width: 30rem;
    }

    .modal-35 {
        width: 35rem;
    }


}