/* aa */

body{
    overflow: hidden;
}
body .message-info{
width: 20%;
height: auto;
min-height: 30px;
position: absolute;
top: 5px;
left: 40%;
padding-top: 10px;
text-align: center;
}
body .message-info.error{
background: red;
}
body .message-info.success{
background: green;
}
body .message-info.info{
background: dodgerblue;
}
body .message-info.warning{
background: #ffa500d6;
}
video{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
pointer-events: auto;
}
.webrtc{
display: none; /*Change back to none*/
position: absolute;
height: 100%;
}
.webrtc.active{
display: block;
}
@media only screen and (max-width: 800px) {
    #vbg-button{
        display:none;
    }
    #screen-button{
        display:none;
    }
    #grid-spacer{
      display:none;
    }
        #top-section {
        /* Redefines the grid to only have two columns, stretching content */
        grid-template-columns: 0.2fr 1fr !important;
    }
    #location-div{
      font-size: 80%;
      max-width:60vw!important;
    }
    #location-header{
    align-items:stretch !important;
    }
    #top-section{
    padding:0.5rem;
    }
}
#top-section{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Defines three equal-width columns */
    /* If you want the content columns to take up more space, you can use:
       grid-template-columns: 2fr 2fr 1fr;  (Content columns are double the size of the spacer)
       Or for a specific size:
       grid-template-columns: 300px 300px 1fr; (300px content columns, remainder for spacer)
    */
    gap: 1rem;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 3rem;
}

.webrtc, .activeCam{}
.activeCam .video-container{
position: absolute;
height: 25%;
top: 10px;
margin: 5px;
right: -100px;
transition: all 0.2s ease;
border-color: black;
border-style: solid;
border-width: 0.2px;
pointer-events: none; /* Add this line */
}
.activeCam .video-container i{
position: absolute;
width: 100px;
height: 65px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background-color: black;
border-radius: 50%;
text-align: center;
padding-top: 35px;
font-size: 28px;
color: white;
-webkit-transform: scaleX(-1) !important;
transform: scaleX(-1) !important;
}
.activeCam .video-container img.active{
display: block;
}
.activeCam .video-container img{
position: absolute;
display: none;
width: 15px;
height: 15px;
background: #d93025;
border-radius: 48px;
left: 5px;
padding: 10px;
z-index: 2;
}
.activeCam .video-container video{
height: 100%;
}

.webrtc .activeCam .video-container{
right: 10px;
}
.activeCam .video-container#div-myCamVideo{
border: none;
pointer-events: none;
}
.activeCam .video-container video#myCamVideo{
width: 200px;
height: 113px;
pointer-events: none;
}

/*CSS size for 2 - 3 elements*/
.activeCam .video-container:nth-child(1){
/*this is for camera of user*/
top: 75%;
}
.activeCam .video-container:nth-child(2){
top: 0%;
}
.activeCam .video-container:nth-child(3){
top: 25%;
}
.activeCam .video-container:nth-child(4) {
top: 50%;
}

/*btn animation*/

/* .webrtc:hover .btn-cam-action div{
transform: translateY(0);
} */


/*.btn-call{
transition: all .1s;
left: 0px;
}*/
/* .btn-cam-action div img{
height: 22px;
width: 30px;
top: calc(48px - 37px);
left: calc(48px - 41px);
position: relative;
} */

/* .regular-height{
    height:500px;

} */



    


    
    
.toggle-button{
    background-color: #666 !important;
}
.grey-out{
    background-color: #677bbc !important;
  }

/* Spinner */
.connecting-spinner {
  /*display: inline-block;*/
  position: absolute;
  left: calc(50% - 68px);
  top: calc(50% - 68px);


  width: 130px;
  height: 130px;
}
.connecting-spinner:after {
content: " ";
display: block;
width: 108px;
height: 108px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: connecting-spinner 1.2s linear infinite;
}
@keyframes connecting-spinner {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}


.rtc-error {
position: absolute;
left: calc(50% - 68px);
top: calc(50% - 68px);


width: 130px;
height: 130px;
}
.rtc-error:after {
content: " ";
display: block;
width: 108px;
height: 108px;
margin: 8px;
border-radius: 50%;
border: 6px solid #f00;
animation: blinker 1s linear infinite;
}

@keyframes blinker {
50% {
    opacity: 0;
}
}

#location-header{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    font-family: "Roboto", "Arial", "Helvetica", sans-serif ;
    width:100% ; 
    gap:10px;
    height:100%;
}
#announcement-div {
    width: 40vw;
    transition: max-height 0.3s ease;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    max-height: 40px;
  }
  
  #announcement {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-weight: 500;
  }
  
  #announcement-div.expanded #announcement {
    white-space: normal;
    text-overflow: unset;
    max-height: 50vh;
  }
  
#announcement::before{
    content: "📢 ";

}
.ui-overlay{
    color:white;
    background-color: rgb(255, 255, 255, 0.2);
    border: rgb(255, 255, 255, 0.5) solid 1px;
    border-radius:10em;
    backdrop-filter: blur(10px);
    padding:10px 20px 10px 20px;
    border-radius:20px;
    height: auto; 
    display: flex; 
    transition: all 0.5s;
}

.ui-overlay:hover{
    background-color: black;
}
#location-div{
text-align:center;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;;
max-width:30vw;
}
#location-div:hover{
    cursor:pointer;
    background-color:black;
}
#location{
    text-transform: uppercase;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0,0,0, 0.4);
    border: rgb(255, 255, 255, 0.5) solid 1px;
    padding: 1.5rem;
    border-radius: 10px;
    color: white;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
}

.modal button {
    padding: 0.5rem 1rem;
    background: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.modal button:hover {
    background: lightgray;
}


.active-button{
    background-color: #0f56b2;
    border-radius:50%;
}



/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
  }

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* Style for the switch container */
.switch-container {
display: flex;
align-items: center; /* Aligns the switch and text vertically */
padding-top: 5px; /* Small top padding */
justify-content: center;

}

/* Style for the text next to the switch */
.switch-container span {
margin-left: 10px; /* Space between switch and text */
font-weight: bold; /* Makes the text bold */
color: white; /* Sets the text color to white */
font-size: 16px; /* Adjust the font size as needed */
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}


.chat-closebtn {
position: absolute;
font-weight:bolder;
top: -5px;
right: 2px;
font-size: 45px;
z-index: 2;
pointer-events: auto; /* Ensure this is set to auto */
}


/* If using an image within the anchor tag */
.chat-closebtn img {
width: 45px; /* Adjust as needed */
height: 45px; /* Adjust as needed */
position: relative;
top: 15%; /* Adjust as needed */
}


#languageSelector {
height: 30px;
}

#micButton {
/* Styles for the microphone icon */
cursor: pointer;
color: red; /* Example color */
margin-right: 5px;
font-size: 24px; /* Larger icon */
padding: 5px; /* Padding around the icon */
}

#micButton:active {
color: #0056b3; /* Darker color on active/pressed */
}
#sendButton {
font-size: 16px; /* Bigger font size */
padding: 10px 20px; /* Padding for larger appearance */
background-color: #4CAF50; /* Modern green background */
color: white; /* White text */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Change cursor on hover */
}
#sendButton:hover {
background-color: #45a049; /* Darker shade on hover */
}

#chatContainer {
/* Styles for the chat container */
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

#chatOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
/*z-index: 1000; /* Ensure it's above other elements */
display: flex;
align-items: center;
justify-content: center;
}

#chatContainer {
background: white;
padding: 20px;
border-radius: 5px;
max-width: 600px; /* Adjust as needed */
width: 100%;
max-height: 90%; /* Adjust as needed */
overflow: auto;
}

#chatMessages {
/* Styles for the chat message area */
border-radius: 4px;
padding: 10px;
margin-bottom: 8px;
max-height: 60vh;
overflow-y: auto;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


#chatMessages div {
/* Existing styles */
margin-bottom: 5px;
padding: 5px;
background-color: rgba(238, 238, 255, 0.65); /* Light blue with 50% opacity */
border-radius: 4px;

/* Animation styles */
animation-name: fadeIn;
animation-duration: 1s; /* Adjust the duration as needed */
animation-fill-mode: both; /* Ensures the final state (opacity: 1) is retained after the animation */
}


#chatMessage {
/* Styles for the chat input field */
font-size: 16px; /* Bigger font size */
padding: 10px; /* More padding for larger appearance */
border: 2px solid #ccc; /* Solid border */
border-radius: 5px; /* Rounded corners */
width: 70%; /* Adjust width as needed */
}


#chat {
height: -webkit-fill-available;
/*position: fixed; /* Fixed position */
bottom: 10px;    /* Positioned at the bottom */
right: 10px;     /* Positioned on the right */
z-index: 1000;   /* Ensure it's on top of other elements */
background-color: transparent; /* Background color */
border: 1px solid #ddd; /* Border */
padding: 10px; /* Some padding */
border-radius: 5px; /* Rounded corners */
box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Shadow for better visibility */
}

#chat input[type="text"] {
width: -webkit-fill-available;
height: 25px; /* Set a fixed height */
padding: 5px; /* Padding inside the text input */
margin-right: 5px; /* Margin between input and button */
border: 1px solid #ccc; /* Border of the text input */
border-radius: 3px; /* Rounded corners of the input */
overflow-y: auto; /* Enable vertical scrolling if needed */
margin-top: 10px;
}


#chat button {
padding: 5px 10px; /* Padding inside the button */
background-color: #007bff; /* Background color of the button */
color: white; /* Text color of the button */
border: none; /* No border for the button */
border-radius: 3px; /* Rounded corners of the button */
cursor: pointer; /* Cursor style when hovering over the button */
}

#chat button:hover {
background-color: #0056b3; /* Darker background on hover */
}



#loading-spinner {
display: none; /* Hidden by default */
position: absolute;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
border: 12px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #3498db;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
z-index: 1000; /* Ensure spinner is above the iframe */
}

/* Spinner animation */
@-webkit-keyframes spin { /* Safari */
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

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



  .tooltip {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 16%;
  }

  .tooltip .tooltiptext {
      /* display:none; */
      opacity:0;
      visibility:hidden;
      width: 200px;
      background-color: rgb(0,0,0,0.85);
      backdrop-filter: blur(10px);
      color: #fff;
      text-align: left;
      padding: 5px;
      border-radius: 6px;
      font-family: 'Roboto', sans-serif;
      position: absolute;
      top:50%;
      left: 110%;
      /* transform: translateY(-50%); */
      z-index:5;
      opacity:0;
      transition: all 1s ease;
  }
  @media(hover:hover){
      .tooltip:hover .tooltiptext {
      display: block;
      visibility:visible;
      opacity:1;
       }
  }
  .tooltip .tooltiptext-left {
      display:none;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: right;
      padding: 5px;
      border-radius: 6px;
      font-family: 'Roboto', sans-serif;
      position: absolute;
      z-index: 1;
      left: -200%;
      top: -100%;
      transform: translateY(-500px);
      z-index:5;
      opacity:0;
      transition: all 1s ease;
  }
  @media(hover:hover){
      .tooltip:hover .tooltiptext-left {
      display: block;
      transform: translateX(5%);
      opacity:1;
       }
  }


@media (max-height: 600px) {
#profile {
bottom: 20% !important;
}
}



@media (max-height: 600px) {
#lock-button {
bottom: 50% !important;
}
}

@media (max-height: 600px) {
#running {
bottom: 65% !important;
}
}

@media (max-height: 600px) {
#toggleChatButton {
bottom: 80% !important;
}
}



@media (max-height: 600px) {
#screen-button {
visibility: hidden;
display:none;
}
}



@media (max-height: 600px) {
#vbg-button {
visibility: hidden;
display:none;

}
}


.chat-overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.475); /* Adjust transparency as needed */
    overflow-x: hidden;
    transition: 0.4s;
}

.chat-overlay-content {
    display: inline-block;
    position: absolute;
    top: 1.5%;
    bottom: 1%;
    left: 1%;
    right: 0%;
    width: 97%;
    height: 95%;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    background-color: transparent;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chat-closebtn {
              position: absolute;
              font-weight:bolder;
              top: -5px;
              right: 2px;
              font-size: 45px;
              z-index: 2;
        pointer-events: auto; /* Ensure this is set to auto */
}


/* If using an image within the anchor tag */
.chat-closebtn img {
    width: 45px; /* Adjust as needed */
    height: 45px; /* Adjust as needed */
    position: relative;
    top: 15%; /* Adjust as needed */
}

          @media only screen and (max-width: 88800px) {
            
          #game-overlay{
          padding-left: 0vw !important;
          position: absolute;
          
          top: 0;
          width:100%;
          height:100%;
          
          
          }
          .hack2{
            display: none;
          }
          
          .hack{
            display: none;
            
            
          
          
          }
          
.overlay-content {
    display: inline-block;
    position: absolute;
    top: 1.5%;
    bottom: 1%;
    left: 1%;
    right: 0%;
    width: 97%;
    height: 95%;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    /*background-color: #666666; /* Example background */
    background-color: transparent;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /*transition: transform 0.5s ease; /* Smooth transition */
}

/* Example media query for responsiveness */
@media (max-width: 600px) {
    .overlay-content {
        width: 95%;
        height: auto;
        top: 5%;
        margin-top: 0;
    }
}
        #theiframe {
            border-radius: 10px;
        }

          .overlay {
            height: 100%;
              width: 0;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.475);
              background-color: rgba(0, 0, 0, 0.441);
              overflow-x: hidden;
              transition: 0.4s;
          }
          
          a {
              padding: 0px;
              bottom: 95%;
              text-decoration: none;
              font-size: 24px;
              font-weight:bold;
              color: #d62121;
              display: block;
              transition: 0.3s;
          }
          .overlay .closebtn {
              position: absolute;
              font-weight:bolder;
              top: -5px;
              right: 2px;
              font-size: 45px;
              z-index: 2;
          }

 

          
          .btn-cam-action {
            position: relative;
          }

          .btn-cam-action div {
            cursor: pointer;
            position: fixed;
            border: solid 0px black;
            width: 44px;
            height: 44px;
            /* box-shadow: 2px 2px 24px #444; */
            border-radius: 48px;
            /* transform: translateY(12vw);*/
            transition-timing-function: ease-in-out;
            /* bottom: 20px; */
          }



          
          .activeCam .video-container{
              position: fixed;
              height: 25%;
              top: 10px;
              margin: 5px;
              right: -100px;
              transition: all 0.2s ease;
              border-color: black;
              border-style: solid;
              border-width: 0.2px;
          }
   
          #info {
			position	: absolute;
			top		: 0px;
			width		: 100%;
			padding		: 5px;
			text-align	: center;
      display: none;
		}
		#info a {
			color		: #66F;
			text-decoration	: none;
		}
		#info a:hover {
			text-decoration	: underline;
		}
		#container {
      opacity: 0;
			width		: 100%;
			height		: 100%;
			overflow	: hidden;
			padding		: 0;
			margin		: 0;
			-webkit-user-select	: none;
			-moz-user-select	: none;
		}
    #webRtc{
          width:100vw!important;
          }
    .hidden-opacity {
    opacity: 0;
    display:none;
    visibility: hidden;
}
#backgroundSelect {
  background-color: black;
    border: rgb(255, 255, 255, 0.5) solid 1px;
    border-radius:10em;
    padding:10px 20px 10px 20px;
    border-radius:20px;
    color: #ffffff; /* black text */
    /*border: 2px solid #666666; /* black border */
    position: fixed; /* fixed position */
    top: 50%; /* center vertically */
    left: 50%; /* center horizontally */
    transform: translate(-50%, -50%); /* adjust for exact center */
    box-shadow: 0px 0px 99px rgba(0,0,0,0.5); /* black shadow */
    font-size: 16px;
    padding: 20px; /* increased padding for better appearance */
    border-radius: 10px; /* more pronounced rounded corners */
    appearance: none;
    -moz-appearance: none; /* For Firefox */
    -webkit-appearance: none; /* For Chrome, Safari, and Opera */
    width: auto; /* adjust width automatically */
    max-width: 300px; /* maximum width */
    z-index: 2; /* ensures it's above the dimmed background */
}

.background-dark {
    background-color: #666666 !important;
}






          
          
          
          
          
          
          
          
          }
          .hidden-opacity {
    opacity: 0;
    visibility: hidden;
}


          
          
          body{
            margin: 0;
          background:black;
          font-family:mono;
          font-weight:bold;
          }
          
          

a {
              padding: 0px;
              bottom: 95%;
              text-decoration: none;
              font-size: 24px;
              font-weight:bold;
              color: #d62121;
              display: block;
              transition: 0.3s;
          }
          .overlay .closebtn {
              position: absolute;
              font-weight:bolder;
              top: -5px;
              right: 2px;
              font-size: 45px;
              z-index: 2;
          }
          
          
          #game-overlay{
          position: absolute;
          padding-left: 25vw;
          top: 0;
          width:100%;
          height:100%;
          }
          
          .hack{
          position:fixed;
          width: 50vw;
          color: white;
          background: #333;
          height: 100vh;
          font-family: 'monospace';  
            font-weight: bold;
            font-size:30px;
          }
          .hack2{
          position:fixed;
          width: 25vw;
          color: white;
          background: #333;
          height: 100vh;
          font-family: 'monospace';  
            font-weight: bold;
            font-size:30px;
          }
          
          #theiframe{
          border:0;
          width:100%;
          height:100%;
          border-radius: 10px;
          }
          #theiframe2{
          border:0;
          width:100%;
          height:100%;
          border-radius: 10px;
          }
          #theiframe3{
          border:0;
          width:100%;
          height:100%;
          border-radius: 10px;
          }
          #theiframe5{
          border:0;
          width:100%;
          height:100%;
          border-radius: 10px;
          } 
          #webRtc{
          width:75vw;
          }

        
          #div-myCamVideo video{
          
          width: unset!important;
          border-radius: 10px;
          
          
          }
          #div-myCamVideo{
          top: calc(100% - 210px) !important;
          }
          
          #captureclick{
          width:100vw;
          height:100vh;
          display:block;
          position:absolute;
          }
          
          #quietzone {
            visibility: hidden;
            position:absolute;
            bottom:15px;
            right:35px;
            color:white;
            font-size:20px;
            text-shadow: 0 0 10px black;
          }
          div.bad {
            background: rgba(0, 0, 0, .25);
            height: 100px;
            position: absolute;
            width: 100px;
          }
          
          button.bad {
            position: absolute;
          }
          
          div.good {
            background: rgba(0, 0, 0, .25);
            height: 100px;
            left: 200px;
            pointer-events: none;
            position: absolute;
            width: 100px;
          }
          
          button.good {
            left: 200px;
            position: absolute;
          }
          
          
          
          
          canvas {
            /* And see postBoot() in JS */
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* <https://caniuse.com/#feat=object-fit>  <div id="container"></div>*/
          }
          #info {
			position	: absolute;
			top		: 0px;
			width		: 100%;
			padding		: 5px;
			text-align	: center;
      display: none;
		}
		#info a {
			color		: #66F;
			text-decoration	: none;
		}
		#info a:hover {
			text-decoration	: underline;
		}
		#container {
      opacity: 0;
			width		: 100%;
			height		: 100%;
			overflow	: hidden;
			padding		: 0;
			margin		: 0;
			-webkit-user-select	: none;
			-moz-user-select	: none;
		}
    .overlay {
            height: 100%;
              width: 0;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.508);
              background-color: rgba(0, 0, 0, 0.49);
              overflow-x: hidden;
              transition: 0.4s;
          }
.overlay-content {
    display: inline-block;
    position: absolute;
    top: 1.5%;
    bottom: 1%;
    left: 1%;
    right: 0%;
    width: 97%;
    height: 95%;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    /*background-color: #666666;  /*Example background */
    background-color: transparent;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /*transition: transform 0.5s ease; /* Smooth transition */
}

/* Example media query for responsiveness */
@media (max-width: 600px) {
    .overlay-content {
        width: 95%;
        height: auto;
        top: 5%;
        margin-top: 0;
    }
}
#theiframe {
    border-radius: 10px;
}

       

.background-dark {
    background-color: #666666 !important;
}