.datepicker–cells {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.datepicker–cell {

border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 32px;
z-index: 1;
&.-focus- {
  background: #f0f0f0;
}
&.-current- {
  color: #4EB5E6;
  &.-focus- {
    color: #4a4a4a;
  }
  &.-in-range- {
    color: #4EB5E6;
  }
}
&.-in-range- {
  background: rgba(92, 196, 239, 0.1);
  color: #4a4a4a;
  border-radius: 0;
  &.-focus- {
    background-color: rgba(92, 196, 239, 0.2);
  }
}
&.-disabled- {
  cursor: default;
  color: #aeaeae;
  &.-focus- {
    color: #aeaeae;
  }
  &.-in-range- {
    color: #a1a1a1;
  }
  &.-current-.-focus- {
    color: #aeaeae;
  }
}
&.-range-from- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 4px 0 0 4px;
}
&.-range-to- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 0 4px 4px 0;
}
&.-selected- {
  color: #fff;
  background: #5cc4ef;
  &.-current- {
    color: #fff;
    background: #5cc4ef;
  }
}
&.-range-from-.-range-to- {
  border-radius: 4px;
}
&.-selected- {
  border: none;
  &.-focus- {
    background: #45bced;
  }
}
&:empty {
  cursor: default;
}

}

.datepicker–days-names {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 8px 0 3px;

}

.datepicker–day-name {

color: #FF9A19;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: .8em;

}

.-only-timepicker- .datepicker–content, .datepicker–body, .datepicker-inline .datepicker–pointer {

display: none;

}

.datepicker–cell-day {

width: 14.28571%;

}

.datepicker–cells-months {

height: 170px;

}

.datepicker–cell-month {

width: 33.33%;
height: 25%;

}

.datepicker–cells-years, .datepicker–years {

height: 170px;

}

.datepicker–cell-year {

width: 25%;
height: 33.33%;

}

.datepickers-container {

position: absolute;
left: 0;
top: 0;

}

@media print {

.datepickers-container {
  display: none;
}

}

.datepicker {

background: #fff;
border: 1px solid #dbdbdb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-sizing: content-box;
font-family: Tahoma,sans-serif;
font-size: 14px;
color: #4a4a4a;
width: 250px;
position: absolute;
left: -100000px;
opacity: 0;
transition: opacity .3s ease,left 0s .3s,-webkit-transform .3s ease;
transition: opacity .3s ease,transform .3s ease,left 0s .3s;
transition: opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease;
z-index: 100;
&.-from-top- {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
&.-from-right- {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}
&.-from-bottom- {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}
&.-from-left- {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}
&.active {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: opacity .3s ease,left 0s 0s,-webkit-transform .3s ease;
  transition: opacity .3s ease,transform .3s ease,left 0s 0s;
  transition: opacity .3s ease,transform .3s ease,left 0s 0s,-webkit-transform .3s ease;
}

}

.datepicker-inline .datepicker {

border-color: #d7d7d7;
box-shadow: none;
position: static;
left: auto;
right: auto;
opacity: 1;
-webkit-transform: none;
transform: none;

}

.datepicker–content {

box-sizing: content-box;
padding: 4px;

}

.datepicker–pointer {

position: absolute;
background: #fff;
border-top: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
width: 10px;
height: 10px;
z-index: -1;

}

.datepicker–nav-action:hover, .datepicker–nav-title:hover {

background: #f0f0f0;

}

.-top-center- .datepicker–pointer, .-top-left- .datepicker–pointer, .-top-right- .datepicker–pointer {

top: calc(100% - 4px);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);

}

.-right-bottom- .datepicker–pointer, .-right-center- .datepicker–pointer, .-right-top- .datepicker–pointer {

right: calc(100% - 4px);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);

}

.-bottom-center- .datepicker–pointer, .-bottom-left- .datepicker–pointer, .-bottom-right- .datepicker–pointer {

bottom: calc(100% - 4px);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);

}

.-left-bottom- .datepicker–pointer, .-left-center- .datepicker–pointer, .-left-top- .datepicker–pointer {

left: calc(100% - 4px);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

}

.-bottom-left- .datepicker–pointer, .-top-left- .datepicker–pointer {

left: 10px;

}

.-bottom-right- .datepicker–pointer, .-top-right- .datepicker–pointer {

right: 10px;

}

.-bottom-center- .datepicker–pointer, .-top-center- .datepicker–pointer {

left: calc(50% - 10px / 2);

}

.-left-top- .datepicker–pointer, .-right-top- .datepicker–pointer {

top: 10px;

}

.-left-bottom- .datepicker–pointer, .-right-bottom- .datepicker–pointer {

bottom: 10px;

}

.-left-center- .datepicker–pointer, .-right-center- .datepicker–pointer {

top: calc(50% - 10px / 2);

}

.datepicker–body.active {

display: block;

}

.datepicker–nav {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #efefef;
min-height: 32px;
padding: 4px;

}

.-only-timepicker- .datepicker–nav {

display: none;

}

.datepicker–nav-action, .datepicker–nav-title {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

}

.datepicker–nav-action {

width: 32px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.-disabled- {
  visibility: hidden;
}
svg {
  width: 32px;
  height: 32px;
}
path {
  fill: none;
  stroke: #9c9c9c;
  stroke-width: 2px;
}

}

.datepicker–nav-title {

border-radius: 4px;
padding: 0 8px;

}

.datepicker–buttons, .datepicker–time {

border-top: 1px solid #efefef;
padding: 4px;

}

.datepicker–nav-title {

i {
  font-style: normal;
  color: #9c9c9c;
  margin-left: 5px;
}
&.-disabled- {
  cursor: default;
  background: 0 0;
}

}

.datepicker–buttons {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;

}

.datepicker–button {

color: #4EB5E6;
cursor: pointer;
border-radius: 4px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 32px;
&:hover {
  color: #4a4a4a;
  background: #f0f0f0;
}

}

.datepicker–time {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
&.-am-pm- .datepicker--time-sliders {
  -webkit-flex: 0 1 138px;
  -ms-flex: 0 1 138px;
  flex: 0 1 138px;
  max-width: 138px;
}

}

.-only-timepicker- .datepicker–time {

border-top: none;

}

.datepicker–time-sliders {

-webkit-flex: 0 1 153px;
-ms-flex: 0 1 153px;
flex: 0 1 153px;
margin-right: 10px;
max-width: 153px;

}

.datepicker–time-label {

display: none;
font-size: 12px;

}

.datepicker–time-current {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 14px;
text-align: center;
margin: 0 0 0 10px;

}

.datepicker–time-current-colon {

margin: 0 2px 3px;
line-height: 1;

}

.datepicker–time-current-hours, .datepicker–time-current-minutes {

line-height: 1;
font-size: 19px;
font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
position: relative;
z-index: 1;

}

.datepicker–time-current-hours:after, .datepicker–time-current-minutes:after {

content: '';
background: #f0f0f0;
border-radius: 4px;
position: absolute;
left: -2px;
top: -3px;
right: -2px;
bottom: -2px;
z-index: -1;
opacity: 0;

}

.datepicker–time-current-hours.-focus-:after, .datepicker–time-current-minutes.-focus-:after {

opacity: 1;

}

.datepicker–time-current-ampm {

text-transform: uppercase;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
color: #9c9c9c;
margin-left: 6px;
font-size: 11px;
margin-bottom: 1px;

}

.datepicker–time-row {

display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 11px;
height: 17px;
background: linear-gradient(to right, #dedede, #dedede) left (50% / 100%) 1px no-repeat;
&:first-child {
  margin-bottom: 4px;
}
input[type=range] {
  background: 0 0;
  cursor: pointer;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  &::-ms-tooltip {
    display: none;
  }
  &:hover {
    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
      border-color: #b8b8b8;
    }
  }
  &:focus {
    outline: 0;
    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
      background: #5cc4ef;
      border-color: #5cc4ef;
    }
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid #dedede;
    background: #fff;
    cursor: pointer;
    transition: background .2s;
    margin-top: -6px;
  }
  &::-moz-range-thumb, &::-ms-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid #dedede;
    background: #fff;
    cursor: pointer;
    transition: background .2s;
  }
  &::-webkit-slider-runnable-track, &::-moz-range-track, &::-ms-track {
    border: none;
    height: 1px;
    cursor: pointer;
    color: transparent;
    background: 0 0;
  }
  &::-ms-fill-lower, &::-ms-fill-upper {
    background: 0 0;
  }
}
span {
  padding: 0 12px;
}

}

.datepicker–time-icon {

color: #9c9c9c;
border: 1px solid;
border-radius: 50%;
font-size: 16px;
position: relative;
margin: 0 5px -1px 0;
width: 1em;
height: 1em;
&:after, &:before {
  content: '';
  background: currentColor;
  position: absolute;
}
&:after {
  height: .4em;
  width: 1px;
  left: calc(50% - 1px);
  top: calc(50% + 1px);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
&:before {
  width: .4em;
  height: 1px;
  top: calc(50% + 1px);
  left: calc(50% - 1px);
}

}

.datepicker–cell-day.-other-month-, .datepicker–cell-year.-other-decade- {

color: #dedede;

}

.datepicker–cell-day.-other-month-:hover, .datepicker–cell-year.-other-decade-:hover {

color: #c5c5c5;

}

.-disabled-.-focus- {

&.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

}

.-selected- {

&.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}
&.-focus- {
  &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
    background: #8ad5f4;
  }
}

}

.-in-range- {

&.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}
&.-focus- {
  &.datepicker--cell-day.-other-month-, &.datepicker--cell-year.-other-decade- {
    background-color: rgba(92, 196, 239, 0.2);
  }
}

}

.datepicker–cell-day.-other-month-:empty, .datepicker–cell-year.-other-decade-:empty {

background: 0 0;
border: none;

}