@keyframes display {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.open {
  display: block;
}
.close {
  display: none;
}

.error {
  display: flex;
  font-size: 0.65rem;
  color: rgb(170, 25, 25);
  background-color: white;
  border-radius: 10px;
  padding: 8px 15px;
  margin-top: 5px;
  box-shadow: 0 5px 20px #00000047;
  animation-name: display;
  animation-duration: 700ms;
  animation-fill-mode: both;
  justify-content: space-between;
  align-items: center;
}
.x-button-home {
  border: none;
  background: white;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}

/*container pattern*/
.daysW,
.day,
.dayW,
.days_container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.daysW {
  height: 30px;
  width: 100%;
}

.daysW--red {
  border-bottom: solid 1px #9b2b2b;
}
.daysW--green {
  border-bottom: solid 1px #164e22;
}
.daysW--purple {
  border-bottom: solid 1px #441c64;
}
.daysW--yellow {
  border-bottom: solid 1px #865413;
}
.daysW--blue {
  border-bottom: solid 1px #2b489b;
}
.daysW--neutral {
  border-bottom: solid 1px #000000;
}

.dayW {
  justify-content: center;
  width: 14.285%;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  color: #666;
  font-size: 9px;
}

.days_container {
  height: 100%;
  width: 100%;
  margin-top: 3px;
}

.day {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 26px;
  padding: 3px 4px;
  font-weight: 400;
  border: solid 1px transparent;
  font-size: 0.7rem;
  transition: 300ms ease-in-out;
}

.day:hover {
  border: solid 1px transparent;
  box-shadow: 2px 4px 4px rgba(24, 20, 58, 0.5);
  z-index: 1;
  cursor: pointer;
}

/*day-in*/
.day_in--red {
  color: #9b2b2b;
}
.day_in--green {
  color: #164e22;
}
.day_in--purple {
  color: #441c64;
}
.day_in--yellow {
  color: #865413;
}
.day_in--blue {
  color: #2b489b;
}
.day_in--neutral {
  color: #000000;
}

/*day-in-hover*/
.day_in--red:hover,
.currentDay--red:hover {
  color: #9b2b2b;
  background-color: #dab1b170;
}
.day_in--green:hover,
.currentDay--green:hover {
  color: #164e22;
  background-color: #b1dab770;
}
.day_in--purple:hover,
.currentDay--purple:hover {
  color: #441c64;
  background-color: #d5b1da70;
}
.day_in--yellow:hover,
.currentDay--yellow:hover {
  color: #865413;
  background-color: #eee1a570;
}
.day_in--blue:hover,
.currentDay--blue:hover {
  color: #2b489b;
  background-color: #b1bbda70;
}
.day_in--neutral:hover,
.currentDay--neutral:hover {
  color: #000000;
  background-color: #c9c9c970;
}

.day_out {
  background: transparent !important;
  pointer-events: none;
  color: #ddd;
}
.day_out--red {
  color: #9b2b2b60;
}
.day_out--green {
  color: #164e2260;
}
.day_out--purple {
  color: #441c6460;
}
.day_out--yellow {
  color: #86541360;
}
.day_out--blue {
  color: #2b489b60;
}
.day_out--neutral {
  color: #00000060;
}

.currentDay--red {
  border: solid 1px #9b2b2b;
  color: #9b2b2b;
}
.currentDay--green {
  border: solid 1px #164e22;
  color: #164e22;
}
.currentDay--purple {
  border: solid 1px #441c64;
  color: #441c64;
}
.currentDay--yellow {
  border: solid 1px #865413;
  color: #865413;
}
.currentDay--blue {
  border: solid 1px #2b489b;
  color: #2b489b;
}
.currentDay--neutral {
  border: solid 1px #000000;
  color: #000000;
}

.day_selected--red {
  background-color: #9b2b2b;
  color: white;
}
.day_selected--green {
  background-color: #164e22;
  color: white;
}
.day_selected--purple {
  background-color: #441c64;
  color: white;
}
.day_selected--yellow {
  background-color: #865413;
  color: white;
}
.day_selected--blue {
  background-color: #2b489b;
  color: white;
}
.day_selected--neutral {
  background-color: #000000;
  color: white;
}

.sund_highli--red,
.sund_highli--purple,
.sund_highli--yellow,
.sund_highli--blue,
.sund_highli--neutral {
  color: rgb(22, 43, 22);
  background-color: rgba(88, 209, 138, 0.151);
}
.sund_highli--green {
  color: rgb(75, 45, 6);
  background-color: rgba(209, 147, 88, 0.151);
}

.calendar {
  width: 200px;
  min-height: 220px;
  background: #fff;
  box-shadow: 10px 10px 40px #00000047;
  border-radius: 10px;
  padding: 15px 15px;
}
.calendar_body {
  float: left;
  width: 100%;
}

.calendar_YM_container {
  display: flex;
  font-weight: bold;
  font-size: 0.65rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.buttons_container {
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.buttons_container--red_year {
  background-color: #dab1b170;
}
.buttons_container--green_year {
  background-color: #b1dab770;
}
.buttons_container--purple_year {
  background-color: #d5b1da70;
}
.buttons_container--yellow_year {
  background-color: #eee1a570;
}
.buttons_container--blue_year {
  background-color: #b1bbda70;
}
.buttons_container--neutral_year {
  background-color: #c9c9c970;
}

.arrows_container {
  display: flex;
  justify-content: center;
  padding: 2px;
}

.arrows--red {
  stroke: #9b2b2b;
}
.arrows--green {
  stroke: #164e22;
}
.arrows--purple {
  stroke: #441c64;
}
.arrows--yellow {
  stroke: #865413;
}
.arrows--blue {
  stroke: #2b489b;
}
.arrows--neutral {
  stroke: #000000;
}

.home {
  cursor: pointer;
  border: none;
  background: transparent;
}

.home-xcircle--red {
  stroke: #9b2b2b;
}
.home-xcircle--green {
  stroke: #164e22;
}
.home-xcircle--purple {
  stroke: #441c64;
}
.home-xcircle--yellow {
  stroke: #865413;
}
.home-xcircle--blue {
  stroke: #2b489b;
}
.home-xcircle--neutral {
  stroke: #000000;
}

.year-month_container {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.year_container {
  font-size: 0.9rem;
  bottom: 2.3px;
  margin: 0 3px 0 0;
}

.year-display {
  cursor: pointer;
  position: relative;
  left: 2px;
  top: 5px;
}

.year-month_container--red {
  color: #9b2b2b;
}
.year-month_container--green {
  color: #164e22;
}
.year-month_container--purple {
  color: #441c64;
}
.year-month_container--yellow {
  color: #865413;
}
.year-month_container--blue {
  color: #2b489b;
}
.year-month_container--neutral {
  color: #000000;
}

.year-input {
  width: 100%;
  font-size: 0.8rem;
  border: none;
  font-weight: bold;
  transition: 300ms;
}
.year-input:focus {
  outline: none;
  box-shadow: 0px 0px 2px rgba(24, 20, 58, 0.9);
}
.year-input--red:focus {
  color: #9b2b2b;
}
.year-input--green:focus {
  color: #164e22;
}
.year-input--purple:focus {
  color: #441c64;
}
.year-input--yellow:focus {
  color: #865413;
}
.year-input--blue:focus {
  color: #2b489b;
}
.year-input--neutral:focus {
  color: #000000;
}