:root {
    --app-scrollbar-size: 4px;
    --app-scrollbar-track: rgba(120, 128, 136, 0.06);
    --app-scrollbar-thumb: #a9b0b7;
    --app-scrollbar-thumb-hover: #9199a1;
    --app-scrollbar-thumb-active: #7b848d;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

html,
body {
    margin: 0;
    min-height: 100%;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================
   GLOBAL SEARCH INPUT NORMALIZATION
   ========================================================= */

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* =========================================================
   GLOBAL SCROLLBAR
   ========================================================= */

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--app-scrollbar-thumb) 0%,
        #9ea6ae 100%
    );
    border-radius: 999px;
    border: 0;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--app-scrollbar-thumb-hover) 0%,
        #878f97 100%
    );
    border-radius: 999px;
    border: 0;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        var(--app-scrollbar-thumb-active) 0%,
        #6e7780 100%
    );
    border-radius: 999px;
    border: 0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}