html {
        @apply bg-background-default
    }

    .monospaced {
        font-feature-settings: 'tnum';
    }

    .animate-pulse {
        animation: default-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes default-pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: .5;
        }
    }

    .bg-gradient {
        background: linear-gradient(180deg, #FFFA2A 0%, #FF3333 55.5%, #FF3333 100%);
    }

    .bg-light-green {
        background: rgba(20, 181, 55, 0.12);
    }

    .bg-semi-gradient {
        background: linear-gradient(1deg, rgba(198, 0, 0, 0.80) 0.52%, rgba(160, 96, 0, 0.00) 64.44%);
    }

    .shadow-md {
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08));
    }

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-appearance: none
}

::-webkit-scrollbar
{
    all:unset;
}

::-webkit-scrollbar-button
{
    display:block;
    background-color: ButtonFace;
    box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
    height: 3px;
    width: initial;
    background-position: center 5px;
    background-size:9px 7px;
    image-rendering: pixelated;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:hover
{
    box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

::-webkit-scrollbar-button:active
{
    box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement
{
    display:none;
}

::-webkit-scrollbar-button:vertical:decrement
{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment
{
    background-position: center 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-thumb
{
    background-color:ButtonFace;
    box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
    border-left:2px solid rgba(255,255,255,0.3);
    border-right:2px solid rgba(255,255,255,0.3);
}

::-webkit-scrollbar-thumb:hover
{
    box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

::-webkit-scrollbar-thumb:active
{
    box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

::-webkit-scrollbar-track
{
    background-color:ButtonFace;
    box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}

html {
    scroll-behavior: smooth;
}
/* scroll styling for the Mozilla*/
@-moz-document url-prefix() {
    * {
        scrollbar-color: rgba(128, 128, 128, 0.3) #F5F5F5;
        scrollbar-width: thin;
    }
}
body::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}
.user-navigation-menu-button .icon {
    background-color: #FFFFFF;
}

.body-base-modal-open {
    overflow: hidden;
}
/*.body-base-modal-open .element-dependents-on-scroll,.body-base-modal-open {*/
/*    padding-right: 8px;*/
/*}*/

label,
input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible, button:focus {
    outline: none;
}

.thin-scroll::-webkit-scrollbar-thumb {
    border-left: 1px solid rgba(128,128,128,0.3);
    border-right:1px solid rgba(128,128,128,0.3);
}

.thin-scroll::-webkit-scrollbar-button {
    background-color: transparent;
    width: 0;
    height: 0;
}
.thin-scroll::-webkit-scrollbar {
    width: 3px !important;
    background-color: #F5F5F5 !important;
}