.loading-q {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjUsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwMCA1MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMCA1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30NCjwvc3R5bGU+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMzLjc1NjkiIHkxPSIzNzcuMTMxNSIgeDI9IjQ2Ni41NjcyIiB5Mj0iMTI3LjIzOTMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA1MDIpIj4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRjRFNTM3Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC40NiIgc3R5bGU9InN0b3AtY29sb3I6I0VBQkYyRSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNjMiIHN0eWxlPSJzdG9wLWNvbG9yOiNFOEJCMkQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjc2IiBzdHlsZT0ic3RvcC1jb2xvcjojRTVCMTJEIi8+DQoJPHN0b3AgIG9mZnNldD0iMC44OCIgc3R5bGU9InN0b3AtY29sb3I6I0RGQTEzMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuOTkiIHN0eWxlPSJzdG9wLWNvbG9yOiNENzhBM0QiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRDY4NzQwIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ5Ny45LDIxNy40QzQ4My44LDEwNS40LDM5NC41LDE2LjEsMjgyLjYsMi4xQzExOS4yLTE4LjYtMTguMiwxMTguOSwyLjQsMjgyLjMNCgljMTQuMSwxMTEuOSwxMDMuNCwyMDEuMiwyMTUuMywyMTUuM0MzODEuMSw1MTguMiw1MTguNiwzODAuOCw0OTcuOSwyMTcuNEw0OTcuOSwyMTcuNHogTTM5NC44LDM4MC41Yy0zLDMuNC04LjMsMy41LTExLjQsMC4yDQoJTDM2Ni41LDM2M2MtMzEuOC0zMy4zLTczLjgtNTQuOC0xMTktNjEuNGMtNy4xLTEtMTEuNCw3LjUtNi41LDEyLjdsOTUuMSw5OS42YzMuNiwzLjgsMi41LDEwLjEtMi4zLDEyLjQNCgljLTM0LjQsMTYuNC03NC4zLDIzLTExNi4yLDE2LjJjLTg1LTEzLjgtMTQ5LjUtODEuMi0xNjAuMy0xNjYuNmMtMTYtMTI3LjIsOTAuOS0yMzQsMjE4LjEtMjE4LjFjODYuOCwxMC45LDE1Ni4zLDgwLjEsMTY3LjUsMTY2LjgNCglDNDUwLjcsMjg0LjcsNDMxLDM0MC4yLDM5NC44LDM4MC41TDM5NC44LDM4MC41eiIvPg0KPC9zdmc+DQo=); }

.loading-waves {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjUsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwMCA1MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMCA1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDJ7ZmlsbDp1cmwoI1NWR0lEXzNfKTt9DQo8L3N0eWxlPg0KPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIyMDUuNTkxIiB5MT0iNDc4LjczMjUiIHgyPSItMzEuNDIzOCIgeTI9IjI0MS43NDcyIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgNTAyKSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0Y0RTUzNyIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNCIgc3R5bGU9InN0b3AtY29sb3I6I0VBQkYyRSIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNENjg3NDAiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzksODQuN2MtMTEuNCwxMi41LTIxLDI2LjYtMjkuNiw0MS4xYy0zLjgsNy41LTguNSwxNC42LTExLjYsMjIuNWwtNS4xLDExLjZsLTQuMSwxMg0KCWMtMi44LDctNC41LDE0LjMtNi40LDIxLjZjLTEuMiw0LjctMi4yLDkuNC0zLDE0LjJjLTAuOCw0LjgtMS44LDkuMS0yLjQsMTMuN2MtMy42LDI2LjgtMy4xLDU0LjIsMS4xLDgxLjZjMC41LDMtMy44LDQuMi00LjksMS4zDQoJQzMuMiwyNzcuOC0xLjEsMjQ4LjgsMC4yLDIyMGMxLTE4LjIsMy45LTM2LjUsOS4xLTU0LjJjMS4zLTQuNCwyLjctOC44LDQuMS0xMy4ybDUuMy0xMi44YzMuMi04LjcsOC4xLTE2LjYsMTIuMi0yNC44DQoJQzQ5LjYsODMuMiw3NS43LDU1LjksMTA2LjQsMzZjMjQuNC0xNS40LDUxLjUtMjYuMSw3OS4zLTMxYzMtMC41LDQuMiwzLjgsMS40LDQuOWMtMjUuOCwxMC4yLTQ5LjcsMjMuNC03MS4yLDM5LjcNCglDMTAzLDYwLjYsODkuOCw3MS41LDc5LDg0LjdMNzksODQuN3oiLz4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTMxLjQ3MDQiIHkxPSIyNDEuNTkxIiB4Mj0iMjk0LjMyNDIiIHkyPSI0NzguNzM3MiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDUwMikiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGNEU1MzciLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjM5IiBzdHlsZT0ic3RvcC1jb2xvcjojRUFCRjJFIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q2ODc0MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00MjEuMSw4NC44YzUuOCw2LjIsMTAuOCwxMy4xLDE1LjksMTkuOGMzLDMuNyw1LjEsOCw3LjksMTEuOGMxLjksMi42LDMuNyw1LjMsNS4xLDguMWM0LDgsOSwxNS42LDEyLjMsMjQNCglsNS4xLDExLjZsNC4xLDEyYzMuMiw3LjksNC44LDE2LjMsNy4xLDI0LjVjMC44LDIuOSwxLjQsNS44LDEuOCw4LjdjMC43LDUuNSwyLjEsMTAuOSwyLjgsMTYuM2MzLjYsMjYuOCwzLjEsNTQuMi0xLjIsODEuNg0KCWMtMC41LDMsMy44LDQuMiw0LjksMS4zYzkuOS0yNi41LDE0LjItNTUuNSwxMi44LTg0LjNjLTEuNC0zNi42LTEyLjUtNzIuOS0zMC42LTEwNS4xQzQ1MC42LDgzLjMsNDI0LjQsNTYsMzkzLjcsMzYNCgljLTI0LjQtMTUuNC01MS42LTI2LjItNzkuNS0zMWMtMy0wLjUtNC4yLDMuOC0xLjQsNC45YzI1LjgsMTAuMiw0OS44LDIzLjUsNzEuMywzOS44QzM5Ny4yLDYwLjcsNDEwLjQsNzEuNiw0MjEuMSw4NC44eiIvPg0KPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8zXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI3Ny4wNDc0IiB5MT0iNDkuMzI4MyIgeDI9IjQ5MC43ODk4IiB5Mj0iNDkuMzI4MyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDUwMikiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGNEU1MzciLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjQxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUFCRjJFIi8+DQoJPHN0b3AgIG9mZnNldD0iMC44MiIgc3R5bGU9InN0b3AtY29sb3I6I0Q2ODc0MCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuODgiIHN0eWxlPSJzdG9wLWNvbG9yOiNEMDc0M0UiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjk1IiBzdHlsZT0ic3RvcC1jb2xvcjojQ0M2NDNEIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0NBNUUzQyIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik00MTYuMiw0MTVjLTIwLjgsMTYtNDMsMjktNjYuNCwzOC44Yy0xNi4xLDUuNy0zMi4xLDExLjctNDguOSwxNC4zYy04LjMsMS45LTE2LjcsMi44LTI1LjEsMy45DQoJYy00LjcsMC44LTkuNSwwLjUtMTQuMiwwLjljLTMuMiwwLjMtNi40LDAuNS05LjYsMC4zYy04LjktMC42LTE4LDAtMjYuOS0xLjRsLTEyLjYtMS40TDIwMCw0NjhjLTguNS0xLjItMTYuNS00LTI0LjgtNi4xDQoJYy0yLjktMC43LTUuOC0xLjctOC41LTIuOGMtNS0yLjEtMTAuNC0zLjYtMTUuNS01LjhjLTI1LTEwLjMtNDguNC0yNC41LTcwLTQxLjljLTIuNC0xLjktNS41LDEuMi0zLjYsMy42DQoJYzE4LDIxLjgsNDAuOSw0MC4xLDY2LjUsNTMuNGMzMi40LDE3LjEsNjkuMywyNS43LDEwNi4yLDI2LjJjMzYuOS0wLjEsNzMuNy05LDEwNi40LTI1LjZjOS4xLTQuOCwyNC4yLTE0LjMsMzEuOS0xOS4yDQoJYzMtMS45LDYuNy0xLjQsOS4yLDFjMjMuNiwyMi45LDUzLjksMzcuNyw4Ni4zLDQyLjRjNS40LDAuOCw4LjctNS43LDUtOS42bC02NC42LTY4QzQyMi40LDQxMy4zLDQxOC44LDQxMyw0MTYuMiw0MTVMNDE2LjIsNDE1eiIvPg0KPC9zdmc+DQo=); }

#loading {
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: var(--loading-background); }
  #loading > * {
    position: absolute; }
    #loading > *:nth-child(1) {
      top: calc(50vh - (calc(100px - ( (100px * 25) / 100))/2));
      width: calc(100px - ( (100px * 25) / 100));
      height: calc(100px - ( (100px * 25) / 100));
      animation-name: loading-spin-left;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate; }
    #loading > *:nth-child(2) {
      top: calc(50vh - (100px/2));
      width: 100px;
      height: 100px;
      animation-name: loading-spin-right;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate; }
    #loading > *:nth-child(3) {
      top: calc(50vh + 100px);
      width: 400px;
      bottom: 0px;
      text-align: center;
      font-size: 16px; }
  #loading.show {
    visibility: visible; }
  #loading.end {
    display: none; }

.loading-rollon {
  display: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  vertical-align: middle; }
  .loading-rollon.show {
    display: inline-block; }
  .loading-rollon > SPAN {
    display: block; }
    .loading-rollon > SPAN:first-child {
      margin-top: calc(( (40px * 25) / 100) / 2);
      width: calc(40px - ( (40px * 25) / 100));
      height: calc(40px - ( (40px * 25) / 100));
      animation-name: loading-spin-left;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate; }
    .loading-rollon > SPAN:last-child {
      margin-top: calc( -1 * ( (40px - ( (40px * 25) / 100)) + (((40px * 25) / 100) / 2) ));
      width: 40px;
      height: 40px;
      animation-name: loading-spin-right;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate; }

@keyframes loading-spin-right {
  0% {
    transform: rotate(0deg); }
  90% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes loading-spin-left {
  0% {
    transform: rotate(360deg); }
  90% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(0deg); } }