.RadMenu_WebBlue .rmRootToggle 
{
    border-color: #4e667e;
    color: #0d202b;
    background-color: #d7e2e7;
    background-image: linear-gradient(#e0e7ed, #c2d2dd 50%, #a3baca 50%, #d7e2e7);
}
.RadMenu_WebBlue .rmRootToggle:active,
.RadMenu_WebBlue .rmRootToggle.rmExpanded
 {
  border-color: #133c44;
  color: #0d202b;
  background-color: #7abace;
  background-image: linear-gradient(#8ebcd4, #64a3c0 50%, #368eb1 50%, #7abace); 
}

.RadMenuPopup_WebBlue 
{
  color: #000000;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  border-color: #768ca5;
  background-color: #ffffff; 
}
  .RadMenuPopup_WebBlue:before 
  {
    border-bottom-color: #768ca5; 
  }
  .RadMenuPopup_WebBlue:after 
  {
    border-bottom-color: #ffffff; 
  }
  .RadMenuPopup_WebBlue .rmItem 
  {
    border-color: #768ca5; 
  }
  .RadMenuPopup_WebBlue .rmItem.rmSelected 
  {
    color: #ffffff;
    background-color: #7fbdd1; 
  }
  .RadMenuPopup_WebBlue .rmLoading:after 
  {
    background-color: rgba(255, 255, 255, 0.5); 
  }
  .RadMenuPopup_WebBlue .rmLoadingIcon:after 
  {
    background-image: url('../WebBlue/Common/loading_small.gif'); 
  }

/* #17000 PPI Customized Style*/
.RadMenu .rmRootToggle 
{
    height:25px !important; /*#21156 reduce default toogle icon width and height to 25px*/
    width:25px !important;
    background-color:#ffffff;
    background-image:none;
    border:none !important;
}
.RadMenu_WebBlue .rmRootToggle::before 
{
    content: '\2807' !important;
    font-size: 23px !important;
    background-image:none !important;
    line-height:25px !important;
    color:#ffffff;
    background-color:#748ea3 !important;
    width:25px; /*#21156 reduce default toogle icon width and height to 25px*/
    height:25px;
}
.RadMenu_WebBlue .rmRootToggle:active, 
.RadMenu_WebBlue .rmRootToggle.rmExpanded 
{
    background-color:#748ea3;
    background-image:none;
    border:none !important;
}
@media screen and (max-width: 2048px) /* #23026 when screen is narrower than 2049px, such as iPad(768x1024) or iPad Pro (1024 x1360), a large tablet could reach 2048 x 1536*/
{
    /* #23026 move .rmSlide .rmGroup.rmRootGroup and .RadMenuPopup from max-width: 768px, as it needs to apply for iPad too */
    .RadMenuPopup .rmSlide,
    .RadMenuPopup .rmSlide .rmGroup.rmRootGroup 
    {
        height:200px !important;
        max-height:200px !important;
    }
    .RadMenuPopup 
    {
        font-size: 14px !important;
        z-index: 200 !important;
        min-width: 150px !important;
    }
    /* #23317 */
    .RadMenu .rmRootToggle 
    {
        margin-left:20px;
    }
    .RadMenu_WebBlue .rmRootToggle::before 
    {
        content: 'MENU' !important;
        font-family: "Segoe UI",Arial,Helvetica,sans-serif !important;
        font-size: 16px !important;
        background-image:none !important;
        line-height:25px !important;
        color:#ffffff;
        background-color:#748ea3 !important;
        width:25px;
        height:25px;
    }
}
@media screen and (max-width: 768px) /*when screen is narrower than 769px*/
{
    #MenuBar.mainMenu .RadMenu.RadMenu_WebBlue 
    {
        float: right;
        margin-right:24px;
    }
    .RadMenuPopup 
    {
        z-index: 7000 !important;
    }
    .RadMenu .rmRootToggle 
    {
        height:30px !important; /*#21156 for mobile device screen narrower than 769px, set toogle icon width and height to 30px*/
        width:30px !important;
        background-color:#ffffff;
        background-image:none;
        border:none !important;
    }
    .RadMenu_WebBlue .rmRootToggle::before 
    {
        content: '\2807' !important;
        font-size: 27px !important;
        background-image:none !important;
        line-height:28px !important;
        color:#ffffff;
        background-color:#748ea3 !important;
        width:30px; /*#21156 for mobile device screen narrower than 769px, set toogle icon width and height to 30px*/
        height:30px;
    }
}
/* end #17000 PPI Customized Style*/