:root
{
    --main-bg-color: #000814;
    --mid-dark-blue: #001D3D;
    --mid-blue: #003566;
    --steel-blue: #437DB3;
    --light-steel-blue: #4f94d4;
    --light-blue: #85C4FF;
    --lightest-blue: #bddfff;

    --dark-yellow: #FFC300;
    --mid-yellow:#FFD60A;
    --light-yellow: #FFEB85;

    --bright-red: #FD474A;
    --bright-green: #64FD47;
    --bright-orange: #FFC300;
    --bright-teal: #00ffe5;
    --bright-pink: #ff009d;
}

html
{
    background: var(--main-bg-color);
}
body
{
    /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    font-family: "JetBrains Mono",monospace;
    background-color: var(--main-bg-color);
    background: var(--main-bg-color);
    margin: 0;
    position: relative;
    min-height: 100vh;
    visibility: hidden;
}
/* ----- Navbar ----- */
.navbar ul
{
    /* border-radius: 10px */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--main-bg-color);
    display: flex;
    
}
.navbar li a
{
    /* border-radius: 25px; */
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    
}
.navbar li:not(li:first-child, li:last-child, li:nth-child(8))
{
    margin-top: 8px;
}
.navbar li:not(li:first-child) a
{
    padding: 23px 16px 14px 16px;
}
.navbar li:first-child a
{
    font-size: 30px;
    font-family: Times, Times New Roman, serif;
    vertical-align: bottom;
    padding: 14px 16px 14px 16px;
    color: var(--dark-yellow);
    
}
.navbar li:not(li:first-child, li:last-child) a:hover
{
    background-color: #003566;
    color: var(--light-yellow);
}
.navbar li:nth-child(8)
{
    width: fit-content;
    margin-top: .37%;
    margin-left: auto;
}
.navbar li:last-child
{
    margin-left: auto;
}
.navbar .active a
{
    background-color: #003566;
    color: var(--light-yellow);
}
/* ----- Navbar ----- */

/* ----- User Account/Sign In ----- */
div #user-button
{
    margin-right: 15px;
    margin-top: 8px;
}
/* ----- User Account/Sign In ----- */

/* ----- Load/Export/Save Controls -----*/
.menu_button
{
    padding: 6px 8px;
    /* background: var(--bright-green); */
    
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: fit-content;
    text-align: center;
    
    display: block;
    position: relative;
    right: 0;
/*     float: right; */
}
.menu_button:disabled
{
    opacity: 0.5;
}
.menu_button i
{
    color: var(--mid-blue);
}
.menu_controls
{
    display: flex;
    width: 100%;
    justify-content: center;
/*     position: relative; */
}
.graph_controls
{
    display: flex;
    justify-content: left;
    width: 0%;
}
.reset_zoom_btn
{
    background-color: var(--bright-red);
}
.load_export
{
    display: flex;
    justify-content: right;
    width: 100%;
}
.menu_export_btn
{
    padding: 6px 6px;
    background: var(--bright-teal);
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    text-align: center;
    margin-left: 5px; 
}
.menu_export_btn i
{
    color: var(--mid-blue);
}
.menu_load_btn
{
    padding: 6px 6px;
    background: var(--bright-orange);
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    text-align: center;
    margin-left: 5px; 
}
.menu_load_btn i
{
    color: var(--mid-blue);
}
.menu_save_btn
{
    padding: 6px 6px;
    background: var(--bright-pink);
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    text-align: center;
    margin-left: 5px; 
}
.menu_save_btn i
{
    color: var(--mid-blue);
}
.menu_live_btn
{
    padding: 6px 6px;
    background: var(--bright-green);
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    text-align: center;
}
.menu_live_btn i
{
    color: var(--mid-blue);
}
/* ----- Load/Export/Save Controls -----*/

/* ----- Search Bar ----- */
.search_bar_div
{
    display: flex;
    width: fit-content;
}
.search_bar
{
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    background-color: var(--steel-blue);
    color: white;
    font-weight: bold;
}
.search_btn
{
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background-color: var(--light-blue);
    font-size: 19px;
    border: none;
    cursor: pointer;
    
    position: relative;
}
.search_btn i
{
    color: white;
}
.search_btn:hover
{
    background-color: #bcdfff;
}
.search_btn:hover i
{
    
    color: var(--mid-blue);
}
/* ----- Search Bar ----- */

/* ----- Logo and Form ----- */
#home_div
{
    text-align: center;
    padding-top: 5%;
}
#fb_logo
{
    width: 200px;
}

/* ----- Footer ----- */
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;    
    color: rgba(255, 255, 255, 0.616);
    display: flex;
    justify-content: center;
}
.footer p
{
    margin: 10px;
}
/* ----- Footer ----- */