body { font-family: 'Kanit', sans-serif !important; }
body.external-page-new #main {
    overflow: hidden;
    background-size: 100%;
    background-color: #F8FCFF;
}
input:focus { outline: none !important; }
button.btn_default {  
    width: 100%;
    padding: 5px;
    border: 1px solid #19A9F7;
    background-color: #19A9F7;
    border-radius: 5px;
    color: #ffffff;
    transition: all 0.2s ease-in-out;
}

div.btn_tranparent {
    width: 100%;
    padding: 5px;
    background-color: #FFFFFF; 
    border: 1px solid #A4BACC;
    border-radius: 5px;
    color: #7D8A95;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

div.btn_tranparent:hover { 
    background-color: #EDF9FF; 
    border: 1px solid #A4BACC;
}

button.btn_default:hover { 
    background-color: #1698DE; 
    border: 1px solid #1698DE; 
}


/* Banner */
#content_wrapper > div.container-fluid > div.row > div.main-left-box { padding: 0; position: relative; }
#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner {
    background: url("../images/banner-bg.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}

#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner > div.box-slide {
    width: 70%;
    position: absolute;
    top: 20%;
    left: 15%;
}

#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner > div.box-slide > img { width: 100%; }

/* Custom Carousel Slider */
#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel {
    position: absolute !important;
    top: 18% !important;
    left: 0 !important;
}
#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-inner > .carousel-item > img { margin: 0 auto; }
#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-inner > .carousel-item > .carousel-caption { 
    position: relative !important;
    left: 0;
    right: 0;
    bottom: 0;
}

#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-inner > .carousel-item > .carousel-caption > p.title { 
    font-size: 1.8em;
    text-shadow: 3px 3px 6px #00000029; 
    margin-bottom: 0;
    width: 75%;
    margin: 0 auto;
    cursor: default;
}

#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-inner > .carousel-item > .carousel-caption > p.detail { 
    font-size: 0.9em;
    text-shadow: 3px 3px 6px #00000029;
    margin-bottom: 0;
    width: 60%;
    margin: 20px auto;
    text-align: center;
    cursor: default;
}

#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-inner > .carousel-item > .carousel-caption > p.detail > a { color: #ffffff; }
#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-indicators { position: relative !important; align-items: center; }
#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-indicators [data-bs-target] {
    box-sizing: inherit;
    flex: none;
    width: 8px;
    height: 8px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 0;
    border-bottom: 0;
    /* opacity: .5; */
    transition: opacity .6s ease;
    border-radius: 20px;
}

#content_wrapper > .container-fluid > div.row > div.main-left-box > div.banner > .carousel > .carousel-indicators > .active {
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
}
/* Custom Carousel Slider */


/* Credit */
#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner > div.credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner > div.credit > span { text-shadow: 3px 3px 6px #00000029; color: #ffffff; cursor: default; }
#content_wrapper > div.container-fluid > div.row > div.main-left-box > div.banner > div.credit > img { width: 50px; margin: 0 5px 0 5px; cursor: default; }


/* ------------------------ Left Box Style ----------------------------- */
/* Login Form */
#content_wrapper > div.container-fluid > div.row > div.main-right-box {
    height: 100vh;
    background-color: #F8FCFF;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form {
    /* width: 300px;
    height: 485px;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden; */
    width: 300px;
    height: auto;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 12%;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > div.ws_logo { text-align: center; }
/* #content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form { position: relative; } */
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > .display_password {
    width: 25px;
    position: absolute;
    top: 38px;
    right: 10px;
    background-color: #F8FCFF;
    z-index: 2;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > p {
    margin-bottom: 5px;
    color: #424F57;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > p {
    margin-bottom: 5px;
    color: #424F57;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > input {
    width: 100%;
    padding: 5px;
    border: 1px solid #A4BACC;
    border-radius: 5px;
    margin-bottom: 15px;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > input {
    width: 100%;
    padding: 5px;
    border: 1px solid #A4BACC;
    border-radius: 5px;
    margin-bottom: 15px;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > input::-webkit-input-placeholder { /* Edge */
    color: #A4BACC;
    font-size: 14px;
}
  
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A4BACC;
    font-size: 14px;
}
  
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > input::placeholder {
    color: #A4BACC;
    font-size: 14px;
}


#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > input::-webkit-input-placeholder { color: #A4BACC; font-size: 14px; }
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > input:-ms-input-placeholder { color: #A4BACC; font-size: 14px; }
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form > form > div > input::placeholder { color: #A4BACC;font-size: 14px; }

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.register {
    text-align: center;
    /* position: absolute; */
    bottom: 15px;
    width: 100%;
    margin-top: 25px;
}

#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.register > p { font-size: 14px; font-weight: bold; }
#content_wrapper > div.container-fluid > div.row > div.main-right-box > div.register > p > a { color: #19A9F7; }

/* .remember { display: flex; align-items: center; } */
.remember > input { margin-right: 10px; }
.remember > span { font-size: 13px; font-weight: bold; }

/* .forgot-password { display: flex; justify-content: flex-end; align-items: center; } */
.forgot-password > span { font-size: 13px; font-weight: bold; color: #19A9F7; }


/* send mail Success */
.send_mail_success > p { text-align: center; }
.send_mail_success > .success_icon { 
    text-align: center; 
    margin-top: 25px;
    margin-bottom: 25px; 
}
.send_mail_success > .success_icon > img { width: 60px; }

/* Media Query mobile  */
@media only screen and (max-width: 600px) {
    #content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form {
        top: 0 !important;
    }
}

@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 750px) {
    #content_wrapper > div.container-fluid > div.row > div.main-right-box > div.warp-login-form { margin-top: 5% !important; }
    #content_wrapper > div.container-fluid > div.row > div.main-right-box > div.register {
        position: inherit !important;
        bottom: 0 !important;
    }
}

#swal2-content { font-size: 18px; }

.remember > span { font-size: 13px; font-weight: bold; color: #19A9F7; }