@charset "UTF-8";

.thmem-dark .form-control:disabled, .form-control[readonly] {
    background: #252e3e;
}

.table thead th, .theme-dark .markdown > table thead th, .theme-dark .input-group-text {
    background: #00000038 !important;
}

.form-control, .form-select {
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 50%), 0 -1px 1px #fff0, 0 1px 0 #fff0;
}

.accordion-item{
    background-color : #0f172a;
}

.offcanvas-backdrop.show {
    opacity: .5;
}

.div-table {
    display: table;
    border-color: rgba(98, 105, 118, 0.16);
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

.div-table > * {
    display: table-row;
}

.div-table > *:first-child {
    background: #00000038;
    color: #626976;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.div-table > * > * {
    display: table-cell;
    border: 1px solid rgba(98, 105, 118, 0.16);
    padding: .5rem;
    font-size: .8rem;
}

.div-table > * > * > .form-control, 
.div-table > * > * > .form-select {
    padding: 0.3rem 0.75rem;
}

.note-editor{
    padding: 0 1rem;
}

.note-btn.dropdown-toggle:after {
    content: none;
}

.note-toolbar {
    background-color: #11162a;
}

.note-editable {
    background-color: #fff;
}

.note-editor .note-editing-area .note-editable table td, 
.note-editor .note-editing-area .note-editable table th {
    border: 1px solid #c1c1c1;
    padding: 5px 3px;
}

.validation-message {
    padding-top: 5px;
    color: red;
}

.file-upload {
    cursor: pointer;
}

.table tr.active {
    background: rgba(255,255,255,0.25);
}

.ql-container {
    font-family: "NotoSansKR" !important;
}

.ql-editor {
    background: #232e40;
    min-height: 500px;
}

.ql-container.ql-snow {
    border: 0 !important;
}

.ql-toolbar.ql-snow {
    border: 1px solid #2a3345 !important;
}

.table-scroll {
    overflow-y: auto;
    max-height: 510px
}

    .table-scroll.xs {
        overflow-y: auto;
        max-height: 335px
    }

    .table-scroll.sm {
        overflow-y: auto;
        max-height: 480px
    }

    .table-scroll.md {
        overflow-y: auto;
        max-height: 570px
    }

    .table-scroll.lg {
        overflow-y: auto;
        max-height: 670px
    }

    .table-scroll.xl {
        overflow-y: auto;
        max-height: 700px
    }

    .table-scroll.xxl {
        overflow-y: auto;
        max-height: 830px
    }

.fc-col-header tr th {
    padding: 8px;
    background-color: #151d2c;
}

    .fc-col-header tr th a {
        color: white;
        font-weight: 500;
    }

.fc .fc-toolbar.fc-header-toolbar {
    margin: 2em !important;
}

.fc .fc-timegrid-slot {
    height: 2em !important;
}

.fc-toolbar-chunk {
    display: flex;
    align-items: center;
}

.fc .fc-daygrid-day-number {
    color: #cfcfcf;
    font-weight: 500;
}

.fc-event-time {
    color: #fff;
}

.fc-day-sat {
    background: #0072ff1f !important;
}

.fc-day-sun {
    background: #ff000030 !important;
}

.fc-theme-standard .fc-list-day-cushion {
    background: #141c28 !important;
}
.fc-theme-standard td, .fc-theme-standard th {
    border: 1px solid #dddddda6;
}

.fc-theme-standard .fc-popover {
    background: #1f2630;
}

.fc .fc-daygrid-more-link {
    color: #a7a7a7;
}

.fc .fc-button:not(:disabled), .fc a[data-navlink], .fc-event.fc-event-draggable, .fc-event[href] {
    color: white;
}

.fc .fc-list-event:hover td {
    background-color: #cbcbcb24;
}

.fc-daygrid-event {
    border-width: 2px;
}

.fc-timegrid-event {
    border-width: 4px;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror, .fc-timegrid-more-link {
    box-shadow:none;
}

.fc .fc-popover {
    z-index: 1055;
}

.note-editor {
    font-family: "NotoSansKR" !important;
}

.note-modal .close {
    color: #fff;
}

.note-modal-title {
    color: #fff;
}
.note-form-label {
    color: #fff;
}

.note-modal-content {
    background-color: #1d273b !important;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 26%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 8%);
    color: inherit;
}

.note-modal-header {
    border: 0 !important;;
    padding: 10px 20px;
    background-color: #1d273b !important;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 26%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 8%);
}

.note-modal-footer {
    height: 55px;
    padding: 10px 30px;
}

.note-input {
    background: #171f2e !important;
    border: 1px solid #2c3c56 !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 50%), 0 -1px 1px #fff0, 0 1px 0 #fff0;
    color: #fff;
}

.validation-message {
    color: red;
}

input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--tblr-danger) !important;
}

input.valid.modified,
textarea.valid.modified,
select.valid.modified {
    border-color: var(--tblr-success) !important;
}

.wrapper-clr {
    display: inline-block;
    position: relative;
    color: transparent;
}

.wrapper-clr button {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 12%;
    border: 0;
    color: inherit;
    text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.clr-field {
    width: 100%;
}

.clr-field button {
    width: 22px;
    height: 22px;
    left: 5px;
    right: auto;
}

.clr-field input {
    padding-left: 36px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 로딩 */
.loading-progress-text:after {
    text-align: center;
    font-weight: bold;
    content: var(--blazor-load-percentage-text, "Loading...");
}

/* 스플래시 */

.splash-wrapper {
    width: 100%; 
    height: 100vh; 
    position: relative;
    text-align:center
}

.splash-wrapper .splash-header {
    position:absolute; 
    left:50%; 
    top: 50%; 
    transform:translate(-50%, -50%)
}

.splash-wrapper .splash-header .progress {
    height: 12px; 
    margin-top: 30px
}

.splash-wrapper .splash-header .progress .progress-bar {
    width: var(--blazor-load-percentage, 0%);
}

.splash-wrapper .splash-footer {
    position: absolute; 
    left: 50%;
    bottom: 100px; 
    font-size: 11px;
    color: #D0D0D0; 
    transform:translateX(-50%)
}