@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');



.calendar-section {
  display: block;
  width: 100%;
  box-sizing:border-box;
  z-index: 999;

  border:1px solid #ddd;
  border-radius:10px;


  margin-bottom: 20px;
  background: #fff;
}

#detail-local .calendar-section .top{}
#detail-local .calendar-section .top .box{width:50%;text-align:center; padding:10px; border-bottom:1px solid #ddd;}
#detail-local .calendar-section .top .box + .box{border-left:1px solid #ddd;}
#detail-local .calendar-section .top .box h2{font-size:13px; margin:0;}
#detail-local .calendar-section .top .box h3{font-size:20px; font-weight:500;}



#detail-local .c-box{padding:0 30px;}



.calendar,
.calendar_weekdays,
.calendar_content {
  max-width: 585px;
}

.calendar {
  /*float: left;*/
  margin: auto;
  min-width: 320px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

.calendar_weekdays {
  color: #aaa;
  font-weight: lighter;
}
.calendar_weekdays div {
  display: inline-block;
  vertical-align: top;
}
.calendar_content,
.calendar_weekdays,
.calendar_header {
  position: relative;
  margin-top: 20px;
}
.calendar_content:after,
.calendar_weekdays:after,
.calendar_header:after {
  content: " ";
  display: table;
  clear: both;
}
.calendar_weekdays div,
.calendar_content div {
  /*border: 1px dotted #999;*/
  width: 14.28571%;
  height: 45px;
  line-height: 69px;
  overflow: hidden;
  text-align: center;
  background-color: transparent;
}

.calendar_content .today {
  color: #3b8fc7;
}
.calendar_content div {
  float: left;
  margin-left: -1px;
  margin-top: -1px;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.calendar_content div:hover {
  border: 1px solid #777;
  /*line-height: 68px;*/
  cursor: pointer;
  border-radius: 10px;
}

.calendar_content div.blank:hover {
  cursor: default;
  border: none;
}

.calendar_content div.past-date {
  cursor: initial;
  color: #d5d5d5;
  cursor: no-drop;
}
.calendar_content div.today {
  font-weight: bold;
  font-size: 18px;
  color: #409edd;
}

.calendar_content div.selected{
  background: #ff5500;
  border-radius: 10px;
  color: #fff;
  border: 1px solid white;
}
.calendar_content div.head {
  background: #ff5500;
  color: #fff;
  border-radius: 10px;
  border: 1px solid white;
}
.calendar_header {
  width: 100%;
  text-align: center;
}

.calendar_header h2 {
  float: left;
  width: 70%;
  margin-top: 10px;
  padding: 0 10px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  color: #ffffff;
}

button.switch-month {
  background-color: transparent;
  padding: 0;
  outline: none;
  border: none;
  line-height: 52px;
  height: 55px;
  float: left;
  width: 15%;
  transition: color 0.2s;
  cursor: pointer;
  font-size: 18px;
}

button.switch-month:hover {
  color: #FF2B56;
}
button.switch-month:active {
  background-color: rgba(113, 113, 125, 0.4);
}
.calendar_header h2 {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-family: 'circularstd';
  line-height: 1.7;
}
.row {
  display: flex;
}

.s {
  font-family: 'sans-serif';
}