:root {
    --schedule-shadow: 0 10px 34px rgba(22,53,108,.075);
    --meeting: #1769d4;
    --work: #15966b;
    --event: #f18700;
    --field: #7949cc
}

.schedule-page {
    background: #fff
}

.schedule-hero {
    padding: 24px 0 36px;
    background: linear-gradient(135deg,#f2f6ff,#fbfdff);
    border-bottom: 1px solid var(--line)
}

.schedule-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.schedule-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue2);
    letter-spacing: .1em;
    text-transform: uppercase
}

.schedule-hero h1 {
    font-size: clamp(27px,3vw,42px);
    font-weight: 800;
    color: var(--blue);
    margin: 8px 0
}

.schedule-hero p {
    color: var(--muted);
    margin: 0
}

.schedule-hero-icon {
    font-size: 88px;
    color: #d9e6fa;
    margin-right: 6%
}

.schedule-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: var(--schedule-shadow)
}

.week-navigation,.schedule-toolbar-actions,.view-switch {
    display: flex;
    align-items: center;
    gap: 7px
}

.week-nav,.today-btn,.schedule-export,.schedule-print,.view-switch button {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: #546077;
    font-size: 13px;
    font-weight: 650
}

.week-nav {
    width: 40px
}

.today-btn {
    padding: 0 15px;
    color: var(--blue)
}

.current-range {
    display: grid;
    margin-left: 8px
}

.current-range strong {
    font-size: 14px;
    color: var(--blue)
}

.current-range span {
    font-size: 11px;
    color: #7f899d
}

.view-switch {
    padding: 3px;
    border-radius: 8px;
    background: #f2f5fa
}

.view-switch button {
    border: 0;
    background: transparent;
    padding: 0 12px
}

.view-switch button.active {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 2px 7px rgba(30,57,103,.1)
}

.schedule-export,.schedule-print {
    padding: 0 13px
}

.schedule-filter-card {
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(22,53,108,.05)
}

.filter-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 13px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 16px
}

.filter-card-head h2 {
    font-size: 15px;
    color: var(--blue);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0
}

.filter-card-head button {
    border: 0;
    background: transparent;
    color: var(--blue2);
    font-size: 11px;
}

.schedule-filter-card>label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px
}

.schedule-filter-card>label>span,.schedule-filter-card legend {
    font-size: 12px;
    color: #667188;
    font-weight: 650
}

.schedule-filter-card select {
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 10px;
    background: #fff;
    color: #4f5b72;
    font-size: 12px;
}

.schedule-filter-card fieldset {
    border: 0;
    padding: 0;
    margin: 18px 0 0
}

.schedule-filter-card legend {
    margin-bottom: 7px
}

.filter-check {
    display: grid;
    grid-template-columns: 17px 10px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13px;
    color: #4b576e
}

.filter-check input {
    accent-color: var(--blue)
}

.filter-check b {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 12px;
    background: #f0f4fa;
    color: #657187
}

.type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%
}

.type-dot.meeting {
    background: var(--meeting)
}

.type-dot.work {
    background: var(--work)
}

.type-dot.event {
    background: var(--event)
}

.type-dot.field {
    background: var(--field)
}

.schedule-note {
    display: flex;
    gap: 11px;
    margin-top: 15px;
    padding: 15px;
    border-radius: 9px;
    background: #fff8e9;
    color: #7e6029
}

.schedule-note>i {
    font-size: 24px;
    color: #dc9207
}

.schedule-note strong {
    font-size: 15px;
}

.schedule-note p {
    font-size: 12px;
    line-height: 1.6;
    margin: 4px 0 0
}

.schedule-view {
    display: none
}

.schedule-view.active {
    display: block
}

.week-board {
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--schedule-shadow)
}

.week-board-header {
    display: grid;
    grid-template-columns: 74px 1fr;
    background: #f6f8fc;
    border-bottom: 1px solid var(--line)
}

.week-label {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--line);
    font-size: 10px;
    color: #7f899d
}

.week-days {
    display: grid;
    grid-template-columns: repeat(7,1fr)
}

.week-day-head {
    text-align: center;
    padding: 12px 4px;
    border-right: 1px solid var(--line)
}

.week-day-head:last-child {
    border: 0
}

.week-day-head span {
    display: block;
    font-size: 10px;
    color: #7c879b;
    text-transform: uppercase
}

.week-day-head b {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    margin: 5px auto 0;
    border-radius: 50%;
    font-size: 12px
}

.week-day-head.today b {
    background: var(--blue);
    color: #fff
}

.week-board-body {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    padding-left: 74px;
    background: linear-gradient(#fff,#fcfdff)
}

.day-column {
    min-height: 525px;
    padding: 9px;
    border-right: 1px solid var(--line)
}

.day-column:last-child {
    border: 0
}

.day-column.weekend {
    background: #fafbfe
}

.mobile-day-title {
    display: none
}

.schedule-event {
    width: 100%;
    display: grid;
    gap: 5px;
    text-align: left;
    padding: 10px;
    margin-bottom: 9px;
    border: 0;
    border-left: 3px solid;
    border-radius: 7px;
    transition: .2s
}

.schedule-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 13px rgba(26,49,91,.12)
}

.schedule-event time {
    font-size: 11px;
    font-weight: 800
}

.schedule-event strong {
    font-size: 12px;
    line-height: 1.45;
    color: #28364f
}

.schedule-event span {
    font-size: 10px;
    color: #748097
}

.schedule-event em {
    width: max-content;
    padding: 3px 6px;
    border-radius: 9px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700
}

.schedule-event.meeting {
    background: #edf4ff;
    border-color: var(--meeting);
    color: var(--meeting)
}

.schedule-event.work {
    background: #edf9f4;
    border-color: var(--work);
    color: var(--work)
}

.schedule-event.event {
    background: #fff6e9;
    border-color: var(--event);
    color: var(--event)
}

.schedule-event.field {
    background: #f5f0ff;
    border-color: var(--field);
    color: var(--field)
}

.schedule-event.meeting em {
    background: #d9e9ff
}

.schedule-event.work em {
    background: #d8f2e6
}

.schedule-event.event em {
    background: #ffe7c2
}

.schedule-event.field em {
    background: #e7dcfb
}

.empty-day {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #b1b9c8;
    font-size: 11px;
}

.empty-day i {
    font-size: 25px
}

.month-calendar {
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    box-shadow: var(--schedule-shadow)
}

.month-weekdays,.month-days {
    display: grid;
    grid-template-columns: repeat(7,1fr)
}

.month-weekdays span {
    padding: 13px;
    text-align: center;
    background: #f4f7fb;
    border-right: 1px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    color: #657087
}

.month-day {
    min-height: 110px;
    padding: 9px;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    font-size: 10px
}

.month-day:nth-child(7n) {
    border-right: 0
}

.month-day.muted {
    color: #c1c7d2;
    background: #fafbfc
}

.month-day.today>b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff
}

.month-day i {
    display: block;
    margin-top: 7px;
    padding: 4px 6px;
    border-radius: 4px;
    background: #edf4ff;
    color: var(--blue);
    font-style: normal;
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.agenda-view {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 20px;
    box-shadow: var(--schedule-shadow)
}

.agenda-date {
    display: flex;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 7px;
    background: #f1f5fb;
    color: var(--blue);
    margin: 10px 0
}

.agenda-date strong {
    font-size: 12px
}

.agenda-date span {
    font-size: 10px
}

.agenda-event {
    display: grid;
    grid-template-columns: 55px 10px 1fr;
    gap: 13px;
    padding: 15px 8px;
    border-bottom: 1px solid var(--line)
}

.agenda-event time {
    font-size: 11px;
    font-weight: 750
}

.agenda-event>i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 3px
}

.agenda-event.meeting>i {
    background: var(--meeting)
}

.agenda-event.work>i {
    background: var(--work)
}

.agenda-event.field>i {
    background: var(--field)
}

.agenda-event h3 {
    font-size: 12px;
    margin: 4px 0
}

.agenda-event p,.agenda-event span {
    font-size: 9px;
    color: #7e899d;
    margin: 0
}

.schedule-detail-modal .modal-content {
    border: 0;
    border-radius: 13px;
    box-shadow: 0 20px 60px rgba(16,41,85,.23)
}

.schedule-detail-modal .modal-header {
    padding: 21px 23px;
    border-bottom: 1px solid var(--line)
}

.modal-event-type {
    font-size: 11px;
    color: var(--blue2);
    font-weight: 750;
    text-transform: uppercase
}

.schedule-detail-modal .modal-title {
    font-size: 19px;
    color: #27354e;
    font-weight: 750;
    margin-top: 5px
}

.schedule-detail-modal .modal-body {
    padding: 20px 23px
}

.schedule-detail-modal dl {
    margin: 0
}

.schedule-detail-modal dl>div {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line)
}

.schedule-detail-modal dt {
    font-size: 12px;
    color: #7b8699
}

.schedule-detail-modal dt i {
    color: var(--blue);
    margin-right: 6px
}

.schedule-detail-modal dd {
    font-size: 13px;
    color: #39465c;
    margin: 0;
    font-weight: 600
}

.schedule-detail-modal .modal-footer {
    padding: 14px 23px
}

.schedule-detail-modal .modal-footer button {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: #526077;
    padding: 0 15px;
    font-size: 12px;
}

.schedule-detail-modal .modal-footer .add-calendar-btn {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

@media(max-width: 1199px) {
    .schedule-toolbar {
        align-items:flex-start
    }

    .schedule-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .week-board-body {
        padding-left: 0
    }

    .week-board-header {
        grid-template-columns: 1fr
    }

    .week-label {
        display: none
    }

    .day-column {
        min-height: 430px
    }

    .schedule-filter-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 15px
    }

    .filter-card-head,.schedule-filter-card fieldset {
        grid-column: 1/-1
    }

    .schedule-note {
        margin-bottom: 5px
    }
}

@media(max-width: 767px) {
    .schedule-hero {
        padding:16px 0 24px
    }

    .schedule-hero-icon {
        display: none
    }

    .schedule-hero h1 {
        font-size: 24px
    }

    .schedule-hero p {
        font-size: 11px
    }

    .schedule-content.section {
        padding-top: 18px
    }

    .schedule-toolbar {
        display: block;
        padding: 13px
    }

    .week-navigation {
        justify-content: space-between
    }

    .current-range {
        flex: 1
    }

    .schedule-toolbar-actions {
        justify-content: space-between;
        margin-top: 11px;
        padding-top: 11px;
        border-top: 1px solid var(--line)
    }

    .view-switch {
        flex: 1
    }

    .view-switch button {
        flex: 1;
        padding: 0 8px
    }

    .view-switch button span {
        display: none
    }

    .schedule-export,.schedule-print {
        width: 39px;
        padding: 0;
        font-size: 0
    }

    .schedule-export i,.schedule-print i {
        font-size: 15px
    }

    .schedule-filter-card {
        display: block;
        padding: 16px
    }

    .week-board-header {
        display: none
    }

    .week-board-body {
        display: block
    }

    .day-column {
        min-height: 0;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .mobile-day-title {
        display: flex;
        justify-content: space-between;
        color: var(--blue);
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 9px
    }

    .day-column.today .mobile-day-title b {
        padding: 3px 7px;
        border-radius: 10px;
        background: var(--blue);
        color: #fff
    }

    .schedule-event {
        padding: 11px
    }

    .schedule-event strong {
        font-size: 11px
    }

    .empty-day {
        padding: 20px
    }

    .month-day {
        min-height: 72px;
        padding: 6px
    }

    .month-day i {
        width: 7px;
        height: 7px;
        padding: 0;
        border-radius: 50%;
        font-size: 0
    }

    .agenda-view {
        padding: 10px
    }

    .schedule-detail-modal dl>div {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .schedule-detail-modal .modal-title {
        font-size: 16px
    }
}

@media print {
    header,.smart-search,.footer,.backtop,.video-modal,.schedule-hero,.schedule-toolbar,.schedule-filter-card,.schedule-note,.schedule-detail-modal {
        display: none!important
    }

    .schedule-content {
        padding: 0
    }

    .schedule-content .col-xl-3 {
        display: none
    }

    .schedule-content .col-xl-9 {
        width: 100%
    }

    .schedule-view {
        display: none!important
    }

    .schedule-view[data-schedule-view="agenda"] {
        display: block!important
    }

    .agenda-view {
        border: 0;
        box-shadow: none;
        padding: 0
    }
}