.center-middle{
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.calendar-mode{
  --week-number-width: 24px;
  --week-name-height: 24px;
  --calendar-item-height: 20px;
}

.calendar-mode > .ohke-header > .filter-form {
  display: flex
}

.calendar-mode > .ohke-header > .filter-form > .search {
  flex: 1
}
.calendar-mode > .ohke-header > .filter-form .calendar-title {
  min-width: 100px;
  text-align: center;
  padding-top: 5px;
}

.calendar-mode .calendar-body {
  height: 100%;
}

.calendar-mode .calendar-source {
  display: none;
}

.calendar-mode .month-action {
  padding-top: 5px;
  margin: 0 8px;
}

.calendar-mode .weekend {
  color: var(--red)
}

.calendar-mode .cal-week, .calendar-mode .cal-week-header{
  display: flex;
}

.calendar-mode .cal-week > div, .calendar-mode .cal-week-header > div {
  border-color: var(--border-color);
  border-width: 0 1px 1px 0;
  border-style: solid;
}

.calendar-mode .week-number {
  background: var(--lighter-color);
  text-align: center;
  font-weight: bold;
  width: var(--week-number-width);
}

.calendar-mode .cal-week .day, .calendar-mode .cal-week-header .day {
  width: calc((100% - var(--week-number-width))/7);
  overflow: hidden;
}
.calendar-mode .cal-week-header {
  height: var(--week-name-height);
}
.calendar-mode .cal-week .day{
  min-height: 100%;
}
.calendar-mode .week-4 .cal-week{
  height: calc((100% - var(--week-name-height))/4);
}
.calendar-mode .week-5 .cal-week{
  height: calc((100% - var(--week-name-height))/5);
}
.calendar-mode .week-6 .cal-week{
  height: calc((100% - var(--week-name-height))/6);
}
.calendar-mode.no-week-number .cal-week .day, .calendar-mode.no-week-number .cal-week-header .day{
  width: calc(100%/7);
}

.calendar-mode .day-number {
  height: var(--week-name-height);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.calendar-mode.no-week-number .week-number {
  display: none;
}

.calendar-mode .day-content {
  height: calc(100% - var(--week-name-height));
  overflow: auto;
  min-height: 100px;
}

.calendar-mode .day.inactive .day-content {
  color: gray;
}

.calendar-mode .day.today .day-number span{
  background: var(--light-color);
  color: var(--white);
  border-radius: 50%;
  padding: 2px 4px;
  min-width: 24px;
  text-align: center;
}

.calendar-mode .cal-hide{display: none}
.calendar-mode .day-content > .list-item{
  display: flex;
  height: var(--calendar-item-height);
  overflow: hidden;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 6px;
}
.calendar-mode .day-content > .list-item:hover{
	background: var(--active-color) !important;
  color: var(--white) !important;
}
.calendar-mode .day-content > .list-item.past{
  opacity: 0.4;
}
.calendar-mode .day-content > .list-item > .icon img{
  max-width: 14px
}
.calendar-mode .day-content > .list-item > .title{flex:1}
.calendar-mode .day-content > .list-item > div{padding: 2px 4px}
@media (max-width:600px){
  .calendar-mode .day-content > .list-item,
  .calendar-mode .day-content > .list-item > .icon{
    display: inline-block;
  }
  .calendar-mode .day-content > .list-item > .time,
  .calendar-mode .day-content > .list-item > .title{
    display: none;
  }
}

.calendar-week{
  --day-slot-width: 50px;
  --slot-height: 40px;
  --week-name-height: 48px;
}

.calendar-week > .ohke-header > .filter-form {
  display: flex
}

.calendar-week > .ohke-header > .filter-form > .search {
  flex: 1
}
.calendar-week > .ohke-header > .filter-form .calendar-title {
  min-width: 150px;
  text-align: center;
  padding-top: 5px;
}

.calendar-week .calendar-body {
  height: 100%;
}

.calendar-week .calendar-source {
  display: none;
}

.calendar-week .month-action {
  padding-top: 5px;
  margin: 0 8px;
}

.calendar-week .weekend {
  color: var(--red)
}

.calendar-week .brb {
  border-color: var(--border-color);
  border-width: 0 1px 1px 0;
  border-style: solid;
}
.calendar-week .bb {
  border-color: var(--border-color);
  border-width: 0 0 1px 0;
  border-style: solid;
}
.calendar-week .time-line {
  display: flex;
  height: var(--slot-height);
}
.calendar-week .label-slot {
  margin-top: -8px;
}
.calendar-week .day-slot {
  background: var(--border-color);
  text-align: center;
  width: var(--day-slot-width);
}

.calendar-week .cal-week .day, .calendar-week .cal-week-header .day {
  width: calc((100% - var(--day-slot-width))/7);
  overflow: hidden;
}
.calendar-week .cal-week-header {
  display: flex;
  height: var(--week-name-height);
  width: calc(100% - 2px);
}
.calendar-week .cal-week-header .day{
  display: flex;
  flex-direction: column;
}

.calendar-week .day-number {
  height: var(--week-name-height);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.calendar-week.no-week-number .week-number {
  display: none;
}

.calendar-week .cal-week {
  overflow: auto;
}

.calendar-week .day.inactive .day-content {
  color: gray;
}

.calendar-week .day.today .day-number span{
  background: var(--light-color);
  color: var(--white);
  border-radius: 50%;
  padding: 2px 4px;
  min-width: 27px;
  text-align: center;
}

.calendar-week .cal-hide{display: none}
.calendar-week .item-outer > .list-item {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  background: var(--light-color);
  margin: 2px 2px;
}
.calendar-week .item-outer{
  width: 100%;
  position: absolute;
  display: flex;
}
.calendar-week .now-indicator{
  height: 5px;
  width: 100%;
  background: white;
  position: absolute;
  border: 2px solid red;
}
.calendar-week .item-outer > .list-item:hover{
	background: var(--active-color) !important;
  color: var(--white) !important;
}
.calendar-week .item-outer > .list-item.past{
  background: var(--border-color);
  color: var(--white) !important;
}
.calendar-week .item-outer > .list-item > .icon img{
  max-width: 14px
}
.calendar-week .day-number span {
  font-size: 15px;
  margin-bottom: 2px;
}
.calendar-week .item-outer > .list-item > .title{flex:1}
.calendar-week .item-outer > .list-item > div{padding: 2px 4px}
.calendar-week .cal-week > .column{
  width: calc((100% - var(--day-slot-width))/7);
  position: absolute;
  top: 0;
  height: calc(var(--slot-height)*24);
}
.calendar-week .cal-week > .col0{left: var(--day-slot-width);}
.calendar-week .cal-week > .col1{left: calc(var(--day-slot-width) + 1*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .col2{left: calc(var(--day-slot-width) + 2*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .col3{left: calc(var(--day-slot-width) + 3*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .col4{left: calc(var(--day-slot-width) + 4*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .col5{left: calc(var(--day-slot-width) + 5*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .col6{left: calc(var(--day-slot-width) + 6*(100% - var(--day-slot-width))/7);}
.calendar-week .cal-week > .column > .column-inner{
  position: relative;
  height: 100%;
}
.calendar-week .small, .calendar-week .small-flex{
  display: none;
}
.calendar-week .cal-week {
  height: calc(100% - var(--week-name-height));
  display: block;
  overflow: auto;
  position: relative;
}
.calendar-week .cal-week::-webkit-scrollbar {
  width: 2px;
}
@media (max-width:600px){
  .calendar-week .item-outer > .list-item,
  .calendar-week .item-outer > .list-item > .icon{
    display: inline-block;
  }
  .calendar-week .item-outer > .list-item > .time,
  .calendar-week .item-outer > .list-item > .title{
    display: none;
  }
  .calendar-week .medium{
    display: none;
  }
  .calendar-week .small{
    display: block;
  }
  .calendar-week .small-flex{
    display: flex;
  }
}

.calendar-day{
  --day-slot-width: 50px;
  --slot-height: 40px;
  --week-name-height: 48px;
}

.calendar-day > .ohke-header > .filter-form {
  display: flex
}

.calendar-day > .ohke-header > .filter-form > .search {
  flex: 1
}
.calendar-day > .ohke-header > .filter-form .calendar-title {
  min-width: 150px;
  text-align: center;
  padding-top: 5px;
}

.calendar-day .calendar-body {
  height: 100%;
}

.calendar-day .calendar-source {
  display: none;
}

.calendar-day .month-action {
  padding-top: 5px;
  margin: 0 8px;
}

.calendar-day .weekend {
  color: var(--red)
}

.calendar-day .brb {
  border-color: var(--border-color);
  border-width: 0 1px 1px 0;
  border-style: solid;
}
.calendar-day .bb {
  border-color: var(--border-color);
  border-width: 0 0 1px 0;
  border-style: solid;
}
.calendar-day .time-line {
  display: flex;
  height: var(--slot-height);
}
.calendar-day .label-slot {
  margin-top: -8px;
}
.calendar-day .day-slot {
  background: var(--border-color);
  text-align: center;
  width: var(--day-slot-width);
}

.calendar-day .cal-week .day, .calendar-day .cal-week-header .day {
  width: calc(100% - var(--day-slot-width));
  overflow: hidden;
}
.calendar-day .cal-week-header {
  display: flex;
  height: var(--week-name-height);
  width: calc(100% - 2px);
}
.calendar-day .cal-week-header .day{
  display: flex;
  flex-direction: column;
}

.calendar-day .day-number {
  height: var(--week-name-height);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.calendar-day.no-week-number .week-number {
  display: none;
}

.calendar-day .cal-week {
  overflow: auto;
  min-height: 300px;
}

.calendar-day .day.inactive .day-content {
  color: gray;
}

.calendar-day .day.today .day-number span{
  background: var(--light-color);
  color: var(--white);
  border-radius: 50%;
  padding: 2px 4px;
}

.calendar-day .cal-hide{display: none}
.calendar-day .item-outer > .list-item {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  background: var(--light-color);
  margin: 2px 2px;
}
.calendar-day .item-outer{
  width: 100%;
  position: absolute;
  display: flex;
}
.calendar-day .now-indicator{
  height: 5px;
  width: 100%;
  background: white;
  position: absolute;
  border: 2px solid red;
}
.calendar-day .item-outer > .list-item:hover{
	background: var(--active-color) !important;
  color: var(--white) !important;
}
.calendar-day .item-outer > .list-item.past{
  background: var(--border-color);
  color: var(--white) !important;
}
.calendar-day .item-outer > .list-item > .icon img{
  max-width: 14px
}
.calendar-day .day-number span {
  font-size: 15px;
  margin-bottom: 2px;
}
.calendar-day .item-outer > .list-item > .title{flex:1}
.calendar-day .item-outer > .list-item > div{padding: 2px 4px}
.calendar-day .cal-week > .column{
  width: calc(100% - var(--day-slot-width));
  position: absolute;
  top: 0;
  height: calc(var(--slot-height)*24);
}
.calendar-day .cal-week > .col0{left: var(--day-slot-width);}
.calendar-day .cal-week > .col1{left: calc(var(--day-slot-width) + 1*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .col2{left: calc(var(--day-slot-width) + 2*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .col3{left: calc(var(--day-slot-width) + 3*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .col4{left: calc(var(--day-slot-width) + 4*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .col5{left: calc(var(--day-slot-width) + 5*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .col6{left: calc(var(--day-slot-width) + 6*(100% - var(--day-slot-width))/7);}
.calendar-day .cal-week > .column > .column-inner{
  position: relative;
  height: 100%;
}
.calendar-day .small, .calendar-day .small-flex{
  display: none;
}
.calendar-day .cal-week {
  height: calc(100% - var(--week-name-height));
  min-height: 200px;
  display: block;
  overflow: auto;
  position: relative;
}
.calendar-day .cal-week::-webkit-scrollbar {
  width: 2px;
}
@media (max-width:600px){
  .calendar-day .item-outer > .list-item,
  .calendar-day .item-outer > .list-item > .icon{
    display: inline-block;
  }
  .calendar-day .item-outer > .list-item > .time,
  .calendar-day .item-outer > .list-item > .title{
    display: none;
  }
  .calendar-day .medium{
    display: none;
  }
  .calendar-day .small{
    display: block;
  }
  .calendar-day .small-flex{
    display: flex;
  }
}
.ohke-content.calendar-inside{
  height: calc(100vh - 150px);
  padding: 0;
}