@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

:root {
  font-size: 62.5%;
  -webkit-text-size-adjust: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #1d1d1d;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 2.1rem;
  font-family: 'Montserrat', sans-serif;
  text-rendering: optimizeLegibility !important;
}

/* Iframe  */
#middlepanel {
  margin: 0 -3.5rem 3rem;
  overflow: hidden;
  padding-top: 63.25%;
  position: relative;
}

#middlepanel_iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#bottompanel {
  width: 100%;
  height: 238.8px;
}

#bottompanel_iframe {
  width: 100%;
}

/* hide default background images - beginning */
#main .t,
#main .b {
  display: none;
}

#main .c,
.warning-box,
.processbar-box,
.processbar-box .holder {
  background-image: none;
  color: inherit;
}

#content {
  color: inherit;
  font-weight: 400;
  text-align: left;
}

/* hide default background images - end */

/* hidden containers - beginning */
.after .warning-box,
.after .processbar-box,
.error .processbar-box,
.exit .processbar-box,
#MainPart_divExitLine {
  display: none;
}

/* hide empty containers - end */

#wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#main {
  width: auto;
  margin: 2rem auto;
  padding: 0 0 2.5rem;
  max-width: 700px;
  background-color: #202020;
  border-radius: 0;
  position: relative;
}

#main-top {
  padding: 0 3.5rem;
  margin: 0 auto;
}

#language-selector {
  margin: 0 0 2rem;
  float: none;
  text-align: center;
  color: #fbfbfb;
}

#language-selector select {
  padding-top: 3px;
  padding-bottom: 3px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDUxNDQ4KSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8IUVOVElUWSBuc194bGluayAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQpdPg0KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjUzMS43NCIgaGVpZ2h0PSI0NjAuNSINCgkgdmlld0JveD0iMCAwIDUzMS43NCA0NjAuNSIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUzMS43NCA0NjAuNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBzdHJva2U9IiMwMDAwMDAiIHBvaW50cz0iNTMwLjg3NCwwLjUgMjY1Ljg3LDQ1OS41IDAuODY2LDAuNSAiLz4NCjwvc3ZnPg0K);
  background-size: 9px;
  background-color: #faf8f8;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  box-shadow: none;
  color: #1f1f1f;
  line-height: 20px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

#main-top-message {
  text-align: center;
  font-size: 1.1rem;
  display: none;
}

#main .c {
  width: auto;
  padding: 0 3.5rem;
}

#header {
  position: relative;
  padding: .5rem 0 1rem;
  margin: 3rem 0 0;
  font-weight: 400;
  color: inherit;
  border: none;
  font-size: 1.4rem;
}

#header h2 {
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 3.6rem;
  margin-bottom: 1rem;
}

.logo {
  margin: 0 auto;
  padding: 0 0 4rem;
  text-align: left;
  background-image: url(assets/xbox-logo-light.png);
  background-repeat: no-repeat;
  background-position: right top 2.5px;
  background-size: auto 20.56px;
}

.logo img {
  max-width: 90px;
}

a {
  color: inherit;
}

.warning-box {
  min-height: 0;
  border: none;
  padding: 2rem 0;
  font-weight: 400;
}

body.before .warning-box {
  font-size: inherit;
  font-weight: 700;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 400px;
  }
}

.progressbar {
  height: 29px;
  background: #2a2a2a;
  border-radius: 0;
  border: none;
  overflow: visible;
}

.progressbar .progress {
  background-color: #2a2a2a;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%,  rgba(255, 255, 255, 0.15) 50%,  rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 40px 40px;
  -webkit-background-size: 40px 40px;
  animation: slide 10s linear infinite;
  -webkit-animation: slide 10s linear infinite;
  border-radius: 0;
}

.progressbar .progress .runner {
  margin-top: 4px;
}

#MainPart_lbManualUpdateWarning {
  margin: 1.5rem 0;
}

.alert {
  padding: 0.8rem 1.5rem;
  border-radius: 0;
}

.alert-error {  
  background-color: #d5281b;
  border-color: #d5281b;
  color: #fff;
  text-shadow: none;
}

.alert-success {
  background-color: #007f3b;
  border-color: #007f3b;
  color: #fff;
  text-shadow: none;
}

.processbar-box {
  line-height: 2.1rem;
  font-weight: 400;
  padding: 0;
  margin: 0 0 2rem 0;
}

.processbar-box p {
  margin: 0;
}

.processbar-box .holder {
  min-height: 0;
  padding: 0 0 1.7rem;
  border: none;
  text-align: left;
}

#MainPart_divProgressbarBox_Holder_LastUpdateTime {
  font-size: 1.2rem;
  opacity: .8;
}

.processbar-box .holder .larger {
  min-height: 0;
  font-size: 1.4rem;
  padding: 0 0 .5rem;
  border-radius: 0;
}

.processbar-box .holder .larger span {
  line-height: 2.1rem;
}

.processbar {
  display: inline;
  margin: 0;
  display: none;
}

#MainPart_lbQueueNumber,
#MainPart_lbUsersInLineAheadOfYou,
#MainPart_lbExpectedServiceTime,
#MainPart_lbExpectedServiceTimeTimeZonePostfix,
#MainPart_lbWhichIsIn,
#first-in-line,
#queue-paused,
#serviced-soon {
  font-weight: 700;
  color: #9bf00b;
}

.time-box {
  margin: 0 0 2rem 0;
  background-color: #2a2a2a;
  border-radius: 0;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1.8rem;
  position: relative;
}

.time-box .frame {
  min-height: 0;
  padding: 2.5rem;
}

.time-box h2 {
  font-weight: 400;
  color: inherit;
  font-size: 1.2rem;
}

.time-box p {
  font-weight: 700;
  margin: 0;
}

.reminder-form {
  margin: 0;
  min-height: 0;
}

.reminder-form form {
  font-size: 0;
}

.reminder-form .row {
  margin: 0 0 2rem 0;
  overflow: visible;
}

.reminder-form h2 {
  margin: 0 0 1rem;
  padding: 1.5rem 0 0;
  font-weight: 700;
  color: inherit;
}

.reminder-form .item-input {
  padding: 0.9rem 1.5rem;
  font-size: 1.4rem;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.7rem;
  width: 100%;
  max-width: 100%;
  vertical-align: top;
  margin: 0 0 1rem 0;
  border: 1px solid #444;
}

.reminder-form .item-input:focus {
  outline: none;
  font-weight: 400;
}

.reminder-form .item-input::placeholder {
  color: inherit;
}

/* Clear iOS styling of input field  */
@supports (-webkit-touch-callout: none) {
    input {
      -webkit-appearance: none;
    }
}
/* iOS styling end */

.btn {
  background-color: #444;
  border: 1px solid #444;
  color: inherit;
  width: auto;
  text-align: center;
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  line-height: 1.5rem;
  border-radius: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  /* transition: all .05s ease-in-out; */
}

.btn:hover {
  background: none;
  background-color: #444;
  border: 1px solid #444;
  color: inherit;
  box-shadow: none;
}

.btn:focus {
  outline: none;
}

.btn:active {
  top: 0;
}

/* Queue-id pop-up modal */
#queueIdModal_Header {
  background-color: #333;
}

#queueIdModal_Header .btn-close {
  background-color: #fff;
}

#queueIdModal_Header .btn-close:hover {
  background-color: #fff;
}

#queueIdLinkURL {
  color: #222;
}

#copyToClipboardButton {
  width: auto;
}
/* Queue-id pop-up modal - end */

.block {
  padding: 0;
}

.block a {
  color: inherit;
}

#footer {
  width: auto;
  color: inherit;
  padding: 0;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1rem;
}

#footer-direct-link {
  padding: 0;
  opacity: .5;
}

#footer a {
  color: inherit;
  text-decoration: none;
}

#footer .by {
  padding: 0;
  background: url(assets/logo-white.svg) no-repeat;
}

@media screen and (max-width:520px) {
  #middlepanel {
    margin: 0 -2rem 3rem;
  }

  #wrapper {
    min-height: initial;
  }

  #main {
    margin: 0 auto;
    background-color: transparent;
    border: none;
  }
  
  #main .c {
    padding: 0 2rem;
  }

  .reminder-form h2 {
    text-align: center;
  }

  .reminder-form .item-input {
    max-width: 100%;
    text-align: center;
  }

  .btn {
    width: 100%;
  }

  #footer {
    margin: 0;
  }

  #footer-direct-link {
    float: none;
    text-align: center;
    padding-top: 15px;
  }

  #footer .by {
    margin-top: 3rem;
  }
}