@font-face {
  font-family: "thaineu";
  src: url(../src/fonts/ThaiSansNeue-Bold.otf);}

  @font-face {
    font-family: "thaineul";
    src: url(../src/fonts/ThaiSansNeue-Light.otf);
  }
  @font-face {
    font-family: "thaineuB";
    src: url(../src/fonts/ThaiSansNeue-Regular.otf);
  }
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: 'Poppins', sans-serif; */
  font-family: "thaineu",sans-serif;
}

html,body{
  height: 100%;
}

body{
  display: grid;
  place-items: center;
  text-align: center;
  background: #ecf0f3;
}

.content{
  width: 330px;
  background: #ecf0f3;
  border-radius: 35px;
  padding: 40px 30px;
  box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
}
.img3{
  width: 90px;
  height: 90px;
  margin-top: 20;
  border-radius: 50px;
  margin-bottom: 20px;
  box-shadow: 

  0px 0px 0px #5f5f5f,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px #ffffff
  ;
}
.img{
  width: 128px;
  height: 128px;
  margin-top: 20;
  border-radius: 1px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 

  0px 0px 0px #5f5f5f,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px #ffffff
  ;
}
.content .text{
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 0x;
  color: #2e282a;
}

.content .text3{
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1DA1F2;
}
.content .text2{
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #f82e20;
}


.or{
  color: #db4747;
  margin-top: 3px;
  font-size: 24px;
  font-family: "thaineul",sans-serif;
}

.otp{
  color: #21e158;
  margin-top: 3px;
  font-size: 52px;
  text-align: center;
  font-family:  'Poppins', sans-serif;
  font-stretch: ultra-expanded;
  margin-bottom: 10px;
}
.otp3{
  color: #e15721;
  margin-top: 1px;
  font-size: 50px;
  text-align: center;
  font-family: "thaineuB",sans-serif;
  font-stretch: ultra-expanded;
  margin-bottom: 10px;
}
.content .field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field input{
  height: 90%;
  width: 100%;
  margin-top: 10px;
  
  font-family: "thaineuB",sans-serif;
  padding-left: 45px;
  font-size: 26px;
  outline: none;
  border: none;
  color: gray;
  background: #ebf4f9;
  border-radius: 25px;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

.field input:focus ~ label{
  box-shadow: inset 2px 2px 5px #babecc,
              inset -1px -1px 2px #ffffff73;
}

.field:nth-child(2){
  margin-top: 20px;
}

.field span{
  position: absolute;
  width: 50px;
  line-height: 50px;
  color: #595959;
}

.field label{
  position: absolute;
  top: 50%;
  left: 45px;
  font-size: 22px;
  pointer-events: none;
  color: #666666;
  transform: translateY(-50%);
}

/*
.field input:focus ~ label{
  opacity: 0;
}
 */

button{
  margin: 25px 0 0 0;
  width: 100%;
  height: 45px;
  color: white;
  font-size: 22px;
  font-weight: 600;
  background: #1DA1F2;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 25px;
  box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
  transition: 0.5s;
  
  margin-bottom: 15px;
}

.button2{
  margin: 25px 0 0 0;
  width: 100%;
  height: 45px;
  color: white;
  font-size: 22px;
  font-weight: 600;
  background: #e96c24;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 25px;
  box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
  transition: 0.5s;
  margin-top: 20px;
  margin-bottom: 15px;
}
button:hover{
  box-shadow: none;
}

 
.icon-button{
  margin-top: 15px;
}


.icon-button span{
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 6px;
  padding-bottom: 6px;
   
 border-radius: 5px;
  line-height: 30px;
  
  background: #dde1e7;
  box-shadow: 2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}
.icon-button span.facebook{
  margin-right: 17px;

}
.icon-button span:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}