.items {
  list-style: none;
  text-align: center;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  text-align: left;
  margin: 0;
  border-bottom: rgba(230,230,230,0.6) 1px solid;
  padding: 3.5vw 0;
  height: auto;
}

.item {
  font-size: 4vw;
  left: 0;
}

.drop-item{
  display: flex;
  align-items: center;
}
.drop-text{
  display: inline-block;
  width: 35vw;
  text-align: right;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: default;
}
.drop-icon{
  display: inline-block;
  align-self: center;
  margin-left:2vw;
  content: '';
  width: 2vw;
  height: 2vw;
  border-top: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);   /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -o-transform: rotate(45deg);    /* Opera */
  -moz-transform: rotate(45deg);    /* Firefox */
}

.md_mask {
  width: 100%;
  height: 100%;
  -moz-transition: opacity .5s linear 0s;
  -webkit-transition: opacity .5s linear 0s;
  -o-transition: opacity .5s linear 0s;
  -ms-transition: opacity .5s linear 0s;
  transition: opacity .5s linear 0s;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  visibility: hidden;
  background: rgba(0,0,0,0.54);
  opacity: 0;
  z-index: 1000;
}

.md_mask.show {
  visibility: visible;
  opacity: 1;
}

.md_panel {
  -moz-transition: -moz-transform .3s ease-in-out 0s;
  -ms-transition: -ms-transform .3s ease-in-out 0s;
  -webkit-transition: -webkit-transform .3s ease-in-out 0s;
  -o-transition: -o-transform .3s ease-in-out 0s;
  transition: transform .3s ease-in-out 0s;
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1100;
  background-color: #F7F7F7;
  font-size: 4vw;
  color: rgba(0,0,0,1);
  font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
}

.md_panel.show {
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.md_selectarea {
  display: inline-block;
  width: 50%;
  position: relative;
}

.md_head {
  height: 40px;
  line-height: 40px;
}

.md_body {
  position: relative;
  height: 70vw;
}

.md_headtext {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.md_prev,
.md_next {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 5vw;
}

.md_prev {
  left: 0;
}

.md_next {
  right: 0;
}

.md_weekarea {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
   height: 10%;
}

.md_weekarea li,
.md_datearea li {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 14.28571429%;;
  font-size: .8125em;
  font-weight: 400;
  text-align: center;
}
.md_weekarea li{
  height: 100%;
  line-height: 100%;
}
.md_datearea li{
  height: 16.66666667%;
  line-height: 100%;
}

.md_weekarea li,
.md_prev,
.md_next {
  color: #5b5b5b;
}

.md_datearea {
  position: absolute;
  width: 100%;
  height: 90%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.md_datearea li.current {
  color: #872F9F;
  font-weight: bold;
  border-radius: 4px;
}

.md_datearea li span {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.md_datearea li span.current {
  background-color: #872F9F;
  color: #FFF;
}

.md_bar {
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E6E6E6;
}

.md_ok,
.md_cancel {
  display: -moz-inline-stack;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 2.5em;
  line-height: 2.5em;
}

.md_ok {
  margin-right: 4vw;
}

.md_cancel {
  margin-left: 4vw;
}

.out_left {
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
}

.out_right {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
}

.prevdate,
.nextdate {
  color: #999;
}

.disabled {
  color: #C6C6C6;
}