#alarm_volume_handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    font-size: 11px; 
  }
  html, body { 
      width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 10000; 
  }
  
  body { position: fixed; overflow: hidden; }
    
  
  
  

  
  
  .flexrow { display: flex; flex-flow: row; box-sizing: border-box; padding: 6px 0px 0 8px; line-height: 1; }
  .flexwrap { display: flex; flex-flow: wrap; box-sizing: border-box; padding: 6px 0px 0 8px; line-height: 1; }
  
  .flexsmallrow { display: flex; flex-flow: row; box-sizing: border-box; padding: 8px 16px 0 8px; line-height: 1; }
  .flexrownsp { display: flex; flex-flow: row; box-sizing: border-box; padding: 12px 0px 0 0; line-height: 1; }
  .flexsmallrownsp { display: flex; flex-flow: row; box-sizing: border-box; padding: 8px 0 0 0; line-height: 1; }
  .flexcol { display: flex; flex-flow: column;  box-sizing: border-box; padding: 0 16px 0 0; }
  .flexcolnp { display: flex; flex-flow: column;  box-sizing: border-box; padding: 0 0 0 0; }
  .flexhcenter { justify-content: center; }
  .flexhstart { justify-content: flex-start; }
  .flexvcenter { align-items: center; align-content: center; }
  
  
  @media screen and (min-width: 1px) 
  {
    .flexrow { display: flex; flex-flow: row; box-sizing: border-box; padding: 6px 0px 0 8px; line-height: 1; }
  }
  
  
  .toggle { width: 20px; height: 20px; cursor: pointer; box-sizing: border-box; padding: 0px; margin: 0px; }
  .togglelabel { box-sizing: border-box; padding: 0 0 0 16px; margin: 0; cursor: pointer; font-size: 12px; }
  
  #toggleheader { font-size: 14px; font-weight: bold; color: #FFFF44; box-sizing: border-box; padding: 0 !important;  }
  #toggleheader2 { font-size: 14px; font-weight: bold; color: #FFFFFF; box-sizing: border-box; padding: 0 !important; line-height: 1; }
  
  .grecaptcha-badge { display: none !important; }
  

  
  #btnSearch { cursor: pointer; box-sizing: border-box; font-size: 11px; font-weight: normal; width: 100%; line-height: 1.5; }
  
  #btnDungeonsByClassBarb,
  #btnDungeonsByClassDruid,
  #btnDungeonsByClassRogue,
  #btnDungeonsByClassSorc,
  #btnDungeonsByClassAll,
  #btnTeleportAct1,
  #btnTeleportAct2,
  #btnTeleportAct3,
  #btnTeleportAct4,
  #btnTeleportAct5,
  #btnToggleBestXPSolo1,
  #btnToggleBestXPSolo2,
  #btnToggleBestXPSolo3,
  #btnToggleBestXPSolo4,
  #btnToggleBestXP2P1,
  #btnToggleBestXP2P2,
  #btnToggleBestXP2P3,
  #btnToggleBestXP3P1,
  #btnToggleBestXP3P2,
  #btnToggleBestXP3P3,
  #btnToggleBestXP3P4 { cursor: pointer; box-sizing: border-box; font-size: 14px; margin: 2px 8px 2px 0; font-weight: bold; line-height: 1.25; white-space: nowrap; text-decoration: underline; }
  
  
  #btnDungeonsByClassBarb:hover,
  #btnDungeonsByClassDruid:hover,
  #btnDungeonsByClassRogue:hover,
  #btnDungeonsByClassSorc:hover,
  #btnDungeonsByClassAll:hover,
  #btnTeleportAct1:hover,
  #btnTeleportAct2:hover,
  #btnTeleportAct3:hover,
  #btnTeleportAct4:hover,
  #btnTeleportAct5:hover,
  #btnToggleBestXPSolo1:hover,
  #btnToggleBestXPSolo2:hover,
  #btnToggleBestXPSolo3:hover,
  #btnToggleBestXPSolo4:hover,
  #btnToggleBestXP2P1:hover,
  #btnToggleBestXP2P2:hover,
  #btnToggleBestXP2P3:hover,
  #btnToggleBestXP3P1:hover,
  #btnToggleBestXP3P2:hover,
  #btnToggleBestXP3P3:hover,
  #btnToggleBestXP3P4:hover { cursor: pointer; box-sizing: border-box; text-decoration: none; color: #FF7700; }
  
  
  #btnToggleShowAll,
  #btnToggleHelltideMode,
  #btnToggleHideAll { cursor: pointer; box-sizing: border-box; font-size: 11px; margin: 2px 8px 2px 0; font-weight: normal; line-height: 1.25; white-space: nowrap; }
  
  #btnRegister, #btnLogin { cursor: pointer; box-sizing: border-box; font-size: 11px; font-weight: normal; width: 100%; line-height: 1.5; margin: 4px; }
  #btnAuthenticateSubmit, #btnAuthenticateCancel { cursor: pointer; box-sizing: border-box; font-size: 11px; font-weight: normal; width: 100%; line-height: 1.5; margin: 4px; }
  #login_error { font-size: 14px; font-weight: bold; color: #FF0000; box-sizing: border-box; padding: 0 !important; margin: 0 !important; line-height: 1; }
  #logged_as { font-size: 12px; font-weight: bold; color: #FFFFFF; box-sizing: border-box; padding: 0 !important; margin: 0 !important; line-height: 1; }
  
  #dd_active_tracking_profile { height: 2rem; font-size: 14px; background-color: #FFF; color: #404242; width: 100%; font-weight: bold; }
  #searchfilter_keyword  { height: 2rem; font-size: 14px; background-color: #FFF; color: #404242; width: 100%; font-weight: bold; }
  #login_username  { height: 2rem; font-size: 14px; background-color: #FFF; color: #404242; width: 100%; font-weight: bold; }
  #login_password { height: 2rem; font-size: 14px; background-color: #FFF; color: #404242; width: 100%; font-weight: bold; }
  #btnSearch { height: 3rem; }
  #btnSearch>i { padding: 12px 0 0 0; width: 20px; }
  
  #poiDetails { min-width: 300px; }
  
  #chk_poi_completed { width: 26px; height: 26px; margin-right: 10px; cursor: pointer; }
  #lbl_poi_completed { cursor: pointer; }  
  
  #responsive_menu_close_icon_container,
  #responsive_menu_icon_container { text-align: center; width: 100%; }
  
  #responsive_menu_icon { font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none; text-align: center; } 
  #responsive_menu_icon > i { font-size: 24px; color: #DD4400; font-weight: bold; } 
  
  #responsive_menu_close_icon { font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none; text-align: center; } 
  #responsive_menu_close_icon > i { font-size: 24px; color: #DD4400; font-weight: bold; } 
  
  
  body 
  {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
  }
  #body_container,
  #map_container,
  #viewport,
  #viewport_menu,
  #canva { 
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;      
  }  
  
  
  
  #map_container { display: flex; flex-flow: row; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
  #viewport { cursor: default; border: 2px solid #770000; box-sizing: border-box; position: relative; overflow: hidden; }
  #viewport_menu { width: 350px; min-width: 330px; z-index: 11000; }
  #canva { border: 0px none; border-collapse: collapse; box-sizing: border-box; padding: 0; margin: 0; z-index: 11000; position: absolute;  }
  #responsive_menu { display: block; overscroll-behavior-y: auto; }
    
  @media screen and (min-width: 1px), screen and (max-width: 991px) 
  { 
      #body_container { width: 100%; max-width: 100%; max-height: 100%; }
      #map_container { display: flex; flex-flow: row; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
      #viewport { cursor: default; border: 2px solid #770000; box-sizing: border-box; position: relative; overflow: hidden; }
      #viewport_menu { width: 350px; min-width: 330px; z-index: 11000; }
      #canva { border: 0px none; border-collapse: collapse; box-sizing: border-box; padding: 0; margin: 0; z-index: 11000; position: absolute;  }
      #responsive_menu { display: block;  }
  }
  
  @media screen and (min-width: 992px), screen and (max-width: 1199px) 
  { 
      #body_container { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
      #map_container { display: flex; flex-flow: row; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
      #viewport { cursor: default; border: 2px solid #770000; box-sizing: border-box; position: relative; overflow: hidden; }
      #viewport_menu { width: 350px; min-width: 330px; z-index: 11000; }
      #canva { border: 0px none; border-collapse: collapse; box-sizing: border-box; padding: 0; margin: 0; z-index: 11000; position: absolute;  }
      #responsive_menu { display: block;  }
  }
  
  @media screen and (min-width: 1200px) 
  { 
      #body_container { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
      #map_container { display: flex; flex-flow: row; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
      #viewport { cursor: default; border: 2px solid #770000; box-sizing: border-box; position: relative; overflow: hidden; }
      #viewport_menu { width: 350px; min-width: 330px; z-index: 11000; }
      #canva { border: 0px none; border-collapse: collapse; box-sizing: border-box; padding: 0; margin: 0; z-index: 11000; position: absolute;  }
      #responsive_menu { display: block;  }
  }
  
  
  
  #poilink:active { color: #DD4400; font-weight: bold; text-decoration: underline; cursor: pointer; }
  #poilink:link { color: #DD4400; font-weight: bold; text-decoration: underline; cursor: pointer; }
  #poilink:visited { color: #DD4400; font-weight: bold; text-decoration: underline; cursor: pointer; }
  #poilink:hover { color: #DD4400; font-weight: bold; text-decoration: none; cursor: pointer; }
  
  #poilink_cb,
  #poilink_cb:active,
  #poilink_cb:link,
  #poilink_cb:visited,
  #poilink_cb:hover { margin: 0 0 0 10px; color: #FFF; font-size: 11px; text-decoration: none; }
  #poilink_cb > i { margin-right: 4px; }
  
  #searchfilter_keyword_clear,
  #searchfilter_keyword_clear:active,
  #searchfilter_keyword_clear:link,
  #searchfilter_keyword_clear:visited,
  #searchfilter_keyword_clear:hover { white-space: nowrap; font-size: 11px; color: #FFF; text-decoration: none; padding: 10px 12px 11px 12px; line-height: 1; }
  
  #searchfilter_keyword_clear > i { font-size: 14px; }
  
  #mapMobileZoomContainer { 
      position: absolute; right: 10px; bottom: 10px; flex-flow: column; justify-content: center; 
      align-items: center; align-content: center; z-index: 13000; line-height: 1.5; border: 0 none; box-sizing: border-box; padding: 0; color: #FFFFAA;  
  }
  
  #mapMobileZoomIn, 
  #mapMobileZoomOut { box-sizing: border-box; padding: 12px; margin: 0 0 12px 0;  color: #FFFFAA; } 
  
  #mapMobileZoomIn > i, 
  #mapMobileZoomOut > i { font-size: 32px; font-weight: bold; color: #FFFFAA !important; box-sizing: border-box; padding: 0; margin: 0; }
  
  
  #regionSubmitReportMenu { z-index: 13000; line-height: 2.5; max-width: 400px; text-align: center; background-color: #222222; border-radius: 10px 10px; border: 2px solid #FF0000; color: #FFFFFF; }
  #regionSubmitReportMenuTitle { width: 100%; text-align: center; padding: 0; margin: 0; font-weight: bold; } 
  #regionSubmitReportMenuEvent { box-sizing: border-box; padding: 10px 20px 10px 20px; margin: 0; display: flex; flex-flow: column; flex-direction: column; justify-content: center; } 
  #regionSubmitReportMenuEvent > div:nth-of-type(1) { width: 100%; text-align: center; box-sizing: border-box; padding: 0 0 0 0; margin: 0; display: flex; flex-flow: row; flex-direction: row; justify-content: center; }
  #regionSubmitReportMenuEvent > div:nth-of-type(1) > div:nth-of-type(1) { text-align: center; box-sizing: border-box; padding: 0 20px 0 0; margin: 0; }
  #regionSubmitReportMenuEvent > div:nth-of-type(1) > div:nth-of-type(2) { display: flex; flex-flow: row; flex-direction: row; justify-content: center; text-align: center; padding: 0; margin: 0; }
  #regionSubmitReportMenuError { width: 100%; max-width: 300px; color:#DD4400; font-weight: bold; text-align: center; box-sizing: border-box; padding: 0 20px 10px 20px; margin: 0; line-height: 1; }
  
  #regionConfirmReportMenu { z-index: 13000; line-height: 2.5; max-width: 400px; text-align: center; background-color: #222222; border-radius: 10px 10px; border: 2px solid #FF0000; color: #FFFFFF; }
  #regionConfirmReportMenuTitle { width: 100%; text-align: center; padding: 0; margin: 0; font-weight: bold; } 
  #regionConfirmReportMenuEvent { box-sizing: border-box; padding: 10px 20px 10px 20px; margin: 0; display: flex; flex-flow: column; flex-direction: column; justify-content: center; } 
  #regionConfirmReportMenuError { width: 100%; max-width: 300px; color:#DD4400; font-weight: bold; text-align: center; box-sizing: border-box; padding: 0 20px 10px 20px; margin: 0; line-height: 1; }
  
  #timer_prediction_world_boss { font-size: 16px; }
  #timer_prediction_helltide { font-size: 16px; }