:root {
        --sidebar-width: 400px;
        --chatMessagesMaxWidth: calc(1024px - 1.4rem);
        ;
        --screenMaxWidth: 1424px;
        /* 400px + 1024px */
}

/********************************************************************************/
/********************************************************************************/
/*										*/
/********************************************************************************/
/********************************************************************************/

#leftSideContainer {
        display: none;
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
}

#userInputContainer {
        width: 100vw;
        margin-left: 0;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

@media only screen and (max-width: 1424px) {
        #leftSideContainer {
                display: none;
        }
}

@media only screen and (min-width: 1424px) {
        
        
        #messagesTopBlank {
                display: none;
        }

        #navBarContainer {
                width: var(--sidebar-width);
                max-width: var(--sidebar-width);
                left: 0;
                width: 50%;
        }

        #leftSideContainer {
                display: flex;
        }

        #rightSideContainer {
                /* FULL WIDTH */
                /* width: calc(100vw - var(--sidebar-width) - 1.4rem);
                max-width: calc(100vw - var(--sidebar-width) - 1.4rem);
                margin-left: calc(var(--sidebar-width)); */

                /* CENTERED */
                width: 100%;
                max-width: calc(var(--chatMessagesMaxWidth) - 1.4rem);
                margin-left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width) - var(--chatMessagesMaxWidth)) / 2);
        }

        #userInputContainer {
                box-shadow: none;

                /* FULL WIDTH */
                /* width: calc(100vw - var(--sidebar-width));
                max-width: calc(100vw - var(--sidebar-width));
                margin-left: calc(var(--sidebar-width)); */

                /* CENTERED */
                width: 100%;
                max-width: var(--chatMessagesMaxWidth);
                margin-left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width) - var(--chatMessagesMaxWidth)) / 2);
        }
}

/********************************************************************************/
/********************************************************************************/
/*										*/
/********************************************************************************/
/********************************************************************************/


#splashContainer  {
        font-size: 150%;
}

@media only screen and (min-width: 920px) {

        #splashContainer  {
                font-size: 200% !important;
        }
}