/*
   menus CSS
*/    

:root
{
 --candyred:        #F5876E;
 --candydarkred:    #E77969;
 --candyblue:       #62A9DC;
 --candydarkblue:   #549BCE;  
 --candygreen:      #8EBD40;
 --candydarkgreen:  #81B033;
 --candypurple:     #988CC3;
 --candydarkpurple: #8A7EB5;
 --candysand:       #D8C86E;
 --candydarksand:   #CABA60;
 --candygrey:       #ddd;
 --candydarkgrey:   #ccc;
 --lwblue:          #0C4964;
 --lwltblue:        #3C7994; 
}

/* DESKTOP HISTORY ------------------------------------------------------ */
.Dhistory
{
 margin: auto;
 height: 20px;
 cursor: pointer;
}        
.DhistoryText
{
 font-size: 13px;
}
.DhistoryNoHover
{
 color: var(--lwblue); 
 background-color: #eee;
}    
.DhistoryHover
{
 color: white;
 background-color: var(--lwltblue);      
}
.Dicon  
{
 vertical-align: middle;
 padding: 0 5px 0 0; 
 cursor: pointer;  
}



/*
//.Dhistory:hover
//{
// background-color: var(--lwltblue);
// color: white;
//}     
//.Dhistory2:hover
//{
// color: white;
//}
*/   

/*
 color: var(--menublue);
 font-size: 16px;
 padding: 0 0 0 5px;
 vertical-align: middle;
 cursor: pointer;
}
.slidehistory:hover
{
 color: white;
 font-weight: bold;
}
img.slidehistory
{
 vertical-align: middle;
 padding: 0 5px 0 0;   
}

*/

/* HORIZONTAL MENU ------------------------------------------------------ */

.horizontalmenu
{
 display: none;    
 overflow: clip;
 /* margin: 0 5px 0 0; */   
}
.hmExtras
{
 background-color: #eee;
 padding: 7px 0 0 0;
 /* border-top: 1px solid grey; */
}    
#hm-extrasline
{
 background-color: #eee;
 width: 100%;
 text-align: center;
 padding: 0 0 8px 0;
}
.hmenuline
{
 width: 100%; 
 /* display: table; */
 padding: 0 6px 6px 0;
 background-color: #eee;
 /* margin-right: 5px; */
 padding-left: 10%;
}
.hmenuextrasdata
{
 font-size: 13px;
}

.hmButton
{  
 font-size: 13px;
 color: white;
 padding: 0 0 0 10px;
 width: 250px;  
 margin: 2px 0 2px;
 cursor: pointer;
 border: none;
 padding: 2px;
 /* -webkit-box-shadow: 2px 2px 9px -3px rgba(0,0,0,0.51); */
 /* box-shadow:         2px 2px 9px -3px rgba(0,0,0,0.51); */
}
.hmIndex
{
 background-color: #999;
}
.hmIndex a
{      
 text-decoration: none;
 color: white;
}
.hmIndex:hover { background-color: #777; }

.hmUpdate
{
 background-color: var(--candyred);
 display: none;
 
}
.hmUpdate:hover { background-color: var(--candydarkred); }

.hmOrder
{
 background-color: var(--candyblue); 
 display: none;
}
.hmOrder:hover { background-color: var(--candydarkblue); }  

.hmHidden
{
 background-color: var(--candypurple); 
 display: none; 
}
.hmHidden:hover { background-color: var(--candydarkpurple); }

.hmHelp
{
 background-color: var(--candysand);
}
.hmHelp:hover   { background-color: var(--candydarksand); }
    
#hm-first-table
{
 width: 100%;
 display: table;
 background-color: #eee;
 padding: 0 0 6px 0;
 border-bottom: 1px solid grey;
 table-layout: fixed;   
}
#hm-table
{
 width: 100%;
 display: table;
 background-color: #eee;
 padding: 0 0 6px 0;
 table-layout: fixed;
}
#hm-body
{
 display: table-row-group;
}
#hm-row
{
 display: table-row;
 width: 100%;
}
#hm-cell1
{
 display: table-cell;
 width: 10%; 
}   
#hm-cell2
{
 display: table-cell;
 width: 30%;    
}    
#hm-cell3
{
 display: table-cell;
 width: 50%;  
}   
#hm-cell4
{
 display: table-cell;
 width: 10%;
 flex: 0 0 10%;
}
#hm-cell5
{
 display: table-cell;
 width: 90%;
}     
#hm-cell6
{
 display: table-cell;
 width: 100%;
 padding-left: 10%;
}          
#hm-cellcenter
{
 display: table-cell;
 width: 100%;
 text-align: center;
}
.hm-cell
{  
 border: 1px solid red;   
}

/* SIDE MENU DESKTOP ------------------------------------------------------ */


.smupdate
{
 display: none;
 color: white;
 background-color: var(--candyred);
 cursor: pointer;
 margin-bottom: 5px;
}
.smupdate:hover
{
 background-color: var(--candydarkred);
}


/*  SIDE MENU INDEX */
.smIndex
{
 color: black;
 background-color: var(--candygrey);
 cursor: pointer;    
 margin-bottom: 5px; 
 border: none;
 width: 100%;
 font-size: 13px;
}
.smIndex:hover
{
 background-color: var(--candydarkgrey);
}

/*  SIDE MENU HIDDEN */    
.smHidden
{
 color: white;
 background-color: var(--candypurple);
 cursor: pointer;  
 margin-bottom: 5px;
 border: none;
 width: 100%;
 font-size: 13px;
}       
.smHidden:hover { background-color: var(--candydarkpurple); }
.smHiddenmenu
{
 position: relative;
 display: inline-block;
}  
.smmenu-content
{
 display: none;
 position: absolute; 
 text-align: center;
 margin: 7px 0 0 100px;
 padding: 5px 10px;
 background-color: white;
 min-width: 180px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 9999999999999;
}
.smmenu-content a
{ 
 font-family: inherit;
 color: black;
 background-color: #ddd;
 /* padding: 12px 16px; */
 text-decoration: none; 
 margin: 3px 0 0 0;
 padding: 5px;
 display: block;
}  
.smmenu-content a:hover
{
 background-color: #ccc;
}    
.smmenu-span
{ 
 font-family: inherit;
 color: black;
 background-color: #ddd;
 /* margin: 3px 0 0 0; */
 height: 25px;
 width: 100%;
 padding: 5px;
 text-decoration: none;
 display: block;
 cursor: pointer;
 /* border: 1px solid red; */

}  
.smmenu-span:hover
{
 background-color: #ccc;
}      
.smmenu-spanHilite
{ 
 font-family: inherit;
 color: white;
 background-color: #ab0000;
 margin: 3px 0 0 0;
 padding: 5px;
 text-decoration: none;
 display: block;
 cursor: pointer;
}
.smshow { display: block; }
.smx
{
 padding: 4px 0 0 5px;
 font-size: 16px;
 cursor: pointer;
 vertical-align: baseline;
 text-align: right;
}


/*  SIDE MENU ORDER */
.smOrder
{
 color: white;
 background-color: var(--candyblue);
 cursor: pointer;    
 margin-bottom: 5px; 
 border: none;
 width: 100%;
 font-size: 13px;
}
.smOrder:hover
{
 background-color: var(--candydarkblue);
}    

/*  SIDE MENU HELP */
.smHelp
{
 display: block;
 color: white;
 background-color: var(--candysand);
 cursor: pointer;  
 margin-bottom: 5px;
 width: 100%;
 height: 18px;
 border: none;
 padding: 0;
}
.smHelp:hover
{
 background-color: var(--candydarksand);
}         

/*  SLIDE MENU HELP */
.sLhelp
{
 display: block;
 color: white;
 background-color: var(--candysand);
 cursor: pointer;  
 margin-bottom: 5px;
 width: 100%;
 height: 18px;
 border: none;
 padding: 0;
}
.sLhelp:hover
{
 background-color: #fff;
}    

/*  SIDE MENU SHARE */
.smShare
{
 display: block;
 color: white;
 background-color: var(--candygreen);
 cursor: pointer;  
 margin: 0 0 5px 0;
 width: 100%;
 height: 18px;
 border: none;
 padding: 0;
}
.smShare:hover
{
 background-color: var(--candydarkgreen);
}
.smShareButton
{
 font-family: inherit;
 font-size: 1em;
 margin: 5px 0 0 0;
 width: 120px;
}
smShareButton > img,
smShareButton > span
{
 vertical-align: middle;
}