.modal {
    z-index: 100000;
}

.modal.dark-mode {
    background-color: #0d0d24c4;
}

.modal.dark-mode .modal-dialog .modal-content {
    background-color: #142a5e;
    color           : #FFF;
}

.modal .error {
    color: #d02a59;
}

.modal .modal-hint-info {
    text-align    : center;
    border-top    : 2px solid #2fb341;
    border-bottom : 2px solid #2fb341;
    color         : #2fb33a;
    padding-top   : 10px;
    padding-bottom: 10px;
    font-weight   : bold;
    animation     : wiggle 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.modal .modal-hint-error {
    text-align    : center;
    border-top    : 2px solid #b32f2f;
    border-bottom : 2px solid #b32f2f;
    color         : #b32f2f;
    padding-top   : 10px;
    padding-bottom: 10px;
    font-weight   : bold;
    animation     : shake-top 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-top {
    0% {
        opacity         : 0;
        transform       : rotate(0deg);
        transform-origin: 50% 0;
    }

    10% {
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(4deg);
    }

    80% {
        opacity  : 1;
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }

    100% {
        transform       : rotate(0deg);
        transform-origin: 50% 0;
    }
}

@keyframes wiggle {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        transform: scale3d(1, 0.75, 1);
    }

    50% {
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        transform: scale3d(1, 0.95, 1);
    }

    75% {
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}