/*login*/
.login-wrapper { width:100%; display:flex; height:100vh; justify-content: center; align-items:center;  background:#fff;flex-direction: column;}
.login-container { float:left; width:100%; max-width:1000px;}
.logo-wrapper {float:left; width:100%; max-width:1000px; }
.logo-wrapper img {max-width: 200px;  margin-bottom:7px;}
.logo-wrapper span.logo-text {font-family: 'Lexend Deca', sans-serif!important; font-size:2rem;}
.loginbg { text-align: right;}
.login-input {width:100%; max-width:300px; }
.login-left h3 {font-weight:400!important; position:absolute; top:70px; left:80px;font-size:38px; color:#fff; line-height:1; margin-bottom:40px; font-family: 'Lexend Deca', sans-serif!important;} 
.login-left h3 span.title-sm  {font-size:23px; color:#fff; width:100%; font-weight:400; font-family: 'Inter', sans-serif;}
.login-label {font-size:1rem; color:#fff;}
a.link-forgot {color: #fff!important;}
a.link-forgot:link {color: #fff!important; font-size:0.875rem; font-weight:400;}
a.link-forgot:hover {color:#2789e9!important; }
a.signin {border-radius: 25px; padding:0.6875rem 2.375rem; font-size:0.9375rem; background:#278ae8; border: 1px solid #278ae8; color: white;}
.row.forgot-id {margin-top:1rem; text-align: center; } 
.copyright {color:#666; font-size:0.875rem; padding-left:200px; margin-top:15px;}
.login-left {position:relative; width:70%; background: url(../images/loginbg.jpg); float:left; height:480px; background-position: center center;}
.login-right {width:30%; background: #244798; float:left; height:480px; padding: 30px 30px; display: flex; align-items: center;}
label.rememberid {color:#fff; font-size:13px;}
.login-btn {text-align: center; width:100%;}
.loginbg02 {display:none;}

@media only screen and (max-width:767px) {
.loginbg {display:none;}
.loginbg02 { width:100%; position:absolute; bottom:0; display:block;}
.loginbg02 img {width:100%;}
.logo-wrapper{width:100%;}
.login-wrapper {padding:2% 5% 0 5%;flex-direction: column; height:auto; justify-content: unset; align-items: unset;}  
.login-container {width:100%; display:flex; flex-direction: column; }
.login-left  {width:100%; height:330px;}
.login-right {width:100%; height:360px; justify-content: center; padding: 15px 20px;}
.copyright {color:#666; font-size:0.875rem; padding-left:30px; margin-top:8px;}
.form-wrapper { padding: 2rem 1.5rem 1rem 1.5rem!important;}
.footer-menu{padding: 0 20px;}
footer { margin-top:50px; padding:30px 0; }
.logo img {width: 100px!important;}
.logo span.logo-text { font-size: 1.5rem!important;}
.line-center {border-right: 0px solid #000!important;}
.search-form {width:100%!important; flex-direction:row;}
.search-form-button {width:100%!important;}
.search-input {width:100%!important;}
.attendance-wrapper {display:block!important;}
.attendance-title {width:100%!important;}
.attendance-title h3 {font-size:2rem; line-height:1.1;} 
.footer-menu ul {text-align: center;}
.footer-menu ul li {display: inline-block; text-align: center; padding-right:5px;}
.footer-menu ul li:last-child {padding-right:0;}
.ftsearch-wrapper {align-items: center!important;}
.subtitle {font-size:18px!important; line-height:23px!important;}
.page-title-left {width:40px!important; }
.page-title h3 {font-size: 22px!important; line-height: 27px!important;}
a.btn-default {padding:7px 20px!important;  margin-right: 0px!important; color: white !important;}
a.btn-default:last-child {margin-right:0!important;}
}

header.header {width:100%; }
.topbar {width:100%; background:#244798; height:35px;}
.profile-wrapper {float:right; padding-top:7px; text-align: right;}
.profile-wrapper > ul > li {line-height:1; width:auto; border-right:1px solid rgba(255,255,255,0.3); display:inline-block; list-style:none; padding-right:10px; padding-left:10px;}
.profile-wrapper > ul > li a{color:#fff; }
.profile-wrapper > ul > li a:hover {color:#2789e9!important;}
.profile-wrapper > ul > li:last-child {border-right:0!important;}

.logo img {max-width: 120px;  width:100%;}
.logo span.logo-text {font-family: 'Lexend Deca', sans-serif!important; font-size:28px; padding-left:5px;  font-style:italic; text-transform: uppercase;}
.page-title-left {float:left; background: #fff; text-align: right;}
.page-title {background:#e1f1ff; padding:0 15px 0 5px; height:70px;  }
.page-title h3 { color:#244798; font-size:30px;  font-family: 'Lexend Deca', sans-serif!important; line-height:1.1; margin-bottom:0; padding-top:20px;}
.page-title h3 span i{font-size:7px; color:#2789e9; padding-left:3px;}
.container-cef { max-width: none;}
.announcement {background: #e1f1ff; border-radius: 7px; border-left:5px solid #2789e9; text-align: center; padding: 12px 20px; color: #244798; font-weight:500;}
.search-area {width:100%; background:#fff; border-top:2px solid #2789e9; border-bottom:1px solid #2789e9; padding: 12px 10px 7px 10px; margin-bottom:20px; display:flex; justify-content: flex-end;}
.search-area > table > tbody > tr > th {color:#244798; font-weight: normal; padding: 0 0 0 10px; background-color: #f1f1f1;}
.search-area > table > tbody > tr > td {color:#244798; font-weight: normal; padding: 0 10px;}
.search-form {width:73%;  display:flex; margin-right:2%; } 
.search-form.one-btn {width:83%;  } 
.search-form-button {width:25%; display:flex; justify-content: flex-end; align-items: center; }
.search-form-button.one-btn {width:15%;  }
.search-input {width:24%; display:flex; align-items: center; margin-right:2%;  position: relative;}
a.btn-default {padding:7px 25px; font-size:0.9375rem; background:#2789e9; border: 1px solid #2789e9;  margin-right: 5px; border-radius:25px; color: white !important;}
a.btn-default:last-child {margin-right:0;}
a.gray {padding:7px 25px; font-size:0.9375rem; background:#999; border: 1px solid #999;  margin-right: 5px; border-radius:25px; color: white !important;}
a.gray:last-child {margin-right:0;}
a.blue {padding:7px 25px; font-size:0.9375rem; background:dodgerblue; border: 1px solid #999;  margin-right: 5px; border-radius:25px; color: white !important;}
a.blue:last-child {margin-right:0;}
a.btn-default-checkin {padding:0.5rem 1.5rem; font-size:0.9375rem; background:#d9661f; border: 1px solid #d9661f; margin-right: 5px; border-radius:25px; color: white !important;}
a.btn-default-checkout{padding:0.5rem 1.5rem; font-size:0.9375rem; background:#d9661f; border: 1px solid #e7ac19; border-radius:25px; color: white !important;}
.checkin-wrapper {border-bottom:1px solid #2789e9; display:flex; align-items: center; justify-content:end; padding-top:12px; padding-bottom:7px; }
.button-wrapper {display:flex; align-items: center; justify-content:end}
.company-wrapper {width: 100%; border-radius:10px;  border: 1px solid #244798; border-bottom:10px solid #244798; }
.form-wrapper {padding: 2.5rem 3rem 2.5rem 2.125rem;}
.line-center {border-right:1px solid #000;}
input.input-gray {background:#ededed; border:1px solid #ededed;}
.label-blue {color:#244798; font-weight:600;}
.calendar-wrapper {width:100%; display:flex; justify-content: center; align-items: center; margin-bottom: 20px;}
.calendar-navi {color:#244798; font-size:1.75rem; width:50px; text-align: center;}
.calendar-navi a {color:#244798!important;}
.calendar-navi i:hover {color:#2789e9; cursor: pointer;}
.calendar-input {width:200px; text-align: center;}
.data-table-wrapper {width:100%; margin-bottom: 30px;}
.data-table-wrapper:last-child {margin-bottom: 0px;}

/*data table*/
.table1.user-detail {border-top:3px solid #2789e9; margin-bottom:0;}
.table1.user-detail th { background: #f3f3f3!important; color:#fff; font-weight:500; }
.table1.user-detail th {font-size:14px!important; padding: 0.438rem .5rem!important; text-align:center; border-bottom: 1px solid #ddd!important;}
.table1.user-detail td {font-size:14px!important; padding: 0.438rem .5rem!important; border-bottom: 1px solid #ddd!important;}
.table1.user-detail tbody th {background: #ebedfc; color:#244798;}
.table1.working-hour {margin-bottom:0;}
.table1.working-hour th {border-bottom: 1px solid #2789e9!important; background: #2789e9; color:#fff; font-weight:500;}
.table1.working-hour td, .table1.working-hour th {font-size:14px!important;  padding: 0.438rem .5rem!important; text-align:center;}
.table1.working-hour tbody th {background: #ebedfc; color:#000;}
.table1.my-inquiry td{ padding: 0.438rem .5rem!important; text-align:center; border-bottom: 1px solid #ddd!important; background: #fff;}
.table1.my-inquiry th { padding: 0.438rem .5rem!important; text-align:center; border-bottom: 1px solid #aaa!important; background: #aaa; color:#fff; font-weight:500;}
.table1.my-inquiry  {margin-bottom:0;}
.table-bottom-line {border-bottom:1px solid #666;}

/*footer*/
footer {width: 100%; background:#eee; margin-top:40px; padding:25px 15px 15px 15px; }
.footer-menu ul {padding-left:0; margin-bottom:0;}
.footer-menu ul li {list-style: none; font-size:0.9375rem; margin-bottom:7px; }
.footer-menu02 ul {padding-left:0; text-align: center; margin-bottom:0;}
.footer-menu02 ul li {display: inline-block; list-style: none; font-size:0.9375rem; margin-bottom:7px; }
.footer-menu a.link-footermenu:link{color: #666!important; }
.footer-menu a.link-footermenu:hover {color: #244798!important;}
.footer-menu a.link-footermenu:visited {color: #666;}
.footer-menu02 a.link-footermenu:link{color: #666!important;}
.footer-menu02 a.link-footermenu:hover {color: #244798!important;}
.footer-menu02 a.link-footermenu:visited {color: #666;}
input.input-ftsearch {border:1px solid #ddd; height:35px; color:#666!important; border-radius: 5px 0 0 5px!important; }
input.input-ftsearch:hover {background:#ddd; border:1px solid #ddd; height:35px; color:#666!important; }
button.btn-ftsearch {padding:.125rem 1rem; font-size:0.9375rem; background:#2789ea; border: 0px solid #2789ea; color:#fff;  height:35px; border-radius: 0 5px 5px 0; }
.ftsearch-wrapper {display:flex; flex-direction: column; align-items: end;}
.footer-copyright {color:#666; font-size:0.875rem; text-align:center;  margin-top:5px;}

.select-arrow {  position: absolute;top: 50%; right: 7px;width: 0; height: 0; pointer-events: none;  border-style: solid; border-color: #244798 transparent transparent;border-width: 6px 6px 0; margin-top: -4px;}
.select-wrapper { position: relative;}
.select-inline {display:flex;  align-items: center;}
.form-group {margin-bottom: 0.5rem!important;}
  

 /* Navigation */
nav {padding: 0;}
a {color: blue; text-decoration: none;}
.menu,.submenu {list-style-type: none;}
.logo {font-size: 20px;padding: 7.5px 10px 11px 0;}
.item {padding:5px 10px;}
.item.button {padding: 9px 5px;}
.item:not(.button) a:hover,.item a:hover::after {color: #244798;}
/* Mobile menu */

.logo img {width:120px;}
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  margin-bottom:5px;
}
.menu li a {
  display: block;
  padding: 5px 5px;
  cursor: pointer;
}
.menu li.subitem a {
  padding: 8px 20px;
  font-size: 0.9375rem;
  text-align:left;
  color:#333;
  font-weight:400;
}
.menu li.subitem a:hover {background: #d8ebfb; border-radius:5px; color:#244798!important;}
.toggle {
  order: 1;
  font-size: 20px;
}
.item.button {
  order: 2;
}
.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
  background:#f3f3f3;
  border-bottom:1px solid #ddd;
  font-weight: 500;
}
.button.secondary {
  /* divider between buttons and menu links */
  border-bottom: 1px #444 solid;
}
/* Submenu up from mobile screens */
.submenu {
  display: none;
}
.submenu-active .submenu {
  display: block;
  background:transparent;
  padding:10px 10px;
}
.has-submenu i {
  font-size: 12px;
}
.has-submenu > a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: #000;
  padding-left: 5px;
}
.subitem a {
  padding: 10px 15px;
}
.submenu-active {
  border-radius: 3px;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 2;
  }
  .item.button {
    width: auto;
    order: 1;
    display: block;
  }
  .toggle {
    flex: 1;
    text-align: right;
    order: 2;
  }
  /* Button up from tablet screen */
  .menu li.button a {
    padding: 10px 15px;
    margin: 5px 0;
  }
  .button a {
    background: #0080ff;
    border: 1px royalblue solid;
  }
  .button.secondary {
    border: 0;
  }
  .button.secondary a {
    background: transparent;
    border: 1px #0080ff solid;
  }
  .button a:hover {
    text-decoration: none;
  }
  .button:not(.secondary) a:hover {
    background: royalblue;
    border-color: darkblue;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    /*align-items: flex-start;*/
    flex-wrap: nowrap;
    background: none;
    width: 100%;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
    font-size: 1.125rem;
    font-weight:600;
  }
  .button { order: 2;}
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 50px;
    width:200px;
    background:#f3f3f3;
    padding: 0px;
    border-radius:5px;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
  .has-submenu:hover > .submenu {display:block;}
	.submenu {position:absolute; padding: 0; width: max-content; right: 0; border-bottom:3px solid #2789e9;  background: #f3f3f3;  border-radius:3px;z-index: 10;}
}



/*canlendar*/
.table1.table-month td {background: #f0f0f0; padding-bottom:1rem!important; width:12.3%}
.table1.table-month {background: #f0f0f0;  }
.table1 th.th-day {background: #2789e9; color: #fff; text-align: center;  border-left: 2px solid #2789e9; border-top: 2px solid #2789e9;font-size:15px; font-weight:500; letter-spacing: 1px; }
.table1 th.th-week {background:#244798; text-align: center; color:#fff; border-top: 2px solid #9caadc; border-right: 2px solid #9caadc; font-weight:600; letter-spacing: 1px;}
.table1 td.td-disable {background: #f3f3f3; text-align: center; color:#2789e9; border-radius:5px;  border: 3px solid #f3f3f3;  }
.table1 td.td-date{background:#fff; text-align: center; border-radius:5px;   border: 3px solid #f0f0f0; }
.table1 td.td-weekend{background:#fcedc5; text-align: center; border-radius:5px;   border: 3px solid #f0f0f0; }
.table1 td.td-week {background:#d0e6f9; text-align: center; border-radius:5px;   border: 3px solid #f0f0f0;}
.month-date {color:#7f898d; font-size: 13px; text-align: right; width: 100%;}
.month-date-weekend {color:#e30000; font-size: 13px; text-align: right; width: 100%;}
.date-total {display:inline-block; text-align: center;}
.date-total h3{color:#244798; font-size: 24px; margin:0;  }
.date-amount {color:#2789e9; font-size: 18px; font-weight: 600; letter-spacing: .5px;}
.td-weekend .month-date-weekend {color:#e30000; font-size: 13px; text-align: right; width: 100%;}
.month-date-week {color:#1429a0; font-size: 13px; text-align: right; width: 100%;}
.td-week .date-total h3 {color:#000; font-size: 24px; margin:0}
.td-week .date-total .date-amount {color:#fff; font-size: 18px; margin:0; font-weight: 600; letter-spacing: .5px;  }
.td-week .month-date {color:#1429a0; font-size: 20px; text-align: center; width: 100%;}
.table1.table-month td:hover{background:#e1f1ff;}
.month-date a {color:#7f898d;}
.month-date-weekend a {color:#e30000!important; }
.calendar-input .input-group-text {height:35px;}

/*landing*/
.subtitle {display: flex; justify-content: center; align-items: center; font-weight:500; color: #244798; margin-bottom:15px; font-size:25px; line-height:30px; text-align: center; font-family: 'Lexend Deca', sans-serif; min-height:65px;} 
.table-title { font-weight:500; color: #244798; margin-bottom:15px; font-size:25px; line-height:30px; font-family: 'Lexend Deca', sans-serif;} 
.chart-wrapper {text-align: center; width:100%; display:flex; align-items: center; flex-direction: column;}
.chart-wrapper img {width:100%; max-width:100%;}
.chart-color {width:100%; margin-top:1rem;}
.chart-color span { font-size:14px;  color:#666;}
.chart-color span i {font-size:12px;}
span.pto1 i {color: #2789e9;}
span.work1 i {color: #244798;}
.chart-color span:last-child {margin-right:0;}
.inquiry-title {width:50%; padding: 2rem 2.5rem 1.5rem 2.5rem; }
.my-inquiry { background: #efe7fc;  width:100%; padding: 1.5rem 2rem; border-top-right-radius:7px; border-bottom-right-radius:7px;}
.inquiry-title h3 {color: #1a2f80; font-family: 'Lexend Deca', sans-serif!important; font-size:2.75rem; line-height:1;} 
.menubg {background: url(../images/menubg.jpg);height: 80vh;background-size: cover;background-repeat: no-repeat; background-position: center center; justify-content:center; align-items:center; display:flex; }
.menulist-wrapper {width:85%; text-align: right; }
.menulist {width:350px; background:#fff; padding:3rem 2rem 2rem 2rem; border-top-left-radius:5rem; border-bottom-right-radius:5rem;  float: right;box-shadow: 6px 6px 10px 3px #0e1f53; border-bottom: 7px solid #5e79cf;}
.menulist ul li {line-height:1.75rem; font-weight:500;}

@media only screen and (min-width:768px) and (max-width:1650px){
  .page-title-left {width:40px!important; }
}


.UserType { display: none; }
.ScreenId { display: none; }