*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Commissioner, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*::selection {
  background-color: var(--clr-primary);
  color: var(--clr-txt-white);
}

.tippy-box {
  background-color: var(--clr-primary);
  color: var(--clr-txt-white);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--clr-primary);
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--clr-primary);
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--clr-primary);
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--clr-primary);
}

.tippy-box[data-theme~="monochrome"] {
  background-color: var(--clr-bg-white);
  color: var(--clr-txt-primary);
}
.tippy-box[data-theme~="monochrome"][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--clr-bg-white);
}
.tippy-box[data-theme~="monochrome"][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--clr-bg-white);
}
.tippy-box[data-theme~="monochrome"][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--clr-bg-white);
}
.tippy-box[data-theme~="monochrome"][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--clr-bg-white);
}

hr {
  outline: none;
  border: none;
  width: 100%;
  height: 1px;
  background-color: var(--clr-grey-dark);
  margin: 10px 0;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--clr-bg-grey);
  color: var(--clr-txt-primary);
}

code {
  font-family: monospace;
  padding: 2px;
  background-color: var(--clr-bg-grey);
}

a {
  text-decoration: none;
  color: var(--clr-txt-primary);
}

.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}

.ta-c {
  text-align: center;
}

.pos-rel {
  position: relative;
}
.pos-abs {
  position: absolute;
}

.fs-12 {
  font-size: 12px;
}
.fs-15 {
  font-size: 15px;
}
.fs-18 {
  font-size: 18px;
}
.fs-20 {
  font-size: 20px;
}
.fs-25 {
  font-size: 25px;
}
.fs-30 {
  font-size: 30px;
}

.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-jc-c {
  justify-content: center;
}
.flex-jc-fe {
  justify-content: flex-end;
}
.flex-jc-sb {
  justify-content: space-between;
}
.flex-ai-c {
  align-items: center;
}
.flex-dir-col {
  flex-direction: column;
}

.gap-5 {
  gap: 5px;
}
.gap-10 {
  gap: 10px;
}
.gap-15 {
  gap: 15px;
}
.gap-20 {
  gap: 20px;
}

.gd {
  display: grid;
}
.gd-1c-1fr {
  grid-template-columns: 1fr;
}
.gd-2r-1fr {
  grid-template-rows: 1fr 1fr;
}

.tt-up {
  text-transform: uppercase;
}

.of-h {
  overflow: hidden;
}
.of-auto {
  overflow: auto;
}
.ofw-bw {
  overflow-wrap: break-word;
}
.to-e {
  text-overflow: ellipsis;
}
.tw-nw {
  text-wrap: nowrap;
}

.input-box {
  position: relative;
}
.input-box input {
  position: relative;
  width: 100%;
  padding: 10px 0;
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc;
  transition: border-color 0.2s;
  background: none;
  padding-right: 80px;
}
.input-box input:disabled {
  cursor: not-allowed;
}
.input-box > span:nth-child(2) {
  position: absolute;
  left: 0;
  user-select: none;
  pointer-events: none;
  transition: transform 0.2s, font-size 0.2s, color 0.2s;
  font-weight: 600;
  color: var(--clr-txt-grey);
  padding: 10px 0;
}
.input-box input:not(:disabled):focus,
.input-box input:not(:disabled):not(:placeholder-shown) {
  border-bottom-color: var(--clr-primary);
}

.input-box input:focus ~ span:nth-child(2),
.input-box input:not(:placeholder-shown) ~ span:nth-child(2) {
  transform: translateY(-20px);
  font-size: 0.7rem;
}

.input-box input:not(:disabled):focus ~ span:nth-child(2),
.input-box input:not(:disabled):not(:placeholder-shown) ~ span:nth-child(2) {
  color: var(--clr-primary);
}

.checkbox > input {
    display: none;
}
.checkbox > label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.checkbox > label > svg {
  border-radius: 5px;
  padding: 3px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--clr-grey);
  transition: border-color 0.2s, color 0.2s;
  color: transparent;
}
.checkbox:has(input[type="radio"]) > label > svg {
  border-radius: 50%;
}
.checkbox > input:not(:disabled):checked ~ label > svg {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.checkbox > input:disabled:checked ~ label > svg {
  color: var(--clr-grey);
}
.checkbox > input:disabled ~ label {
  cursor: not-allowed;
}
.checkbox > label > i {
  font-size: 0.8rem;
  color: var(--clr-grey-dark);
}

:where(button) {
  padding: 10px;
  background-color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
  color: var(--clr-txt-white);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
:where(button:not(:disabled):hover) {
  background-color: var(--clr-blue);
  border-color: var(--clr-blue);
}
:where(button:not(:disabled):active) {
  background-color: var(--clr-blue-dark);
  border-color: var(--clr-blue-dark);
}
:where(button:disabled) {
  cursor: not-allowed;
  background-color: transparent;
  border-color: var(--clr-grey);
  color: var(--clr-grey);
}

button.blue {
  background-color: var(--clr-blue);
  border-color: var(--clr-blue);
}
button.blue:not(:disabled):hover {
  background-color: var(--clr-blue-dark);
  border-color: var(--clr-blue-dark);
}

button.red {
  background-color: var(--clr-red);
  border-color: var(--clr-red);
}
button.red:not(:disabled):hover {
  background-color: var(--clr-red-dark);
  border-color: var(--clr-red-dark);
}

button.grey {
  background-color: var(--clr-grey);
  border-color: var(--clr-grey);
  color: var(--clr-grey-dark);
}
button.grey:not(:disabled):hover {
  background-color: var(--clr-grey2);
  border-color: var(--clr-grey2);
}

button.transparent {
  background-color: transparent;
  border: none;
  color: unset;
}
button.transparent:not(:disabled):hover {
  background-color: var(--clr-grey);
}
button.transparent:not(:disabled):active {
  background-color: var(--clr-grey2);
}
button.transparent:disabled {
  cursor: not-allowed;
  background-color: transparent;
  color: unset;
}

.translate-wrap {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
.translate-wrap {
  color: var(--clr-txt-grey);
}
.translate-wrap > .arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.translate-wrap > .arrow.rotated svg {
  transform: rotate(180deg);
}

.modal-container {
  background-color: var(--clr-overlay);
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.modal-container.show {
  display: flex;
}

.modal-container > .modal {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  background-color: var(--clr-bg-white);
  padding: 10px;
  border-radius: 8px;
  max-height: calc(100% - 25px);
  max-width: 500px;
  width: 500px;
  overflow-y: auto;
}

.modal-container > .modal > .title {
  text-align: center;
  position: relative;
}

.modal-container > .modal > .title button {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 0;
}

.modal-container > .modal > .content {
  word-break: break-word;
}

@media (max-width: 62rem) {
  .modal-container > .modal {
    width: calc(100% - 25px);
  }
}