$vdpColor: #7485c2 !default;

@keyframes vdpSlideFromLeft {
    from { opacity: 0; transform: translate3d(-0.5em,0,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes vdpSlideFromRight {
    from { opacity: 0; transform: translate3d(0.5em,0,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes vdpToggleCalendar {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes vdpFadeCalendar {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vdp-toggle-calendar-enter-active.vdpPositionReady {

    transform-origin: top left;
    animation: vdpToggleCalendar .2s;

}

.vdp-toggle-calendar-leave-active {

    animation: vdpToggleCalendar .15s reverse;

}

.vdp-toggle-calendar-enter-active.vdpPositionFixed {

    animation: vdpFadeCalendar .3s;

}

.vdp-toggle-calendar-leave-active.vdpPositionFixed {

    animation: vdpFadeCalendar .3s reverse;

}

.vdpComponent {

    position: relative; display: inline-block; font-size: 10px;
    color: #303030;
    /*font-family: Helvetica, Arial, sans-serif;*/

}

.vdpComponent.vdpWithInput > input {

    padding-right: 30px;

}

.vdpClearInput {

    font-size: 1em; position: absolute; top: 0; bottom: 0; right: 0;
    width: 3em;

}

.vdpClearInput:before {

    content: '×'; width: 1.4em; height: 1.4em; line-height: 1.1em; box-sizing: border-box;
    position: absolute; left: 50%; top: 50%; margin: -0.7em 0 0 -0.7em;
    color: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.15); border-radius: 50%;
    background-color: #fff;

}

.vdpClearInput:hover:before {
    box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.15);
}

.vdpOuterWrap.vdpFloating {

    position: absolute; padding: 0.5em 0; z-index: 220;

}

.vdpOuterWrap.vdpPositionFixed {

    position: fixed; left: 0; top: 0; bottom: 0; right: 0;
    padding: 2em;  display: flex; justify-content: center; align-items: center;
    background-color: rgba(0,0,0,0.3);

}

.vdpFloating .vdpInnerWrap {

    max-width: 30em;

}

.vdpPositionFixed .vdpInnerWrap {

    max-width: 30em; margin: 0 auto;
    border: 0; animation: vdpToggleCalendar 0.3s;

}

.vdpFloating.vdpPositionTop { top: 100%; }
.vdpFloating.vdpPositionBottom { bottom: 100%; }
.vdpFloating.vdpPositionLeft { left: 0; }
.vdpFloating.vdpPositionRight { right: 0; }

.vdpPositionTop.vdpPositionLeft { transform-origin: top left; }
.vdpPositionTop.vdpPositionRight { transform-origin: top right; }
.vdpPositionBottom.vdpPositionLeft { transform-origin: bottom left; }
.vdpPositionBottom.vdpPositionRight { transform-origin: bottom right; }

.vdpInnerWrap {

    overflow: hidden; min-width: 28em; box-sizing: border-box; padding: 1em;
    background: #fff; box-shadow: 0 0.2em 1.5em rgba(0,0,0,0.06);
    border-radius: 0.5em; border: 1px solid rgba(0,0,0,0.15);

}

.vdpHeader {

    position: relative; padding: 0 1em 2.5em; margin: -1em -1em -2.5em;
    text-align: center; background: #f5f5f5;

}

.vdpClearInput,
.vdpArrow,
.vdpPeriodControl > button,
.vdp12HourToggleBtn {

     margin:0; padding: 0; border: 0; cursor: pointer; background: none;

}

.vdpArrow::-moz-focus-inner,
.vdpClearInput::-moz-focus-inner,
.vdpPeriodControl::-moz-focus-inner,
.vdp12HourToggleBtn::-moz-focus-inner {

    padding: 0; border: 0;

}

.vdpArrow {

    font-size: 1em; width: 5em; text-indent: -999em; overflow: hidden;
    position: absolute; top: 0; bottom: 2.5em; text-align: left;

}

.vdpArrow:before {

    content: ''; width: 2.2em; height: 2.2em;
    position: absolute; left: 50%; top: 50%; margin: -1.1em 0 0 -1.1em;
    border-radius: 100%; transition: background-color 0.2s;

}

.vdpArrow:hover,
.vdpArrow:focus,
.vdpArrow:active {
    outline: 0;
}

.vdpArrow:hover:before,
.vdpArrow:focus:before {

    background-color: rgba(0,0,0,0.03);

}

.vdpArrow:active:before {

    background-color: rgba(0,0,0,0.07);

}

.vdpArrowNext:before {

    margin-left: -1.4em;

}

.vdpArrow:after {

    content: ''; position: absolute; left: 50%; top: 50%;
    margin-top: -0.5em; width: 0; height: 0;
    border: 0.5em solid transparent;

}

.vdpArrowPrev {

    left: -0.3em;

}

.vdpArrowPrev:after {

    margin-left: -0.8em;
    border-right-color: $vdpColor;

}

.vdpArrowNext {

    right: -0.6em;

}

.vdpArrowNext:after {

    margin-left: -0.5em;
    border-left-color: $vdpColor;

}

.vdpPeriodControl {

    display: inline-block; position: relative;

}

.vdpPeriodControl > button {

    font-size: 1.5em; padding: 1em 0.4em; display: inline-block;

}

.vdpPeriodControl > select {

    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    cursor: pointer; opacity: 0; font-size: 1.6em;

}

.vdpTable {

    width: 100%; table-layout: fixed; position: relative; z-index: 5;

}

.vdpNextDirection {

    animation: vdpSlideFromRight 0.5s;

}

.vdpPrevDirection {

    animation: vdpSlideFromLeft 0.5s;

}

.vdpCell, .vdpHeadCell {

    text-align: center; box-sizing: border-box;

}

.vdpCell {

    padding: 0.5em 0;

}

.vdpHeadCell {

    padding: 0.3em 0.5em 1.8em;

}

.vdpHeadCellContent {

    font-size: 1.3em; font-weight: normal;
    color: #848484;

}

.vdpCellContent {

    font-size: 1.4em; display: block; margin: 0 auto;
    width: 1.857em; line-height: 1.857em;
    text-align: center; border-radius: 100%;
    transition: background 0.1s, color 0.1s;

}

.vdpCell.outOfRange {

    color: #c7c7c7;

}

.vdpCell.today {

    color: $vdpColor;

}

.vdpCell.selected .vdpCellContent {

    color: #fff; background: $vdpColor;

}

@media (hover: hover) {

    .vdpCell.selectable:hover .vdpCellContent {

        color: #fff; background: $vdpColor;

    }

}

.vdpCell.selectable {

    cursor: pointer;

}

.vdpCell.disabled {

    opacity: 0.5;

}

.vdpTimeControls {

    padding: 1.2em 2em; position: relative; margin: 1em -1em -1em;
    text-align: center;
    background: #f5f5f5;
    /*border-top: 1px solid rgba(0,0,0,0.15);*/

}

.vdpTimeUnit {

    display: inline-block; position: relative; vertical-align: middle;

}

.vdpTimeUnit > pre,
.vdpTimeUnit > input {

    font-size: 1.7em; line-height: 1.3; padding: 0.1em 0.1em;
    word-wrap: break-word; white-space: pre-wrap;
    resize: none; margin: 0; box-sizing: border-box;
    color: #000; border: 0; border-bottom: 1px solid transparent;
    text-align: center;

}

.vdpTimeUnit > pre {

    visibility: hidden; font-family: inherit;

}

.vdpTimeUnit > input {

    position: absolute; top: 0; left: 0; overflow: hidden;
    height: 100%; width: 100%; outline: none; padding: 0;
    appearance: none; border-radius: 0; background: transparent;

    -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;

    &::selection {
        background-color: rgba($vdpColor, 0.15);
    }

}

.vdpTimeUnit > input:hover,
.vdpTimeUnit > input:focus {

    border-bottom-color: $vdpColor;

}

.vdpTimeUnit > input:disabled {

    border-bottom-color: transparent;

}

.vdpTimeUnit > input::-webkit-inner-spin-button,
.vdpTimeUnit > input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.vdpTimeSeparator, .vdpTimeCaption {

    display: inline-block; vertical-align: middle; font-size: 1.3em;
    color: #848484;

}

.vdpTimeCaption {

    margin-right: 0.5em;

}

.vdp12HourToggleBtn {

    display: inline-block; vertical-align: middle;
    font-size: 1.3em; padding: 0 0.4em;
    color: #303030;

}

.vdp12HourToggleBtn:hover,
.vdp12HourToggleBtn:focus {

    color: $vdpColor; outline: 0;

}

.vdp12HourToggleBtn:disabled {

    color: #303030;

}