/*
---------------------PLEASE READ-----------------------------------------------
This Stylesheet is where all Custom Colors will be done there are mutiple classes
that will need to be changed to get the desired look that you want notes will
be over top on the classes to change with a short explanation on what to change
--------------------------------------------------------------------------------
*/

/*Background color of menu bar.*/
.bg-primary {
    background-color: #040345 !important;
}

/*This changed the color of the footer (bar at the bottomof every page) only change thatbackground color*/
footer {
    background-color: #040345;
    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 imput 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 goi 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 tect 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 chamges the color of the text in the sub menu of the page you are on  */
#Menu1 a.dynamic.selected {
    color: #d9ffff;
}

/*--------------------------------------------------------DO NOT CHANGE ANYTHING BELOW------------------------------------------------------------------*/
/*This class ensures the footer is placed at the bottom of the web page without clipping the content area*/
main {
    /*100% of Screen Height - Header Height - Footer Height = Total Height of Content Area (Only edit the Header Height)*/
    min-height: calc(100vh - 118px - 49px);
    background-color: #f8f9fa;
}

.invisible {
    display: none
}

.col-3 {
    flex: 0 0 auto;
    width: 24%;
}

.userName {
    font-family: sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    padding-right: 1em;
    vertical-align: bottom;
}

.dividers-01 {
    border: none;
    border-bottom: 3px solid #04336c;
    text-align: center;
    height: 0;
    width: 100%;
    clear: both;
    display: inline-block;
    margin: 10px 0;
}
/*Menu text color for selected page*/
#Menu1 a.static.selected {
    color: white;
}

/*Text color of parent menu items*/
.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.dropdown-item:hover {
    color: white;
    background-color: #040345;
}

body {
    background-color: #f8f9fa;
}

.details {
    color: #000099;
    background-color: #f8f9fa;
    margin: auto;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    background-color: #0245a7;
    color: white;
    border-color: #0245a7;
    
}

.btn-warning {
    color: white;
    background-color: #c25e68;
    border-color: #c25e68;
}

    .btn-warning:focus, .btn-warning:hover {
        color: white;
        background-color: #dc4655;
        border: 1px solid #dc4655;
    }

.btn-danger {
    background-color: #98525900;
    border-color: #0a58ca;
    color: #0a58ca;
}

    .btn-danger:focus, .btn-danger:hover {
        color: white;
        background-color: #0a58ca;
        border: 1px solid #0a58ca;
    }

.btn-success {
    background-color: #43A047;
    border-color: #43A047;
}

    .btn-success:focus, .btn-success:hover {
        color: white;
        background-color: #27ad2d;
        border: 1px solid #27ad2d;
    }

.btn-primary {
    background-color: #0245a7;
    border-color: #0245a7;
}

.btn-secondary {
    background-color: #0245a7;
    border-color: #0245a7;
}

    .btn-secondary:focus, .btn-secondary:hover {
        color: white;
        background-color: #0d6efd;
        border: 1px solid #0d6efd;
    }

.bodyhead {
    font-size: 18pt;
}

.bodytext12 {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
}

.modal-dialog {
    max-width: 750px;
    margin: 1.75rem auto;
}

.btn-wider{
    min-width:120px
}

table#ctPlaceHolder_PasswordRecovery1 {
    margin: auto;
}

.bodytext14 {
    font-family: 'Raleway', sans-serif;
    font-size: 14pt;
}

.center{
    margin:auto
}

.hide {
    display: none;
}

#CreateUserWizard1 {
    caption-side: bottom;
    margin: auto;
    max-width: 100%;
}

utton, input, optgroup, select, textarea {
    margin: 3px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

left{
    margin-left:auto
}

table {
    caption-side: bottom;
    margin:inherit;
    max-width: 100%;
}

.fw-bold {
    font-weight: 600 !important;
}

.bodytext16 {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    text-align: center;
}

.pageheader {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    color: #04336c;
    text-align: center;
}

.pagefooter {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    color: #ffffff;
}

.pageinfoleft {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    color: #000099;
    width: 248px;
}

.subheader {
    font-family: 'Raleway', sans-serif;
    font-size: 14pt;
    color: #000099;
    text-align: center;
}

.navi {
    font-size: 12pt;
    line-height: 13pt;
    text-align: Left;
}

.naviheader {
    font-size: 12pt;
    background-color: #5B00E6;
    color: white;
    font-weight: bold;
}

BODY {
    background-color: #FFFFFF;
}

.pageborder {
    border-color: #666667;
}

.menuline {
    background-color: #FFFFFF;
}

.menustylenode {
    border-style: ridge;
    border-width: 1px;
    width: 170px;
    font-size: 14px;
    font-family: 'Book Antiqua';
    padding: 2px;
    color: Black;
    background-color: #FFFFFF;
}

.menustyle {
    width: 180px;
    font-size: 14px;
    font-family: 'Book Antiqua';
    padding: 2px;
    color: Black;
    background-color: #878e8b;
}

.menustylehover {
    font-size: 14px;
    font-family: 'Book Antiqua';
    padding: 2px;
    color: Black;
    background-color: #FFFFFF;
}

.detailodd {
    /*background-color: #E9E9E9;*/
    --bs-table-bg: #E9E9E9;
}

.filler {
    color: Black;
}

.dialogmember {
    width: 650px;
    height: 650px;
    border-style: solid;
    border-color: #666667;
    background-color: #ffffff;
    background-color: #ffffff;
}

.dialogcolor {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.alignright {
    text-align: right;
}

.buttonSpace {
    padding-bottom: 10px;
    padding-left: 5px;
}

.messageSpace {
    padding-bottom: 10px;
    padding-left: 5px;
}

.rowSpace th, td {
    text-align: left;
    padding: 6px;
}

.listClass label {
    padding-left: 5px;
    display: inline;
}

.listClass td {
    padding-bottom: 15px;
}

.boxWidth800 {
    max-width: 800px;
    width: 90%;
    height: 200px;
}

.boxWidth600 {
    max-width: 600px;
    width: 90%;
}

.boxWidth400 {
    max-width: 400px;
    width: 90%;
}

.boxWidth200 {
    max-width: 200px;
    width: 90%;
}

.trSpace td {
    padding-top: 10px;
    padding-bottom: 10px;
}

* {
    margin: 0;
    padding: 0;
}
/*Add's padding to the buttons on the web app*/
input[type="submit"] {
    padding-right: 3px;
    padding-left: 3px;
}
/*Add's padding to the text inside grids so that text does not touch the walls of the grid.*/
th {
    text-align: inherit;
    padding-left: 3px;
    padding-right: 3px;
}

.card-body {
    color: #000099;
}