noscript {
  position: absolute;
  top: 10%;
  font-weight: 600;
}

/* KEYFRAMES */
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}

/* GRID STYLING */
* {
  box-sizing: border-box;
}

body {
  background-color: #FAFAFA;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100vw;
}

body::after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAByCAYAAACbZNnZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjkyQkIxMzQ5RURFMTFFQ0FFOERENEFENkRBRTAzODgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjkyQkIxMzU5RURFMTFFQ0FFOERENEFENkRBRTAzODgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyOTJCQjEzMjlFREUxMUVDQUU4REQ0QUQ2REFFMDM4OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyOTJCQjEzMzlFREUxMUVDQUU4REQ0QUQ2REFFMDM4OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po6o9tgAAAUOSURBVHja7J1biFZVFMeXn3NJGydNfYguKjgNiTlj5kgFFeVLBipmYJT14kPSg/OugkhPIWgikiAUiJbMBFqBRoHmw8iMlyGMgUGRhgQvmdN8o6HO6LgW50Df1FzKy15r7/X/wR8HFPc65/z2OWef2Wefsqam5nNE9DinSGEYn/9Zx+kY5t/8zJnD6SHwTx7hXOa8xjl1r/9ZGac6/7k68IaUj7KRpX+CwUzhtHAWjNCJ/hMFxY0YGOHvbuMYj0oVp5UzK0UBQCAJCoq9rR/HT1+CAvZfMhIc58yGAH4Zx2n7vxJAAOcSQADnEkCAdCU4wamHAH6pyEcH9RAAEtRBAN8StA0nAQRwLgEE8CXBMc48COAX+Q3s0VIJIIBzCSCAbwmegwC+JWiGAL6ZAgF8MwABnFNAXb4pM1rXPs7TnG4Hx+Amp5KzhP6eMu9egEZnHXEMp0tDAJxq7VzyCloNA9wEAggAMApwxJucuQFHGQ9xejlf5Hf9EECZ1bkEIREBvrQmAC4B4ejj3MI9gA3GKgnQDwFsUK7QZj/OAHYYr9DmTQgAAfAcwAgTIIBfAeS9OY21h25AADu9v0qh3esQwAayGlolBPArwESldv+CADaYrNQuzgBGmKrU7jUIYIPHcAmAADgDOBbgCQjgW4BpEMCvAA9zZiq13QsB9HmS86hS21chgD7TFduGAAaoUWy7CAH0qVVs+08IoM8sCOBXAPkVcL1S23L974YAujzDmaQ4BMRzAGWeVWxbBOiHALrMxQjAtwANim33QABdnuLMV2y/GwLo8jxly7BocQUC6PKCcvs4AyjzCgTwK0Ct8vVfuAwB9HjZQA2/QwA9XocAfgWQR79vKNcgX0k/BwH0en+1gd5/CQLosMhADXLwb0CA8Mgr4EsN1HHe8k4qJN77Jxmo4zcIoMNbRuroggDhmWlIgE4IEJ63DdVyEgKE5wMjdbRzTkOAsCwj3enfpRyxvrNSFGCVoVp+gABheYn0H/2WDv8OQoCwfGiolh/J4NKwKQsgs37fM1TPtzHstJQEWGOoFnn4sx8ChKPB0NCP8oN/GwKEY62xevbEsuNSEEA+ubrYUD0/cVohQDg+NlbPrph2XuwCyKl/tqF6fuV8DgHCUGew9++M5eYvBQG2G6vnD8622HZirAJs5LxoUMgeCPDgkWf9643VJDN/N8XYk2ITQF7z3muwLjn4RQjwYKngHCCdL36NxC+cT2K9kYpJgO9Jd5m34VgX8zg6FgGk579qsC75Gvj+mAWw/vl4WdXjEOm/3z8UsupHI0WO5TOArOzdafTgCx+R4Xf+YhfgHcp+p15jtL7POF9RAlgTQD7nIhMp95Duok4jcZyzmhJBU4CBkp/ncXZTNpFyoeH9JWP95ZQQmjeB71L2i5OVnBmR7K/FZPxdv5gEiG38vIKyyR5J4fGrYXeDzDfcm+KGleHYjsr7FNksHwhw/5D5ht+kvIEQYGhkfX95ANWe+obiHuDftFD2feF2DxsLAQazgbIXTK952WBcAjLO5Nf7Dm8b7v0MIE8j5Z3CGo8H37sAWyj7mPRWzz3A2yVAnuVv5nxKhtfwhwD3n8OcHZyvOX047OkLICtzyAod33H2keHVui0IkMJ9wEVOG2Vr8rXmY/nYXtLQmP8wRgSQjxpPMLbDpAfLlzZlle3r+bi8N79uy0sYFyibO9CVD+HOUmTv5A1Bb8l9SghkGf3iHQEGAIllz1cAXCSlAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 72px;
  width: 81px;
  position: absolute;
  right: 1em;
  bottom: 1em;
  opacity: .4;
}

body.dark-theme {
  background-color: #1e1f22;
}

body.dark-theme::after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAByCAYAAACbZNnZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzhENDVEMEI2RTY2MTFFQzk0QUI4NTVBRjA3NkRBQ0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzhENDVEMEM2RTY2MTFFQzk0QUI4NTVBRjA3NkRBQ0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOEQ0NUQwOTZFNjYxMUVDOTRBQjg1NUFGMDc2REFDRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOEQ0NUQwQTZFNjYxMUVDOTRBQjg1NUFGMDc2REFDRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLMiucAAAUNSURBVHja7J1vaFdVGMef/Zz/pq40fSH+S3CORN10trBAxXpTgoolJFa+6YWjF+29BhG9CsE/RCQEBaIpJPgPNAz680LZ/DOkEEYRDQVLzbWthbq5X8/DvdBvtT+a7jzPOc/3A18cKJ7n3vs5995zd+65ZcVi8SoRzeB0Uhgq8j9rOJcH+TeXOIs5HQT+zWOcm5zVnO8f9j8r51TmP1cG3pDRw2xk6Z+gP1M5ZzjPDNGJ7ouC4kYUh/i7PhzjYZnIaeIsSFEAEEiCgmJv68Xx05eggP2XjATnOQshgF/Gc5ofVAII4FwCCOBcAgiQrgQXOLUQwC9j8tFBLQSABDUQwLcEzYNJAAGcSwABfElwjlMHAfwiv4E9WyoBBHAuAQTwLcFSCOBbgi8ggG+mQgDfFCGAcwqoyzflRus6wpnPaXdwDO5yxnLW0T9T5t0L0OisI5Zx2jQEwKnWziWvoNUwwE0ggAAAowBHrOEsCTjKGMfp4nyW3/VDAGUacglCIgJ8bk0AXALC0cO5h3sAG4xSEqAXAthgtEKbvTgD2KFCoc27EAAC4DmAESZBAL8CyHtzGmsP3YEAdnr/RIV2b0MAG8hqaGMhgF8BHldq9y8IYIMnlNrFGcAI05Ta7YYANpiOSwAEwBnAsQAzIYBvAeZAAL8CTODMU2q7CwLoM4szRantPyGAPk8qtg0BDFCl2HYnBNCnWrHtPyCAPgsggF8B5FfAtUpty/W/HQLo8hRnsuIQEM8BlFmk2LYI0AsBdFmCEYBvAeoV2+6AALrM5jyt2H47BNBlGWXLsGhxCwLosly5fZwBlFkJAfwKUK18/RduQgA9Vhio4QYE0ON5COBXAHn0+6JyDfKV9KsQQK/3Vxro/dchgA4vGahBDv4dCBAeeQV8vYE6rlneSYXEe/9kA3VcgQA6vGykjjYIEJ55hgRohQDh2WiolosQIDxbjNTRwvkRAoRlA+lO/y7lO+s7K0UB3jRUy2kIEJbnSP/Rb+nw7xQECMtWQ7V8RQaXhk1ZAJn1+5qheo7HsNNSEuBtQ7XIw5+jECAc9YaGfpQf/D4IEI5txuo5EMuOS0EA+eTqWkP1fMtpggDheN9YPfti2nmxCyCn/oWG6vmF8ykECEONwd7/SSw3fykI8JGxen7nfBjbToxVgPc4zxoUsgMCjDzyrP8dYzXJzN8dMfak2ASQ17wPGaxLDn4nBBhZxnBOks4Xv4biB84Hsd5IxSTAl6S7zNtgbI95HB2LANLzVxmsS74GfjRmAax/Pl5W9fia9N/vHwhZ9aORIsfyGUBW9m41evCFt8jwO3+xC7CJst+pVxmt72POQUoAawLI51xkIuUB0l3UaSjOcxooETQFKJb8XMfZT9lEyhcM7y8Z679CCaF5E7iZsl+cvM6ZG8n+WkvG3/WLSYDYxs+vUjbZIyk8fjXs/yDzDQ+luGHlOLbD8gZFNssHAjw6ZL7hsZQ3EAIMjKzvLw+gWlLfUNwD/JczlH1fuMXDxkKA/rxL2Qum3V42GJeAjJ/y6/1lbxvu/QwgTyPlncIqjwffuwC7KPuY9B7PPcDbJUCe5e/k7CbDa/hDgEfPN5y9nMOcHhz29AWQlTlkhY4TnCNkeLVuCwKkcB/wG6eZsjX5mvKxfGwvaWjMfygTAeSjxpOM7TDpwfKlTVll+3Y+Lu/Kr9vyEsavlM0daMuHcD9TZO/kDUBXyX1KCGQZ/c6/BRgA4tPQT6Lhk7EAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  opacity: .3;
}

.spinner-box {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
}

.spinner-box::after {
  background-size: cover;
  color: rgb(21 46 111);
  content: 'IS HOPKS';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  height: 36px;
  width: 99px;
  position: absolute;
  top: 50%;
  right: 50%;
  text-align: center;
  transform: translate(53%, -54%);
}

.circle-border {
  width: 150px;
  height: 150px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(21 46 111);
  background: linear-gradient(
    0deg,
    rgb(21 46 111 / 0.1) 33%,
    rgb(21 46 111 / 1) 100%
  );
  animation: spin 0.8s linear 0s infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  border-radius: 50%;
}

.dark-theme .circle-core {
  background-color: var(--surface-ground, #121212);
}

.dark-theme .app-init-loading-wrapper {
  background-color: var(--surface-ground, #121212);
}