:root {
    /* brand color */
    /* --primary-color: #23cc89; */
    --primary-color: #8dc63f;
    --secondary-color: #8dc63f1f;
    /*color */
    --background-color: #F8F9FA;
    --border-color: #E6E9F4;
    --black-color: #333;
    --font-color: #6C7C94;
    --gray1-color: #cbcfdf;
    --gray2-color: #D5D7E3;
    --green-color: #21D59B;
    --green2-color: #23cc899e;
    --orange-color: #F99600;
    --yellow-color: #F8C80A;
    --blue-color: #1E74FD;
    --sky-color: #24cfff;
    --red-color: #F0142F;
    --pink-color: #ff3686;
    --pink2-color: #e65ba39e;
    --white-color: #fff;
    /* ui */
    /* --box-shadow: 0 0px 7px rgb(0 0 0 / 7%); */
    --box-shadow: 0 5px 5px rgb(0 0 0 / 5%);
    --box-shadow2: 0 0px 10px rgb(174 178 196 / 30%);
    --transition: 0.25s ease-in-out;
    /* font size */
    --f-big: 34px;
    --f-large: 28px;
    --f-middle: 20px;
    --f-normal: 16px;
    --f-small: 14px;
    --f-caption: 12px;
}

/* 
공통 layout
*/
body {
    background-color: var(--background-color);
    text-align: center;
}

main {
    max-height: 720px;
    overflow-y: auto;
}

main,
header {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    background-color: #FFF;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}

.header-inner {
    width: 100%;
    padding: 16px 20px;
    z-index: 999;
    height: 60px;
    box-shadow: var(--box-shadow);
    background-color: var(--primary-color);
}

.header-logo {
    display: block;
    width: 240px;
    height: 28px;
    margin: 0 auto;
    background: url(../images/logo/logo_ver_main.png) no-repeat center center / contain;
}

.header-history {
    width: 48px;
    height: 48px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/icon/black/ic_arleft.png) no-repeat left -10px center / 36px;
}

.header-inner p {
    font-weight: 700;
    font-size: 18px;
    color: #000;
}

.wrapper {
    min-height: 720px;
    background-color: var(--background-color);
}

/* 
일반 layout
*/
/* 메인 */
.home {
    min-height: 720px;
    background-color: #FFF;
}

.home-top {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    background-color: var(--background-color);
    background-color: #F8F9FA;
}

.home-top h3 {
    text-align: left;
    font-size: var(--f-middle);
    max-width: calc(100% - 100px);
    color: var(--black-color);
}

.home-top h3 span {
    font-size: var(--f-middle);
    margin-right: 5px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 1.0;
}

.date-caption {
    font-size: var(--f-caption);
    color: var(--font-color);
}

.home-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 0 20px 0 20px;
}

.home-list li {
    width: calc(50% - 10px);
    height: 150px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 20px;
    background-color: #FFF;
    text-align: left;
    position: relative;
    padding-bottom: 68px;
}

.home-list li:nth-child(2n) {
    margin-right: 0;
}

.home-list li h5 {
    font-size: var(--f-middle);
    color: #FFF;
    line-height: 1.2;
}

.list-icon {
    display: block;
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 48px;
    border-radius: 100%;
    background-color: rebeccapurple;
    box-shadow: var(--box-shadow);
    margin-left: auto;
    box-shadow: 0 4px 0 #d3d3d3, 0 15px 20px rgba(0, 0, 0, .1);
    border-bottom: 1px solid var(--gray1-color);
}

.list-icon.in {
    background: url(../images/icon/main/in.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.in) {
    background-color: #2e8aea;
    box-shadow: 0 8px 0 #246dba, 0 15px 20px rgba(0, 0, 0, .1);
}

.list-icon.out {
    background: url(../images/icon/main/out.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.out) {
    background-color: #ff519c;
    box-shadow: 0 8px 0 #d43d7e, 0 15px 10px rgba(0, 0, 0, .1);
}

.list-icon.fork {
    background: url(../images/icon/main/fork.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.fork) {
    background-color: #2acf99;
    box-shadow: 0 8px 0 #1a986f, 0 15px 10px rgba(0, 0, 0, .1);
}

.list-icon.box {
    background: url(../images/icon/main/container.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.product) {
    background-color: #ea9f2e;
    box-shadow: 0 8px 0 #cb8821, 0 15px 10px rgba(0, 0, 0, .1);
}

.list-icon.search {
    background: url(../images/icon/main/product.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.container) {
    background-color: #bababa;
    box-shadow: 0 8px 0 #8b8b8a, 0 15px 10px rgba(0, 0, 0, .1);
    background-color: #bababa45;
    box-shadow: 0 8px 0 #b3b3b3, 0 15px 10px rgba(0, 0, 0, .1);
    border: 1px solid #dcdcdc;
}

.home-list li:has(.container) h5 {
    color: var(--font-color);
}

.list-icon.product {
    background: url(../images/icon/main/list.png)no-repeat center center / 24px #FFF;
}

.home-list li:has(.my) {
    background-color: #bababa;
    box-shadow: 0 8px 0 #8b8b8a, 0 15px 10px rgba(0, 0, 0, .1);
}

.list-icon.my {
    background: url(../images/icon/main/list.png)no-repeat center center / 24px #FFF;
}

.home-list {
    overflow: hidden;
}

/* 폼형식 */
.form-top {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 0;
    width: 100%;
}

.form-top:has(button) {
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--gray1-color);
    margin-bottom: 20px;
}

.btn-grey {
    background-color: var(--gray1-color);
}

.form-top button {
    height: 36px;
    padding: 0 40px 0 20px;
    line-height: 1.0;
    background: url(../images/icon/black/ic_arright.png) no-repeat top 3px right 15px / 20px var(--gray1-color);
    font-size: var(--f-caption);
}

.form-box {
    text-align: left;
    padding: 8px 20px;
}

.form-box label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    transition: var(--transition);
    width: 100%;
    font-size: var(--f-caption);
}

.form-box label span {
    margin-left: 5px;
    font-size: var(--f-caption);
}

.form-box input {
    width: 100%;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    font-weight: 500;
    color: var(--black-color);
}

.form-box textarea {
    resize: none;
    width: 100%;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    height: 100px;
}

.form-box input:focus,
.form-box input:focus-visible,
.form-box input:hover,
.form-box textarea:focus,
.form-box textarea:focus-visible,
.form-box textarea:hover {
    border-color: var(--primary-color);
    outline: none;
}

.form-box:has(input:focus) label {
    color: var(--black-color);
}

.form-box button {
    width: 100%;
    margin-top: 10px;
}

.form-box:last-child:has(button) {
    margin-bottom: 30px;
}

.incoming-color {
    color: var(--blue-color);
}

.outcoming-color {
    color: var(--red-color);
}

.comingbox {
    background-color: #FFF;
    border-radius: 6px;
    padding: 20px;
    box-shadow: var(--box-shadow);
}

.comingbox h5 {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--gray1-color);
    position: relative;
}

.conbox-name {
    position: absolute;
    right: 0;
    top: 0;
    color: var(--black-color);
    padding: 4px 10px;
    font-weight: 600;
    background-color: var(--yellow-color);
    border-radius: 6px;
    color: #FFF;
    font-size: var(--f-caption);
}


.comingbox h5 span {
    font-size: var(--f-normal);
    font-weight: 900;
    border-radius: 6px;
    margin-left: 10px;
}

/* 수량버튼 */
.qty form {
    display: flex;
    align-items: center;
}

.qty input[type=number] {
    width: calc(100% - 98px);
    border-radius: 6px 0 0 6px;
}

.qty .btn-minus {
    width: 48px;
    height: 48px;
    margin-top: 0;
    background-color: var(--font-color);
    color: var(--primary-color);
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: var(--box-shadow);
    margin-left: 1px;
    border-radius: 0;
    line-height: 48px;
    padding: 0;
}

.qty .btn-plus {
    width: 48px;
    height: 48px;
    margin-top: 0;
    background-color: var(--font-color);
    color: var(--primary-color);
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: var(--box-shadow);
    margin-left: 0;
    border-radius: 0 6px 6px 0;
    line-height: 48px;
    padding: 0;
}

/* 토스트 */
.toast-warning .toast-message {
    color: #FFF;
}

.toast.toast-warning,
.toast.toast-error,
.toast.toast-success,
.toast.toast-info,
.toast {
    opacity: inherit !important;
}

#toast-container>div {
    box-shadow: var(--box-shadow) !important;
    border-radius: 6px !important;
}

.toast-top-center {
    top: 80px !important;
}

/* 공통선 */
.dashed-line {
    margin: 20px 20px;
    width: calc(100% - 40px);
    height: 1px;
    border-top: 1px dashed var(--gray1-color);
}

/* 모달 */
.modal-inner .formbox {
    display: flex;
    flex-wrap: wrap;
}

.modal-inner .formbox input,
.formbox input:disabled,
.formbox textarea:disabled {
    background-color: var(--background-color);
    font-weight: 500;
    color: var(--black-color);
}

.form-box {
    width: 100%;
}

.form-box.form-6col {
    width: 60%;
    padding-right: 0;
}

.form-box.form-4col {
    width: 40%;
}

/* 조회 */
.product-search {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.product-search input,
.product-search input:disabled,
.product-search textarea:disabled {
    background-color: #FFF;
}

.empty-box {
    height: 10px;
    width: 100%;
    background-color: var(--background-color);
    margin-top: 10px;
    margin-bottom: 20px;
}

.safe-quantity {
    background-color: #FFF;
    border: 1px solid var(--border-color);
    border-color: var(--border-color);
    padding: 8px 0;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
}

.safe-quantity li {
    width: 50%;
    box-sizing: border-box;
    padding: 8px 14px;
    text-align: center;
}

.safe-quantity li span {
    color: var(--black-color);
    font-weight: 500;
}

.safe-quantity li h5 {
    font-size: var(--f-middle);
    margin-top: 5px;
}

.safe-quantity li:first-child {
    border-right: 1px dashed var(--gray1-color);
}

.btn-yellow {
    background-color: var(--yellow-color);
    color: #FFF;
}

.search-box {
    background-color: #FFF;
    padding: 10px 0;
    margin: 20px 0 0 0;
}

.search-box input {
    width: 30%;
}

.search-box .form-box {
    color: var(--gray1-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0 !important;
}

.search-box+.empty-box {
    margin: 0;
}

.container-list {
    background-color: #FFF;
    padding: 20px;
}

.container-list .dataTables_wrapper .dataTables_length select {
    margin: 0px;
    margin-bottom: 10px;
    margin-right: 5px;
}

.pro-totals {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: var(--f-caption);
}

.pro-totals span {
    font-size: var(--f-caption);
    font-weight: 500;
}

.list-box {
    border: 1px solid var(--border-color);
    padding-bottom: 20px;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}

.list-box:first-child {
    margin-top: 30px;
}

.pro-code {
    font-size: var(--f-caption);
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 14px;
    border-bottom: 1px dashed var(--border-color);
    background-color: var(--background-color);
    border-radius: 6px 6px 0 0;
}

.pro-name,
.pro-count {
    color: var(--black-color);
    font-weight: 600;
}

.pro-count span {
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 3px;
}

.pro-name {
    display: inline-block;
    word-break: break-all;
    margin-left: 14px;
    margin-right: 14px;
}

.pro-count {
    margin-left: auto;
    margin-right: 14px;
}

.listnone {
    box-shadow: none;
    border-radius: none;
    border: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    height: calc(100vh - 434px);
}

.listnone img {
    margin-bottom: 20px;
    width: 80px;
}

.listnone p {
    width: 100%;
}

/* 페이지네이션 */
.paging {
    background-color: #FFF;
    text-align: center;
    padding-bottom: 40px;
}

.paging ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paging ul .pg {
    min-width: 42px;
    height: 42px;
    line-height: 1.0;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    margin: 0 5px;
    padding: 13px 0;
    background-color: #FFF;
    font-weight: 500;
    color: var(--black-color);
}

.paging ul .pg.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.paging ul .pg-prev {
    background: url(../images/icon/black/ic_arleft.png) no-repeat center center / 20px #FFF;
}

.paging ul .pg-next {
    background: url(../images/icon/black/ic_arright.png) no-repeat center center / 20px #FFF;
}

.paging ul .pg.disabled {
    opacity: .6;
    background-color: var(--background-color);
}

/* login */
.login {
    background-color: #FFF;
    text-align: left;
    height: calc(100vh - 60px);
    height: 720px;
    height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-tit {
    color: var(--black-color);
    font-size: var(--f-large);
    text-transform: uppercase;
    padding-left: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.login-subtit {
    font-size: var(--f-small);
    text-transform: uppercase;
    padding-left: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 40px;
}

.login .btn {
    width: 100%;
}

.login-cap {
    text-align: center;
    font-size: var(--f-caption);
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px dashed var(--border-color);
}

.login-cap a {
    color: var(--primary-color);
    font-weight: 600;
    margin: 0 3px;
}

.login .form-box label {
    font-weight: 400;
    font-size: var(--f-caption);
}


.login .form-box:has(input:focus) label {
    color: var(--primary-color);
    font-weight: 500;
}

.validation {
    color: var(--red-color);
    font-size: var(--f-caption);
    padding-top: 5px;
}

.login .form-box:has(.validation) input {
    border-color: var(--red-color);
}

/* password */
.pass-box {
    position: relative;
}

.pass-box input {
    padding-right: 48px;
}

.pass-box #keyShow {
    position: absolute;
    right: 0;
    top: 0;
    /* display: none; */
    cursor: pointer;
    width: 60px;
    height: 60px;
    background: url(../images/icon/black/ic_viewnone.png)no-repeat center center / 20px;
}

.pass-box #keyShow.eyeClose {
    background: url(../images/icon/black/ic_view.png)no-repeat center center / 20px;
}

.pass-box #keyShow2 {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: url(../images/icon/black/ic_view.png)no-repeat center center / 20px;
}

.pass-box #keyShow2.eyeClose {
    background: url(../images/icon/black/ic_viewnone.png)no-repeat center center / 20px;
}

/* 스플래시 */
.splash {
    width: 100%;
    height: 100vh;
    background-color: var(--primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright {
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: var(--f-caption);
}

.logobox span {
    background-color: #FFF;
    color: var(--primary-color);
    font-weight: 800;
    font-size: var(--f-middle);
    padding: 4px 12px;
    border-radius: 30px;
    line-height: 1.0;
    box-shadow: var(--box-shadow);
    letter-spacing: .5px;
    width: 70px;
    margin-bottom: 10px;
}

.logobox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: 60px;
}

.logobox img {
    width: 200px;
}

/* mypage */
.mypage {
    min-height: 720px;
    padding-bottom: 40px;
}

.mypage-top {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
}

.mypage-top h3 {
    text-align: left;
    font-size: var(--f-middle);
    max-width: calc(100% - 100px);
    color: var(--black-color);
}

.mypage-top h3 span {
    font-size: var(--f-middle);
    margin-right: 5px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 1.0;
}

.mypage .empty-box {
    margin: 0;
}

.menu-cap {
    font-size: var(--f-caption);
    font-weight: 600;
    text-align: left;
    padding: 30px 20px 10px 20px;
    margin-top: 20px;
}

.empty-box+.menu-cap {
    margin-top: 0;
}

.mymenu {
    text-align: left;
    padding: 20px 30px 0 30px;
}

.mymenu li {
    padding: 15px 0;
    border-bottom: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    width: 100%;
}

.mymenu li:first-child {
    padding-top: 0;
}

.mymenu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mymenu li h5 {
    flex: 1;
    color: var(--black-color);
    font-weight: 500;
}

.mymenu .list-icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    margin-right: 20px;
    position: unset;
    margin-left: 0;
}

.mymenu .list-icon.in {
    background: url(../images/icon/main/in.png)no-repeat center center / 20px #FFF;
}

.mymenu .list-icon.out {
    background: url(../images/icon/main/out.png)no-repeat center center / 20px #FFF;
}

.mymenu .list-icon.fork {
    background: url(../images/icon/main/fork.png)no-repeat center center / 20px #FFF;
}

.mymenu .list-icon.product {
    background: url(../images/icon/main/product.png)no-repeat center center /18px #FFF;
}

.mymenu .list-icon.container {
    background: url(../images/icon/main/container.png)no-repeat center center / 20px #FFF;
}

.mymenu .list-icon.list {
    background: url(../images/icon/main/list.png)no-repeat center center / 20px #FFF;
}

.mymenu .list-icon.logout {
    background: url(../images/icon/black/ic_signout.png)no-repeat center center / 20px #FFF;
}

.date-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0 !important;
}

.date-form input {
    width: calc(100% - 120px);
}

.date-form button {
    width: 100px;
    margin: 0;
}


.list-date {
    text-align: left;
    font-size: var(--f-caption);
    margin-top: 30px;
}

.history-list .list-box {
    align-items: center;
    padding: 0 0 20px 0;
    margin-top: 8px;
    background-color: var(--white-color);
}

.history-list .list-box .history-icon+div {
    width: calc(100% - 90px);
    display: flex;
    margin-right: 20px;
}

.history-icon {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    margin-right: 20px;
    position: unset;
    margin-left: 20px;
}

.history-list .list-box .pro-code {
    margin-bottom: 20px;
    padding: 14px 20px;
    border-bottom: 1px dashed var(--border-color);
    background-color: var(--background-color);
    display: inline-block;
    border-radius: 6px 6px 0 0;
    color: var(--black-color);
}

.history-list .list-box .pro-name,
.history-list .list-box .pro-count {
    margin: 0;
}

.history-list .list-box .pro-count {
    margin-left: auto;
    padding-left: 20px;
}

.history-icon.in {
    background: url(../images/icon/main/in.png)no-repeat center center / 18px #E5EEFC;
}

.history-icon.out {
    background: url(../images/icon/main/out.png)no-repeat center center / 18px #FBE4E6;
}

/* 데이트피커 */
#datepicker {
    padding-left: 44px;
    background: url(../images/icon/black/ic_calendar.png)no-repeat center left 14px/ 18px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    color: var(--black-color);
    z-index: 555;
}

.datepicker--day-name {
    font-size: var(--f-small);
}

.datepicker--cell {
    color: var(--black-color);
    font-size: var(--f-small);
    height: 42px;
}

.datepicker--cell.-current- {
    color: var(--primary-color);
    font-weight: 600;
    background-color: var(--background-color);
}

.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current-,
.datepicker--cell.-selected-.-focus- {
    background: var(--primary-color);
}

.datepicker--cell.-focus- {
    background: #b0d877;
}

.datepicker--nav-title i,
.datepicker--nav-title {
    color: var(--black-color);
}

.datepicker {
    border-color: var(--border-color);
    width: calc(100vw - 40px);
    border-radius: 8px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

body:has(.datepicker.active) {
    overflow-y: hidden;
}

body:has(.datepicker.active)::after {
    content: '';
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    z-index: 1;
}

.datepicker--content,
.datepicker--nav {
    padding: 10px;
}

#datepicker.date-caption {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--font-color);
    font-weight: 400 !important;
    height: auto;
    text-align: right;
}

.date-caption {
    line-height: initial;
}

.date-caption:focus,
.date-caption:focus-visible {
    outline: none !important;
}

.datepicker {
    transition: opacity .3s ease !important;
}

.datepicker.active {
    left: 50% !important;
    transform: translateX(-50%);
    position: fixed;
}

.-bottom-left- .datepicker--pointer,
.-top-left- .datepicker--pointer {
    display: none;
}

main:has(.inoutbox) .container-list {
    display: none;
}

main:has(.inoutbox) .container-list.open {
    display: block;
    margin-top: 30px;
    padding-top: 30px;
}

.inout-tit {
    color: var(--black-color);
    font-size: var(--f-middle);
    text-align: left;
    margin-bottom: 20px;
}


.list-sortbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.list-sortbox .inout-tit {
    flex: 1;
    margin: 0;
}

.list-sortbox .pro-totals {
    width: auto;
    margin: 0;
}

/* 20231108 수정 */
/* 홈 */
.home-top {
    padding: 15px 20px;
    padding-bottom: 0px;
    background-color: #fff;
    /* border-bottom: 1px dashed var(--border-color); */
}

.home-list {
    cursor: pointer;
    margin-top: 20px;
}

.home-list li {
    border-bottom: 1px solid #ffffff9e;
}

.home-list li:has(.in),
.home-list li:has(.out),
.home-list li:has(.fork),
.home-list li:has(.my) {
    margin-right: 0px;
    padding-bottom: 0px;
    height: 80px;
}

.main-listbox {
    width: 100%;
    display: flex;
}

.main-listbox li:nth-child(1) {
    width: 80%;
    margin-right: 10px;
}

.main-listbox li:nth-child(2) {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.main-listbox li:nth-child(2)::before,
.main-listbox li:nth-child(2)::after {
    display: none;
}

.main-listbox .list-icon {
    position: initial;
}

.main-listbox li:nth-child(2) .list-icon {
    border-bottom: none;
    box-shadow: none;
    width: 40px;
    height: 38px;
}

.main-listbox .today-box p {
    color: var(--white-color);
    text-align: center;
    margin-bottom: 5px;
    font-size: var(--f-caption);
    letter-spacing: 0.5px;
}

.sub-listbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sub-listbox li {
    width: calc(50% - 8px);
    margin-right: 15px;
    padding: 15px;
    margin-bottom: 15px;
}

.sub-listbox li:nth-child(2) {
    margin-right: 0;
}

.sub-listbox .list-icon,
.sub-secondbox .list-icon {
    display: none;
}

.home-line {
    border: 1px dashed var(--border-color);
    width: 100%;
    margin-bottom: 20px;
}

.home-list li:has(.fork) {
    margin-bottom: 30px;
}

.home-list li:has(.in) h5,
.home-list li:has(.out) h5,
.home-list li:has(.fork) h5 {
    font-size: 24px;
    line-height: 1.6;
}

.home-list li:has(.container),
.home-list li:has(.list),
.home-list li:has(.product) {
    height: 80px;
    box-shadow: 0 3px 5px rgb(174 178 196 / 40%);
    border: 1px solid var(--gray2-color);
    background: #bababa45;
    background: #bababa30;
    border-radius: 8px;
    box-shadow: 0px 5px 5px #bebebe, -0px -5px 7px var(--white-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: rgba(0, 0, 0, 20%) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.home-list li img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    background-color: #bababa;
    border-radius: 6px;
    padding: 4px;
}

.home-list li:has(.container) h5,
.home-list li:has(.list) h5,
.home-list li:has(.product) h5 {
    line-height: 1.2;
    font-size: 18px;
    padding-bottom: 4px;
}

.home-list li:has(.my) {
    background-color: #bababa;
    border-bottom: none;
    width: 100%;
    display: initial;
    margin-bottom: 20px;
    padding-left: 20px;
}

.sub-listbox .list-icon.my {
    display: block;
}

.home-list li:has(.my) h5 {
    color: var(--white-color);
    font-size: 24px;
    line-height: 1.8;
}

.home-top h3 span,
.mypage-top h3 span {
    margin-bottom: -2px;
}

.home-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.home-top img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    background-color: var(--white-color);
    padding: 5px;
    border-radius: 50px;
    margin-top: 2px;
    box-shadow: var(--box-shadow);
}

.login .form-box label {
    font-weight: 600;
}

.login-subtit {
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: var(--f-normal);
    color: var(--black-color);
    font-weight: 500;
}

.login .form-box input {
    background-color: var(--background-color);
}

.login-subtit span {
    font-size: var(--f-normal);
    color: var(--primary-color);
    font-weight: 600;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.list-icon.in {
    background: url(../images/icon/main/in1.png)no-repeat center center / 18px var(--white-color);
}

.list-icon.out {
    background: url(../images/icon/main/out1.png)no-repeat center center / 18px var(--white-color);
}

.list-icon.fork {
    background: url(../images/icon/main/inout1.png)no-repeat center center / 18px var(--white-color);
}

.list-icon.box {
    background: url(../images/icon/main/container1.png)no-repeat bottom 10px center / 22px var(--white-color);
}

.list-icon.search {
    background: url(../images/icon/main/product1.png)no-repeat center center / 20px var(--white-color);
}

.list-icon.product {
    background: url(../images/icon/main/list1.png)no-repeat center center / 22px var(--white-color);
}

.list-icon.insp {
    background: url(../images/icon/main/list2.png)no-repeat center center / 22px var(--white-color);
}

.list-icon.my {
    background: url(../images/icon/main/my1.png)no-repeat center center / 22px var(--white-color);
}

/*  */
.btn,
select,
option,
input {
    height: 50px;
    line-height: 43px;
}

.form-box input::placeholder,
.form-box textarea::placeholder {
    font-size: var(--f-small);
    font-weight: 400;
}

.modal-content .form-box input {
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrapper {
    background-color: var(--white-color);
    padding-bottom: 70px;
}

.wrapper.list {
    overflow-y: clip;
    padding-bottom: 0px;
}

body:has(.home) .wrapper,
body:has(.login) .wrapper {
    padding-bottom: 0px;
}

.list-icon {
    bottom: 20px;
    height: 44px;
}

.btn-fontcolor {
    background-color: var(--font-color);
    color: var(--white-color);
}

select,
input,
textarea {
    border: 1px solid var(--gray1-color);
    border-color: var(--gray1-color);
    line-height: 43px;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

::-webkit-scrollbar-track {
    background-color: var(--background-color);
}

.search-boxwr.storage select,
.search-boxwr.storage input {
    width: 100%;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
}

.search-boxwr.storage input::placeholder {
    color: var(--black-color);
    font-weight: 500;
}

select {
    appearance: none;
    background: url('/assets/images/icon/grey/ic_ardown.png') no-repeat right 5px center / 28px;
    color: var(--black-color);
    font-weight: 500;
}

select:focus-visible {
    outline: 1px solid var(--primary-color);
}

button:focus-visible {
    outline: none;
}

.form-box button {
    font-size: 18px;
}

.dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    width: 100%;
    display: block;
}

.qty .btn-minus,
.qty .btn-plus {
    cursor: pointer;
}

.qty .btn-minus:hover,
.qty .btn-plus:hover,
.qty .btn-minus:focus,
.qty .btn-plus:focus {
    opacity: .8;
    transition: var(--transition);
    border: 1px solid var(--gray1-color);
}

.qty {
    position: relative;
}

.qty input[type=number] {
    width: 100%;
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--f-middle);
    box-shadow: var(--box-shadow);
}

.qty .btn-minus {
    width: 55px;
    height: 40px;
    line-height: 28px;
    color: var(--white-color);
    position: absolute;
    right: 65px;
    border-radius: 4px;
    background-color: var(--pink-color);
    font-size: var(--f-large);
}

.qty .btn-plus {
    width: 55px;
    height: 40px;
    line-height: 28px;
    color: var(--white-color);
    position: absolute;
    right: 5px;
    border-radius: 4px;
    background-color: var(--sky-color);
    font-size: var(--f-large);
}

textarea::placeholder {
    color: var(--font-color);
    font-size: var(--f-caption);
    font-weight: 500;
}

textarea {
    padding: 14px;
}

label {
    cursor: initial;
}

/* 모달 */
.modal-content {
    width: calc(390px - 55px);
    width: calc(390px - 20px);
    height: 615px;
}

.modal-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    padding: 10px;
}

.form-box.form-4col {
    width: 50%;
    padding: 10px;
}

.modal-inner .form-fullbox {
    padding: 10px;
}

.custbox-wrapper {
    border-radius: 6px;
    box-shadow: var(--box-shadow2);
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.custbox-wrapper .account-label {
    margin-bottom: 0px !important;
}

.custbox-wrapper:last-child {
    margin-bottom: 0px;
}

.allmodal-box .modal-inner {
    padding: 10px;
}

.account-label {
    color: var(--primary-color) !important;
    font-size: var(--f-normal) !important;
}

.custbox-wrapper .form-box label {
    color: var(--font-color);
}

.modal-inner .dashed-line:last-child {
    display: none;
}

.modal-inner .form-box label {
    color: var(--font-color);
    margin-bottom: 7px;
}

.toast.toast-success .toast-message {
    color: var(--white-color);
}

.modal input:hover {
    border: 1px solid var(--gray1-color);
    cursor: initial;
}

.modal label {
    cursor: initial;
}

/* 데이터피커 */
.datepicker.-from-bottom- {
    width: calc(390px - 40px);
    height: 360px;
}

.datepicker--cell.datepicker--cell-day.-focus- {
    background-color: var(--secondary-color);
}

.datepicker--day-name {
    color: var(--black-color);
    font-weight: 600;
}

.datepicker--day-name:first-child {
    color: var(--pink-color);
}

.datepicker--day-name:last-child {
    color: var(--sky-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid var(--border-color) !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    color: var(--font-color) !important;
}

/* 마이페이지 */
body:has(.mypage-wrapper) header .header-inner {
    display: none;
}

body:has(.mypage-wrapper) .wrapper .header-inner {
    display: block;
}

.mypage-wrapper .form-box label {
    font-size: var(--f-small);
    color: var(--black-color);
    font-weight: 700;
}

.mypage-wrapper .form-box label {
    position: relative;
}

.mypage-wrapper .form-box label:after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    background: url(/assets/images/icon/main/check.png) no-repeat top 4px right 3px / 14px;
}

.mypage-wrapper .form-box input {
    border: 1px solid var(--gray1-color);
    border-color: var(--gray1-color);
}

.mypage-wrapper .btn-outline {
    margin-top: 0px;
}

.mypage-wrapper .fw-change:focus {
    background-color: var(--font-color);
}


.mypage-wrapper .form-box.fwbox-change input {
    background-color: var(--background-color);
    border: 1px solid var(--gray1-color);
}

.my-disabled {
    background-color: var(--white-color) !important;
    border: 1px solid var(--primary-color) !important;
}

body:has(.my-disabled) .mypage-wrapper .form-box label.fw-label:after {
    filter: grayscale(100%);
    opacity: .3;
}

.mypage-top {
    padding: 20px;
}

/* 입고등록 */
.storage-wrbox {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    width: 100%;
}

.storage-wrbox .select2-selection__rendered {
    padding-right: 25px !important;
    padding-left: 10px !important;
}

.storage-wrbox .form-box {
    padding: 0px;
    margin-bottom: 0px !important;
}

.storage-wrbox .form-box:first-child {
    width: 45%;
    margin-right: 5px;
}

.select2-container {
    width: 100% !important;
}

.storage-wrbox.second .form-box:nth-child(2) {
    width: 52%;
}

.storage-wrbox .form-box:nth-child(1) select {
    width: 100%;
    border: 1px solid var(--gray1-color);
    font-size: var(--f-small);
}

.storage-wrbox .form-box:last-child {
    margin-right: 0px;
    width: 100%;
}

.storage-wrbox .form-box.blue,
.storage-wrbox .form-box.pink,
.storage-wrbox .form-box.green,
.storage-wrbox .form-box.orange {
    width: 60%;
}

.storage-wrbox .form-box h5 {
    height: 50px;
    line-height: 43px;
    width: 100%;
    border: 1px solid var(--gray1-color);
    text-align: center;
    margin-bottom: 0px;
    padding-bottom: 0px;
    box-shadow: var(--box-shadow);
    background-color: var(--white-color);
    border-radius: 6px;
    background-color: var(--background-color);
}

.storage-wrbox .form-box h5.prod-namebox {
    text-align: left;
    padding: 0 14px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-wrbox .form-box h5.prod-namebox span {
    font-size: var(--f-small) !important;
    color: var(--black-color);
}

input:disabled {
    background-color: var(--background-color) !important;
    border-color: var(--gray1-color) !important;
}

.storage-wrbox .form-box select {
    box-shadow: var(--box-shadow);
    background-color: var(--white-color);
    border-radius: 6px;
}

.storage-wrbox .form-box h5 span {
    margin-left: 0px;
    font-size: var(--f-middle);
}

.storage-wrbox .form-box:last-child h5 span {
    font-size: var(--f-middle);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 43px;
}

.storage-wrbox.comingbox {
    margin: 10px 20px;
    border: 1px solid var(--gray1-color);
    background-color: var(--background-color);
}

.storage-wrbox .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 18px;
    padding-left: 14px !important;
}

.storage-location input {
    font-size: 18px;
}

.company-allwr {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.companytable th,
.companytable td {
    font-size: var(--f-caption);
    padding: 5px 10px;
}

.company-allwr label {
    margin-bottom: 0px;
}

.company-allwr button {
    margin-top: 0px;
    height: 36px;
    font-size: var(--f-caption);
    width: fit-content;
    padding: 0 15px;
    border-radius: 6px;
    font-weight: 700;
    background-color: var(--background-color);
}

.company-allwr button:hover {
    opacity: 0.8;
    transition: var(--transition);
}

.infor-table {
    width: 100%;
    text-align: left;
    border: 1px solid var(--gray1-color);
    border-collapse: collapse;
}

.infor-table th {
    width: 30%;
    border-right: 1px solid var(--gray1-color);
    border-bottom: 1px solid var(--gray1-color);
    padding: 10px;
    background-color: var(--background-color);
    font-weight: 600;
    color: var(--black-color);
}

.infor-table td {
    width: 60%;
    border-right: 1px solid var(--gray1-color);
    border-bottom: 1px solid var(--gray1-color);
    padding: 10px;
    color: var(--black-color);
}

#warehouse_info {
    border-bottom: none;
}

#warehouse_info td:last-child {
    border-right: 0px;
}

#warehouse_info>thead>tr>th {
    border-bottom: 1px solid var(--gray1-color);
}

#warehouse_info>thead>tr>th:last-child {
    border-right: 0px;
}

.form-top:has(button) {
    background-color: var(--background-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.form-top button {
    background: url(../images/icon/black/ic_arright.png) no-repeat top 7px right 5px / 20px var(--white-color);
    padding: 0 20px 0 5px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    width: 120px;
}

.codebtn {
    position: relative;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--white-color);
    border-radius: 50%;
    animation: button-loading-spinner 1s ease;
    opacity: 0;
}

@keyframes button-loading-spinner {
    0% {
        transform: rotate(0turn);
        opacity: 1;
    }

    100% {
        transform: rotate(1turn);
        opacity: 0;
    }
}

.save-sticky {
    position: sticky;
    bottom: 0;
    background-color: #ffffff70;
    backdrop-filter: blur(10px);
}

.storage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.codebtn {
    margin-top: 0px !important;
    width: 20% !important;
    font-size: var(--f-normal) !important;
}

.code-formflex {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.code-formflex.second {
    margin-top: 0px;
}

.code-formflex input {
    background-color: var(--white-color) !important;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 10px;
}

.code-formflex button {
    background: url(../images/icon/black/ic_arright.png) no-repeat top 7px right 5px / 20px var(--white-color);
    padding: 0 20px 0 5px;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    width: 160px;
    height: 36px;
    font-size: var(--f-caption);
    line-height: 1.0;
    margin-top: 0px;
    margin-bottom: 10px;
}

.storage-wrbox .form-box:last-child h5 span {
    display: initial;
}

.storage-wrbox .form-box:last-child h5 span.second {
    font-size: var(--f-small);
}

/* 출고등록 */
.outcoming-color {
    color: var(--pink-color);
}

.last-marginbtn {
    margin-top: 0px;
    padding: 10px 20px;
}

.last-marginbtn button {
    margin-top: 0px;
}

/* 재고조회 */
.product-search {
    padding-bottom: 0px;
}

.searchlist-box {
    width: 100%;
}

.primary-color {
    color: var(--primary-color);
}

#inout_table {
    width: 100%;
    border-collapse: collapse;
}

#inout_table th {
    border: 1px solid var(--gray1-color);
    padding: 10px;
    background-color: var(--background-color);
    color: var(--black-color);
    text-align: center;
}

#inout_table th:nth-child(1),
#inout_table th:nth-child(2) {
    width: 10%;
}

#inout_table th:nth-child(3) {
    width: 30%;
}

#inout_table th:nth-child(4) {
    width: 20%;
}

#inout_table th:nth-child(5) {
    width: 30%;
}

#inout_table tbody td {
    border: 1px solid var(--gray1-color);
    text-align: center;
    border-collapse: collapse;
    padding: 10px;
    color: var(--black-color);
}

#inout_table tbody td:nth-child(2) {
    text-align: right;
}

.form-box label {
    font-size: var(--f-caption);
}

.container-list {
    width: 100%;
    padding-top: 0px;
}

button.show-all-inout {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 50px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
}

.orange-color {
    color: var(--orange-color);
}

.stock {
    color: var(--blue-color);
    font-weight: 500;
}

.release {
    color: var(--pink-color);
    font-weight: 500;
}

.production {
    color: var(--green-color);
    font-weight: 500;
}

.no-results-msg {
    text-align: center;
    padding: 80px;
    width: 100%;
    background: url(../images/icon/grey/ic_info.png)no-repeat center top 30px /40px;
    padding-bottom: 0px;
}

.cod-inputboxwr {
    position: relative;
    width: calc(80% - 5px);
    margin-right: 5px;
}

.cod-inputboxwr .camerabtn {
    position: absolute;
    right: 5px;
    width: 40px;
    height: 40px;
    margin-top: 0px;
    top: 5px;
    border-radius: 6px;
    background: url(../images/icon/grey/ic_camera.png)no-repeat center center / 32px var(--background-color);
    border: 1px dashed var(--gray1-color);
}

/* 출하등록 */
.primary-color {
    color: var(--green-color);
}

.inout-wrbox {
    position: relative;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    padding-top: 0px;
}

.inout-wrbox tr:first-child {
    position: sticky;
    top: 0;
    left: 0;
    border-bottom: 1px solid var(--gray1-color);
}

.inout-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 20px;
}

.inout-header label {
    font-size: var(--f-small);
    font-weight: 600;
    color: var(--black-color);
}


#bigo,
#ord_bigo,
#add_bigo {
    width: 100%;
    height: 60px;
    transition: width 0.5s, height 0.5s;
    font-size: var(--f-small);
    color: var(--black-color);
    font-weight: 500;
    line-height: initial;
}

textarea::placeholder {
    font-size: var(--f-small) !important;
    color: var(--black-color) !important;
    font-weight: 500 !important;
}

#bigo:focus,
#ord_bigo:focus,
#add_bigo:focus {
    width: 100%;
    height: 150px;
}

#inout_table_wrapper {
    margin-top: 10px;
    width: 100%;
    display: block;
    overflow: hidden;
    overflow-x: auto;
}

.header-history-webkit-tap-highlight-color {
    background-color: transparent !important;
}

/* 페이지네이션 */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: 1px solid var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: none !important;
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    font-size: 0;
    background: url(/assets/images/icon/grey/ic_arleft.png)no-repeat center center / 26px !important;
    width: 38px;
    height: 36px;
    cursor: pointer !important;
    margin: 0 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 0;
    background: url(/assets/images/icon/grey/ic_arright.png)no-repeat center center / 26px !important;
    width: 38px;
    height: 36px;
    cursor: pointer !important;
    margin: 0 5px;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 !important;
}

/* 창고별 조회 */
.searchwrapper {
    width: 100%;
    margin: 0;
    padding-bottom: 0px;
    padding-top: 0px;
}

.searchwrapper select {
    width: 100%;
}

.searchwrapper .form-box {
    display: initial;
    padding: 0px;
}

.search-all {
    margin-bottom: 0px !important;
    margin-top: 10px;
}

.pagemove-btn {
    width: 100%;
    border-radius: 4px;
    padding: 2px;
    font-size: var(--f-caption);
    background: var(--secondary-color);
    font-weight: 600;
    color: #6c9632;
}

/* 업무기록 */
.cust-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.dataTables_wrapper .dataTables_info {
    text-align: left !important;
}

.date-inputbox,
.flex-inputbox {
    display: flex;
}

.date-inputbox input {
    width: 50%;
    cursor: pointer;
}

.date-inputbox input:first-child {
    margin-right: 10px;
}

.storage-listbox select {
    width: 100%;
    border-radius: 6px;
}

.flex-inputbox select {
    width: 100%;
    border-radius: 6px;
}

.flex-minibox:first-child {
    width: 30%;
    margin-right: 10px;
}

.flex-minibox:nth-child(2) {
    width: 70%;
    display: block;
}

.flex-minibox:nth-child(2) span {
    margin-right: 0px;
}

.inner-bgbox {
    background-color: var(--background-color);
    border-radius: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    margin: 8px 0;
}

.storage-listbox,
.flex-inputbox,
.date-wrbox {
    padding: 8px 0;
}

.storage-listbox {
    padding-top: 0px;
}

.product-codewr.storage-wrbox.comingbox {
    margin: 10px 0;
}

.product-codewr input#search_cd {
    margin-bottom: 10px;
}

#inout_list {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    text-align: left;
    border: 1px solid var(--gray1-color);
    white-space: nowrap;
    position: relative;
}

#inout_list thead tr {
    background-color: var(--background-color);
    font-weight: 600;
    width: 100%;
}

#inout_list tbody td {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

#inout_list thead tr th {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--black-color);
}

#inout_list td {
    padding: 15px;
}

#inout_list thead {
    float: left;
    position: sticky;
    top: 0px;
    left: 0;
    box-shadow: 2px 0px 6px 0px rgb(174 178 196 / 20%);
    border-right: 1px solid var(--border-color);
}

#inout_list thead tr,
#inout_list thead tr th {
    display: block;
    box-sizing: border-box;
}

#inout_list tbody {
    display: block;
    white-space: nowrap;
    overflow-x: scroll;
    touch-action: pan-x;
    cursor: grab;
}

#inout_list tbody tr {
    display: inline-block;
}

#inout_list tbody tr:last-child {
    width: 100%;
}

#inout_list tbody tr td {
    color: var(--black-color);
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 51px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

#inout_list thead tr th {
    width: 100% !important;
    color: var(--black-color);
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 51px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

#inout_list thead tr th:last-child {
    border-bottom: 0px;
}

#inout_list tbody tr:last-child td {
    border-right: none;
}

body:has(.custom-text) .dataTables_wrapper {
    margin-top: 20px;
}

#inout_list_wrapper .dataTables_wrapper label {
    margin-bottom: 0px;
    text-align: left;
}

.dataTables_wrapper .dataTables_length select {
    width: 80px;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    height: 40px;
    box-shadow: none;
    margin: 0 5px;
    margin-left: 0px;
    line-height: 35px;
}

#inout_list_wrapper .dataTables_length {
    text-align: left;
}

.form-box select {
    box-shadow: var(--box-shadow);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}

#inout_list tbody:before {
    content: "";
    position: absolute;
    width: 81px;
    height: 7px;
    bottom: 1px;
    left: 1px;
    background-color: var(--background-color);
    border-right: 1px solid var(--border-color);
}

.product-codewr {
    padding: 10px 0;
    width: 100%;
}

.select2-container--default .select2-selection--single {
    height: 50px;
    border: 1px solid var(--gray1-color);
    font-size: var(--f-small);
    box-shadow: var(--box-shadow);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 50px;
    line-height: 45px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url(/assets/images/icon/grey/ic_ardown.png) no-repeat right 5px center / 24px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    font-size: 13px;
    padding-right: 50px;
    font-weight: 600;
    color: var(--black-color) !important;
}

.storage .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 58px;
    display: block;
    font-weight: initial;
    font-weight: 600;
    color: var(--black-color);
}

.select2-container {
    margin-right: 5px;
    display: block;
}

.prodcode-selectbox {
    padding-left: 12px;
    font-size: var(--f-small);
    padding-right: 30px;
    padding-right: 53px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
}

#inout_list_length .select2-container--default .select2-selection--single {
    height: 40px !important;
    box-shadow: none;
    margin-left: 0px;
    width: 100%;
}

#inout_list_length .select2-container .select2-selection--single .select2-selection__rendered {
    padding: initial;
}

#inout_list_length .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    top: 17px;
}

#inout_list_length .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 40px;
    line-height: 35px;
    padding-left: 8px;
}

#inout_list_length .select2-container {
    margin-left: 0px !important;
    margin-right: 5px;
}

#inout_list_length .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url(/assets/images/icon/grey/ic_ardown.png) no-repeat right 5px center / 24px;
    width: 30px;
}

.select2-search--dropdown .select2-search__field {
    height: 40px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    padding-left: 12px;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border: 1px solid var(--primary-color);
}

.select2-results__option {
    height: 50px;
    font-size: var(--f-small);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-results__option--disabled {
    color: var(--font-color);
    font-size: var(--f-small);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--secondary-color);
    font-weight: 600;
    color: var(--black-color);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--primary-color);
    color: #fff;
}

.select2-dropdown {
    border: 1px solid var(--gray1-color);
    box-shadow: var(--box-shadow2);
    border-radius: 6px;
}

.product-codewr .select2-container,
#search_cd {
    margin-bottom: 10px;
}

.product-codewr .select2-container:nth-child(2),
#search_des {
    margin-bottom: 0px !important;
}

.custom-text {
    position: absolute;
    top: 3px;
    right: 0px;
    font-size: var(--f-caption);
    color: var(--font-color);
    padding: 5px 0px;
    border-bottom: 1px solid var(--primary-color);
}

/* 업무기록-데이터피커 */
.date-inputbox input {
    background: url('/assets/images/icon/grey/ic_calendar.png') no-repeat right 14px center / 20px;
}

.ui-widget-header {
    border: none !important;
    background: var(--white-color) !important;
}

.ui-datepicker .ui-datepicker-title span {
    color: var(--black-color) !important;
}

.ui-widget-header .ui-icon {
    filter: invert(100%) !important;
}

.ui-datepicker-week-end span {
    color: var(--pink-color) !important;
}

.ui-datepicker-week-end:last-child span {
    color: var(--blue-color) !important;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--gray1-color) !important;
    box-shadow: var(--box-shadow2);
    border-radius: 6px;
    max-width: 390px;
    left: 50% !important;
    transform: translate(-50%) !important;
    padding: 10px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center !important;
    padding: 0.5em 0.4em !important;
    font-size: var(--f-normal);
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: none !important;
    background: none !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid var(--border-color) !important;
    background: var(--secondary-color) !important;
    color: var(--black-color) !important;
    font-weight: 600 !important;
    border-radius: 4px;
}

.ui-datepicker {
    width: 24.5em !important;
}

.ui-datepicker select {
    line-height: initial;
}

.ui-datepicker td {
    padding: 2px !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 36% !important;
    height: 40px;
    margin-right: 10px !important;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    color: var(--black-color);
    font-weight: 600;
    font-size: var(--f-normal) !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 20px !important;
}

.ui-datepicker .ui-datepicker-prev {
    left: 10px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 10px !important;
}

.ui-datepicker th span {
    font-size: var(--f-normal);
}

.ui-datepicker-header a:hover,
.ui-datepicker-header a:focus {
    border: none !important;
    background-color: none !important;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover {
    color: var(--primary-color);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: none !important;
    background: var(--primary-color) !important;
    font-weight: 600 !important;
    border-radius: 4px;
    color: var(--white-color) !important;
}

/* 일지목록 */
.insp-tablewr {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px dashed var(--gray1-color);
}

.insp-tablewr.dataTable>thead>tr>th:nth-child(1) {
    width: 10% !important;
}

.code-fullwidth {
    width: 100% !important;
    margin-top: 10px !important;
}

.insp-table td:first-child {
    width: 15% !important;
}

.insp-table td:last-child {
    border-right: none;
}

table.dataTable.insp-table>thead>tr>th {
    border-bottom: none;
    white-space: nowrap;
}

table.dataTable.insp-table>thead>tr>th:last-child {
    border-right: none;
}

#insp_list {
    width: 100% !important;
}

.insp-tablewr .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    border-bottom: none;
}

.insp-code {
    padding: 8px 0;
}

/* 발주요청 */
#order_list {
    border-bottom: 0;
    border-right: 0;
    margin-top: 10px;
    width: 100% !important;
    display: block;
    overflow: hidden;
    overflow-x: auto;
}

#order_list_wrapper {
    margin-top: 15px;
}

.order-table {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--gray1-color);
}

.order-table .date-inputbox input {
    font-weight: 600;
    color: var(--black-color);
    height: 50px;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    background: none;
}

.order-table .date-inputbox button {
    width: 25%;
    font-size: var(--f-normal);
    background-color: var(--font-color);
    color: var(--white-color);
    height: 50px;
    border-radius: 6px;
    margin-left: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-table .date-inputbox button img {
    width: 28px;
    height: 28px;
}

.order-table .waiting {
    color: var(--font-color);
}

.order-table .complete {
    color: var(--green-color);
}

.order-table .hold {
    color: var(--orange-color);
}

/* 출하일지 */
.insp-dateinput {
    margin-right: 10px;
}

.test-recordbtn {
    height: 60px;
    border-radius: 6px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
}

#insp_list td {
    padding: 10px;
}

#insp_list tbody {
    overflow-x: scroll;
    touch-action: pan-x;
    cursor: grab;
}

.full-infputform {
    padding-top: 8px;
    padding-bottom: 10px;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable {
    margin-left: 0;
    margin-right: 0;
    width: -webkit-fill-available !important;
    padding-right: 0;
}

.dataTables_scrollHeadInner {
    width: -webkit-fill-available !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
}

html {
    -webkit-tap-highlight-color: transparent !important;
}

.mouse-scroll #insp_list_wrapper table.dataTable thead>tr>th.sorting {
    padding-right: 80px;
}

.insp-tablewr #insp_list_wrapper table.dataTable thead>tr>th.sorting {
    padding-right: 60px;
}

.form-box input {
    font-weight: 600 !important;
    color: var(--black-color);
}

.modal-tablebox.form-box {
    padding: 10px !important;
}

.cust-modal {
    background-color: rgb(0 0 0 / 0%) !important;
}

.modal #remarks:hover {
    border: 1px solid var(--gray1-color);
}

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 전체화면 스크롤 중복 */
body:has(.home) .wrapper {
    min-height: calc(100vh - 60px);
    height: 100%;
    max-height: 100%;
}

.wrapper.list {
    overflow-y: auto;
}

/* 스티키박스(고정버튼) */
.page-in-header {
    position: fixed;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}

.page-in-header .header-inner {
    max-width: 390px;
    margin: 0 auto;
    position: relative;
}

.wrapper.list:has(.page-in-header) {
    padding-top: 60px;
}

/* 스티키박스 위치조정 */
body:has(.save-sticky) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

main:has(.save-sticky) {
    max-height: 100vh;
}

/* 상세정보 모달: 품목명 글자 다 보이게 */
.modal-content .form-box .inp-fulltxt{
    min-height: 50px;
    height: auto;
    word-break: keep-all;
    line-height: 1.75;
    padding: 12px 14px;
    color: var(--black-color);
    background-color: var(--background-color);
    border: 1px solid var(--gray1-color);
    border-radius: 6px;
    font-weight: 600;
    box-shadow: var(--box-shadow);
}

/* 반응형 */
@media all and (max-width:479px) {
    .wrapper {
        min-height: 100vh;
        height: auto;
        max-width: 100%;
        width: 100%;
    }

    main,
    header {
        max-width: 100%;
        width: 100%;
    }

    .home {
        min-height: auto;
        height: auto;
    }

    body:has(.home) .wrapper {
        min-height: 92.95vh;
    }

    .select2-container {
        display: block;
    }

    .page-in-header .header-inner {
        max-width: 479px;
    }
}

@media all and (max-width:360px) {
    .modal-content {
        width: 95%;
    }
}

@media all and (max-width:280px) {
    .home-list li:has(.container) .list-icon {
        bottom: 15px;
        right: 13px;
    }

    #datepicker.date-caption {
        display: block;
    }

    #toast-container.toast-top-center>div,
    #toast-container.toast-bottom-center>div {
        width: 250px;
        text-align: left;
    }

    .infor-table th {
        white-space: nowrap;
        font-size: var(--f-caption);
    }

    #inout_table th,
    .infor-table td,
    #inout_table td,
    #inout_table,
    .infor-table {
        font-size: var(--f-caption);
    }

    .form-box,
    .storage-wrbox {
        padding: 8px 10px;
    }

    .form-top {
        padding: 10px;
    }

    .container-list {
        padding: 20px 10px;
        padding-bottom: 0px;
    }

    .home-top,
    .mypage-top {
        padding: 15px 10px;
    }

    .home-list {
        padding: 0 10px;
        margin-top: 10px;
    }

    .no-results-msg {
        padding: 80px 50px;
    }

    .date-inputbox input,
    .form-box input {
        font-size: var(--f-caption);
    }

    .ui-widget.ui-widget-content {
        width: 93% !important;
    }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        font-size: var(--f-caption) !important;
        padding: 7px !important;
    }

    .home-list li:has(.container) h5 {
        font-size: var(--f-small);
    }

    .home-list li:has(.my) h5 {
        font-size: var(--f-middle);
    }

    .home-list li:has(.container) {
        padding: 15px 10px;
        height: 70px;
    }

    .storage-wrbox.second .form-box:first-child {
        width: 60%;
    }

    .storage-wrbox .form-box:last-child h5 span {
        font-size: var(--f-small);
    }

    .storage-wrbox .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: var(--f-small);
    }
}