@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --green_dark: #29612D;
    --green_primary: #3b8e40;
    --green_medium: #92bd8f;
    --green_light: #CDD9CB;
    --tan_dark: #5E5E4E;
    --tan_medium: #acac9a;
    --tan_light: #cfcfbc;
    --tan_veryLight: #E1E1D5;
    --white_pure: white;
}

*{
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}

body{
    height:100dvh;

    font-family: "Roboto", sans-serif;
}

.heading{
    min-height: 2.5rem;

    align-content: center;

    padding: 0.5rem 0 0.5rem 1rem;

    font-size: 1.3rem;

    background-color:var(--tan_veryLight);
    color:var(--tan_dark);
}

/**********************************************************************************************************************/
/* FRAME - LEADER                                                                                                     */
/**********************************************************************************************************************/

/* LEADER BAR                                                */
.leaderBar{
    display: block;

    min-height:25px;

    align-content:center;

    background-color:var(--green_dark);
    color:var(--white_pure);
}

.leaderBar_settings{
    float:right;

    min-width:50px;

    margin-bottom:0;                                                                                                    /**/
    padding:0;                                                                                                          /**/

    font-size:1.2rem;

    background:var(--green_dark);
    color:var(--white_pure);

    border: none;
}

.leaderBar_settings:hover{
    background:var(--green_primary);
}

.leaderBar_welcome{
    float:right;

    margin-top:2px;
    padding-right:10px;
}

/* BRAND BAR                                                 */
.brandBar{
    display: inline-flex;

    height:80px;

    align-items:baseline;

    padding-top:15px;
}

.brandBar_logo{
    height:50px;
    width:auto;

    margin: 0 0.5rem 0 1rem;
}

.brandBar_text{                                                                                                         /**/
    font-family: "Outfit", sans-serif;
    font-size:3rem;

    color:var(--green_dark);
}

/* NAV BAR                                                   */
.menuBar{
    border-bottom:3px solid var(--green_dark);
}

button.menuBarButton:hover {
    background-color:var(--green_primary);
    color:var(--white_pure);

    cursor:pointer;
}

.menuBarButton{
    min-width: 175px;

    margin-bottom:0;
    padding: 0.5rem 1rem 0.5rem 1rem;

    font-size: 1.0rem;
    font-weight: bold;

    background-color:var(--green_dark);
    color:var(--white_pure);

    border:none;
    border-radius: 10px 10px 0 0;

    text-decoration:none;
}

.menuBarButton.home{
    min-width: 220px;

    border-radius:0 10px 0 0;
}

.menuBarButton.blankButton{
    visibility: hidden;

    min-width: 75px;
}

/**********************************************************************************************************************/
/* FRAME - SETTINGS DOCKNAV                                                                                           */
/**********************************************************************************************************************/
.dockNav{                                                                                                               /*rework sizing*/
    height:69dvw;
    max-width:200px;
    min-width:100px;
    width:15%;

    margin-top:-1rem;

    border-right:2px solid var(--tan_light);
}

.dockNav_list{
    margin:0.75rem 0 1rem 0;

    font-size:0.9rem;
    font-weight:600;
    line-height:2.75rem;
    list-style-type:none;

    color:var(--tan_dark);
}

.dockNav_listItem{
    padding:0 0 0 1rem;
}

.dockNav_listItem:hover{
    cursor:pointer;
    background-color:var(--tan_light);
}

/**********************************************************************************************************************/
/* FRAME - SETTINGS ACCOUNTSNAV                                                                                       */
/**********************************************************************************************************************/
.accountsNav{                                                                                                               /*rework sizing*/
    height:69dvw;
    max-width:450px;
    min-width:350px;
    width:15%;

    margin-top:-1rem;

    border-right:2px solid var(--tan_light);
}

.accountsNav_list{
    margin:0.75rem 0 1rem 0;

    font-size:0.9rem;
    font-weight:400;
    line-height:1.5rem;
    list-style-type:none;

    color:var(--tan_dark);
}

.accountsNav_listItem{
    padding:0 0 0 1rem;
}

.accountsNav_listItem:hover{
    cursor:pointer;
    background-color:var(--tan_light);
}

/**********************************************************************************************************************/
/* FRAME - CONTENT                                                                                                    */
/**********************************************************************************************************************/
.content_container{
    display:flex;
}

.content_subcontainer{
    display: block;

    width:100%;

    margin-left: 1rem;
}

.content_table{
    table-layout: fixed;

    width:auto;

    margin-bottom:2rem;

    border-collapse: collapse;
}

.table_title{
    padding:0.5rem 0 0.5rem 0.5rem;

    text-align:left;

    font-size: 0.9rem;

    background-color:var(--green_light);
    color:var(--tan_dark);

    border-bottom: solid 10px var(--white_pure);
}

th{
    padding:0 0 0 0.5rem;

    text-align:left;

    font-size: 0.85rem;
    font-weight: 700;

    color:var(--tan_dark);

    border-bottom: solid 10px var(--white_pure);
}

td{
    padding: 0.3rem 0.2rem 0 0.5rem;

    font-size:0.85rem;

    color:var(--tan_dark);

    border-bottom: solid 1px var(--tan_medium);
    cursor:default;
}

.broad{
    width:20em;
    white-space: nowrap;
}

.mid{
    width:10em;
    white-space: nowrap;
}

.skinny_button{
    width: 80px;
    white-space: nowrap;
    text-align: center;
}

.locked_button{
    background-color: lightgray;
}

.locked_button:hover{
    background-color: lightgray;
    cursor: default;
}

.skinny{
    width: 65px;

    padding-left:0;
    padding-right:0;

    text-align: center;
    white-space: nowrap;
}

.rightAlign{
    text-align: right;
}