@font-face {
  font-family: 'XB Kayhan Regular';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Regular'), url('../font/XBKayhan.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Italic';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Italic'), url('../font/XBKayhanIt.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Bold';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Bold'), url('../font/XBKayhanBd.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Bold Italic'), url('../font/XBKayhanBdIt.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Navaar Regular';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Navaar Regular'), url('../font/XBKayhanNavaar.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Pook Regular';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Pook Regular'), url('../font/XBKayhanPook.woff') format('woff');
  }
  

  @font-face {
  font-family: 'XB Kayhan Sayeh Regular';
  font-style: normal;
  font-weight: normal;
  src: local('XB Kayhan Sayeh Regular'), url('../font/XBKayhanSayeh.woff') format('woff');
  }

body {
  font-family: 'XB Kayhan Regular' !important;
}

.calendar-container {
    /* width: 67%; */
    margin: 0 auto;
    /* font-family: Arial, sans-serif; */
    font-size: large;
}    
.calendar-header {
  list-style: none;
  display: flex;
  padding: 0 5px;
  justify-content: space-between;
  background-color: #f0f0f0;
  align-items: center;
  border-radius: 7px;
  
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    
    @media (max-width: 576px) {
      padding: 0;
      width: 50px;
      height: 60px;
      flex-direction: column;
    }

    i {
      @media (max-width: 576px) {
        font-size: 25px;
        margin: 0 !important;
      }
    }

    span {
      @media (min-width: 576px) {
        display: inline-block;
      }
    }
  }
  
  button#calendar-next {
    i {
    	margin-right: 7px;  
    }

    @media (max-width: 576px) {
			flex-direction: column-reverse;
    }
  }
  
  button#calendar-prev i {
    margin-left: 7px;
  }
}

@media (min-width: 576px) {
  .calendar-header {
    height: 4vh;
    border-radius: 0;
    padding: 0;
  }
}

.calendar-weekdays {
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
height: 5rem;
align-items: center;
margin: auto!important;
}
.calendar-weekdays li {
  width: 14.2%;
  text-align: center;
}
.calendar-dates {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
}
.calendar-date.empty {
    color: gray;
    font-style: italic;
}
.calendar-date {
text-align: center;
padding: 5px;
border: 1px solid #ddd;
border-radius: 7px;
width: 14.2%;
position: relative;
}
#todayTitle {
display: inline-block;
/* text-shadow: 1px 1px 4px; */
font-size: 4.5vw;
text-align: center;
width: 100%;
font-weight: bold;

	.tarsaiiTitle {
    font-size: 2vw;
    margin: 20px 0;
    color: #4200ab;
  }
}
#calendar-current-date {
  display: flex;
  flex-direction: column;
  align-items: center;

  .tarsaiiMonths {
    color: #4200ab;
    margin-top: 7px;
  }
  .monthsSeparator {
    margin: 0 10px;
  }
}
@media (min-width: 576px) {
  #calendar-current-date  {
    display: block;
  }
}
.zdn {
  font-weight: 100;
  font-style: oblique;
  font-size: medium;

  @media (max-width: 576px) {
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4200ab;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-wrap: nowrap;
  }
}
@media (max-width: 576px) {
  .calendar-date:hover .zdn {
    display: block !important;
  }

  .calendar-date .zdn:after {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    content: "";
    background-color: #4200ab;
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
  }
}
button {
font-size: x-large;
height: 4vh;
width: 7vh;
border-radius: 10px;
background-color: #ffd900;
border: none;
color: black;
text-align: center;
margin: 4px 2px;
opacity: 0.3;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
button:hover {
opacity: 1;
}

#todayTitle .tooltip {
background-color: #73AD21; 
color: #FFFFFF; 
border: 1px solid green;
}

.shanbeh::after {
  content: "شنبه"
}
.yekshanbeh::after {
  content: "یکشنبه"
}
.doshanbeh::after {
  content: "دوشنبه"
}
.seshanbeh::after {
  content: "سه‌شنبه"
}
.chaharshanbeh::after {
  content: "چهارشنبه"
}
.panjshanbeh::after {
  content: "پنجشنبه"
}
.adineh:after {
  content: "آدینه";
}
.adineh{
color: red;
}
@media (max-width: 576px) {
  .shanbeh::after {
    content: "ش"
  }
  .yekshanbeh::after {
    content: "ی"
  }
  .doshanbeh::after {
    content: "د"
  }
  .seshanbeh::after {
    content: "س"
  }
  .chaharshanbeh::after {
    content: "چ"
  }
  .panjshanbeh::after {
    content: "پ"
  }
  .adineh:after {
    content: "آ";
  }
  
  #todayTitle .tarsaiiTitle {
    font-size: 3.5vw;
  }
}

/* Tooltip container */
.dayName {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.dayName .Nabor {
  visibility: hidden;
  width: 15rem;
  background-color: #73AD21;
  color: white;
  text-align: center;
  font-weight: normal;
  padding: 5px;
  border-radius: 7px;
  margin-left: -5rem;
  font-size: medium;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
}

.dayName:hover .Nabor {
  visibility: visible;
}

@media (max-width: 590px) {
  .dayName .Nabor {
    left: unset;
    right: -30px;
  }
}

.menu-items {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  background-color: #4200ab;

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      /* background-color: #290066; */
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      border-radius: 7px;
  }

  li {
    float: inline-start;
    margin: 5px 10px;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1.33vh 1vw;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 7px;
    font-weight: bold;

    @media (max-width: 576px) {
      padding: 1.33vh 3vw;
    }

    i {
      margin-right: 7px;
    }
  }
  
  li a:hover:not(.active) {
    background-color: #9e5bc2;
  }
  
  li a:hover {
    color: #FFFFFF;
  }
  
  .active {
    background-color: #7500db;
    color: #ffd900;
  }
}

.events-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .events-container {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
    span:first-child {
      margin-left: 10px;
      font-weight: 800;
      color: red;
    }
  
    span:last-child {
      font-weight: 100;
    }
  }
}

.notes-container {
  margin: 20px auto;

  h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #4200ab;
    font-weight: 900;
    margin-bottom: 30px;
  }

  p {
    text-align: justify;
  }

  img {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    display: block;
  }
}