.mp-picker {
  font-family: 'roboto', sans-serif;
  font-size: 15px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2.5px 6px 2px rgba(0, 0, 0, 0.2);
  width: 350px;
  height: 12.5em;
  position: absolute;
  display: table;
  z-index: 100;
}
.mp-picker:before,
.mp-picker:after {
  content: " ";
  display: table;
}
.mp-picker:after {
  clear: both;
}
@media (max-width: 650px), (max-height: 650px) {
  .mp-picker {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
.mp-picker * {
  box-sizing: border-box;
}
.mp-picker .mp-picker-choose * {
  display: inline-block;
  text-align: center;
  font-weight: 500;
}
.mp-picker .mp-picker-choose a,
.mp-picker .mp-picker-choose a:hover,
.mp-picker .mp-picker-choose a:focus {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"] {
  cursor: pointer;
  margin-bottom: 0.6em;
  border-radius: 1em;
  transition: background-color 0.2s ease;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"].mp-picker-choose-day {
  font-size: 0.8em;
  margin: 0;
  padding: 0.3em 0;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"].mp-empty {
  background-color: transparent !important;
  cursor: default;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"]:hover {
  background-color: #e6e6e6;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"].today {
  color: #009688;
}
.mp-picker .mp-picker-choose [class*="mp-picker-click"].active {
  color: #ffffff;
  background-color: #009688;
}
.mp-picker .mp-picker-choose .mp-picker-header {
  margin-bottom: 0.6em;
  font-size: 0.8em;
  opacity: 0.57;
}
.mp-picker .mp-picker-choose .mp-picker-header[class*="mp-picker-header-day"] {
  width: 14.28571429%;
}
.mp-picker[data-theme="dark"] .mp-picker-info {
  background: #555;
}
.mp-picker[data-theme="dark"] .mp-picker-picker {
  background-color: #424242;
  color: #ffffff;
}
.mp-picker[data-theme="dark"] .mp-picker-picker .mp-picker-site .mp-picker-site-button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiAjZjRmNGY0OyIgZD0iTTMuNywwLjdMMS40LDNsMi4zLDIuM0wzLDZMMCwzbDMtM0wzLjcsMC43eiIvPg0KPC9nPg0KPC9zdmc+DQo=");
  opacity: 1;
}
.mp-picker[data-theme="dark"] .mp-picker-picker .mp-picker-site .mp-picker-site-button:hover {
  background-color: #565656;
}
.mp-picker[data-theme="dark"] .mp-picker-picker [class*="mp-picker-choose-month"]:hover {
  background-color: #565656;
}
.mp-picker[data-theme="dark"] .mp-picker-picker [class*="mp-picker-choose-month"].today {
  color: #80cbc4;
}
.mp-picker[data-theme="dark"] .mp-picker-picker [class*="mp-picker-choose-month"].active {
  background-color: #80cbc4;
  color: #424242;
}
.mp-picker[data-orientation="portrait"] {
  width: 226px;
  height: 326px;
  display: block;
}
.mp-picker[data-orientation="portrait"] .mp-picker-info {
  display: block;
  width: 100%;
  height: 25%;
}
.mp-picker[data-orientation="portrait"] .mp-picker-info .mp-info-second {
  word-wrap: break-word;
}
.mp-picker[data-orientation="portrait"] .mp-picker-picker {
  display: block;
  width: 100%;
  height: 75%;
}
.mp-picker.mp-datepicker [class*="mp-picker-choose"] span,
.mp-picker.mp-datepicker [class*="mp-picker-choose"] a {
  width: 14.28571429%;
}
.mp-picker.mp-monthpicker [class*="mp-picker-choose"] span,
.mp-picker.mp-monthpicker [class*="mp-picker-choose"] a {
  width: 33.33333333%;
}
.mp-picker.mp-monthpicker[data-orientation="portrait"] .mp-picker-picker {
  padding-top: 2em;
}
.mp-picker .mp-picker-info {
  display: table-cell;
  width: 30%;
  color: #ffffff;
  background: #009688;
  padding: 1em;
}
.mp-picker .mp-picker-info .mp-info-first {
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  display: inline-block;
}
.mp-picker .mp-picker-info .mp-info-second {
  font-size: 1.9em;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  display: inline-block;
}
.mp-picker .mp-picker-picker {
  display: table-cell;
  width: 70%;
  background: #fafafa;
  color: rgba(0, 0, 0, 0.87);
  padding: 1em;
  overflow: hidden;
}
.mp-picker .mp-picker-picker .mp-picker-site {
  margin-bottom: 1em;
  font-size: 0.8em;
}
.mp-picker .mp-picker-picker .mp-picker-site:before,
.mp-picker .mp-picker-picker .mp-picker-site:after {
  content: " ";
  display: table;
}
.mp-picker .mp-picker-picker .mp-picker-site:after {
  clear: both;
}
.mp-picker .mp-picker-picker .mp-picker-site > * {
  float: left;
}
.mp-picker .mp-picker-picker .mp-picker-site .mp-picker-site-button {
  display: block;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K");
  background-repeat: no-repeat;
  background-size: 0.5em;
  background-position: center;
  height: 2em;
  width: 2em;
  margin: 0.25em 0;
  cursor: pointer;
  opacity: 0.8;
  transition: background-color 0.2s ease;
  border-radius: 2em;
}
.mp-picker .mp-picker-picker .mp-picker-site .mp-picker-site-button:hover {
  background-color: #e1e1e1;
}
.mp-picker .mp-picker-picker .mp-picker-site .mp-picker-site-next {
  transform: rotate(180deg);
}
.mp-picker .mp-picker-picker .mp-picker-site .mp-picker-site-this {
  width: calc(100% - 4em);
  text-align: center;
  font-weight: 600;
  line-height: 2em;
}
.mp-picker .mp-picker-picker .mp-picker-choose:before,
.mp-picker .mp-picker-picker .mp-picker-choose:after {
  content: " ";
  display: table;
}
.mp-picker .mp-picker-picker .mp-picker-choose:after {
  clear: both;
}
.mp-picker .mp-animate {
  transform: translate(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mp-picker .mp-animate.mp-picker-site-this {
  transition-timing-function: linear;
}
.mp-picker .mp-animate.mp-animate-right {
  transform: translateX(10%);
  opacity: 0;
}
.mp-picker .mp-animate.mp-animate-left {
  transform: translateX(-10%);
  opacity: 0;
}