/* root */
:root {
  --rdn-loading-bg: #e1e1e1;
  --rdn-loading-shining: #f5f5f5;
  --rdn-loading-deg: 80deg;
  --rdn-transition: 250ms;
  --rdn-color-base-dark: #51517f;
  --rdn-color-base-light: #1f5a92;
  --rdn-color-border: #00000011;
  --rdn-color-shadow: #00000011;
}

/* document defaults */
body {
  background: #f2f2ff;
}

body,
html {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

*,
* * {
  transition: var(--rdn-transition);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* basic tags */
main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.maxWidth {
  max-width: 800px;
}

.fit-cover {
  object-fit: cover;
}

.flex {
  display: flex;
}

.fdc {
  flex-direction: column;
}

.f-wrap {
  flex-wrap: wrap;
}

.scrollX {
  overflow-x: auto;
  overflow-y: hidden;
}

.gap5 {
  gap: 5px;
}

.gap10 {
  gap: 10px;
}

.pad10 {
  padding: 10px;
}

.pad20 {
  padding: 20px;
}

.fw {
  width: 100%;
}

.fh {
  height: 100%;
}

.tac {
  text-align: center;
}

.border1 {
  border: 1px solid var(--rdn-color-border);
}

.border1top {
  border-top: 1px var(--rdn-color-base-dark) solid;
}

.mg10b {
  margin-bottom: 10px;
}

.shadow {
  box-shadow: 0px 0px 5px 1px var(--rdn-color-shadow);
}

.bold {
  font-weight: 700;
}

.op50 {
  opacity: 0.5;
}

.font-8 {
  font-size: 0.7rem;
}