/* =========================================================
   EMBERCRYPT HOTFIX: MOBILE RESPONSIVE (iPhone / small screens)
   Load AFTER all other CSS.
   ========================================================= */

img, video, iframe { max-width: 100%; height: auto; }

table { max-width: 100%; }
#content table, .content table { width: 100% !important; }
#content table, .content table,
#content .Table, #content .Table1, #content .TableContent {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#content, .content { overflow-wrap: anywhere; }

@media (max-width: 1100px){
  #page { width: calc(100% - 22px) !important; }
}

@media (max-width: 900px){
  html, body { width: 100%; }

  .topNav, #topNav, .nav, .headerNav { flex-wrap: wrap; gap: 10px; }

  #layout-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #menu_left, #left_menu, .menu_left, .left_menu{
    grid-column: 1 !important;
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
  }

  #content{
    grid-column: 1 !important;
    order: 3;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #menu_right, #right, #sidebar_right{
    grid-column: 1 !important;
    order: 4;
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero, #topHero, .hero, #serverStartHero{
    padding: 14px 12px !important;
    margin: 10px 0 12px !important;
    border-radius: 16px !important;
  }
  #hero .bigTimer, .bigTimer, .countdownTime{
    font-size: 34px !important;
    letter-spacing: .06em !important;
  }

  #menu_left, #menu_right, #right, #sidebar_right{ padding-top: 8px !important; }

  #menu_left .menu-links a, #menu_left a{
    padding: 10px 12px !important;
    min-height: 38px !important;
  }

  #content .panel, #content .box, #content .container{
    box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
  }
}

@media (max-width: 420px){
  #hero .bigTimer, .bigTimer, .countdownTime{ font-size: 30px !important; }
  .serverBadge{ font-size: 10px !important; }
}