@media screen and (min-width: 768px) {
    .s3tbmp_topbar
    {
        align-items: center;
        display: var(--display-d);
        overflow: hidden;
        position: relative;

        transition: height 0.3s linear;

        background-color: var(--bgc-d);
        height: var(--height-d);

        &>div.s3tbmp_content {
            position: absolute;
            display: flex;
            gap: .375em;
            align-items: center;

            color: var(--color-d);
            font-size: var(--font-size-d);
        }

        & *:not(.s3tbmp_x_container) {
            display: block;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        & .s3tbmp_link {
            display: var(--display-d);
        }

        & .s3tbmp_text {
            display: var(--display-d);
        }

        & .s3tbmp_button {
            background-color: var(--bgc-d);
            border-radius: var(--border-radius-d);
            color: var(--color-d);
            display: var(--display-d);
            height: var(--height-d);
            font-size: var(--font-size-d);

            align-items: center;
            justify-content: center;
            padding-left: .25em;
            padding-right: .25em;
            transition: background-color 0.3s linear;

            &:hover {
                background-color: var(--hover-color-d)!important;
                text-decoration: none!important;
            }
        }

        & .s3tbmp_x_container {
            background-color: var(--bgc-d);
            color: var(--color-d);
            display: var(--display-d);
            height: var(--height-d);

            cursor: pointer;
            align-items: center;
            line-height: 1;
            position: absolute;
            padding-left: .5rem;
            padding-right: .5rem;
            right: 0;
        }

        & a {
            color: inherit;
            font-size: inherit;

            &:hover {
                text-decoration: underline;
            }
        }

    }
}

@media screen and (max-width: 767px) {
    .s3tbmp_topbar
    {
        align-items: center;
        display: var(--display-m);
        overflow: hidden;
        position: relative;

        transition: height 0.3s linear;

        background-color: var(--bgc-m);
        height: var(--height-m);

        &>div.s3tbmp_content {
            position: absolute;
            display: flex;
            gap: .375em;
            align-items: center;

            color: var(--color-m);
            font-size: var(--font-size-m);
        }

        & *:not(.s3tbmp_x_container) {
            display: block;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        & .s3tbmp_link {
            display: var(--display-m);
        }

        & .s3tbmp_text {
            display: var(--display-m);
        }

        & .s3tbmp_button {
            background-color: var(--bgc-m);
            border-radius: var(--border-radius-m);
            color: var(--color-m);
            display: var(--display-m);
            height: var(--height-m);
            font-size: var(--font-size-m);

            align-items: center;
            justify-content: center;
            padding-left: .25em;
            padding-right: .25em;
            transition: background-color 0.3s linear;

            &:hover {
                background-color: var(--hover-color-m)!important;
                text-decoration: none!important;
            }
        }

        & .s3tbmp_x_container {
            background-color: var(--bgc-m);
            color: var(--color-m);
            display: var(--display-m);
            height: var(--height-m);

            cursor: pointer;
            align-items: center;
            line-height: 1;
            position: absolute;
            padding-left: .5rem;
            padding-right: .5rem;
            right: 0;
        }

        & a {
            color: inherit;
            font-size: inherit;

            &:hover {
                text-decoration: underline;
            }
        }

    }
}