@import './navbar.css';
@import './footer.css';

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

.main-content {
    margin-top: calc(150 * var(--rpx));
    --event-color: #61AD92;
    --competition-color: #D95722;
    --external-participate-color: #272E67;
    --results-party-color: #FE966B;
}

.main-header {
    color: #272E67;
    font-size: calc(36 * var(--rpx));
    font-family: Alexandria, serif;
    font-weight: 700;
    word-wrap: break-word;
    text-align: center;
    margin-bottom: calc(53 * var(--rpx));
}

.calender-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(100*var(--rpx));
}

.calendar {
    display: flex;
    width: calc(951 * var(--rpx));
    height: fit-content;
    flex-direction: column;
    gap: calc(12 * var(--rpx));
    flex-shrink: 0;
    border-radius: calc(16 * var(--rpx));
    border: calc(1 * var(--rpx)) solid #FE966B;
    background: #FFF;
}

.calendar-header {
    text-align: center;
    padding: calc(10 * var(--rpx));
    font-weight: bold;
    margin-block: calc(24 * var(--rpx));
}

.calendar-nav {
    cursor: pointer;
    padding: 0 calc(10 * var(--rpx));
    font-size: calc(24*var(--rpx));
}

.current-month {
    margin-inline: calc(350*var(--rpx));
    font-size: calc(24*var(--rpx));
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: calc(10*var(--rpx));
}

.calendar-day-header {
    font-weight: bold;
    padding: calc(5*var(--rpx));
    border-bottom: calc(1 * var(--rpx)) solid #eee;
    font-size: calc(24*var(--rpx));
}

.calendar-day {
    display: flex;
    padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--rpx));
    flex: 1 0 0;
    align-self: stretch;
    border-radius: calc(50 * var(--rpx));
    background: #F2F2F3;
    width: calc(120 * var(--rpx));
    height: calc(140 * var(--rpx));
    margin-bottom: calc(12 * var(--rpx));
    margin-left: calc(12 * var(--rpx));
}

.today {
    background: #e6f2ff;
    font-weight: bold;
}

.prev-month-day {
    color: #999;
    opacity: 0.7;
}

.legend-container {
    margin-bottom: calc(190*var(--rpx));
    margin-right: calc(235*var(--rpx));
}

.legend-row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-bottom: calc(25*var(--rpx));
}

.legend-color {
    width: calc(89*var(--rpx));
    height: calc(101*var(--rpx));
    flex-shrink: 0;
    border-radius: calc(50*var(--rpx));
    margin-left: calc(20*var(--rpx));
}

.event-legend {
    background-color: var(--event-color);
}

.competition-legend {
    background-color: var(--competition-color);
}

.external-participation-legend {
    background-color: var(--external-participate-color);
}

.results-party-legend {
    background-color: var(--results-party-color);
}

.legend-title {
    color: #000;
    text-align: right;
    font-family: "IBM Plex Sans Arabic";
    font-size: calc(24*var(--rpx));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.oman-vision-image {
    width: 100%;
}

.event-day {
    background-color: var(--event-color);
    color: #ffffff;
}

.competition-day {
    background-color: var(--competition-color);
    color: #ffffff;
}

.external-participation-day {
    background-color: var(--external-participate-color);
    color: #ffffff;
}

.results-party-day {
    background-color: var(--results-party-color);
    color: #ffffff;
}

.form-select {
    width: 35%;
}

.selector-div {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: calc(50*var(--rpx));
}