/* MuStarnet legacy/small-screen compatibility: IE11 + 1024/1366x768. */
html { min-width: 0 !important; }
body {
  min-width: 320px;
  background: #000000 url('../img/background.jpg') no-repeat top center;
  color: #000000;
}
a { color: #777777; }
a:hover { color: #000000; }
#container { background: #fefefe; }
.footer { background: #efefef; color: #666666; }
.form-control { background: #fafafa; border-color: #e3e3e3; color: #666666; }
.btn-primary { color: #cccccc; background-color: #444444; border-color: #777777; }
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover { color:#ffffff !important; background-color:#990000 !important; border-color:#dcbdbd !important; }
.global-top-bar { background:#101010; color:#777777; }
.global-top-bar a { color:#999999 !important; }
.global-top-bar a:hover { color:#ffffff !important; }
.global-top-bar a.logout { color:#ff0000 !important; }
#navbar ul li a { color:#cccccc !important; }
#navbar ul li a:active,
#navbar ul li a:focus,
#navbar ul li a:hover { color:#ffffff !important; }
.header-info-container .header-info {
  background: rgba(0,0,0,.3);
  box-shadow: 0 0 15px rgba(0,0,0,.7);
  text-shadow: 1px 1px 3px #000000;
  color:#aaaaaa;
  border-color: rgba(255,255,255,.1);
}
.header-info-container .header-info .header-info-block { color:#aaaaaa; }
.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime { color:#ffffff; }
.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate { color:#cccccc; }
.header-info-container .header-info .header-info-block .online-count { color:#00ff00; }
.mustarnet-language-trigger {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
}
.mustarnet-language-menu { max-height: 480px; }
.mustarnet-language-transition { top:0; right:0; bottom:0; left:0; }

@media screen and (max-width: 1199px) {
  #navbar ul { white-space: normal !important; padding: 0 6px !important; }
  #navbar ul li { font-size: 14px !important; }
  #navbar ul li a { padding: 14px 13px !important; }
  #header { padding-top: 35px !important; padding-bottom: 8px !important; }
  #header .webengine-mu-logo { max-width: 340px; width: auto; height: auto; }
  .global-top-bar .global-top-bar-content,
  #container,
  .footer,
  .header-info-container { width: calc(100% - 20px) !important; max-width: 1040px; }
}

@media screen and (max-height: 820px) {
  #header { padding-top: 22px !important; padding-bottom: 5px !important; }
  #header .webengine-mu-logo { max-height: 125px; width: auto; }
  .mustarnet-language-menu { max-height: 330px !important; }
}

@media screen and (max-height: 700px) {
  #header { padding-top: 12px !important; }
  #header .webengine-mu-logo { max-height: 100px; width: auto; }
  .mustarnet-language-menu { max-height: 245px !important; }
  .mustarnet-language-option { min-height: 30px; padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* IE11 does not support CSS Grid or flex gap. Keep the compact desktop layout
   readable instead of letting labels/logos collide. */
.mustarnet-server-status-grid { display:block !important; font-size:11px; }
.mustarnet-server-status-grid > span,
.mustarnet-server-status-grid > strong {
  display:inline-block !important;
  vertical-align:top;
  margin:0 0 5px 0;
  box-sizing:border-box;
}
.mustarnet-server-status-grid > span { width:19%; padding-right:4px; }
.mustarnet-server-status-grid > strong { width:29%; padding-right:7px; text-align:right; }
.mustarnet-header-times { display:block !important; }
.mustarnet-header-times > span { display:inline-block; width:49%; box-sizing:border-box; }
.mustarnet-header-times > span + span { text-align:right; }
.mustarnet-support-card-icon { margin-right:12px; }
.mustarnet-support-card-copy { margin-right:12px; }
.mustarnet-max-logo { margin-right:14px; }
.mustarnet-max-community-copy { margin-right:12px; }
.mustarnet-telegram-wordmark,
.mustarnet-telegram-badge { margin-right:14px; }
.mustarnet-telegram-community-copy { margin-right:12px; }
.mustarnet-language-trigger-flag { margin-right:6px; }
.mustarnet-language-current { margin-right:6px; }

@media screen and (max-width: 1366px), screen and (max-height: 800px) {
  #navbar ul { white-space:normal !important; text-align:center !important; padding:0 4px !important; }
  #navbar ul li { font-size:13px !important; }
  #navbar ul li a { padding:12px 10px !important; font-size:13px !important; }
  #header { padding-top:14px !important; padding-bottom:2px !important; }
  #header .webengine-mu-logo { max-width:250px !important; max-height:100px !important; width:auto !important; height:auto !important; }
  .header-info-container .header-info { width:330px !important; padding:14px !important; font-size:11px !important; }
  .mustarnet-server-status-head { margin-bottom:6px !important; }
  .mustarnet-server-download { margin-top:6px !important; padding:6px 9px !important; }
  .mustarnet-header-times { margin-top:6px !important; padding-top:5px !important; }
  .mustarnet-launch-banner { padding:14px 18px !important; }
  .mustarnet-support-card,
  .mustarnet-max-community-card,
  .mustarnet-telegram-community-card { padding-top:10px !important; padding-bottom:10px !important; }
  .mustarnet-max-community-copy strong,
  .mustarnet-telegram-community-copy strong { font-size:16px !important; line-height:1.2 !important; }
  .mustarnet-max-community-copy small,
  .mustarnet-telegram-community-copy small { font-size:11px !important; line-height:1.3 !important; }
}

@media screen and (max-width: 1199px) {
  .mustarnet-launch-banner,
  .mustarnet-support-card,
  .mustarnet-max-community-card,
  .mustarnet-telegram-community-card { width:100%; box-sizing:border-box; }
  .mustarnet-max-logo { width:115px !important; }
  .mustarnet-telegram-wordmark { width:120px !important; }
}

@media screen and (max-width: 1024px) {
  #navbar ul li a { padding-left:8px !important; padding-right:8px !important; font-size:12px !important; }
  #content { min-height:0 !important; }
  .header-info-container .header-info { width:310px !important; }
}