:root {
    --cl-red: #e93614;
    --cl-blue: #1b5ee2;
    --cl-green: #0aa34f;
    --bd-basic: #bfc4d1;
    --bd-btn: #163266;
    --bd-over: #5b93ff;
    --bt-basic: #204685;
    --bt-over: #3a7de8;
    --bt-light: #e5e6e9;
    --ht-logo: 50px;
}

body {font-family:'Noto Sans KR', sans-serif; background: #f3f3f3; overflow: hidden}

button {font-size: 12px; padding: 5px 10px; border-radius: 3px; border: none; cursor: pointer;}
button:hover { filter: brightness(0.9);}
input:read-only {background-color: #e1e5e9;}
input[type="text"], input[type="date"], select {border: 1px solid var(--bd-basic)}

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

.x-top {position: absolute; top: 0; right: 0; display:flex; height:40px; z-index: 100}
.x-top ul {position: relative;}
.x-top .config {position: absolute; top: 5px; right: 95px;}
.x-top .config button {border:1px solid var(--bd-basic); border-radius: 5px; background: #fff}
.x-top .logout {position: absolute; top: 5px; right: 15px;}
.x-top .logout button {border:1px solid var(--bd-basic); border-radius: 5px; background: #fff}
.x-space {flex:1}

.logo {width: 120px; height: 40px; margin: 0 auto; text-indent: -500px; background: url(../images/logo.png); background-size: auto 80px; overflow: hidden;} 
.excel {color: #fff; background: var(--cl-green);}
.x-search td button.excel {color: #fff; background: var(--cl-green);}


.x-menu {grid-column: 1 / 2; grid-row: 1 / 2; background:#1b2232; color:#fff; height: 100vh; line-height: 200%; font-size:0.875em;}
.x-menu ul {margin: 5px 10px; padding: 5px 10px; border-radius: 10px; background: #163266} 
.x-menu-top {height: 130px}
.x-menu-scr {height: calc(100vh - 120px); overflow-y: auto; padding: 0 0.5em; scrollbar-color: #475066 #1b2232; scrollbar-width: thin;}
.x-menu dl {margin: 10px; padding: 5px 0 10px; border-radius: 10px; background: #323846}
.x-menu dt {display: flex; align-items: center; column-gap: 3px; padding: 1px 5px; margin: 0 5px; border-radius: 5px; background: #202a3e}
.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: #6fceff; padding-left: 15px; border-left: 3px solid #5992ff; background: linear-gradient(to right, rgba(44, 64, 104, 1), rgba(44, 64, 104, 0));}
.x-menu .logo {width: 140px; height: 35px; background-position: 0 -35px; background-size: auto 70px; background-repeat: no-repeat;}

.x-content {grid-column: 2 / 3; grid-row: 1 / 2; height: 100vh; padding: 30px 25px; flex:1; background: #f3f3f3; overflow: auto; scrollbar-width: thin;}

.x-title {margin-bottom: 20px; font-size:1.25em; color: #242344; font-weight: 500}


.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 5px; white-space: nowrap; background: #eef2fb;}
.x-search th button {border-radius: 3px; font-size: 12px; border: 1px solid var(--bd-basic); padding: 2px 5px; margin-right: 4px; 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; white-space: nowrap;}
.x-search td select {min-width: 120px}
.x-search td button {font-size: 14px; padding: 2px 5px; border: none; border-radius: 3px; background: #dce2f2}
.x-search td button.sch {color: #fff; background: #5b93ff}

.x-grid {display: inline-block; min-width:100%; padding: 5px; border-radius: 5px; font-size:13px; background: #fff}
.x-grid table {width:100%; border-spacing: 2px; border-collapse: separate;}
.x-grid thead td {background-color: #eef2fb; color:#242344; text-align:center; padding: 5px 5px; font-size: 12px;}
.x-grid thead td span {display: block; margin: 0 auto}
.x-grid tbody td {height: 50px; padding: 5px; font-size: 12px; background: #f7f9fe;}
.x-grid tbody tr:nth-child(odd) td {background: #fcfdff;}
.x-grid tbody tr:hover td {background: #f0f5ff;}
.x-grid tbody tr:hover td.no-data {background: #f9fbff;}
.x-grid tbody td span {display: block; margin: 0 auto}

.x-grid .date {min-width: 60px;}
.x-grid .company {min-width: 180px;}

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

.x-grid div { word-break: keep-all}
.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-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: #5b93ff;}


.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-content {font-size: 16px; padding: 20px; display: flex; flex-direction: column; row-gap: 10px;}
.x-pop-content table {width: calc(100% - 2px); table-layout: fixed; border-spacing: 1px; border-collapse: separate; background:#ddd;}
.x-pop-content table th {padding:3px; font-size: .875em; text-align: center; font-weight: normal; background:#f8f8f8;}
.x-pop-content table td {padding:3px; font-size: .875em; padding: 5px 10px; background:#fff}
.x-pop-content .x-pop-top thead td { text-align: center; color:#242344; background:#e5ebf9;}
.x-pop-content .x-pop-top input, .x-pop-content .x-pop-top select {max-width: 100%; width: 100%; padding: 5px 10px;}
.x-pop-content .no-data { height: 90%; text-align: center; padding: 90px 0;}
.x-pop-content tfoot td {background:#e5ebf9}

.x-pop-content table.col4 {border-spacing:0; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.col4 tr {display: flex; border-bottom: 1px solid #ddd;}
.col4 th {width: 15%; border-right: 1px solid #eee;}
.col4 th:nth-child(3) {border-left: 1px solid #eee;}
.col4 td {width: 35%;}
.col4 td[colspan="3"] {width: 85%;}

.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%; }
.tbl-form textarea {width:100%; min-height:100px;}

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

.content iframe {width:100%; height:100% ; border:0px;}

.btnTop {margin-bottom: 5px}
.btnTop ul {display: flex; justify-content: space-between;}

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

input.x-fee {width:100%; min-width: 50px; 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 {font-size: 1em; font-family:'Noto Sans KR', sans-serif;}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:'Noto Sans KR', sans-serif;}
.ui-widget-overlay {background: #000; opacity: .4}
.ui-widget-content {border-color: #ddd;}

.ui-dialog-buttonset .ui-button, .ui-dialog-buttonset .ui-button.ui-state-disabled:hover, .ui-dialog-buttonset .ui-button.ui-state-disabled:active {color: #fff; background: var(--bt-basic);}


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

#footEl td {background-color: #eef2fb; height: 30px; padding: 5px 10px;}


.bg1 td{ font-weight: bold; background-color: #d8e2f8 !important; height: 30px !important;}
.bg2 td{ font-weight: bold; background-color: #e4ebfa !important; height: 30px !important;}
.bg3 td{ font-weight: bold; background-color: #eef2fb !important; height: 30px !important;}
.bg2 td:nth-child(2){ padding-left: 5px !important}
.bg3 td:nth-child(2){ padding-left: 20px !important}

.subtitle {background-color:#eee; font-weight: bold; padding-left: 10px;margin-top: 10px;}

.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에서 순서 변경 */
  }