.content {
  width: 100%;
}

.calendar {
  width: 100%;
}

.calendar .header .month-year {
  font-size: 28px;
  font-weight: bold;
  color: #414649;
  padding: 10px 0;
  text-align: center;
}

.calendar .days {
  display: flex;
  flex-flow: wrap;
}

.calendar .radius-top-right{border-radius: 0 8px 0 0 !important;}
.calendar .radius-top-left{border-radius: 8px 0 0 0 !important;}

.calendar .days .day_name {
  width: calc(100% / 7);
  border-right: 1px solid #d8d8d8;
  padding: 10px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background-color: #012c22;
}

.calendar .days .day_num:nth-child(1) {
   border-left: none;
}

.calendar .days .day_num {
  background-color: #efefef;
  display: flex;
  flex-flow: column;
  width: calc(100% / 7);
  /* border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8; */
  padding: 0px 1px 12px 1px;
  font-weight: bold;
  color: #7f7f7f;
  /*cursor: pointer;*/
  min-height: 100px;
}

.calendar .days .day_num .dayofmonth {
  display: block;
  /*width: 30px;*/
  font-size: 15px;
}

.calendar .days .day_num:nth-child(7n + 1) {
 border-left: 1px solid #d8d8d8;
}

.calendar .days .day_num:hover {
  /* background-color: #f3f3f3; */
}

.calendar .days .day_num.ignore {
  
  cursor: inherit;
  color:transparent;
}

.calendar .days .day_num .event {
  margin-top: 8px;
  font-weight: 400;
  font-size: 15px;
  padding: 4px 4px;
  border-radius: 0px;
  color: #050000;
  word-wrap: break-word;
  cursor: pointer;
  
}

.work_slots{
    background-color:white;
    /* margin:0px 4px 0px 4px; */
    border-radius:4px;
    padding-bottom:2px;
}
.event-btn{
    display:block !important;
    color:#2e6658 !important;
    
  }


.calendar .days .day_num .event:hover {
  filter: brightness(120%);
}

.calendar .days .day_num .event.green {
  background-color: #51ce57;
}


.calendar .dim{
  opacity: 0.5;
  filter: saturate(100%);
}



.calendar .days .day_num.selected {
  /*background-color: #f8f8ed;
  border: 1px solid #cdf179;
  border-top:none;*/
 
  cursor: inherit;
}

.calendar .dayofmonth.selected {
  color: #ffffff;
  cursor: inherit;
}

.btn.selected {
  background-color:#fbc654;
  color:black;
  
}
.selectedWorkSlot{border: 1px solid #fbc654 !important;}
.WorkSlot{border: 1px solid #e2e2e2 !important;}
.mute {
  color: #d4d4d4 !important;
  
}

.mute_filled {
  color: #a5a4a4 !important;
  
}

.whatever {
 
  border-bottom: 1px solid #e4e4e4 !important;
  border-radius: 0px  !important;
  display: inline-block;
  padding: 2px 4px 2px 4px;
  border-right: 2px solid white;
  border-left: 2px solid white;
  width: 100%;
  font-family: "Google Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.whatever:hover {
 /* background-color: rgb(233, 235, 234);
  border-bottom: 1px solid #30ac4f;*/
}

.checkboxes input[type="checkbox"] {
  display: none;
}

.checkboxes input[type="checkbox"]:checked + .whatever {
  background-color: #218858 !important;
  border-bottom: 1px solid #218858;
  border-radius: 4px !important;
  color: white;
}
.checkboxes input[readonly] + .whatever {
  background-color: #218858;
  border-bottom: 1px solid #51ce57;
  color: white;
}
.checkboxes input[readonly] + .mute {
  background-color: #e4e2e2;
  border-radius: 0px;
  border-bottom: 1px solid #d8d8d8;
  color: rgb(170, 169, 169);
  border-radius: 0 !important;
}

.checkboxes input[type="checkbox"]:disabled + .whatever {
  border-radius: 0px !important;
  border-bottom: 1px solid #d8d8d8;
  color: rgb(68, 68, 68);
}
.pointer {
  cursor: pointer;
}

.calendar .div_spacer {
  height: 10px;
}
.checkboxes .disabled_clr {
  color: rgb(43 133 42) !important;
}

@media (min-width: 1024px) {
  .whatever {
    padding: 2px 8px 0px 8px;
    font-size: 16px;
    font-weight:600;
  }

 
}

@media (max-width:768px){

.work_slots{
    background-color:white;
    margin:0;
    border-radius:4px;}

.calendar .days .day_num {
      
      padding: 0px 1px 4px 1px;
    }
}


@media (max-width: 400px) {
  .whatever {
    padding: 1px 4px 1px 4px;
    font-size: 13px;
    border-right: 1px solid white;
    border-left: 1px solid white;
  }

  .selectedWorkSlot{border:0 !important; }

  .WorkSlot{border:0  !important;}

.calendar .days .day_num {
      
      padding: 0px 1px 2px 1px;
    }

}
  

}


@media print
{    
    .calendar .days .day_num {
      background-color: #fff;
      
    }


    .calendar .header .month-year {
   
    padding:0px 0px;
   
  }
}