/* rounded table */
table.rounded-table {
    --table-radius: 8px;
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: var(--table-radius);
    border-spacing: 0px;
    overflow: hidden;
}

.rounded-table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}

.rounded-table tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.rounded-table th {
    background-color: #f9f9f9;
    font-weight: 500;
}

.rounded-table th,
.rounded-table td {
    padding: 0.5rem 1rem;
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
}

.rounded-table td.p-0 .btn {
    margin: 2.5px;
}

.rounded-table td.p-0 img {
    margin: 2.5px;
}

.rounded-table td {
    border-top: 1px solid #ddd;
}

.rounded-table th {
    border-top: 1px solid #ddd;
}

.rounded-table thead tr:first-child th,
.rounded-table tbody tr:first-child th {
    border-top: 0px !important;
}

.rounded-table tfoot th {
    border-top: 1px solid #ddd;
}

.rounded-table thead:first-child tr:first-child th:first-child,
.rounded-table tbody:first-child tr:first-child td:first-child,
.rounded-table tbody:first-child tr:first-child th:first-child,
.rounded-table colgroup+thead tr:first-child th:first-child,
.rounded-table colgroup+tbody tr:first-child th:first-child,
.rounded-table tfoot:first-child tr:first-child th:first-child {
    border-radius: var(--table-radius) 0 0 0;
}

.rounded-table thead:last-child tr:last-child th:first-child,
.rounded-table tbody:last-child tr:last-child td:first-child,
/* .rounded-table colgroup+thead tr:last-child th:first-child, */
.rounded-table colgroup+tbody tr:last-child th:first-child,
.rounded-table tfoot:last-child tr:last-child th:first-child {
    border-radius: 0 0 0 var(--table-radius);
}

.rounded-table tbody:first-child tr:last-child th

/* , .rounded-table tbody:first-child tr:last-child td */
    {
    border-bottom-left-radius: var(--table-radius);
}


.rounded-table tbody:first-child tr:first-child th,
.rounded-table tbody:first-child tr:first-child td {
    border-top: 0px !important;
    overflow: hidden;
}

.list-table table td,
.list-table table th,
.list-pagination table th {
    white-space: nowrap;
}

.table-responsive {
    overflow-x: auto;
}

/* util */
.line45 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" stroke-opacity="0.1" /></svg>') !important;
}

.lazy-img:not(.loaded) {
    opacity: 0;
}

.d-none+.form-select-group {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

/* bootstrap5 extend */

@media (min-width: 576px) {
    .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .border-sm-0 {
        border: 0 !important;
    }

    .border-sm-start-1 {
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .font-weight-sm-normal {
        font-weight: 400 !important;
    }

    .font-weight-sm-bold {
        font-weight: 700 !important;
    }

    .font-size-sm-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 768px) {
    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .border-md-0 {
        border: 0 !important;
    }

    .border-md-start-1 {
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .font-weight-md-normal {
        font-weight: 400 !important;
    }

    .font-weight-md-bold {
        font-weight: 700 !important;
    }

    .font-size-md-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 992px) {
    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .border-lg-0 {
        border: 0 !important;
    }

    .border-lg-start-1 {
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .font-weight-lg-normal {
        font-weight: 400 !important;
    }

    .font-weight-lg-bold {
        font-weight: 700 !important;
    }

    .font-size-lg-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 1200px) {
    .mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .border-xl-0 {
        border: 0 !important;
    }

    .border-xl-start-1 {
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .font-weight-xl-normal {
        font-weight: 400 !important;
    }

    .font-weight-xl-bold {
        font-weight: 700 !important;
    }

    .font-size-lx-small {
        font-size: 0.9rem !important;
    }
}


@media (min-width: 768px) {
    .modal-xl {
        xmax-width: 90%;
    }
}

@media (min-width: 992px) {
    .bg-lg-none {
        background: none !important;
    }
}

.modal-fullscreen {
    max-width: none;
}


.timeline ul {
    list-style-type: none;
}

.timeline ul>li {
    margin-bottom: 18px;
    padding-bottom: 18px;
    position: relative !important;
    margin-left: -8px;
    border-bottom: 1px dashed #999;
}

.timeline ul>li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.timeline ul>li:last-child p {
    margin-bottom: 0;
    padding-bottom: 0;
}

.timeline ul>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #005249;
    left: -24px;
    width: 13px;
    height: 13px;
    xz-index: 99999;
    top: 4px;
}


.timeline-wrap.quantity {
    background-image: linear-gradient(to right, #d4d9df 1px, transparent 1px);
    background-position: 22px 0;
    background-repeat: repeat-y;
}

.timeline-wrap {
    background-image: linear-gradient(to right, #d4d9df 1px, transparent 1px);
    background-position: 10px 0;
    background-repeat: repeat-y;
}



.btn-switch,
.btn-check+.btn-switch {
    background-color: white !important;
    border: 1px solid #005249 !important;
    xfont-size: 0.75rem !important;
    font-weight: normal !important;
    white-space: nowrap;
}

.btn-check:active+.btn-switch,
.btn-check:checked+.btn-switch,
.btn-switch:active,
.btn-switch:focus {
    border: 1px solid #005249 !important;
    background-color: #005249 !important;
    color: white !important;
}

.rounded-bg-light {
    background-color: #eee !important;
    border-radius: 0.5rem;
    border: 1px solid #ccc !important;
    margin: 0.5rem 0;
    padding: 0.3rem !important;
}

tr.strikethrough {
    position: relative;
}

tr.strikethrough::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid red;
    z-index: 3;
}


/*
.breadcrumb a {
    text-decoration: underline;
}
*/
.breadcrumb a {
    text-decoration: underline;
    text-decoration-color: #000;
    /* 색상은 원하는대로 바꾸세요. */
    text-underline-offset: 5px;
    /* 밑줄의 위치를 조절합니다. */
    text-decoration-thickness: 1px;
    /* 밑줄의 두께를 조절합니다. */
}

.is-pinned .breadcrumb a {
    color: white;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-auto {
        width: auto !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-auto {
        width: auto !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-auto {
        width: auto !important;
    }
}

.strike-redline {
    background: linear-gradient(to right top, transparent calc(50% - 1px), red calc(50% - 1px), red 50%, transparent 50%);
    background-size: 104% 104%;
}

.cursor-pointer {
    cursor: pointer;
}

.font-code {
    font-family: Arial, Helvetica, sans-serif;
}

.in-brackets::before {
    content: '[';
}

.in-brackets::after {
    content: ']';
}

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

/* Default Sizes */
.fs-7 {
    font-size: .875rem !important;
}

.fs-8 {
    font-size: .75rem !important;
}

.fs-9 {
    font-size: .625rem !important;
}

/* SM Sizes */
@media (min-width: 576px) {
    .fs-sm-7 {
        font-size: .875rem !important;
    }

    .fs-sm-8 {
        font-size: .75rem !important;
    }

    .fs-sm-9 {
        font-size: .625rem !important;
    }
}

/* MD Sizes */
@media (min-width: 768px) {
    .fs-md-7 {
        font-size: .875rem !important;
    }

    .fs-md-8 {
        font-size: .75rem !important;
    }

    .fs-md-9 {
        font-size: .625rem !important;
    }
}

/* LG Sizes */
@media (min-width: 992px) {
    .fs-lg-7 {
        font-size: .875rem !important;
    }

    .fs-lg-8 {
        font-size: .75rem !important;
    }

    .fs-lg-9 {
        font-size: .625rem !important;
    }
}

/* XL Sizes */
@media (min-width: 1200px) {
    .fs-xl-7 {
        font-size: .875rem !important;
    }

    .fs-xl-8 {
        font-size: .75rem !important;
    }

    .fs-xl-9 {
        font-size: .625rem !important;
    }
}

/* XXL Sizes */
@media (min-width: 1400px) {
    .fs-xxl-7 {
        font-size: .875rem !important;
    }

    .fs-xxl-8 {
        font-size: .75rem !important;
    }

    .fs-xxl-9 {
        font-size: .625rem !important;
    }
}

.badge-shadow {
    box-shadow: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 30%) 0px 12px 24px -4px;
    border-radius: 10px;
    border: 1px dashed #ddd;
    padding: 8px;
    color: black;
    font-weight: normal;
}

.list-group-sm {
    --bs-list-group-item-padding-x: 0.5rem;
    --bs-list-group-item-padding-y: 0.25rem;
}

blockquote {
    position: relative;
    border-left: 2px solid rgba(0, 0, 0, 0.125);
    padding-left: 10px;
}


.list-group-header {
    padding: 0.25rem 0.5rem;
}


.list-group-header.rounded {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important;
}

.list-group-header.collapsed {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-bottom-width: 1px !important;
}

/* Top-left radius to 0 */
.radius-top-start-0 {
    border-top-left-radius: 0 !important;
}

/* Top-start radius to 0 (Same as top-left in LTR layouts) */
.radius-top-end-0 {
    border-top-right-radius: 0 !important;
}

/* Bottom-left radius to 0 */
.radius-bottom-start-0 {
    border-bottom-left-radius: 0 !important;
}

/* Bottom-start radius to 0 (Same as bottom-left in LTR layouts) */
.radius-bottom-end-0 {
    border-bottom-right-radius: 0 !important;
}

/* Start (Left in LTR) radius to 0 */
.radius-start-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* End (Right in LTR) radius to 0 */
.radius-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Top radius to 0 */
.radius-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Bottom radius to 0 */
.radius-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}




.scroll-container {
    position: relative;
}

.scroll-overflowx {
    overflow-x: auto;
}

.scroll-indicator-left,
.scroll-indicator-right {
    width: 1px;
    position: absolute;
    top: 19px;
    /* bottom: 0; */
    display: none;
    align-items: center;
    justify-content: center;
}

.scroll-container .scroll {
    display: flex;
}

.scroll-indicator-left.scroll {
    left: 0;
}

.scroll-indicator-right.scroll {
    right: 0;
}

.scroll-indicator-left.scroll::before {
    content: ":";
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    position: absolute;
    left: -5px;
    color: rgb(158, 158, 158);
}

.scroll-indicator-right.scroll::after {
    content: ":";
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    position: absolute;
    right: -5px;
    color: rgb(158, 158, 158);
}

.form-control[readonly],
.form-select[readonly] {
    background-color: #f2f2f2;
}

.form-select[readonly] {
    /* appearance 속성을 none으로 설정하여 작은 삼각형 아이콘을 감춥니다. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* cursor를 기본으로 설정하여 사용자가 선택할 수 없도록 합니다. */
    cursor: default;
}

.input-xs {
    padding: 0.15rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.btn-xs {
    padding: 0.15rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}



.tab {
    xfont-size: 0.84rem;
}

.tab>.nav-tabs .nav-link {
    border: 1px solid #f7f7f7;
    color: #71748d;
    border-radius: 10px 10px 0 0;
    margin-right: 1px;
    border-bottom: 0 !important;
}

.tab>.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border: 1px solid #e7eaf3;
}

.tab>.nav-tabs .nav-link {
    padding: 8px 20px !important;
}

.tab>.nav-tabs .nav-link.active {
    padding: 10px 20px !important;
    z-index: 99;
}

.tab>.nav .nav-item {
    margin-left: -2px;
    margin-right: 0px;
}

.tab>.nav .nav-item:first-child {
    margin-left: 10px;
}

/*
@media (min-width: 576px) {
    .tab>.nav .nav-item:first-child {
        margin-left: 0px;
    }

    .tab>.nav.nav-tabs {
        float: left;
        display: block;
        margin-right: -1px;
        border-bottom: 0;
    }

    .tab>.nav-tabs .nav-link {
        border-radius: 10px 0 0 10px;
        padding: 10px 15px;
        color: #71748d;
        width: 100%;
        text-align: right;
        margin-right: -1px;
        border-right: 1px solid #e7eaf3 !important;
        border-bottom: 1px solid #f7f7f7 !important;
    }

    .tab>.nav-tabs .nav-link.active {
        border: 1px solid #f7f7f7;

        color: #428EFE;
        border: 1px solid #e7eaf3 !important;
        border-right: 0 !important;
    }

    .tab>.nav .nav-item {
        margin-right: 1px;
        margin-left: 0;
    }
} */

@media (min-width: 576px) {

    .col-sm-3 {
        xmax-width: 150px;
    }

    .borer-bottom-sm-0 {
        border-bottom: 0px !important
    }

    .border-sm-1 {
        border-width: 1px;

    }
}

@media (min-width: 576px) {
    .flex-shrink-sm-0 {
        flex-shrink: 0;
    }

    .flex-grow-sm-1 {
        flex-grow: 1;
    }
}

@media (max-width: 576px) {
    .sticky-area {
        position: sticky;
        top: -1px;
        z-index: 998;
    }

    /* styles for when the header is in sticky mode */
    .sticky-area.is-pinned {
        background: #005249;
        margin: -12px;
        color: #fff;
        xpadding: 1rem;
        padding: 1rem;
        text-align: center;
        transition: background-color 0.15s linear;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    }

    .sticky-area.is-pinned .breadcrumb-item+.breadcrumb-item::before {
        color: white;
        ;
    }

    .sticky-area.is-pinned .breadcrumb-item.active {
        color: white;
    }

    .sticky-area.is-pinned .text-secondary {
        --bs-text-opacity: 1;
        --bs-secondary-rgb: 255, 255, 255;
        ;
    }

    .sticky-area.is-pinned img {
        filter: invert(1) grayscale(1) brightness(100);
    }
}

.breadcrumb-item {
    --bs-breadcrumb-item-padding-x: 0.3rem;
    display: flex;
    align-items: center;
}

.breadcrumb-item+.breadcrumb-item::before {
    font-family: monospace;
    transform: scaleX(0.5);
    float: initial;
}

.numbered-list,
.number-list {
    list-style-type: decimal;
}

.hangul-list {
    list-style-type: hangul;
}

.juso-container {
    position: relative;
    display: block;
}

.juso-loader {
    border: 2px solid black;
    border-top: 2px solid transparent;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: rotateAnimation 2s linear infinite;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes rotateAnimation {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes flashAnimation {

    0%,
    100% {
        background-color: initial;
    }

    50% {
        background-color: #eee;
    }
}

.juso-animation {
    animation: flashAnimation 1s linear;
}

/* Small devices (>= 576px) */
@media (min-width: 576px) {
    .position-relative-sm {
        position: relative !important;
    }
}

/* Large devices (>= 992px) */
@media (min-width: 992px) {
    .position-relative-lg {
        position: relative !important;
    }
}

/* Extra large devices (>= 1200px) */
@media (min-width: 1200px) {
    .position-relative-xl {
        position: relative !important;
    }
}

/* Small devices (>= 576px) */
@media (min-width: 576px) {
    .bottom-sm-0 {
        bottom: 0 !important;
    }

    .right-sm-0 {
        right: 0 !important;
    }
}

/* Medium devices (>= 768px) */
@media (min-width: 768px) {
    .bottom-md-0 {
        bottom: 0 !important;
    }

    .right-md-0 {
        right: 0 !important;
    }
}

/* Large devices (>= 992px) */
@media (min-width: 992px) {
    .bottom-lg-0 {
        bottom: 0 !important;
    }

    .right-lg-0 {
        right: 0 !important;
    }
}

/* Extra large devices (>= 1200px) */
@media (min-width: 1200px) {
    .bottom-xl-0 {
        bottom: 0 !important;
    }

    .right-xl-0 {
        right: 0 !important;
    }
}

@media (min-width: 576px) {
    .btn-sm-lg {
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
        border-radius: .2rem;
    }
}

/* Small devices (sm, 576px 이상) */
@media (min-width: 576px) {
    .position-sm-absolute {
        position: absolute !important;
    }
}

/* Medium devices (md, 768px 이상) */
@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute !important;
    }
}

/* Large devices (lg, 992px 이상) */
@media (min-width: 992px) {
    .position-lg-absolute {
        position: absolute !important;
    }
}

/* Extra large devices (xl, 1200px 이상) */
@media (min-width: 1200px) {
    .position-xl-absolute {
        position: absolute !important;
    }
}

/* Extra extra large devices (xxl, 1400px 이상) */
@media (min-width: 1400px) {
    .position-xxl-absolute {
        position: absolute !important;
    }
}

.right-1 {
    right: 0.25rem !important;
    /* Bootstrap에서 .25rem은 대략 4px와 동일합니다 (1rem = 16px 가정). */
}

.right-2 {
    right: 0.5rem !important;
    /* Bootstrap에서 기본적으로 rem 단위를 사용합니다. */
}

.right-3 {
    right: 0.75rem !important;
    /* 이 값은 대략 12px에 해당합니다 (1rem = 16px 기준). */
}

.top-1 {
    top: 0.25rem !important;
    /* Bootstrap에서 .25rem은 대략 4px와 동일합니다 (1rem = 16px 가정). */
}

.top-2 {
    top: 0.5rem !important;
    /* Bootstrap에서 기본적으로 rem 단위를 사용합니다. */
}

.top-3 {
    top: 0.75rem !important;
    /* 이 값은 대략 12px에 해당합니다 (1rem = 16px 기준). */
}

/* .form-control-file {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
} */



@media (min-width: 576px) {
    .form-sm-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px;
    }

    .bg-sm-transparent {
        background-color: transparent !important;
    }

    .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    /* Border All Sides */
    .border-sm {
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-sm-0 {
        border: 0 !important;
    }

    /* Border Top */
    .border-sm-top {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-sm-top-0 {
        border-top: 0 !important;
    }

    .border-sm-top-1 {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Bottom */
    .border-sm-bottom {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-sm-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-sm-bottom-1 {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Start (left in LTR, right in RTL) */
    .border-sm-start {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-sm-start-0 {
        border-left: 0 !important;
        /* LTR */
        /* border-right: 0 !important; For RTL */
    }

    .border-sm-start-1 {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    /* Border End (right in LTR, left in RTL) */
    .border-sm-end {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-sm-end-0 {
        border-right: 0 !important;
        /* LTR */
        /* border-left: 0 !important; For RTL */
    }

    .border-sm-end-1 {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }


    .font-weight-sm-normal {
        font-weight: 400 !important;
    }

    .font-weight-sm-bold {
        font-weight: 700 !important;
    }

    .font-size-sm-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 768px) {
    .form-md-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px;
    }

    .bg-md-transparent {
        background-color: transparent !important;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    /* Border All Sides */
    .border-md {
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-md-0 {
        border: 0 !important;
    }

    /* Border Top */
    .border-md-top {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-md-top-0 {
        border-top: 0 !important;
    }

    .border-md-top-1 {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Bottom */
    .border-md-bottom {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-md-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-md-bottom-1 {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Start (left in LTR, right in RTL) */
    .border-md-start {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-md-start-0 {
        border-left: 0 !important;
        /* LTR */
        /* border-right: 0 !important; For RTL */
    }

    .border-md-start-1 {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    /* Border End (right in LTR, left in RTL) */
    .border-md-end {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-md-end-0 {
        border-right: 0 !important;
        /* LTR */
        /* border-left: 0 !important; For RTL */
    }

    .border-md-end-1 {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }


    .font-weight-md-normal {
        font-weight: 400 !important;
    }

    .font-weight-md-bold {
        font-weight: 700 !important;
    }

    .font-size-md-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 992px) {
    .form-lg-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px;
    }

    .bg-lg-transparent {
        background-color: transparent !important;
    }

    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    /* Border All Sides */
    .border-lg {
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-lg-0 {
        border: 0 !important;
    }

    /* Border Top */
    .border-lg-top {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-lg-top-0 {
        border-top: 0 !important;
    }

    .border-lg-top-1 {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Bottom */
    .border-lg-bottom {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-lg-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-lg-bottom-1 {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Start (left in LTR, right in RTL) */
    .border-lg-start {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-lg-start-0 {
        border-left: 0 !important;
        /* LTR */
        /* border-right: 0 !important; For RTL */
    }

    .border-lg-start-1 {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    /* Border End (right in LTR, left in RTL) */
    .border-lg-end {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-lg-end-0 {
        border-right: 0 !important;
        /* LTR */
        /* border-left: 0 !important; For RTL */
    }

    .border-lg-end-1 {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }



    .font-weight-lg-normal {
        font-weight: 400 !important;
    }

    .font-weight-lg-bold {
        font-weight: 700 !important;
    }

    .font-size-lg-small {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 1200px) {
    .form-xl-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px;
        margin-left: 0px;
    }

    .bg-xl-transparent {
        background-color: transparent !important;
    }

    .mb-xl-0 {
        margin-bottom: 0 !important;
    }

    /* Border All Sides */
    .border-xl {
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-xl-0 {
        border: 0 !important;
    }

    /* Border Top */
    .border-xl-top {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-xl-top-0 {
        border-top: 0 !important;
    }

    .border-xl-top-1 {
        border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Bottom */
    .border-xl-bottom {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .border-xl-bottom-0 {
        border-bottom: 0 !important;
    }

    .border-xl-bottom-1 {
        border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    /* Border Start (left in LTR, right in RTL) */
    .border-xl-start {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-xl-start-0 {
        border-left: 0 !important;
        /* LTR */
        /* border-right: 0 !important; For RTL */
    }

    .border-xl-start-1 {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-right: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    /* Border End (right in LTR, left in RTL) */
    .border-xl-end {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .border-xl-end-0 {
        border-right: 0 !important;
        /* LTR */
        /* border-left: 0 !important; For RTL */
    }

    .border-xl-end-1 {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
        /* LTR */
        /* border-left: var(--bs-border-width) solid var(--bs-border-color) !important; For RTL */
    }

    .font-weight-xl-normal {
        font-weight: 400 !important;
    }

    .font-weight-xl-bold {
        font-weight: 700 !important;
    }

    .font-size-lx-small {
        font-size: 0.9rem !important;
    }
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

body {
    font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    padding-right: 0 !important;
}

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

:root {
    --bs-body-color: #222222;
    --bs-secondary-color: #777777;
    --bs-secondary-rgb: 119, 119, 119;
    --bs-tertiary-color: #999999;
    /* --bs-primary: #222566;
  --bs-primary-rgb: rgba(34, 37, 102, 0.4);
  --bs-primary-bg-subtle: #f2f5ff; */
    /* --bs-primary : #243dd6;
  --bs-primary-rgb : rgba(36, 61, 214, 0.4);
  --bs-primary-bg-subtle : #f6f7ff; */
    --bs-primary: rgb(0, 82, 73);
    /*#62C66C;*/
    --bs-primary-rgb: rgba(145, 145, 145, 0.5);
    --bs-primary-bg-subtle: #eefbf1;
    --bs-danger: #ff5a5a;
    --bs-danger-rgb: 255, 90, 90;
    --bs-danger-text: #ff5a5a;
    --bs-border-color: #e7e7e7;
    --bs-border-color-translucent: rgba(231, 231, 231, 1);
    --bs-link-color: #777777;
    /* --bs-link-hover-color: #222566; */
    /* --bs-link-hover-color: #243dd6; */
    --bs-link-hover-color: rgb(0, 82, 73);
    /*#36be4f;*/
    --bs-box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.02),
        0px 12px 24px -4px rgba(145, 158, 171, 0.12);
    --bs-box-shadow-sm: 0px 1px 2px 0px rgba(145, 158, 171, 0.16);
    --bs-nav-pills-border-radius: 8px;
}

.nav-pills {
    --bs-nav-pills-border-radius: 8px;
}

a {
    text-decoration: none;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1rem;
}

.text-primary.text-primary-custom {
    color: var(--bs-primary) !important;
}

.fw-semibold.fw-semibold-custom {
    font-weight: 500 !important;
}

/* header */
header {
    position: relative;
    z-index: 999;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0px 2px 0px 0px rgba(145, 158, 171, 0.16);
    background-color: #f6f8fa;
    --borderWidth-thin: max(1px, 0.0625rem);
    --color-border-default: #d0d7de;
    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px)*-1) var(--color-border-default);
    ;
}

.navbar-custom {
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-disabled-color: var(--bs-tertiary-color);
    --bs-navbar-active-color: var(--bs-link-hover-color);
    /*rgba(54, 190, 79, 1);*/
    --bs-navbar-hover-color: var(--bs-link-hover-color);
    /*rgba(54, 190, 79, 1);*/
}

.navbar-toggler-custom {
    border: 0;
}

.navbar-toggler-custom .navbar-toggler-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* @media screen and (max-width: 1399px) {
    header {
        font-size: 0.875rem;
    }
} */

/* contents */
.canister-bg {
    xbackground: linear-gradient(#F9FAFF 380px, #ffffff 380px);
}

.medicine-list-bg {
    background: linear-gradient(#f9f9f9 380px, #ffffff 380px);
}

.list-group-custom {
    --bs-list-group-item-padding-x: 0;
}

.btn-custom {
    background-color: transparent;
    outline: none;
    border: 0;
    font-size: 0.875rem;
}

.btn-collapse::after {
    content: "";
    display: flex;
    align-items: center;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m4 4 5 5 5-5'/%3E%3C/svg%3E");
    background-position: center top;
    transition: 0.5s;
}

.btn-collapse[aria-expanded="false"]:after {
    transform: rotate(-180deg);
    transition: 0.5s;
}

.search-input {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.375rem 1rem;
    border-radius: 1.5rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
}

.search-input .form-control {
    border: 0;
    /* font-size: 0.75rem; */
}

.search-label img {
    display: block;
    width: 20px;
    height: 20px;
}

.overflow-scroll {
    overflow-y: scroll !important;
    max-height: 308px;
    max-width: 100%;
}

.nav-filtering {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-filtering .nav-item {
    display: flex;
    align-items: center;
}

.nav-filtering .nav-item:before {
    content: "";
    display: flex;
    width: 1px;
    height: 0.875rem;
    margin: 0 0.5rem;
    background-color: var(--bs-border-color);
}

.nav-filtering .nav-item:first-child::before {
    display: none;
    margin-right: 0;
}

.nav-filtering .nav-link.active {
    font-weight: 500;
    color: var(--bs-primary);
}

.nav-view {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.nav-view .nav-link {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
}

/* card */
.card.card-canister-lg,
.card.card-canister-sm {
    /* --bs-card-border-radius: 1.5rem;
    --bs-card-inner-border-radius: calc(1.5rem - 1px);
    border-radius: 1.5rem;
    background-color: var(--bs-white); */
}

/* custom */
/* header {
    position: relative;
    z-index: 999;
    width: 100%;
    font-size: 1rem;
    box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
} */

.card.card-canister-lg,
.card.card-canister-sm {
    border: 0;
    background-color: rgb(255, 255, 255);
    color: rgb(33, 43, 54);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    background-image: none;
    overflow: hidden;
    position: relative;
    box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
    border-radius: 16px;
    z-index: 0;
}

/* end */


.card-canister-lg {
    min-height: 395px;
}

.card-canister-lg .card-img-top {
    height: 160px;
    object-fit: cover;
}

.card-canister-sm {
    height: 208px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.card-canister-sm .card-img-top {
    height: 90px;
    object-fit: cover;
}


.canister-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: rgb(0, 82, 73);
    /*var(--bs-navbar-active-color);*/
}

.text-primary.text-primary-custom {
    color: var(--bs-primary)
}

.canition-sm .canister-number {
    width: 36px;
    height: 36px;
    bottom: -36px !important;
    left: 10px !important;
}

.canister-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* background-color: var(--bs-primary-rgb); */
    background-color: rgba(15, 88, 79, 0.3);
    border: 1px solid #00524985;
}

.canister-footer {
    border: 0;
    background-color: transparent;
}

.badge.badge-custom {
    font-weight: 500;
}

@media screen and (min-width: 1700px) {
    .row-cols-xxl-9>* {
        flex: 0 0 auto;
        width: 11.111%;
    }

    .row-cols-xxl-7>* {
        flex: 0 0 auto;
        width: 14.28571%;
    }
}

@media screen and (max-width:1699px) and (min-width: 1200px) {
    .row-cols-xl-7>* {
        flex: 0 0 auto;
        width: 14.28571%;
    }

    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* modal */
/* .modal.slot-modal,
.modal.shop-modal {
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: 1.5rem;
    --bs-modal-inner-border-radius: calc(1.5rem - 1px);
} */

.modal.slot-modal,
.modal.shop-modal {
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;
}

.slot-modal-dialog {
    --bs-modal-width: 100%;
}

.slot-modal-header {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

@media screen and (max-width: 1399px) {
    .slot-modal-filtering {
        max-height: 250px;
        overflow: hidden;
        overflow-y: scroll;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

.shop-modal-card .card-img-top {
    height: 112px;
    ;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-modal-padding);
    /*1.5rem;*/
}

.shop-modal-dialog {
    --bs-modal-width: 235px;
}

/* form */
.form-select.form-select-custom {
    border: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
}

.form-control.form-control-custom {
    border: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
}

/* btn */
.btn-custom.btn-primary {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.btn-custom.btn-outline-primary {
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    background-color: var(--bs-white);
}

.btn-custom.btn-outline-secondary {
    background-color: var(--bs-white);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

.btn.canister-btn:hover {
    background-color: var(--bs-primary);
    border-color: transparent;
}

.btn.canister-btn:focus {
    background-color: var(--bs-primary);
    border-color: transparent;
}

.btn-close.btn-close-white {
    color: var(--bs-white);
    opacity: 1;
}html {
    scroll-behavior: auto !important;
}

.drug-infomation-modal {
    z-index: 1056 !important;
}

/* hr {
        margin-bottom: 0 !important;
    } */

.htmx-indicator {
    display: none;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

.htmx-indicator {
    pointer-events: all;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    xbackground-color: rgba(0, 0, 0, 0.1);
    z-index: 2000;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    /* display: flex; */
    align-items: center;
}

.dot-shuttle {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ff42ca;
    color: #ff42ca;
    box-shadow: 9999px 0 0 0 #ff42ca;
    animation: dot-shuttle 1s infinite linear;
    animation-delay: 0.1s;
}

.dot-shuttle::before,
.dot-shuttle::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-shuttle::before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ff42ca;
    color: #ff42ca;
    animation: dot-shuttle-before 1s infinite linear;
    animation-delay: 0s;
}

.dot-shuttle::after {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ff42ca;
    color: #ff42ca;
    animation: dot-shuttle-after 1s infinite linear;
    animation-delay: 0.2s;
}

@keyframes dot-shuttle {
    0% {
        box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
    }

    25%,
    50%,
    75% {
        box-shadow: 9999px 0 0 0 #ff42ca;
    }

    100% {
        box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
    }
}

@keyframes dot-shuttle-before {
    0% {
        box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
    }

    25%,
    50%,
    75% {
        box-shadow: 9984px 0 0 0 #ff42ca;
    }

    100% {
        box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
    }
}

@keyframes dot-shuttle-after {
    0% {
        box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
    }

    25%,
    50%,
    75% {
        box-shadow: 10014px 0 0 0 #ff42ca;
    }

    100% {
        box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
    }
}



/* .img-small {
        display: none;
    } */
/* html {
        scroll-behavior: auto !important;
    } */
.scrollable-container {
    overscroll-behavior: contain;
}

.nobr {
    white-space: nowrap;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item span::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 20px;
    background-color: #ddd;
    /* Change this color to match your design */
}

.navbar-nav .nav-item:last-child span::after {
    display: none;
}

@media (min-width: 1400px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        --bs-navbar-nav-link-padding-x: 1rem;
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }
}

.fixheight {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-primary);
    border-color: #003b34;
}

:root {
    --primary-color: #005249;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    filter: brightness(90%);
}

.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    filter: brightness(110%);
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.input-bg {
    background-color: #f6f8fa !important;
}

.list-group-dropdown {
    position: relative;
    margin-right: 10px;
}

.list-group-dropdown .list-group-item {
    --bs-list-group-item-padding-x: 0.5rem;
    --bs-list-group-item-padding-y: 0.2rem;
    white-space: nowrap;
}

.list-group-dropdown .list-group:first-child {
    --bs-list-group-bg: transparent;
}

.list-group-dropdown .list-group-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    padding: 0;
}

.list-group-dropdown:hover .list-group-submenu {
    display: block;
}

.list-group-dropdown:hover .list-group:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.list-group-submenu .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.ellipsis .page-link {
    padding-left: 0;
    padding-right: 0;
}



/* 모바일 뷰 (기본 설정) */
.contents-height {
    min-height: calc(100vh - 57px - 51px);
    margin-bottom: 51px;
}

/* sm 뷰포인트 이상 */
@media (min-width: 576px) {
    .contents-height {
        min-height: calc(100vh - 57px - 51px);
    }
}

/* md 뷰포인트 이상 */
@media (min-width: 768px) {
    .contents-height {
        min-height: calc(100vh - 57px - 51px);
    }
}

/* lg 뷰포인트 이상 */
@media (min-width: 992px) {
    .contents-height {
        min-height: calc(100vh - 57px - 179px);
        margin-bottom: 0px;
    }
}

/* xl 뷰포인트 이상 */
@media (min-width: 1200px) {
    .contents-height {
        min-height: calc(100vh - 57px - 179px);
        margin-bottom: 0px;
    }
}

footer {
    background: white;
}

.border-top.bar-bottom {
    border-top: 1px solid #005249 !important;
}

.bar-bottom {
    font-size: 1rem;
    box-shadow: 0px 2px 0px 0px rgba(145, 158, 171, 0.16);
    background-color: #f6f8fa;
    --borderWidth-thin: max(1px, 0.0625rem);
    --color-border-default: #d0d7de;
    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px) * -1) var(--color-border-default);
}

.navbar-nav .nav-item span::after {
    width: 0;
}

.modal {
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;
}

.nav-bottom .nav-tabs {
    xborder-top: 1px solid #dee2e6;
    border-bottom: none;
    /* Add a bottom border to the entire nav-tabs */
}

.nav-bottom .nav-tabs .nav-link {
    x--bs-nav-link-padding-y: 0.2rem;
    xfont-size: 0.9rem;
    border-top: none;
    margin-left: -1px;
    /* Remove the default border */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
    border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
}

.nav-bottom .nav-tabs .nav-link.active {
    xborder-top: none;
    /* Remove the default border for active link */
    border-bottom: 3px solid red;
    /* Add a bottom border for active link */
}

.logo {
    width: 15px;
    height: 15px;
    position: relative;
    overflow: hidden;
}

.height-46 {
    height: 46px;
}

.green {
    border-radius: 8px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.green.active {
    background-color: var(--bs-primary);
    color: rgb(255, 255, 255);
    border: 0;
}

.green:hover {
    border-color: var(--bs-primary);
    background-color: rgba(0, 82, 73, 0.5);
    color: rgba(0, 82, 73, 1);
    ;
    /* color: white; */
    ;
}


.canister .canister-btn {
    z-index: 98;
}

.canister .canister-btn img {
    z-index: 99;
}

.canister-sm .card .title {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.canister-lg .card .title {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.canister-sm .card .title {
    height: 100px;
}

.canister-sm .img-small {
    width: 15px;
    height: 15px;
}

.canister .title {
    /* background: white; */
    background: #dbe4ef;

    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.canister img.title {
    /* background: white; */
    background: white;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.canister .card-header:first-child {
    border-radius: 16px;
}

.canister .badge {
    z-index: 99;
}

.canister .badge.top-0 {
    top: -5px !important;
}

.canister-sm .card .p-4 {
    padding: 1rem !important;
}

.canister-sm .card .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.canister-sm .card .card-body.empty {
    min-height: 182px;
}

.canister-lg .card .card-body.empty {
    min-height: 160px;
}

.canister .card {
    border: 0.5px solid #0000003b;
    background-color: rgb(255, 255, 255);
    color: rgb(33, 43, 54);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    background-image: none;
    xoverflow: hidden;
    position: relative;
    box-shadow: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 30%) 0px 12px 24px -4px;
    border-radius: 16px;
    z-index: 0;
    width: 100%;
}

.canister .canister-number {
    bottom: -48px;
    left: 24px;
}

.canister .card-body.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.canister .card-footer {
    border: 0;
    background-color: transparent;
}

.canister .alert-quantity {
    border: 2px solid red;
    box-sizing: border-box;
}

/*
@media (max-width: 576px) {
    .list-search-input {
        top: 10px;
        right: 10px;
        width: 200px;
        position: absolute !important;
    }
} */
.dotted .noselect {
    cursor: pointer;
}

.dotted .quantity {
    border: 1px dotted transparent;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 0px;
    border-radius: 0.375rem;
    background: white;
    z-index: 2;
}

.dotted .label {
    z-index: 1;
}

.dotted:hover .quantity,
.dotted:active .quantity,
.dotted:visited .quantity {
    border: 1px dotted gray;
    padding-left: 10px;
    padding-right: 10px;
}

.input-group-text-left {
    width: 80px;
    justify-content: right;
    /* font-size: 0.9rem; */
}

.input-group-text-right {
    /* font-size: 0.9rem; */
    min-width: 100px;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.cart-modal-dialog {
    --bs-modal-width: 700px;
    /* min-width: var(--bs-modal-width); */
}

.history-overflow-scroll {
    xoverflow-y: scroll !important;
    height: 80vh;
    max-width: 100%;
}

.history-overflow-scroll .border-bottom:last-child {
    border-bottom: 0 !important;
}

.history-overflow-scroll-option2 {
    height: 439px;
}

.search .form-control {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    border-right: 0;
    padding-left: 15px;
}

.search .btn {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    border-color: #ced4da;
    border-left: 0;
    background-color: white;
}

.canister-btn {
    width: 30px;
    height: 30px;
    border-radius: 0.375rem;
    border: 0;
    /* 1px solid #00524985; */
}

.cover-image img {
    width: 100%;
    object-fit: cover;
    display: none;
}

.cover-image img.loaded {
    display: block;
}

.cover-image {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.drug {
    border-radius: 16px;
    overflow: hidden;
    border: 0;
}

#drug-result .card {
    margin-bottom: 1rem;
}

#drug-result .card:last-child {
    margin-bottom: 0rem !important;
}

#drug-result label {
    padding-top: 0;
    padding-bottom: 0;
}

/* #drug-result .card .card-body .row {
        margin-bottom: 1rem !important;
    } */

#drug-result .card .card-body .row:last-child {
    margin-bottom: 0 !important;
}

#drug-result table tbody>tr:last-child>td {
    border-bottom: 0;
}

#drug-result table thead th:first-child {
    padding-left: 16px;
}

#drug-result table tbody td:first-child {
    padding-left: 16px;
    font-weight: normal;
}

#direct-drug-result .card {
    margin-bottom: 1rem;
}

#direct-drug-result .card:last-child {
    margin-bottom: 0rem !important;
}

#direct-drug-result label {
    padding-top: 0;
    padding-bottom: 0;
}

#direct-drug-result .card .card-body .row {
    margin-bottom: 1rem !important;
}

#direct-drug-result .card .card-body .row:last-child {
    margin-bottom: 0 !important;
}

#direct-drug-result table tbody>tr:last-child>td {
    border-bottom: 0;
}

#direct-drug-result table thead th:first-child {
    padding-left: 16px;
}

#direct-drug-result table tbody td:first-child {
    padding-left: 16px;
    font-weight: normal;
}

.btn-group-sm>.btn,
.btn-sm {
    --bs-btn-border-radius: 8px;
}

.col-form-label {
    font-weight: bold !important;
}

.same ul.ms-0 {
    margin-left: -1rem !important;
}

#search-result:empty {
    margin-top: 0 !important;
}

.search-result-blank {
    border: 0;
    background-color: rgb(255, 255, 255);
    color: rgb(33, 43, 54);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    background-image: none;
    overflow: hidden;
    position: relative;
    box-shadow: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 30%) 0px 12px 24px -4px;
    border-radius: 16px;
    z-index: 0;
    width: 100%;
}

.search-result .position-absolute.end-0 {
    margin-right: 5px;
    margin-left: 5px;
}

.search-result .position-absolute.bottom-0 {
    margin-bottom: 5px;
}

/* .modal-backdrop.show:nth-of-type(odd) {
        z-index: 1056 !important;
    }

    .modal-backdrop.show {
        z-index: 1054 !important;
    } */

.modal .modal-backdrop-inside {
    z-index: 1055 !important;
}

.modal .modal-dialog {
    z-index: 1056 !important;
}

.modal {}

/*


    .modal-second {
        z-index: 1057 !important;
    } */
.company-search .form-control {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-right: 0;
    padding-left: 15px;
    background-color: #f6f8fa;
}

.company-search .btn {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-color: #ced4da;
    border-left: 0;
    background-color: #f6f8fa;
}

@media (max-width: 576px) {
    .scroll-auto-sm {
        height: initial !important;
    }
}

@media (min-width: 576px) {
    .scroll-auto-sm {
        overflow-y: auto;
    }
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    xbackground-color: rgba(0, 0, 0, 0.3);
    /* 투명도 조절을 위해 rgba() 색상 값을 사용합니다. */
    z-index: 9999;
    /* 다른 요소 위에 오도록 z-index 값을 설정합니다. */
    display: flex;
    justify-content: center;
    align-items: center;
}

.canister-list-group .list-group-item {
    padding: 0;
}

.canister-list-group .list-group-item a {
    --bs-list-group-item-padding-y: 0.375rem;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
}

.canister-list-group .list-group-item {
    padding: 0;
}

.canister-list-group .list-group-item a {
    --bs-list-group-item-padding-y: 0.375rem;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
}

.submenu .timeline ul>li:before {
    content: " ";
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #005249;
    left: -21px;
    width: 7px;
    height: 7px;
    xz-index: 99999;
    top: 8px;
}

.like-a {
    padding: 0;
    margin: 0;
}

@media (max-width: 576px) {
    .sticky-area {
        position: sticky;
        top: -1px;
        z-index: 998;
    }

    /* styles for when the header is in sticky mode */
    .sticky-area.is-pinned {
        background: #005249;
        margin: -12px;
        color: #fff;
        xpadding: 1rem;
        padding: 1rem;
        text-align: center;
        transition: background-color 0.15s linear;
    }

    .sticky-area.is-pinned .breadcrumb-item+.breadcrumb-item::before {
        color: white;
    }

    .sticky-area.is-pinned .breadcrumb-item.active {
        color: white;
    }

    .sticky-area.is-pinned .text-secondary {
        --bs-text-opacity: 1;
        --bs-secondary-rgb: 255, 255, 255;
    }

    .sticky-area.is-pinned img {
        filter: invert(1) grayscale(1) brightness(100);
    }
}

.packages .package-checkbox {
    display: none;
}

.packages .form-switch {
    padding-left: 0;
}

.select-setting .package-checkbox {
    display: block;
}

.select-setting .form-switch {
    padding-left: 2.5rem;
}

.packages .hide-package {
    display: none;
}

.select-setting .hide-package {
    display: block;
}

.packages .message {
    display: none;
}

.select-setting .message {
    display: block;
}

.dot-package {
    opacity: 0.5;
}

.modal-open {
    overflow: hidden;
}

.modal-split {
    max-width: 100%;
}

.modal-split .modal-body {
    padding: 0;
    display: flex;
}

.modal-split .modal-left {
    flex: 0 0 45%;
    background-color: #f8f9fa;
    padding: 1rem;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
}

.modal-split .modal-right {
    flex: 1;
    overflow-y: auto;
}

.modal-split .modal-footer {
    flex-shrink: 0;
}

/* 모바일 화면 (sm 미만, 576px 미만) */
@media (max-width: 575.98px) {
    .modal-split {
        max-width: 100%;
    }

    .modal-split .modal-body {
        flex-direction: column;
    }

    .modal-split .modal-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem;
        overflow-y: visible;
    }

    .modal-split .modal-right {
        flex: none;
        padding: 0;
        overflow-y: visible;
    }
}

/* 스크롤바 스타일링 (좌우 모두 적용) */
.modal-split .modal-left::-webkit-scrollbar,
.modal-split .modal-right::-webkit-scrollbar {
    width: 4px;
}

.modal-split .modal-left::-webkit-scrollbar-track,
.modal-split .modal-right::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-split .modal-left::-webkit-scrollbar-thumb,
.modal-split .modal-right::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-split .modal-left::-webkit-scrollbar-thumb:hover,
.modal-split .modal-right::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 직접 중첩된 row 수정 */
.row>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

/* 필요시 부모 row의 패딩도 조정 */
.row:has(> .row) {
    padding-left: 0;
    padding-right: 0;
}

.row>.row>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.cani {
    background-color: #f7f7f7;
    padding: 8px;
    color: black;
    font-weight: normal
}

.cani-disabled {
    background-color: #ffffff;
    background-image: repeating-linear-gradient(45deg,
            /* 사선 각도 */
            #ebebeb,
            /* 선 색상 */
            #ebebeb 5px,
            /* 선 두께 */
            transparent 5px,
            /* 경계 */
            transparent 10px
            /* 간격 (5px + 5px) */
        );
    padding: 8px;
    color: black;
    font-weight: normal;
    opacity: 0.5;
}

.standard.list-group .list-group-item:last-child {
    border-bottom: none;
}

.standard.list-group {
    max-height: calc(100dvh - 243px);
    overflow-y: auto;
}

@media (min-width: 576px) {
    .standard.list-group {
        max-height: calc(100dvh - 301px);
    }
}


.excludes.exclude {
    display: none !important;
}

.bg-secondary {
    background-color: #eee !important;
}

@media (min-width: 576px) {

    /* sm 브레이크포인트 */
    .col-sm-reset {
        flex: 0 0 auto;
        xwidth: auto;
        max-width: 100%;
    }

    .select-setting .col-sm-reset {
        width: auto;
    }

    .row-sm-reset {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
        margin-top: var(--bs-gutter-y);
    }
}

.img-none {
    display: block !important;
}

.img-block {
    display: none !important;
}

.img-flex {
    display: none !important;
}

.select-setting .ximg-block {
    display: block !important;
}

.ximg-block {
    display: none !important;
}

.select-setting .img-none {
    display: none !important;
}

.select-setting .img-block {
    display: block !important;
}

.select-setting .img-flex {
    display: flex !important;
}

td.position-relative {
    overflow: inherit;
}

.overlay2 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.table-quantity th {
    white-space: nowrap;
}

td.img {
    width: 75px;
    height: 41px;
}

td {
    white-space: nowrap;
}

col.min-w-100px {
    min-width: 100px;
}

col.max-w-100px {
    width: 100px;
    max-width: 100px;
}

.list-image {
    object-fit: cover;
    xpadding: 3px !important;
    border-radius: 10px;
}

.w-200px {
    width: 200px;

    min-width: 200px;
}

.input-group-text-ellipsis {
    max-width: 24.83px;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease;
    padding: 3px 5px;
}

.input-group-text-ellipsis.expanded {
    max-width: none;
    width: initial;
    z-index: 9999;
    /* 텍스트의 전체 너비에 따라 너비를 조정합니다 */
}

input[inputmode="numeric"] {
    padding: 3px 5px;
}

.width-29px {
    width: 29.83px;
}

.width-24px {
    width: 24.83px;
}

.width-45px span {
    width: 40px;
}

.w-150px {
    width: 100px;
}

.min-w-140px {
    max-width: 100px;
}

/*
    .order-confirm-table .position-absolute {
        display: none;
    }

    .order-confirm-table .active .position-absolute {
        display: block;
    } */

.position-absolute.top-0 {
    top: 4px !important;
}

.position-absolute.start-0 {
    left: 5px !important;
}

.active {
    border-color: #222;
}

td.striped-background {
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 8px,
            /* 빈 공간의 크기 조절 */
            #ddd 8px,
            #ddd 9px),
        #f9f9f9;
    /* 이 부분이 배경색입니다. */
}

.overflowed-class {
    cursor: pointer;
}

.overflowed-class:after {
    content: "...";
    top: -15px;
    position: absolute;
    color: rgb(158, 158, 158);
}



.canister-box .canister-btn {
    z-index: 98;
}

.canister-box .canister-btn img {
    z-index: 99;
}

.canister-box .card .title-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.canister-box .title-image {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.canister-box .title {
    height: 150px;
    background: #dbe4ef;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

@media (min-width: 576px) {
    .canister-box .title {
        width: 275px;
        border-radius: 14px;

        xborder: 1px solid #efefef !important;
    }

    .canister-box .title-image {
        border-radius: 14px;
    }
}

.canister-box .card-header:first-child {
    border-radius: 16px;
}

.canister-box .badge {
    z-index: 99;
}

.canister-box .badge.top-0 {
    top: -5px !important;
}

.canister-box .card .card-body.empty {
    min-height: 160px;
}

.canister-box .card {
    border: 0.5px solid #0000003b;
    background-color: rgb(255, 255, 255);
    color: rgb(33, 43, 54);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    background-image: none;
    xoverflow: hidden;
    position: relative;
    box-shadow: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 30%) 0px 12px 24px -4px;
    border-radius: 16px;
    z-index: 0;
    width: 100%;
    overflow: hidden;
}

.canister-box .canister-number {
    bottom: -48px;
    left: 24px;
}

.canister-box .card-body.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.canister-box .card-footer {
    border: 0;
    background-color: transparent;
}

.canister-box .alert-quantity {
    border: 2px solid red;
}

table .alert-quantity,
table.alert-quantity {
    border: 2px solid red;
}

/*
@media (max-width: 576px) {
    .list-search-input {
        top: 10px;
        right: 10px;
        width: 200px;
        position: absolute !important;
    }
} */


@media (max-width: 576px) {
    .sticky-area {
        position: sticky;
        top: -1px;
        z-index: 998;
    }

    /* styles for when the header is in sticky mode */
    .sticky-area.is-pinned {
        background: #005249;
        margin: -12px;
        color: #fff;
        xpadding: 1rem;
        padding: 1rem;
        text-align: center;
        transition: background-color 0.15s linear;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .sticky-area.is-pinned .breadcrumb-item+.breadcrumb-item::before {
        color: white;
    }

    .sticky-area.is-pinned .breadcrumb-item.active {
        color: white;
    }

    .sticky-area.is-pinned .text-secondary {
        --bs-text-opacity: 1;
        --bs-secondary-rgb: 255, 255, 255;
    }

    .sticky-area.is-pinned img {
        filter: invert(1) grayscale(1) brightness(100);
    }
}