html,
body {
    margin: 0px;
    padding: 0px;
}

* {
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
}

@keyframes shake_animate {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    25% {
        transform: translate(2px, 2px) rotateZ(1deg)
    }

    50% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }

    75% {
        transform: translate(2px, 0px) rotateZ(-1deg)
    }

    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}

.shake {
    display: inline-block;
    animation: shake_animate .1s infinite;
}

@keyframes blink {
    0% {
      opacity: .2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: .2;
    }
}

.dot-flashing {
    display: flex;
}

.dot-flashing>div {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #ffffff;
    margin-left: 1px;
    margin-right: 1px;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.dot-flashing>div:nth-child(2) {
    animation-delay: .2s;
}

.dot-flashing>div:nth-child(3) {
    animation-delay: .4s;
}

.flat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    background: #285aff;
    cursor: pointer;
    transition-duration: 0.2s;
}

.flat-button:hover {
    background: #0031d2;
}

.flat-button-disabled {
    background: #7e7e7e;
    cursor: not-allowed;
}

.flat-button-disabled:hover {
    background: #7e7e7e;
}