/*  .+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.  */
/* (      __  __                         _         _   _             _             _              ____ ____ ____         ) */
/*  )    |  \/  | __ _ _ __  _   _  __ _| |___    | \ | | __ ___   _(_) __ _  __ _| |_ ___  _ __ / ___/ ___/ ___|       (  */
/* (     | |\/| |/ _` | '_ \| | | |/ _` | / __|   |  \| |/ _` \ \ / / |/ _` |/ _` | __/ _ \| '__| |   \___ \___ \        ) */
/*  )    | |  | | (_| | | | | |_| | (_| | \__ \   | |\  | (_| |\ V /| | (_| | (_| | || (_) | |_ | |___ ___) |__) |      (  */
/* (     |_|  |_|\__,_|_| |_|\__,_|\__,_|_|___/___|_| \_|\__,_| \_/ |_|\__, |\__,_|\__\___/|_(_) \____|____/____/        ) */
/*  )                                        |_____|                   |___/                                            (  */
/* (                                                                                                                     ) */
/*  "+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"+.+"  */

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████             Navigator            ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Navigator{
    position: fixed;
    /* top = ToolbarHeight */
    top: 35px;
    left: 0;

    /* NOTE: Height dependent on .Tab divs (25px) and if they flex-wrap (+25px each wrap) */
    /* NOTE: I have to set min-height for JS to be able to get a readable Height of the element (Which it does not do when height is set to auto) */ 
    min-height: 25px;
    height: auto;
    width: 100%;
    background-color: #4c4c4c;

    display: flex;
    flex-wrap: wrap;

    font-weight: bold;
}

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Navigator Tabs          ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Tab{
    min-width: auto;
    max-width: 300px;
    height: inherit;
    display: block;
    height: 25px;

    display: flex;
    flex-direction: row;
    flex-direction: nowrap;
}

.TabActive{
    background-color: #7acbf5;;
}


button.TabButton{
    background-color: #2d2d2d00;
    border: none;

    text-align: left;
    color: white;
    font-family: 'Sofia Sans';
    /*margin: none;*/

    height: inherit;
    max-height: inherit;
    cursor: pointer;
}
button.TabOpen{
    font-size: 115%;
    /* NOTE: max-width must be 25px less than max-width of .Tab */
    flex: 250px;
    min-width: 0;
    max-width: 250px;
    min-height: 0;
    max-height: 25px;
    cursor: pointer;
    overflow: hidden;
}
button.TabClose{
    font-size: 85%;

    position: static;
    cursor: pointer;

    top: 0;
    right: 0;

    flex: 25px;
    min-width: 25px;
    max-width: 25px;
    min-height: 25px;
    max-height: 25px;
}