:root   {
            --red-color:               red;
            --deep-burgundy:           #7D1A1A;
            --black-charcoal:          #1A1A1A;
            --champagne:               #E2D5B8;
            --text-color:              #F5F0E8;

            --green-color:             #075E54;
            --blue-color:              #1877f2;

            --black-color:              rgb(0,0,0);
            --white-color:              rgb(255,255,255);
            --border-color:             rgb(60, 60, 60);
            --text-gray-color:          rgb(180,180,180);
            --background-gray-color:    rgb(36,36,36);
            --dark-grey:                rgb(20,20,20);
            --lighter-grey:             rgb( 60,60,60 );
        } 

/* Popup Board */
.PopupBoard {
                height: 100%; width: 100%;
                background-color: rgba( 125, 26, 26, 0.5 );
                padding-top: 16px; padding-bottom: 16px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                position: fixed;
                z-index: 10;
                top: 0;
                overflow-y: auto;
                overflow-x: hidden;
            }
.PopupBoard::-webkit-scrollbar          { width: 0; background-color: transparent; }
.PopupBoard::-webkit-scrollbar-button   { width: 0; background-color: transparent; }
.PopupBoard::-webkit-scrollbar-thumb    { width: 0; background-color: transparent; }
    /* Popup Sub Bar */
    .PopupSubBar    {
                        height: clamp( 450px, 94%, 1000px );
                        min-height: 450px;
                        width: clamp( 250px, 96%, 1000px );
                        background-color: var(--hero-charcoal);
                        margin-top: auto; margin-bottom: auto;
                        border: solid 0 transparent;
                        border-radius: 16px;
                        position: relative;
                        display: flex;
                    }
    #InformationPopupSubBar, #SearchPopupSubBar
    {
        flex-direction: row;
    }
    #ErrorPopupSubBar   { flex-direction: row; }
        /* Popup Panel Bar */
        .PopupPanelBar  {
                            align-self: stretch;
                            width: 50%;
                            border: solid 0 transparent;
                            border-top-left-radius: 16px; border-bottom-left-radius: 16px;
                            display: flex;
                        }
        #InformationPopupPanelBar   {
                                        background-image: url( '../assets/poster_images/poster_popup_about_img.png' );
                                        background-size: cover;
                                        background-position: top center;
                                        background-repeat: no-repeat;
                                    }
        #SearchPopupPanelBar    {
                                    background-image: url( '../assets/poster_images/poster_popup_search_img.png' );
                                    background-size: cover;
                                    background-position: top center;
                                    background-repeat: no-repeat;
                                }
        #ErrorPopupPanelBar {
                                background-image: url( '../assets/poster_images/poster_popup_error_img.png' );
                                background-size: cover;
                                background-position: top center;
                                background-repeat: no-repeat;
                            }
            .PopupPanelContentBar   {
                                        align-self: stretch;
                                        width: 100%;
                                        background-color: transparent;
                                        display: flex;
                                        background:
                                        linear-gradient(
                                            to top,
                                            rgba(60,10,10,0.60) 0%,
                                            rgba(100,18,18,0.80) 6%,
                                            rgba(157,35,35, 0.40) 20%,
                                            transparent          30%,
                                            transparent          100%
                                        );
                                        border: solid 0 transparent;
                                        border-bottom-left-radius: 16px;
                                    }
                .PopupPanelDetailsBar   {
                                            margin-top: auto; margin-left: 26px; margin-bottom: 26px; margin-right: 26px;
                                        }
                    .PopupPanelDetailsTitle {
                                                font-family: 'Playfair Display', serif;
                                                color: var(--white-color);
                                                margin-bottom: 16px;
                                            }
                    .PopupPanelDetailsText  {
                                                color: var(--text-gray-color);
                                                margin-left: 16px;
                                            }

        /* Popup Details Bar */
        .PopupDetailsBar    {
                                align-self: stretch;
                                width: 50%;
                                overflow-y: scroll;
                                overflow-x: hidden;
                            }
        .PopupDetailsBar::-webkit-scrollbar { width: 0; background-color: transparent; }
        .PopupDetailsBar::-webkit-scrollbar-button  {  background-color: transparent; }
        .PopupDetailsBar::-webkit-scrollbar-thumb   { background-color: transparent; }
            /* Popup Header Bar */
            #PopupHeaderBar {
                                background-color: transparent;
                                padding: 16px 16px 26px 26px;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: space-between;
                                gap: 8px;
                            }
                #PopupHeaderBar h1   {
                                        font-size: 26px;
                                        font-family: 'Playfair Display', serif;
                                        color: var(--white-color);
                                    }
                    #PopupHeaderBar h1 > span   { color: var( --red-color ); }
                .PopupHeaderbackBar {
                                        background-color: transparent;
                                        padding: 8px 16px 8px 16px;
                                        border: solid 0 transparent;
                                        border-radius: 26px;
                                        display: inherit;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 4px;
                                    }
                .PopupHeaderbackBar:hover   {
                                                background-color: var(--deep-burgundy);
                                            }
                    .PopupHeaderbackBar img {
                                                height: 26px; width: 26px;
                                            }
                    .PopupHeaderbackBar p   {
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: white;
                                            }
            /* Popup Description Bar */
            .PopupDescriptionBar    {
                                        text-align: center;
                                        color: var( --text-gray-color );
                                        padding: 0 16px 26px 56px;
                                        border-bottom: solid 1px var( --border-color );
                                    }
            /* Popup Body Bar */
            .PopupBodyBar   {
                                background-color: transparent;
                                padding: 26px 8px 26px 8px;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                gap: 16px;
                            }
            /* Information Popup Body Bar */
                /* Popup Body Details Bar */
                .PopupBodyDetailsBar    {
                                            padding: 16px 0 0 0;
                                            background-color: transparent;
                                            display: flex;
                                            flex-direction: column;
                                            gap: 16px;
                                        }
                    .PopupBodyDetailsBar p  {
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: var(--white-color);
                                            }
                    .PopupBodyDetailsBar input  {
                                                    width: 100%;
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    text-align: center;
                                                    color: var(--red-color);
                                                    background-color: transparent;
                                                    padding: 8px 16px 16px 16px;
                                                    margin-left: auto; margin-right: auto;
                                                    border: solid 0 var(--deep-burgundy);
                                                    border-bottom-width: 1px;
                                                    overflow-y: hidden;
                                                }
                    .PopupBodyDetailsSelect {
                                                width: 100%;
                                                text-align: center;
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: var(--white-color);
                                                background-color: transparent;
                                                padding: 16px 16px 16px 16px;
                                                border: solid 1px var(--deep-burgundy);
                                                border-radius: 26px;
                                                appearance: none;
                                                --webkit-apperance: none;
                                                transition: var(--border-color) 0.2s;
                                            }
                    .PopupBodyDetailsSelect:focus   {
                                                        outline: none;
                                                        border-color: var( --border-color );
                                                    }
                        .PopupBodyDetailsSelect option  {
                                                            color: var(--white-color);
                                                            background-color: var(--black-charcoal);
                                                        }

            /* Search Popup Body Bar */
                    /* Search Popup Body Description Bar */
                    #SearchPopupBodyDescriptionBar  {
                                                        text-align: center;
                                                        color: var(--text-gray-color);
                                                    }
                    /* Popup Body Message Bar */
                    .PopupBodyMessageBar    {
                                                text-align: center;
                                                padding: 26px 16px 26px 16px;
                                            }
                        .PopupBodyMessageBar    {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    color: var(--red-color);
                                                }
                    /* Popup Body Filter Bar */
                    .PopupBodyFilterBar {
                                            padding: 16px 0 16px 0;
                                            display: flex;
                                            flex-direction: column;
                                            align-items: flex-start;
                                            justify-content: center;
                                        }
                        .PopupBodyFilterTitle       {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        font-family: 'Playfair Display', serif;
                                                        color: var(--white-color);
                                                        background-color: transparent;
                                                        margin-bottom: 8px; margin-left: 8px;
                                                    }
                        .PopupBodyFilterListBar {
                                                    width: 100%;
                                                    min-width: 0;
                                                    background-color: transparent;
                                                    padding: 16px 0 16px 0;
                                                    display: flex;
                                                    flex-direction: row;
                                                    flex-wrap: nowrap;
                                                    justify-content: flex-start;
                                                    align-items: flex-start;
                                                    overflow-y: hidden;
                                                    overflow-x: auto;
                                                    gap: 16px;
                                                }
                        .PopupBodyFilterListBar::-webkit-scrollbar          { height: 4px; background-color: var(--black-charcoal); }
                        .PopupBodyFilterListBar::-webkit-scrollbar-button   { background-color: transparent; }
                        .PopupBodyFilterListBar::-webkit-scrollbar-thumb    { background-color: var(--deep-burgundy); }
                        /* Search PopupBody Filter Targets List Bar */
                        #SearchPopupBodyFilterTargetsListBar    {
                                                                    height: 196px;
                                                                    background-color: transparent;
                                                                }
                            .PopupBodyFilterListItemBar {
                                                            font-weight: bold;
                                                            color: var(--white-color);
                                                            background-color: var(--background-gray-color);
                                                            padding: 8px 16px 8px 16px;
                                                            border: solid 0 transparent;
                                                            border-radius: 16px;
                                                            flex-shrink: 0;
                                                        }
                            .PopupBodyFilterListItemBar:last-child  { margin-top:auto; margin-bottom:auto; }
                            .PopupBodyFilterListItemBar:hover   {
                                                                    background-color: black;
                                                                    border-bottom: solid 1px;
                                                                    border-color: var(--deep-burgundy);
                                                                }
                            .SearchPopupBodyFilterListItemBar   {
                                                                    height: 150px; width: 150px;
                                                                    background-color: transparent;
                                                                    padding: 16px 0 16px 0;
                                                                    border: solid 0 transparent;
                                                                    border-radius: 16px;
                                                                    position: relative;
                                                                }
                            .SearchPopupBodyFilterListItemBar:last-child    {
                                                                                margin-right: 16px;
                                                                            }
                            .SearchPopupBodyFilterListItemBar:hover {
                                                                        box-shadow: 4px 4px 4px var(--deep-burgundy);
                                                                    }
                                .SearchPopupBodyFilterListItemBar p {
                                                                        font-size: 18px;
                                                                        font-family: 'Playfair Display', serif;
                                                                        color: var(--white-color);
                                                                        position: absolute;
                                                                        left: 26px; bottom: 26px;
                                                                    }
            /* Popup Options Bar */
            .PopupOptionsBar    {
                                    background-color: var(--background-gray-color);
                                    padding: 16px 8px 16px 8px;
                                    border-top: solid 1px var(--border-color);
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: center;
                                    gap: 26px;
                                    border: solid 0 transparent;
                                    border-bottom-right-radius: 16px;
                                }
                .PopupOptionsBar button {
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--white-color);
                                            background-color: transparent;
                                            padding: 8px 16px 8px 16px;
                                            border: solid 0 transparent;
                                            border-radius: 26px;
                                        }
                .PopupOptionsBar button:hover   {
                                                    background-color: black;
                                                }
            /* Error Popup Board */
        #ErrorPopupDetailsBar   {
                                    display: flex;
                                    flex-direction: column;
                                }
                    #ErrorPopupBodyBar  { align-items: center; justify-content: center; flex-grow: 1; }
        /* popup Scroll Down Icon */
        #popupScrollDownIcon    {
                                    height: 36px; width: 36px;
                                    border: solid 0 transparent;
                                    border-radius: 36px;
                                    position: absolute;
                                    right: 16px; bottom: 16px;
                                    animation: trafficBlink 2s steps(1) 6, fadeOut 0.5s ease forwards 11s;
                                }

    @keyframes trafficBlink
    {
        0%   { opacity: 1; }
        50%  { opacity: 0; }
        100% { opacity: 1; }
    }

    @keyframes fadeOut
    {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

@media screen and (max-width: 780px)
{
    /* Popup Panel Bar */
        .PopupPanelBar  {
                            display: none;
                        }

    /* Popup Details Bar */
        .PopupDetailsBar    {
                                width: 100%;
                            }    
            /* Popup Options Bar */
            .PopupOptionsBar    {
                                    border-bottom-left-radius: 16px;
                                }                    
}