.specification-input {
    width: calc(50% - 10px);
    position: relative;
    border: none !important;
}

    .specification-input.wide {
        width: 100%;
    }

    .specification-input > label,
    .specification-input > span.unit {
        position: absolute;
        top: 5px;
        color: var(--colour-grey);
        pointer-events: none;
    }

    .specification-input > label {
        left: 12px;
        z-index: 1;
    }

    .specification-input > span.unit {
        right: 7px;
        font-style: italic;
    }

    .specification-input > input,
    .specification-input > .e-input-group {
        width: 100%;
        height: 31px;
        padding-right: 10px;
        text-align: right;
        /*background-color: var(--colour-primary-light) !important;*/
        border: 1px solid lightgray !important;
        border-radius: 5px;
        font-weight: bold;
        margin: 0 !important;
        color: #495057;
    }

        .specification-input > .e-input-group.e-input-focus,
        .specification-input > .e-input-group:not(.e-disabled):hover,
        .specification-input > input:focus-visible,
        .specification-input > input:not(:disabled):hover {
            border-color: var(--colour-primary) !important;
            outline: none;
            box-shadow: none !important;
        }

        .specification-input > .e-input-group.e-disabled,
        .specification-input > input:disabled {
            background-color: #f7f7f7 !important;
            outline: none;
            box-shadow: none !important;
            cursor: not-allowed;
        }

            .specification-input > .e-input-group.e-disabled label,
            .specification-input > input:disabled label {
                color: var(--colour-grey) !important;
                -webkit-text-fill-color: var(--colour-grey) !important;
            }

            .specification-input > .e-input-group.e-disabled span {
                background-color: unset !important;
            }

        .specification-input > .e-input-group span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .specification-input.specification-input-numeric {
    }

        .specification-input.specification-input-numeric > input,
        .specification-input.specification-input-numeric > .e-input-group {
            text-align-last: end;
            padding-right: 50px;
        }

        .specification-input.specification-input-numeric input {
            height: 100% !important;
        }

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

    .specification-input.specification-input-toggle > .e-input-group {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

        .specification-input.specification-input-toggle > .e-input-group:active {
            border-color: lightgray !important;
            box-shadow: none !important;
        }

    .specification-input.specification-input-toggle .e-switch-handle {
        background-color: white !important;
    }

    .specification-input.specification-input-toggle .e-switch-wrapper .e-switch-inner {
        background-color: #adb5bd !important;
        border-color: #adb5bd !important;
    }

        .specification-input.specification-input-toggle .e-switch-wrapper .e-switch-inner.e-switch-active,
        .specification-input.specification-input-toggle .e-switch-wrapper .e-switch-on,
        .e-css.e-switch-wrapper .e-switch-on {
            background-color: var(--colour-primary) !important;
            border-color: var(--colour-primary) !important;
        }

    .specification-input.specification-input-dropdown {
        width: calc(50% - 10px);
    }

.specification-input-dropdown input {
    color: #495057 !important;
    background: none !important;
    padding-top: 6px !important;
    padding-left: 12px !important;
    height: auto !important;
}

.specification-input-dropdown .e-ddl.e-input-group input.e-input::placeholder {
    color: gray;
    font-weight: normal;
    font-size: 1rem;
}

.specification-input-dropdown .e-input-value {
    color: #495057 !important;
    text-align: left;
    padding-top: 6px;
    padding-left: 12px;
}

.specification-input-dropdown .e-float-text {
    text-align: left;
}

.specification-input-dropdown .e-float-input input:focus ~ label.e-float-text, .specification-input-dropdown .e-float-input input:valid ~ label.e-float-text, .specification-input-dropdown .e-float-input input ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input input[readonly] ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input input[disabled] ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input input label.e-float-text.e-label-top, .specification-input-dropdown .e-float-input.e-control-wrapper input:focus ~ label.e-float-text, .specification-input-dropdown .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, .specification-input-dropdown .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text, .specification-input-dropdown .e-float-input.e-control-wrapper input label.e-float-text.e-label-top, .specification-input-dropdown .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text, .specification-input-dropdown .e-float-input.e-input-focus input ~ label.e-float-text {
    font-size: 11px;
    transform: translate3d(10px, -23px, 0) scale(1);
    color: gray;
    background-color: white;
    width: max-content !important;
    padding: 0 2px !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on,
.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on, .e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    border-color: var(--colour-primary) !important;
    background-color: var(--colour-primary) !important;
}

.specification-input > .e-listbox-container {
    margin-top: 15px;
}

.specification-input > .warning-box {
    background-color: #FFFFEA;
    font-size: 0.8rem;
    display: block;
    margin-top: 3px;
    padding: 5px;
    border: 1px solid #E9C072;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .specification-input > .warning-box i {
        color: #E9C072;
        margin: 5px;
        font-size: x-large;
    }

/* New Styling */

.input-dropdown {
    position: relative;
}

    .input-dropdown label {
        position: absolute;
        top: -9px;
        left: 10px;
        padding: 0 2px;
        z-index: 10;
        font-size: 11px;
        background-color: white;
    }

    .input-dropdown > span {
        height: 100%
    }

    .input-dropdown input,
    .input-dropdown .e-input-value {
        display: flex;
        align-items: center;
        padding: 0 12px !important;
        font-weight: bold;
    }

    .input-dropdown .e-ddl-icon {
        min-height: auto !important;
    }

.e-ddl.e-popup.e-popup-open {
    max-height: none !important;
}

.e-ddl.e-popup .e-ddl-footer > button {
    width: 100%;
}

.skeleton-input {
    width: calc(50% - 10px) !important;
    height: 31px;
}

.skeleton-text {
    margin-top: 3px;
    height: 15px;
}

span.e-input-value {
    display: flex;
    align-items: center;
    padding-left: 9px;
}