.alert {
    margin-bottom: 0;
}

.index-main {
    height: 100vh;
}


.index-main-container {
    height: 90vh;
}

.create-room-main, .join-room-main {
    width: 50vw;
    max-width: 300px;
}

.login-main {
    width: 50vw;
    max-width: 300px;
}

.create-account-main {
    width: 50vw;
    max-width: 300px;
}

.emoij-choice {
    padding: 10px;
    text-align: center;
}

.emoji-preview {
    padding: 10px;
    text-align: center;
}

.emoji-preview .card-img-caption .card-text {
    font-size: 45px;
    text-align: center;
    bottom: 0;
    width: 100%;
    margin: 20px 0;
    position: absolute;
    z-index: 1;
}

.card-img-caption {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.card-img-caption .card-img-top {
    z-index: 0;
}

.card-img-caption .card-text {
    font-size: 60px;
    text-align: center;
    bottom: 0;
    width: 100%;
    margin: 20px 0;
    position: absolute;
    z-index: 1;
}

/* Fix iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    #emoji-choice-left {
        right: 175px !important;
    }

    #emoji-choice-right {
        left: 175px !important;
    }
}

@media (max-width: 767.98px) {
    .create-room-main, .join-room-main {
        width: 90vw;
    }

    .login-main {
        width: 90vw;
    }

    .create-account-main {
        width: 90vw;
    }
}

@media screen and (orientation: landscape) and (max-width: 992px) {
    .create-room-main, .join-room-main {
        margin-top: 1%;
    }

    .login-main {
        margin-top: 1%;
    }

    .create-account-main {
        margin-top: 1%;
    }
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: white;
    animation-duration: 280ms;
    animation-timing-function: ease-in-out;
}


@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}


.overlay {
    display: block;
    position: absolute;
    opacity: 0.8;
    background: black;
    width: 100%;
    height: 100%;
    z-index: 99;
    top: 0;
    left: 0;
}