::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: var(--wa-color-brand-70);
}

::-webkit-scrollbar-thumb {
  background: var(--wa-color-brand-50); 
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wa-color-brand-20);
}


/*wa-button[variant="neutral"]{*/
/*    --wa-color-fill-loud: var(--wa-color-brand-70);*/
/*    --wa-color-fill-normal: var(--wa-color-brand-70);*/
/*    --wa-color-fill-quiet: var(---wa-color-brand-90);*/
/*    --wa-color-border-loud: var(--wa-color-brand-70);*/
/*    --wa-color-border-normal: var(--wa-color-brand-border-normal);*/
/*    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);*/
/*    --wa-color-on-loud: var(--wa-color-brand-30);*/
/*    --wa-color-on-normal: var(--wa-color-brand-40);*/
/*    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);*/
/*}*/

wa-button[variant="brand"]{
   --wa-color-fill-loud: var(--wa-color-brand-40);
   --wa-color-fill-normal: var(--wa-color-brand-50);
    --wa-color-fill-quiet: var(---wa-color-brand-90);
    --wa-color-border-loud: var(--wa-color-brand-70);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-90);
    --wa-color-on-normal: var(--wa-color-brand-40);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
}

.page-container{
    background-color:var(--wa-color-brand-40);
    text-align:center;
    padding-top:1rem;
    padding-bottom:1rem;
}

html.dark-mode .page-container{
    background-color:color-mix(in oklab, var(--wa-color-brand-10), #000 45%);
}

.page-contents{
    background-color:var(--wa-color-brand-50);
    padding:1rem;
    color:#fff;
    border-radius:1rem;
    margin-bottom:1rem;
}

html.dark-mode .page-contents{
    background-color:var(--wa-color-brand-10);
    padding:1rem;
    color:#fff;
    border-radius:1rem;
    margin-bottom:1rem;
}

.header{
    background: var(--wa-color-brand-40);
}

html.dark-mode .header{
    background: var(--wa-color-brand-20);
}

html.dark-mode .marquee{
    background:var(--wa-color-brand-10);
}

.navbar{
    background-color: var(--wa-color-brand-50);
}

html.dark-mode .navbar{
    background-color: var(--wa-color-brand-10);
}

.text-body{
    background-color: var(--wa-color-brand-50);
    border:none;
    color:#fff!important;
}

.toast{
    background-color: #fff;
    border:none;
    box-shadow:3px 3px 15px rgba(0,0,0,0.4);
    width:500px;
    max-width:100%;
}

html.dark-mode .toast{
    background-color:#000;
    color:#fff;
}

.toast-header{
    border:none;
    border-radius:1rem;
}