* {
    padding: 0;
    margin: 0;
    /* font-size: 0.875vw; */
    font-size: 13.75px;
    -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');
}


.main_login {
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    min-height: 39rem;
    background-color: #F7F7F7;
}

#login_submit, .btn-style-1 {
    /* background: #f97241; */
    color: #ffffff;
    border: white;
    padding: 0.65rem 1rem;
    font-size: 1.05rem;
    line-height: initial;
    border-radius: 0.4rem;
    background: linear-gradient(45deg, #f9a131 0%, #ff6d5b 100%);
}

input:focus {
    border-color: #fec81370 !important;
    box-shadow: 0 0 0 0.2rem rgb(252 168 138) !important;
}

button:focus {
    box-shadow: unset !important;
}

button:active:not([disabled]) {
    opacity: 60%;
}

::placeholder {
    opacity: 50% !important;
}

.welcome-login {
    display: flex;
    align-items: center;
    text-align: center;
    box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
    border-radius: 0.2rem;
    color: #4d0707;
    background: radial-gradient(ellipse at top, #f9867b, #fe978d63), radial-gradient(ellipse at bottom, #ffa532, #ffa532b3);
}

.welcome-login .text {
    width: 100%;
    padding: 3rem 0 1rem;
}

.login-wrap {
    display: flex;
    position: relative;
    height: 100%;
    /* width: 32rem; */
    /* max-width: 100%; */
    background-color: white;
    border-radius: 0.2rem;
    box-shadow: 0px 10px 34px -15px rgb(0 0 0 / 24%);
    padding: 4rem 3.25rem;
}

.login-wrap input {
    background: rgb(241 244 248);
    color: #292929;
    border-radius: 50px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 0.75rem 1.5rem;
    max-width: 100%;
}

.login-wrap .icon {
    text-align: center;
    margin-bottom: 2rem;
}

.login-wrap .icon i {
    font-size: 8rem;
    background: linear-gradient(45deg, #f9a131 0%, #ff6d5b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn.btn-white.btn-outline-white:hover {
    border: 0.12rem solid transparent;
    background: #fff;
    color: #000;
}

.btn.btn-white.btn-outline-white {
    border: 0.12rem solid #fff;
    background: transparent;
    color: #fff;
    padding: 0.4rem 1.25rem;
}

.bt-dashed {
    border-bottom: 1px dashed rgba(0, 0, 0, .1);
}

#login_logo {
    display: contents;
}

#login_logo, #login_logo img {
    width: 12rem;
    height: inherit;
    padding: 0;
    border-radius: 100%;
    object-fit: contain;
}

#signin_page {
    width: 75%;
    margin: auto;
}

/* Welcome */
.welcome-page {
    display: flex;
    flex-direction: column;
    background-image: url("../img/bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 3rem 2rem;
}

.place-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
    gap: 2rem;
    position: relative;
    padding: 2rem;
    background: #ffffff2e;
    margin-top: 1rem;
    border-radius: 2rem;
}

.place-group img {
    object-fit: contain;
    width: 100%;
    box-shadow: 0 0 0.5rem #af6729;
    border-radius: 1.5rem;
}

/* Language */
.sel-lng {
    background: transparent url(../img/angle-down-black.svg) calc(100% - 0.2rem) 40% no-repeat;
    font-weight: bold;
    border: 0;
    background-size: 0.8rem;
    padding: 0 1.25rem 0 0.4rem;
    margin-top: 0.15rem;
    cursor: pointer;
    font-size: 1.1rem;
}

.welcome-content {
    flex-grow: 1;
    background: #ffffff40;
    margin-top: 1rem;
    border-radius: 0.5rem;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 2rem;
}

.welcome-text .text {
    font-size: 5rem;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 0.5rem #cd831c;
}

.welcome-text .logo  {
    background-color: #ffffff;
    width: 30rem;
    max-width: 100%;
    padding: 1rem 6rem;
    border-radius: 5rem;

}

.welcome-text .logo img {
    width: 100%;
    object-fit: contain;
}

.language-group {
    display: flex;
    align-items: center;
    position: absolute;
    right: 1.4rem;
    top: 1rem;
    z-index: 100;
}

.language-group i {
    font-size: 1.4rem;
    padding: 0.05rem;
    color: #ff7258;
}

.language-group .sel-lng {
    background: transparent url(../img/angle-down-black.svg) calc(100% - 0.2rem) 40% no-repeat;
    font-weight: bold;
    border: 0;
    background-size: 0.8rem;
    padding: 0 1.25rem 0 0.4rem;
    cursor: pointer;
}

.language-group:hover i {
    opacity: 60%;
}


/* Sign Up  */
.input-group button {
    font-size: 0.8rem;
    border: 1px solid #eee;
    padding: 0 1rem;
    border-radius: 0 50px 50px 0;
}

.login-wrap .input-group-addon {
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eeeeee;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    color: #396cac;
    background-color: #eee;
    width: 3rem;
    white-space: nowrap;
}

button:active, button:focus {
    outline: 0;
}

.popup_icon, .check_icon, .info_icon {
    font-size: 3.5rem;
    margin-top: 1rem;
}

.popup_icon {
    color: orange;
}

.check_icon {
    color: #20a969;
}

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

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

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

.form-group-btn {
    display: flex;
}

.form-group-btn input, .form-group-btn textarea, .form-group-btn select {
    border-right-color: #fda70a;
    border-radius: 0.4rem 0 0 0.4rem;
}

.form-group-btn button, .unit-end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: 0 0.4rem 0.4rem 0;
    border: 0;
    min-width: 3rem;
    background: linear-gradient(90deg, #fda70a 0%, #fe7455 100%);
}

.form-group-btn button i {
    color: #ffffff;
}

.input-style-1 {
    border: 0.15rem solid #e3e7ed;
    color: #292929;
    line-height: normal;
    padding: 0.4rem 1rem;
    border-radius: 0.4rem;
    background-color: #f1f4f8;
}

button:focus, select:focus, input:focus, textarea:focus {
    outline: none !important;
}

.input-style-1:focus {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 0.04rem #f7c503 !important;
    /* box-shadow: inset 0 0 0.1rem 0.05rem #f7c503 !important; */
    border: 0.15rem solid #fda113 !important;
}

.form-header-dash {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-bottom: 0.12rem dashed #D7D7D7;
    margin-bottom: 1rem;
}

.form-header-dash span, .form-header-dash i {
    font-size: 1.1rem;
}

.form-header-dash i {
    margin-right: 0.5rem;
}

.signup-btm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 1rem 0.75rem;
}

.signup-btm .btn-style-1 {
    width: 15rem;
    max-width: 100%;
}

.btn-style-2 {
    border: 0;
    background: transparent;
    padding: 0.5rem;
    color: #fb6941;
    text-decoration-line: underline;
    text-underline-offset: 0.125rem;
}

.signup-title {
    font-size: 1.75rem;
    text-align: end;
    padding: 1rem 1.25rem 0.25rem;
    color: #fe7554;
}

.signup-label {
    padding: 0 0 0.1rem 0.2rem;
    font-size: 0.95rem;
    opacity: 75%;
}

.signup-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 1rem;
}

#signup_modal .modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    padding: 1rem;
    border-radius: 0 0.4rem 0.4rem 0.4rem;
}

#signup_modal .modal-content {
    background: transparent;
    border: 0;
}

.signup-tab {
    text-align: center;
    background: #fef4ef;
    padding: 0.7rem 1rem 0.6rem;
    border-radius: 1rem 1rem 0 0;
    width: 11rem;
    font-size: 1.05rem;
    max-width: 50%;
    opacity: 50%;
    background: linear-gradient(135deg, #c5c5c5 0%, #bdbdbd 100%);
}

.signup-tab.active {
    opacity: 100%;
    background: linear-gradient(45deg, #f9a131 0%, #ff6d5b 100%);
    color: #fff;
}

.signup-tab:not(.active):hover {
    opacity: 100%;
}

select {
    appearance: none;
    background: url(../img/angle-down.svg) calc(100% - 0.75rem) 50% no-repeat;
    color: #333332;
    cursor: pointer;
    line-height: initial;
    padding-right: 2.5rem;
    background-size: 1.1rem;
}


/* Color */
.gradient-color-2 {
    background: linear-gradient(90deg, #754704 0%, #333332 100%);
    line-height: inherit;
}

.gradient-color-3 {
    background: linear-gradient(90deg, #fda70a 0%, #fe7455 100%);
}

.gradient-color-1, .gradient-color-2, .gradient-color-3, .gradient-color-4 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



/** webkit scrollbar */

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

::-webkit-scrollbar-corner {
    background: #f6f6f6;
}

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

#loader>div {
    font-size: 1rem;
    width: 1em;
    height: 1em;
    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 #fd8767, 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.5), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.7), 1.8em -1.8em 0 0em #fd8767, 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.5), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.7), 2.5em 0em 0 0em #fd8767, 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.5), 2.5em 0em 0 0em rgba(253, 135, 103, 0.7), 1.75em 1.75em 0 0em #fd8767, 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.5), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.7), 0em 2.5em 0 0em #fd8767, -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.5), 0em 2.5em 0 0em rgba(253, 135, 103, 0.7), -1.8em 1.8em 0 0em #fd8767, -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.5), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.7), -2.6em 0em 0 0em #fd8767, -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.5), -2.6em 0em 0 0em rgba(253, 135, 103, 0.7), -1.8em -1.8em 0 0em #fd8767;
    }
}

@keyframes load5 {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #fd8767, 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.5), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.7), 1.8em -1.8em 0 0em #fd8767, 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.5), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.7), 2.5em 0em 0 0em #fd8767, 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.5), 2.5em 0em 0 0em rgba(253, 135, 103, 0.7), 1.75em 1.75em 0 0em #fd8767, 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.5), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.7), 0em 2.5em 0 0em #fd8767, -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.2), -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.5), 0em 2.5em 0 0em rgba(253, 135, 103, 0.7), -1.8em 1.8em 0 0em #fd8767, -2.6em 0em 0 0em rgba(253, 135, 103, 0.2), -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.5), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.7), -2.6em 0em 0 0em #fd8767, -1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(253, 135, 103, 0.2), 1.8em -1.8em 0 0em rgba(253, 135, 103, 0.2), 2.5em 0em 0 0em rgba(253, 135, 103, 0.2), 1.75em 1.75em 0 0em rgba(253, 135, 103, 0.2), 0em 2.5em 0 0em rgba(253, 135, 103, 0.2), -1.8em 1.8em 0 0em rgba(253, 135, 103, 0.5), -2.6em 0em 0 0em rgba(253, 135, 103, 0.7), -1.8em -1.8em 0 0em #fd8767;
    }
}

@media (max-width: 1300px) {
    #signin_page {
        width: 90%;
    }

    .welcome-text .text {
        font-size: 3.5rem;
    }

    .welcome-text .logo {
        width: 22rem;
        padding: 1rem 4rem;
    }
}

@media (max-width: 992px) {
    #signin_page {
        width: 60%;
    }  
}

@media (max-width: 576px) {
    #mainpage .wrap {
        flex-direction: column;
        height: 100%;
    }
    #signin_page {
        width: 100%;
    }

    .welcome-text .text {
        font-size: 3rem;
    }

    .welcome-text .logo {
        width: 18rem;
        /* padding: 1rem 4rem; */
    }
}

@media (min-width: 1600px) {
    * {
        font-size: 16px;
    }
}

@media (max-width: 320px) {
    * {
        font-size: 11.75px;
    }
}