.fa-cal.container {
    font-family: 'Shabnam';
    display: flex;
    /* margin: 0 auto; */
    /* width: 80%; */
    /* text-align: center; */
    /* direction: rtl; */
    /* background-color: lightgray; */
    /* margin: 0; */
    justify-content: center;
    align-items: center;
}

.fa-cal .calendar-wrapper {
    text-align: left;
    direction: ltr;
    /* float: right; */
    height: fit-content;
}

.fa-cal .calendar-wrapper i.close {
    color: red;
    cursor: pointer;
}


/* Page Style */

.fa-cal .dynamic-element {
    display: none;
}

.fa-cal .active-element {
    display: block;
}

.fa-cal .clearfix,
.fa-cal .clearfix::before,
.fa-cal .clearfix::after {
    clear: both;
    content: "";
    display: black;
}

.fa-cal .calendar-base {
    /* width: 900px; */
    height: 550px;
    border-radius: 20px;
    /* background-color: #0606066e; */
    position: relative;
    /* z-index: 1; */
    /* color: black; */
    /* overflow: visible; */
}


/* .fa-cal .active-season {
    background-color: #4a4a4a !important;
    color: #d7d0d0 !important;
} */

.fa-cal .active-season {
    background-color: #d3cccc !important;
    color: white !important;
}

.fa-cal .active-season-bg {
    background-color: #d3cccc !important;
}

.fa-cal .active-season-cr {
    color: #d3cccc !important;
}

.fa-cal .month-hover.active-season-cr {
    font-weight: bold;
}

.fa-cal .num-dates .holiday {
    background-color: #f44336;
    color: #fff !important;
}

.fa-cal .num-dates .holiday.active,
.fa-cal .num-dates .holiday:hover {
    background-color: #d3cccc !important;
    color: red !important;
}

.fa-cal .day-element.hidden {
    /* opacity: 0.3; */
    opacity: 0;
    cursor: auto !important;
}

.fa-cal .year-wrapper {
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
}

.fa-cal .year-wrapper .cal-year {
    display: flex;
    direction: rtl;
    align-items: baseline;
}

.fa-cal .year-wrapper .cal-year .year {
    color: #939191;
    font-size: 30px;
    float: right;
    /* position: relative; */
    /* right: 45px; */
    /* top: 30px; */
    font-weight: bold;
    cursor: default;
}

.fa-cal .year-wrapper .cal-year .icon {
    color: #939191;
    cursor: pointer;
    background-color: #0000001f;
}

.fa-cal .year-wrapper .cal-year .icon.left {
    border-radius: 50% 3px 3px 50%;
    padding-inline-end: 10px;
}

.fa-cal .year-wrapper .cal-year .icon.right {
    border-radius: 3px 50% 50% 3px;
    padding-inline-start: 10px;
}

.fa-cal .year-meta {
    /* position: absolute; */
    /* left: 335px; */
    /* top: 25px; */
    color: #d3cccc;
    cursor: default;
}


/* .xs .fa-cal .year-meta {
    font-size: 10px;
} */

.fa-cal .triangle-left {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid #E8E8E8;
    border-bottom: 5px solid transparent;
    float: right;
    position: relative;
    right: 90px;
    top: 36px;
}

.fa-cal .triangle-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #E8E8E8;
    border-bottom: 5px solid transparent;
    float: right;
    position: relative;
    left: 20px;
    top: 36px;
}

.fa-cal .triangle-left:hover {
    border-right: 10px solid#2ECC71;
}

.fa-cal .triangle-right:hover {
    border-left: 10px solid#2ECC71;
}

.fa-cal .month-color {
    color: #27AE60;
}

/* .fa-cal .month-hover.active,
.fa-cal .month-hover:hover {
    color: #d3cccc !important;
} */
.fa-cal .month-hover:hover {
    color: white !important;
    background-color: #4a4a4a;
}

.fa-cal .month-hover.active {
    color: white !important;
    background-color: #4a4a4a;
    font-weight: bold;
}

.fa-cal .months {
    color: #6b6b6b;
    /* position: relative; */
    /* left: 340px; */
    /* top: 90px; */
    display: flex;
    flex-flow: row-reverse;
    /* justify-content: space-between; */
    cursor: pointer;
    /* margin: 10px 0 10px 0; */
    word-spacing: 5px;
    background-color: #212121 !important;
}

.fa-cal .months .month-letter {
    padding: 5px 5px;
}

.xs .fa-cal .months {
    word-spacing: 5px;
    font-size: 12px;
}

.xs .fa-cal .months .month-letter {
    padding: 5px 2px;
}

.fa-cal .month-line {
    border-color: #E8E8E8;
    position: relative;
    /* top: 85px; */
    /* width: 57%; */
    /* left: 178px; */
}

.fa-cal .days {
    color: #6b6b6b;
    /* position: relative; */
    font-size: 18px;
    /* left: 14px; */
    /* top: 80px; */
    /* word-spacing: 35px; */
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.fa-cal .days ul {
    margin: 0;
    display: flex;
    align-items: center;
    direction: rtl;
}

.fa-cal .days ul li {
    background-color: transparent !important;
    height: auto !important;
    word-spacing: -4px;
    font-size: 15px;
    cursor: default;
}

.xs .fa-cal .days ul li {
    word-spacing: -4px;
    font-size: 12px;
}

.fa-cal .num-dates {
    /* float: right; */
    /* position: relative; */
    /* top: 90px; */
    /* right: 44px; */
    /* z-index: 1; */
    /* display: block; */
    height: 450px;
}

.fa-cal .num-dates div.month {
    height: 450px;
}

.fa-cal .num-dates div.month,
.fa-cal .year-wrapper .year-meta {
    display: none;
}

.fa-cal .num-dates div.month.active,
.fa-cal .year-wrapper .year-meta.active {
    display: block;
}

.xs .fa-cal .year-wrapper .year-meta {
    font-size: 12px;
}

.fa-cal .num-dates ul {
    margin: 0 0 20px 0;
    padding: 0;
}

.fa-cal .num-dates ul li,
.fa-cal .days ul li {
    float: right;
    list-style: none;
    text-align: center;
    margin-left: 11px;
    width: 64px;
    max-width: 64px;
    font-weight: bold;
}

.xs .fa-cal .num-dates ul li,
.xs .fa-cal .days ul li {
    margin-left: 6px;
    width: calc(100vw / 8.07);
}

.fa-cal .num-dates ul li {
    padding: 10px 0;
    cursor: pointer;
    font-size: 22px;
    border-radius: 9px;
    position: relative;
    box-shadow: 0 0 35px #e5e3e3;
    color: #6b6b6b;
    height: 50px;
}

.xs .fa-cal .num-dates ul li {
    /* font-size: 16px; */
    box-shadow: 0 0 20px #e5e3e3;
}

.fa-cal .num-dates ul li.active,
.fa-cal .num-dates ul li:hover {
    background-color: #d3cccc;
    color: black;
}

.fa-cal .num-dates ul li small {
    position: absolute;
    font-size: 12px;
    font-weight: normal;
    bottom: 2px;
}

.xs .fa-cal .num-dates ul li small {
    font-size: 8px;
    bottom: 2px;
}

.fa-cal .num-dates ul li small#miladi {
    right: 7px;
}

.fa-cal .num-dates ul li small#ghamari {
    left: 7px;
}

.fa-cal .active-day {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #2ECC71;
    position: relative;
    top: 295px;
    left: 661px;
}

.fa-cal .white {
    color: white;
}

.fa-cal .event-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #2980B9;
    position: relative;
    top: 304px;
    left: 695px;
}

.fa-cal .two {
    position: relative;
    top: 168px;
    left: 535px;
}

.fa-cal .grey {
    color: #AAAAB1;
}

.fa-cal .hamburger {
    position: relative;
    top: 25px;
    left: 25px;
}

.fa-cal .burger-line:hover,
.fa-cal .hamburger:hover {
    background-color: #27e879 !important;
}

.fa-cal .burger-line {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 15%;
    margin-bottom: 3px;
}

.fa-cal .date {
    font-size: 14px;
    border-radius: 20px 0px 0px 20px;
    display: flex;
    flex-flow: row;
    /* background-color: #4a4a4a !important; */
    color: #d7d0d0 !important;
    direction: rtl;
    justify-content: space-between;
}

.fa-cal .date .selected {
    display: flex;
    flex-flow: row;
    color: #d7d0d0 !important;
    font-weight: bold;
    letter-spacing: 4px;
    margin-inline: 8px;
    cursor: default;
}

.fa-cal .date .today {
    display: flex;
    flex-flow: row;
    color: #d7d0d0 !important;
    cursor: pointer;
}

.fa-cal .date .today:hover {
    font-weight: bold;
}

.fa-cal .date .today div,
.fa-cal .date .selected div {
    margin-inline-start: 5px;
    /* font-size: 14px; */
}


/*  */

.fa-cal .current-events {
    font-size: 15px;
    position: relative;
    margin-left: 25px;
    bottom: 30px;
}

.fa-cal .posts {
    text-decoration: underline dotted;
}

.posts:hover {
    color: #27e879 !important;
}

.fa-cal .events {
    color: #d3cccc;
    padding: 10px;
    border-radius: 0 0 20px 20px;
}

.fa-cal .events-list {
    direction: rtl;
    /* float: right; */
    /* position: relative; */
    /* top: -83px; */
    /* width: 93%; */
    /* height: 377px; */
    overflow-y: scroll;
    padding-inline: 8px;
    text-align: right;
}

.fa-cal .events-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

.fa-cal .events-list li span.event-day {
    font-weight: bold;
}

.fa-cal .events-list li div.event-title {
    display: inline-block;
    margin-left: 3px;
}