/* Places the Menu Bar - File, Edit, View etc. at the top */
.titlebar-buttonbox-container {
position: fixed;
top: 0px;
right: 0px;}
#button-appmenu {
position: fixed;
top: 0px;
right: 10px;}
/* Color of menu bar - white, Color of the text is black */
#toolbar-menubar {
order: 1;
background-color: #FFFFFF !important;
color: #000000 !important;}
unified-toolbar {
order: 2;}
#tabs-toolbar {
order: 3;
background-color: #D3D3D3 !important; /* light grey */
color: #000000 !important; /* black */}
/* Message List Pane - Background-color odd rows - light grey & text color dark green */
table.tree-table tr:nth-child(odd)
{background-color: #F7F7F6; color: #0D3C39 !important; font-family: 'Calibri'; font-size: 14px; font-weight: normal; !important;}
/* Message List Pane - Background-color even rows - white color & text color dark green */
table.tree-table tr:nth-child(even)
{background-color: #FFFFFF; color: #0D3C39 !important; font-family: 'Calibri'; font-size: 14px; font-weight: normal; !important;}
/* Message List Pane - light blue color when row is selected */
[is="tree-view-table-body"] > .selected {
color: black !important;
background-color: #52aaff !important;}
/* Message List Pane - light green specified on hover with left side red border */
tr[is="thread-row"]:hover {
background-color: #66CDAA !important;
border-left: 5px solid red; !important;}
/* Message List Pane - Grid lines */
#threadTree table[is="tree-view-table"] {
border-collapse: collapse !important;}
#threadTree tr[is="thread-row"] {
border-bottom: 1px solid green !important;}
#threadTree tr[is="thread-row"] td {
border-right: 1px solid green !important;}
/* Folder Pane - background color is light grey */
#folderPane, #folderPaneHeaderBar {
background-color: #F0F0F0 !important;}
/* Folder Pane - folder names, font, font size - text color is dark green*/
.name {color: #0D3C39 !important; font-family: 'Georgia'; font-size: 12px; font-weight: 600; !important;}
/* Folder Pane - hover color, once a row is clicked on it will either display the Windows Titlebar color you choose if you do not specify a color here. The hover color will continue on any other row you hover over. hover color is light green, border-left is red */
.container:hover {
background-color: #66CDAA !important;
border-color: transparent !important;
border-left: 3px solid #FF0000 !important;}
/* Folder Pane - light blue specified */
li.selected > .container {
color: black !important;
background-color: #52aaff !important;
border: 0px solid #000000 !important;}
/* this is the color when you drag an email to another folder and that folder is highlighted. Light green color */
#folderTree:focus-within li.selected > .container,
#folderTree li.drop-target > .container {
background-color: #66CDAA !important;
border: 0px solid red !important;
border-radius: 0px;}
/* This is the height of the From Me, To, Subject lines from each other. The bigger the number the wider the spread in height */
#messageHeader {row-gap: 0px !important;}
/* Write Window Contacts Panel. Write New Message Window: address background-color & color AND hover background-color & color */
/* hover is light green */
#abResultsTree tbody tr:hover {
background-color: #66CDAA !important;
color: black !important; /* text color */
outline-offset: -0px !important;
outline: 0px solid #000000 !important;
}
/* selected is light blue */
#abResultsTree tbody tr:is(.current,.selected) {
background-color: #52aaff !important;
color: black !important; /* text color */
outline-offset: -0px !important;
outline: 0px solid #000000 !important;
}
