.service-menu-region {
    background-color: rgba(255, 255, 255, 1);
    color: black;
    border: 1px gray solid;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    z-index: 100;
}
.region-content {
    color: white;
}
.character-avatar-selector img.selected{
    border-radius: 20px;
    background-color: wheat;
}
.view-scene-actions-ultimate {
    position: absolute;
    z-index: 3;
}
.character-avatar-selector {
    
}

.main-content {
    color:black;
}
.character-avatar-selector::-webkit-scrollbar {
    width: 0px;
    /* remove scrollbar space */
    background: transparent;
    /* optional: just make scrollbar invisible */
  }
  
.scene-last-action-previos-view {
    
    max-height: 500px;  
    width: 1280px;
    
    position: absolute;
    z-index: 5;
    
    top: 450px;
}
.left-sidebar {
    z-index: 100;
}
.character-name {
    font-family: "Oswald";
    font-weight: 400;
    text-transform: uppercase;
}
.character-window {
    font-family: "Oswald";
    font-weight: 400;
    text-transform: uppercase;
}
.profile-image img {
    border: 1px solid grey;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    background-color: white;
    
}
@media screen and (min-width: 1381px) {
    .top-bar {
        z-index: 100;
        background-color: RGBA(0, 0, 0, 0.1);
        position: relative;
        
    }
    
    .top-bar h3 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 1400px;
    }
    
    .viewport {
        background-size: auto 100%;
        height: 720px;
        width: 1280px;
        color: black;
    }
    .full_avatar_spot {
        width: 480px;
        height: 480px;
        
    }
    #user1 {
        position: absolute; 
        left: -20px;
    
    }
    #user3 {
        position: absolute; 
        left:  277px; 
    
    }
    
    #user4 {
        position: absolute; 
        right: 277px; 
    
    }
    
    #user2 {
        position: absolute; 
        right: -20px; 
    
    }
    .full-avatar-row {
        top: 128px; 
    }
    #main-message {
        position: absolute; 
        bottom:72px; 
        width: 1200px; 
        margin-left: -600px; 
        left:50%; 
        
        height: 131px;
        z-index: 5;
        text-align: start;
    }
    .log-message {
        position: absolute;
        bottom:0px; 
        width: 500px; 
        height: 72px;
        text-align: start;
        
    }
    #log-message-1 {
        left: 182px;
        
    }
    
    #log-message-2 {
        right: 100px;
        opacity: 0.7;
    }
    .message-avatar.main, .message-avatar.main img {
        height: 131px;
        width: 131px;
    }
    .message-avatar, .message-avatar img {
        width: 70px;
        height: 70px;
    }
    .image-attached.main {
        
        width: 131px;
        height: 131px;
    }
    .image-attached{
        
        width: 70px;
        height: 70px;
    }
    
    
}
.message-container {
    font-family: var(--bs-font-sans-serif);
}

.playback-buttons {
    position: fixed;
    top: 100px;
    right: 0px;
    z-index: 101;
}

#edit-subject-wrapper {
    display: none;
}

.add-comment-section article {
    display: none;
}

.add-comment-section h2 {
    display: none;
}

.filter-help {
    display: none;
}

#edit-comment-body-0-format {
    display: none;
}
#edit-field-image-0--description {
    display: none;
}
#edit-preview {
    display: none;
}
.scene-action-form {
    width: calc(100% - 40px);
    left: 20px;
}

div[data-drupal-selector=edit-comment-body-0-format] {
    display: none;
}

#preview-ajax-comments-reply-form-node-21-field-scene-actions-0-0 {
    display: none;
}


.ajax-progress, .ajax-progress-throbber {
    display: none;
}
.square-480{
    height: 480px;
    width: 480px;
}

nav .pager {
    display: none;
}

/* main page grid view */
.character-logo {
    top: -20px;
    right: -20px;
}

ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}

.field--name-field-genre, .field--name-field-genre .field__item {
    display: inline;
}

.text-shadow {
    text-shadow: 1px 1px 2px black;
}
.text-shine {
    text-shadow: 1px 1px 2px white;
}

.front-view-plate-background img {
    width: 100%;
    max-height: 160px;
    border-radius: 3px;
}

.bg-image.card .card-footer {
    background-color: rgba(255, 255, 255, 0.6);
}

#edit-body-0-format {
    display: none;
}
#main-card {
    color: black;
}