.bg-red {
  background-color: #f44336;
  color: #fff;
}
.bg-orange {
  background-color: #ff9800;
  color: #fff;
}
.bg-yellow {
  background-color: #fbbd08;
  color: #333;
}
.bg-olive {
  background-color: #4caf50;
  color: #fff;
}
.bg-green {
  background-color: #39b54a;
  color: #fff;
}
.bg-cyan {
  background-color: #00bcd4;
  color: #fff;
}
.bg-blue {
  background-color: #2196f3;
  color: #fff;
}
.bg-purple {
  background-color: #6739b6;
  color: #fff;
}
.bg-mauve {
  background-color: #9c26b0;
  color: #fff;
}
.bg-pink {
  background-color: #e03997;
  color: #fff;
}
.bg-brown {
  background-color: #795548;
  color: #fff;
}
.bg-grey {
  background-color: #9e9e9e;
  color: #fff;
}
.bg-gray {
  background-color: #c8c9cc;
  color: #646566;
}
.bg-black {
  background-color: #333;
  color: #fff;
}
.bg-white {
  background-color: #fff;
  color: #646566;
}
.bg-red.light {
  background-color: #fadbd9;
  color: #f44336;
}
.bg-orange.light {
  background-color: #fffbe8;
  color: #ff9800;
}
.bg-yellow.light {
  background-color: #fef2ce;
  color: #fbbd08;
}
.bg-olive.light {
  background-color: #e8f4d9;
  color: #4caf50;
}
.bg-green.light {
  background-color: #d7f0db;
  color: #39b54a;
}
.bg-cyan.light {
  background-color: #d2f1f0;
  color: #00bcd4;
}
.bg-blue.light {
  background-color: #cce6ff;
  color: #2196f3;
}
.bg-purple.light {
  background-color: #e1d7f0;
  color: #6739b6;
}
.bg-mauve.light {
  background-color: #ebd4ef;
  color: #9c26b0;
}
.bg-pink.light {
  background-color: #f9d7ea;
  color: #e03997;
}
.bg-brown.light {
  background-color: #ede1d9;
  color: #795548;
}
.bg-grey.light {
  background-color: #f7f8fa;
  color: #9e9e9e;
}
.bg-gray.light {
  background-color: #f7f8fa;
  color: #646566;
}
.bg-gradual-red {
  background-image: linear-gradient(45deg, #f44336, #fbbd08);
  color: #fff;
}
.bg-gradual-orange {
  background-image: linear-gradient(45deg, #ff9800, #f44336);
  color: #fff;
}
.bg-gradual-green {
  background-image: linear-gradient(45deg, #39b54a, #4caf50);
  color: #fff;
}
.bg-gradual-purple {
  background-image: linear-gradient(45deg, #6739b6, #9c26b0);
  color: #fff;
}
.bg-gradual-pink {
  background-image: linear-gradient(45deg, #e03997, #6739b6);
  color: #fff;
}
.bg-gradual-blue {
  background-image: linear-gradient(45deg, #2196f3, #00bcd4);
  color: #fff;
}
.bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.shadow[class*="-red"] {
  -webkit-box-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
          box-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
}
.shadow[class*="-orange"] {
  -webkit-box-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
          box-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
}
.shadow[class*="-yellow"] {
  -webkit-box-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
          box-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
}
.shadow[class*="-olive"] {
  -webkit-box-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
          box-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
}
.shadow[class*="-green"] {
  -webkit-box-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
          box-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
}
.shadow[class*="-cyan"] {
  -webkit-box-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
          box-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
}
.shadow[class*="-blue"] {
  -webkit-box-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
          box-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
}
.shadow[class*="-purple"] {
  -webkit-box-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
          box-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
}
.shadow[class*="-mauve"] {
  -webkit-box-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
          box-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
}
.shadow[class*="-pink"] {
  -webkit-box-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
          box-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
}
.shadow[class*="-brown"] {
  -webkit-box-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
          box-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
}
.shadow[class*="-grey"] {
  -webkit-box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
          box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}
.shadow[class*="-gray"] {
  -webkit-box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
          box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}
.shadow[class*="-black"] {
  -webkit-box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
          box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
}
.border-red {
  color: #f44336;
  border-color: #f44336;
}
.border-orange {
  color: #ff9800;
  border-color: #ff9800;
}
.border-yellow {
  color: #fbbd08;
  border-color: #fbbd08;
}
.border-olive {
  color: #4caf50;
  border-color: #4caf50;
}
.border-green {
  color: #39b54a;
  border-color: #39b54a;
}
.border-cyan {
  color: #00bcd4;
  border-color: #00bcd4;
}
.border-blue {
  color: #2196f3;
  border-color: #2196f3;
}
.border-purple {
  color: #6739b6;
  border-color: #6739b6;
}
.border-mauve {
  color: #9c26b0;
  border-color: #9c26b0;
}
.border-pink {
  color: #e03997;
  border-color: #e03997;
}
.border-brown {
  color: #795548;
  border-color: #795548;
}
.border-grey {
  color: #9e9e9e;
  border-color: #9e9e9e;
}
.border-gray {
  color: #646566;
  border-color: #646566;
}
.border-black {
  color: #333;
  border-color: #333;
}
.border-white {
  color: #fff;
  border-color: #fff;
}
.vm-date-picker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.vm-date-picker-content {
  width: 320px;
  background-color: #fff;
  border-radius: 5px;
}
.vm-date-picker-content-range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 320px;
  padding-top: 15px;
  border-bottom: 1px solid #c8c9cc;
}
.vm-date-picker-content-range .vm-date-picker-start-date,
.vm-date-picker-content-range .vm-date-picker-end-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
  height: 50px;
  text-align: center;
}
.vm-date-picker-content-range .vm-date-picker-start-date span,
.vm-date-picker-content-range .vm-date-picker-end-date span {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 12px;
}
.vm-date-picker-content-range .vm-date-picker-start-date-select,
.vm-date-picker-content-range .vm-date-picker-end-date-select {
  border-bottom: 1px solid #2196f3;
}
.vm-date-picker-content-range .vm-date-picker-start-date-select span,
.vm-date-picker-content-range .vm-date-picker-end-date-select span {
  color: #2196f3;
}
.vm-date-picker-content-date {
  padding: 15px 0;
  border-bottom: 1px solid #c8c9cc;
}
.vm-date-picker-content-date-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.vm-date-picker-content-date-title span {
  display: block;
  color: #333;
  padding: 0 15px;
  font-size: 14px;
  text-align: center;
}
.vm-date-picker-content-date-week,
.vm-date-picker-content-date-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 280px;
  margin: 0 auto;
}
.vm-date-picker-content-date-week label,
.vm-date-picker-content-date-day label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  text-align: center;
}
.vm-date-picker-content-date-week label span,
.vm-date-picker-content-date-day label span {
  display: block;
  width: 40px;
  height: 40px;
  color: #333;
  line-height: 40px;
}
.vm-date-picker-content-date-week label .gray,
.vm-date-picker-content-date-day label .gray {
  color: #c8c9cc;
}
.vm-date-picker-content-date-week label .current,
.vm-date-picker-content-date-day label .current {
  color: #fff;
  background-color: #2196f3;
  border-radius: 2500px;
}
.vm-date-picker-content-date-week .currentLeft,
.vm-date-picker-content-date-day .currentLeft {
  background-color: rgba(0, 102, 204, 0.2);
  border-top-left-radius: 2500px;
  border-bottom-left-radius: 2500px;
}
.vm-date-picker-content-date-week .currentLeft span,
.vm-date-picker-content-date-day .currentLeft span {
  color: #fff;
}
.vm-date-picker-content-date-week .currentRight,
.vm-date-picker-content-date-day .currentRight {
  background-color: rgba(0, 102, 204, 0.2);
  border-top-right-radius: 2500px;
  border-bottom-right-radius: 2500px;
}
.vm-date-picker-content-date-week .currentRight span,
.vm-date-picker-content-date-day .currentRight span {
  color: #fff;
}
.vm-date-picker-content-date-week .currentBetween,
.vm-date-picker-content-date-day .currentBetween {
  background-color: rgba(0, 102, 204, 0.2);
}
.vm-date-picker-content-date-week .currentBetween span,
.vm-date-picker-content-date-day .currentBetween span {
  color: #fff;
}
.vm-date-picker-content-date-date span {
  color: #646566;
}
.vm-date-picker-content-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 320px;
  padding-top: 15px;
}
.vm-date-picker-content-time-hour,
.vm-date-picker-content-time-min,
.vm-date-picker-content-time-period {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 90px;
  overflow: hidden;
}
.vm-date-picker-content-time-hour label,
.vm-date-picker-content-time-min label,
.vm-date-picker-content-time-period label {
  display: block;
  width: 90px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}
.vm-date-picker-content-time-hour .select,
.vm-date-picker-content-time-min .select,
.vm-date-picker-content-time-period .select {
  border-top: 2px solid #2196f3;
  border-bottom: 2px solid #2196f3;
}
.vm-date-picker-content-time-hour .hour,
.vm-date-picker-content-time-min .hour,
.vm-date-picker-content-time-period .hour,
.vm-date-picker-content-time-hour .min,
.vm-date-picker-content-time-min .min,
.vm-date-picker-content-time-period .min,
.vm-date-picker-content-time-hour .period,
.vm-date-picker-content-time-min .period,
.vm-date-picker-content-time-period .period {
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
}
.vm-date-picker-content-time-min {
  margin: 0 10px;
}
.vm-date-picker-content-time-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-top: 15px;
}
.vm-date-picker-content-time-button div {
  line-height: 50px;
}
