.layout-wrap, .main-wrap{width: 100%; height: 100%;}
.main-wrap{display: flex; justify-content: center; align-items: center;}
.container {
    width: 95%;
    height: 90%;    
}
.container-box {  
    width: 100%;
    height: inherit;
    position: relative;
}

.content-wrap {
    height: calc(100% - 60px);
}

.page-titleZone {
    border-bottom: 2px solid var(--titleborder);

}

.main-title {
    font-size: 2.2rem;
    color: var(--mainblue);
    font-weight: 700;
}

.content-box {
    width: 100%;
    border: 1px solid var(--boxborder);
    border-radius: 10px;
}


.content-title {
    font-size: 1.7rem;
    font-weight: 700;

}

.select-wrap {
    border-bottom: 2px solid var(--boxborder);
    flex-wrap: nowrap;
}

.select-box {
    flex-wrap: nowrap;

}
.select-box-pop {
    width: 100%;

}
.select-box input {
    /* padding: 7.5px; */
    vertical-align: middle;
}

.select-box label {
    /* font-weight: 600; */
    font-size: 1.3rem;
}

.table-box select {
    width: 100%;
    border: 0px;
}

.select-boxTitle {
    font-size: 1.5rem;
    font-weight: 600;
    word-break: keep-all;
    color: var(--mainblue);
}
.select-boxTitle:first-child{margin-left: 0;}
/* 저장,조회,삭제 버튼 */

.shortcut-btn button {
    font-size: 1.3rem;
    font-weight: 600;
    border: 1px solid var(--mainblue);
    border-radius: 20px;
    padding: 7px 9px 7px 25px;
    color: var(--mainblue);
    margin-left: 10px;
}

/* 조회버튼 */
.check-btn {
    background: url(../img/component/check-btn.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 7px;
}

/* 저장버튼 */
.save-btn {
    background: url(../img/component/savebtn.png) no-repeat;
    background-size: 15px 15px;
    background-position: 7px;
    position: relative;
}

.save-btn::after {
    content: 'F9';
    position: absolute;
    top: -5px;
    right: 0;
    width: 18px;
    height: 12px;
    color: var(--white);
    font-size: 0.9rem;
    line-height: 12px;
    border-radius: 10px;
    background-color: var(--mainblue);
}

/* 삭제버튼 */
.del-btn {
    background: url(../img/component/del.png) no-repeat;
    background-size: 15px 15px;
    background-position: 7px;
    position: relative;
}

.save-btn::after {
    content: 'F9';
    position: absolute;
    top: -5px;
    right: 0;
    width: 18px;
    height: 12px;
    color: var(--white);
    font-size: 0.9rem;
    line-height: 12px;
    border-radius: 10px;
    background-color: var(--mainblue);
}


.table-area table {
    width: max-content;
    border-bottom: 1px solid var(--boxborder);
    border-right: 1px solid var(--boxborder);
}

.table-area {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.table-area table thead th, .table-area table thead{
    position: sticky;
    z-index: 3;
    top: 0;
}

.table-border {
    /* border-bottom: 1px solid var(--boxborder); */
}
.table-area td{width: max-content;}
.table-area th {
    padding: 7px;
    color: var(--mainblue);
    border-top: 1px solid var(--boxborder);
    border-left: 1px solid var(--boxborder);
    /* border-bottom: 1px solid var(--boxborder); */
    background-color: var(--tableblue);
    z-index: 2;
}

.total-td {
    color: var(--mainblue);
    background-color: var(--sidenavgray);
    font-weight: 600;
}
.table-are tbody{border-bottom: 1px solid var(--boxborder);}
.table-area td {
    /* text-align: center; */
    border-top: 1px solid var(--boxborder);
    border-left: 1px solid var(--boxborder);
    
}
.form-table label{width: 76px; color: var(--mainblue); padding: 7px; font-size: 13px; font-weight: 600; text-align: right; margin: 0 10px 0 0;}
tfoot {
    position: sticky;
    bottom: 0;


}
#tabs table th{background-color: var(--tableblue);}
.blue-btn {
    padding: 5px 17px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 5px;
    background-color: var(--mainblue);

}
.blue-btn,
.blue-border-btn:hover {
    background-color: var(--blue);
    color: var(--white);
    transition: all 0.3s ease-in-out;
}

.red-btn,
.red-border-btn:hover {
    background-color: var(--red);
    color: var(--white);
    transition: all 0.3s ease-in-out;
}

.green-btn,
.green-border-btn:hover {
    background-color: var(--green);
    color: var(--white);
    transition: all 0.3s ease-in-out;
}

.gray-btn,
.gray-border-btn:hover {
    background-color: #eee;
    color: #333;
    transition: all 0.3s ease-in-out;
}
.blue-border-btn {
    border: 1px solid var(--blue);
    color: var(--blue);
    background-color: var(--white);
}

.red-border-btn {
    border: 1px solid var(--red);
    color: var(--red);
    background-color: var(--white);
}
.green-border-btn {
    border: 1px solid var(--green);
    color: var(--green);
    background-color: var(--white);
}
.darkg-border-btn {
    border: 1px solid var(--titleborder);
    color: var(--titleborder);
    background-color: var(--white);
}
.shortcut-blue-btn{width: 200px;}
.shortcut-blue-btn button {
    background-color: var(--mainblue);
    padding: 5px 17px 5px 35px;
    font-size: 1.3rem;
    font-weight: 600;
    border: 1px solid var(--mainblue);
    border-radius: 5px;
    color: white;
}

.check-blue-btn {
    background: url(../img/component/check-btn-w.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 15px;
}

.reset-blue-btn {
    background: url(../img/component/arrow-rotate-left-solid.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 15px;

}

.ex-blue-btn {
    background: url(../img/component/ex.png) no-repeat;
    background-size: 15px 15px;
    background-position: 15px;
    border: 1px solid var(--mainblue);
    padding: 5px 17px 5px 35px;
    font-size: 1.3rem;
    color: var(--mainblue);
    border-radius: 5px;
    font-weight: 500;
}

.content-wrapper {
    width: 100%;
    height: 100%;
}

.content-area {
    width: 100%;    
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--tablebackground);
}
.wrap{height: 100%; }
.input-wrap {
    border-radius: 10px;
    background-color: var(--tableblue);
}


input[type="checkbox"] {
    vertical-align: middle;
}

.input-wrap th {
    width: 84px;
    word-break: keep-all;
    text-align: right;
    color: var(--mainblue);
}


.list-wrap {
    border-radius: 10px;
    height:  calc(100% - 38px);
    border: 1px solid var(--bordertable);
}
/* .list-wrap table input{padding: 0 !important;} */
.content-titleZone button {
    padding: 5px 12px;
    margin-left: 10px;
    border-radius: 5px;
    font-size: 1.3rem;
}

.button-wrap button {
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 1.3rem;
}

.notice-wrap p {
    color: var(--danger);
    font-size: 1.2rem;
    font-weight: 600;
}

.side-wrap {
    margin-bottom: 10px;
}

.side-wrap p {
    font-size: 1.3rem;
    padding: 8px 40px;
    position: relative;
    border-radius: 50px;
    background-color: var(--white);
    /* margin-bottom: 20px; */

}

.side-wrap p.active {
    margin-bottom: 5%;
    background-color: var(--navbarblue);
    color: var(--white) !important;
}


.side-wrap p::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../img/component/file-solid-b.svg) no-repeat;
}

.side-wrap p.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../img/component/file-solid-w.svg) no-repeat;
}




.logo {
    width: 100px;
    height: 40px;
    background: url(../img/component/header-logo-w.png) no-repeat;
    background-size: contain;
    background-position: left;

}

.input-title {
    font-size: 1.2rem;
    font-weight: 400;
    word-break: keep-all;
}


.bn002-popup-wrapper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.043);
    position: absolute;
    z-index: 1000;
}

.bn002-popup-wrap {
    width: 70%;
    height: 80%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--white);
    transform: translateY(10%) translateX(20%);
}

.table-popup-box {
    padding: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    
    background-color: var(--tablebackground);
}

.table-popup {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */

}

.table-popup table {

    /* border-left: 1px solid var(--boxborder); */
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-popup table thead tr th{
    position : sticky;
    top : 0;
}

/* .table-popup table thead,
.table-popup tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    z-index: 3;
    top: 0; 
}*/
/* 
.table-popup tbody {
    display: block;
    width: 100%;
    height: 550px;
    overflow-y: auto;
} */

.table-popup tbody::-webkit-scrollbar{
    width: 5px;
}

.table-popup th {
    padding: 7px;
    color: var(--mainblue);
    border: 1px solid var(--boxborder);
    background-color: var(--tableth);


    z-index: 2;
}

.table-popup td {
    text-align: center;
    border-left: 1px solid var(--boxborder);
    border-bottom: 1px solid var(--boxborder);
    border-right: 1px solid var(--boxborder);

}


.popup-button {
    gap: 40px;
}

.popup-button p {
    font-size: 1.3rem;
    background-color: var(--tableth);
    font-weight: 600;
    padding: 5px;
    color: var(--mainblue);
    text-align: center;
    border: 1px solid var(--boxborder);
}

.popup-button button {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid var(--boxborder);
}

.closePopup {
    cursor: pointer;
    padding: 0px !important;
}


.content-wrapper tbody select {
    /* width: 100%; */
}

.input-border {
    border: 0px;
    background-color: transparent;
}


.total-num {
    font-size: 1.3rem;
}


.align-left {
    text-align: left !important;
    padding: 5px 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;/
}
.total-table-wrap{
    height: 100%;
    overflow-y: hidden;
}
.total-table-wrap-x{
    height: 100%;
    overflow-x: hidden;
}

.total-table tbody{
    position: relative;
    background-color: aqua;
}


.total-tr{
    position: sticky;
    bottom: 0;
    left: 0;
    background-color: #fff;
}
.total-md-tr td{font-weight: 500;
    color: var(--mainblue);}
.total-md-td{
    background-color: var(--lightbeige);}
.total-tr td{font-weight: 600; color: var(--mainblue);}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    color: var(--gray-dark);
}
::-webkit-scrollbar-track {
    background-color: lightgray;
    border-radius: 0px;

}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--headergray);
}


.odd-group {
    background-color: #eff5f7; /* 원하는 배경색으로 변경하세요 */
  }
.widfull{width: -webkit-fill-available !important;}
.itemcd{width: 110px !important;}
/* 숫자 너비*/
/* .number2{width: 14px !important;} */
.number2{width: 75px !important;}
.number4{width: 29px !important;}
/* .number6{width: 45px !important; } */
/* .number6{width: 60px !important; } */
/* .number6{width: 67px !important; } */
.number6{width: 71px !important; }
.number8{width: 59px !important; }
.number8_2{width: 74px !important; }
.number8_2{width: 74px !important; }
.number10{width: 75px !important; }
.number10_3{width: 96px !important; }
.number13_3{width: 117px !important; }
.number14_3{width: 126px !important; }


/* 문자 너비*/
.varchar1{width: 12px !important; }
/* .varchar2{width: 23px !important; } */
.varchar2{width: 67px !important; }
.varchar3{width: 33px !important; }
/* .varchar4{width: 45px !important; } */
.varchar4{width: 65px !important; }
.varchar6{width: 67px !important; }
.varchar7{width: 88px !important;}
.varchar8{width: 105px !important; }
.varchar10{width: 110px !important; }
.varchar11{width: 115px !important; }
.varchar12{width: 120px !important; }
.varchar13{width: 136px !important; }
.varchar15{width: 160px !important; }
.varchar16{width: 160px !important; }
.varchar17{width: 186px !important; }
.varchar20{width:219px !important; }
/* .varchar30{width:33rem !important; } */
.varchar30{width:15rem !important; }
.varchar34{width:30rem !important; }
.varchar40{width:44rem !important; }
.varchar50{width:55rem !important; }
.varchar100{width:1100px !important; }


.table-wrap{width: 100%;
    height: calc(100% - 142px);
    overflow: scroll;
}

.next-btn{border: 1px solid var(--boxborder);}

.addicon {
    width: 20px;
    height: 20px;
    color: var(--mainblue);
    position: absolute;
    top: 8px;
    right: 10px;
}

/* bn015 */
.main-wondan {
    justify-content: space-between;
}

.main-wondan>div {
    width: 24%;
}

/* print */
.print-wrap{
    display: flex;
    flex-direction: column;
    height: calc(100% - 98px);
    width: 65%;
    max-height: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.print-header {
    width: 100%;
    height: 20%;
    align-items: center;
    justify-items: center;
    display: flex;
    gap: 1.75rem;
}
.print-header-left-container {
    height: 100%;
    display: flex;
    flex-direction: column;    
    width: 52.5%;
    text-align: center;
}
.print-header-right-container {
    display: flex;
    flex-grow: 1;
    font-size: 10px;
    text-align: center;
    height: 100%;
}
.print-header-title {
    font-size: x-large;
    flex-grow: 1;
    align-content: center;
    font-weight: bold;
    min-height: 5rem;
}
.print-customer-info {
    font-size: 1.2rem;
    flex-grow: 1;
    align-content: center;
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.border-black {
    border-color: black;
}
.border-rb {
    border-color: black;
    border-bottom: solid;
    border-right: solid;
    border-width: 1px;
}
.border-r {
    border-right: solid;
    border-color: black;
    border-width: 1px;
}
.border-b {
    border-bottom: solid;
    border-color: black;
    border-width: 1px;
}
.border {
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
.border-2 {
    border-style: solid;
    border-color: black;
    border-width: 2px;
}

.writing-vertical-lr {
    writing-mode: vertical-lr;
}
.flex-grow{
    flex-grow: 1;
}
.content-center {
    align-content: center;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.px-4 {
    padding-left: 1rem /* 16px */;
    padding-right: 1rem /* 16px */;
}
.px-2 {
    padding-left: 0.5rem /* 8px */;
    padding-right: 0.5rem /* 8px */;
}
.mx-5{
    margin-right: 1.25rem;
    margin-left: 1.25rem;
}
.font-bold {
    font-weight: 700;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.text-lg {
    font-size: medium;
}
.text-xs {
    font-size: x-small
}
.text-left {
    text-align: left;
}
.grid {
    display: grid;
}
.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}
.col-span-5 {
    grid-column: span 5 / span 5;
  }

.order-list table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: x-small;
    cursor:none;
}

.order-list table thead tr th{
    /* position : sticky; */
    top : 0;
    font-size: x-small;
}

.order-list th {
    padding: 7px;
    border: 1px solid black;
    z-index: 2;
}

.order-list td {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-size: x-small;
    padding-left: 0.5rem;   
    padding-right: 0.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    height: 1.7rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.total-container {
    display: flex;
    text-align: right;
    margin-top: 0.5rem;
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 1px solid black
}
.total-container div {
    border-collapse: collapse;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-right: 1px solid black;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: small;
}
.print-popup-wrap {
    width: 55%;
    height: 85%;
    position: absolute;
    top: 0;
    left: 11%;
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--white);
    transform: translateY(10%) translateX(20%);
}
.ajin-seal {
    max-width: 5rem; 
    max-height: 5rem; 
    position: absolute; 
    z-index: -1; 
    right: 0;
}
.relative {
    position:relative;
}
.select-wrap2 { 
    gap: 40px;
}
@media (max-width: 1199px) {
    /* 모바일 */
    .select-wrap {
        flex-direction: column;        
    }
    .select-wrap2 {
        display: grid;
        grid-template-rows: repeat(4, 3rem);
        gap: 5px;
    }
    .select-box {
        display: grid;
    }
    .shortcut-blue-btn {
        display: flex;
        padding-left: 30px;
    }
    .gd-2 {
        flex: 0 0 16.9%;
        max-width: 100%;
    }
    .shortcut-blue-btn button {
        min-width: 100px;
    }
}
.selected-cell {
    background-color: #fffcd4;
}
.igmdate-cell{
    background-color: white;
}