:root {
    --main-bg-light: #4e5050;
    --main-fg: #dddcde;
    --main-input-height: 32px;
    --main-input-br: .2em; /* border radius*/
}

.duration-box {
    float: left;
    overflow: auto;
    height: var(--main-input-height);
}

    .duration-box > .duration {
        border: 1px solid var(--main-bg-light);
        border-right: 0;
        border-left: 0;
        background-color: transparent;
        color: var(--bs-nav-link-color);
    }

        .duration-box > .duration:nth-child(1) {
            border-left: 1px solid var(--main-bg-light);
            border-top-left-radius: var(--main-input-br);
            border-bottom-left-radius: var(--main-input-br);
        }

        .duration-box > .duration:nth-last-child(1) {
            border-right: 1px solid var(--main-bg-light);
            border-top-right-radius: var(--main-input-br);
            border-bottom-right-radius: var(--main-input-br);
        }

.duration {
    float: left;
    display: block;
    overflow: auto;
    height: var(--main-input-height);
    outline: none;
}

.duration-updown {
    overflow: hidden;
    width: 44px;
    height: var(--main-input-height);
    padding: 5px 4px;
}

.duration-updown > i {
    width: 20px;
    height: 20px;
}

.duration-box > input.duration {
    font-size: medium;
}

.duration-box > label.duration {
    font-size: small;
    line-height: 32px;
    width: 24px;
    overflow: hidden;
}

.duration-box > input[type="text"].duration {
    width: 28px;
    padding: 4px 0px 4px 6px;
}

.duration-box > input[type="button"].duration {
    width: 60px;
    cursor: pointer;
}

.duration-item:active {
    outline: none !important;
    background-color: var(--bs-body-bg);
}

.duration-item:hover {
    outline: none !important;
    background-color: var(--bs-body-bg);
}