@charset "UTF-8";

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-family: 'Noto Sans KR', serif;
    -ms-overflow-style: none;
}

html,
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
}

body {
    position: relative;
    background: #E7E9ED;
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow: hidden;
}


ol, ul {
    list-style: none;
}

li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

strong {
    font-weight: 500;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-dark);
}

hr {
    border-top: 1px solid var(--color-gray-lighter);
}

a {
    cursor: pointer;
}

:root {
    --radio-size: 20px;
    --navbar-bg: white;
    --navbar-height: 3rem;
    --sidebar-width: 4rem;
    --submenu-width: 16.75rem;
    --submenu-width-neg: -16.75rem;

    --color-primary: #209b5c;
    --color-primary-highlight: #25C686;
    --color-primary-dark: #147350;
    --color-primary-hover: #d5f2e4;

    --color-border: #DDE4E8;

    --color-gray-50: #f2f2f2;
    --color-gray-100: #E5E5E5;
    --color-gray-300: #B2B2B2;
    --color-gray-500: #808080;
    --color-gray-700: #4D4D4D;
    --color-gray-900: #1A1A1A;
    --color-deep-dark-blue: #0E1A1F;

    --color-red: #e81f1f;
    --color-green: #54B14B;
    --color-orange: #ED672D;
    --color-blue: #2F60D7;
    --color-purple: #9234F5;
    --color-tomato: #d43646;


    --color-gray: #C6C6C6;
    --color-gray-lighter: #E7E9ED;
    --color-gray-light: #ACACAC;
    --color-gray-dark: #555555;
    --color-gray-darker: #333333;

    --box-shadow-button: rgba(0, 0, 0, 0.15) 0px 1px 1px 0px,
    rgba(220, 225, 230, 0.6) 0px 0px 0px 1px,
    rgba(220, 225, 230, 0.2) 0px 2px 4px 0px;

    --box-shadow-button-darker:
    rgba(0, 0, 0, 0.15) 0px 2px 2px 0px,
    rgba(220, 225, 230, 0.6) 0px 0px 0px 1px,
    rgba(220, 225, 230, 0.2) 0px 2px 4px 0px;
}

:root {
    --border-radius-default: .25rem;

    --color-white: #ffffff;

    /*--color-primary-50: #F3FBF5;*/
    --color-primary-50: #E7F8EE;
    --color-primary-100: #DBF5DF;
    --color-primary-200: #ADEDB8;
    --color-primary-300: #34E574;
    --color-primary-400: #34CC68;
    --color-primary-500: #3EB260;
    --color-primary-600: #419A57;
    --color-primary-700: #3F854F;
    --color-primary-800: #3B7146;
    --color-primary-900: #365F3E;
    --color-primary-1000: #045525;

    --color-cool-gray-10: #FDFDFD;
    --color-cool-gray-30: #F8F8F8;
    --color-cool-gray-50: #FDFDFD;
    --color-cool-gray-100: #f3f4f4;
    --color-cool-gray-200: #E7E8E9;
    --color-cool-gray-300: #B7BBBD;
    --color-cool-gray-400: #9FA5A7;
    --color-cool-gray-500: #878E91;
    --color-cool-gray-600: #6F777C;
    --color-cool-gray-700: #576166;
    --color-cool-gray-800: #3F4A50;
    --color-cool-gray-900: #27343a;
    --color-cool-gray-1000: #0f1d24;

    --color-blue-50: #F9FBFF;

    --color-secondary-50: #F5F9FF;
    --color-secondary-100: #E4EEFE;
    --color-secondary-200: #C7DCFE;
    --color-secondary-300: #A1C8FD;
    --color-secondary-500: #6DB1FD;
    --color-secondary-600: #1D9CF7;
    --color-secondary-700: #1887D6;
    --color-secondary-800: #1373B8;
    --color-secondary-900: #0E629E;
    --color-secondary-1000: #094B7C;


    /*--sidebar-width: 20rem;*/
    --sidebar-width: 3.5rem;
    --sidebar-bg: var(--color-white);
    --sidebar-menu-item-height: 3rem;
    --sidebar-menu-item-name-color: var(--color-cool-gray-700);
    --sidebar-menu-item-font-weight: 400;

    --heading-line-height: 1.5;
    --heading-font-weight: 700;
    --heading-font-size: 1rem;
    --heading-font-color: var(--color-cool-gray-700);
    --heading-margin: 0;

    --grid-columns: repeat(auto-fill, minmax(20rem, 1fr));
    --grid-row-gap: 1rem;
    --grid-column-gap: 1rem;

    --grid-item-box-shadow: var(--box-shadow-button);
    --grid-item-border-radius: 0;
    --grid-item-background-color: transparent;

    --flair-margin-bottom: 0;
    --div-data-margin-left: 0;

    --separator-color: var(--color-cool-gray-300);
    --separator-size: 100%;
    --separator-margin: 1.5rem;

    --z-index-1: 1;
    --z-index-2: 2;
    --z-index-3: 3;
    --z-index-4: 4;
    --z-index-5: 5;
    --z-index-6: 6;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.will-animate {
    transition: all 0.3s ease;
    transform: translateZ(0);
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
    max-height: 100%;
}

.no-overflow {
    overflow: hidden;
}

.container-fluid.center {
    align-items: center;
}

.center-text {
    text-align: center;
}

select {
    -webkit-appearance:none;
    appearance: none;
    display: inline-block;
    font-size: 1em;
    /* border: 1px solid #DEDEDE; */
    padding: 0 2em 0 1em;
    height: 36px;
    background-color: white;
    color: #646672;
    background-image: url("/common/images/glyphs/glyph-select-arrows.svg");
    background-repeat: no-repeat;
    background-position: center right 0.5rem;
    background-size: 1rem 1rem;
    border-radius: .25rem;
    border: 0;
    box-shadow: var(--box-shadow-button);
}

textarea {
    border-radius: .25rem;
}

select::-ms-expand {
    display: none;
}

select:disabled,
input:disabled {
    background-color: #e8e8e8;
    border-color: transparent;
    color: rgba(88, 88, 92, 0.6);
    cursor: not-allowed;
}

.badge {
    position: absolute;
    font-size: .675rem;
    font-weight: 900;
    background: #f24233;
    border-radius: 2rem;
    color: white;
    padding: .125rem .375rem;
    transform: translateY(-.5rem);
    left: 50%;
    box-shadow: 0 0 .125rem .125rem #f242333d;
    text-align: center;
    z-index: 2;
}

.filter-badge {
    position: relative;
    font-weight: 700;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .25rem;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: .75rem;
    color: white;
    font-size: .8125rem;
}

#triangle-rotate {
    width: 14px !important;
    height: auto !important;
    transition: filter .5s, transform .5s, -webkit-filter .5s, -webkit-transform .5s;
}

.rotate {
    transform: rotate(180deg);
}

.svg-white {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.svg-black {
    -webkit-filter: brightness(100) invert(1);
    filter: brightness(0) invert(1) invert(1);
}

.svg-disabled {
    filter: brightness(0) invert(1) invert(1) brightness(20%);
}

.svg-primary {
    filter: brightness(0) saturate(100%) invert(67%) sepia(12%) saturate(6430%) hue-rotate(108deg) brightness(100%) contrast(71%);
}

.label {
    position: relative;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.label-notice{
	color: var(--color-red) !important;
}

.content {
    display: flex;
    flex-direction: column;
    border: 1px solid #ACACAC;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
    padding: 10px;
    overflow: hidden;
}

.table-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: #F4F7F9;
    overflow-y: auto;
    overflow-x: hidden;
}

.tiny-header {
    width: 100%;
    display: flex;
    margin-bottom: .5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 36px;
}

.tiny-header > h3 {
    margin-left: .25rem;
}

.content-header .actions,
.modal-header .actions,
.tiny-header .actions {
    display: flex;
    align-items: center;
}

.content-header .actions > button,
.modal-header .actions > button,
.tiny-header .actions > button {
    min-width: 60px;
}

.content-header .actions > * + *,
.modal-header .actions > * + *,
.tiny-header .actions > * + * {
    margin-left: .25rem;
}

.content-submenu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin: 0 -1rem -1rem;
}

.table-submenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: white;
    border-bottom: 1px solid var(--color-gray);
    padding-top: 1rem;
}

.content-submenu.bottom {
    border: 1px solid var(--color-gray);
    border-top: 0;
    overflow: hidden;
}

.content-submenu > .menu-items,
.table-submenu > .menu-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -1rem -1rem;
    padding: 0 1rem 1rem;
}

.content-submenu > .menu-items > *,
.table-submenu > .menu-items > * {
    margin: 0 1rem 1rem;
}

.content-submenu button > :not(:last-child),
.table-submenu button > :not(:last-child) {
    margin-right: 0.25rem;
}

.search-bar {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
}

.search-bar input {
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.search-bar button {
    border-left: 0 !important;
    border-color: #DEDEDE;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/*
.search-bar button img {
	filter: none;
} */

button {
    border: 1px solid #ACACAC;
    height: 2.25rem;
    background: white;
    padding: 0 .75rem;
    font-size: 1em;
    text-align: center;
    color: var(--color-gray-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: .25rem;
    position: relative;
    cursor: pointer;
}

.grid-button {
    border: 1px solid #ACACAC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    background: white;
    margin-left: .5rem;
    margin-top: .4rem;
    border-radius: .25rem;
    white-space: nowrap;
    text-align: center;
    font-size: 1em;
}

.grid-button u {
    background: white !important;
    color: var(--color-gray-700) !important;
}

button.tiny {
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

button.tiny > * {
    max-height: 1.5rem;
}

button.silent {
    background: transparent;
    border-color: transparent;
}

button.window {
    padding-right: 32px;
    background-image: url('/common/images/glyphs/glyph-new-window.svg');
    background-position: right 4px center;
    background-repeat: no-repeat;
}

button.no-margin {
    margin: 0 !important;
}

button.no-padding {
    padding: 0 !important;
}

button.sidebar-close {
    border: none;
    padding: 0;
}

button.primary {
    background: var(--color-primary);
    color: white;
    border-color: transparent;
    font-weight: 500;
    /* border-color: #147350; */
}

.button-search {
    background-color: var(--color-primary);
    padding: 0;
    border-color: #147350;
    width: 42px;
    border-radius: 0 3px 3px 0;
    line-height: 40px;
    height: auto;
}

input {
    -webkit-appearance: none;
    color: black;
    height: 36px;
    min-height: 36px;
    border: 1px solid #DEDEDE;
    padding: 0 6px;
    font-size: 14px;
    border-radius: .25rem;
    position: relative;
}

input.search-bar {
    border: 1px solid var(--color-primary);
    padding: 1em 0;
    border-radius: 3px 0 0 3px;
    border-right: none;
    text-indent: 1em;
    width: 100%;
}

.content-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.content-field > .secondary,
.content-field > .primary {
    border: 1px solid #E2E2E2;
    border-radius: 6px;
    background-color: white;
}

.content-field > .secondary {
    /* flex: 1; */
    margin-right: 16px;
}

.content-field > .primary {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 1.3em;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;
}

.content .bottom-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 1em;
    padding-bottom: 0;
}

.input-list {
    position: relative;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-rule: 1px solid #E7E9ED;
    -moz-column-rule: 1px solid #E7E9ED;
    column-rule: 1px solid #E7E9ED;
    -webkit-column-gap: 4rem;
    -moz-column-gap: 4rem;
    column-gap: 4rem;
    -moz-column-fill: balance;
    column-fill: balance;
}

.input-list .item select,
.input-list .item input[type="text"],
.input-list .item .styled-select,
.input-list .item button {
    height: 36px;
}

.input-list.no-col {
    -webkit-columns: unset;
    -moz-columns: unset;
    columns: unset;
}

.input-list.no-col .item {
    padding-right: 0;
}

@media only screen and (max-width: 1280px) {
    .input-list {
        -webkit-columns: inherit;
        -moz-columns: inherit;
        columns: inherit;
    }
}

.input-list .item {
    padding-bottom: 8px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*   padding-right: 1em; */
    width: 100%;
    margin-bottom: .25rem;
}

.input-list .spacer {
    height: 52px;
}

.input-list .spacer-s {
    height: 26px;
}

/*.input-list .item > :last-child {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 66%;*/
/*    flex: 0 0 66%;*/
/*}*/

.input-list .item .label {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
}

.input-list .item .select .select-styled {
    height: 36px;
}

.input-list .item .input-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}

.input-list .item .input-container > :not(:last-child) {
    margin-right: 4px;
}

.input-list .item .input-container :first-child {

}

.content-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 1em;
}

.content-pagination .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.content-pagination .pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #4D4E53;
}

.content-pagination .pagination .page {
    margin: 0 0.5em;
    padding: 0 0.5em;
}

.content-pagination .pagination .page > img {
    width: 14px;
    max-height: 14px;
}

.content-pagination .pagination .page.selected {
    border-radius: 100%;
    background: var(--color-primary);
    border: 1px solid #167B53;
    color: white;
    font-weight: bold;
}

.content-pagination .pagination :last-child {
    padding-right: 0;
    margin-right: 0;
}

.content-pagination .pagination :first-child {
    padding-left: 0;
    margin-left: 0;
}

.label-select {
    height: 40px;
}

input[type=radio] {
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid black;
}

.radio-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 36px;
    margin-right: 0.75rem !important;
}

.radio-container {
    position: relative;
    padding-left: calc(var(--radio-size) + 0.5em);
    user-select: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap
}

.radio-container ~ * {
    margin-left: .5rem !important;
}

.pill-radio {
    position: relative;
}

.pill-radio label {
    padding: 0.5em 1.25em;
}

.pill-radio input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.pill-radio input[type="radio"]:checked ~ label {
    background: var(--color-primary);
    color: white;
    border-color: #167B53;
}

.radio-container input:checked ~ .checkmark:after {
    display: block;
}

.radio-container input:checked ~ .checkmark {
    border-color: var(--color-primary)
}

.radio-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.radio-container .checkmark {
    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: white;
    border: 1px solid #CCC;
    border-radius: 50%;
}

.radio-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:disabled ~ .checkmark,
.radio-container input:disabled:checked ~ .checkmark {
    background-color: #F2F2F2;
    border-color: transparent;
    cursor: not-allowed;
}

.radio-container input:disabled:checked ~ .checkmark:after {
    background-color: var(--color-gray-100);
    cursor: not-allowed;
}


button.square {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px !important;
    padding: 0;
}

button.m {
    min-width: 70px;
    max-width: 70px;
}

button.center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

button.input-fixed {
    min-width: 8em;
}

.dropdown-wrapper {
    position: relative;
    height: 32px;

}

input[type=checkbox] {
    width: 20px;
    height: 20px;
}

.pills {
    overflow-x: auto;
    overflow-y: hidden;
}

.pills :not(:last-child) {
    margin-right: 0.25em;
}

.pill {
    padding: 0 1rem;
    border: 1px solid #93949D;
    border-radius: 1rem;
    color: #636365;
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    white-space: nowrap;
}

.pill.sticker > * + * {
    margin-left: .25rem;
}

.pill.sticker {
    color: #163927;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary);
    height: 2rem;
}

.pill.selected {
    background: var(--color-primary);
    color: white;
    border-color: #167B53;
}

a:hover {
    color: var(--color-primary);
}

.selected > a:hover {
    color: white;
}

.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.modal .modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
}

.tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
}

.tabs > .tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.25em;
    color: var(--color-gray-lighter);
    margin: 0 2rem;
    padding-bottom: .5rem;
    min-width: fit-content;
}

.tabs > .tab.selected {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    font-weight: 500;
}

.modal .modal-footer {
    padding-top: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

button.silent {
    border: none;
    background: transparent;
}

.checkbox-container {
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 32px;
    white-space: nowrap;
    margin-right: .75rem;
    flex-direction: row-reverse;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-container .checkmark {
    display: inline-flex;
    margin-right: .5rem;
    width: 1rem;
    height: 1rem;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: .25rem;
    align-items: center;
    justify-content: center;
    transition: all 0.1s linear;
}


.checkbox-container:hover input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--color-primary);
    border-color: transparent;
    /* border: 2px solid var(--color-primary); */
}

.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    position: relative;
    width: .325rem;
    height: .5rem;
    margin-bottom: 2px;
    border: 1px solid white;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox-container .checkmark:after {
    border-width: 0 2px 2px 0;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1)
}

.input-container.end-spacer :not(:last-child) {
    margin-right: 0.5em;
}

.input-container.end-spacer :last-child {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.badge-important {
    position: relative;
    min-height: 6px;
    max-height: 6px;
    min-width: 6px;
    max-width: 6px;
    border-radius: 50%;
    background-color: red;
    left: 0.25em;
    bottom: 0.4em;
}

/* jQuery ui-overrides */

.ui-selectmenu-button.ui-button {
    height: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    background: white;
}

.ui-selectmenu-button.ui-button {
    width: unset;
    border: 1px solid #818181;
    padding: 0 1em;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
}

.ui-widget.ui-widget-content {
    background: #FFFFFF 0 0 no-repeat padding-box;
    /* -webkit-box-shadow: 0px 3px 6px #00000029;
            box-shadow: 0px 3px 6px #00000029; */
    border: 1px solid var(--color-border);
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: var(--box-shadow-button-darker);
}

.ui-widget-overlay {
    background: black;
    opacity: .2;
}

.ui-menu .ui-menu-item {

}

.ui-menu .ui-menu-item-wrapper {
    padding: .25em 1em;
}

.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
    background-image: url(/common/images/glyphs/glyph-triangle.svg);
}

.ui-icon-triangle-1-s {
    background-position: center right;
}

.c-select {
    position: relative;
}

.c-select select {
    display: none;
}

.select-selected {
    background-color: white;
}

/* ui-dialog center */
.dialog-center .ui-dialog-content{
    overflow: hidden;
}
.dialog-center .ui-dialog-content > p{
    padding: 30px 50px 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
}
.dialog-center.ui-dialog .ui-dialog-buttonpane{
    margin: 10px 0;
    justify-content: center;
}
.dialog-center .ui-dialog-buttonpane .ui-dialog-buttonset .dialog__button{
    margin: 0 10px;
    font-size: .9375rem;
    font-family: inherit;
    /* font-weight: 500; */
    background: #fff;
    border-radius: 4px;
    box-shadow: var(--box-shadow-button-darker);
    transition: 0.1s all linear;
}
.dialog-center .ui-dialog-buttonpane .ui-dialog-buttonset .dialog__button:hover{
    border: none;
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--box-shadow-button-darker);
}
.dialog-center .ui-dialog-buttonpane .ui-dialog-buttonset button.close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
    font-size: 0;
    background: #fff url('/common/images/glyphs/glyph-close.svg') no-repeat center / contain;
}
.dialog-center .ui-dialog-buttonpane .ui-dialog-buttonset button.close:hover{
    border: none;
}

/* Style the arrow inside the select element: */
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.select-selected:after {
    border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    cursor: pointer;
}

.select-items div, .select-selected {
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.select-styled {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: white;
    padding: 0.5em 12px;
    border: 1px solid var(--color-gray);
    border-radius: 3px;
    color: black;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 36px;
}

.select-styled:after {
    content: "";
    position: relative;
    border: 0.4em solid transparent;
    margin-left: 0.5em;
    top: 0.2em;
}

.select-styled:after {
    border-color: black transparent transparent transparent;
}

.select-styled:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-highlight);
}

.select-styled:active, .select-styled.active {
    background-color: var(--color-primary);
    color: white !important;
    border-radius: 3px 3px 0 0;
    border: 1px solid var(--color-primary-dark);
}

.select-styled:active:after, .select-styled.active:after {
    top: -0.2em;
    border-color: transparent transparent #fff transparent;
}

.select-styled.m {
    width: 36px;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: white;
    -webkit-box-shadow: 0 3px 6px #00000029;
    box-shadow: 0 3px 6px #00000029;
    border: 1px solid #818181;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.select-options li {
    margin: 0;
    padding: 0.5em 0;
    text-indent: 12px;
    border-top: 1px solid var(--color-gray);;
}

.select-options li:hover {
    color: var(--color-primary);
    background: #fff;
}

.select-options li[rel=hide] {
    display: none;
}

/*
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .input-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .input-grid .item {
    display: flex;
    flex: 1;
    flex-basis: 33%;
    margin-bottom: 0.5rem;
    
  }
  
  .input-grid .span-2 {
    flex-basis: calc(100% / 3 * 2 - 1rem)
    flex: 2;
    flex-basis: 66%
  }
  
  .input-grid .span-3 {
    flex-basis: calc(100% / 3 * 2 - 1rem)
    flex: 3;
    flex-basis: 100%
  }
  
  .input-grid .span-full {
    flex-basis: 100%;
  }
}*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .input-grid button {
        display: inline-block;
    }

    .input-grid .item span.label.char4 {
        min-width: 10ch !important;
    }

    .input-grid .item span.label.char5 {
        min-width: 12ch !important;
    }

    .input-grid .item span.label.char6 {
        min-width: 14ch !important;
    }

    .input-grid .item span.label.char7 {
        min-width: 16ch !important;
    }

    .grid.two-col {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1rem;
    }

    .grid.two-col > .grid-col-span-2 {
        width: calc(100% - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc(100% - 1rem);
    }

    .grid.two-col > * {
        margin-bottom: 1rem;
        margin-left: 1rem;
    }

    .grid.two-col > * {
        width: calc((100% / 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((100% / 2) - 1rem);
    }

    .grid.two-col > *.span-2 {
        width: calc(100% - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc(100% - 1rem);;
    }

    .grid.two-col > *.span-full {
        width: 100%;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 100%;
    }

    .input-grid {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1rem;
    }

    .input-grid > * {
        margin-bottom: .5rem;
        margin-left: 1rem;
    }

    .input-grid.force-col-4 > * {
        width: calc((99% / 4) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 4) - 1rem);
    }

    .input-grid.force-col-4 > *.span-2 {
        width: calc((99% / 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 2) - 1rem);
    }

    .input-grid.force-col-4 > *.span-3 {
        width: calc((99% / 4 * 3) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 4 * 3) - 1rem);
    }

    .input-grid.force-col-3 > * {
        width: calc((99% / 3) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 3) - 1rem);
    }

    .input-grid.force-col-3 > *.span-2 {
        width: calc((99% / 3 * 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 3 * 2) - 1rem);
    }

    .input-grid.force-col-3 > *.span-3,
    .input-grid > *.span-full {
        width: calc(100% - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc(100% - 1rem);
    }

    .input-grid.force-col-5 > * {
        width: calc((99% / 5) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 5) - 1rem);
    }

    .input-grid.force-col-5 > *.span-2 {
        width: calc((99% / 5 * 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 5 * 2) - 1rem);
    }

    .input-grid.force-col-5 > *.span-3 {
        width: calc((99% / 5 * 3) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 5 * 3) - 1rem);
    }

    .input-grid.force-col-5 > *.span-4 {
        width: calc((99% / 5 * 4) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 5 * 4) - 1rem);
    }

    .input-grid.force-col-5 > *.span-full {
        width: calc(100% - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc(100% - 1rem);
    }

    .input-grid.force-col-15 > * {
        width: calc((99% / 15) - 1rem);
        flex: 0 0 calc((99% / 15) - 1rem);
    }

    .input-grid.force-col-15 > *.span-full {
        width: 100%;
        flex: 0 0 100%;
    }

    .input-grid.force-col-15 > *.span-2 {
        width: calc((99% / 15 * 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 2) - 1rem);
    }

    .input-grid.force-col-15 > *.span-3 {
        width: calc((99% / 5) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 5) - 1rem);
    }

    .input-grid.force-col-15 > *.span-4 {
        width: calc((99% / 15 * 4) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 4) - 1rem);
    }

    .input-grid.force-col-15 > *.span-5 {
        width: calc((99% / 3) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 3) - 1rem);
    }

    .input-grid.force-col-15 > *.span-6 {
        width: calc((99% / 15 * 6) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 6) - 1rem);
    }

    .input-grid.force-col-15 > *.span-7 {
        width: calc((99% / 15 * 7) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 7) - 1rem);
    }

    .input-grid.force-col-15 > *.span-8 {
        width: calc((99% / 15 * 8) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 8) - 1rem);
    }

    .input-grid.force-col-15 > *.span-9 {
        width: calc((99% / 15 * 9) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 9) - 1rem);
    }

    .input-grid.force-col-15 > *.span-10 {
        width: calc((99% / 3 * 2) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 3 * 2) - 1rem);
    }

    .input-grid.force-col-15 > *.span-11 {
        width: calc((99% / 15 * 11) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 11) - 1rem);
    }

    .input-grid.force-col-15 > *.span-12 {
        width: calc((99% / 15 * 12) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 12) - 1rem);
    }

    .input-grid.force-col-15 > *.span-13 {
        width: calc((99% / 15 * 13) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 13) - 1rem);
    }

    .input-grid.force-col-15 > *.span-14 {
        width: calc((99% / 15 * 14) - 1rem);
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc((99% / 15 * 14) - 1rem);
    }
}

/* @media screen and (min-width: -1px) {
	
} */

@supports (display: grid) {
    .input-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
        /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
        -ms-grid-rows: auto;
        grid-template-rows: auto;
        grid-row-gap: .5rem;
        grid-column-gap: 1em;
        display: -ms-grid;
        margin-left: 0;

    }

    .input-grid > * {
        width: auto;
        margin-left: 0;
        margin-bottom: 0;
    }

    .input-grid.force-col-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

    }

    .input-grid.force-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .input-grid.force-col-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 1600px) {
    .input-grid.force-col-1 {
        grid-template-columns: repeat(1, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-2 {
        grid-template-columns: repeat(2, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-3 {
        grid-template-columns: repeat(3, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-4 {
        grid-template-columns: repeat(4, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-5 {
        grid-template-columns: repeat(5, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-6 {
        grid-template-columns: repeat(6, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-7 {
        grid-template-columns: repeat(7, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-8 {
        grid-template-columns: repeat(8, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-10 {
        grid-template-columns: repeat(10, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-12 {
        grid-template-columns: repeat(12, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }

    .input-grid.force-col-15 {
        grid-template-columns: repeat(15, minmax(max-content, max-content)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }
}


.input-grid .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 36px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.input-grid .grid-row--wrap{
	border: 1px solid #ddd;
    border-radius: 0.375rem;
    overflow: hidden;
}
.input-grid .grid-title{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 54px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	padding: 0 24px;
	background: #F7F9F7;
}
.input-grid .grid-row{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 54px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}
.input-grid .grid-row--infobox{
	display: flex;
	flex-direction: column;
	text-align: center;
	border-radius: 0.375rem;
	background: #F4F7F9;
	padding: 12px 24px;
	row-gap: 10px
}
.input-grid .grid-row--infobox .txt{
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1rem;
	color: #a0a0a0;
}
.input-grid.label-xl .item span.label,
.input-grid.label-l .item span.label,
.input-grid.label-m .item span.label,
.input-grid.label-s .item span.label,
.input-grid.label-xs .item span.label {
    white-space: nowrap;
    margin-right: 0.25rem;
}

.input-grid.label-l .item span.label {
    min-width: 102px;
}

.input-grid.label-xl .item span.label {
    min-width: 128px;
}

.input-grid.label-m .item span.label {
    min-width: 96px;
}

.input-grid.label-s .item span.label {
    min-width: 80px;
}

.input-grid.label-xs .item span.label {
    min-width: 64px;
}

.input-grid .item > input,
.input-grid .item > button {
    height: 36px;
}

.input-grid .item > select {
    height: 32px;
}

.input-grid .item > select {
    border-color: #DEDEDE;
}

.input-grid .item > * + * {
    margin-left: 0.25rem;
}

.input-grid .span-2 {
    -ms-grid-column-span: 2;
    grid-column: span 2;
}

.input-grid .span-3 {
    -ms-grid-column-span: 3;
    grid-column: span 3;
}

.input-grid .span-4 {
    -ms-grid-column-span: 4;
    grid-column: span 4;
}

.input-grid .span-5 {
    -ms-grid-column-span: 5;
    grid-column: span 5;
}

.input-grid .span-6 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
}

.input-grid .span-7 {
    -ms-grid-column-span: 7;
    grid-column: span 7;
}

.input-grid .span-8 {
    -ms-grid-column-span: 8;
    grid-column: span 8;
}

.input-grid .span-9 {
    -ms-grid-column-span: 9;
    grid-column: span 9;
}

.input-grid .span-10 {
    -ms-grid-column-span: 10;
    grid-column: span 10;
}

.input-grid .span-11 {
    -ms-grid-column-span: 11;
    grid-column: span 11;
}


.input-grid .span-full {
    grid-column: 1/-1;
}

.input-grid .label {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 80px;
}

.label.large {
    min-width: 102px;
}

.label.xl {
    min-width: 128px;
}

.label.m {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 96px !important;
}

.label.s {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 80px !important;
}

.label.xs {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 76px !important;
}

.label.xxs {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 60px !important;
}

.unit {
    min-width: 36px !important;
    max-height: 36px;
    color: #555555;
    line-height: 36px;
    text-align: center;
    font-weight: 500;
    border: 1px solid #DFDFDF;
    border-left: 0;
    margin: 0 !important;
    font-size: 14px;
    display: inline-block;
}

.unit.no-border {
    border: 0;
}

.box,
.box-container {
    padding: 1rem;
    border: 1px solid var(--color-border);
    background-color: white;
    border-radius: .25rem;
}

.box-container {
    padding: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
}

.image-thumbnail {
    position: relative;
    border: 1px solid #707070;
    margin-bottom: 0.5rem;
    height: 13rem;
    width: 13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    background-size: cover;
}

.image-thumbnail.--pos-type {
    width: calc(1024px / 5);
    height: calc(768px / 5);
}

.image-thumbnail.--16\:9 {
    padding-top: 75%;
    width: 100%;
    height: unset;
}

.image-thumbnail.add-cta {
    border-style: dashed;
    background-color: transparent;
}

.image-thumbnail.tiny {
    width: 4rem;
    height: 4rem;
}

.image-thumbnail.small {
    width: 6rem;
    height: 6rem;
}

.image-thumbnail.medium {
    width: 8rem;
    height: 8rem;
}

.image-thumbnail.large {
    width: 10rem;
    height: 10rem;
}
.image-thumbnail.x-large {
    width: 13rem;
    height: 13rem;
}

.image-thumbnail > .delete {
    position: absolute;
    background-image: url('/common/images/glyphs/glyph-close (white).svg');
    background-size: 50% 50%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    right: .5rem;
    top: .5rem;
    z-index: 2;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;

}
.image-thumbnail > .expand {
    position: absolute;
    background-image: url('/common/images/glyphs/glyph-expand.svg');
    background-size: 50% 50%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    right: 2.3rem;
    top: .5rem;
    z-index: 2;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.image-thumbnail-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.thumb-checkbox{
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
}


div [name = 'divStrDtlImgUpload'] > .thumb-nametag{
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    top : auto;
    left: 0;
}
div [name = 'divStrDtlImgUpload'] > .thumb-nametag > span{
    padding: 2px 0.5px;
    font-size: 10px;
    text-align : center;
}
div [name = 'divStrDtlImgUpload'] > .thumb-checkbox{
    top  : -3px;
    left : 6px;
}
div [name = 'divStrDtlImgUpload'] > .delete{
    top  : 5px;
    left : 41px;
}

.thumb-nametag{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.thumb-nametag > span{
    display: block;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
    background: var(--color-primary);
}

.thumb-checkbox:has(input:checked) + .thumb-nametag{
    display: block;
}

.thumb-btn-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    background: rgba(0,0,0,.4);
    z-index: 1;
    display: none;
}
.thumb-btn-layer button{
    width: 36px;
    padding: 0;
    margin: 0 5px;
    border: none;
    background: transparent;
}
.thumb-btn-layer button i{
    filter: brightness(10);
}
.image-thumbnail:hover .thumb-btn-layer{
    display: flex;
}

textarea {
    overflow:auto;
    border:1px solid #dedede;
    padding: 0.5rem;
}

.progress {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .1);
    z-index: 10000;
}

.progress__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: .25rem;
    box-shadow: var(--box-shadow-button);
    background-color: #FBFBFB;

}

.progress__description {
    color: var(--color-gray-700);
    text-align: center;
    font-size: calc(1rem - 3px);
    max-width: 10rem;
    line-height: calc(1rem * 1.5);
    transition: all 0.2s linear;
}

@media screen and (max-width: 1647px) {
    .order-type-2 section:nth-of-type(1) {
        order: 1;
    }

    .order-type-2 section:nth-of-type(2) {
        order: 2;
    }

    .order-type-2 section:nth-of-type(3) {
        order: 4;
    }

    .order-type-2 section:nth-of-type(4) {
        order: 3;
    }

    .order-type-2 section:nth-of-type(5) {
        order: 5;
    }
}

.modal-footer-fixed,
.modal-footer {
    padding: 0 .5rem;
    justify-content: space-between;
    background-color: white;
    bottom: 0;
    width: 100%;
    border-top: 1px solid var(--color-gray);
    z-index: 50;
    position: relative;
}

.modal-footer-fixed {
    position: fixed;
}

.modal-footer {
    position: relative;
    display: flex;
    padding: .5rem;
}


.modal-footer-fixed.right-align :first-child {
    justify-content: flex-end;
}

.modal-footer-margin {
    margin-bottom: 3.25rem;
}

.container-x-as-xs,
.container-x-as-s,
.container-x-as-m,
.container-x-as-l,
.container-x-as-xl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container-x-as-xs {
    margin-left: -.25rem;
    margin-right: -.25rem;
}

.container-x-as-s {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.container-x-as-m {
    margin-left: -.75rem;
    margin-right: -.75rem;
}

.container-x-as-l {
    margin-left: -1rem;
    margin-right: -1rem;
}

.container-x-as-xl {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.container-x-as-xs > * {
    /* padding: .125rem; */
    margin: .25rem;
}

.container-x-as-s > * {
    /* padding: .25rem; */
    margin: .5rem;
}

.container-x-as-m > * {
    /* padding: .375rem; */
    margin: .75rem;
}

.container-x-as-l > * {
    /* padding: .5rem; */
    margin: 1rem;
}

.container-x-as-xl > * {
    /* padding: .625rem; */
    margin: 1.25rem;
}

.container-y-as-xs,
.container-y-as-s,
.container-y-as-m,
.container-y-as-l,
.container-y-as-xl {
    width: 100%;
}

.container-y-as-s > .y-as-item {
    padding: .5rem;
    width: 100%;
}

.container-y-as-l > .y-as-item {
    padding: 1rem;
    width: 100%;
}

.ib-tab-contents__item {
    overflow: hidden !important;
}

.modal-sidebar {
    position: relative;
    display: flex;
    align-items: center;
    /* min-width: 19rem;
    max-width: 19rem; */
    height: 100%;
    border-right: 1px solid var(--color-border);
    /*margin-right: 1rem;*/
}

.modal-sidebar-cta {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    /* min-width: .5rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 22px;
    height: 70px;
    /*background-size: 1rem 1rem;*/
    /*background: #0E1A1F url('/common/images/glyphs/glyph-chevron-right.svg ') no-repeat center center;*/
    background: #fff url('/common/images/glyphs/glyph-chevron-left.svg') no-repeat bottom 8px center;
    background-size: 12px 12px;
    border-radius: 0 6px 6px 0;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0px 2px 6px 0px #0000001A;
    z-index: 49;
    cursor: pointer;
}
.modal-sidebar-cta::after{
    content: "숨기기";
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #4d4d4d;
    writing-mode: vertical-lr;
    transform: translateY(-8px);
}
.modal-right{
	position: relative;
}
.modal-right.on .modal-right-content{
	width: 0;
}
.modal-right-cta{
	position: absolute;
	right: calc(100% - 5px);
	top: 50%; 
	transform: translateY(-50%);
	display: flex;
    justify-content: center;
    align-items: center;
    min-width: 22px;
    height: 70px;
    background: #fff url(/common/images/glyphs/glyph-chevron-right.svg) no-repeat bottom 8px center;
    background-size: 12px 12px;
    border-radius: 6px 0 0 6px;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0px 2px 6px 0px #0000001A;
    z-index: 49;
    cursor: pointer;
}
.modal-right-cta::after{
    content: "숨기기";
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #4d4d4d;
    writing-mode: vertical-lr;
    transform: translateY(-8px);
}
.modal-right.on .modal-right-cta{
    background-image: url('/common/images/glyphs/glyph-chevron-left.svg');
}
.modal-right.on .modal-right-cta::after{
    content: "더보기";
}
#prodDiv:has(.modal-sidebar.toggle){
    width: 0 !important;
}
.modal-sidebar.toggle {
    margin-right: -20rem;
}

.modal-sidebar.toggle .modal-sidebar-cta {
    left: 0;
    background-image: url('/common/images/glyphs/glyph-chevron-right.svg');
}
.modal-sidebar.toggle .modal-sidebar-cta::after{
    content: "더보기";
}

.modal-sidebar.toggle .modal-sidebar-content {
    width: 0;
    z-index: -1;
}

.modal-sidebar-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
    /*border-right: 1px solid var(--color-gray)*/
}

.has-sidebar-cta {
    /* margin-left: -1rem; */
}

.ui-resizable-e.ui-resizable-handle{
    width: 4px;
    background: var(--color-primary);
    right: 0;
}
#prodDiv:has(.ui-resizable-e.ui-resizable-handle){
    position: relative;
}
#prodDiv:has(.ui-resizable-e.ui-resizable-handle):after{
    content: '';
    display: block;
    width: 20px;
    height: 16px;
    position: absolute;
    top: 10px;
    left: calc(100% - 3px);
    transform: translate(-50%, -50%) rotate(90deg);
    background: url(/common/images/glyphs/glyph-resize.svg) no-repeat center / contain;
    z-index: 2;
}
#prodDiv:has(.modal-sidebar.toggle)::after{
    display: none;
}

.v-divider {
    display: inline-block;
    border-right: 1px solid #D5D2D2;
    margin: .25rem 1rem;
    height: 24px;
}

.slider-overlay {
    z-index: -1;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    transition: all 0.1s linear;
}

.slider-overlay.active {
    background-color: rgba(0, 0, 0, .5);
    z-index: 99;
    display: block;
    transition: all 0.1s linear;
}

.slider-container {
    position: absolute;
    display: flex;
    right: 0;
    top: 0;
    height: 95%;
    background-color: white;
    /*     max-width: calc(768px + 16vw); */
    margin-right: 0;
}

.slider-container.active {
    transition: all 0.3s linear;
    margin-right: 0 !important;
}

.input-list-col-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.input-list-col-2.label-m .item .label,
.input-grid.label-m .item .label,
.input-list-col-2 .column.label-m .item .label {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 96px;
}

.input-list-col-2.label-l .item .label,
.input-grid.label-m .item .label,
.input-list-col-2 .column.label-l .item .label {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 102px;
}

.input-list-col-2.label-xl .item .label,
.input-grid.label-xl .item .label,
.input-list-col-2 .column.label-xl .item .label {
    white-space: nowrap;
    margin-right: 0.25rem;
    min-width: 120px;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 1;
    padding: .5rem;
}

.input-list-col-2 .column .item {
    display: flex;
    align-items: center;
    padding-bottom: .5rem;
    min-height: 44px;

}

.input-list-col-2 .column .item * + *:not(.checkbox-container) {
    margin-right: .25rem !important;
}

.content-header > .head,
.modal-header > .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.quick-menu-wrapper {
    position: absolute;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: 1em;
    box-shadow: var(--box-shadow-button);
    top: calc(var(--navbar-height) + .5rem);
    left: calc(var(--sidebar-width) + .5rem);
    max-width: 22rem;
    flex-wrap: wrap;
    padding: 0 1rem 1rem 1rem;
    justify-content: space-between;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    transition-property:  transform, opacity;
    will-change: transform, opacity;
    z-index: -1;
    display: flex;
}

.quick-menu-wrapper.active {
    opacity: 1;
    z-index: 10;
    transform: scale(1);
}

.quick-menu-wrapper > .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .25rem .5rem;
    min-width: 6rem;
    margin-top: 1rem;
    color: var(--color-gray-700);
    border-radius: .25rem;
}

.quick-menu-wrapper > .item:hover {
    color: var(--color-gray-900);
    font-weight: 500;
    background-color: #f7f8fa;
}

.quick-menu-wrapper > .item .icon {
    width: 48px;
    height: 48px;
    margin-bottom: .5rem;
    background-position: center;
    background-size: 3rem 3rem;
    background-repeat: no-repeat;
}

.quick-menu-wrapper > .item .title {
	max-width: 5rem;
	height:32px;
    text-align: center;
    
    /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
}

#mainTab_contents {
    height: 100% !important;
}

.receipts-preview {
    border: 1px solid var(--color-gray);
    padding: .5rem;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray);
    margin: .5rem;
}

.card > .card-header {
    background-color: var(--color-gray-lighter);
    line-height: 2rem;
    text-align: center;
    border-bottom: 1px solid var(--color-gray);
    font-size: 16px;
}

.card > .card-content {
    padding: 1rem;
}

.card-container {

}

span.result {
	font-family: 'GmarketSansBold';
	font-weight: 700;
	font-size: 1.5rem;
}

span.smresult {
	font-family: 'GmarketSansBold';
	font-weight: 200;
	font-size: 1rem;
}

span.smtitle {
	font-weight: 400;
	font-size: 1.1rem;
}

span.resultsm {
	font-family: 'GmarketSansBold';
	font-weight: 700;
	font-size: 1rem;
	vertical-align: -2px;
}

span.resultsm {
	font-family: 'GmarketSansBold';
	font-weight: 700;
	font-size: 1rem;
	vertical-align: -2px;
}
span.kr{
	display: block;
	font-weight: 400;
	color: #666;
	font-size: 1rem;
	letter-spacing: -0.05rem;
}	
.table-grid {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.table-grid {
    margin-left: -1rem;
}

.table-grid > * {
    margin-bottom: 1rem;
    margin-left: 1rem;
    min-height: calc(100vh - 64px - 52px)
}

@media (min-width: 768px) {
    .table-grid > * {
        width: calc((99% / 1) - 1rem) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: calc((99% / 1) - 1rem) !important;
    }
}

@media (min-width: 1024px) {
    .table-grid > * {
        width: calc((99% / 2) - 1rem) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: calc((99% / 2) - 1rem) !important;
    }
}

@supports (grid-area: auto) {
    .table-grid {
        display: grid;
        grid-gap: 1rem 1rem;
    }
}

@supports (grid-area: auto) {
    .table-grid {
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        margin-left: 0;
    }

    .table-grid > * {
        width: auto !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    .table-grid {
        overflow-y: auto !important;
    }
}


button.tip {
    margin-right: .25rem;
    padding: 0;
    border: 0;
}

.tip-wrapper .ta-container--flex-scrollable{
    position: absolute;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: .25rem;
    box-shadow: var(--box-shadow-button);
    left: .5rem;
    top: 3.5rem;
    max-width: 50rem;
    min-width: 30rem;
    justify-content: space-between;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease;
    z-index: -1;
    font-size: 12px;
    overflow: hidden;
    white-space: normal;
    text-align: left;
}

.tip-wrapper h3 {
    margin-bottom: .5rem;
}

.tip-wrapper p {
    line-height: 1.5;
}

.tip-wrapper.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    transition: all 0.3s ease;
}

.ib-tab-contents__item.iframes.is-active > iframe {
    height: 100% !important;
}

.ib-tab-contents__item.iframes > iframe {
    height: 0 !important;
}

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 3.125rem;
    max-width: 3.125rem;
    height: 1.6rem;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5rem;
    background-color: #F4F5F8;
    border: 1px solid #B2B2B2;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 10px;
    border: 1px solid #B2B2B2;
}
.slider:after{
	content: 'NO';
	display: block;
	position: absolute;
	right: 6px;
    top: 50%;
    color: #A4ACB5;
    font-size: .625rem;
    transform: translateY(-50%);
}
input:checked + .slider:after{
	content: 'YES';
	display: block;
	position: absolute;
	left: 5px;
    top: 50%;
    color: #fff;
    font-size: .625rem;
    transform: translateY(-50%);
}
input[type="text"]:disabled, 
button:disabled, 
input[type="checkbox"]:disabled ~ .slider:after{
	color: rgba(88, 88, 92, 0.6);
}

input[type="checkbox"]:checked:disabled ~ .slider:after{
	color: #fff;
}


input:checked + .slider {
    background-color: var(--color-primary);
    border-color: transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary-dark);
}

input:checked + .slider:before {
    -webkit-transform: translateX(1.4rem);
    -ms-transform: translateX(1.4rem);
    transform: translateX(1.4rem);
    border-color: transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

.ib-tab-contents.ib-simple_under_blue {
    top: 0 !important;
    border: 0 !important;
}

button.close {
    max-width: 18px;
    max-height: 18px;
    height: 18px;
    width: 18px;
    border: 0;
    margin-left: 1rem !important;
    min-width: 18px !important;
    padding: 0;
}

.ib-tab-tabs.ib-simple_under_blue {
    padding: 0 !important;
}


.ib-tab-tabs.flex-2 {
    flex: 0 1 auto !important;
    order: 2 !important;
}

.ib-tab-tabs-dropdown.flex-1 {
    flex: 0 1 auto !important;
    order: 1 !important;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-gap: .5rem;
}

.location-grid__pill {
    display: inline-flex;
    align-items: center;
    border-radius: .25rem;
    text-align: center;
    justify-content: center;
    padding: .5rem;
    box-shadow: var(--box-shadow-button);
    color: var(--color-gray-500);
    border-radius: 20px;
}

.location-grid__pill:hover {
    box-shadow: var(--box-shadow-button-darker);
    color: var(--color-gray-700);
}

.location-grid__pill i {
    padding-right: .5rem;
}

.location-grid__pill--selected {
    /*border: 1px solid var(--color-primary);
    color: var(--color-gray-900);*/
    color: #fff;
    background: #41484D;
}
.location-grid__pill--selected:hover{
	color: #fff;
}

.ib-tab-contents .ib-tab-contents__item {
    display: none;
}

.ib-tab-contents .ib-tab-contents__item.is-active {
    display: block;
}

.export-sidebar-container > .content-options,
.export-sidebar-container > .export-sidebar {
    border-radius: 0 !important;
    position: relative
}

.export-sidebar-container > .export-sidebar {
    border: 0;
    border-right: 1px solid var(--color-border);
    z-index: 2;
}

.action-group .dropdown-container {
    position: absolute;
    max-height: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    top: 36px;
    left: 0;
    padding: .25rem;
    background-color: white;
    overflow: hidden;
    border: 1px solid transparent;
    transition: max-height .1s ease-in-out;
    z-index: -1;
}

.action-group .dropdown-container.active {
    max-height: 100vh;
    border-radius: .25rem;
    transition: max-height .1s ease-in-out;
    z-index: 2;
    margin-top: .25rem;
    box-shadow: var(--box-shadow-button)
}

.action-group .dropdown-container .item {
    line-height: 36px;
    padding: 0 .5rem;
    border-radius: .25rem;
}

.action-group .dropdown-container .item:hover {
    background-color: var(--color-gray-50);
}
.action-group .dropdown-container .item .radio-container {
    padding-left:0;
}
.action-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.action-group button.action {
    border-radius: .25rem 0 0 .25rem;
    margin: 0;
}

.action-group__dropdown-cta {
    border-radius: 0 .25rem .25rem 0 !important;
    margin: 0;
    border: 0;
    padding: 0 .75rem;
    border-left: 1px solid #e0e4ec;
    background-color: #F4F8FE;
}

.action-group__dropdown-cta:hover {
    background-color: #F2F6FB;
    box-shadow: var(--box-shadow-button);
    transition: all 0.2s linear;
}

.action-group__dropdown-cta:hover > i{
    filter: brightness(100%);
}


.action-group__dropdown-cta i {
    margin-right: 0;
    width: .75rem;
}

.action-group__dropdown-container{
    width: .75rem;
}

/* check select */
.select-area {
	width:fit-content;
	height:36px;
    position:relative;
    z-index:10;
}
.select-area .select-box {
    min-width:200px;
    height: 36px;
    font-size: 14px;
    line-height: 33px;
    border: 1px solid #DEDEDE;
    border-radius: .25rem;
    background:#fff;
    padding: 0 32px 0 6px;
    cursor:pointer;
    position:relative;
    top:0;
    left:0;
}
.select-area .select-box::before {
	content:'';
	width:100%;
	height:34px;
	background:url("/common/images/glyphs/glyph-select-arrows.svg") no-repeat center right 0.5rem;
	background-size:1rem 1rem;
	position:absolute;
	top:0;
	left:0;
}
.select-area .select-box.active {
    border-radius: .25rem .25rem 0 0;
}
.select-area .select-box.active::before {
	transform:rotate(180deg);
	background-position:center left .5rem;

}
.select-area .select-box .item-select {
    display:inline-block;
    height:27px;
    line-height:27px;
    text-align:center;
    border-radius: .25rem;
    background:#DEDEDE;
    padding:0 5px;
    margin-right:5px;
    cursor:pointer;
}
.select-area .select-box .item-select:last-child {
    margin-right:0;
}
.select-area .select-box span {
    cursor:pointer;
}
.select-area .check-box {
    display:none;
    list-style:none;
    border: 1px solid #DEDEDE;
    border-radius:0 0 .25rem .25rem;
    background:#fff;
    position:absolute;
    top:35px;
    min-width: 100%;
    max-height:600px; 
    overflow-y: scroll;
    overflow-x: hidden;
}
.select-area .select-box.active ~ .check-box {
    display:block;
}
.content-options-wrap .select-area .check-box{
    position: fixed;
    top: inherit;
    min-width: 200px;
}
.select-area .check-box li {
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    border-bottom: 1px solid #DEDEDE;
    padding: 0 6px;
    cursor:pointer;
}
.select-area .check-box li:last-child {
    border-bottom:none;
}
.select-area .check-box li label {
    width:100%;
    justify-content:flex-end;
}

.plus-option {
    font-weight: 700;
    color: var(--color-gray-900) !important;
    transition: all 0.2s linear;
}

.plus-option__separator {
    height: calc(100% - .75rem);
    border-right: 1px solid var(--color-gray-100);
    margin-right: .5rem;
    padding-left: .5rem;
}

.plus-option__checkmark {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: .75rem;
    background-color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.plus-option__checkmark::after {
    position: relative;
    content: '';
    width: .325rem;
    height: .575rem;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
}

.plus-option i {
    margin-right: .25rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover {
    transition: background-color 5000s;
    background: inherit;
}

input:-webkit-autofill:focus {
    transition: background-color 5000s !important;
    background: inherit !important;
    -webkit-box-shadow: 0 0 0 2px rgb(124 216 170), 0 0 0 4px rgb(208 234 220) !important
}

.NoEllipsis{
	text-overflow:clip !important;
}

#BarCode,
#BarCode2 {
    margin: 0 auto;
}

.object-fit-contain {
	object-fit: contain
}

/*통합 배달리스트 관련 추가 퍼블리싱 */
.state-wrap{
	width: 100%;
	display: flex;
	border: 1px solid #ddd;
	border-radius: .375rem;
	overflow: hidden;
}
.state-wrap .state-list{
	width: 100%;
	border-right: 1px solid #ddd;
	text-align: center;
	padding: .5rem 0
}
.state-wrap .state-list.--active{
	color: #fff;
	background: var(--color-primary);
}
.state-wrap .state-list .state-time{
	display: block;	
	font-size: .75rem;
}

/*1:1문의 추가*/
.navbar__square-cta--click{
	background: #fff;
	position: relative;
}
.navbar__square-cta--click:after{
	content: '';
	display: block;
	width: 10px;
	height: 8px;
	position: absolute;
	left: 50%;
	bottom:0;
	transform: translateX(-50%);
	background: url('/common/images/glyphs/selected.svg');
}
.slider-new{
	top: var(--navbar-height);
	z-index: 100 !important;
}
.slider-new .slider-container{
	width: 560px;
}
.slider-button-close{
	position: absolute;
	top: 0;
	cursor: pointer;
}
.slider-new .content-header{
	color: #fff;
	background: #136C46;
}
.slider-new button.header{
	font-size: .75rem;
	background: #309373;
	box-shadow: none;
	color: #fff;
	font-weight: 500;
}
.slider-new .content-container{
	background: #fff;
}
.taa-inquery-list{
	width: 100%; 
	background: #fff;
	padding: 0 30px;
}
.taa-inquery-list__item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #E5E8EB;
	padding: 12px 0 16px
}
.taa-inquery-list__title{
	font-size: .875rem;
	font-weight: 500;
	margin: 0 0 6px;
	color: #000;
}
.taa-inquery-list__time span{
	font-size: .75rem;
	color: #646673;
}
.on .taa-inquery-list__title{
	color: #C0C0C0;
}
.on  .taa-inquery-list__time span{
	color: #C0C0C0;
}
.taa-data--none{
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C0C0C0;
}
.navbar__square-cta--click i.glyph.bell.filled {
	background-image: url('/common/images/glyphs/glyph-bell-green.svg') !important;
	background-repeat: no-repeat;
	background-size: contain;
	filter: none !important; 
}

.box-scm{
	height: 97px;
	border: 1px solid var(--color-border);
	background-color: white;
    border-radius: 0.25rem;
}
.flex-center{
	display: flex; 
	align-items: center;
	margin: 0.7rem 1rem;
}

/* 자동 로그아웃 관련 */
.auto-logout{
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	height: 100%;
}
.auto-logout-time{
	color: #95A5AC;
	margin-right: 0.75rem;
	font-weight: 500;
}
.auto-logout-renew{
	width: 40px;
	height: 20px;
	background-color: #0F1D24;
    color: #95A5AC;
    border: none;
    font-size: 0.75rem
}

/* 자동 로그아웃 관련 */
.auto-logout{
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	height: 100%;
}
.auto-logout-time{
	color: #95A5AC;
	margin-right: 0.75rem;
	font-weight: 500;
}
.auto-logout-renew{
	width: 40px;
	height: 20px;
	background-color: #0F1D24;
    color: #95A5AC;
    border: none;
    font-size: 0.75rem
}

.n-bedge {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    background: #F23F2F;
    right: 6px;
    color: #fff;
    font-size: 0.5rem;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    transform: scale(0.7);
}


/* 아이콘 강조 애니메이션 */
.icon-amt01{
	animation: vibration 2.5s infinite;
}
@keyframes vibration {

    0%, 50% {
        transform: rotate(0deg);
    }
    5%, 15%, 25%, 35%, 45% {
        transform: rotate(13deg);
    }
    10%, 20%, 30%, 40% {
        transform: rotate(-13deg);
    }
}

/* noti 아이콘 */
.noti-p {
    color: #acacac;
    cursor : pointer;
}

.noti-p::before {
    content: "!";
    display: inline-block;
    width: 22px;
    height: 22px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: #acacac;
    border: 2px solid #acacac;
    border-radius: 50%;
}

/* 온라인 아이콘 */
.badge-online {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 2px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    color: #000 !important;
    border: 1px solid #f24233;
    border-radius: 50%;
}
.badge-online:after{
    content: '온';
}