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

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Toolbar General         ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Toolbar{
    position: fixed;
    top: 0;
    left: 0;

    height: 35px;
    width: 100%;
    background-color: #2d2d2d;

    text-align: left;
    z-index: 9999;
}
a.ToolbarLink{
    height: inherit;
    width: auto;
}
img.ToolbarLogo{
    height: inherit;
    
    /*Top Right Bottom left */
    margin: 0 10px 0 0;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Toolbar Buttons         ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
button.ToolbarButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;

    /*Top Right Bottom left */
    margin: 2px 1px 0 1px;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;
}
button.ToolbarButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}

img.ToolbarButtonIcon{
    display: block;
    margin-left: auto;
    margin-right: auto;

    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████      Toolbar Dropdown Buttons    ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.ToolbarDropdownButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;
    
    width: 250px;
    text-align: left;

    /*Top Right Bottom left */
    margin: 2px 1px 0 1px;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;

    color: white;
    font-family: 'Sofia Sans', Times New Roman;
    font-size: 115%;
}
.ToolbarDropdownButton:after{
    content: '\2228';
    color: white;
    float: right;
    margin-left: 5px;
    font-size: 75%;
}
.ToolbarDropdownButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}


.ToolbarDropdown{
    position: absolute;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    height: auto;
    width: 250px;
    background-color: #2d2d2d;

    flex-direction: column;

    display: none;    

    z-index: 1;

    /* NOTE: FIND DYNAMIC WAY OF SETTING X COORDINATE 
    translate: 117px 38px;*/
}

.ToolbarDropdownShow{
    display: flex;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████      Toolbar Dropdown - MSN      ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
#ToolbarMSNFilterDropdown{
    /*display: flex;*/

    /* X Y */
    translate: 103px -5px;

    background-color: #3d3d3d;
}

/* Checkbox Inputs and Labels */
input.checkbox.ToolbarMSNCheckBox{
    width: 13px;
}
label.DropdownMSNLabel{
    display: block;
    /* NOTE: width = .ToolbarDropdown width - 2px*/
    width: 248px;
    color: #fff;
}
label.DropdownMSNLabel:hover{
    cursor: pointer;
    color: #000;
    background-color: #7acbf5;
}

div.ToolbarDropdownText{
    display: block;
    /* NOTE: width = .ToolbarDropdown width - 2px*/
    width: 248px;
    color: #fff;

    /* top-right-bottom-left */
    padding: 2px 2px 2px 5px;

    font-size: 105%;
}
div.ToolbarDropdownTextEngines{
    margin-top: 5px;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████  Toolbar Dropdown - Publication  ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
#PublicationDropdown{
    /*display: flex;*/

    /* X Y */
    translate: 393px -5px;

    width: 400px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.PublicationDropdownButton{
    width: 100%;
    text-align: left;

    /*Top Right Bottom left 
    margin: 2px 1px 0 1px;*/

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;

    color: white;
    font-family: 'Sofia Sans', Times New Roman;
    font-size: 115%;

    display: none;
}
.PublicationDropdownButtonShow{
    display: block;
}
.PublicationDropdownButton:after{
    content: '\2228';
    color: rgb(255, 255, 255);
    float: right;
    margin-left: 5px;
    font-size: 75%;
}
.PublicationDropdownButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}

.PublicationDropdown{
    position: static;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    height: auto;
    width: 100%;
    background-color: #3e3e3e;

    flex-direction: column;

    display: none;    

    z-index: 1;
}
/* Toggled when opening and closing the dropdown through its applicable dropdown button */
.PublicationDropdownShow{
    display: flex;
}
/* Toggled when hiding and showing the dropdownbuttons */
.PublicationDropdownHide{
    display: none;
}


/* Span and Publication Buttons */
span.PublicationDropdownSpan{
    color: white;
    padding: 5px;
    font-weight: normal;
    font-size: 110%;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    display: none;
    background-color: #5d5d5d;
}
span.PublicationDropdownSpanShow{
    display: block;
}
button.PublicationButton{
    font-family: 'Sofia Sans', Times New Roman;
    font-size: 110%;
    background-color: #5d5d5d;
    border-style: none;

    text-align: left;
    color: white;

    padding: 5px;

    display: none;
}
button.PublicationButton:hover{
    background-color: #7acbf5;
    color: #000;
}
button.PublicationButtonShow{
    display: block;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Toolbar Search          ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.ToolbarSearchWrapper{
    position: fixed;
    right: 0;
    top: 0;    
    display: flex;
    flex-wrap: nowrap;
    width: 350px;
    height: inherit;    
}

input.ToolbarSearch{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;
    font-size: 20px;
    font-family: 'Sofia Sans';
    padding: 5px;
    outline: none;
    border-style: solid;
    border-color: rgb(255, 255, 255);
}

button.ToolbarSearchButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    position: fixed;
    right: 0;
    top: 0;  
    padding: 5px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    background-color: #ffffff;
    cursor: pointer;
}