body {
    margin: 0 50px !important;
}

header,
#chat-app {
    max-width: 900px;
}

.background-div {
    position: absolute;
    left:0;
    top:0;
    height: 100vh;
    width: 100vw;
    
    background-image: url("../images/background2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #3aa;
    background-blend-mode: multiply;

    filter: blur(1px);
    -webkit-filter: blur(1px);
}

main {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: #8ec6c6db !important;
}

.modal-footer {
    background-color: rgb(159, 202, 202);
}

.text-muted-amended {
    color: #000;
}

nav#noodlechat-nav {
    background: #345060;
}

#nav-menu-items {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    transform: translateX(-50%);
}

#navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}

#navbar-toggler:focus {
    outline: none !important;
    border: 1px solid #fff2 !important;
}

.dropdown-menu {
    background: #CFF !important;
    transform: translateY(-2px);
}

a.dropdown-item {
    transition-duration: 400ms;
}

a.dropdown-item:hover {
    background: #fff !important;
    transition-duration: 400ms;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
    z-index: 5;
}

a.dropdown-item.logging-option {
    background: #FFF7 !important;
    border-top: #33a;
    border-width: 4px;
}

a.dropdown-item.logging-option:hover {
    background: #dffc !important;
    transition-duration: 400ms;
}

#chatlog {
    height: 100%;
}

#chatlog .row:nth-child(odd):hover + .row
{

}

div#chatroom {
    padding-right: 0;
    padding-bottom: 5px;
    background: linear-gradient(to right bottom, rgba(185, 225, 225, 0.5), rgba(157, 225, 225, 0.25));
    height: 75vh;
    overflow-y: scroll;
    display: flex;
}

div.message-name {
    color: lightgray;
    font-size: 0.75em;
}

div.all-messages {
    margin-top: 7px;
    background: white;
    box-shadow:-5px 3px 5px rgba(0, 0, 0, 0.3);
}

div.all-messages.this-user-message {
    border-radius: 10px 10px 10px 0;
    margin-bottom: 5px;
}

div.all-messages.other-user-msg {
    border-radius: 10px;
}

div.speech-bg {
    background-color: white;
    margin-left: 0;
    padding-right: 0;
    margin-top: 5px;
    padding-left: 0;
}

div.other-user-speech {
    border-bottom-left-radius: 15px;
    margin-left: 0;
    margin-right: 0;
    background: dimgray;
}

input#user-message-text {
    border-radius: 0;
    border-bottom-left-radius: 10px;
}

button#send-user-message {
    border-radius: 0;
    border-bottom-right-radius: 10px;
    width: 150px;
}

@keyframes profile-glow {
    0% {
        opacity: .35;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: .35;
    }
}

.small-profile-glow {
    animation: profile-glow 2s infinite;
}

#user-profile-bio {
    padding-left: 4px;
    min-height: 100px;
}

#user-profile-nick, #user-profile-homepage, #user-profile-bio, #search-users-results {
    background-color: #fff5;
    border-radius: 3px;
}

#user-profile-homepage > h4 > a {
    color: #0056b3;
    text-decoration: none;
}

.user-small-profile {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* 
.user-small-profile > div {
    background-color: #fff5;
    border-radius: 5px;
} */

.user-small-profile:hover {
    background-color: #fff9;
    transition-duration: 500ms;
}

.modal-header {
    background-color: rgb(196, 232, 232);
}

#user-profile-chatrooms {
    background-color: #fff5;
    border-radius: 5px;
}

.user-profile-chatrooms {
    padding-left: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.user-profile-chatrooms:hover {
    background-color: #fffc;
}

/* .
TODO sibling selector with js listener for when keyboard entry happens on textfields, adding the class
.tf-empty when there is no content AND the textfield has lost focus
With no previous sibling selector the best option would be to div it.
modal-dialog label.label-top {
    position: relative;
    left: 10px;
    top: 40px;
} */

.user-chatrooms {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

div#email-signup-modal .modal-body, div#email-login-modal .modal-body  {
    padding-bottom: 4em;
}

#welcomeModal .modal-dialog {
    position: relative;
    top: 25%;
}

#email-signup-button, #email-login-button {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    box-shadow: 0 0 5px #fff5, 0 0 10px #fff5;
}


#email-signup-button:hover, #email-login-button:hover {
    transition: all ease-out 500ms;
    box-shadow: 0 0 5px #fff, 0 0 20px #fff9;
}

#email-signup-login-button,
#email-login-signup-button {
    position: relative;
}

#email-signup-login-button::before,
#email-login-signup-button::before {
    position: absolute;
    width: 0%;
    max-height: 5.5em;
    top:115%;
    left:50%;
    transform: translate(-50%);
    background-color: #c4e8e8;
    border-radius: 7px;
    color: black;
    overflow: hidden;
}


#email-signup-login-button::before {
    content: 'Login with existing email account';
}

#email-login-signup-button::before {
    content: 'Create a new account...';
}

#email-signup-login-button:hover::before,
#email-login-signup-button:hover::before {
    transition: width ease-out 200ms;
    width: 150px;
}

.form-check-input {
    position:  relative !important;
    margin: 0 !important;
}

/* fail-safe image */
#room-profile-logo {
    max-height: 40vh;
    overflow-y: hidden;
}

object.room-profile-logo-img > img {
    width: 100%;
}

#view-room-profile-creator-nick {
    font-weight: 300;
}

/* sign in modal css */

.sign-in-methods {
    margin: 0;
}

.sign-in-methods > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    color: #333;
    width: 100%;
}

.sign-in-methods > div:hover {
    color: blue;
    width: 100%;
}

#sign-in-modal .modal-sm {
    max-width: 300px;   
    margin: .5rem auto;
}