@charset "UTF-8";

/** Front style define **/

/* Layout */
.wrapper {width: 100%; min-width: 1280px; display: flex; justify-content: flex-start;}

.logo-header {position: absolute; top: 0; left: 0; width: 250px; height: 58px; padding: 0 22px 0 24px; border-bottom: 1px solid #5c696e; display: flex; justify-content: space-between; align-items: center; background-color: #0080ff;}
.logo-header h1 {margin: 0 0; font-size: 14px;}
.logo-header .ri-menu-fill {color: #fff; font-size: 1.5em;}

.aside {flex: 0 1 240px; background-color: #3b4a51; margin-top: 58px; transform:translateX(0); }
.aside h1 {margin: 0 0; padding-left: 24px; height: 58px; line-height: 58px; border-bottom: 1px solid #5c696e;}
.aside.close {width: 70px; transform:translateX(0); flex: 0 1 70px; opacity: 1 !important; text-shadow: none; font-weight: 400; z-index: 100; float: none;}
.aside.close:hover {width: 60px !important; border: 0 !important; padding: 0 !important; text-shadow: none;}

.main-section {display: flex; width: calc(100% - 240px); flex: 0 1 calc(100% - 240px); flex-direction: column; min-height: 100vh; padding: 0 13px 0 13px; background-color: #f9fafc;}
.aside-fold .main-section {flex: 0 1 100%; margin-left: 0;}
.page-header {height: 58px; margin: 0 -13px; background: #0080ff; box-shadow: 0 2px 2px #f2f4f6; align-items: center;}
.page-header .search-box {display: flex; flex: 0 1 30%; height: 58px; padding-left: 30px; align-items: center;}
.aside-fold .page-header  {margin-left: 160px; }
.page-header .form-control {display: inline-block; width: calc(100% - 24px); border-color: #fff;}
.page-header .form-control::placeholder {color: #a2abb4;}
.page-header .user-function {height: 58px; padding-right: 30px; line-height: 58px;}
.page-header .user-function .user-name {font-size: 14px; color: #a2abb4;}
.page-header .user-function button {border: 0; margin: 0 0 0 12px; padding: 0 0; background: transparent; vertical-align: middle; color: #7e7e7e;}
.page-header .user-function button.user {width: 22px; height: 22px; border: 2px solid #7e7e7e; border-radius: 100%;}
.page-header .user-function button.user .ri-lg {font-size: 1.2em; line-height: 1;}
.page-header .user-function button i {line-height: 1; color: #7e7e7e;}

.contents {padding-top: 30px; padding-bottom: 30px;}

/*.footer {margin-top: auto; margin-left: -13px; margin-right: -13px; padding-left: 32px; line-height: 50px; border-top: 1px solid #e0e1e1; color: #889296;}*/
.footer {margin-top: auto; margin-left: -13px; padding-left: 32px; line-height: 50px; border-top: 1px solid #e0e1e1; color: #889296;}

.navigation {margin-top: 20px;}
.navigation > li {padding: 0 0;}
.navigation > li > ul {display: none; margin-top: 4px; padding-left: 24px; padding-top: 0; padding-bottom: 12px; color:black;}
.navigation > li > a {display: block; height: 40px; border-left: 4px solid #3b4a51; line-height: 40px; padding: 0 0 0 20px; color: black; font-size: 13px;}
.navigation > li:hover > a,
/*.navigation > li > a.active {color: #ffa49f; border-left: 4px solid #ffa49f; text-decoration: none;}*/
.navigation > li > a.active {color: #007e45; border-left: 4px solid #007e45; text-decoration: none;}
.navigation > li > ul {background: #f0f0f0; color:black}
.navigation > li > ul li a {padding-left: 16px; display: block; line-height: 24px; font-size: 13px; color: black;}
.navigation a i {display: inline-block; vertical-align: top; margin-top: 14px; font-size: 17px;}

.aside.close .navigation li a {font-size: 0;}

.aside .navigation > li.open {width: 239px; background: #f0f0f0;}
.aside .navigation > li.open > a {font-size: 13px; white-space: nowrap;}
.aside .navigation > li.open > a + ul {display: block;}
.aside .navigation > li.open > a + ul li a {font-size: 13px;}

/* Contents */
.app-state {margin-bottom: 24px;}
.app-state .con-box {flex: 0 1 calc(33% - 15px);}
.app-state .con-box .title {font-size: 14px; font-weight: 700;}
.app-state .con-box .link {float: right; color: #4b55c8;}
.app-state .con-box .foot {line-height: 36px; border-top: 1px solid #eeeeee; margin: 0 -1.5rem; padding: 0 1.5rem; font-size: 13px; color: #637585;}

.list-section {display: flex; justify-content: space-between; flex-wrap: wrap;}
.list-section .list-box {position: relative; flex: 0 1 calc(50% - 15px); margin-bottom: 24px;}
.list-section .list-box .link {position: absolute; top: 24px; right: 24px; color: #4b55c8;}

.section-title {margin: 0 0 30px 0; margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); font-size: 20px; color: #121212;}
.modal-body .section-title {margin-bottom: 10px;}
.list-box {padding: 0 0 0 0;}
.list-box h3 {height: 60px; padding: 0 30px; line-height: 60px; border-bottom: 1px solid #cfcfcf; font-size: 1.7rem; color: #121212;}
.list-box table {margin: 0 0 24px 0;}
.section-title i,
.list-box h3 i {border: 2px solid #b9b9b9; margin-left: 20px; border-radius: 100%; color: #b9b9b9;}
.table + .section-title {margin-top: 24px;}

.badge {width: 100%; line-height: 24px; text-transform: uppercase; font-weight: 400; color: #fff;}

.page-heading h2,
.page-heading nav {flex: 0 1 auto; width: auto; margin: 0 0; padding: 0 0;}
.page-heading nav a {color: #8e8e8e;}

.head-info-box {margin: 0 0; padding: 0 0; border-bottom: 1px solid #cfcfcf;}

.datepicker td, .datepicker th {font-size: 12px;}

.date-pick {width: 136px; border: 1px solid #ced4da; border-radius: .25rem; padding: 0 10px 0 0;}
.date-pick .form-control {display: inline-block; vertical-align: top; border: 0; width: 108px; height: 32px; font-size: 13px;}
.date-pick label {display: inline-block; vertical-align: top; height: 32px; padding-top: 8px;}

/*.modal-title {font-size: 24px; color: #121212; font-weight: 700;}*/
.modal-title {font-size: 13pt; color: #fff; font-weight: 700;}
.modal-footer {justify-content: center}
.modal-footer .btn.btn-primary {background-color: #007E45; border-color: #006537;}

.modal-footer .btn.btn-dark {background: #2a2b2c;}
.modal-footer .btn.btn-outline-dark {background: white; color: #007e45; border-color: #006537;}
.modal-footer .btn.btn-outline-dark:hover { background-color: #d9e0e4; border-color: #006537;}
.modal-header {background:#0080ff; color:white;}
.modal-header .close {opacity: 1;}
.modal-header .close span {color: #fff; opacity: 1; font-size:1.5rem;}

.bg-body {background: #fff;}

.btn {min-width: 100px; height: 32px; padding: 4px .75rem; line-height: 20px;}
 .btn:hover {background: #006537;color: white;border: 1px #002716 solid;}
.btn:active {background: #006537!important;color: white;border: #002716!important;}
.btn-primary {background-color: #007E45; border-color: #006537;}
.btn-outline-dark {background-color: white; border-color: #006537; color:#007e45}
.btn-outline-dark:hover {background-color: #d9e0e4; border-color: #005995; color:#006537}


a.download {display: inline-block; margin: 0 4px; color: #000;}
a.edit {display: inline-block; margin: 0 4px; color: #5664d2;}
a.trash {display: inline-block; margin: 0 4px; color: #ff3d60;}

.table td, .table th {padding: 0.3rem;vertical-align: middle;}
.table tr:first-child th {border-top: 0;}

table.table-data th {font-weight: 400; background: #335c6d; color:white;}

.pagination-nav {padding: 12px 0;}
.page-link {border: 0; width: 36px; height: 36px; padding: .5rem 0; text-align: center; color: #000; margin: 0 0;}
.page-item.prev {margin-right: 16px;}
.page-item.next {margin-left: 16px;}
.prev .page-link,
.next .page-link {width: auto;}
.page-item .page-link,
.page-item.active .page-link {border-radius: 100%;}
.page-item.prev .page-link:hover,
.page-item.next .page-link:hover {background: transparent;}

.breadcrumb {background: transparent; margin-bottom: 0;}
.breadcrumb-item,
.breadcrumb-item a {font-size: 13px; color: #999;}
.breadcrumb-item a i {margin-right: 6px; color: #000000; vertical-align: -0.16em;}
.breadcrumb-item a:hover {text-decoration: none;}
.breadcrumb-item+.breadcrumb-item::before {content: "＞"; font-family: serif; font-size: 12px; color: #a2a2a2;}

.row {margin-left: 0; margin-right: 0;}

.fs-1 {font-size: 2.5rem;}
.fs-13 {font-size: 13px !important;}
.fs-12 {font-size: 12px !important;}
.fs-11 {font-size: 11px !important;}
.fs-pt-13 {font-size: 13pt !important;}

.table-scroll {height: 196px; overflow: hidden; overflow-y: auto;}
.table-scroll-y {overflow: hidden; overflow-x: auto;}
.table-scroll-y .table {width: 150%;}
.table-success td {font-weight: 700;}

.table {font-size: 13px;}

.modal-body {font-size: 14px;}
.form-control {font-size: 14px; height: 32px; padding: 8px 6px; letter-spacing: 0px;}
select.form-control {padding: 2px 12px;}
.modal-body label.col-auto {min-width: 140px;}

.custom-file-input:lang(en)~.custom-file-label::after {content: "Select File";}

.alert {margin: 4px 0 0 0; padding: 4px 8px; line-height: 1.1;}

button.add-row {border: 0; margin: 0 0; padding: 0 0;}

#attach-list li {margin-bottom: 8px;} 

.overflow-scroll {overflow: auto; height: 280px;}
.overflow-scroll table {width: 200%;}

/* Login */
.login-section {position: relative; z-index: 100; width: 1100px; height: 600px; margin: 0 auto 0 auto; box-shadow: 8px 12px 24px #d0d6dc;background-color:#000;}
.login-section .login-area-left{width:60%;height:100%;float:left;}
.login-section .login-area-right{width:40%;height:100%;float:right;text-align:right;}
.login-section .login-form {display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 353px; margin: 0 0 0 0; padding-top: 40px; padding-left:45px; background-color: #000;}
.login-section .login-logo {margin: 0 0; font-size:50px; color:#fff; text-align:left; padding-top:100px; font-weight:900;}
.login-fieldset {padding: 0 60px 0 0; margin-top: 40px; width:60%;}
.login-fieldset .form-control {height: 34px; border: 1px solid #e2e5ed; border-radius: 2px; padding-left: 32px;}
.login-fieldset .form-control::placeholder {color: #999;}
.login-fieldset .form-check-input {border-radius: 0; border: 2px solid #b2006d; border-radius: 2px;}
.login-fieldset button[type="submit"].btn-primary {width: 200px; height: 40px; margin-top: 24px; background-color: #3b4a51; border-color: #3b4a51;}
.login-section .foot-copy {margin-top: 28px; padding-bottom: 0; text-align: right; font-size: 12px; color: #889296;}
.login-section i {color: #b2b2b2; position: absolute; left: 12px;}
.login-section label {padding-bottom: 6px; color: #666; font-size: 13px;}

/* Password Change */
.password-section {position: relative; z-index: 100; width: 600px; height: 453px; margin: 0 auto 0 auto;}
.password-section .login-form {display: flex; flex-direction: column; justify-content: flex-start; width: 624px; height: 453px; margin: 0 0 0 0; padding-top: 40px; padding-left: 45px; background-color: #fff;}
.password-section .login-form h1 {margin: 0 0; text-align: left;}
.password-fieldset {padding: 0 60px 0 0; margin-top: 40px;}
.password-fieldset .form-control {height: 34px; border: 1px solid #e2e5ed; border-radius: 2px; padding-left: 32px;}
.password-fieldset .form-control::placeholder {color: #999;}
.password-fieldset .form-check-input {border-radius: 0; border: 2px solid #b2006d; border-radius: 2px;}
.password-fieldset button[type="submit"].btn-primary {width: 200px; height: 40px; margin-top: 24px; background-color: #3b4a51; border-color: #3b4a51;}
.password-section .foot-copy {margin-top: 28px; padding-bottom: 0; text-align: right; font-size: 12px; color: #889296;}
.password-sectioni {color: #b2b2b2; position: absolute; left: 12px;}
.password-section label {padding-bottom: 6px; color: #666; font-size: 13px;}

.wrapper.login-wrapper {height: 100vh; justify-content: center; align-items: center;}

.language-change {margin-left: auto; margin-right: 16px; font-size: 14px;}
.language-change img {width: 16px; vertical-align: -0.1em; border: 1px solid #ccc; border-radius: 100%;}
.language-change a {padding-left: 12px;}

@media screen and (max-width: 1024px) {
  /*.wrapper.login-wrapper {min-width: 100%;}*/
   .wrapper.login-wrapper {min-width: 1100px;}
  .small-logo {display: block; width: auto; margin: 99px auto 0 auto; padding-left: 0;}
  /*.login-section { overflow: hidden; max-width: 640px; padding: 40px; height: 453px; margin: 22px auto 0 auto; background: #fff; border-radius: 26px; box-shadow: 8px 12px 24px #d0d6dc;}*/
  /*.login-section { overflow: hidden; max-width: 1100px; padding: 40px; height: 600px; margin: 22px auto 0 auto; background: #fff; border-radius: 26px; box-shadow: 8px 12px 24px #d0d6dc;}  */ 
  /*.login-section .login-form {padding: 0 0;}*/
}

/*@media screen and (max-width: 480px) {
  .login-section {margin: 0 24px; padding: 24px;}
  .login-section .login-form {width: 100%; height: auto;}
  .login-section .login-form .login-fieldset {margin-top: 24px; padding: 0 0;}
  .login-section .foot-copy {margin: 24px -12px 0 -12px; text-align: center;}
}*/


tr.gridViewPager td {background: #fff; border-top: 0;}
tr.gridViewPager td table {float: right;}
tr.gridViewPager td table tr td {padding: 0 0;}
tr.gridViewPager td table tr td a {display: inline-block; width: 36px; height: 36px; color: #fff; padding: 0 0; border-radius: 100%; text-align: center;  color: #000;  margin: 0 0; font-size: 16px; line-height: 36px;}
tr.gridViewPager td table tr td span {display: inline-block; width: 36px; height: 36px; color: #fff; border-radius: 100%; text-align: center; background-color: #007E45; font-size: 16px; line-height: 36px;}
tr.gridViewPager td table tr td a:hover {background: #f1f1f1; text-decoration: none;}