@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300&display=swap");
body {
  background-color: #f6f6f6;
  color: #111;
  font-family: "Vazirmatn", Tahoma, Arial;
  direction: rtl;
  font-size: 18px;
}
body img.emoji {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1.4em;
  width: 1.4em;
  padding: 0 !important;
  margin: 0 0.07em !important;
  vertical-align: -0.3em !important;
  background: none !important;
}
body .container .card.note {
  max-width: 600px;
  margin: 2em auto;
}
body .calendar .body {
  margin: 0.5em auto;
  width: 100%;
  max-width: 400px;
}
body .calendar .body .head {
  display: flex;
  justify-content: center;
}
body .calendar .body .head .month {
  display: inline-block;
  text-align: center;
}
body .calendar .body .head .month h2 {
  font-size: 2em;
  color: #3366cc;
}
body .calendar .body .head .month h3 {
  font-size: 0.9em;
  color: #777;
  line-height: 1em;
}
body .calendar .body .head .month h3:nth-child(2) {
  color: rgb(146, 0, 231);
}
body .calendar .body .wdays {
  border-radius: 0.4em;
  background-color: #999;
  color: #FFF;
  padding: 0.5em 0;
  text-align: center;
  margin-bottom: 0.5em;
}
body .calendar .body .days {
  text-align: center;
}
body .calendar .body .days .col {
  width: 14.2857142857%;
  border-radius: 0.5em;
  position: relative;
  font-size: 1.6em;
  padding: 0.3em 0.4em;
  margin: 0.06em;
  white-space: nowrap;
}
body .calendar .body .days .col span {
  z-index: 1;
  position: relative;
}
body .calendar .body .days .col.today::after {
  content: "";
  z-index: 1;
  border: 5px solid rgba(85, 85, 85, 0.3137254902);
  border-radius: 0.5em;
  background-color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
body .calendar .body .days .col div {
  display: flex;
  justify-content: space-between;
  font-size: 0.4em;
  margin-top: -0.2em;
}
body .calendar .body .days .col div small:nth-child(2) {
  font-size: 0.81em;
}
body .calendar .body .days .col div small:not(.holiday, .friday > div > small, body .calendar .body .days .col.holiday > div > small) {
  color: #777;
}
body .calendar .body .days .col div small:not(.holiday, .friday > div > small, body .calendar .body .days .col.holiday > div > small):nth-child(2) {
  color: rgb(146, 0, 231);
}
body .calendar .body .days .col.friday, body .calendar .body .days .col.holiday {
  color: #ff0000;
  background-color: rgba(255, 230, 0, 0.6509803922);
}
body .calendar .body .days .col.friday .htext, body .calendar .body .days .col.holiday .htext {
  position: absolute;
  top: 0;
  left: -3px;
  z-index: 3;
  background-color: #f6f6f6;
  border-radius: 50%;
  padding: 1px;
}
body .calendar .body .days .col.friday .htext img.emoji, body .calendar .body .days .col.holiday .htext img.emoji {
  width: 1.66em;
  height: 1.66em;
}
body .calendar .body .days .col.holiday {
  background-color: rgba(255, 230, 0, 0.6509803922);
}
body .calendar .body .days .col.holiday.half {
  color: #111;
}
body .calendar .body .days .col.holiday.half::before {
  content: "";
  z-index: 0;
  transform: rotate(-35deg);
  border-radius: 0.7em;
  background-color: #f6f6f6;
  position: absolute;
  top: -7%;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 114%;
}
body .calendar .body .days .col.out {
  filter: opacity(0.6);
  opacity: 0.6;
}
body .calendar .body .days .col.past span {
  filter: opacity(0.88);
}
body .calendar .body .days .col.past::after {
  content: "";
  z-index: 2;
  transform: rotate(33deg);
  border-radius: 1em;
  background-color: #a0a0a0;
  position: absolute;
  top: 15%;
  bottom: 35%;
  left: 46%;
  right: 46%;
  height: 50%;
}
body .calendar .body .days .col.past .htext {
  display: none;
}
@media screen and (max-width: 560px) {
  body .calendar .body .days .col {
    padding: 0.2em 0.2em;
  }
}
@media screen and (max-width: 460px) {
  body .calendar .body .days .col {
    padding: 0.2em 0.1em;
  }
}
body .calendar .info div #when {
  margin-right: 0.5em;
  font-size: 0.8em;
  color: #999;
}
body .calendar .info div#holiday {
  color: red;
}
body .calendar .info div#holiday b {
  color: #b30000;
}
body .calendar .info div#holiday #when {
  color: #ff4d4d;
}
body .calendar .info div.c #when {
  display: inline-block;
  direction: ltr;
  font-family: Tahoma;
  font-size: 0.8em;
}
body .footer {
  color: #777;
  font-size: 0.6em;
  margin: 4rem auto 2rem auto;
}
body .footer img.emoji {
  height: 1em;
  width: 1em;
}

/*# sourceMappingURL=main.css.map */