/*body {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  background-color: #FFFCFF;
}
button {
  width: 75px;
  cursor: pointer;
  box-shadow: 0px 0px 2px gray;
  border: none;
  outline: none;
  padding: 5px;
  border-radius: 5px;
  color: white;
}*/

#calendar-header {
  /*padding: 10px;*/
  color: #d36c6c;
  /*font-size: 26px;*/
  /*display: flex;*/
  justify-content: space-between;
  padding: 1rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/*#calendar-header button {
  background-color:#92a1d1;
}*/
/*#container {
  width: 770px;
}
*/

#calendarBox {
width: 100%;
margin: 0;
border: 0;
background: white;
border-radius: 0;
overflow: hidden;
padding: var(--border-padding) 0;
}

#client-detail-stats-calendar #calendarBox{
  padding: 0 !important;
}

#calendarBox > div{
  border-radius: 0.25rem;
/*padding: 1rem;*/
/*border: 1px solid;*/
}

#monthDisplay{
  /*font-size: 1rem;*/
  /*font-weight: 400;*/
  display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}

/*#calendar-header > div{
    display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}*/

#calendar-header img{
  height: 2rem;
}



#calendar-nav{
  display: flex;
gap: 1rem;
}



#calendar-nav .backButton::before, #calendar-nav .nextButton::before {
    position: relative;
}
#calendar-nav .backButton::before,
#calendar-nav .backButton::after, #calendar-nav .nextButton::before, #calendar-nav .nextButton::after {
    content: "";
    display: block;
    left: 0px;
    position: absolute;
    top: 50%;
    transition: left 0.1s;
}
#calendar-nav .backButton::before, #calendar-nav .nextButton::before {
    border-color: var(--btncolor);
    border-style: solid;
    border-width: 0 0 2px 2px;
    height: 0.75rem;
    width: 0.75rem;

    transform: translate(-50%,-50%) rotate( 45deg );
    -webkit-transform: translate(-50%,-50%) rotate( 45deg );
    position: absolute;
top: 50%;
left: calc(50% + 0.15rem);
}

#calendar-nav .nextButton::before{
      transform: translate(-50%,-50%) rotate( 225deg );
    -webkit-transform: translate(-50%,-50%) rotate( 225deg );
    left: calc(50% - 0.15rem);
}

/*#weekdays {
  width: 100%;
  display: flex;
  color: #247BA0;
}
*/
#weekdays{
  color: #0A7FFA;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  column-gap: 0.5rem;
  /*border: 1px solid;*/
  border: 0;
padding: 0 1rem;
}

/*#weekdays div {
  width: 100px;
  padding: 10px;
}*/


#weekdays div{
  padding: 0.5rem;
  box-sizing: content-box;
  overflow-x: auto;
  place-content: center;
  display: grid;
  font-size: var(--font-size-body-regular);
}


/*#calendar {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}*/


#calendar, #generalView{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 0.5rem;
  /*border: 1px solid red;*/
  /*margin-top: 10px;*/
  row-gap: 0.5rem;
  margin: auto;
  overflow: auto;
  border: 0;
padding: 1rem;
}

#generalView{
  height: 300px;
}

/*.day {
  width: 100px;
  padding: 10px;
  height: 100px;
  cursor: pointer;
  box-sizing: border-box;
  background-color: white;
  margin: 5px;
  box-shadow: 0px 0px 3px #CBD4C2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  word-wrap: break-word;
  border-radius: 5px;
  position: relative;
}*/


 .day{ 
  /*height: 50px;*/
  cursor: pointer;
  box-sizing: content-box;
  background-color: white;
  /*box-shadow: 0px 0px 3px #CBD4C2;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  word-wrap: break-word;
  border-radius: 0.25rem;
  position: relative;
  overflow-x: hidden;
  place-items: center;
  padding: 0.5rem;
  font-size: 14px;
font-family: 'Manrope-Variable';
}


.day:hover {
  background-color: var(--border-color-default);
}

.day + #currentDay {
  background-color: var(--body2);
}

.day.no-record{
  cursor: not-allowed;
}

.day.no-record:hover{

}

.daySquareDate{
  /*position: absolute;*/
/*top: 10px;*/
}


#calendar .active{
  background: #3dff3d1a;
}
/*#calendar .active::before {
  content: '';
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: 50px;
  background: #00d400;
  right: .25rem;
  top: .25rem;
}*/

#calendar .active:hover {
  background: #3dff3d38;
}
.eventsContainer{
overflow-y: auto;
height: 80px;
margin-top: 26px;
width: 80px;
position: relative;
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.eventsContainer.enlarge {
  position: fixed;
  height: 400px;
  width: 600px;
  top: 50%;
  background: red;
  z-index: 999;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  border-radius: 10px;
}

/*.eventsContainer:hover {
  position: fixed;
  height: 400px;
  width: 600px;
  top: 50%;
  background: red;
  z-index: 999;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  border-radius: 10px;
  transition-delay: 2s;
}*/


.event {
  font-size: 10px;
  padding: 3px;
  background-color: #58bae4;
  color: white;
  border-radius: 5px;
  max-height: 55px;
  overflow: hidden;
  margin-bottom: 5px;
}
.padding {
  cursor: default !important;
  background-color: var(--body) !important;
  box-shadow: none !important;
}
#newEventModal, #deleteEventModal {
  display: none;
  z-index: 20;
  padding: 25px;
  background-color: #e8f4fa;
  box-shadow: 0px 0px 3px black;
  border-radius: 5px;
  width: 350px;
  top: 100px;
  left: calc(50% - 175px);
  position: absolute;
  font-family: sans-serif;
}
#eventTitleInput {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 25px;
  border-radius: 3px;
  outline: none;
  border: none;
  box-shadow: 0px 0px 3px gray;
}
#eventTitleInput.error {
  border: 2px solid red;
}
#cancelButton, #deleteButton {
  background-color: #d36c6c;
}
#saveButton, #closeButton {
  background-color: #92a1d1;
}
#eventText {
  font-size: 14px;
}
#modalBackDrop {
  display: none;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(0,0,0,0.8);
}