.calendar-container{
  display:flex;
}
.calendar-box{
  position: relative;
  flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color : var(--color-text-default-secondary) !important;
  font-size: .66rem;
  padding: 10.5px 6px;
  /* margin: 0 .3rem; */
  min-width: 3rem;
  cursor:pointer;
  text-align:center;
  border-radius: .3rem;
  /* border-top-left-radius: .3rem; */
  /* border-top-right-radius: .3rem; */
  margin-bottom: .3rem;
  z-index: 1;
}
.calendar-box.selected{
    color: var(--tag-active-text) !important;
  background-color: var(--color-background-brand-default) !important;
}
.calendar-box:hover{
  color: var(--color-background-brand-default) !important;
  /* background-color: var(--color-background-brand-default) !important; */
}
.calendar-box.selected:hover {
    color: var(--tag-active-text) !important;
}

/* .calendar-box.selected::after{
  bottom: -9.5px;
  left: 50%;
  border-style: solid;
  border-image: initial;
  content: " ";
  height: 0px;
  width: 0px;
  position: absolute;
  pointer-events: none;
  border-color: var(--bg-selected) rgba(255, 138, 0, 0) rgba(255, 138, 0, 0) ;
  border-width: 5px 7px;
  margin-left: -7px;
} */
.calendar-box__week{
    font-size: 12px;
    font-family: var(--weight-600);
	letter-spacing: 0.2px;
}
.calendar-box__monnth{
    font-family: var(--weight-600);
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.2px;
}
@media(max-width: 768px) { /* for test */
.calendar-blur{
      width: 2rem;
      height: 98%;
      top : 0;
      position: absolute;
      z-index: 2;
}
.calendar-blur.left{
      background: linear-gradient(90deg,var(--bg-theme),transparent);
      left: 0;
}
.calendar-blur.right{
      background: linear-gradient(90deg,transparent,var(--bg-theme));
      right: 0;
}
.calendar-wrapper{
      position: relative;
      width: 15rem;
}
.calendar-container{
      overflow-x: auto;
      overflow-y: hidden;
}
.calendar-box:hover{
      color :white ;
      background-color: transparent;
}
}


.calendar-wrapper[data-v-2559d58f] {
  display: flex;
  align-items: center;
}
.weekly-calander-arrow[data-v-2559d58f] {
  width: 24px;
  cursor: pointer;
}
.weekly-calander-arrow[data-v-2559d58f]:first-child { /* left */
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.weekly-calander-arrow[data-v-2559d58f]:last-child { /* left */
  width: 24px;
  height: 24px;
  margin-left: 4px;
}
.weekly-calendar-container[data-v-2559d58f] {
  border-bottom: 0 !important;
}
.weekly-calendar-container .calendar-box[data-v-2559d58f] {
  margin-bottom: 0;
}