/* Basic styles for the loading screen */
    #loading-screen {
      position: fixed;
      width: 100dvw;
      height: 100dvh;
      background-color: #ffffff;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 1;
      display: flex;
      font-family: Arial, sans-serif;
      outline: unset !important;
      left: 0;
      top: 0;
    }

    #loading-screen .loading {
      line-height: 1.5;
    }

    #loading-screen>div {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      margin-bottom: auto;
      flex-direction: column;
      font-family: Arial, sans-serif;
      outline: unset !important;
    }

    #loading-screen .loading {
      text-align: center;
      width: min-content;
      font-family: Arial, sans-serif;
      outline: unset !important;
    }

    #loading-screen .loading__text {
      font-weight: 500;
      font-size: 2rem;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      outline: unset !important;
    }

    #loading-screen .loading__bar {
      position: relative;
      height: 5px;
      width: 80%;
      background-color: rgb(0, 217, 255);
      border-radius: 1em;
      overflow: hidden;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      outline: unset !important;
    }

    #loading-screen .loading__bar::after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0, 217, 255, 0.333), rgba(0, 153, 255, 0.891));
      animation: loading-animation 8s infinite;
      border-radius: 1em;
      font-family: Arial, sans-serif;
      outline: unset !important;
    }

    @keyframes loading-animation {
      0% {
        left: -50%;
      }

      100% {
        left: 150%;
      }
    }

    #loading-screen {
      transition: opacity 0.5s ease;
    }

    #loading-screen.fade-out {
      opacity: 0;
      pointer-events: none;

    }

    body {
      margin: 0;
      display: flex;
      place-items: center;
      min-width: 320px;
      min-height: 100dvh;
      justify-content: center;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
    }

    /* Chrome, Edge and Safari */
    *::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }

    *::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: #CCD5D7;
    }

    *::-webkit-scrollbar-track:hover {
      background-color: #B8C0C2;
    }

    *::-webkit-scrollbar-track:active {
      background-color: #B8C0C2;
    }

    *::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: #757575;
    }

    *::-webkit-scrollbar-thumb:hover {
      background-color: #A3A3A3;
    }

    *::-webkit-scrollbar-thumb:active {
      background-color: #A3A3A3;
    }

    /* stylelint-disable */
    html,
    body {
      width: 100%;
      height: 100%;
    }

    input::-ms-clear,
    input::-ms-reveal {
      display: none;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    @-ms-viewport {
      width: device-width;
    }

    body {
      margin: 0;
    }

    [tabindex='-1']:focus {
      outline: none;
    }

    hr {
      box-sizing: content-box;
      height: 0;
      overflow: visible;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 0;
      margin-bottom: 0.5em;
      font-weight: 500;
    }

    p {
      margin-top: 0;
      margin-bottom: 1em;
    }

    abbr[title],
    abbr[data-original-title] {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline;
      text-decoration: underline dotted;
      border-bottom: 0;
      cursor: help;
    }

    address {
      margin-bottom: 1em;
      font-style: normal;
      line-height: inherit;
    }

    input[type='text'],
    input[type='password'],
    input[type='number'],
    textarea {
      -webkit-appearance: none;
      appearance: none;
    }

    ol,
    ul,
    dl {
      margin-top: 0;
      margin-bottom: 1em;
    }

    ol ol,
    ul ul,
    ol ul,
    ul ol {
      margin-bottom: 0;
    }

    dt {
      font-weight: 500;
    }

    dd {
      margin-bottom: 0.5em;
      margin-left: 0;
    }

    blockquote {
      margin: 0 0 1em;
    }

    dfn {
      font-style: italic;
    }

    b,
    strong {
      font-weight: bolder;
    }

    small {
      font-size: 80%;
    }

    sub,
    sup {
      position: relative;
      font-size: 75%;
      line-height: 0;
      vertical-align: baseline;
    }

    sub {
      bottom: -0.25em;
    }

    sup {
      top: -0.5em;
    }

    pre,
    code,
    kbd,
    samp {
      font-size: 1em;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    }

    pre {
      margin-top: 0;
      margin-bottom: 1em;
      overflow: auto;
    }

    figure {
      margin: 0 0 1em;
    }

    img {
      vertical-align: middle;
      border-style: none;
    }

    a,
    area,
    button,
    [role='button'],
    input:not([type='range']),
    label,
    select,
    summary,
    textarea {
      touch-action: manipulation;
    }

    table {
      border-collapse: collapse;
    }

    caption {
      padding-top: 0.75em;
      padding-bottom: 0.3em;
      text-align: left;
      caption-side: bottom;
    }

    input,
    button,
    select,
    optgroup,
    textarea {
      margin: 0;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }

    button,
    input {
      overflow: visible;
    }

    button,
    select {
      text-transform: none;
    }

    button,
    html [type='button'],
    [type='reset'],
    [type='submit'] {
      -webkit-appearance: button;
      appearance: button;
    }

    button::-moz-focus-inner,
    [type='button']::-moz-focus-inner,
    [type='reset']::-moz-focus-inner,
    [type='submit']::-moz-focus-inner {
      padding: 0;
      border-style: none;
    }

    input[type='radio'],
    input[type='checkbox'] {
      box-sizing: border-box;
      padding: 0;
    }

    input[type='date'],
    input[type='time'],
    input[type='datetime-local'],
    input[type='month'] {
      -webkit-appearance: listbox;
      appearance: listbox;
    }

    textarea {
      overflow: auto;
      resize: vertical;
    }

    fieldset {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }

    legend {
      display: block;
      width: 100%;
      max-width: 100%;
      margin-bottom: 0.5em;
      padding: 0;
      color: inherit;
      font-size: 1.5em;
      line-height: inherit;
      white-space: normal;
    }

    progress {
      vertical-align: baseline;
    }

    [type='number']::-webkit-inner-spin-button,
    [type='number']::-webkit-outer-spin-button {
      height: auto;
    }

    [type='search'] {
      outline-offset: -2px;
      -webkit-appearance: none;
      appearance: none;
    }

    [type='search']::-webkit-search-cancel-button,
    [type='search']::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    ::-webkit-file-upload-button {
      font: inherit;
      -webkit-appearance: button;
    }

    output {
      display: inline-block;
    }

    summary {
      display: list-item;
    }

    template {
      display: none;
    }

    [hidden] {
      display: none !important;
    }

    mark {
      padding: 0.2em;
      background-color: #feffe6;
    }

    #loading-screen.dark {
      background-color: #181a1b;
      color: #eaeaea;
    }

    #loading-screen.dark .loading__bar {
      background-color: #222f38;
    }

    #loading-screen.dark .loading__bar::after {
      background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), rgba(0, 153, 255, 0.5));
    }