/* Font */
/* sarabun-regular - thai_latin */
 @font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/sarabun-v13-thai_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/sarabun-v13-thai_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/sarabun-v13-thai_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/sarabun-v13-thai_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/sarabun-v13-thai_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/sarabun-v13-thai_latin-regular.svg#Sarabun') format('svg'); /* Legacy iOS */
  }

/* เซ็ต fonts */
html, body {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
}


/* กำหนดโครงสร้างของ Main ที่คุมเอา Logo ช่องค้นหาและปุ่มไว้  */
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper{
    width: 500px;
    transition: width 0.2s;
    /* margin-top: 20px; */
}

form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

/* ปรับแต่งหน้าตาของช่อง Search  */
.input-container{
    width: 100%;
    display: flex;
    border: solid lightgray 0.5px;
    border-radius: 50px 50px 50px 50px;
    padding: 10px 10px 10px 10px;    
}
#empcode{ width: 100%;border: 0;}
 #empcode:focus{ outline: none;} 

/* ปรับแต่งช่องตัวเลือก year */
.select-contain{ 
    display: flex; 
    flex-direction:column; 
    justify-content: center; 
    align-items: center; 
    width: 100px;
}
.select-contain p, select {margin: 10px 0px 10px 0px;}
.y-select{
    text-align-last:center;
    width: 100%; 
    border-radius: 50px;  
    border: solid lightgray 0.5px ;
    padding: 5px;
}
option{text-align-last:center;}

/* ปุ่มค้นหา */
.input-group{ margin: 20px 0px 20px 0px;}
#search_btn{
    width: 100px;
    background:#f8f9fa; 
    font-weight: bold; 
    color: rgb(105, 105, 105); 
    border: solid lightgray 0.5px ;
    border-radius: 50px;  
}
#search_btn:focus,#search_btn:hover,#search_btn:active{
    background-color:orange; 
    font-weight: bold; 
    color: navy;  
    box-shadow: 0px 0px 5px rgb(215, 215, 215) ;
}

/* ขนาดและรูปร่างของ Logo  */
.logo{
    display: block; 
    width: 100%; 
    max-width: 25rem; 
    margin-bottom:25px;
}

/* ส่วนของ Footer */
.foot-text{
    text-align: center;
    margin: 10px 0px 10px 0px;
}
.foot-text p {
    font-size: 0.5rem;
    margin: 0px 0px 0px 0px;  
}
.foot-text img{
    width: 0.9rem;
}


/* แสดงบนมือถือ และ Tablet */
@media screen and (min-width:320px) and (max-width: 767px) {
    
   .wrapper{
        width: 300px;
        transition: width 0.2s;
    }
}