/*outer-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }*/


html {
    font-family: 'Sarabun', sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body ,html {
    height: 100vh !important;
    margin: 0;
    padding: 0;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(25deg,#2fd299,#2fd498);
 
}

.swal2-container {
    z-index: 20000 !important;
}

.login-box {
    background-color: #FFF;
    border-radius: 25px;
    margin-left: 5vw;
    margin-top:5vh;
    width: 90vw;
    height: 90%;
    display: flex;
    flex-direction: row;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    z-index: 1070;
}

.mobile-box {
    display: block;
    flex: 1;
    height: auto;

}

.left-box {
    width: 50%; 
    display: block;
    
}

.right-box {
    width: 50%;
    z-index: 1099;
}

.right-box h1 {
    text-align : center;
    font-size : 1.66vmax;
    font-weight: 800;
    color : #085038;
}

.right-box h4 {
    text-align : center;
    font-size : 1.08vmax;
    font-weight: 800;
}

.left-box {
    width: 50%;
    z-index: 1099;
}

.left-box h1 {
    text-align : center;
    font-size : 1.66vmax;
    font-weight: 800;
    color : #085038;
}

.left-box h4 {
    text-align : center;
    font-size : 1.08vmax;
    font-weight: 800;
}

.welcome-img {
    margin-left:40%;
    margin-top:15%;
    width: 20%;
}

.background-img{
    position: absolute;
    height: 90.2vh;
    z-index: 1090;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}


input[type="text"],
input[type="password"] {
    display: block;
    box-sizing: border-box;
    margin-bottom: .8vmax;
    padding: 18px;
    width: 60%;
    height: auto;
    border: none;
    border-bottom: 2px solid #28bb8a;
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    font-size: 1vmax;
    text-align: center;
    transition: 0.2s ease;
    margin-left: 20%;
}



input[type="submit"]{
    margin-top: 28px;
    width: 60%;
    height: 2.8vmax;
    background: #37cf9c;
    border: none;
    border-radius: 22px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left: 20%;
}

button[type="accept"]{
    margin-top: 28px;
    width: 38%;
    height: 2.8vmax;
    padding: .1vmax;
    background: #37cf9c;
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.0vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left:16%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

button[type="accept"]:hover {
    background: #109e6f;
}

button[type="acceptdisabled"]{
    margin-top: 28px;
    width: 38%;
    height: 2.6vmax;
    background: #666666;
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.0vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left:16%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

button[type="acceptnotevent"]{
    margin-top: 28px;
    width: 38%;
    height: 2.6vmax;
    background: #666666;
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.0vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left:16%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}



button[type="close"]{
    margin-top: 28px;
    width: 28%;
    height: 2.6vmax;
    background: #bb6868;
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.0vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left:6%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

button[type="close"]:hover {
    background: #8d1717;
}

button[type="close2"]{
    margin-top: 28px;
    width: 60%;
    height: 5.6vmax;
    background: #bb6868;
    border: none;
    border-radius: 8px;
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.0vmax;
    font-weight: 688;
    text-transform: uppercase;
    transition: 0.1s ease;
    cursor: pointer;
    margin-left:10%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

button[type="close2"]:hover {
    background: #8d1717;
}

.profile {
    width: 80%;
    height: 28%;
    margin-left: 10%;
    margin-top: 4%;
    padding : 2%;
    background-color: rgb(250, 250, 250);
    border-radius: .3rem;  
    border: 2px solid #085038;
}

.address {
    width: 80%;
    height: 38%;
    margin-left: 10%;
    margin-top: 4%;
    padding : 2%;
    background-color: rgb(250, 250, 250);
    border-radius: .3rem; 
    border: 2px solid #085038;
}

.profile h1 {
    font-size: 1.2vmax;
    color: #222;
    font-weight: 800;
    padding-left: 2%;
    width: 20%;
    background-color: white;
    margin-top: -5.2%;
}

.address h1 {
    font-size: 1.2vmax;
    color: #222;
    font-weight: 800;
    padding-left: 2%;
    width: 16.8%;
    background-color: white;
    margin-top: -5.2%;
}

.consent {
    width: 80%;
    height: 88%;
    margin-left: 10%;
    margin-top: 4%;
    padding : 2%;
    background-color: rgb(253, 248, 237);
    border-radius: .6rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    line-height: 1.5;
}

.consent img {
    width: 15.8%;
    margin-left: 42.1%;
}

.consent h1 {
    font-size: 1.06vmax;
    color: #333;
    font-weight: 800;
}

.acceptdiv {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 10px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
}

.consent accept {
    font-size: 1.06vmax;
    font-weight: 800;;
    color: rgb(255, 255, 255);
    text-align: right;
    line-height: 2.8;
    cursor: pointer;
}

.consent accept:hover {
    color: #28bb8a;
    font-size: 1.1vmax;
}

.consent-main {
    margin-left: 6%;
    margin-right: 6%;
}

.mg-top {
    margin-top: 20px;
}

.consent tcs {
    font-size: .88vw;
    color: #222;
    font-weight: 400;
    white-space: pre-wrap;
    
}

udl {
    text-decoration: underline;
}

.dot {
  height: 8.8px;
  width: 8.8px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}

.form-col {
    display: flex;
    flex-direction: column;
}

.form-row {
    display: flex;
    flex-direction: row;
    padding: 1%;
}

.form-row label {
    font-weight: 400;
    text-align: left;
    transition: 0.2s ease;
    color: rgb(12, 95, 56); 
    height: 3.2vh; 
}

.profile .form-row label {
    font-size: .88vmax;
    width: 30%;
}

.profile .form-row input {
    width: 70%;
}

.address .form-row label {
    font-size: .968vmax;
    width: 20%;
}

.address .form-row input {
    width: 70%;
}

.form-row input {
    border: none;
    border-bottom: 2px dotted rgb(4, 59, 25);
    background-color: rgba(187, 231, 216, 0.28);
    flex-grow: 1;
    text-align: center;
    font-weight: 400;
    font-size: .9vmax;
    color : black;
    /*++*/
    width: 70%;
    height: 3.2vh;
}

.desktop-screen
{
    display: block;
}

.mobile-screen
{
    display: none;
}

.landscape-screen
{
    display: none;
}

.wrongid-text{
    margin-top:35%;
    margin-left:5%;
    margin-right:5%;
    text-align:center;
}

.wrongid-text h1{
    font-size: 1.6vmax;   
}

.wrongid-button{
    margin-top:35%;
    margin-left:30%
}

.success-text{
    margin-top:35%;
    margin-left:5%;
    margin-right:5%;
    text-align:center;
}

.success-button{
    margin-top:0%;
    margin-left:22%
}



@media screen and (max-width:1480px){

    .consent {
        height: 90%;
        margin-top: 2%;
        padding : 1%;
        border-radius: .6rem;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }

    .dot {
        height: 6.8px;
        width: 6.8px;
      }

    .consent img {
        width: 12.8%;
        margin-left: 44.2%;
    }

    .consent h1 {
        font-size: .92vmax;
        color: #333;
        font-weight: 800;
    }
    
    .consent-main {
        margin-left: 6%;
        margin-right: 6%;
    }
    
    .consent tcs {
        font-size: .68vw;
        color: #222;
        font-weight: 400;
        white-space: pre-wrap;
    }

}

@media screen and (max-width:500px){
    html,body{
        min-height: 600px;
        height: 100%; 
     }

    .left-box{
        display:none;
        flex: 1;
        height: auto;
        
    }

    .right-box{
        flex: 1;
        width: 88%;
        height: auto;
        margin-left: 6%;
    }

    .right-box h1 {
        font-size : 22px;
    }

    .welcome-img {
        margin-left:30%;
        margin-top:8%;
        width: 40%;
    }

    .login-box {
        flex-direction: column;
        border-radius: 6px;
        height: 90vh;
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }
    
    input[type="text"],
    input[type="password"] {
        margin-bottom: 1.68vmax;
        padding: 16.8px;
        width: 80%;
        height: auto;
        border: none;
        border-bottom:none;
        border-left: 6px solid #28bb8a;
        font-size: 22px;
        margin-left: 10%;
        background-color: rgba(222, 244, 238, 0.88);
    }

    input[type="submit"]{
        width: 80%;
        margin-left:  10%;
        height: 50px;
        font-size: 16.8px;
        border-radius: 8px;
    }

    .profile {
        width: 95%;
        margin-left: 2.5%;
        height: 36%;
        margin-top: 28px;
    }

    .address {
        width: 95%;
        margin-left: 2.5%;
        height: 50%;
    }

    .consent accept {
        font-size: 1.22vmax;
    }

    .consent {
        width: 98%;
        height: auto;
        margin-left: 1%;
        margin-left: 1%;
        margin-top: 1%;
        line-height: 1.2;
    }

    .mg-top {
        margin-top: 0px;
    }

    .consent img {
        width: 20%;
        margin-left: 40%;
    }

    .consent h1 {
        text-align: center;
        font-size: 1.22vmax;
    }

    .profile h1 {
        text-align: center;
        font-size: 1.50vmax;
        width: 30%;
        border-radius: 8px;
    }

    .address h1 {
        text-align: center;
        font-size: 1.50vmax;
        width: 30%;
        border-radius: 8px;
    }


    .consent tcs {
        font-size:0.52rem;
        
    }

    .dot {
        height: 6.8px;
        width: 6.8px;
    }

    .form-row input {
        flex-grow: 1;
        font-size: 1.1vmax;
        height: 2.28vh;
        border-bottom: none;
    }

    button[type="accept"]{
        margin-top: -12.8%;
        margin-bottom: 5%;
        width: 48%;
        height: 6.6vmax;
        border-radius: 6px;
        color: #FFF;
        font-size: 1.5vmax;
        font-weight: 800;
        margin-left: 2%;
    }

    button[type="acceptdisabled"]{
        margin-top: -12.8%;
        margin-bottom: 5%;
        width: 48%;
        height: 6.6vmax;
        border-radius: 6px;
        background: #666666;
        font-size: 1.5vmax;
        font-weight: 800;
        margin-left: 2%;
    }

    button[type="acceptnotevent"]{
        margin-top: -12.8%;
        margin-bottom: 5%;
        width: 48%;
        height: 6.6vmax;
        border-radius: 6px;
        background: #666666;
        font-size: 1.5vmax;
        font-weight: 800;
        margin-left: 2%;
    }

    button[type="close"]{
        margin-top: -12.8%;
        margin-bottom: 5%;
        width: 38%;
        height: 6.6vmax;
        border-radius: 6px;
        color: #FFF;
        font-size: 1.5vmax;
        font-weight: 800;
    }

    button[type="close2"]{
        margin-top: -12.8%;
        margin-bottom: 5%;
        width: 100%;
        height: 6.6vmax;
        border-radius: 6px;
        color: #FFF;
        font-size: 1.5vmax;
        font-weight: 800;
        margin-left: 0%;
    }

    .profile .form-row label {
        font-size: 1.38vmax;
    }
    
    
    .address .form-row label {
        font-size: 1.38vmax;
        width: 25%;
    }

    .profile .form-row input {
        font-size: 1.38vmax;
    }
    
    
    .address .form-row input {
        font-size: 1.38vmax;
        width: 65%;
    }

    .wrongid-text{
        margin-top:68%;
        margin-left:5%;
        margin-right:5%;
        text-align:center;
    }

    .wrongid-text h1{
        font-size: 2.2vmax;   
    }
    
    .wrongid-button{
        margin-top:8%;
        margin-left: 0%;
    }
    
    .success-text{
        margin-top:0%;
    }

    .success-button{
        margin-top:8%;
        margin-left:0%
    }

}