/* Reset and Override*/
:root {
    --bs-body-font-size: 1rem;
    --bs-input-focus-border-color: #011533;
    --bs-body-color: #212529;
    --bs-gray-500: #adb5bd;
    --brand-color: #343a40;
    --color-grid-outside-border: #e5e7eb;
    --bs-input-disabled-bg: #cdcdcd50;
    --second-color: #1A6DFF;
    --bs-card-spacer-x: 1.5rem;
    --la-line-color: #00000027;
    --la-brand-color: #343a40;
    --bs-primary: #0d6efd; /* ct-badge-primary */
    --bs-secondary: #6c757d; /* ct-badge-secondary */
    --bs-success: #198754; /* ct-badge-success */
    --bs-info: #0dcaf0; /* ct-badge-info */
    --bs-danger: #dc3545; /* ct-badge-danger */
    --bs-warning: #ffc107; /* ct-badge-warning */
    --bs-light: #f8f9fa; /* ct-badge-light */
    --bs-dark: #212529; /* ct-badge-dark */

    --bs-primary-rgb: 13, 110, 253; /* #0d6efd */
    --bs-secondary-rgb: 108, 117, 125; /* #6c757d */
    --bs-success-rgb: 25, 135, 84; /* #198754 */
    --bs-info-rgb: 13, 202, 240; /* #0dcaf0 */
    --bs-danger-rgb: 220, 53, 69; /* #dc3545 */
    --bs-warning-rgb: 255, 193, 7; /* #ffc107 */
    --bs-light-rgb: 248, 249, 250; /* #f8f9fa */
    --bs-dark-rgb: 33, 37, 41; /* #212529 */
}

body {
    position: relative;
}


table {
    border-spacing: unset;
    box-sizing: border-box;
}

hr {
    margin: 14px 0;
    border-top: 1px solid var(--la-line-color);
    opacity: 1;
}

.btn {
    --bs-btn-font-size: 14px;
}

.card {
    --bs-card-cap-padding-y: 0;
    margin-bottom: 0;
    /*    --bs-card-spacer-x: 1.5rem;*/
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: 0;
    padding-left: 0;
}



.card-body-nonbottom {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) 0 var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.dropdown-menu {
    --bs-dropdown-link-hover-bg: #e5e5e5;
    --bs-dropdown-padding-y: 2px;
    --bs-dropdown-item-padding-x: 13px;
    --bs-dropdown-min-width: 5rem;
    box-shadow: 0 2px 4px rgba(15, 34, 58, .22);
    z-index: 2000;
}

.color-info {
    color: #777;
}


.form-label {
    margin: 0;
}

.form-check-input {
    width: 18px;
    height: 18px;
}

    .form-check-input:checked {
        background-color: var(--brand-color);
        border-color: var(--brand-color);
    }


html {
    font-size: 16px;
}

body, h1, P, figure {
    margin: 0;
}

label {
    font-weight: initial;
    margin: 0;
    font-size: 14px;
}

textarea.form-control {
    min-height: 120px;
    margin-top: 2px;
}

body {
    background-color: #f5f6f8; /*#f1f1f1;*/
    font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
    html.is-dashboard {
        scrollbar-gutter: stable;
    }

    /* Safari fallback */
    @supports not (scrollbar-gutter: stable) {
        html.is-dashboard {
            overflow-y: scroll;
        }
    }
}

th {
    font-weight: 500;
}

img {
    max-width: 100%;
}

.label-info {
    color: #999;
    font-size: 12px;
    float: right;
    line-height: 1.6;
}

.label-info-danger {
    color: red;
    font-size: 12px;
    float: right;
    line-height: 1.6;
}


.label-info-real-price {
    color: #d70000;
    font-size: 12px;
    font-weight: 500;
    float: right;
}



.login-body {
    background-color: #ededed;
    background-image: url('/assets/images/mes_backpack.jpg');
    /*    height: 300px;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.form-control {
    font-size: 14px;
    padding: .5rem .5rem;
}

.page-content {
    padding: 90px 16px 20px 16px;
}

@media (min-width: 992px) {
    .page-content {
        padding: 90px 30px 20px 30px;
    }
}

ol, ul {
    padding: 0;
}

input [type='search']::-webkit-search-cancel-button {
    filter: grayscale(100%);
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--bs-gray-500);
    opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--bs-gray-500);
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--bs-gray-500);
}



.btn-outline-light {
    --bs-btn-border-color: none;
}

.form-control:disabled {
    color: #686868;
}


.modal {
    --bs-modal-header-padding: 16px 24px;
    --bs-modal-padding: 16px 24px;
    --bs-modal-header-border-color: #eeeeee;
    --bs-modal-margin: 1rem;
}

.modal-footer {
    padding: 14px 22px;
}

.footer-info {
    color: red;
    flex: 1;
}

.modal-content {
    min-height: 660px;
}

.form-switch-xl {
    padding-left: 2.75rem;
    min-height: 38px;
    line-height: 38px;
}

    /*스위치관련*/
    .form-switch-xl .form-check-input {
        width: 60px;
        height: 32px;
        position: relative;
    }

.form-switch .form-check-input {
    --bs-form-switch-bg: url('/assets/images/switch_off.svg');
}

.form-select {
    padding: .47rem 1.75rem .47rem .75rem;
    font-size: 14px;
    line-height: 1.5;
}

    .form-select:focus {
        border-color: var(--bs-input-focus-border-color);
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

/*그리드의 드랍다운은 top을 import해주면 안되!! */
.dropdown-menu.show:not(.grid-dropdown-menu) {
    top: 100% !important;
}

/*이경우는 그리드가 안속하니깐!!*/
.dropdown-menu.show[data-popper-placement^=left], .dropdown-menu.show[data-popper-placement^=right], .dropdown-menu.show[data-popper-placement^=top] {
    top: auto !important;
}





.waves-effect .waves-ripple {
    background: radial-gradient( rgba(0, 0, 0, 0.14) 0, rgba(0, 0, 0, 0.21) 40%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.35) 60%, rgba(255, 255, 255, 0) 70% );
}


.btn-group-sm > .btn, .btn-sm {
    padding: 4px 12px;
}



.badge.bg-light {
    /*    border: solid 1px #dfdfdf;*/
    box-shadow: inset 0 0 0 1px #dfdfdf;
}


.bg-flash {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2; /* 너무 투명하면 글자가 안 보일 수 있으니 0.3 정도가 적당합니다 */
    }

    100% {
        opacity: 1;
    }
}


.table-light {
    --bs-table-color: #000;
    --bs-table-bg: #f3f3f3;
    --bs-table-border-color: #dddddd;
    --bs-table-striped-bg: #f1f1f1;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dddddd;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e4e4e4;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

    .table-light th {
        border-top: 1px solid var(--la-line-color) !important;
        border-bottom: 1px solid var(--la-line-color) !important;
    }

.transit-table tbody td {
    /*    box-shadow: inset 0 -1px 0 0 #f0f0f0 !important;*/
    border-bottom: 1px var(--color-grid-outside-border) solid;
}


.transit-table.table > :not(caption) > * > * {
    padding: 0.5rem .75rem;
}



/*사이드바 뱃지 위치.. scss로 처리되서 여기서 설정함*/
#sidebar-menu ul li .badge {
    margin-top: 2px;
}


.icon-barcode {
    /* 1. 왼쪽 여백: 아이콘 크기만큼 띄워줍니다 */
    padding-left: 36px !important;
    /* 2. 배경 이미지 설정 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 96h32v320H0V96zm64 0h64v320H64V96zm96 0h32v320h-32V96zm64 0h32v320h-32V96zm64 0h64v320h-64V96zm96 0h32v320h-32V96zm64 0h32v320h-32V96zm64 0h32v320h-32V96z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center; /* 왼쪽에서 12px 지점, 세로 중앙 */
    background-size: 16px 16px; /* 아이콘 크기 적절히 조절 */
    background-color: #fff;
    cursor: pointer;
}


    .icon-barcode:focus {
        border-color: #e87575;
        outline: none;
        box-shadow: 0 0 5px rgb(255 158 158 / 50%);
    }


.icon-search {
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23555555' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 13px 13px;
    cursor: pointer;
}
