.as-date-input {
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    height: calc(2em + 2px);
    width: 10.5em;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: white;
    overflow: hidden;
}

.as-date-input[data-size] {
    height: var(--base-size);
}


.as-date-input[data-size="v0"] {
    --base-size: 30px;
    border-radius: 3px;
}

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

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

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

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


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


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

.as-date-input[data-size].as-read-only .as-date-input-icon-ctn {
    display:  none;
}

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


.as-date-input[data-format] {
    --format-width: 8.5em;
    width: calc(var(--format-width) + 2em + 1em);
    min-width: calc(var(--format-width) + 2em + 1em);
}


.as-date-input[data-format].as-read-only {
    width: calc(var(--format-width) + 1em);
    min-width: calc(var(--format-width) + 1em);
}

.as-date-input.as-value-null.as-read-only .as-date-input-text
{
    visibility: hidden;
}

.as-date-input-text {
    outline: none;
    width: calc(100% - 29px);
    height: 100%;
    border: none;
    background-color: transparent;
    display: block;
    padding: 0 0 0 var(--as-input-horizontal-padding);
    font: inherit;
    box-sizing: border-box;
    color: currentColor;

}

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


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

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


.as-date-input-icon-ctn > span {
    line-height: 28px;
    font-size: calc(16em / 14);
    display: inline-block;
    padding: 0;
}

.as-date-input.as-read-only .as-date-input-icon-ctn {
    pointer-events: none;
}

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

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

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

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

.as-date-input-clear-btn {
    font-size: inherit;
    position: absolute;
    right: 2em;
    height: 2em;
    padding: 0 0.3em;
    top: calc(50% - 1em);
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    color: #bbb;
    visibility: hidden;
}

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

.as-date-input-clear-btn:hover {
    color: rgb(132, 132, 132)
}

.as-date-input-clear-btn:active {
    color: #525555;
}

.as-date-input-text:focus + .as-date-input-clear-btn,
.as-date-input:hover .as-date-input-clear-btn {
    visibility: visible;
}

.as-date-input.as-background-none {
    background-color: transparent;
}

.as-date-input.as-border-none {
    border: transparent;
    background-color: transparent;
}



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

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

.as-date-n-level-input {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 13.5em;
    height: calc(2em + 2px);
}

.as-date-n-level-input .as-date-input {
    width: 100%;
    height: 100%;
}

.as-date-n-level-input.as-read-only.as-background-none .as-value-null input,
.as-date-n-level-input.as-read-only.as-background-none .as-date-n-level-input-select-level {
    color: transparent;
}

.as-date-n-level-input-select-level {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 2em;
    height: 2em;
    padding: 0;
}


.as-date-n-level-input.as-disabled .as-date-n-level-input-select-level {
    opacity: 0.5;
    pointer-events: none;
}

.as-date-n-level-input.as-read-only .as-date-n-level-input-select-level {
    pointer-events: none;
}


.as-date-n-level-input .as-date-input-text {
    padding-left: calc(var(--as-input-horizontal-padding) + 2em);
    width: calc(100% - 2em - 1px);
    box-sizing: border-box;
}

.as-date-n-level-input.as-read-only .as-date-input-text {
    padding-left: calc(var(--as-input-horizontal-padding));
    width: calc(100% - 1px);
}

.as-date-n-level-input.as-read-only .as-date-n-level-input-select-level{
    display: none;
}


.as-date-n-level-input.as-border-none.as-read-only .as-date-input {
    border: none;
}


.as-date-n-level-input.as-border-none.as-read-only .as-date-input-text {
    width: 100%;
    text-align: left;
    padding-left: 0;
}
.as-date-n-level-input.as-border-none.as-read-only button {
    display: none;
}


.as-multi-date-input {
    display: inline-block;
    vertical-align: middle;
    --base-size: 30px;
    border: 1px solid #dddddd;
    min-height: var(--base-size);
    border-radius: 3px;
    padding-right: var(--base-size);
    position: relative;
    box-sizing: border-box;
}

.as-multi-date-input.as-width-percent {
    
}

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

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

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


.as-multi-date-input .absol-selectbox-item{
    margin: calc((var(--base-size) - 2px - var(--select-box-item-height)) / 2) 2px;
}

.as-multi-date-input.as-has-max-width {
    --max-width: 1024px;
    max-width: var(--max-width);
    overflow: hidden;
    min-width: unset !important;
}

.as-multi-date-input.as-has-max-width  .absol-selectbox-item-text span{
    max-width: calc(var(--max-width) - 85px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/***********/
.as-multi-date-input.as-width-percent .as-multi-date-input-body{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: 100%;
}

.as-multi-date-input.as-width-percent {
    height: calc(var(--content-height) + 2px);
}

.as-multi-date-input-body:not(:empty)::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: calc(var(--base-size) - 2px);
}

.as-multi-date-input-body {
    padding-left: 6px;
    padding-right: 6px;
    max-height: var(--multi-select-menu-max-height);
    overflow: auto;
}

.as-multi-date-input-body::before,
.as-multi-date-input-body::after {
    line-height: calc(var(--base-size) - 2px);
}