:root {
    --cl-red: #e93614;
    --cl-blue: #1b5ee2;
    --cl-green: #14b431;
    --bg-basic: #f4efe2;
    --bd-basic: #bfc4d1;
    --bd-btn: #0e6c34;
    --bd-over: #f8771d;
    --bt-basic: #1c7c40;
    --bt-over: #f9812b;
    --bt-light: #e5e6e9;
    --bt-emp: #f8771d;
    --ht-logo: 50px;
    --menu-bg: #145229;
    --menu-top: #098027;
    --menu-box: #1a6735;
    --menu-box-top: #084a1f;
    --search-th: #ede5d2;
    --list-th: #f4edde;
    --list-td: #f9f5eb;
}

body {font-family:'Noto Sans KR', sans-serif; overflow: hidden}
button {font-size: 12px; padding: 5px 10px; border-radius: 3px; border: none; cursor: pointer;}
button:hover { filter: brightness(0.9);}
input[type="text"], input[type="date"], select {border: 1px solid var(--bd-basic)}

.modal-body {max-height: 75%; overflow: auto;}
.modal-body img {max-width: 645px;}
.table {width: 100%}

.x-wrap { display: grid; grid-template-columns: 210px auto; grid-template-rows: auto}

.x-top {position: absolute; top: 0; right: 0; height:40px; z-index: 100}
.x-top ul {position: relative}
.x-top li {position: absolute; top: 5px; right: 15px; display: flex; align-items: center; column-gap: 5px;}
.x-top button {border:1px solid var(--bd-basic); border-radius: 5px; white-space:nowrap; background: #fff}
.pc .x-top .mob {display: flex}
.mobile .x-top .mob {display: flex}

.x-space {flex:1}

.logo {position: absolute; top: 10px; left: 30px; width: 160px; height: 35px; margin: 0 auto; text-indent: -500px; background-image: url(../images/pw_logo.png); background-position: center -35px; background-size: auto 70px; background-repeat: no-repeat; overflow: hidden;} 

.x-menu {grid-column: 1 / 2; grid-row: 1 / 2; padding-top: var(--ht-logo); background:var(--menu-bg); color:#fff; height: 100vh; line-height: 200%; font-size:0.875em;}
.x-menu ul {margin: 5px 10px; padding: 5px 10px; border-radius: 10px; background: var(--menu-top);} 
.x-menu-top {height: auto}
.x-menu-scr {height: calc(100vh - 120px); overflow-y: auto; padding: 0; scrollbar-color: #475066 var(--menu-bg); scrollbar-width: thin;}
.x-menu dl {margin: 10px; padding: 5px 0 10px; border-radius: 10px; background: var(--menu-box);}
.x-menu dt {display: flex; align-items: center; column-gap: 3px; padding: 1px 5px; margin: 0 5px; border-radius: 5px; background: var(--menu-box-top)}
.x-menu dt::before {content: ''; width: 25px; height: 25px; background-image: url("../images/icon.png"); background-repeat: no-repeat; background-size: auto 50px}
.x-menu dl.pay dt::before {background-position: 0 0}
.x-menu dl.adj dt::before {background-position: -25px 0}
.x-menu dl.cp dt::before {background-position: -50px 0}
.x-menu dl.mc dt::before {background-position: -75px 0}
.x-menu dl.tml dt::before {background-position: 0 -25px}
.x-menu dl.etc dt::before {background-position: -25px -25px}
.x-menu dd {display: flex; flex-direction: column; padding: 0;}
.x-menu dd a {padding-left: 18px; display:flex; }
.x-menu dd a > a {color:red;}
.x-menu dd a.on {color: #ff9000; padding-left: 15px; border-left: 3px solid #ff6307; background: linear-gradient(to right, rgba(20, 70, 35, 1), rgba(20, 70, 35, 0));}


.x-content {grid-column: 2 / 3; grid-row: 1 / 2; padding: 30px 25px; flex:1; background: var(--bg-basic); overflow: auto; scrollbar-width: thin;}

.x-title {margin-bottom: 20px; font-size:1.25em; color: #242344; font-weight: 500}
.x-form table {margin: 0 auto}
.x-grid, .x-search {box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.02);}

.x-content .div-form {height: calc(100vh - 150px); overflow: auto}


.x-search {display: inline-block; min-width: 100%; margin-bottom: 20px; padding: 1px; border-radius: 5px; font-size:15px; background: #fff}
.x-search table {width: 100%; border-spacing: 2px; border-collapse: separate;}
.x-search th {font-size: .875em; font-weight: normal; text-align: center; padding: 3px 0; background: var(--search-th); white-space: nowrap;}
.x-search th button {border-radius: 3px; font-size: 12px; border: 1px solid var(--bd-basic); padding: 2px 5px; background: #fff}
.x-search th button.on {color: #fff; border: 1px solid var(--bd-over); background: var(--bt-over)}
.x-search td {text-align: center; font-size: .875em; padding: 5px 0 4px}
.x-search td select {min-width: 120px; font-size: 14px; padding: 2px 5px; border: 1px solid var(--bd-basic); border-radius: 3px}
.x-search td button {font-size: 14px; padding: 2px 5px; border: 1px solid var(--bd-basic); border-radius: 3px; background: var(--bt-light)}
.x-search td button.sch {color: #fff; border: 1px solid var(--bd-btn); background: var(--bt-basic)}
.x-search input {font-size: 14px; padding: 2px 5px; border: 1px solid var(--bd-basic); border-radius: 3px}

.x-grid {min-width:100%; max-height: calc(100vh - 310px); padding: 1px; border-radius: 5px; font-size:13px; background: #fff; overflow: auto; scrollbar-width: thin}
.x-grid table {width:100%; border-spacing: 2px; border-collapse: separate;}
/* .x-grid thead {position: sticky; top: 0;} */
.x-grid thead {position: sticky; top: -1px; text-align: right;}
.x-grid thead td {background-color:  var(--list-th); color:#242344; text-align:center; padding: 5px 5px}
.x-grid thead td span {display: block; margin: 0 auto}
.x-grid tbody td {background: var(--list-td); padding: 5px 10px; word-break: keep-all; white-space: nowrap;}
.x-grid tbody tr:hover td {background: #e8f0e9;}
.x-grid tbody tr:hover td.no-data {background: #e8f0e9;}
.x-grid tbody td span {display: block; margin: 0 auto;}
.x-grid tfoot {position: sticky; bottom: -1px; text-align: right;}

.x-grid .no-data {height: 300px; text-align:center; color:#4d4949;}

.x-grid div { word-break: keep-all; max-height: 60px;}
.x-grid div.cc {text-align:center;}
.x-grid div.rr {text-align:right;}
.x-grid div.rr.mc {margin: 0 auto; width: 70%;}
.x-grid div.df {display: flex}
.x-grid div.df.cc {justify-content: center}
.x-grid div.cg5 {column-gap: 5px}
.x-grid td button {padding: 2px 5px; border: 1px solid #bfc4d1; border-radius: 5px; background: #fff}
.x-grid tr{height: 40px}
.x-grid:has(td[rowspan="2"]) thead tr { height:25px; }

.x-pagenav {display:flex; justify-content :center; column-gap: 5px; padding:10px; font-size: .875em}
.x-pagenav button {margin:1px; min-width:30px; height: 30px; border: none; background: #fff;}
.x-pagenav button.on {border: none; border-radius: 5px; color: #fff; background: var(--bt-over);}


.red {color:var(--cl-red);}
.blue {color:var(--cl-blue);}
.b-red {border: none; background:var(--cl-red); color:white}
.b-green {border: none; background:var(--cl-green); color:white}

.x-pop table {width:100%; table-layout: fixed; border-spacing: 1px; border-collapse: separate; background:#eee;}
.x-pop table td {padding:3px; background:#fff}
.x-pop table th {background:#eff4ff; color:#242344; text-align: left; font-weight: normal;}
.x-pop thead td {background:#eff4ff; color:#fff; text-align: center; font-weight: normal;}
.x-pop hr {margin: 10px 0; }

.tbl-form {width:100%; table-layout: fixed; border-spacing: 1px; border-collapse: separate; background:#eee;}
.tbl-form th {background:#f8f8f8; font-size: 14px; font-weight: normal;}
.tbl-form td {background:#fff; padding:3px;}
.tbl-form input[type=text] {width:100%; border: none; background-color: transparent;}
.tbl-form textarea {width:100%; min-height:100px;}

.btnArea {text-align: center; margin-top:3px; padding:5px;}
.btnArea button {height:30px; margin:1px 0; color: #fff; background: var(--bt-basic);}

.content iframe {width:100%; height:calc(100% - 40px); border:0px;}

.btnTop {margin-bottom: 5px}

small {font-size:0.7rem; color:#6b6b6b;}

input.x-fee {width:100%;padding-right:3px;text-align:right;}

#pop1 .footer {text-align: center}
#pop1 iframe .x-wrap {display: block}

/* dialog */
.ui-dialog {padding: 1px}
.ui-dialog .ui-widget-header {color: #fff; background: #041e49}
.ui-dialog .ui-dialog-content {padding: 0}

.ui-widget-overlay {background: #000; opacity: .4}

/* alertify */
.alertify .ajs-header {padding: 8px 24px; border: 4px solid #fff; background-color:#eff4ff}

.openPanel {display: none;}

#footEl td {background-color: var(--list-th); height: 30px;}

.x-grid tbody .bul::before {content: '└'; margin-right: 5px}
.x-grid tbody .bg1 td { font-weight: bold; background-color: #e4ddca; height: 30px;}
.x-grid tbody .bg2 td { font-weight: bold; background-color: #f0e8d5; height: 30px;}
.x-grid tbody .bg2 td:nth-child(2){ padding-left: 5px !important}
.x-grid tbody .bg3 td { font-weight: bold; background-color: #f8f2e2; height: 30px;}
.x-grid tbody .bg3 td .bul {padding-left: 15px}
.x-grid tbody .bg3 td:nth-child(2){ padding-left: 20px !important}


/* simple */
.receipt-form-wrap {width: min(100%, 420px); height: 100%; margin: 0 auto; padding: 10px}
.receipt-form-wrap h3 {height: 30px; font-weight: bold; font-size: 1.125em; margin-bottom: 10px}
.receipt-form {height: auto; padding: 20px 0 50px; font-size: .875em; background: #fff}
.receipt-form table {width: calc(100% - 40px); margin: 0 20px; }
.receipt-form tbody {padding: 10px}
.receipt-form tr {display: flex; justify-content: space-between; margin-bottom: 4px}
.receipt-form th {text-align: left}
.receipt-form .list-title {margin-bottom: 10px}
.receipt-form .list-line {position: relative; height: 20px; margin-bottom: 20px; border-bottom: 1px dashed #dcdcdc}
.receipt-form .list-line::before {content: ''; position: absolute; top: 9px; left: -10px; display: block; width: 20px; height: 20px; border-radius: 50%; background: #eaeaea}
.receipt-form .list-line::after {content: ''; position: absolute; top: 9px; right: -10px; display: block; width: 20px; height: 20px; border-radius: 50%; background: #eaeaea}
.receipt-form .list-th {text-align: center}
.receipt-form .list-td {text-align: right}

.tbl-form th {color: #fff; background: #163266; }

.payment-form-wrap {width: 100%; height: 100%;  padding: 0 25px; background: #fff;}
.payment-top {display: flex; justify-content: flex-start; align-items: center; height: 50px;}
.payment-form {width: 100%; height: calc(100% - 110px); padding-top: 10px;}
.payment-form tr {display: flex; flex-direction: column; margin-bottom: 10px;}
.payment-form .list-th {text-align: left; font-size: .875em; color: #787779; margin-bottom: 5px;}
.payment-form .list-td {text-align: left;}
.payment-form input {width: 100%; border-radius: 5px; padding: 6px 10px;}
.payment-form select {min-width: 25%; border-radius: 5px; padding: 6px 10px; background-color: #fff;}

.btn-default {width: 100%; color: #fff; font-size: 16px; border-radius: 5px; padding: 5px 10px; background: var(--bt-over)}

.x-form {max-width: 420px; height: auto; padding-bottom: 50px;}
.x-form .payment-form {height: auto;}

@media only screen and (max-width:992px) {
    .payment-top {height: 40px;}
    .payment-form {height: auto; padding-top: 0}
    .btn-default {height: 40px;}
}
.tbl-header {background: var(--menu-box-top)}

/* login */
.loginWrap {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #ede5d2;}
.loginWrap .logo {width: 180px; height: 45px; position: static; background-position: center 0; background-size: auto 90px}

.active {color: white; background-color: #4CAF50; }

.loginBox {width:500px; margin:10px auto; border:1px solid #eee; border-radius:10px; padding:30px; background: #fff}
.loginBox h3 {margin: 0 auto; text-align: center; font-size: 1.5em;}
.loginBox table { width:100%;}
.loginBox ul { padding:10px;}
.loginBox ul li {margin-bottom: 10px;}
.loginBox ul label {display: block; font-size: .75em; z-index: 10;}
.loginBox input {width:100%; padding:5px; border: none; border-bottom: 1px solid #ccc;}
.loginBox button {width:100%; height: 50px; padding:7px; border: none; border-radius: 5px; font-size: 1.125em; color: #fff; background: var(--bt-emp);}

@media only screen and (max-width:576px) {
    .loginBox {width: 80%; height: 80vw;}
    .loginWrap .logo {width: 120px;}
}

/* pop */
#pop .div-form {display: flex; flex-wrap: wrap; gap: 20px}
#pop .div-form > div {width: calc(50% - 10px); min-width: 720px; background: #fff}
#pop .div-form > div {width: 100%;  border: 1px solid var(--bd-basic)}
#pop .div-form table {margin-bottom:10px; width: calc(100% - 30px); margin: 0 15px}
#pop .div-form td {padding:3px; height:30px; font-size: .875em;}
#pop .div-form td span {color: var(--cl-red);}
#pop .div-form input, 
#pop .div-form select, 
#pop .div-form option {padding:5px; width:100%;}
#pop .div-form input[type='radio'],
#pop .div-form input[type='checkbox'] {width:auto;}
#pop .div-form button {padding:5px; min-width:120px; border: 1px solid #ddd; background: #eee;}

#pop .tbl-header {background: #041e49; color:#fff; font-weight: bold; padding: 5px 8px; margin-bottom: 10px}

#pop .btnArea {clear:both; text-align:center; padding:10px;}
#pop .btnArea button {height: auto; padding:5px; min-width:150px; font-size: 16px; color: #fff; border: none; border-radius: 5px; background: var(--bt-emp);}
#pop .btnArea button:last-child { background: var(--bt-basic);}
#pop .btnArea button.pop{display:inline}

#pop iframe {width:100%; height:calc(100% - 40px); border:0px;}

#pop .x-search { border: 1px solid var(--bd-basic)}
#pop .x-grid {padding: 1px; border: 1px solid var(--bd-basic)}

#pop .tbl-header {background: #879bcb}

#pop tr.reg {display:none}
#pop tr.edit {display:table-row}


/* mobile */
@media only screen and (max-width:768px) {
    .x-menu {position: fixed; top: 0; left: -250px;}   
}

@media only screen and (max-width:992px) {
    body {overflow: hidden; background-color: var(--bg-basic);}
    #wrap { overflow: auto}
    header {position: relative; width: 100%; height: 40px; background: var(--bg-basic);}
    .x-wrap {display: block; width: 100%; height: calc(100% - 40px); overflow: auto}
    .x-menu {position: fixed; top: 0; left: -200px; width: 240px; border-radius: 5px;}
    .logo { position: sticky; top: 5px; left: 50px; width: 120px; height: 30px; margin: 0; background-position: 0 0; background-size: auto 60px;}
    .x-top button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; padding: 0; text-indent: -100px; border: none; background-color: transparent; overflow: hidden;}
    .x-top button::after {content: ''; width: 30px; height: 30px; background-image: url("../images/btn.png"); background-size: auto 60px;}
    .x-top button.logout::after {background-position: 0 0;}
    .x-top button.mob {display: flex} 
    .x-top button.mob::after {background-position: -30px 0;}

    .x-content {width: calc(100% - 40px); margin: 0 0 0 40px; padding: 0 10px; border-radius: 0; overflow: visible;}
    .x-search {display: block;}
    .x-search table {display: flex; align-items: center; border-radius: 5px; flex-direction: column; background-color: #eef2fb;}
    .x-search thead th {display: none;}
    .x-search thead th.blc {display: block; }
    .x-search th button {height: 24px; margin-right: 0;}
    .x-search tbody tr {display: flex; column-gap: 5px; flex-wrap: wrap;}
    .x-search td select {min-width: 64px;}
    .x-search input {max-width: 110px;}
    .x-grid {display: block; width: 100%; height: auto; padding: 0; max-height: none; overflow-y: visible; overflow-x: auto;}
    .x-grid input[type="text"], .x-grid input[type="date"], .x-grid select {max-width: 92px; height: 24px;}
    .x-title {position: sticky; left: 0px; margin-bottom: 10px;}

    .openPanel {display:flex; position:fixed; top:0; left: 0; width:40px; height:40px; justify-content: center; align-items: center; z-index:50}
	.openPanel ul {position:relative; width: 30px; height: 30px;}
	.openPanel ul li {position:absolute; width:26px; height:2px; border-radius:2px; background: #b7987a}
	.openPanel ul li:nth-child(1) {top:6px; right:2px}
	.openPanel ul li:nth-child(2) {top:14px; right:2px}
	.openPanel ul li:nth-child(3) {top:22px; right:2px}

    body.open {overflow: hidden;}
    body.open .x-wrap::after {content: ''; position: fixed; top: 0; left: 0; width: 100%; height:100vh; background-color:rgba(0,0,0,.4); z-index:1;}
    body.open .openPanel ul li {width:30px; background: #90e7f2}
    body.open .openPanel ul li:nth-child(1) {top:11px; right:0; transform:rotate(45deg); transition:ease .3s;}
	body.open .openPanel ul li:nth-child(2) {top:11px; right:0; opacity:0; transition:ease .3s;}
	body.open .openPanel ul li:nth-child(3) {top:11px; right:0; transform:rotate(-45deg); transition:ease .3s;}
    body.open .logo {background-position: 0 -30px; z-index: 50;}
    body.open .x-menu {left: 0; z-index: 10;}

    .hwm{display:none !important}   

}

@media only screen and (max-width:576px){
    .x-menu {left: -300px;}
    .x-content {width: calc(100% - 10px); margin: 0 5px; padding: 0;}
}

/* 세로 모드 */
@media (orientation: portrait) {
    body { background-color: var(--bg-basic); }
    .x-search tr {justify-content: center;}
    .x-search td.date {width: 100%;}
  }
  
  /* 가로 모드 */
  @media (orientation: landscape) {
    body {
      background-color: var(--bg-basic);
    }
  }
  
  .selected-options {
    margin-right: 5px;
  }
  
  .dropdown-toggle {
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
  }
  
  .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border: 1px solid black;
  }
  
  .dropdown-menu.show {
    display: block;
  }
  
  .dropdown-item label {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 3px 20px; /* 내부 여백 */
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
  }
  
  .dropdown-item label:hover{
      background: #4873e6;
      color: #ffffff;
  }
  
  /* 체크박스를 왼쪽으로 정렬 */
  .dropdown-item label input[type="checkbox"] {
    margin-right: 5px; /* 체크박스와 텍스트 사이의 간격 */
    order: -1; /* Flexbox에서 순서 변경 */
  }