html {
    font-size: 100%;
    /*16px default*/
}

html,
body {
    height: 100%;
    scrollbar-gutter: stable;
}

body.non-scrollable {
    height: 100vh;
    height: var(--app-height);
    overflow: hidden;
}

.wrapper {
    min-width: 1840px;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100%;
    height: auto;
}

@media only screen and (max-width: 1839px) {
    .wrapper {
        min-width: 1260px; /*-20px due scrollbar width*/
    }
}


@media only screen and (max-width: 1279px) {
    .wrapper {
        min-width: 768px;
    }
}

@media only screen and (max-width: 766px) {
    .wrapper {
        min-width: 320px;
    }
}

.wrapper-inside {
    width: 1840px;
    margin: 0 auto;
}

@media only screen and (1921px <= width) {
    .wrapper-inside {
        width: 95.833%;
    }
}

@media only screen and (max-width: 1839px) {
    .wrapper-inside {
        width: 94.118%; /*adjusted to compensate scrollbar*/
    }
}

@media only screen and (max-width: 1279px) {
    .wrapper-inside {
        width: 95%;
    }
}

@media only screen and (max-width: 766px) {
    .wrapper-inside {
        width: 91.111%;
    }
}

/* Basics
-----------------------------------------------------------------------------*/
img,
svg {
    vertical-align: top;
}

.clearfix {
    clear: both !important;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

a {
    color: var(--brand-blue-primary);
    text-decoration: none;
    transition: all 300ms;
}
@media (hover: hover) {
    a:hover {
        color: var(--brand-orange-primary);
        transition: all 300ms;
    }
}


/* Header
-----------------------------------------------------------------------------*/
.header {

}


/* Middle
-----------------------------------------------------------------------------*/
.content {
    padding: 0 0 var(--footer-size);
}

/* Footer
-----------------------------------------------------------------------------*/
.footer {
    margin: calc(-1 * var(--footer-size)) auto 0;
    height: var(--footer-size);
    background: var(--bg-secondary);
    overflow: hidden;
}