:root{
    --clr1:#ffffff;
    --clr2:#EFEFEF;
    --clr3:#00000033;
    --clr4:#0000001A;
    --clr5:#707070;
    --clr6:#EC2E65;
    --clr7:#C22868;
    --clr8:#A63293;
    --clr9:#232323;
    --clr10:#535353;
    --clr11:#E1DFDF;
    --clr12:#962067;
    --clr13:#FDB913;
    --clr14:#3DC138;

    --clr9-rgb:35,35,35;
    --clr10-rgb:83,83,83;
}

/* font-family: 'DM Sans', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Open Sans', sans-serif; */

body{ font-family: 'DM Sans', sans-serif; background-color: var(--clr2) !important; }

.login_wrap{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 15px;  }
.login_wrap .login_sec{ max-width: 917px; border: #eee solid 1px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 10px #00000020; }
.login_wrap .login_sec .col_left{ position: relative; }
.login_wrap .login_sec .col_left .logo{ position: absolute; top: 25px; left: 35px; width: 100px; }
.login_wrap .login_sec .col_right{ padding: 50px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.login_wrap .login_sec h2{ font-family: 'Kanit', sans-serif; font-size: 20px; color: var(--clr9); margin-bottom: 20px; }
.login_wrap .login_sec .form-group{ position: relative; margin-bottom: 20px; }
.login_wrap .login_sec .form-group .form-control{ 
    border-radius: 6px; border: 1px solid rgba(var(--clr10-rgb),0.2); height: 50px; position: relative; background-color: transparent; font-size: 15px; color: var(--clr9); font-weight: 500; transition: all 0.2s;
 }
.login_wrap .login_sec .form-group .form-control:focus{ box-shadow: none; border: 1px solid rgba(var(--clr10-rgb),0.4); }
.login_wrap .login_sec .form-group label{ position: absolute; top: 13px; left: 18px; color: var(--clr5); font-size: 16px; background-color: #fff; padding: 0 6px; transition: all 0.2s; }
.login_wrap .login_sec .form-group.focused label{ top: -8px; left: 7px; font-size: 13px; color: rgba(var(--clr10-rgb),0.7); z-index: 1; }
.login_wrap .login_sec .form-group .input-group{ z-index: 0; }
.login_wrap .login_sec .form-group .input-group .form-control{ border-right: 0; }
.login_wrap .login_sec .form-group .input-group-text{ background-color: transparent; border: 1px solid rgba(var(--clr10-rgb),0.2); border-left: 0; transition: all 0.2s; }
.login_wrap .login_sec .form-group .input-group .form-control:focus + .input-group-text{ border: 1px solid rgba(var(--clr10-rgb),0.4); border-left: 0; }
.login_wrap .login_sec .form-group .input-group-text i{ font-size: 18px; color: var(--clr5); cursor: pointer; }
.login_wrap .login_sec .fp{ text-decoration: none; font-size: 13px; font-family: 'Open Sans', sans-serif; color: var(--clr6); }
.login_wrap .login_sec .fp:hover{ color: var(--clr12); }
.login_wrap .login_sec .btn{ background-color:var(--clr12); color: #fff; font-size: 15px; height: 40px; border-radius: 6px; margin-top: 20px; background-image: linear-gradient(90deg,var(--clr6), var(--clr8)); transition: all 0.5s; }
.login_wrap .login_sec .btn:hover{ background-color:var(--clr6); background-image: linear-gradient(90deg,var(--clr4), var(--clr6)); }
.login_wrap .login_sec .btm_txt{ font-size: 14px; text-align: center; color: var(--clr10); margin-top: 35px; }
.login_wrap .login_sec .btm_txt a{ text-decoration: none; color: var(--clr6); }
.login_wrap .login_sec .btm_txt a:hover{ color: var(--clr12); }

.text-right{ text-align: right; }

.header{ background-color: #fff; box-shadow: 0 0 10px #00000030; height: 60px; }
.header .container{ display: flex; height: 100%; column-gap: 50px; }
.header .logo{ width: 72px; display: flex; align-items: center; }
.header .logo img{ width: 100%; }

.menus{ display: flex; }
.menus ul{ display: flex; padding: 0; margin: 0; column-gap: 35px; }
.menus ul li { list-style: none; display: flex; }
.menus ul li a{ text-decoration: none; display: flex; align-items: center; font-size: 14px; color: var(--clr10); font-weight: 500; border-bottom: 2px solid transparent; }
.menus ul li a:hover{ color: var(--clr7); }
.menus ul li.active a{ color: var(--clr7); border-bottom: 2px solid var(--clr7); }

.log{ display: flex; }
.log a{ text-decoration: none; display: flex; align-items: center; font-size: 14px; color: var(--clr10); font-weight: 500; column-gap: 8px; }
.log a i{font-size: 18px; }
.log a:hover{ text-decoration: none; color: var(--clr7); }

.spacer{ flex-grow: 1; }

.body{ padding: 30px; }

.sec_top{ display: flex; column-gap: 30px; margin-bottom: 25px; }
.sec_top h2{ font-family: 'Kanit', sans-serif; font-size: 24px; color: var(--clr7); margin: 0; display: flex; align-items: center; }
.sec_top .search{ border: #ccc solid 1px; border-radius: 6px; display: flex; }
.sec_top .search .input-group .form-control{ border: 0; background-color: transparent; }
.sec_top .search .input-group .form-control:focus{ box-shadow: none; }
.sec_top .search .input-group .input-group-text,
.sec_top .search .input-group .input-group-text button{ border: 0; background-color: transparent; color: var(--clr10); }
.sec_top .search .input-group .input-group-text button:hover{ color: var(--clr7); }
.sec_top .entry{ border: #ccc solid 1px; display: inline-flex; padding: 10px 15px; border-radius: 6px; display: inline-flex;  }
.sec_top .entry a{ text-decoration: none; display: flex; align-items: center; font-size: 14px; color: var(--clr10); font-weight: 500; column-gap: 8px; }
.sec_top .entry a i{font-size: 18px; }
.sec_top .entry a:hover{ color: var(--clr7); }
.sec_top .switch_box{ border: #ccc solid 1px; display: inline-flex; align-items: center; column-gap: 10px; padding: 10px 15px; border-radius: 6px; font-size: 14px; color: var(--clr10); font-weight: 500;  }
.sec_top .switch_box > span span{ color: var(--clr7); font-weight: 600; margin-left: 5px; }

.table{ background-color: #fff; border-radius: 4px; box-shadow: 0px 2px 4px #0000001A; }
.table thead th{ font-size: 13px; color:rgba(var(--clr9-rgb),0.5); white-space: pre; font-weight: 500; padding: 10px 15px; }
.table tbody tr{ transition: all 0.3s; }
.table tbody tr:hover{ background-color: #f7f7f7; }
.table tbody td{ font-size: 14px; font-weight: 500; padding: 15px 15px; }
.table .btn{ background-color: #fff; border: var(--clr6) solid 1px; color: var(--clr6); font-weight: 500; transition: all 0.2s; }
.table .btn:hover{ box-shadow: 3px 3px 5px #00000052; transform: scale(1.05); }

.btn.btn_1{ background-color: var(--clr14); border: 0; color: #fff; }
.btn.btn_2{ background-color: var(--clr6); border: 0; color: #fff; }
.btn.btn_3{ background-color: var(--clr13); border: 0; color: var(--clr9); }
.btn.btn_4{ background-color: var(--clr12); border: 0; color: #fff; }

.clr_1{ color: var(--clr14); }
.clr_2{ color: var(--clr6); }
.clr_3{ color: var(--clr13); }
.clr_4{ color: var(--clr12); }

.switch { position: relative; display: inline-block; width: 51px; height: 25px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer;  top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--clr7); }
.switch input:checked + .slider:before { transform: translateX(26px); }

hr{ border: 1px solid #ccc; }

.daterange{ border: #ccc solid 1px; display: inline-flex; padding: 5px 0 5px 15px; border-radius: 6px; display: inline-flex; font-size: 14px; color: var(--clr10); font-weight: 500; column-gap: 15px;  }
.daterange > span{ white-space: pre; display: flex; align-items: center; }
.daterange .input-group .form-control{ border: 0; background-color: transparent; border-left: #ddd solid 1px; }
.daterange .input-group .form-control:focus{ box-shadow: none; }
.daterange .input-group .input-group-text,
.daterange .input-group .input-group-text button{ border: 0; background-color: transparent; color: var(--clr10); font-size: 22px; }
.daterange .input-group .input-group-text button:hover{ color: var(--clr7); }