*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--color-gray);
  color:var(--color-text);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0 0 8px;color:var(--color-navy-dark)}
p{margin:0 0 8px}
a{color:var(--color-navy);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.hidden{display:none !important}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#c7cede;border-radius:8px}

.skeleton{
  background:linear-gradient(90deg,#eceef5 25%,#f6f7fb 37%,#eceef5 63%);
  background-size:400% 100%;
  animation:skeleton-loading 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

.global-loader{
  position:fixed;inset:0;background:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;z-index:var(--z-loader);
}
.spinner{
  width:40px;height:40px;border-radius:50%;
  border:4px solid var(--color-mist);border-top-color:var(--color-gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}