.biz-calendar {
  font-family: 'Noto Sans KR', sans-serif;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  font-size: 62.5%;
  -webkit-box-shadow: 0.5em 0.5em 1.5em 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0.5em 0.5em 1.5em 0 rgba(0, 0, 0, 0.5);
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 5em 1fr;
      grid-template-rows: 5em 1fr;
  -ms-grid-columns: 60% 1fr;
      grid-template-columns: 60% 1fr;
  width: 750px;
  height: 700px;
}

.biz-calendar__header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
      grid-template-columns: 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
  padding: .5em .8em;
  background-color: #424242;
  color: #fff;
}

.biz-calendar__header .header-title {
  font-size: 1.4em;
}

.biz-calendar__header .header-title small {
  color: #fefefe;
}

.biz-calendar__header .header-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: .5em;
}

.biz-calendar__header .header-action button {
  font-size: 1.2em;
  border: none;
  padding: .3em .5em;
  background-color: #FBFAFA;
  border: 1px solid #D9D9D9;
  cursor: pointer;
}

.biz-calendar__header .header-action button i {
  color: #D6222C;
  font-size: 2em;
}

.biz-calendar__body {
  margin: 1em 0;
  padding: 0 1em;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 1em;
  overflow: auto;
}

.biz-calendar__body .biz-calendar__month {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 3.5em 1fr;
      grid-template-rows: 3.5em 1fr;
  gap: .5em;
}

.biz-calendar__body .biz-calendar__month-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 1.6em;
  text-align: center;
  text-indent: .5em;
}

.biz-calendar__body .biz-calendar__month-body {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-rows: 5em 1fr;
      grid-template-rows: 5em 1fr;
  gap: .5em;
}

.biz-calendar__body .biz-calendar__month-week {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.biz-calendar__body .biz-calendar__month-weeks {
  display: -ms-grid;
  display: grid;
  grid-auto-rows: 5em;
}

.biz-calendar__body .biz-calendar__month-weekname {
  border-bottom: 1px solid #ccc;
}

.biz-calendar__body .biz-calendar__month-weekname, .biz-calendar__body .biz-calendar__month-day {
  font-size: 1.3em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.biz-calendar__body .biz-calendar__month-day {
  color: #373737;
}

.biz-calendar__body .biz-calendar__month-day:hover, .biz-calendar__body .biz-calendar__month-day.selected {
  background-color: #FF5000;
  color: #ffffff !important;
  cursor: pointer;
}

.biz-calendar__body .biz-calendar__month-day.today {
  background-color: #f8f8f8;
}

.biz-calendar__body .biz-calendar__month-day.active {
  background-color: #FF5000;
  color: #ffffff !important;
}

.biz-calendar__body .biz-calendar__month-day.not-in-month {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: #ccc !important;
  background: none !important;
  opacity: .3;
}

.biz-calendar__body .biz-calendar__month-day.disabled {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: none !important;
  color: #ccc !important;
  cursor: not-allowed;
}

.biz-calendar__body .biz-calendar__month .s_day {
  color: #1c70b0;
}

.biz-calendar__body .biz-calendar__month .ss_day {
  color: #d2212d;
}

.biz-calendar__action {
  padding: 1em;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto 1fr auto auto;
      grid-template-rows: auto auto 1fr auto auto;
  row-gap: 1em;
}

.biz-calendar__row {
  text-align: center;
  color: #D6222C;
}

.biz-calendar__row i {
  font-size: 2.4em;
}

.biz-calendar__times {
  display: -ms-grid;
  display: grid;
  gap: 1em;
}

.biz-calendar__times .input-title {
  font-size: 1.3em;
  margin-bottom: .5em;
}

.biz-calendar__times .input-title b {
  font-weight: 400;
  color: #707070;
}

.biz-calendar__times .input-group {
  font-size: 1.3em;
}

.biz-calendar__times .input-group i {
  font-size: 2em;
}

.biz-calendar__selection {
  font-size: 1.3em;
  gap: 1em;
  -webkit-box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.08);
          box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.08);
}

.biz-calendar__selection .selection-title {
  background-color: #f0eded;
  padding: 1em;
  margin-bottom: 1em;
}

.biz-calendar__selection .selection-row {
  padding: .5em 1em;
}

.biz-calendar__selection .selection-row__title {
  padding: .3em 0;
  color: #707070;
}

.biz-calendar__selection .selection-row__content {
  font-size: 1.2em;
  color: #373737;
}

.biz-calendar__button {
  display: -ms-grid;
  display: grid;
  gap: 1em;
}

.biz-calendar__button button {
  font-size: 1.3em;
  height: 3.5em;
  cursor: pointer;
}

.biz-calendar__button button.biz-calendar__confirm {
  background-color: #FF5000;
  color: #fff;
}
