.rhfe-header-switcher {
    position: relative;
    width: 100%;
}

.rhfe-header-switcher .rhfe-version {
    display: none;
    width: 100%;
}

.rhfe-header-switcher .rhfe-version.rhfe-active {
    display: block;
}

/*
 * These classes are also used as a no-JS fallback.
 * JS updates the active class on initial load and on viewport resize.
 */
@media (min-width: 1025px) {
    .rhfe-header-switcher .rhfe-desktop {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .rhfe-header-switcher .rhfe-tablet {
        display: block;
    }
}

@media (max-width: 767px) {
    .rhfe-header-switcher .rhfe-mobile {
        display: block;
    }
}