div#page-menu.prod {
   min-width: 1200px;
   background-color: #F2F3F9;
}

div#page-menu.sandbox {
   min-width: 1380px;
   background-color: rgba(198,48,123,0.15);
}

div#page-menu a {
   text-decoration: none;
}

div#page-menu table {
   width: 100%;
   border-spacing: 0;
}

div#page-menu div {
   white-space: nowrap;
}

div#page-menu div.main-menu-cont {
   display: inline-block;
}

div#page-menu div.logo {
   width: 170px;
   padding: 16px 50px 16px 20px;
   display: inline-block;
}

div#page-menu div.logo-sandbox {
   width: 170px;
   padding: 5px 0px 5px 10px;
   display: inline-block;
   border-right:solid #f0c6da;
}

div#page-menu div.logo img {
   height: 28px;
   max-width: 162px;
}

div#page-menu div.menu {
   height: 60px;
   vertical-align: middle;
   display: inline-block;
}

div#page-menu div#menu.sandbox {
   background-color: #fff;
}

div#my-account-container {
   float: right;
   vertical-align: middle;
   display: inline-block;
   position: absolute;
   cursor: pointer;
   background-color: #fff;
}

div#my-account-container a {
   color: #FFFFFF;
   font-size: 11px;
   font-weight: bold;
   display: block;
   margin: 0;
   padding: 3px 15px;
   white-space: nowrap;
}

div#my-account-container a:hover {
   color: #FFFFFF;
}

div#page-menu div.menu a {
   font-size: 16px;
   font-weight: 400;
   padding: 21px 7px;
   display: block;
}

div#page-menu div.menu a.active {
   color: #00134E;
   font-weight: 600;
}

div#page-menu div.menu a::after {
   display: block;
   content: attr(data-text);
   font-weight: 600;
   height: 0;
   overflow: hidden;
   visibility: hidden;
}

ul#main-menu > li > a.inactive {
   color: #038015;
}

ul#main-menu > li.ui-state-active > a.inactive {
   color: #00134E;
   margin: 0;
}

div#page-menu div.menu a:hover
{
   color: #00134E;
}

div#page-menu ul.sub-menu {
   box-shadow: 4px 4px 5px -3px rgba(0,0,0,0.349019607843137);
   -moz-box-shadow: 4px 4px 5px -3px rgba(0,0,0,0.349019607843137);
   -webkit-box-shadow: 4px 4px 5px -3px rgba(0,0,0,0.349019607843137);
}

div#page-menu ul.sub-menu li {
   padding-right: 29px;
}

div#page-menu ul.sub-menu li, div#page-menu ul.sub-menu li a {
   font-size: 14px;
   font-weight: 400;
   color: #00134E;
}

div#page-menu ul.sub-menu li.ui-state-active > a {
   background-color: #038015;
   color: #FFFFFF;
}

div#page-menu ul.sub-menu li a {
   padding: 12px 15px;
   width: 100%;
   margin: 0px;
}

.ui-menu > li > a { display: block; clear: both; }

button#my-account {
   color: #485490;
   font-size: 16px;
   padding: 20px 10px;
   text-align: center;
   background: 20px #F2F3F9;
   width: 143px;
   height: 20px;
}

button#my-account.prod {
   background: 20px #F2F3F9;
}

button#my-account.sandbox {
   background: 20px rgba(198,48,123,0.15);
}

/*reset the button style from page.css*/
#my-account-container button#my-account {
   display: block;
   white-space: normal;
   font-weight: normal;
   border: none;
   border-radius: 0px;
   margin: 0px;
   min-width: 0px;
   box-sizing: content-box;
}

button#my-account.select {
   color: #FFFFFF;
   background: 20px #485490;
}

div#my-account-menu {
   display: none;
   background-color: #485490;
   font-size: 14px;
   text-align: left;
   width: 133px;
   position: absolute;
   z-index: 9999;
}

div#my-account-menu:last-child {
   padding: 3px 15px 15px;
}

#main-menu {
   list-style-type: none;
   height: 60px;
   padding-left: 0px;
   margin: 0px;
}

#main-menu > li > a > span.ui-icon {
   display: none;
}

#main-menu > li {
   float: none;
   display: inline-block;
   white-space: nowrap;
}

#main-menu.ui-widget-content, div#page-menu .ui-widget-content {
   border: none;
   background-color: #F2F3F9;
}

ul#main-menu.sandbox {
   border: none;
   background: rgba(198,48,123,0.15)
}

#main-menu a.ui-state-active
{
   border: none;
   outline: 1px dotted #038015;
   margin: 0px;
   background-color: #F2F3F9;
}

div#page-menu div.menu #main-menu a.ui-state-active{
   color: #00134E;
}

#main-menu .ui-icon, #main-menu .ui-widget-content .ui-icon,
#main-menu .ui-state-active .ui-icon, #main-menu .ui-button:active .ui-icon {
   background-image: url("../images/nav_triangle_right.png");
}

div#page-menu div.menu ul.sub-menu li:hover .ui-icon,
div#page-menu div.menu ul.sub-menu li.ui-state-active .ui-icon {
   background-image: url("../images/nav_triangle_right_hover.png");
}

li.ui-menu-item.ui-state-active {
   background-color: #F2F3F9;
   color: #00134E;
   border: none;
   margin: 0;
}

div#page-menu ul.sub-menu li.ui-menu-item:hover {
   background-color: #038015;
   border: none;
}

div#page-menu ul.sub-menu li.ui-menu-item:hover > a {
   color: #FFFFFF;
}

div#page-menu div.menu ul.sub-menu a:hover {
   color: #FFFFFF;
}

div#page-menu div.menu #main-menu ul.sub-menu a.ui-state-active{
   color: #FFFFFF;
   background-color: #038015;
   border: none;
}

/**
 * Reduce size of main menu when screen get narrower - PROD mode
 */

@media (max-width: 1390px) {
   div#page-menu.prod div.logo {
   width: 170px;
   padding: 16px 10px;
   }
   button#my-account.prod {
      padding: 20px 5px;
      text-align: left;
      padding-left: 20px;
      width: 138px;
   }
}

/**
 * Reduce size of main menu when screen get narrower - SANDBOX mode
 */
@media (max-width: 1545px) {
   div#page-menu.sandbox div.logo {
   width: 170px;
   padding: 16px 10px;
   }
   button#my-account.sandbox {
      padding: 20px 5px;
      text-align: left;
      padding-left: 20px;
      width: 138px;
   }
}

/**
 * Move My Account on resize in prod mode
 */
@media(min-width:1330px){
  div#my-account-container.prod{
    left:calc(100vw - 185px);
  }
}
@media(max-width:1330px){
  div#my-account-container.prod{
    left:1200px;
  }
}

/**
 * Move My Account on resize in SANDBOX mode
 */
@media(min-width:1545px){
  div#my-account-container.sandbox{
    left:calc(100vw - 165px);
  }
}
@media(max-width:1545px){
  div#my-account-container.sandbox{
    left:1380px;
  }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}