.calendar-wraper {
  display: flex;
  /* justify-content: center; */
  padding: 20px 20px 50px 20px;
}

.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
  box-sizing: border-box;
}
.clearfix:after {
  clear: both;
  display: block;
  box-sizing: border-box;
}

.calendar {
  font-size: 100%;
  cursor: default;
  position: relative;
}

.calendar .header {
  height: 100px;
  width: 300px;
  position: relative;
  color: #fff;
}
.calendar .header .text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #308ff0;
  padding: 15px;
  transform: rotateX(90deg);
  transform-origin: bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: 0.4s ease-in-out 0s;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.calendar .header .text > span {
  text-align: center;
  padding: 26px;
  display: block;
}
.calendar .header.active .text {
  transform: rotateX(0deg);
  opacity: 1;
}
.months {
  width: 270px;
  height: 240px;
  position: relative;
}
.months .hr {
  height: 1px;
  margin: 15px 0;
  background: #ccc;
}
.month {
  padding: 15px;
  width: inherit;
  height: inherit;
  background: #fff;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.4s ease-in-out 0s;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.months[data-flow="left"] .month {
  transform: rotateY(-180deg);
}
.months[data-flow="right"] .month {
  transform: rotateY(180deg);
}
.table {
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  display: table;
}
.table .row {
  display: table-row;
}
.table .row.head {
  color: #308ff0;
  text-transform: uppercase;
}
.table .row .cell {
  width: 14.28%;
  padding: 5px;
  text-align: center;
  display: table-cell;
}
.table .row .cell.disable {
  color: #ccc;
}
.table .row .cell span {
  display: block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  transition: color, background 0.4s ease-in-out 0s;
}
.table .row .cell.active span {
  color: #fff;
  background-color: #308ff0;
}
.months .month[data-active="true"] {
  transform: rotateY(0);
}
.header [data-action] {
  color: inherit;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  z-index: 1;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}
.header [data-action] > i {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -10px;
  margin-left: -10px;
}
.header [data-action] > i:before,
.header [data-action] > i:after {
  top: 50%;
  margin-top: -1px;
  content: "";
  position: absolute;
  height: 2px;
  width: 20px;
  border-top: 2px solid;
  border-radius: 2px;
}
.header [data-action*="prev"] {
  left: 15px;
}
.header [data-action*="next"] {
  right: 15px;
}
.header [data-action*="prev"] > i:before,
.header [data-action*="prev"] > i:after {
  left: 0;
  box-sizing: border-box;
}
.header [data-action*="prev"] > i:before {
  top: 3px;
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.header [data-action*="prev"] > i:after {
  top: auto;
  bottom: 3px;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.header [data-action*="next"] > i:before,
.header [data-action*="next"] > i:after {
  right: 0;
  box-sizing: border-box;
}
.header [data-action*="next"] > i:before {
  top: auto;
  bottom: 3px;
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.header [data-action*="next"] > i:after {
  top: 3px;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.header.active [data-action] {
  opacity: 1;
}

[data-theme="jan"] {
  background-color: #90caf9;
}
[data-theme="jan"] .row.head {
  color: #1e88e5;
}
[data-theme="jan"] .header .text,
[data-theme="jan"] .table .row .cell.active span {
  background-color: #1e88e5;
}

[data-theme="feb"] {
  background-color: #81d4fa;
}
[data-theme="feb"] .row.head {
  color: #039be5;
}
[data-theme="feb"] .header .text,
[data-theme="feb"] .table .row .cell.active span {
  background-color: #039be5;
}

[data-theme="mar"] {
  background-color: #80cbc4;
}
[data-theme="mar"] .row.head {
  color: #00897b;
}
[data-theme="mar"] .header .text,
[data-theme="mar"] .table .row .cell.active span {
  background-color: #00897b;
}

[data-theme="apr"] {
  background-color: #c5e1a5;
}
[data-theme="apr"] .row.head {
  color: #7cb342;
}
[data-theme="apr"] .header .text,
[data-theme="apr"] .table .row .cell.active span {
  background-color: #7cb342;
}

[data-theme="may"] {
  background-color: #ffe082;
}
[data-theme="may"] .row.head {
  color: #ffb300;
}
[data-theme="may"] .header .text,
[data-theme="may"] .table .row .cell.active span {
  background-color: #ffb300;
}

[data-theme="jun"] {
  background-color: #ffab91;
}
[data-theme="jun"] .row.head {
  color: #f4511e;
}
[data-theme="jun"] .header .text,
[data-theme="jun"] .table .row .cell.active span {
  background-color: #f4511e;
}

[data-theme="jul"] {
  background-color: #ce93d8;
}
[data-theme="jul"] .row.head {
  color: #8e24aa;
}
[data-theme="jul"] .header .text,
[data-theme="jul"] .table .row .cell.active span {
  background-color: #8e24aa;
}

[data-theme="aug"] {
  background-color: #b39ddb;
}
[data-theme="aug"] .row.head {
  color: #5e35b1;
}
[data-theme="aug"] .header .text,
[data-theme="aug"] .table .row .cell.active span {
  background-color: #5e35b1;
}

[data-theme="sep"] {
  background-color: #ef9a9a;
}
[data-theme="sep"] .row.head {
  color: #e53935;
}
[data-theme="sep"] .header .text,
[data-theme="sep"] .table .row .cell.active span {
  background-color: #e53935;
}

[data-theme="oct"] {
  background-color: #ce93d8;
}
[data-theme="oct"] .row.head {
  color: #8e24aa;
}
[data-theme="oct"] .header .text,
[data-theme="oct"] .table .row .cell.active span {
  background-color: #8e24aa;
}

[data-theme="nov"] {
  background-color: #bcaaa4;
}
[data-theme="nov"] .row.head {
  color: #6d4c41;
}
[data-theme="nov"] .header .text,
[data-theme="nov"] .table .row .cell.active span {
  background-color: #6d4c41;
}

[data-theme="dec"] {
  background-color: #b0bec5;
}
[data-theme="dec"] .row.head {
  color: #546e7a;
}
[data-theme="dec"] .header .text,
[data-theme="dec"] .table .row .cell.active span {
  background-color: #546e7a;
}