html, body {
    color: #fff;
    font-family: 'UniSans', sans-serif;
    background: #000;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;

}


#queue-container {
  position: absolute;
  left: 50%;
  top: 73%; /* Lägg till detta för att starta från mitten vertikalt */
  transform: translate(-50%, -50%);
  justify-content: center;
  text-align: center;
  width: 50%;
  height: auto;
padding-left:10px;
padding-right:10px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  z-index: 9;
  font-size: 1.6em;
}
#queue-container-mob {
  position: absolute;
  left: 50%;
  top: 65%; /* Lägg till detta för att starta från mitten vertikalt */
  transform: translate(-50%, -50%);
  justify-content: center;
  text-align: center;
  width: 75%;
  height: auto;
padding-left:10px;
padding-right:10px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  z-index: 99;
  font-size: 1.6em;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-family: 'Open sans', sans-serif;
    font-weight: lighter;

}


/* Ny yttre container för att uppnå bakgrundseffekten */
.outer-container {
    background-color: #000; /* Helsvart bakgrund */
    height: 95%; /* Täcker hela skärmens höjd */
    width: 90%;
    display: flex; /* Använd Flexbox för att centrera containern */
    align-items: center; /* Centrera containern vertikalt */
    justify-content: center; /* Centrera containern horisontellt */
}

/* Ändrad container-CSS */
.container {
    width: 100%;
    height: 100%;
  /*  background-color: #333; */
    background: linear-gradient(to bottom, #000, #555); /* Mörkgrå bakgrund som kontrast */
    /* Lägg till andra stilar här om så önskas */
}
#startNumber.twoDigits {
    font-size: 75vw;
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
        transform: translateY(50%);  /* Detta förflyttar siffran 5% nedåt från dess nuvarande position */
}

#startNumber.threeDigits {
    font-size: 50vw;
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    transform: translateY(82%);  /* Detta förflyttar siffran 5% nedåt från dess nuvarande position */
}

.startNumber-container {
    display: flex;
    flex-direction: row; /* Standard, men bra att vara explicit */
    justify-content: center;
    align-items: center;
    height:30%; /* Justera höjden enligt behov */
    width: 100%; /* Säkerställer att containern tar upp full bredd */

}

#startNumber-main, #startNumber-main2, #startNumber-main-and{
    font-size: 20vh;
    text-align: center;
    height: 43%;
    max-width: 15%;
    flex: 1; /* Flex-element tar upp lika mycket plats */
    margin-top: 30%;
    display: flex;
    justify-content: center;
    align-items: center;


      /* transform: translateX(50%); */
}

#startNumber-mob, #startNumber-mob2, #startNumber-mob-and{
    font-size: 18vh;
    text-align: center;
    height: 43%;
    max-width: 27%;
    flex: 1; /* Flex-element tar upp lika mycket plats */
    margin-top: 30%;
    display: flex;
    justify-content: center;
    align-items: center;


      /* transform: translateX(50%); */
}

          #logo {
            position: absolute;
  top: 6vw;
  left: 50%;
  transform: translateX(-50%);
  max-width: 25%;
  max-height: 25%;
  height: auto;
          }

          #logo-s {
            position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 10%;
  max-height: 10%;
  height: auto;
}
          #rubrik {
              position: absolute;
              top: 27%;
              width: 100%;
                left: 50%;
                transform: translate(-50%, -50%);
              height: auto;
              font-size: 8vw;
                text-align: center;

          }

          #rubrik-s {
              position: absolute;
              top: 17%;
              left: 50%;
            transform: translateX(-50%);
              width: 100%;
              height: auto;
              font-size: 4vw;
              text-align: center;
          }
          #rubrik-mob {
              position: absolute;
              top: 12%;
              left: 50%;
            transform: translateX(-50%);
              width: 100%;
              height: auto;
              font-size: 4vw;
              text-align: center;
          }

          #footer {
              font-size: 2vw;
              position: absolute;
              bottom: 16vh;
          text-align: center;
            width: 70%;
            background-color:;
              height: 18vw;
          }
          #footer-s {
            font-size: 2vw;
            position: absolute;
            bottom: 2vh;
        text-align: center;
          width: 70%;
          background-color: #000;
            height: 6vw;
          }



  #gearIcon {
    position: absolute;
    color: #fff;
    top: 10px;
    right: 10px;
    font-size: 1.1em;
    cursor: pointer;
    z-index: 100;

}

#adminModal {
    position: fixed;
    top: 0;
    padding: 10px;
    border: 1px solid #fff;
    z-index: 9999;
    right: -45%;  /* Döljer modalen till höger */
    width: 32%;
    height: 100vh;
    background: linear-gradient(to bottom, #333, #ccc);
    transition: right 0.9s;  /* Animering för att slida in/ut modalen */
}


#announcementIcon {
  position: absolute;
  color: #fff;
  top: 10px;
  left: 10px;
  font-size: 1.1em;
  cursor: pointer;
  z-index: 100;

}

#announcementModal {
    position: fixed;
    top: 0;
    border: 1px solid #fff;
    padding: 10px;
    z-index: 9999;
    left: -85%;  /* Döljer modalen till höger */
    width: 60%;
    height: 100vh;
background: linear-gradient(to bottom, #333, #ccc); /* Lägger till en gradient från svart till grå */
    transition: left 0.9s;  /* Animering för att slida in/ut modalen */
}


#tower_message {

    position: fixed;
    top: 10%;
    border: 1px solid #acacac;
    border-radius: 7px;
    padding: 10px;
    z-index: 99;
    left:0%;  /* Döljer modalen till höger */
    width: 23%;
    height: 70vh;
background: #000; /* Lägger till en gradient från svart till grå */
font-size: 1em;
opacity: 0.9;
}

#tower_message2 {
  display:none;
    position: fixed;
    bottom: 20%;
    border: 1px solid #acacac;
    border-radius: 7px;
    padding: 10px;
    z-index: 99999;
    left:0%;  /* Döljer modalen till höger */
    width: 93%;
    height: 75%;
background: #000; /* Lägger till en gradient från svart till grå */
font-size: 1.0em;
opacity: 0.9;
overflow: hidden;
}
#tower_message3 {

    position: fixed;
    bottom: 2%;
    border: 1px solid #acacac;
    border-radius: 7px;
    padding: 10px;
    z-index: 999999;
    left:0%;  /* Döljer modalen till höger */
    width: 93%;
    height: 15vh;
background: #000; /* Lägger till en gradient från svart till grå */
font-size: 1.0em;
opacity: 0.9;
overflow: hidden;
}




#announcementDiv2 {
display: none;
opacity: 0.9;
background-color: black;
color: white;
width: 86%;
height: 80%;
position: absolute;
top: 10%;
bottom:auto;
left: auto;
right:auto;
justify-content: center;
align-items: center;
z-index: 9999;
border:2vw solid;
border-color:red;
font-size: 8vw;
text-align: center;
}
#small-announcementDiv {
display: none;
opacity: 1;
background-color: black;
color: white;
width: 86%;
height: 30%;
position: absolute;
top: auto;
bottom:1px;
left: auto;
right:auto;
justify-content: center;
align-items: center;
z-index: 999999;
border:2vw solid;
border-color:white;
font-size: 6vw;
text-align: center;
}


.hidden {
  display: none;
}


.inline > * {
  display: inline-flex;
  font-size: 8em;
  line-height: 1em;
  margin: 0.2em;
  vertical-align: top;
}

.queue-buttons {
  height: auto;
  display: flex;
  margin-top:12%;
  margin-bottom: 2%;
  left:auto;
  right: auto;
  z-index: 99;
  align-items: center; /* Centrera containern vertikalt */
  justify-content: center; /* Centrera containern horisontellt */
  position: relative;
}
.queue-buttons-admin {
  display: flex;
  top: 3vh;
  left: 0;
  right: 0;
  width: 100px;
  z-index: 99;
}

.button {
  background: transparent;
  color: #990033;
  cursor: pointer;
  vertical-align: top;
  text-align: center;
  outline: none;
  z-index: 99;
}
.button-small {
  background: transparent;
  color: #666;
  cursor: pointer;
  vertical-align: top;
  text-align: center;
  outline: none;

    color: #ffcccb;
}

.button-admin {
  background: transparent;
  color: #fff;
  cursor: pointer;
font-weight: lighter;
  text-align: center;
  outline: none;
  z-index: 999;
}

.queue-buttons .button {
  padding: 4px;
  font-size: 3em;
  line-height: 1em;
  margin:  0;
  width: 30vw;
  font-size: 12vh;
  border-radius: 0.5em;
  z-index: 99;
}
.queue-buttons .button-small {
  padding: 5px;
  font-size: 3em;
  line-height: 1em;
  margin:0;
  width: auto;
  font-size: 6vh;
  border-radius: 0.5em;
  z-index: 99;
}
.queue-buttons-admin .button-admin {
  padding: 8px;
  font-weight: lighter;
  line-height: 1em;
  margin:;
  width: 30vw;
  font-size: 5vh;
  border-radius: 0.5em;
  z-index: 99;

}

.button:active {
  background-color: #666;
  color: #000;
}
.button-admin:active {
  background-color: #666;
  color: #000;
}

.display-text {
  font-size: 6em;
  margin: 0 auto 0 auto;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 24vh;
}

.queuenumber {
  font-size: 75vw;
  margin: 0 auto;
  text-align: center;
  line-height: 40vh;
  position: absolute;
  width: 100%;
  top: 28vh;
  overflow: hidden;
}


.decrease-queue-button {
  width: 40vw;
  background: palevioletred;
  border-color: black;
}

.reset-queue-button {
  width: 20vw;
}

.increase-queue-button {
  width: 40vw;
  background: limegreen;
  border-color: black;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5vh;
  display: flex;
  justify-content: space-between;
}

.header > * {
  vertical-align: middle;
  height: 5vh;
  width: 40vw;
  text-align: center;
}

.header > p {
  margin: 0;
  padding: 1vh;
  font-size: 2vh;
}

.header > .logo {
  background-image: url(img/logo-text-only-white.png);
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: center;
}


.co-brand-logo {
  background-image: url(img/bfrk-logo.png);
  background-position: center;
  height: 17vh;
  position: fixed;
  top: 6vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.lock   {
  font-size: 1em;
   position: fixed;  /* Fixerad position */
   left: 50%;        /* Centrera horisontellt */
   bottom: 20%;      /* 20% från botten */
   transform: translate(-50%, 0);  /* Justera för knappens egen bredd */
   z-index: 1000;    /* Z-index för att säkerställa att knappen ligger över andra element */
 }
 .lock2  {
  font-size: 1em;
    position: fixed;  /* Fixerad position */
    left: 50%;        /* Centrera horisontellt */
    bottom: 13%;      /* 20% från botten */
    transform: translate(-45%, 0);  /* Justera för knappens egen bredd */
    z-index: 1000;    /* Z-index för att säkerställa att knappen ligger över andra element */
  }

 .inlogg
 {
   margin: auto;
  text-align: center;

  }
.knappar {
  font-size: 1em;


 }

 #loginButton {
  font-size: 18px;
  padding: 10px 20px;
  background-color: #007BFF; /* Mörkblå färg */
  color: #fff; /* Vit text */
  border: none; /* Tar bort standardgräns */
  border-radius: 15px; /* Ger knappen rundade hörn */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Lägger till en mjuk skugga under knappen */
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* Ger en mjuk övergångseffekt när knappen interageras med */
}

#loginButton:hover {
  background-color: #0056b3; /* En aning mörkare blå vid musöver */
}

#loginButton:active {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); /* Förminskar skuggan när knappen klickas på */
}

  #loginModal {
  display: none;
  position: fixed;
  top: 0;

  transform: translateZ(50%, 0);
  width: 98%;
  height: 98%;
  background: rgba(0, 0, 0, 0.98);
  justify-content: center;
  border:5px solid #fff;
  align-items: center;
  z-index: 999999;
}
.admButton {
  font-size: 14px;
  padding: 7px;
  background-color: #000; /* Grå färg */
  color: #fff; /* Vit text */
  border: 2px #990033 solid;/* Tar bort standardgräns */
  border-radius: 10px; /* Ger knappen rundade hörn */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Lägger till en mjuk skugga under knappen */
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* Ger en mjuk övergångseffekt när knappen interageras med */
}
.admButton2 {
  font-size: 14px;
  padding: 7px;
  background-color: #000; /* Grå färg */
  border: 2px #990033 solid;/* Tar bort standardgräns */
  color: #990033; /* Vit text */
  /* Tar bort standardgräns */
  border-radius: 10px; /* Ger knappen rundade hörn */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Lägger till en mjuk skugga under knappen */
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* Ger en mjuk övergångseffekt när knappen interageras med */

.admButton:hover {
  background-color: #8A8A8A; /* En aning mörkare grå vid musöver */
}

.admButton:active {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); /* Förminskar skuggan när knappen klickas på */
}
#messages-container {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #ccc;

  padding: 10px;
  z-index: 9999;
}

#messages-container > div {
  border-bottom: 1px solid #eee;
  padding: 8px 0;

  z-index: 9999;
}





/* Modalens överlagring */
.chat-modal-overlay {
  display: none; /* Dold som standard */
  position: fixed; /* Fixerad på skärmen */
  z-index: 999999; /* Högt z-index för att säkerställa att den ligger ovanpå andra element */
  left: 0;
  border:2px solid #fff:
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); /* Svart med opacitet för att skapa en överlagringseffekt */
}

/* Modalens innehåll */
.chat-modal-content {
  position: absolute; /* Absolut positionering inom överlagringen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrerar innehållet */
  width: 80%; /* Eller vilken bredd du föredrar */
  padding: 20px;
  background-color: #fefefe;
  border: 1px solid #888;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till skugga för djup */
  overflow-y: auto; /* Lägger till skroll om innehållet är för högt */
}


/* Stäng-knappen */
.close-chat {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-chat:hover,
.close-chat:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}