body {
    background: rgb(30, 30, 40);
    overflow-x: hidden;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    user-select: none;
}

:focus {
    content: "Warido";
}

tspan.hidden {
    opacity: 0;
}

input.table-correct {
    border: 5px solid limegreen !important;
    border-width: 1px !important;
}

input.table-wrong {
    border: 5px solid red !important;
    border-width: 1px !important;
}

tspan[id$=cursor] {
    fill: black !important;
    stroke: black !important;
    stroke-width: 0.5px;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hideme {
    opacity: 0%;
}

#grid-outline {
    pointer-events: none;
}

.fit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

text.help-text {
    pointer-events: inherit;
    user-select: inherit;
}

text:not(.help-text) {
    pointer-events: none;
    user-select: none;
}

#reseditor-fade {
    filter: none !important;
    pointer-events: none;
}

image {
    image-rendering: pixelated;
}

image.langimage {
    image-rendering: revert;
}

.outer {
    overflow: hidden;
}

.input-transparent {
    pointer-events: none;
}

*:focus {
    outline: none;
}

#tooltip {
    position: relative;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lang-language-selector {
    pointer-events: none;
}

.overflowstopper {
    overflow: scroll;
}

.toggleable {
    background-color: rgba(0,200,200,0.4);
}

.toggleable:hover {
    cursor:crosshair;
}

[id^=reseditor-editor-] {
    text-underline-offset: 10px;
}

.shake {
    animation: shakeanim 0.2s;
    animation-iteration-count: 2;
}

@keyframes shakeanim {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.symbol {
    text-align: right !important;
    display: inline;
    position: relative;
}

.symbol::before {
    text-align: right !important;
    content: attr(data-prefix);
    position: absolute;
    right: 9px;
}

@keyframes loadcheck {
    0%,
    100% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateX(-30px) rotate(-6deg);
              transform: translateX(-30px) rotate(-6deg);
    }
    30% {
      -webkit-transform: translateX(15px) rotate(6deg);
              transform: translateX(15px) rotate(6deg);
    }
    45% {
      -webkit-transform: translateX(-15px) rotate(-3.6deg);
              transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
      -webkit-transform: translateX(9px) rotate(2.4deg);
              transform: translateX(9px) rotate(2.4deg);
    }
    75% {
      -webkit-transform: translateX(-6px) rotate(-1.2deg);
              transform: translateX(-6px) rotate(-1.2deg);
    }
  }