.as-date-time-input {
    border: 1px solid #ddd;
    border-radius: 3px;
    height: calc(2em + 2px);
    --format-width: 138px;
    width: calc(var(--format-width) + 60px + 2px);
    min-width: calc(var(--format-width) + 60px + 2px);
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: white;
    overflow: hidden;
}

.as-date-time-input.as-background-none {
    background-color: transparent;
}
.as-date-time-input.as-background-none.as-read-only.as-value-null input{
    color: transparent;
}

.as-date-time-input[data-size].as-read-only {
    width:  calc(var(--format-width) + var(--as-input-horizontal-padding) * 2 + 2px);
    min-width:  calc(var(--format-width) + var(--as-input-horizontal-padding) * 2 + 2px);
}

.as-date-time-input[data-size] {
    --base-size: 30px;
    height: var(--base-size);
    border-radius: 3px;
    width: calc(var(--format-width) + var(--base-size) * 2 + var(--as-input-horizontal-padding) * 1.6 + 2px);
    min-width: calc(var(--format-width) + var(--base-size) * 2 + var(--as-input-horizontal-padding) * 1.6 + 2px);
}

.as-date-time-input[data-size="large"] {
    --base-size: var(--large-size);
    border-radius: var(--large-radius);
}

.as-date-time-input[data-size="regular"] {
    --base-size: var(--default-size);
    border-radius: var(--default-radius);
}


.as-date-time-input[data-size="small"] {
    --base-size: var(--small-size);
    border-radius: var(--small-radius);
}

.as-date-time-input[data-size] input {
    width: calc(100% - var(--base-size));
}

.as-date-time-input[data-size].as-read-only input {
    width: 100%;
}

.as-date-time-input[data-size] .as-date-time-input-icon-btn {
    width: calc(var(--base-size));
}

.as-date-time-input[data-size] .as-time-input-clear-btn {
    right: calc(var(--base-size) + 1px);
}

.as-date-time-input.as-disabled {
    color: var(--as-disabled-text-color);
    pointer-events: none;
}


.as-date-time-input input {
    font-size: inherit;
    outline: none;
    width: calc(100% - 2em - 1px);
    height: 100%;
    border: none;
    display: block;
    padding: 0 0 0 var(--as-input-horizontal-padding);
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-user-drag: none;
    color: inherit;
    box-sizing: border-box;
    background-color: transparent;
}

.as-date-time-input.as-disabled input {
    background-color: var(--as-disabled-background-color);
}

.as-date-time-input-icon-btn {
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #ddd;
    position: absolute;
    right: 0;
    width: calc(2em + 1px);
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    background-color: rgba(169, 169, 169, 0.1);
    cursor: pointer;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    padding: 0;
}

.as-date-time-input-icon-btn > span {
    font-size: calc(16em / 14);
}


.as-date-time-input-icon-btn:hover {
    background-color: rgba(169, 169, 169, 0.25);
}

.as-date-time-input-icon-btn:active {
    background-color: rgba(169, 169, 169, 0.5);
}


.as-date-time-input-icon-btn.as-disabled {
    color: rgb(102, 102, 102);
    pointer-events: none;
}

.as-date-time-input-follower {
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #ddd;
    padding: 5px;
}

.as-date-time-input-date-picker {
    border: none;
    box-shadow: none;
}

.as-date-time-input-picker-header {
    text-align: right;
    padding-bottom: 5px;
}


.as-date-time-input-picker-btn {
    height: 20px;
    min-width: 25px;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: inherit;
    border: 1px solid rgb(47, 82, 143);
    background-color: rgb(68, 144, 196);
    color: white;
    border-radius: 0;
}

.as-date-time-input-picker-btn:active {
    background-color: rgb(50, 122, 169);
}


.as-chrome-time-picker.as-date-time-input-time-picker {
    height: 11.8em;
    box-sizing: border-box;
}

.as-date-time-input-picker-ctn {
    white-space: nowrap;
}

.as-date-time-input-picker-ctn > div {
    display: inline-block;
    white-space: initial;
    vertical-align: top;
}

.as-date-time-input-follower > div {
    border-color: white;
}

.as-date-time-input:hover .as-time-input-clear-btn {
    visibility: visible;
}

.as-date-time-input.as-must-not-null .as-time-input-clear-btn,
.as-date-time-input.as-read-only .as-time-input-clear-btn {
    display: none;
}


.as-date-time-input.as-read-only .as-date-time-input-icon-btn {
    display: none;
}


.as-date-time-input.as-border-none {
    border: none;
}


.as-date-time-input.as-border-none .as-date-time-input-icon-btn {
    display: none;
}

.as-date-time-input.as-border-none input {
    width: 100%;
    padding-left: 0;
}

.as-date-time-input[data-text].as-read-only.as-border-none input {
    display: none;
}


.as-date-time-input[data-text].as-read-only.as-border-none {
    width: auto;
}

.as-date-time-input[data-text].as-read-only.as-border-none::before {
    content: attr(data-text);
    line-height: 30px;
}


.as-relative-time-text[data-time-text]::after {
    content: attr(data-time-text);
}