@charset "UTF-8";
@import url('./submit-tab.css');

.data-submit-container {
    position: relative;
}

.data-submit-container:not(.white-mask)::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1000%;
    height: 1000%;
    background: #F7F8FA;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}

.data-submit-container.top-gap::after {
    top: 3.45rem;
}


.data-submit-container input[type="text"].readonly {
    border-color: #CED4DA;
    background: #f5f7fa;
}
/* wrap width */
.data-submit-container .submit-sm-wrap,
.data-submit-container .submit-md-wrap,
.data-submit-container .submit-lg-wrap { position:relative; margin:0 auto; }
.data-submit-container .submit-sm-wrap { max-width:105rem !important; }
.data-submit-container .submit-md-wrap { max-width:140rem !important; }
.data-submit-container .submit-lg-wrap { max-width: 180rem !important; }

@media (min-width: 1950px){
    .data-submit-container .submit-lg-wrap { max-width: 200rem !important; }
}

.mg-content-wrap .data-submit-container .submit-sm-wrap,
.mg-content-wrap .data-submit-container .submit-md-wrap,
.mg-content-wrap .data-submit-container .submit-lg-wrap {
    max-width: none !important;
}

    /* common component */

.data-submit-container .submit-shadow {
    box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
}

.data-submit-container .description-text {
    color: #DBAB9B;
    white-space: normal;
}

.data-submit-container .description-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #A0AEC9;
    font-size: 1.7rem;
}

.data-submit-container .description-dropdown .hidden-description {
    position: absolute;
    bottom: -100%;
    left: 30px;
    right: 0;
    width: 0;
    padding: 0.8rem;
    min-width: 25rem;
    max-width: 45rem;
    border: 1px solid #eee;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 1.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 1;
    visibility: hidden;
    word-break: keep-all;
    white-space: normal;
    z-index: 10;
}

.data-submit-container .description-dropdown:hover .hidden-description,
.data-submit-container .description-dropdown:focus .hidden-description {
    width: 100%;
    opacity: 1;
    visibility: inherit;
}

.data-submit-container .submit-flex {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.data-submit-container .submit-form-section {
    position: relative;
}

.data-submit-container .submit-responsive-form .submit-form-section + .submit-form-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.data-submit-container .submit-responsive-form .submit-form-section + .submit-form-section.gap-sm {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.submit-responsive-form .submit-form-section:last-child {
    margin-bottom: 0 !important;
}


.data-submit-container .submit-responsive-card .submit-card + .submit-card {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.data-submit-container .submit-responsive-card .submit-card + .submit-card.gap-sm {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.submit-responsive-form .submit-responsive-card:last-child {
    margin-bottom: 0 !important;
}


.data-submit-container .form-label {
    /*display: block;*/
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    font-size: inherit;
    color: #111;
    white-space: nowrap;
}

.data-submit-container .form-label.card-label {
    margin-bottom: 0;
}


.data-submit-container .form-label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
    font-weight: 500;
}

.data-submit-container .form-label.card-label strong {
    /*font-weight: 600;*/
}

.data-submit-container .form-label.sub-card-label strong {
    color: #555;
}

.data-submit-container .mg-form-wrap {
    width: 100%;
}

.data-submit-container .mg-input-group-text {
    font-weight: normal;
    font-size: 1.5rem;
}

.data-submit-container .submit-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #cbd0dd;
    border-radius: 6px;
    padding: 1rem 2.4rem; /* 2rem × 0.95, 2.4rem × 0.95 */
}

.data-submit-container .submit-card.border-point {
    border: 2px solid #EBA346;
}


.data-submit-container .submit-card .row > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 1.6rem; /* 1.6rem × 0.95 */
    padding-left: 1.6rem; /* 1.6rem × 0.95 */
    margin-top: 0;
}

.data-submit-container .submit-card .submit-card-header,
.data-submit-container .submit-card .submit-card-body,
.data-submit-container .submit-card .submit-card-footer {
    position: relative;
    padding: 1.5rem 0;
}

.data-submit-container .submit-card .submit-card-header.bg-white-gray,
.data-submit-container .submit-card .submit-card-body.bg-white-gray,
.data-submit-container .submit-card .submit-card-footer.bg-white-gray {
    background-color: #F9F9F9 !important;
}

.data-submit-container .submit-card .submit-card-header {
    padding-bottom: 1rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid #cbd0dd;
}

.data-submit-container .submit-card .submit-card-header:first-child {
    border-radius: 6px 6px 0 0;
}

.data-submit-container .submit-card .submit-card-body {
    padding-top: 2rem;
    padding-bottom: 2rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.data-submit-container .submit-card .submit-card-footer {
    background-color: #fff;
    border-top: 1px solid #cbd0dd;
}

.data-submit-container .submit-card .submit-card-footer:last-child {
    border-radius: 0 0 6px 6px;
}

.data-submit-container .submit-card .submit-card-sm-title {
    font-size: 1.8rem;
    color: #333333;
}



.data-submit-container .container-site-btn {
    border-radius: 5px;
    line-height: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.7rem;
    display: inline-block;
    min-width: 11rem;
    padding: 0.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 500;
    margin: 0 0.25rem;
    border: 1px solid #2584d6;;
    color: #fff;
    background: #2584d6;
}
.data-submit-container .container-site-btn.default {
    color: #000;
    background: #fff;
}

.data-submit-container .container-site-btn.lg {
    min-width: 15rem;
}

.data-submit-container .container-site-btn:hover, .data-submit-container .container-site-btn:focus {
    transform: scale(102%);
}


.submit-checked-section.checked, tr.submit-checked-section.checked > td {
    background-color: #F1F5FD;
}

.submit-checked-section.disabled.checked, tr.submit-checked-section.disabled.checked > td {
    background-color: #E3E6EDFF;
}

.badge-component {position: relative;padding: .4rem 0.6rem .3rem;background: #EEF1FE;border-radius: 4px;font-size: 1.3rem;font-weight: 500;line-height: 1.6rem; }
.badge-component.danger {background: #FBE5E5;color: #F87373 !important; }
.badge-component.primary {background: #E7EFFB;color: #145CD6 !important; }
.badge-component.success {background: #E5F4F0;color: #007C64 !important; }
.badge-component.info {background: #E4F7F9; color: #333 !important; }
.badge-component.warning {background: #FFF4DC; color: #9a7e2d !important; }

.container-btn { vertical-align: middle; padding: 0.6rem 1.3rem; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #555; font-size: 1.6rem; font-weight: 500; text-align: center; width: max-content; -webkit-transition: all .25s; transition: all .25s; white-space: nowrap; }
.container-btn.sm { font-size: 1.4rem; padding: .7rem .8rem; }
.container-btn:hover, .data-submit-container .container-btn:focus {border-color:#555; color:#111;}
.container-btn-group { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
.container-btn-group .container-btn:not(:last-child) { margin-right: 0.5rem; }
.container-btn.dark {border-color:#333;background:#333;color:#fff;}
.container-btn.dark:hover, .data-submit-container .container-btn.dark:focus {background:#fff;color:#333;}
.container-btn.primary-line {border-color:#157cd6; color:#157cd6;}
.container-btn.primary-line:hover, .data-submit-container .container-btn.primary-line:focus {background:#157cd6;color:#fff;}
.container-btn.primary {border-color:#157cd6; background: #157cd6; color:#fff;}
.container-btn.primary:hover, .data-submit-container .container-btn.primary:focus {background:#fff;color:#157cd6;}
.container-btn.danger {border-color:#f69c4c; background: #f69c4c; color:#fff;}
.container-btn.danger:hover, .data-submit-container .container-btn.danger:focus {background:#fff;color:#f69c4c;}
.container-btn.outline-danger {border-color:#F87373;}
.container-btn.outline-danger:hover, .data-submit-container .container-btn.outline-danger:focus {background:#F87373;color:#fff;}
.container-btn.outline-danger:hover > *, .data-submit-container .container-btn.outline-danger:focus  > * {color:#fff !important;}
.container-btn.blank { border: 0;}
.container-btn.blank:hover, .data-submit-container .container-btn.blank:focus {background:#f5f7fa;}

.data-submit-container .row-item-delete-btn { padding: 1rem; border-color:#FBE2CD !important; color: #F87373 !important; background-color: #F9F9F9 !important; }
.data-submit-container .row-item-delete-btn:hover, .data-submit-container .row-item-delete-btn:focus {background:#F87373 !important;color:#fff !important;}
.data-submit-container .row-item-delete-btn:hover > *, .data-submit-container .row-item-delete-btn:focus  > * {color:#fff !important;}

.data-submit-container .row-item-add-btn {
    position: relative;
    border-radius: 4rem;
    padding: 0.825rem 1.3rem;
}

.data-submit-container .row-item-add-btn .row-item-add-icon {
    position: absolute;
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    height: 100%;
    padding: 0.86rem;
}

.data-submit-container .row-item-add-btn .row-item-add-text {
    color: #264D81;
    padding-left: 2.5rem;
}

.data-submit-container .row-item-add-btn:hover, .data-submit-container .row-item-add-btn:focus {
    border-color: #ddd;
    background-color: #fff
}

.data-submit-container .row-item-add-btn.BioProject:hover,
.data-submit-container .row-item-add-btn.bioproject:hover { background-color: #5891dc !important; border-color: #5891dc !important; }
.data-submit-container .row-item-add-btn.BioSample:hover,
.data-submit-container .row-item-add-btn.biosample:hover { background-color: #00A081 !important; border-color: #00A081 !important;}
.data-submit-container .row-item-add-btn.KRA:hover,
.data-submit-container .row-item-add-btn.kra:hover { background-color: #2BBDD1 !important; border-color: #2BBDD1 !important;}
.data-submit-container .row-item-add-btn.KEA:hover,
.data-submit-container .row-item-add-btn.kea:hover { background-color: #737EE1 !important; border-color: #737EE1 !important;}
.data-submit-container .row-item-add-btn.KCODE:hover,
.data-submit-container .row-item-add-btn.kcode:hover { background-color: #F68C2E !important; border-color: #F68C2E !important;}
.data-submit-container .row-item-add-btn.KNA:hover,
.data-submit-container .row-item-add-btn.kna:hover{ background-color: #E16AA5 !important; border-color: #E16AA5 !important;}
.data-submit-container .row-item-add-btn.KPOP:hover,
.data-submit-container .row-item-add-btn.kpop:hover { background-color: #E17373 !important; border-color: #E17373 !important;}
.data-submit-container .row-item-add-btn.KMAP:hover,
.data-submit-container .row-item-add-btn.kmap:hover { background-color: #69B578 !important; border-color: #69B578 !important;}
.data-submit-container .row-item-add-btn.KBI:hover,
.data-submit-container .row-item-add-btn.kbi:hover { background-color: #F8AF0D !important; border-color: #F8AF0D !important;}
.data-submit-container .row-item-add-btn.KPC:hover,
.data-submit-container .row-item-add-btn.kpc:hover { background-color: #E5325B !important; border-color: #E5325B !important;}
.data-submit-container .row-item-add-btn.GeNA:hover,
.data-submit-container .row-item-add-btn.gena:hover { background-color: #7781AC !important; border-color: #7781AC !important;}
.data-submit-container .row-item-add-btn.KVar:hover,
.data-submit-container .row-item-add-btn.kvar:hover { background-color: #2B9ED1 !important; border-color: #2B9ED1 !important;}
.data-submit-container .row-item-add-btn.KSO:hover,
.data-submit-container .row-item-add-btn.kso:hover { background-color: #F66446 !important; border-color: #F66446 !important;}

.data-submit-container .row-item-add-btn:hover .row-item-add-text {
    color: #fff;
}

.data-submit-container .row-item-add-btn:hover .row-item-add-icon {
    color: #555555;
    /*background-color: #264D81;
    color: #fff;
    border-color: #264D81;*/
}

.site-util-btn { position: relative; display: inline-flex; align-items: center; gap: 1rem; width: 100%; height: 100%; min-width: 20rem; min-height: 5rem; padding: .5rem 2rem; background-color: #F7F8FA; border: 1px solid #68A1CC; border-radius: 5px; font-size: 1.6rem; color: #333333; letter-spacing: -.1px; transition: .2s; }
.site-util-btn.arrow::after { position: absolute; content: ''; display: block; right: 2.25rem; top: 50%; width: 1.2rem; height: 1.2rem; border-top: 1px solid #707070; border-right: 1px solid #707070; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: all .25s; transition: all .25s; }
.site-util-btn.fill::after { border-color: #FFFFFF; }
.site-util-btn:hover, .reference-util-btn:focus { transform: scale(102%); }
.site-util-btn .icon { position: relative; width: 24px; height: 24px; border-radius: 5px; }
.site-util-btn .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.site-util-btn.BioProject .icon { background-color: #5891dc; }
.site-util-btn.BioSample .icon { background-color: #00A081; }
.site-util-btn.medical .icon { background-color: #F8AF0D; }
.site-util-btn.KRA .icon { background-color: #2BBDD1; }
.site-util-btn.etc .icon { background-color: #7781AC; }

@media all and (min-width: 992px) {
	.site-util-btn > div { max-width: 21rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
}

.alert-container { position: relative; display: block; }
.alert-container .alert-item { position: relative; display: block; padding-left: 1.2rem; line-height: 1.6; }
.alert-container .alert-item.blank-dotted {padding-left: 0;}
.alert-container .alert-item:not(.blank-dotted)::before { width: 4px; height: 4px; top: 1.1rem; background: #979797; content: ''; position: absolute; left: 0; border-radius: 50%; }

.info-msg-container { position: relative; padding: 2rem 2.5rem; border: 1px solid #C9DDEF; background: #F6F9FF; border-radius: 6px; color: #444; }
.info-msg-container.info { border: 1px solid #dddd; border-left: 3px solid #5bc0de; background: #fff; }
.info-msg-container .info-header { font-weight: 600; color: #555555; }
.info-msg-container .info-body { position: relative; padding-left: .5rem; font-size: 1.5rem; }
.info-msg-container p { line-height: 1.7; }
.info-msg-container p > .num { display: inline-block; vertical-align: middle; width: 1.8rem; height: 1.8rem; margin-right: 0.8rem; border: 1px solid #333; border-radius: 50%; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; text-align: center; letter-spacing: -0.014rem; }
.info-msg-container p:not:first-child { margin-top: 0.5rem; }

.info-msg-container.orange-type {
    border-color: #F28454;
    border-width: 1px;
    background:#F8F4F4;
}

ul.info-msg-items-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

ul.info-msg-items-container li {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 0.25rem;
    color: #576C9D;
    font-size: 1.5rem;
}

ul.info-msg-items-container li.lg {
    color: #333;
    font-size: 1.6rem;
}



.data-submit-container .bottom-box-shadow { box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); }
.data-submit-container .input-control { width: 100%; border-radius: 5px; font-size: 1.5rem; }

.data-submit-container .calendar-container { padding: 1px; font-size: 1.55rem; color: #555; background-color: #fff; background-image: none; border: 1px solid #ddd; border-radius: 5px; max-width: 15rem; height: 4rem; }
.data-submit-container .calendar-container input[type="text"] { width: calc(100% - 3.4rem); height: 3.6rem; padding-right: 0; border: none; }
.data-submit-container .calendar-container button { position: relative; width: 2rem; color: #777; font-size: 2rem; }
.data-submit-container .calendar-container button i { position: absolute; top: 50%; left: 40%; -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%); }

.data-submit-container .required-icon { content: '\ea81'; font-family: 'remixicon' !important; display:inline-block;vertical-align: middle; margin-left:0.8rem; font-size:1.4rem;font-weight:600; }
.data-submit-container .required, .data-submit-container .optional{ display:inline-block;vertical-align: middle; margin-left:0.25rem; font-size:1.4rem;font-weight:600;line-height:2.2rem;text-align: center;letter-spacing: -0.014rem; color: #2196f3; }
.data-submit-container .optional { color: #777; }

.data-submit-container .note { display: flex; flex-direction: row; align-items: baseline; padding: 0.8rem 1rem; background-color: #E5F3FA; letter-spacing: -.05rem; line-height: 1.2; margin: 0; border-radius: 3px; }
.data-submit-container .note.note-lg { padding: 2.5rem 3rem; }
/*.data-submit-container .note { display: flex; flex-direction: column; align-items: start; padding: 0.8rem 1rem; background: #F7F8FA; letter-spacing: -0.1rem; line-height: 1.2; margin-bottom: 2.5rem; border: 1px solid #ddd; border-top: 0; }*/
.data-submit-container .note .note-icon { position: relative; color: #D68B07; margin-right: 0.5rem; white-space: nowrap; }
.data-submit-container .note.note-lg .note-icon { margin-right: 1rem; }
.data-submit-container .note .note-icon, .data-submit-container .note .note-description { font-size: 1.6rem; }
.data-submit-container .note .note-icon.note-lg, .data-submit-container .note.note-lg .note-description { font-size: 1.7rem; }
.data-submit-container .note .note-icon [class^="ri-"], [class*=" ri-"] { margin-right: 0.25rem; }
.data-submit-container .note .note-description { display: block; padding-left: 0.5rem; color: #444; }
.data-submit-container .note .note-description.point { color: #418EA2; }



@media (min-width: 768px) {
    .data-submit-container .note { padding: 1rem 2rem; }
    .data-submit-container .note .note-icon { margin-bottom: 0; }
    .data-submit-container .note .note-description { padding-left: 0; }
}

.data-submit-container ul.choose-group { padding: 0 0 .6rem .5rem; }
.data-submit-container ul.choose-group > li + li { margin-top: 1.2rem; }
.data-submit-container ul.choose-group input[type="radio"] { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0); color: #000; background: none; }
.data-submit-container ul.choose-group input[type="radio"] + label { display: inline-block; vertical-align: middle; position: relative; padding-left: 24px; font-size: 1.6rem; line-height: 1.9rem; letter-spacing: -0.032rem; cursor: pointer; }
.data-submit-container ul.choose-group input[type="radio"] + label::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 1px solid #B6B6B6; border-radius: 50%; }
.data-submit-container ul.choose-group input[type="radio"]:checked + label::before { border: 6px solid #155CD6; }


/* title */
.data-submit-container .container-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2.1rem 2.8rem 2rem;
    border: 1px solid #ddd;
    /*border-radius: 0 0 24px 24px;*/
    border-radius: 2rem !important;
    background: #fff;
    font-size: 1.8rem;
    line-height: 2.6rem;
    /*box-shadow: 0 0 4px 0.5px #dddddd !important;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgb(0, 0, 0, 0.08);
}

.data-submit-container:not(.top-gap) .container-title {
    border-radius: 0 0 2.4rem 2.4rem !important;
    border: 0 !important;
}



.data-submit-container .container-title.deactivate {
    border: 1px solid #A0AEC9 !important;
    background: #EAECEF !important;
    color: #555 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

.data-submit-container .container-title .small-title {
    font-weight: normal;
    font-size: 1.5rem;
}

.data-submit-container .container-title .right-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap:1rem;
}

.data-submit-container .container-title .status {
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}

.data-submit-container .container-title .status i {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.8rem;
    border-radius: 50%;
    background: #A0AEC9;
    color: #fff;
    font-weight: 400;
}

.data-submit-container .container-title .status i.reject {
    background: #F87373;
}

.data-submit-container .container-title .status i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.data-submit-container .container-sub-title {
    position: relative;
    display: block;
    color: #111;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.data-submit-container .container-sub-title.point {
    color: #1A3871;
}

.data-submit-container .container-sub-title.sm {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 1.3rem;
}


/* accordion container */
.data-submit-container .accordion-container { margin-bottom:3rem; }
.data-submit-container .accordion-container > li { margin-bottom:3rem; padding:0 2.8rem;border:1px solid #ddd;border-radius:10px;background:#fff; box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); }
.data-submit-container .accordion-container > li:first-child { margin-top: 2rem; }
.data-submit-container .accordion-container .accordion-header {position:relative;width:100%;height:6.4rem;font-size:2rem;font-weight:700;text-align:start;letter-spacing: -0.02rem; display: flex; align-items: center; }
.data-submit-container .accordion-container .accordion-header .index {display:block;vertical-align: middle;width:2.4rem;height:2.4rem;border:1px solid #333;border-radius: 50%;font-size:1.4rem;font-weight:600;line-height:2.2rem;text-align: center;letter-spacing: -0.014rem; margin-right: 0.8rem; }
.data-submit-container .accordion-container .accordion-header .index.sub { width: auto; padding: 0 0.75rem; border-radius: 10px; }
.data-submit-container .accordion-container .accordion-header:not(.fixed)::after {content:"\ea78";display:inline-block;vertical-align:middle;position:absolute;right:0;top:50%;font-size:2.4rem;font-weight:400;font-family: 'remixicon' !important;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all .25s;transition: all .25s;}
.data-submit-container .accordion-container .close .accordion-header:not(.fixed)::after {-webkit-transform: translateY(-50%) rotate(0.5turn);transform: translateY(-50%) rotate(0.5turn);}
.data-submit-container .accordion-container .accordion-body { padding:2.5rem 0 3.4rem;border-top:1px solid #ddd; }
.data-submit-container .accordion-container .accordion-body:has(.popup-note) { padding-top: 0; }
.data-submit-container .accordion-container .close .accordion-body {height:0;padding:0;visibility:hidden;opacity: 0;}
.data-submit-container .accordion-container .sub-title { display: flex; flex-wrap: wrap; align-items: center; font-size: 1.8rem; margin-bottom: 2rem; }

@media (min-width: 1200px){
    .data-submit-container .accordion-container > li { margin-bottom:5rem; }
}

/* required container */
.data-submit-container .required-container { display: flex; flex-wrap: nowrap; align-content: center; justify-content: end; margin: 3rem 1rem 0 1rem; }
.data-submit-container .required-container .msg { position: relative;  padding: .5rem 1.5rem .5rem 3.5rem; width: 100%; background-color: #7781AC; color: #fff; border-radius: 40px; font-size: 1.4rem; font-weight: 300; }
.data-submit-container .required-container .msg::before { position: absolute; content: '\EE59'; top: 50%; left: 1rem; font-size: 1.8rem; font-family: 'remixicon' !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

@media (min-width: 768px){
    .data-submit-container .required-container { margin: 1.5rem 1rem 0 1rem; }
    .data-submit-container .required-container .msg { width: auto; }
}


.data-submit-container .taxonomic-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.data-submit-container .taxonomic-container .taxonomic-item {
	width: 30%;  /* 각 요소가 30% 너비를 차지 (3개가 한 줄에 배치될 수 있도록 설정) */
	margin: 5px;
	background-color: #fff;
	padding: 2rem 1.5rem; /* 정사각형이 아니어도 될 경우 padding으로 내부 여백 조정 */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid #AED6CF;
	border-radius: 4px;
	font-size: 1.6rem;
	box-sizing: border-box; /* padding을 포함한 전체 크기 계산 */
	line-height: 1.2;
    word-break: break-word;
}

.data-submit-container .taxonomic-container .taxonomic-item.active {
	background: #1FB79C;
	color: #fff;
}

@media screen and (max-width: 992px) {
    .data-submit-container .taxonomic-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: .5rem;
    }

    .data-submit-container .taxonomic-container .taxonomic-item {
        width: 100%; /* 3열 그리드에 맞춰 각 요소가 100% 너비를 차지 */
    }
}

@media screen and (min-width: 1200px) {
    .data-submit-container .taxonomic-container {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .data-submit-container .taxonomic-container .taxonomic-item {
        width: auto;
        flex: 1; /* 유연하게 한 줄로 배치, 모든 요소가 동일한 비율로 나열 */
        padding: 2rem 0.5rem;
    }
}


/* upload container */
.data-submit-container .upload-container { display:block;position:relative;width:100%;height:11.1rem;padding:1rem;border:1px solid #ddd;background:#F7F8FA; cursor: pointer; }
.data-submit-container .upload-container input[type="file"] {position:absolute;top:0;left:0;width:1px;height:1px;opacity: 0;visibility: hidden;}
.data-submit-container .upload-container .description { display: flex; align-items: center; justify-content: center;  width: 100%; height: 100%; color:#888; font-size:1.6rem; letter-spacing:-0.016rem;}
.data-submit-container .upload-container img { width: 40px; margin-right: 1rem; }

.data-submit-container .upload-button-container { position: relative; cursor: pointer; display: flex; align-items: center; flex-wrap: nowrap; }
.data-submit-container .upload-button-container input[type="file"] {position:absolute;top:0;left:0;width:1px;height:1px;opacity: 0;visibility: hidden;}
.data-submit-container .upload-button-container .description { display: flex; align-items: center; justify-content: center; }
.data-submit-container .upload-button-container img { width: 40px; margin-right: 1rem; }

/* search container */
.data-submit-container .search-container { display: flex; flex-wrap: nowrap; align-items: center; }
.data-submit-container .search-container .search-btn {
    display: block;
    vertical-align: middle;
    padding: 0.6rem 1.3rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    background: #f5f7fa;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    width: max-content;
    -webkit-transition: all .25s;
    transition: all .25s;
    white-space: nowrap;
    height: 4rem;
}


/* help container */
.data-submit-container .help-container {}
.data-submit-container .help-container .help-item { margin-bottom: 1rem; }
.data-submit-container .help-container .help-item:last-child { margin-bottom: 0; }
.data-submit-container .help-container .help-item button,
.data-submit-container .help-container .help-item a { min-width: 100%; line-height: 1.8rem; }

.data-submit-container .help-container .container-btn-dwd { border-color: #BBBBBB; text-align: left; letter-spacing: -.05rem; display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem; }
.data-submit-container .help-container .container-btn-dwd img { height: 1.5rem; }

/* gbox container */
.data-submit-container .gbox-history-container { display: flex; align-items: center; }
.data-submit-container .gbox-history-container a {color:#666666;font-size:1.4rem;font-weight:300;margin-right:2rem;}
.data-submit-container .gbox-history-container a:hover{text-decoration: underline;}

.data-submit-container .gbox-tree-container {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.data-submit-container .gbox-tree-container .gbox-tree  {
    display: block;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    padding: 1rem 0 1rem 2.5rem;
    overflow: auto;
}

.data-submit-container .gbox-tree-container .gbox-tree.fullscreen {
    max-height: 500px;
}

.data-submit-container .gbox-tree-container .gbox-btn-group  {
    position: absolute;
    top: 1rem;
    right: 3rem;
}

.data-submit-container .gbox-tree-container .gbox-btn-group .gbox-btn-item  {
    display: inline-block;
    line-height: 2.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.5rem;
    padding: 0 1rem;
    text-align: center;
    vertical-align: middle;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 500;
    margin: 0;
    background: #fff;
    color: #333333;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
}



/* spread container */
.data-submit-container .spread-container {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 10px;
    /*overflow: hidden;*/
    /*background: #fff;*/
    z-index: 0;
    box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
}

/* two container */
.data-submit-container .submit-two-container { position: relative; display: block; }
.data-submit-container .accordion-info { display: block; margin-bottom: 1rem; font-size: 1.5rem; color: #2273A2; }

@media all and (min-width: 992px) {
	.data-submit-container .submit-two-container { display: flex; align-items: start; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; margin-bottom: 0; }
	.data-submit-container .submit-two-container > li { flex: 0 0 calc(50% - .5rem); }
	.data-submit-container .submit-two-container.having-mh > li { min-height: 22.5rem; }
	.data-submit-container .submit-two-container > div { flex: 0 0 calc(50% - .5rem); }
	.data-submit-container .submit-two-container > li:first-child { margin-top: 0; }
	.data-submit-container .submit-two-container > li.full { flex: 1 0 100%; }
	/*.data-submit-container .submit-two-container .agree.ver2 .item { max-height: 15.85rem; padding: 2rem 2rem 0; overflow-y: auto; }*/
	.data-submit-container .submit-BioProject .btn_align { margin-bottom: 2.5rem; }
	.data-submit-container .is-KRA .mvh { min-height: 70rem; }
}

/* radio container */
.data-submit-container .radio-container, .data-submit-container .checkbox-container  {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.data-submit-container .radio-container.default, .data-submit-container .checkbox-container.default {
    gap: 0;
}

.data-submit-container .radio-container .radio-item, .data-submit-container .checkbox-container .checkbox-item {
    position: relative;
}

.data-submit-container .radio-container .radio-item .radio-item-label:not(.sr-only),
.data-submit-container .checkbox-container .checkbox-item .checkbox-item-label:not(.sr-only){
    position: relative;
    display: block;
    padding: 1rem 1.8rem 1rem 5rem;
    background-color: #F7F8FA;
    border-radius: 5px;
    font-size: 1.6rem;
    color: #333333;
    cursor: pointer;
}


.data-submit-container .radio-container.radio-bordered .radio-item .radio-item-label:not(.sr-only),
.data-submit-container .checkbox-container.checkbox-bordered .checkbox-item .checkbox-item-label:not(.sr-only){
    background-color: #fff;
    border: 1px solid #ddd;
}

.data-submit-container .radio-container.default .radio-item .radio-item-label:not(.sr-only),
.data-submit-container .checkbox-container.default .checkbox-item .checkbox-item-label:not(.sr-only){
    padding: 0.75rem 1.8rem 0.75rem 5rem;
    background-color: #fff;
}

.data-submit-container .radio-container .radio-item input[type="radio"] + .radio-item-label::before {
	position: absolute;
	content: '';
	top: 50%;
    transform: translateY(-50%);
	left: 1.8rem;
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid #B6B6B6;
	border-radius: 100%;
    background: #fff;
}

.data-submit-container .checkbox-container .checkbox-item input[type="checkbox"] + .checkbox-item-label::before{
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 1.8rem;
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #B6B6B6;
    background: #fff;
}

.data-submit-container .radio-container.mask .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.mask .checkbox-item input[type="checkbox"]:checked + .radio-item-label{
    background-color: #e3f5ff;
}

.data-submit-container .radio-container.mask .radio-item input[type="radio"]:checked:disabled + .radio-item-label,
.data-submit-container .checkbox-container.mask .checkbox-item input[type="checkbox"]:checked:disabled + .checkbox-item-label{
    cursor: not-allowed;
}

.data-submit-container .radio-container.BioProject .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.bioproject .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.BioProject .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.bioproject .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #5891dc !important; }
.data-submit-container .radio-container.BioSample .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.biosample .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.BioSample .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.biosample .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #00A081 !important; }
.data-submit-container .radio-container.KRA .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kra .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KRA .checkbox-item input[type="radio"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kra .checkbox-item input[type="radio"]:checked + .checkbox-item-label
{  border: 1.5px solid #2BBDD1 !important; }
.data-submit-container .radio-container.KEA .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kea .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KEA .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kea .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #737EE1 !important; }
.data-submit-container .radio-container.KCODE .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kcode .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KCODE .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kcode .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #F68C2E !important; }
.data-submit-container .radio-container.KNA .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kna .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KNA .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kna .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #E16AA5 !important; }
.data-submit-container .radio-container.KPOP .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kpop .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KPOP .checkbox-item input[type="radio"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kpop .checkbox-item input[type="radio"]:checked + .checkbox-item-label
{  border: 1.5px solid #E17373 !important; }
.data-submit-container .radio-container.KMAP .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kmap .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KMAP .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kmap .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #69B578 !important; }
.data-submit-container .radio-container.KBI .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kbi .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KBI .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kbi .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #F8AF0D !important; }
.data-submit-container .radio-container.KPC .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kpc .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KPC .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kpc .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #E5325B !important; }
.data-submit-container .radio-container.GeNA .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.gena .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.GeNA .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.gena .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #7781AC !important; }
.data-submit-container .radio-container.KVar .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kvar .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KVar .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kvar .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #2B9ED1 !important; }
.data-submit-container .radio-container.KSO .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .radio-container.kso .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.KSO .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label,
.data-submit-container .checkbox-container.kso .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label
{  border: 1.5px solid #F66446 !important; }

.data-submit-container .radio-container.default .radio-item input[type="radio"]:checked + .radio-item-label,
.data-submit-container .checkbox-container.default .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label {
    border: 0 !important;
}

.data-submit-container .radio-container .radio-item.multiple-row input[type="radio"] + .radio-item-label::before,
.data-submit-container .checkbox-container .checkbox-item.multiple-row input[type="checkbox"] + .checkbox-item-label::before{
    top: calc(1rem + 3px);
    transform: unset;
}

.data-submit-container .radio-container .radio-item input[type="radio"]:checked + .radio-item-label::before {
    border: 6px solid #155CD6;
}

.data-submit-container .radio-container .radio-item input[type="radio"]:checked:disabled + .radio-item-label::before {
    border: 6px solid #444;
}

.data-submit-container .checkbox-container .checkbox-item input[type="checkbox"]:checked + .checkbox-item-label::before{
    background-color: #155CD6;
    font-family: 'remixicon';
    content: '\EB7B';
    font-size: 1.3rem;
    color: #FFFFFF;
    text-align: center;
}

.data-submit-container .checkbox-container .checkbox-item input[type="checkbox"]:checked:disabled + .checkbox-item-label::before{
    background-color: #444;
}

.data-submit-container .radio-container .radio-item.radio-item-white .radio-item-label,
.data-submit-container .checkbox-container .checkbox-item.checkbox-item-white .checkbox-item-label{
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
}

.data-submit-container .radio-container .radio-item .radio-in-btn,
.data-submit-container .checkbox-container .checkbox-item .checkbox-in-btn{
	display: inline-block;
	height: 3rem;
	margin-left: .5rem;
	padding: 0 1rem;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	font-size: 1.5rem;
	font-weight: 500;
	color: #555555;
	letter-spacing: -.016rem;
	line-height: 2.8rem;
	transition: .25s;
}

.data-submit-container .radio-container .radio-item .radio-in-btn:hover,
.data-submit-container .radio-container .radio-item .radio-in-btn:focus,
.data-submit-container .checkbox-container .checkbox-item .checkbox-in-btn:hover,
.data-submit-container .checkbox-container .checkbox-item .checkbox-in-btn:focus {
    border-color: #000000;
}

.data-submit-container .radio-container .calendar-container { position: absolute; top: 50%; transform: translateY(-50%); left: 25rem; }

/* select container */
.data-submit-container .select-container { position: relative; display: flex; gap: .5rem; flex-wrap: wrap; }
.data-submit-container .select-container .select-item,
.data-submit-container .select-container .select-item.full { flex: 1 0 100%; }
.data-submit-container .select-container .select-item select {
	position: relative;
	width: 100%;
	height: 4.7rem;
	padding-left: 2rem;
	background: url("./../../image/service/layout/arrow_white.png") no-repeat bottom 50% right 2rem;
	background-color: #5891DC; 
	border-radius: 5px; 
	color: #FFFFFF; 
}

@media all and (min-width: 992px) {
	.data-submit-container .submit-two-container.radio-container .radio-item ~ .radio-item { margin: 0; }
	.data-submit-container .select-container { align-items: center; }
	.data-submit-container .select-container .select-item { flex: 1 0 calc(50% - 2rem); }
}



/* fancytree */
.data-submit-container .spread-container .fancytree-plain span.fancytree-active span.fancytree-title,
.data-submit-container .spread-container .fancytree-plain span.fancytree-selected span.fancytree-title,
.data-submit-container .spread-container .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title,
.data-submit-container .spread-container .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-selected span.fancytree-title {
    background-color: rgb(221, 237, 245) !important;
    color: #333 !important;
}
.data-submit-container .spread-container .fancytree-plain span.fancytree-node:hover span.fancytree-title {
    background-color: rgb(221, 237, 245) !important;
}

[class^="ri-"].attr-Group, .data-submit-container [class*=" ri-"].attr-Group {
    color: #5cacc4;
}

[class^="ri-"].attr-Mandatory, .data-submit-container [class*=" ri-"].attr-Mandatory {
    color: #8cd19d;
}

[class^="ri-"].attr-Optional, .data-submit-container [class*=" ri-"].attr-Optional {
    color: #fcb653;
}

.full-spread-screen {
    overflow: hidden !important;
}

.full-spread-screen .spread-container {
    z-index: 1100;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #f7f8fa;
    padding: 0;
}

.full-spread-screen .spread-container .spread-body {
    height: calc(100vh - 6.4rem - 6rem) !important;
}

@media (min-width: 768px) {
    .full-spread-screen .spread-container {
        padding: 1.5rem;
    }

    .full-spread-screen .spread-container .spread-body {
        height: calc(100vh - 9.4rem - 6rem) !important;
    }
}

@media (min-width: 992px) {
    .full-spread-screen .spread-container {
        padding: 2rem;
    }

    .full-spread-screen .spread-container .spread-body {
        height: calc(100vh - 10.4rem - 6rem) !important;
    }
}

.spread-container.nav--expanded .navigation {
    display: flex !important;
}

.spread-container.nav--docked .spread-body {
    padding-left: 0 !important;
    transition: padding 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.spread-container.nav--docked.nav--expanded .spread-body {
    padding-left: 321px !important;
}

.spread-container.nav--docked .nav--docked-hide {
    display: none !important;
}

.spread-container.nav--docked .nav--unDocked-hide {
    display: none !important;
}

.spread-container .spread-header {
    position: relative;
    height: 6.4rem;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 0 1rem 0 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
    z-index: 800;
}

.spread-container .spread-header .fixed {
    position: static;
    top: 0;
    left: 0;
    right: 0;
}

.spread-header .spread-header-section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}


.spread-header .spread-header-section-item {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.spread-header .spread-header-section-index {
    display: inline-block;
    vertical-align: middle;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #333;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2.2rem;
    text-align: center;
    letter-spacing: -0.014rem;
    margin-right: 0.8rem;
}

.spread-header .spread-header-section-title {
    position: relative;
    color: #0d0d0d;
    font-size: 2rem;
    line-height: 2.6rem;
    padding-left: 2rem;
    font-weight: 700;
}

.spread-header .spread-header-section-button {
    position: relative;
    height: calc(6.4rem - 1px);
    min-width: calc(6.4rem - 1px);
    text-align: center;
    font-size: 2rem;
}

.spread-header .spread-header-section-button [class^="ri-"],
.spread-header .spread-header-section-button [class*=" ri-"] {
    color: #555;
}

.spread-header .spread-header-section-gap {
    position: relative;
}

.spread-header .spread-header-section-gap:after {
    position: absolute;
    content: '';
    top: 3rem;
    left: auto;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #D3DAE6;
}

.spread-container .spread-body {
    position: relative;
    min-height: 350px;
    height: 70vh;
}

@media (min-width: 1200px){
    .spread-container .spread-body {
        min-height: 400px;
    }
}

.spread-container .spread-body .spread {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
}

.spread-container .spread .error-container {
    display: none;
    position: relative;
    min-width: 300px;
    width: 350px;
    max-width: 50vw;
    height: 100%;
    flex: 0 0 auto;
    background: #fff;
    border-right: 1px solid #ddd;
    box-shadow: 0 24px 32px 0 rgba(65, 78, 101, 0.1), 0 12px 16px 0 rgba(65, 78, 101, 0.1), 0 8px 8px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1), 0 1px 1px 0 rgba(65, 78, 101, 0.1);
    z-index: 5;
}

.spread-container .spread .error-container .ui-fancytree {
    padding: 0 0 1.5rem 2rem;
}

.spread-container .spread .error-container .ui-fancytree ul.fancytree-container ul {
    padding: 0 0 0 2px;
}

.spread-container .spread .error-splitter {
    display: block;
    flex: 0 0 auto;
    position: absolute;
    top: 0;
    right: -6px;
    width: 7px;
    height: 100%;
    /*background: url('../../image/submit/h-splitter.png') center center no-repeat transparent;
    background-size: 6px auto;*/
    z-index: 6;
    cursor: e-resize;
}

.error-container .error-header {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 5rem;
    background: #fff;
    /*border-bottom: 1px solid #ddd;*/
}

.spread-container .error-header .error-title-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 1;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.spread-container .error-header .error-title-wrap .error-icon-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    margin: 0 0.8rem;
}

.spread-container .error-header .error-title-wrap .error-icon-wrap .error-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 24px;
    height: 24px;
}


.spread-container .error-header .error-title-wrap .error-title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1rem;
    color: #0d0d0d;
    font-size: 1.6rem;
    font-weight: 500;
}

.error-container .error-header .error-button-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex-direction: row;
}

.error-container .error-header .error-button-group .container-btn {
    background: transparent;
}

.error-container .error-body {
    overflow: hidden;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 100%;
    height: calc(100% - 5rem);
}

.error-container .error-content {
    scrollbar-width: thin;
    height: 100%;
    overflow-y: auto;
}

.spread-container .spread .gc-container {
    position: relative;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    /*background: #fafbfd;*/
}

.gc-container .gc-control {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    padding: .5rem 1rem .5rem 2rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    /*box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);*/
}

.gc-container .gc-control .control-group {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.gc-container .gc-control .control-group .control-group-item {
    /*font-size: 1.7rem;*/
    height: 3.5rem;
}

.gc-container .gc-control .control-group .control-group-item [class^="ri-"],
.gc-container .gc-control .control-group .control-group-item [class*=" ri-"] {
    color: #555;
}

.gc-container .gc-control .control-group .control-group-item:not(:first-child) {
    margin-left: 0.75rem;
}

.gc-container .gc-kbds-spread {
    position: relative;
    width: 100%;
    height: calc(100% - 5rem - 35px);
    padding: .5rem 0 .5rem .5rem;
}

.gc-container .gc-kbds-spread.view {
    height: calc(100% - 35px);
}

.gc-container .gc-footer {
    position: relative;
    width: 100%;
    height: 35px;
}

.spread-container .spread-body .navigation {
    box-shadow: 0 24px 32px 0 rgba(65, 78, 101, 0.1), 0 12px 16px 0 rgba(65, 78, 101, 0.1), 0 8px 8px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1), 0 1px 1px 0 rgba(65, 78, 101, 0.1);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 5;
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    right: auto;
    left: 0;
    width: 320px;
    max-width: 80vw;
    background: #fff;
    -webkit-animation: collapsibleNavIn 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    animation: collapsibleNavIn 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    /*border-right: 1px solid #ddd;*/
    /*-webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);*/
}

@-webkit-keyframes collapsibleNavIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%); }
    75% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%); }
}

@keyframes collapsibleNavIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%); }
    75% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%); }
}

.nav-accordion-group {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.spread-container .navigation .nav-accordion {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 5rem;
    max-height: calc(100% - 5rem - 5px);
}

.spread-container .navigation .nav-splitter {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 5px;
    z-index: 6;
    cursor: n-resize;
    background: url(../../image/submit/v-splitter.png) center center no-repeat #ddd;
    background-size: auto 4px;
}

.spread-container .navigation .nav-accordion .ui-fancytree {
    padding: 0 0 1.5rem 2rem;
}

.spread-container .nav-accordion .nav-accordion-header {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 1rem;
    height: 5rem;
    border-bottom: 1px solid #ddd;
}

.spread-container .nav-accordion .nav-accordion-header button {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.spread-container .nav-accordion .nav-accordion-header button.toggle::after {content:"\ea6e";display:inline-block;vertical-align:middle;position:absolute;right:1.6rem;top:50%;font-size:2.4rem;font-weight:400;font-family: 'remixicon' !important;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all .25s;transition: all .25s;}
.spread-container .nav-accordion.active .nav-accordion-header button.toggle::after {-webkit-transform: translateY(-50%) rotate(0.25turn);transform: translateY(-50%) rotate(0.25turn);}

.spread-container .nav-accordion .nav-accordion-body {
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transform: translatez(0);
    transform: translatez(0);
    transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.spread-container .nav-accordion.active .nav-accordion-body {
    visibility: visible;
    opacity: 1;
    height: calc(100% - 5rem);
}

.spread-container .nav-accordion .nav-title-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 1;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.spread-container .nav-accordion .nav-title-wrap .nav-icon-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    margin: 0 0.8rem;
}

.spread-container .nav-accordion .nav-title-wrap .nav-icon-wrap .nav-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 24px;
    height: 24px;
}


.spread-container .nav-accordion .nav-title-wrap .nav-title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1rem;
    color: #0d0d0d;
    font-size: 1.6rem;
    font-weight: 500;
}

.spread-container .navigation .nav-footer {
    border-top: 1px solid #ddd;
}

.spread-container .navigation .nav-filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    transition: color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), background-color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    border-bottom: 1px solid #ddd;
}

.spread-container .navigation .nav-filter > a {
    position: relative;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    font-size: 1.5rem;
    letter-spacing: -0.1rem;
    padding: .75rem 1rem;
    text-align: center;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.spread-container .navigation .nav-filter > a:not(:first-child) {
    /*border-left: 1px solid #ddd;*/
}

.spread-container .navigation .nav-filter > a.active, .spread-container .navigation .nav-filter > a:hover {
    /*background-color: rgba(211, 218, 230, 0.25);*/
    color: #006BB4;
}

.spread-container .navigation .nav-filter > a.active:after, .spread-container .navigation .nav-filter > a:hover:after {
    -webkit-animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    background-color: #006BB4;
    bottom: 0;
    content: ' ';
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
}

.spread-container .navigation .horizontal-rule {
    border: none;
    width: 100%;
    height: 1px;
    background-color: #D3DAE6;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
}

.spread-container .navigation .nav-flex-item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.spread-container .navigation .nav-group {
    padding: 0.75rem 1rem;
}

.spread-container .navigation .nav-group-children {
    padding: 0;
    border: none;
    max-width: 400px;
}

.spread-container .navigation .nav-group-children .nav-group-children-item {
    font-weight: 500;
    letter-spacing: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    transition: background-color 150ms;
    position: relative;
}

.spread-container .navigation .nav-group-children .nav-group-children-item:hover {
    background-color: rgba(211, 218, 230, 0.25);
}

.spread-container .navigation .nav-group-children .nav-group-children-item-button {
    padding: .75rem 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: left;
    max-width: 100%;
    font-weight: inherit;
    color: #0d0d0d;

}

.spread-container .navigation .nav-group-children .nav-group-children-item-icon {
    margin-right: .75rem;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid #0000001a;
    border-radius: 9999px;
}

.spread-container .navigation .nav-group-children .nav-group-children-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spread-container .navigation .nav-y-scroll {
    scrollbar-width: thin;
    height: 100%;
    overflow-y: auto;
}

.spread-container .navigation .nav-y-scroll::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.spread-container .navigation .nav-y-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(105, 112, 125, 0.5);
    border: 6px solid transparent;
    background-clip: content-box;
}
.spread-container .navigation .nav-y-scroll::-webkit-scrollbar-corner,
.spread-container .navigation .nav-y-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}


.spread-container .spread-body .aside-metadata {
    box-shadow: 0 24px 32px 0 rgba(65, 78, 101, 0.1), 0 12px 16px 0 rgba(65, 78, 101, 0.1), 0 8px 8px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1), 0 1px 1px 0 rgba(65, 78, 101, 0.1);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    min-width: 400px;
    width: 400px;
    max-width: 80vw;
    height: 100%;
    z-index: 701;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
    background: #fff;
}

@media (min-width: 768px) {
    .spread-container .spread-body .aside-metadata {
        max-width: 70vw;
    }
}

@media (min-width: 992px) {
    .spread-container .spread-body .aside-metadata {
        max-width: 50vw;
    }
}


.spread-container .spread-body .aside-metadata-splitter {
    display: block;
    flex: 0 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: -10px;
    width: 15px;
    height: 100%;
    background: transparent;
    z-index: 6;
    cursor: e-resize;
}


.spread-container .aside-metadata .close-button {
    position: absolute;
    right: 2rem;
    top: 2rem;
    z-index: 4;
    font-size: 2rem;
}

.spread-container .aside-metadata .meta-header {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    padding: 2rem 3rem 2rem 2rem;
    border-bottom: 1px solid #ddd;
    /*background: #f5f7fa;*/
}

.spread-container .aside-metadata .meta-header .meta-title {
    color: #0d0d0d;
    font-size: 1.9rem;
    line-height: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.04em;
}


.spread-container .aside-metadata .meta-body {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    overflow-y: hidden;
    height: 100%;
}

.spread-container .aside-metadata .meta-body .meta-body-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
}

.spread-container .aside-metadata .meta-body .meta-body-overflow {
    scrollbar-width: thin;
    height: 100%;
    overflow-y: auto;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
    mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);*/
}

.spread-container .aside-metadata .meta-body .meta-body-content {
    padding: 2rem;
}


.spread-container .aside-metadata .meta-footer {
    background: #F5F7FA;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    padding: 1.5rem 2rem;
    border-top: 1px solid #ddd;
}

/* 임시 */
.spread-container .aside-metadata .meta-body table tr {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
}

.spread-container .aside-metadata .meta-body table th {
    margin-bottom: 1rem;
}

.spread-header .spread-header-util { width: 32px; min-width: inherit; height: 32px; margin-right: .8rem; background-color: #FFFFFF; border: 1px solid #3C8BCF; border-radius: 5px; font-size: 1.6rem; transition: .2s; }
.spread-header .spread-header-util:hover,
.spread-header .spread-header-util:focus { background-color: #3C8BCF; }
.spread-header .spread-header-util [class^="ri-"] { color: #3C8BCF; }
.spread-header .spread-header-util:hover i,
.spread-header .spread-header-util:focus i { color: #FFFFFF; }


.spread-img-popover {
    background-color: #f0f0f0;
    border: 1px solid #707070;
    box-shadow: 2px 2px 10px #707070;
    display: flex;
    flex-direction: column;
    user-select: none;
    width: fit-content;
}

.spread-img-popover .spread-img-popover-header {
    display: flex;
    justify-content: space-between;
    background-color: white;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0.5rem;
}

.spread-img-popover .spread-img-popover-header .spread-img-popover-title {
    font-size: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spread-img-popover .spread-img-popover-header .spread-img-popover-close {
    height: 100%;
    font-size: 1.8rem;
    padding: 0 .5rem;
}

.spread-img-popover .spread-img-popover-content {
    padding: 1rem;
    overflow: auto;
}



.data-submit-container .footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1020;
    border-top: 4px solid #153f90;
    background-color: #fff;
    -webkit-transition: height .3s;
    transition: height .3s;
    height: 11rem;
    min-height: 11rem;
    max-height: 300px;
}

.data-submit-container .footer-container .footer-splitter {
    display: block;
    flex: 0 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 15px;
    background: transparent;
    z-index: 201;
    cursor: n-resize;
}

.data-submit-container .footer-container.hide {
    height: 0 !important;
    min-height: 0 !important;
}

.data-submit-container .footer-container.hide .footer-splitter {
    display: none;
}



.data-submit-container .footer-container .footer-toggle-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    font-weight: 500;
    float: left;
    margin-top: -4.9rem;
    background-color: #153f90;
    color: #fff;
    padding: 1rem 1.5rem;
    border: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -2px 2px -1px rgba(152, 162, 179, 0.3), 0 -1px 5px -2px rgba(152, 162, 179, 0.3);
}

.data-submit-container .footer-container .footer-toggle-button .num {
    min-width: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 20px;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    color: #153f90;
    padding: .25rem .5rem;
    margin-right: 1rem;
}

.data-submit-container .footer-container .footer-content {
    display: block;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-container .status-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #f7f8fa;
    border-radius: 3px 25px;
    border: 1px solid #dddddd;
}

.footer-container .status-list .status-item {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 1.5rem 2.5rem;
    font-size: 1.6rem;
}

.footer-container .status-list .status-item:not(:last-child):after {
    content: '';
    position: absolute;
    border-right: 1px dashed #d9dbde;
    height: calc(100% - 2rem);
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.footer-container .status-list .status-item-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer-container .status-list .status-item-count {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
}


.footer-container .footer-button-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}






.popup-layer {
    display: none;
    position: absolute;
    top: 45px;
    width: auto;
    min-width: auto;
    height: auto;
    background: #fff;
    opacity: 0;
    z-index: 301;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 24px 32px 0 rgba(65, 78, 101, 0.1), 0 12px 16px 0 rgba(65, 78, 101, 0.1), 0 8px 8px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1), 0 1px 1px 0 rgba(65, 78, 101, 0.1);
}
.popup-layer.show {
    opacity: 1;
    display: block;
}
.popup-layer .popup-layer-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.popup-layer .popup-layer-header {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    white-space: nowrap;
    position: relative;
    padding: 1.25rem 3.5rem 1rem 2rem;
}
.popup-layer .popup-layer-header .popup-layer-title {
    color: #111;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.5px;
}
.popup-layer .popup-layer-header .popup-close {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2rem;
    color: #575756;
    padding: 0 0.75rem;
}
.popup-layer .popup-layer-header .popup-close.left {
    left: 0.5rem;
}
.popup-layer .popup-layer-header .popup-close.right {
    right: 0.5rem;
}
.popup-layer .popup-layer-header .popup-close i {
    font-size: inherit;
    color: inherit;
}
.popup-layer .popup-layer-view {
    position: relative;
    word-break: keep-all;
    word-wrap: break-word;
    padding: 1.5rem;
}
.popup-layer .popup--divider {
    border-top: 1px solid #ddd;
}




.rb-container {
	position: relative;
	display: grid;
	grid-template-areas: "rb-filter rb-data";
	grid-template-columns: 0 1fr;
	width: 100%;
	height: 100%;
    min-height: 70vh;
    overflow: hidden;
}

@media all and (min-width: 992px) {
    .rb-container {
        grid-template-columns: 260px 1fr;
    }
}

.rb-filter-container {
	grid-area: rb-filter;
	display: none;
}

@media all and (min-width: 992px) {
    .rb-filter-container {
        display: grid;
        grid-template-areas:
		"rf-search"
		"rf-filter";
        grid-template-rows: 55px 1fr;
        gap: 1rem;
        padding: 1rem 1.5rem;
        width: 100%;
        height: 100%;
        background-color: #F8F8F8;
        border: 1px solid #609CDC;
        border-radius: 6px;
    }
}

.rb-filter-search {
	grid-area: rf-search;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}

.rb-filter-search input[type="text"] { width: 100%; border-right: 0; }

.rb-filter-search .search-btn {
    display: block;
    vertical-align: middle;
    padding: 0.6rem 1.3rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    background: #FFFFFF;
    color: #F8AF0E;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    width: max-content;
    -webkit-transition: all .25s;
    transition: all .25s;
    white-space: nowrap;
    height: 4rem;
}

.rb-filter {
    grid-area: rf-filter;
}


.rb-filter-header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	width: 100%;
	padding: 1rem;
	font-size: 2.1rem;
	font-weight: 600;
	text-align: left;
	color: #333333;
}

.rb-filter-body { overflow: hidden; padding: 0 1rem; }
.rb-filter-group {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}
.rb-filter-group .rb-filter-group-item {
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    transition: background-color 150ms;
    position: relative;
    font-weight: 500;
    letter-spacing: 0;
}

.rb-filter-group .rb-filter-group-item .form_radio label { font-size: 1.5rem; color: #666666; }
.rb-data-container {
    grid-area: rb-data;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rb-data-container .rb-data-content {
    position: relative;
    width: 100%;
    height: 100%;
    /*overflow: auto;*/
    padding: 0;
}

@media all and (min-width: 992px) {
    .rb-data-container .rb-data-content {
        padding: 0 2rem 2rem 2rem;
    }
}

.rb-data-list {
}

.rb-data-list ul.rb-data-list {
	display: block;
    margin-top: .5rem;
	margin-bottom: 2.5rem;
	padding: 0 0 0 10rem;
	border-top: 0;
}

.rb-data-list .rb-data-item .rb-data-expander-wrap.enabled {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.rb-data-list .rb-data-item .rb-data-expander-wrap.enabled .rb-data-expander {
    display: block;
    margin-right: 1rem;
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
}

.rb-data-list .rb-data-item .rb-data-expander-wrap .rb-data-expander-btn {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 1.8rem;
	font-weight: 600;
}

.rb-data-list .rb-data-item .rb-data-expander-wrap .rb-data-expander-btn::after {
	content: "\ea13";
	display: inline-block;
	vertical-align: middle;
	font-weight: 400;
	font-family: 'remixicon' !important;
}


.rb-data-list .rb-data-item .rb-data-expander-wrap .rb-data-expander-btn.expand::after {
    content: '\f1af';
}

.rb-data-list .rb-data-item + .rb-data-item { margin-top: 1rem; }
.rb-data-list .rb-data-item .rb-data-item-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding: 1.5rem 3rem;
	overflow: hidden;
	background: #fff;
	border: 1px solid #CCCCCC;
	border-radius: 7px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}

.rb-data-list .rb-data-item .rb-data-item-content {
    width: 100%;
}

.rb-data-list .rb-data-item .rb-data-item-content.separation {
    width: calc(100% - 13rem);
}

.rb-data-list ul.rb-data-list.expand .rb-data-item .rb-data-item-wrap { background-color: #EEF6FF; border-color: #84B2EB; border-radius: 5px; }
.rb-data-list ul.rb-data-list.expand .rb-data-item + .rb-data-item { margin-top: 1rem; }

/*
.rb-data-list li .rb-data-item-wrap.box {
    border: 1px solid #D8D9DF;
    background: #fff;
    border-radius: 4px;
    margin-bottom: .5rem;
}
*/

/*.rb-data-list li .rb-data-item:hover {
    background: #F8F9FB;
}*/

.rb-data-list .rb-data-item .rb-data-item-section-wrap {
    display: inline-block;
    min-width: 7rem;
    padding: .4rem 0.6rem .3rem;
    border-radius: 0.4rem;
    background-color: #eee;
    font-size: 1.3rem;
    color: #333;
    text-align: center;
}

.rb-data-list .rb-data-item .rb-data-item-title-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 1rem;
    padding-right: 1rem;
}

.rb-data-list .rb-data-item .rb-data-item-title {
    /*font-size: 1.8rem;
    font-weight: 600;*/
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.rb-data-list .rb-data-item .rb-data-item-desc {
    font-size: 1.4rem;
    font-weight: 400;
    color: #767676;
}

.rb-data-list .rb-data-item .rb-data-item-btn {
	display: inline-block;
	margin-left: 1rem;
	padding: .75rem 3rem;
	background-color: transparent;
	border: 1px solid #155CD6;
	border-radius: 4px;
	font-size: 1.6rem;
	font-weight: 500;
	color: #000000;
	transition: .25s;
}

.rb-data-list .rb-data-item .rb-data-item-btn i {
    vertical-align: middle
}

.rb-data-list .rb-data-item .rb-data-item-btn:hover {
	background-color: #EBF3FB;
	border-color: #1247A1;
	color: #1247A1;
}


.rb-data-list .rb-data-info {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    row-gap: .5rem;
    overflow: hidden;
    margin-bottom: .5rem;
    padding-left: 1rem;
}

.rb-data-list .rb-data-info > li {
    position: relative;
    white-space: nowrap;
    padding-right: 2rem;
    font-size: 1.5rem;
    line-height: 1.8rem;
    letter-spacing: -0.15px;
}

@media all and (min-width: 992px) {
    .rb-data-list .rb-data-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        padding-left: 0;
    }

    .rb-data-list .rb-data-info > li:after {
        position: absolute;
        width: 3px;
        height: 3px;
        background: #ddd; /*top: 1.1rem;*/
        top: 0.8rem;
        right: 0.75rem;
        content: '';
    }

    .rb-data-list .rb-data-info > li:last-child {
        padding-right: 0;
    }

    .rb-data-list .rb-data-info > li:last-child:after {
        display: none;
    }
}


.rb-data-list .rb-data-info > li > strong {
	position: relative;
	font-weight: 500;
	color: #333;
}

.rb-data-list .rb-data-info > li > span {
    color: #555555;
}

.rb-data-list .rb-data-info > li > strong, .rb-data-list .rb-data-info > li > span {
    white-space: nowrap;
}

.rb-data-list .rb-data-info > li > span:before {
    display: inline-block;
    position: relative;
    top: -1px;
    width: 1px;
    height: 1rem;
    margin: 0 .5rem 0 .2rem;
    background-color: #E1E1E1;
    content: '';
    vertical-align: middle;
}



.import-data-container {
    position: relative;
    display: grid;
    grid-template-areas: "id-body id-selected";
    grid-template-columns: 3fr 1fr;
    width: 100%;
    height: 100%;
    min-height: 70vh;
    gap: 2rem;
}

.import-data-body {
    grid-area: id-body;
}

.import-data-selected {
    grid-area: id-selected;
    position: relative;
    min-width: 400px;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    background: #fff;
}


.import-data-selected .import-data-header {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    padding: 2rem 3rem 2rem 2rem;
    border-bottom: 1px solid #ddd;
    /*background: #f5f7fa;*/
}

.import-data-selected .id-selected-header {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    padding: 2rem 3rem 2rem 2rem;
    border-bottom: 1px solid #ddd;
    color: #0d0d0d;
    font-size: 1.9rem;
    line-height: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.04em;
}


.import-data-selected .id-selected-body {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    overflow-y: hidden;
    height: 100%;
}

.import-data-selected .id-selected-body .id-selected-body-overflow {
    scrollbar-width: thin;
    height: 100%;
    overflow-y: auto;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
    mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);*/
}

.import-data-selected .id-selected-body .id-selected-body-content {
    padding: 2rem;
}


.aside-canvas.error-report-container {
    min-width: 300px;
    width: 350px;
    max-width: 50vw;
}

.error-report-container .aside-canvas-header,
.error-report-container .aside-canvas-body {
    padding: 2rem 1rem 2rem 2rem;
}

.error-report-container .aside-canvas-body {
    padding-top: 2rem;
}

.error-report-container .error-report-title-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
}

.error-report-container .error-report-title-wrap .error-report-title {
    position: relative;
    display: block;
    color:#111;
    font-size: 2.2rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-report-container .static-fancytree .fancytree-exp-n span.fancytree-expander,
.error-report-container .static-fancytree .fancytree-exp-nl span.fancytree-expander {
    width: 8px;
}

.error-report-container .error-category-title {
    display: block;
    font-weight: 600;
    font-size: 1.8rem;
    color: #444;
    margin-bottom: 0.8rem;
}

.error-report-container .error-sheet-title {
    display: block;
    font-weight: 500;
    font-size: 1.6rem;
    color: #444;
    margin-bottom: 0.5rem;
}

.error-report-container .error-field-title {
    display: block;
    font-weight: 400;
    color: #444;
    cursor: pointer;
    font-size: 1.6rem;
}

.error-report-container .error-msg-title {
    display: block;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    /*font-size: 1.6rem;*/
}


/* checkbox card  */
.radio-card {
    position: relative;
}

.radio-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}

.radio-card .radio-card-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap:nowrap;
    column-gap: 1.5rem;
    padding: 2rem 2.5rem;
    border: 1px solid #E1E1E1;
    border-radius: 1.6rem;
    background: #fff;
    -webkit-transition: all .25s;
    transition: all .25s;
    white-space: normal;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
}

.radio-card .radio-card-label > img {
    width: 60px;
    height: 60px;
}

.radio-card .radio-card-label .radio-card-label-text {
    font-size: 1.4rem;
    font-weight: normal;
    color: #777;
}

.radio-card input[type="radio"]:checked + .radio-card-label {
    border: 2px solid #155CD6; /* #e5325b */
}
.radio-card.KPC input[type="radio"]:checked + .radio-card-label {
    border-color: #e5325b; /* #e5325b */
}
.radio-card.KBI input[type="radio"]:checked + .radio-card-label {
    border-color: #F8AF0D; /* #F8AF0D */
}


.radio-list-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #F7F8FA;
    background-clip: border-box;
    border-radius: 1.5rem;
    padding: 0 2.5rem;
}

.radio-list-card .row > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 1.6rem; /* 1.6rem × 0.95 */
    padding-left: 1.6rem; /* 1.6rem × 0.95 */
    margin-top: 0;
}

.radio-list-card .radio-list-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap:nowrap;
    column-gap: 1.5rem;
    padding: 2.5rem 0;
}

.radio-list-card .radio-list-card-header:first-child {
    border-radius: 6px 6px 0 0;
}

.radio-list-card .radio-list-card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    border-top: 1px solid #E4E4E4;
    padding: 1rem 0 2.5rem 0;
}

.radio-list-card.row-direction {
    flex-direction: column;
}


.radio-list-card.row-direction .radio-list-card-header {
    padding-bottom: 0;
    min-width: 20rem;
}

.radio-list-card.row-direction .radio-list-card-header.lg {
    min-width: 24rem;
}

.radio-list-card.row-direction .radio-list-card-body {
    border-top: 0;
    padding: 1.5rem 0;
}

.radio-list-card.row-nowrap-direction {
    flex-direction: row;
}

.radio-list-card.row-nowrap-direction .radio-list-card-body {
    border-top: 0;
    padding: 2.5rem 0;
}



@media all and (min-width: 992px) {
    .radio-list-card.row-direction {
        flex-direction: row;
        align-items: center;
    }

    .radio-list-card.row-direction .radio-list-card-header {
        padding-bottom: 2.5rem;
    }
}

.radio-list-card .radio-list-card-body:last-child {
    border-radius: 0 0 6px 6px;
}

.radio-list-card .radio-list-card-icon {
    background-color: #DBF1F2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-radius: 1rem;
}

.radio-list-card .radio-list-card-icon > img {
    height: 22px;
}

.radio-list-card .radio-list-card-text {
    white-space: normal;
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
}

.radio-list-card .radio-list-card-count {
    white-space: normal;
    font-size: 1.6rem;
    font-weight: 500;
    color: #4E69F1;
}

.radio-list-card .radio-list-card-toggle {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    padding: 0.225rem 0.5rem;
}










/* submission */
.submission-nav {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.submission-nav .submission-nav-item {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 5rem 1.5rem 3rem;
    background-color: #FBFBFB;
    border-radius: 1.4rem;
    border: 1px solid #E4E4E4;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.07);
    height: 8.5rem;
}

.submission-nav .submission-nav-item:after {
    content: '';
    display: block;
    position: absolute;
    right: 2.25rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    border-top: 1px solid #7C7C7C;
    border-right: 1px solid #7C7C7C;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    -webkit-transition: all .25s;
    transition: all .25s;
}

.submission-nav .submission-nav-item:hover {
    background-color: #FFFFFF;
    border: 1px solid #1459D1 !important;
    box-shadow: none;
}

@media (max-width: 768px){
    .submission-nav .submission-nav-item {
    }
}

.submission-nav .submission-nav-item .submission-nav-img {
    display: inline-block;
    width: 5.8rem;
    padding: 0.5rem;
    text-align: center;
}

@media (max-width: 768px){
    .submission-nav .submission-nav-item .submission-nav-img > img {
        height: 4rem;
        max-width: 4rem;
    }
}


.submission-nav .submission-nav-item .submission-nav-text {
    font-size: 1.7rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.submission-nav .submission-nav-item .submission-nav-icon {
    font-size: 2rem;
    margin-left: auto;
}

.metadata-search-container {
    position: relative;
    padding: 1rem;
    border-radius: 6px;
}
.metadata-search-container .metadata-search-form {
    position: relative;
    display: block;
    width: 100%;
}
.metadata-search-container .metadata-search-form .metadata-search-keyword {
    border-radius: 1rem 2.8rem 2.8rem 1rem;
    padding-right: 5rem;
    padding-left: 1rem;
    width: 100%;
}
.metadata-search-container .metadata-search-form .metadata-search-button {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    padding: .5rem 1.5rem;
    width: 4.5rem;
    height: 4rem;
    background-color: #222222;
    color: #FFFFFF;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    right: 0;
}

.numeric-unit-group {
    display: flex;
}

.numeric-unit-group .numeric-unit-input {
    border-radius: 1rem 0 0 1rem;
    width: 80%;
}
.numeric-unit-group .numeric-unit {
    font-weight: bold;
    text-align: center;
    width: 20%;
    border-radius: 0 1rem 1rem 0;
}

.numeric-unit-group .numeric-unit:focus {
    outline: none;
    box-shadow: none;
    border-color: inherit; /* 원래 border 유지 */
}



.submit-order-card {
    display: grid;
    grid-template-areas:
        "orderLeft orderRight";
    grid-template-columns: 100px 1fr;
    padding: 2rem 3rem 2rem 0;
    row-gap: 0.5rem;
    column-gap: 4rem;
    text-align: left;
    counter-increment: ol-cards-counter;
}

@media (max-width: 768px) {
    .submit-order-card {
        grid-template-areas: "orderLeft" "orderRight";
        grid-template-columns: 1fr;
    }
}


.submit-order-card .submit-order-card-left {
    grid-area: orderLeft;
    position: relative;
}

.submit-order-card .submit-order-card-right {
    grid-area: orderRight;
    position: relative;
}

.submit-order-card .step {
    display: flex;
    align-self: flex-start;
    /*background-color: #FDEBE9 ;*/
    border-radius: 0 50rem 50rem 0;
    padding: 1rem 3rem 1rem 1rem;
    justify-content: flex-end;
    color: #fff;
    flex: 1;
    gap: 1rem;
    background: linear-gradient(112deg, rgba(225, 115, 115, 1) 55%, rgba(247, 148, 137, .5) 100%);
}

.submit-order-card .step:before {
    content: "0" attr(data-count);
    flex: 1;
    align-self: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 2rem;
    text-shadow: 0.025rem 0.025rem 0.125rem rgba(0, 0, 0, 0.4);
}

.submit-order-card .button-group {
    grid-area: button;
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem 1rem 1rem;
    gap: 1rem;
}


.submit-order-card .title {
    grid-area: title;
    display: flex;
    padding-left: 2rem;
    align-items: center;
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
}

.submit-order-card .content {
    grid-area: content;
}


.submit-order-card .submit-order-card-detail-container {
    position: relative;
}

.submit-order-card .submit-order-card-detail-container .submit-order-card-detail-item {
    display: block;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #E1E1E1;
}

.submit-order-card .submit-order-card-detail-container .submit-order-card-detail-item:last-child {
    border-bottom: 0;
}

.submit-order-card .row-detail-label {
    position: relative;
    color: #777777;
    padding-left: 1.5rem;
    white-space: normal;
}

.submit-order-card .row-detail-label.dark {
    color: #222;
}

.submit-order-card .row-detail-label:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #113AE1;
    position: absolute;
    left: 0;
    top: 1rem;
    /*top: 50%;
    transform: translateY(-50%);*/
}

.submit-order-card .row-detail-value {
    color: #222222;
}

@media (max-width: 768px) {
    .submit-order-card .row-detail-value {
        padding-left: 1.5rem;
    }
}


.chip-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.chip-container .chip-item-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.0rem;
    height: auto;
}

.chip-container .chip-item {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 152px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 9999px;
    background: #1A57BF;
    color: #fff;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    line-height: 1.2;
}

.chip-container .chip-item .label {
    flex: 1 1 auto;
    white-space: nowrap;
    padding-right: 8px;
}

.chip-container .chip-item .chip-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}