/*
	Subject: Common style for Skote template
  Author: h.kang
  Create: 2020-10-06
  
  https://themeforest.net/item/skote-html-laravel-admin-dashboard-template/25548061
*/
@import url(./notosanskr.css);
@import url(./loader.css);

body {
    font-family: "Noto Sans KR", sans-serif !important;
    --bs-body-font-size: 13px;
    margin: 0;
    padding: 0;
    word-break: keep-all;
}

p {
    margin: 0;
    padding: 0;
}

i.mdi {
    font-size: 1rem;
}

.x-small {
    font-size: 50% !important;
    font-weight: 400;
}

.form-control:disabled {
    background-color: #e9ecef !important;
}

a:not(.btn) {
    color: unset;
    cursor: pointer;
}

a:hover:not(.btn) {
    color: var(--kt-primary) !important;
}

a.text-underline {
    text-decoration: underline !important;
}

a.text-underline:hover {
    text-decoration: underline !important;
}

.la-ball-clip-rotate {
    height: 3rem !important;
    width: 3rem !important;
}
.la-ball-clip-rotate > div {
    border-width: 0.25rem !important;
    height: 3rem !important;
    width: 3rem !important;
}

.loader-custom {
    background-image: url(/assets/images/loader-calc.gif);
    /* background-image: url(/assets/images/loader-dots.gif); */
    background-size: contain;
    height: 5rem;
    width: 5rem;
}

.loader-md {
    height: 4rem !important;
    width: 4rem !important;
}

.loader-sm {
    height: 2.5rem !important;
    width: 2.5rem !important;
}

.loader-xs {
    height: 1.75rem !important;
    width: 1.75rem !important;
}

.overflow-y-scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    scrollbar-gutter: stable both-edges;
}

.overflow-x-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
}

.break-all {
    word-break: break-all;
}

/* list */
ul.list-bullet-sm {
    padding-left: 0;
}

ul.list-bullet-sm > li {
    list-style-type: none;
    position: relative;
    padding-left: 1.2rem; /* 불릿 공간 확보 */
}

ul.list-bullet-sm > li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    top: 0;
    display: inline-block;
}

.table {
    margin-bottom: 0 !important;
}

.drag-scroll:active {
    cursor: grabbing;
}

/* 강조 표시 */
@keyframes flash-highlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: var(--kt-brand-1-light); } /* 연노랑 배경 (예: 경고 강조) */
}

.flash-highlight {
    animation: flash-highlight 0.9s ease-in-out 5;
}

/* =============================================================================
   Basic
   ========================================================================== */

/* button */
h3 button,
h3 a.btn {
    margin-top: -0.25rem;
}

.btn-flat {
    padding: calc(0.625rem) calc(1.25rem) !important;
    font-size: 1rem !important;
}

.btn-xs {
    padding: calc(0.45rem + 1px) calc(1rem + 1px) !important;
    font-size: 0.875rem !important;
}

/* Loader */
.loader-center {
    position: fixed;
}

.loader-wrap,
.category-loader,
.payment-loader {
    position: absolute;
}

/* alert */
#infoAlert.alert {
    position: fixed;
    width: 30%;
    left: 50%;
    top: 0;
    z-index: 1055;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* File upload */
.upload-zone {
    margin: 0 0 3px 0;
    max-width: 250px;
    max-height: 250px;
    overflow: hidden;
}

.upload-zone-big {
    margin: 0 0 3px 0;
    min-width: 600px;
    max-height: 75%;
    overflow: hidden;
}

/* preview */
.preview {
    border-radius: 1rem !important;
    background: var(--kt-light);
    min-width: 250px;
    min-height: 250px;
    max-width: 250px;
    max-height: 250px;
    position: relative;
    text-align: center;
}

.preview img {
    border-radius: 1rem !important;
    width: 250px;
    height: 250px;
    max-width: 250px;
    max-height: 250px;
    object-fit: contain;
    outline: none;
}

.preview.preview-lg {
    background: #f0f0f0;
    position: relative;
    text-align: center;
    min-width: 600px;
    max-width: 75%;
    min-height: 300px;
}

.preview.preview-lg img {
    max-width: 100%;
    object-fit: contain;
    outline: none;
}

/* thumbnail */
.thumbnail {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    object-fit: cover;
}

.thumbnail img {
    width: inherit;
    height: inherit;
    object-fit: cover;
}

.thumbnail p {
    width: inherit;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.thumbnail.thumbnail-xs {
    width: 32px !important;
    height: 32px;
}

.thumbnail.thumbnail-sm {
    width: 65px !important;
    height: 65px;
}

.thumbnail.thumbnail-lg {
    width: 150px;
    height: 150px;
}

.thumbnail.thumbnail-xl {
    width: 260px;
    height: 260px;
}

.contents {
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: break-word;
}

input.datepicker {
    z-index: 1 !important;
}

.step-indicator {
    display: flex;
    align-items: center;
}

.step-indicator .step-dot {
    width: 12px;
    height: 12px;
    margin-left: 12px;
    border-radius: 50%;
    background-color: #d2d6da;
}

.step-indicator .step-dot:first-child {
    margin-left: 0 !important;
}

.step-indicator .step-dot.active {
    background-color: #000;
}

.step-indicator .step-dot.done {
    background-color: #28a745;
}

.ignore-line-break {
    white-space: normal;
    word-break: break-word;
}

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

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

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

/* =============================================================================
   Icon
   ========================================================================== */

.icon {
    height: 2.125rem; /* 34px */
    width: 2.125rem; /* 34px */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-lg {
    height: 1.75rem; /* 28px */
    width: 1.75rem; /* 28px */
}

.icon-md {
    height: 1.5rem; /* 24px */
    width: 1.5rem; /* 24px */
}

.icon-sm {
    height: 1.375rem; /* 22px */
    width: 1.375rem; /* 22px */
}

.icon-xs {
    height: 1.25rem; /* 20px */
    width: 1.25rem; /* 20px */
}

.icon-warning {
    background-image: url(/assets/images/icon/icon-warning.svg);
}

.icon-info {
    background-image: url(/assets/images/icon/Info.svg);
}

.icon-info-warning {
    background-image: url(/assets/images/icon/Info-warning.svg);
}

.capslock-notice .icon {
    height: calc(0.75em + 0.775rem + 1px);
    width: calc(0.75em + 0.775rem + 1px);
    margin-right: calc(0.375em + 0.3875rem + 1px);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc107'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e");
}

/* =============================================================================
  custom-file
  ========================================================================== */

.custom-file {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
}

.custom-file-label {
}

.custom-file-label::after {
    display: none;
}

.custom-file-input {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    height: 0;
}

.file-group .btn {
    word-break: keep-all;
}

/* =============================================================================
    form validation
    ========================================================================== */

.fv-plugins-message-container:empty {
    display: none !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545 !important;
}

.custom-file-input.is-valid ~ .custom-file-label,
.was-validated .custom-file-input:valid ~ .custom-file-label {
    border-color: #28a745;
}

.custom-file-input.is-invalid ~ .custom-file-label,
.was-validated .custom-file-input:invalid ~ .custom-file-label {
    border-color: #dc3545;
}

/* =============================================================================
   Notification
   ========================================================================== */

#notiList {
    max-height: calc(75vh - 100px);
}

.noti {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    position: relative;
    display: flex;
}
.noti::before {
    height: 1.25rem;
    width: 1.25rem;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
}
*.unread::after {
    content: "";
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    background-color: #f00;
    position: absolute;
    top: 0;
    right: 0;
}

.noti {
    background-color: rgba(var(--kt-info-rgb), .15);
}
.noti-notice {
    background-color: rgba(var(--kt-danger-rgb), .15);
}
.noti-event {
    background-color: rgb(from #BB00FF r g b / .15);
}
.noti-prepay {
    background-color: rgba(var(--kt-warning-rgb), .15);
}

.noti::before {
    content: "";
    background-image: url(/assets/images/icon/notification/icon-info.svg);
}
.noti-notice::before {
    content: "";
    background-image: url(/assets/images/icon/notification/icon-notice.svg);
}
.noti-event::before {
    content: "";
    background-image: url(/assets/images/icon/notification/icon-event.svg);
}
.noti-prepay::before {
    content: "";
    background-image: url(/assets/images/icon/notification/icon-prepay-noti.svg);
}


/* =============================================================================
   animation
   ========================================================================== */

.slide-on-show {
    animation: slide-on-show 0.25s ease-in-out;
}
@keyframes slide-on-show {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-on-hide {
    animation: fade-on-hide 0.25s ease-in-out;
}
@keyframes fade-on-hide {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}

/* =============================================================================
   Metronic Themes
   ========================================================================== */

.datepicker-input {
    background-image: url(/assets/images/icon/calendar.svg);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem 1.5rem;
    padding-right: 2.5rem !important;
}

.form-check-label {
    cursor: pointer;
}

.form-check :not(:disabled) {
    cursor: pointer;
}

.toastr-custom {
    bottom: 12px;
    left: 50%;
    max-width: 80vw;
    transform: translateX(-50%);
    /* margin: 0 12px; */
}

.toastr-custom > div {
    width: auto !important;
}

.toastr {
    max-width: 500px;
}

.nav-tabs {
    border-bottom: unset !important;
}

.nav-tabs .nav-item {
    min-width: 125px;
    text-align: center;
}

.nav-line-tabs .nav-item .nav-link {
    border-bottom: 3px solid var(--kt-gray-400) !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0 !important;
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom: 3px solid var(--kt-primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--kt-primary) !important;
}

.accordion-button::after {
    --bs-accordion-btn-icon: url(/assets/images/icon/chevron-down.svg) !important;
}

.accordion-custom .accordion-button:not(.collapsed)::after {
    --bs-accordion-btn-icon: url(/assets/images/icon/chevron-down.svg) !important;
    transform: rotate(180deg);
}




/* =============================================================================
   icon
   ========================================================================== */

.icon-star {
    background-image: url(/assets/images/icon/icon-star.svg);
}
.icon-star-half {
    background-image: url(/assets/images/icon/icon-star-half.svg);
}
.icon-star-inactive {
    background-image: url(/assets/images/icon/icon-star-inactive.svg);
}


/* =============================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1700px) {
}

@media (min-width: 1200px) {
}

@media (max-width: 1200px) and (min-width: 992px) {
}

@media (max-width: 991px) and (min-width: 767px) {
}

@media (max-width: 768px) {
    .toastr-custom {
        max-width: 100% !important;
        left: 1rem !important;
        right: 1rem !important;
        transform: translateX(0) !important;
    }

    .toastr-custom .toastr {
        padding: 1rem 1rem 1rem 5rem !important;
    }
}

@media (max-width: 374px) {
   
}