@charset "utf-8";

*{padding: 0; margin: 0; box-sizing: border-box;}
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
}
ul,li{list-style: none;}

#wrap{width: 100%; height: 100%; position: relative; background: #F2F3F8;}

/*login*/
#login_wrap{   display: flex; flex-direction: column; align-items: center;    width: 100%;  height: 100%;
    justify-content: flex-start; padding-top: 10%;}
#login_wrap h2{font-size: 2em; margin-bottom: 30px;}
.login_cont {display: flex; flex-direction: row; width: 100%; max-width: 400px; justify-content: space-between;}
.login_cont  .login_inputs{display: flex; flex-direction: column;}
.login_cont  .login_inputs input{width: 100%; border:none; background: #ffffff; height: 45px; padding: 0 15px; font-size: 1em; min-width: 280px; border-radius: 5px;}

.login_cont button{background: #1192F6; color: #fff; font-size: 1.1em; border:none; width: 100px; border-radius: 5px; cursor: pointer;}
.login_cont button:hover{background: #1c6297; }



/*admin*/
#admin_wrap{
    display: flex; flex-direction: column;
    width: 98%; background: #fff; height: 100%; margin:0 auto;
    padding:15px;
}
.admin_title{display: flex; justify-content: space-between; width: 100%; }
.admin_title a img{max-width: 50px;}

.tab_menu{position:relative;}
.tab_menu .list{overflow:hidden;}
.tab_menu .list li{float:left; margin-right:14px;}
.tab_menu .list .btn{font-size:1.2em; text-decoration: none; color:#000; font-weight: bold;}
.tab_menu .list .cont{display:none; position:absolute; top:25px; left:0;  color:#000; text-align:center; width:250px; height:100px;}

.tab_menu .list li.is_on .btn{font-weight:bold; color:#1192F6; font-weight: bold; font-size: 1.2em; text-decoration: none;}
.tab_menu .list li.is_on .cont{display:block; margin-top: 20px;}

#tab1{width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#tab1 div.tab1_cont{width: 85%;}
#tab1 #tableData{border-spacing: 0px; width: 100%; box-sizing: border-box; height: 850px;}
#tab1 #tableData td{border:1px solid #000;}
#tab1 #tableData tr td{border:1px solid #000; padding:5px 0px;}
#tab1 #tableData tr th{border:1px solid #000; }

#tab1 .tab1_select{display: flex; flex-direction: column;  height: 850px;  justify-content: space-between; width: 10%;}


#tab2{width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#tab2 div.tab2_cont{width: 87%;}
#tab2 #tableData2{border-spacing: 0px; width: 100%; box-sizing: border-box; height: 850px;}
#tab2 #tableData2 td{border:1px solid #000;}
#tab2 #tableData2 tr td{border:1px solid #000; padding:5px 0px;}
#tab2 #tableData2 tr th{border:1px solid #000; }




#tab2 .tab1_select{display: flex; flex-direction: column;  height: 850px;  justify-content: space-between; width: 10%;}

#excelDownload,#excelDownload2{background: #1192F6 ;border-radius: 4px; line-height: 40px; color:#fff; border:none; height: 40px; cursor: pointer;}

.pagination {
    display: inline-block;
    margin-top: 20px;
  }
  
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
  }
  
  .pagination a.active {
    background-color: #1192F6;
    color: white;
    border: 1px solid #1192F6;
  }
  
  .pagination a:hover:not(.active) {background-color: #ddd;}



@media (max-width: 480px) {
    #login_wrap{padding:10% 15px 0;}
    .login_cont{
        flex-direction: column;
    }
    .login_cont button{margin-top:20px; width: 100%; height: 45px;}
}