html,body{
margin:0px;
padding:0px;
background: #273346;
font-family: Kanit-Regular;
overflow:hidden;
}

html,body {
    height: 100%;
}

/*
.leftpannel{
position:fixed;
top:100px;
left:0px;
height:100%;
width:300px;
}
*/
.main {
margin:0px;
padding:0px;
width:100%;
height:100%;
overflow:hidden;
display:inline-block;
}
.logo{
color:white;
font-size:40px;
font-family: "Kanit-Medium";
}

.tableLogo{
/*position:absolute;
top:46px;
left:44px;
*/
margin-left:44px;
}

.formLogin{
/*
position:absolute;
left:44px;
top:270px;
*/
margin-left:44px;
margin-top:120px;

}

.divImage{
  
	background-image: url('image/mailFile.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height:100%;
}

#data, #data2{
outline:none;
border:1px solid #535f6b;
border-radius: 15px;
background: #273346;
width: 90%;
height:87px;
color:white;
padding-left:20px;
font-family:Manrope-Regular;
}

label{
font-family:Manrope-Regular;

position:relative;
top: -60px;
left:20px;
color:#535f6b;
font-size:20px;

}

#data:focus, #data2:focus{
background:#414B56;
}

#data:focus ~ label, #data2:focus ~ label, #data:valid ~ label, #data2:valid ~ label {
top:-120px;
left:0px;
font-size: 16px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
font-family:Manrope-Light;
}

.submit{
background: linear-gradient(#1C85F0, #3F9EFF);
width: 90%;
height:87px;
border-radius: 10px;
outline:none;
padding:0px;
line-height:none;
color:white;
font-size:20px;
font-family:Manrope-Regular;
}

.img{
object-fit: cover;
/*width:100%;
height:100%;*/
overflow: hidden;
}






@font-face {
font-family: "Kanit-Regular";
src: url("Kanit/Kanit-Regular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
 }

 @font-face {
font-family: "Kanit-Medium";
src: url("Kanit/Kanit-Medium.ttf") format("truetype");
font-style: normal;
font-weight: normal;
 }
@font-face {
font-family: "Manrope-SemiBold";
src: url("Manrope/Manrope-SemiBold.ttf") format("truetype");
 }
@font-face {
font-family: "Manrope-Light";
src: url("Manrope/Manrope-Light.ttf") format("truetype");
 }
@font-face {
font-family: "Manrope-ExtraLight";
src: url("Manrope/Manrope-ExtraLight.ttf") format("truetype");
 }
 @font-face {
font-family: "Manrope-Regular";
src: url("Manrope/Manrope-Regular.ttf") format("truetype");
 }

 @font-face {
font-family: "Manrope-SemiBold";
src: url("Manrope/Manrope-SemiBold.ttf") format("truetype");
 }