.sub-menu {
    clear:left;
    float:left;
    width:100%;
    min-width:22rem;
    height: var(--sub-menu-height);
    background-color: var(--sub-menu-bg-color);
    border-bottom: var(--default-border);
    box-shadow: var(--sub-menu-shadow);
    color: var(--sub-menu-text-color);
    overflow:hidden;
    padding:0.3em 0.5em 0.6em 0.5em;
    font-family: arial;
    line-height:1.5rem;
    transition: height 0.3s, opacity 0.3s;
    /*display: flex;
    align-items: center;*/
}
.sub-menu-large {
    height: 8em;
    transition: height 0.3s;
}
.sub-menu-hidden {
    height: 0em;
    margin:0;
    opacity: 0;
    transition: height 0.3s, opacity 0.3s;
}
.sub-menu a {
    text-decoration: none;
}
.sub-menu select {
    opacity:0.8;
    float:right;
    margin:0.4em 1em 0 0;
    padding:0 0.2em 0 0.6em;
    border:0;
    height:2.5em;
    color:var(--top-menu-text-color);
    background-color:var(--top-menu-bg-color);
}
.sub-menu input[type="checkbox"] {
    clear:left;
    float:left;
    margin:0.35em 0.35em 0 0.95em;
    transform : scale(0.9);
}
.sub-menu .date-range-container {
    float:left;
}
.sub-menu .date-range {
    float: left;
    position:relative;
}
.sub-menu .compare-date-range {
    float:left;
    position:relative;
    font-size:0.7rem;
}
.sub-menu .up-down-toggle {
    margin:0.3em 0.6em 0 0;
    color:var(--sub-menu-active-text-color);
    background-color:transparent; /*var(--top-menu-bg-color);*/
}
.sub-menu #from, .sub-menu #to, .sub-menu #compare-from, .sub-menu #compare-to {
    box-sizing: content-box;
    font-weight: normal;
    color: var(--date-range-color);
    border:0;
    background-color: transparent;
}
.sub-menu #from, .sub-menu #to {
    font-size: 1.0rem;
    width:5.4rem;
}
.sub-menu #compare-from, .sub-menu #compare-to {
    font-size: 0.72rem;
    width:4.0rem;
    color: var(--compare-date-range-color);
    margin-bottom: -0.6em;
}
.sub-menu #from, .sub-menu #compare-from {
    text-align:right;
}
.sub-menu input:nth-child(2) {
}
/*@media (max-width: 700px) {
    .sub-menu input:nth-child(1) {
        font-size: 0.8rem;
        font-weight: bold;
        float: left;
    }
    .sub-menu input:nth-child(2) {
        font-size: 0.8rem;
        font-weight: bold;
        clear:left;
        float: left;
    }
}*/