.digital-clock {
    font-size: 1.0rem;
    background-color: var(--backcolor);
    padding: 1px 2px 0 2px;
    border-radius: 2px;
    /*    box-shadow: 0 3px 3px rgba(190, 190, 190, 0.5);*/
    display: flex;
    margin: 1px 1px 0px 0px;
    border: 1px solid beige;
    align-items: center;
    border: 1px solid grey;
    font-family: Verdana, Geneva, Tahoma, sans-serif, Arial, sans-serif, Courier, monospace;
    font-size: 15px;
    font-weight: normal;
}

    .digital-clock span {
        padding: 0 0.5px 0 0;
    }

    .digital-clock .seconds {
        color: #b3b3b3; /* Grey color for seconds */
    }

    .digital-clock span:not(:last-child)::after {
        content: ":";
        color: black;
    }

.mxtimedisplay {
    font-size: 1.0rem;
    background-color: var(--backcolor, white);
    cursor: var(--cursor, pointer);
    padding: 1px 2px 0 2px;
    border-radius: 2px;
    margin: 1px 1px 0px 0px;
    align-items: center;
    border: 1px solid beige;
    font-family: Verdana, Geneva, Tahoma, sans-serif, Arial, sans-serif, Courier, monospace;
    font-size: 15px;
    font-weight: normal;
    white-space: nowrap;
}

    .mxtimedisplay span {
        padding: 0 0.5px 0 0;
    }