/*************************************************************************************************************************/
/**** Supporting Styles ****/
/*************************************************************************************************************************/

.hasSubMenuHorizontalSymbolYellow {
	float: right !important;
	padding-top: 3px;
	padding-right: 5px;
	color: yellow;
}

.hasSubMenuHorizontalSymbolBlue {
	float: right !important;
	padding-top: 3px;
	padding-right: 5px;
	color: #294a70;
}


/*************************************************************************************************************************/
/**** FIRST LEVEL MENU ****/
/*************************************************************************************************************************/

#MenuWrapper {
    font-size: 100%;
    background-color: red;
    width: 100%;
   	line-height: 2;
   	color: white;
   	font-weight: bold;
   	text-align: center;
}

#MenuWrapper .paddingLeft10px {
    padding-left: 10px;
}

/* We remove the margin, padding, and list style of UL and LI components */
#MenuWrapper ul, #MenuWrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
    display: inline-block;
    text-align: left;
}


/* We apply background color and border bottom white and width to 150px */
#MenuWrapper ul li{
    /*padding-left: 10px;*/
    /*background-color: #294a70;*/  /*rgb(40,91,77);#294a70; - Blue */
    /*cursor:pointer;*/
}

/* We apply the background hover color when user hover the mouse over of the li component */
#MenuWrapper ul li:hover{
    background-color: orange;
    position:relative;
    color: #294a70;
}

/* We apply the link style */
#MenuWrapper ul li a{
    padding:5px 15px;
    color:white;
    display:inline-block;
    text-decoration:none;
}

#MenuWrapper ul li a:hover{
    color: #294a70;
    /*text-decoration: underline;*/
}

/*************************************************************************************************************************/
/**** SECOND LEVEL MENU ****/
/*************************************************************************************************************************/

/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#MenuWrapper ul li ul{
    position:absolute;
    display:none;
    background-color: white;
	border: 1px solid #333;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#MenuWrapper ul li:hover ul{
    left:0;
    top:2.2;
    width: max-content;
    min-width: 227px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#MenuWrapper ul li ul li{
    display: block;
    background-color: #fefbe7;
    /* border-top: 1px solid white; */
}

/* We change the background color for the level 2 submenu when hovering the menu */
#MenuWrapper ul li:hover ul li:hover{
	color: #0065A2;
	background-color: #333;
}

/* We style the color of level 2 links */
#MenuWrapper ul li ul li a{
	text-decoration: none;
    display:inline-block;
    color: #0065A2;
}

#MenuWrapper ul li ul li a:hover {
	color: yellow;
	/*text-decoration: underline;*/
}

/*************************************************************************************************************************/
/**** THIRD LEVEL MENU ****/
/*************************************************************************************************************************/

/* We need to hide the 3rd menu, when hovering the first level menu */
#MenuWrapper ul li:hover ul li ul{
      /*position:absolute;
      display:block;
      float:top;*/
    /*border: 1px solid #fb480d;*/
    border: 1px solid #333;
    display: none;
    float: right;
    min-height: 100%;
    width: auto;
    box-sizing: content-box;
    -webkit-box-shadow: 2px 4px 5px 0 rgba(97,95,95,0.49);
    box-shadow: 2px 4px 5px 0 rgba(97,95,95,0.49);
}

/* We show the third level menu only when they hover the second level menu parent */
#MenuWrapper ul li:hover ul li:hover ul{
    left:226px;
    top:-1px;
    width: max-content;
    display:block;
}

/* We change the background color for the level 3 submenu*/
#MenuWrapper ul li:hover ul li:hover ul li{
	background-color: #fefbe7;
    color: yellow;
    /* border-top: 1px solid #fb480d; */
}


/* We change the background color for the level 3 submenu when hovering the menu */
#MenuWrapper ul li:hover ul li:hover ul li:hover{
	background-color: #333;
    color: yellow;
}

/* We change the level 3 link color */
#MenuWrapper ul li:hover ul li:hover ul li a{
    color: #0065A2;
	text-decoration: none;
    display:inline-block;
}

#MenuWrapper ul li:hover ul li:hover ul li a:hover {
	color: yellow;
	/*text-decoration: underline;*/
}


/*************************************************************************************************************************/
/**** FOURTH LEVEL MENU ****/
/*************************************************************************************************************************/

/* We need to hide the 4th menu, when hovering the second level menu */
#MenuWrapper ul li:hover ul li:hover ul li ul{
    /*border: 1px solid #fb480d;*/
    border: 1px solid #333;
    display: none;
    float: right;
    min-height: 100%;
    width: auto;
    box-sizing: content-box;
    -webkit-box-shadow: 2px 4px 5px 0 rgba(97,95,95,0.49);
    box-shadow: 2px 4px 5px 0 rgba(97,95,95,0.49);
}

/* We show the 4th level menu only when they hover the third level menu parent */
#MenuWrapper ul li:hover ul li:hover ul li:hover ul{
    left:226px;
    top:-2px;
    width: max-content;
    display:block;
}

/* We change the background color for the level 4 submenu*/
#MenuWrapper ul li:hover ul li:hover ul li:hover ul{
	background-color: white;
    color: yellow;
}


/* We change the background color for the level 4 submenu when hovering the menu */
#MenuWrapper ul li:hover ul li:hover ul li:hover ul li:hover{
	background-color: #333;
    color: yellow;
}

/* We change the level 4 link color */
#MenuWrapper ul li:hover ul li:hover ul li:hover ul li a{
    color: #0065A2;
	text-decoration: none;
    display:inline-block;
}

#MenuWrapper ul li:hover ul li:hover ul li:hover ul li a:hover {
	color: yellow;
	/*text-decoration: underline;*/
}