/*
---------------------PLEASE READ-----------------------------------------------
This Stylesheet is where all colors can be customized.  Please read each 
option carefully to ensure correct utilization.
--------------------------------------------------------------------------------
*/

/*Background color of menu bar.*/
.bg-primary {
    background: linear-gradient(to right, #006E33, #0D5E60, #1A4E8A);
}

/*This changes the color of the footer (bar at the bottom of every page) only change that background color*/
footer {
    background: linear-gradient(to right, #006E33, #0D5E60, #1A4E8A);
    padding: 10px;
    text-align: center;
}
    /* Footer text color for selected page only change if color will not contrast with white */
    footer a {
        color: white;
    }

/* Only change ther color class to change the text color across the entire app */
.content {
    color: #000099;
    overflow: auto;
    padding-bottom: 53px;
}

/* This will chaange the color of the border around every input feld across the entire app */
.form-control {
    border: 1px solid #000099;
}

/* This will change the color of the dropdown menus within forms such as what state for a address */
.form-select {
    color: #000099;
    border-color: #000099;
}

.btn-outline-dark:focus, .btn-outline-dark:hover, .open > .dropdown-toggle.btn-outline-dark {
    color: white;
    background-color: #000099;
    border-color: #000099;
}

/* This will change the color of the buttons that go along with the menu
    once you login to the app only change the color and background color */
.navbar-dark .navbar-nav .nav-link {
    color: white;
    background-color: #52678c;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #52678c;
    border-radius: .25rem;
}

    /* This will change the color of the menu buttons when you mouse over them only change the color and background color */
    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
        color: #ffffff;
        background-color: #304d82;
        margin-right: 5px;
        margin-left: 5px;
        border: 1px solid #52678c;
        border-radius: .25rem;
    }
/* This will changes the color of the login and logout button at the top right make sure you
    change both the btn-info and btn-info:hover btn-info:focus
*/
.btn-info {
    color: white;
    background-color: #52678c;
    border: 1px solid #52678c;
}

    .btn-info:focus, .btn-info:hover {
        color: white;
        background-color: #304d82;
        border: 1px solid #52678c;
    }

/* Changes the app name color only change the color / If the screen size is 768px wide or more, set the font-size of <div> to 2.5em */
@media screen and (min-width: 768px) {
    div.pageheader {
        color: #040345;
        font-family: 'Raleway', sans-serif;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
    }
}

/* Changes the app name color only change the color / If the screen size is 767px wide or less, set the font-size of <div> to 1.4em */
@media screen and (max-width: 767px) {
    div.pageheader {
        color: #040345;
        font-family: 'Raleway', sans-serif;
        font-size: 1.4em;
        font-weight: bold;
        text-align: center;
    }
}

/* This is where you will change the color of the dropdown menu that you see once you have 
    logged into the app only change the color and background color
*/
.dropdown-menu {
    color: #ffffff;
    background-color: #52678c;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

/* This will change the text color of the menu only change the color */
.dropdown-item {
    color: #ffffff;
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

/* This changes the color when you mouse over a item in a dropdown menu */
#Menu1 a.dynamic.highlighted {
    color: white !important;
    background-color: #040345;
}

/* This changes the color of the text in the sub menu of the page you are on  */
#Menu1 a.dynamic.selected {
    color: #d9ffff;
}

/* This will change the size of the logo on the top left of the app */
.logoStyle {
    max-height: 150px;
    max-width: 150px;
    width: 100%;
    height: auto;
}