@font-face {
  font-family: 'CustomFont';
  src: url('JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CustomFont2';
  src: url('JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'diginormal';
  src: url('DS-DIGI.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'diginormalbold';
  src: url('DS-DIGIB.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'digiitalic';
  src: url('DS-DIGII.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'digiitalicbold';
  src: url('DS-DIGIT.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'otherdigi';
  src: url('LED\ Dot-Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notidigi';
  src: url('intodotmatrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'aminspecial';
  src: url('AMINSPECIALFONT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}



.login-page body, h2, label, button, p, a {
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  color: #ecececcc;
  letter-spacing: -1.5px;
}




.login-page ::placeholder {
  text-shadow: none;
}


.login-page body {
  margin: 0;
  padding: 0;
  background: #333;
  background-size: cover;
  font-family: 'CustomFont', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}


.login-page .login-container {
  position: relative;
  background-color: #191d21;
  border: 1px solid #565656;
  padding: 48px;
  border-radius: 4px;
  width: 384px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  overflow: hidden;
 
  --stripe-thickness: 1px;
  --stripe-spacing: 1px;
  z-index: 2;
}


.login-page .login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #181c20,
    rgba(0, 0, 0, 0.15) var(--stripe-thickness),
    transparent var(--stripe-thickness),
    transparent calc(var(--stripe-thickness) + var(--stripe-spacing))
  );
  z-index: -1;
}


.login-page .logo {
  max-width: 80%;
  height: 80px;
  display: block;
  margin: 0 auto 16px auto;
}


.login-page .login-heading {
  margin: 0 0 24px;
  font-size: 20px;
  letter-spacing: -2px;
  color: #f07068;
  min-height: 24px;
}

.login-page .login-container label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
  font-size: 16.8px;
  margin-top: 18px;
  color: #9f9f9f;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -1.5px;
}


.login-page .login-container label:hover {
  color: #ffffff;
}
.login-page .login-container label:focus-within {
  color: #a7cbd7;
}

.login-page .login-container input[type="text"],
.login-page .login-container input[type="password"] {
  width: 100%;
  padding: 6px; 
  border: 1px solid #565656;
  border-radius: 3px;
  margin-top: 6px;
  box-sizing: border-box;
  font-size: 16.8px;
  background-color: #2b3546;
  color: #fff;
  transition: border-color 0.2s ease;
 
  text-shadow: none;
  font-family: 'CustomFont2', Arial, sans-serif;
  margin-bottom: -2px;
}


.login-page .login-container input[type="text"]:hover,
.login-page .login-container input[type="password"]:hover {
  border-color: #ffffff;
}
.login-page .login-container input[type="text"]:focus,
.login-page .login-container input[type="password"]:focus {
  border-color: #a7cbd7;
  outline: none;
}

.login-page .login-container button {
  width: 100%;
  padding: 10px;
  margin-top: 24px;
  font-size: 21px;
  font-family: 'CustomFont', Arial, sans-serif;
  background-color: #1b1e21;
  color: #fff;
  border: 1px solid #565656;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  letter-spacing: -2px;
}
.login-page .login-container button:hover {
  background-color: #2b2d2e;
  border-color: #ffffff;
}

.login-page .login-container button.highlight {
  border-color: #a7cbd7 !important;
  color: #a7cbd7 !important;
}


.signup-page .signup-container button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.login-page .login-container button:focus,
.signup-page .signup-container button:focus {
  border-color: #a7cbd7;
  outline: none;
}

.login-page .login-container p.signup {
  margin-top: 24px;
  font-size: 16.8px;
  color: #9f9f9f;
  letter-spacing: -2px;
}


.login-page .login-container p.signup a {
  color: #a7cbd7;
  text-decoration: none;
  transition: color 0.2s ease;
}
.login-page .login-container p.signup a:hover {
  color: #ffffff;
}


.login-page .error-message {
  background-color: #441210;
  border: 1px solid #710700;
  width: 100%;
  margin-top: 22px;
  font-size: 15px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 3px;
  letter-spacing: -1.5px;
}


.login-page .footer {
  margin-top: 120px;
  text-align: center;
  color: #9f9f9f;
  font-size: 14px;
  width: 100%;
  max-width: 384px;
  letter-spacing: -1.6px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
}

.login-page .footer .icons {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 8px;
}
.login-page .footer .icons a {
  display: inline-block;
}
.login-page .footer .icons img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: filter 0.2s ease;
 
  filter: none;
}
.login-page .footer .icons a:hover img {
 
  filter: brightness(0) invert(1);
}

.login-page .footer .policies {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}
.login-page .footer .policies a {
  color: #a7cbd7;
  text-decoration: none;
  font-size: calc(14px + 4px);
  transition: color 0.2s ease;
}
.login-page .footer .policies a:hover {
  color: #ffffff;
}

.login-page .footer .copyright {
  margin-top: 8px;
  font-size: calc(14px + 2px);
  color: #ffffff;
}


.signup-page body,
.signup-page h2,
.signup-page label,
.signup-page button,
.signup-page p,
.signup-page a {
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: -1.5px;
}

.signup-page ::placeholder {
  text-shadow: none;
}


.signup-page body {
  margin: 0;
  padding: 0;
  background: #333;
  background-size: cover;
  font-family: 'CustomFont', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}


.signup-page .signup-container {
  position: relative;
  background-color: #191d21;
  border: 1px solid #565656;
  padding: 48px;
  border-radius: 4px;
  width: 384px;
  margin: 60px auto 0; 
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  overflow: hidden;
  --stripe-thickness: 1px;
  --stripe-spacing: 1px;
  z-index: 2;
  margin-top: 0px;
  padding-bottom: 10px;
}


.signup-page .signup-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #181c20,
    rgba(0, 0, 0, 0.15) var(--stripe-thickness),
    transparent var(--stripe-thickness),
    transparent calc(var(--stripe-thickness) + var(--stripe-spacing))
  );
  z-index: -1;
}


.signup-page .logo {
  max-width: 80%;
  height: 80px;
  display: block;
  margin: 0 auto 16px auto;
}

.signup-page .login-heading {
  margin: 0 0 24px;
  font-size: 20px;
  letter-spacing: -2px;
  color: #f07068;
  min-height: 24px;
}


.signup-page label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
  font-size: 16.8px;
  margin-top: 18px;
  color: #9f9f9f;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -1.5px;
}

.signup-page label:hover {
  color: #ffffff;
}

.signup-page input[type="text"],
.signup-page input[type="password"] {
  width: 100%;
  padding: 6px;
  border: 1px solid #565656;
  border-radius: 3px;
  margin-top: 6px;
  box-sizing: border-box;
  font-size: 16.8px;
  background-color: #2b3546;
  color: #fff;
  transition: border-color 0.2s ease;
 
  text-shadow: none;
  font-family: 'CustomFont2', Arial, sans-serif;
  margin-bottom: -2px;
}


.signup-page input[type="text"]:hover,
.signup-page input[type="password"]:hover {
  border-color: #ffffff;
}
.signup-page input[type="text"]:focus,
.signup-page input[type="password"]:focus {
  border-color: #a7cbd7;
  outline: none;
}


.signup-page button {
  width: 100%;
  padding: 10px;
  margin-top: 24px;
  font-size: 21px;
  font-family: 'CustomFont', Arial, sans-serif;
  background-color: #1b1e21;
  color: #fff;
  border: 1px solid #565656;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  letter-spacing: -2px;
}
.signup-page button:hover {
  background-color: #2b2d2e;
  border-color: #ffffff;
}

.signup-page .signup-container button.highlight {
  border-color: #a7cbd7 !important;
  color: #a7cbd7 !important;
}



.highlight::placeholder {
  color: #a7cbd7;
}


.signup-page .guest-button {
  background: none;
  border: none;
  color: #a7cbd7;
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-size: 19.5px;
  letter-spacing: -1.5px;
}

.signup-page .guest-button:hover {
  color: #ffffff;
}

.signup-page .guest-button:focus {
  outline: none;
  border-color: #a7cbd7;
}


.signup-page .signup-container p.guestcontinue {
  color: #a7cbd7;
}
.signup-page .already {
  color: #9f9f9f;
  text-decoration: none;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .already a {
  color: #a7cbd7;
  text-decoration: none;
  letter-spacing: -2px;
}
.signup-page .already a:hover {
  color: #ffffff;
  letter-spacing: -2px;
}


.signup-page .footer {
  margin-top: 106px;
  text-align: center;
  color: #9f9f9f;
  font-size: 14px;
  width: 100%;
  max-width: 384px;
  letter-spacing: -1.6px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
}

.signup-page .footer .icons {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 8px;
}
.signup-page .footer .icons a {
  display: inline-block;
}
.signup-page .footer .icons img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: filter 0.2s ease;
 
  filter: none;
}
.signup-page .footer .icons a:hover img {
 
  filter: brightness(0) invert(1);
}

.signup-page .footer .policies {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}
.signup-page .footer .policies a {
  color: #a7cbd7;
  text-decoration: none;
  font-size: calc(14px + 4px);
  transition: color 0.2s ease;
  letter-spacing: -1.6px;
}
.signup-page .footer .policies a:hover {
  color: #ffffff;
}
.signup-page .footer .copyright {
  margin-top: 8px;
  font-size: calc(14px + 2px);
  color: #ffffff;
}


.signup-page .signup-container label:focus-within {
  color: #a7cbd7;
}

.signup-page .guestcontinue .or-text {
  color: #9f9f9f;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .guestcontinue .guest-link {
  color: #a7cbd7;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .guestcontinue .guest-link:hover {
  color: #ffffff;
}
.signup-page .error-message {
  background-color: #441210;
  border: 1px solid #710700;
  width: 100%;
  margin-top: 22px;
  font-size: 15px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 3px;
  letter-spacing: -1.5px;
  display: none;
}





  
  .chat-page .logout-link {
    color: red;
    text-decoration: none;
    font-weight: bold;
  }
  
  .chat-page .main-content {
    height: 100vh;
    width: 100vw;
    display: grid;
   
    grid-template-columns: minmax(10vw, 0.6fr) auto minmax(11vw, 1fr);
    grid-template-rows: 3vw auto 50px;
    grid-template-areas:
        "top   top    top"
        "left  camera right"
        "left  btn    right";
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
  }

  

.left-column {
  grid-area: left;
}

.local-chat-section {
  grid-area: right;
}

.buttons-container {
  grid-area: btn;
}

  
 
  .chat-page .buddy-system input {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .chat-page .buddy-system button {
    
    cursor: default;

  }
  


  
 
 
  .chat-page .buddy-leave {
    display: none;
    padding: 4px 8px;
    text-align: right;
  }

 
  .chat-page .buddy-system.active-buddy-group .buddy-leave {
    display: flex;
    color: #191d21;
    justify-content: center;
  }


















  
 
  .chat-page .camera-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: visible;
  }
  
  
  .video-grid {
    grid-area: camera;
    height: 100%;         
   
    aspect-ratio: 656 / 496;    
    margin: 0 auto;        
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    justify-items: stretch;
  }

  .video-wrapper {
    position: relative;
    overflow: visible;
  }
  
  .video-slot {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #333;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #565656;
  }

  #video0 {
    transform: scaleX(-1);
  }
  
  #video1, #video2, #video3 {
    transform: scaleX(-1);
  }

  .video-slot.border-applied {
    box-shadow: none;

  }
  
  .chat-page .video-slot video { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      object-fit: cover;
    }
  
  .chat-page .overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    display: flex; 
    justify-content: center; 
    align-items: center;
    background: rgba(0,0,0,0.5); 
    color: #cccccc; 
    font-size: 16px;
    overflow: visible;
    letter-spacing: -1.5px;
    font-family: 'aminspecial';
  }
  
  .chat-page .nameLabel {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: transparent;
    color: #fff;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 4px;
    z-index: 222;
  }


  .chat-page .nameLabelPreview {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: transparent;
    color: #fff;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 4px;
    animation: glowFlash .5s infinite alternate;
    z-index: 2;
  }
  
 
  .buttons-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;        
    box-sizing: border-box;
  }


.search-button {
  background-color: #191d21;
  border: 1px solid #565656;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-page .search-button:hover {
  border-color: #a7cbd7;
}

input[disabled], textarea[disabled], button[disabled] {
  background-color: #e0e0e0 !important;
  color: #888 !important;
  cursor: not-allowed;
}

.disabled-input {
  background-color: #e0e0e0;
  color: #888;
}


.search-placeholder {
  color: #fff;
  font-family: "CustomFont", Arial, sans-serif;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  padding: 5px;
}


.search-status {
  display: inline-flex;
  align-items: center;
  font-family: "CustomFont", Arial, sans-serif;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  padding: 5px;
}


.search-status .status-bracket {
  color: #fff;
}


.search-status .status-text {
  color: #a7cbd7;
  margin: 0 2px;
}


  
 
  .chat-page .collapsible-section {
    margin-bottom: 20px;
    border: none;
    border-radius: 0;
    overflow: hidden;
  }
  
 
  .chat-page .collapsible-header {
    background-color: #f1f1f1;
    cursor: pointer;
    padding: 14px 20px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  
 
  .chat-page .collapsible-header h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    
  }
  
 
  .chat-page .collapsible-header::after {
    content: '\25BC';
    font-size: 16px;
  }
  .chat-page .collapsible-header.active::after {
    transform: rotate(-180deg);
  }
    


 
  .chat-page .collapsible-content {
    max-height: 0; 
    overflow: hidden;               
    display: flex;
    flex-direction: column;
  }
  .chat-page .collapsible-content.active {
    max-height: 100%;
  }
  

.chat-page .local-chat-section {
  font-size: 1vw;
 
  overflow-y: auto;
  grid-column: 3;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border: 1px solid #565656;
  flex-grow: 1; 
  

}

.chat-page .local-chat-section.closed {
  height: auto;   
  border: none;   

}


.chat-page .local-chat-section.closed .collapsible-header {
  border: 1px solid #565656;
  border-radius: 8px;
}

.chat-page .local-chat-section:not(.closed) > .collapsible-section {
  height: 100%;
}


.chat-page .local-chat-section.closed > .collapsible-section {
  height: auto;
}

  .chat-page .local-chat-section > .collapsible-section {
    display: flex;
    flex-direction: column;
    height: 100%; 
  }

  .chat-page .local-chat-section .collapsible-header {
    background: #171a26;
    color: #fff;
    cursor: pointer;
    padding: 4px 9px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
   
    border-bottom: 1px solid #565656;
  }
  .chat-page .local-chat-section .collapsible-header::after {
    content: '\25BC'; 
    font-size: 16px;
    transition: none;
    transform: scaleY(0.5) scaleX(1) translateY(2px);
    display: inline-block;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    color: #a7cbd7;
  } 

  
  .chat-page .local-chat-section .collapsible-header.active::after {
    transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
    text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
  }

  
  
 
  .chat-page .local-chat-section .collapsible-content {
    display: none;           
  }
  
  .chat-page .local-chat-section .collapsible-content.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
  }

 

  
 
  .chat-page .notification-badge {
    background-color: transparent;
    color: #a7cbd7;
    border: none;                 
    font-size: 12px;                
    padding: 0;                     
    margin-left: 5px;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7); 
    letter-spacing: -1.5px;        
  }
  

  .chat-page .notification-badge::before {
    content: "[ ";
  }
  
  .chat-page .notification-badge::after {
    content: " ]";
  }
  
 
  .chat-page #chatBox {
    background: #0c0e10;
    flex: 1;
    padding: 10px;
    border-bottom: 1px solid #565656;
    overflow-y: auto;
    min-height: 0;
   
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .chat-page #chatBox::-webkit-scrollbar {
    display: none;
  }
  
  .chat-page .chat-input-row {
    display: flex;
    align-items: center;
    background: #191d21;
    padding: 0;            
    margin: 0;             
    width: 100%;
    box-sizing: border-box;
    cursor: default;
  }
  .mention-wrapper {
    width: 100%;          
    position: relative;   
  }
  .mention-wrapper input {
    display: flex;
    align-items: center;
    background: #191d21;
    padding: 0;            
    margin: 0;             
    width: 100%;
    box-sizing: border-box;
}
  
  .chat-page .chat-input-row input[type="text"] {
    flex: 1;
    background: #191d21;
    border: none;
    color: #fff;
    padding: 6px;
    margin: 0;
    font-family: 'CustomFont', Arial, sans-serif;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    letter-spacing: -1.5px;
    height: 40px; 
  }

  
  .chat-page .chat-input-row input[type="text"]:focus {
    outline: none;
    border: none; 
  }

  .chat-page .chat-input-row #charCount,
  .chat-page .chat-input-row button {
    flex-shrink: 0;
    cursor: default;
  }
  

  .chat-page .chat-input-row button {
    background: transparent;
    border: none;
    padding: 15px 12px;      
    cursor: default;  
        outline: none;          
  }

  .chat-page .chat-input-row button img {
    width: 18px;            
    height: auto;           
    vertical-align: middle; 
    cursor: default;        
  }

  .chat-page .chat-input-row button:hover img {
    filter: brightness(1.5);
   
  }
  
  

  .chat-page .chat-input-row #charCount {
    margin: 0 10px 0 0;
    color: #ccc;
    font-size: 14px;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  }
  






































  
  


.chat-page .buddy-system {
  border: 1px solid #565656;
  border-radius: 8px;
  background: #111;
  margin: 0;
  overflow: hidden;
}


.chat-page .buddy-system .collapsible-header {
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0;
  border-bottom: 1px solid #565656;
}


.chat-page .buddy-system .collapsible-header::after {
  content: '\25BC'; 
  font-size: 16px;
  transition: none;
  transform: scaleY(0.5) scaleX(1) translateY(2px);
  display: inline-block;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  color: #a7cbd7;
}
.chat-page .buddy-system .collapsible-header.active::after {
  transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
  text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
}

.chat-page .buddy-system .collapsible-header:not(.active) {
  border-bottom: none;
}


.chat-page .buddy-system .collapsible-content {
  display: flex;
  flex-direction: column;
  height: auto;
}


.chat-page .buddy-system .buddy-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.chat-page .buddy-system .buddy-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #0c0e10;
  border-bottom: 1px solid #565656;
}

.chat-page .buddy-messages::-webkit-scrollbar {
  display: none;
}
.chat-page .buddy-messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.chat-page .buddy-system .buddy-leave {
  padding: 4px 8px;
  background: #191d21;
  text-align: center;
}



.chat-page .buddy-system .buddy-input-container {
  background: #191d21;
  padding: 0; 
}

.chat-page .buddy-system .buddy-input-container {
  box-sizing: border-box;
}


.chat-page .buddy-system .buddy-input-row {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.chat-page .buddy-system .buddy-input-row input[type="text"] {
  flex: 1;
  background: #191d21;
  border: none;
  color: #fff;
  padding: 6px;
  margin: 0;
  font-family: 'CustomFont', Arial, sans-serif;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  letter-spacing: -1.5px;
  height: 40px;
}
.chat-page .buddy-system .buddy-input-row input[type="text"]:focus {
  outline: none;
}
.chat-page .buddy-system .buddy-input-row button {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: default;
  outline: none;
}
.chat-page .buddy-system .buddy-input-row button img {
  width: 18px;
  height: auto;
  vertical-align: middle;
  cursor: default;
}
.chat-page .buddy-system .buddy-input-row button:hover img {
  filter: brightness(1.5);
}
































  .chat-page .chat-line {
    display: flex;
    flex-direction: column;   
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .chat-page .chat-line-wrapper {
   
    width: 100%;
    white-space: normal;      
    word-break: break-word;   
    overflow-wrap: break-word;
  
   
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    font-family: 'CustomFont2', Arial, sans-serif;
    font-size: 15px;
  }


  .chat-page .chat-username {
    color: #fff;
   
    display: inline;
    letter-spacing: -1.5px;
    text-shadow: none !important;
    text-decoration: none;
  }



 
 
  .chat-page .chat-message-body {
    color: #c0c0c0;
   
    display: inline;
    letter-spacing: -1.5px;
  }

 
  .chat-page .chat-message-timestamp {
    align-self: flex-end; 
    margin-top: 6px;
    color: #888;
    font-size: 0.6em;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    white-space: nowrap;  
    letter-spacing: -1px;
  }



  html, body {
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }
  




  .buddy-invite-notification {
    background: transparent;
    color: #fff;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    max-width: 800px;
    display: none;
   
   
    margin: 10px auto;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  



  
  




  



  


  .chat-page .left-column::after {
    content: '';
    display: block;
  }

  .chat-page .left-column::-webkit-scrollbar {
    display: none;
  }
  .chat-page .left-column .collapsible-section {
    flex-shrink: 0;
}




   
  .chat-page .cosmetics {
    border: 1px solid #565656;
    border-radius: 8px;
    background: #0c0e10;
    margin: 15px 0; 
    overflow: hidden;
  }

 
  .chat-page .cosmetics .collapsible-header {
    background: #171a26;
    color: #fff;
    cursor: pointer;
    padding: 4px 9px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0;
    border-bottom: 1px solid #565656;
  }
  .chat-page .cosmetics .collapsible-header::after {
    content: '\25BC'; 
    font-size: 16px;
    transition: none;
    transform: scaleY(0.5) scaleX(1) translateY(2px);
    display: inline-block;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    color: #a7cbd7;
  }
  .chat-page .cosmetics .collapsible-header.active::after {
    transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
    text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
  }
 
  .chat-page .cosmetics .collapsible-header:not(.active) {
    border-bottom: none;
  }

 
 
  .chat-page .cosmetics .collapsible-content {
    height: 0px;
    overflow: hidden;
   
    padding: 0 10px;
  }

  .chat-page .cosmetics .collapsible-content.active {
    display: flex;
    flex-direction: column;
    height: auto;   
    overflow: hidden;
    margin-top: 10px;
    max-height: 1000px; 

    
  }
  
 
  .chat-page .cosmetics .cosmetics-inner {
    display: flex;
    flex-direction: column;
    gap: 10px; 
  }




 
  .chat-page .cosmeticsPanel {
    background: #fff;
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-top: 20px;
  }


   
  .chat-page .cosmetics .cosmetics-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .chat-page .cosmetics .cosmetics-section h4 {
    margin: 0;
    font-size: 16px;
    color: #838383;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
  }

 
  .chat-page .cosmetics .border-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .chat-page .cosmetics .border-option {
    padding: 8px;
    background: #191d21;
    border: 1px solid #565656;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  

 
  .chat-page .cosmetics .border-option img {
    display: block;
    max-width: 50px;
    max-height: 50px;
  }

  .chat-page .cosmetics .border-option:hover,
  .chat-page .cosmetics .border-option.active {
    background: #565656;
  }

 
  .chat-page .cosmetics .border-preview {
    margin-top: 8px;
  }

 
  .chat-page .cosmetics .preview-video-slot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    opacity: 1;
  }


 
  #saveCosmeticsBtn {
    padding: 10px 20px;
    background: #171a26;
    color: #fff;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-start;
  }
  #saveCosmeticsBtn:hover {
    background: #1f2540;
  }


 
  .chat-page .cosmetics .cosmetics-footer {
    background: #191d21;
    border-top: 1px solid #565656;
    padding: 8px 10px; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -10px;
    margin-right: -10px;
    box-sizing: border-box;
    width: auto;
  }

  .chat-page .cosmetics .cosmetics-footer #saveCosmeticsBtn {
    padding: 3px 20px;             
    background: #191d21;            
    color: #bbbbbb;
    border: 1px solid #565656;      
    border-radius: 4px;
    cursor: pointer;
    display: flex;                  
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
  }

.chat-page .cosmetics .cosmetics-footer #saveCosmeticsBtn:hover {
  border-color: #a7cbd7;         
  color: #a7cbd7;                
}

input[type="color"] {
  -webkit-appearance: none; 
  -moz-appearance: none;    
  appearance: none;         
  
  border: none;
  width: 25px;              
  height: 25px;             
  cursor: pointer;
  border-radius: 4px;       
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  overflow: hidden;         
  background: none;         
  transform: translateY(5px);
}




   
    .chat-page .cosmetics {
      border: 1px solid #565656;
      border-radius: 8px;
      background: #0c0e10;
      margin: 16px 0; 
      overflow: hidden;
    }
  
   
    .chat-page .cosmetics .collapsible-header {
      background: #171a26;
      color: #fff;
      cursor: pointer;
      padding: 4px 9px;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      margin: 0;
      border-bottom: 1px solid #565656;
    }
    .chat-page .cosmetics .collapsible-header::after {
      content: '\25BC'; 
      font-size: 16px;
      transition: none;
      transform: scaleY(0.5) scaleX(1) translateY(2px);
      display: inline-block;
      text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
      color: #a7cbd7;
    }
    .chat-page .cosmetics .collapsible-header.active::after {
      transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
      text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
    }
   
    .chat-page .cosmetics .collapsible-header:not(.active) {
      border-bottom: none;
    }
  
   
   
    .chat-page .cosmetics .collapsible-content {
      height: 0px;
      overflow: hidden;
     
      padding: 0 10px;
    }
  
    .chat-page .cosmetics .collapsible-content.active {
      display: flex;
      flex-direction: column;
      height: auto;   
      overflow: hidden;
      margin-top: 10px;
      max-height: 1000px; 
  
      
    }
    
   
    .chat-page .cosmetics .cosmetics-inner {
      display: flex;
      flex-direction: column;
      gap: 10px; 
    }
  
  
  















   
.chat-page .settings {
  border: 1px solid #565656;
  border-radius: 8px;
  background: #0c0e10;
  overflow: hidden;
}


.chat-page .settings .collapsible-header {
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0;
  border-bottom: none;
}


.chat-page .settings .collapsible-header::after {
  content: '\25BC';
  font-size: 16px;
  transition: none;
  transform: scaleY(0.5) scaleX(1) translateY(2px);
  display: inline-block;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  color: #a7cbd7;
}


.chat-page .settings .collapsible-header.active::after {
  transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
  text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
}


.chat-page .settings .collapsible-content {
  max-height: 0;
  overflow: hidden;
  padding: 0;      
  transition: none;
}


.chat-page .settings .collapsible-content.active {
  max-height: none;
  transition: none;
  display: flex;
  flex-direction: column;
}



.chat-page .settings .collapsible-header.active {
  border-bottom: 1px solid #565656;
}

































input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;       
}


input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.top-bar {
  grid-area: top;
  width: 100%;
  padding: 0.25rem 0rem; 
  font-size: 0.9rem;       
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  position: relative;
}



.page-grid {
  display: grid;
  grid-template-rows: auto 1fr; 
  grid-template-columns: 1fr;   
  min-height: 100vh;            
  width: 100%;                  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-left,
.top-right {
  display: flex;
  align-items: center;
}

.top-right {
  gap: 10px;
  
  margin-left: auto;
}
  

.profile-picture-container {
 

 
  display: flex;
  align-items: center;
  justify-content: center;
 
  height: 100%;
}

  .top-bar .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-size: 1.2em;     
    color: #f1f1f1;
    letter-spacing: -1.5px;
  }

  .profile-picture-container img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
   
    
    border: 1px solid #565656;
  }
  

.notification-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1000;
}





  #reportSubmitBtn {

    border-radius: 6px;

  }

  #reportReasonInput {
    background: rgb(240, 240, 240);
    border: none;                  
    outline: none;                 
    padding: 8px;
    font-family: "CustomFont2", sans-serif;
    letter-spacing: -1.5px;
  }
  
 
  #reportReasonInput::placeholder {
    font-family: "CustomFont2", sans-serif;
    letter-spacing: -1.5px;
  }
  



  .chat-page {
   
    display: flex;
    flex-direction: column;
    height: 100vh; 
   
  }

  



  #onlineUsersInfo {
    color: #4c555e;
    letter-spacing: -1.5px;
    font-size: 15px;
  }


  .scrolling-box {
    width: 100%;            
    overflow: hidden;       
    white-space: nowrap;    
    border: 1px solid #565656; 
    background: #0a0a0a;       
    color: #0f0;            
    font-family: 'YourLCDFont', monospace;
    padding: 6px;          
    box-sizing: border-box; 
    border-radius: 4px;
  }
  
  .scrolling-text {
    display: inline-block;
   
    transform: translateX(100%);
    animation: scroll-left 8s linear infinite;
    font-family: "digiitalic";
    color: #00BFFF;
    text-shadow: 0 0 5px rgb(120, 203, 224);
    font-size: 20px;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  
  .scrolling-box-currentbuddy {
    width: 100%;            
    overflow: hidden;       
    white-space: nowrap;    
    border: 1px solid #565656; 
    background: #0a0a0a;           
    box-sizing: border-box; 
    border-radius: 4px;
    margin-top: 10px;
  }

  p.buddyNeek {
    color: #00BFFF;
    font-size: 22px;
    font-family: "diginormalbold";
    align-items: center;
    display: flex;
    flex-direction: column;
    text-shadow: 0 0 4px rgb(120, 203, 224);
    letter-spacing: .2px;
    margin-top: 5px;
    margin-bottom: 5px;
    }

    span.buddyRequestNotiText {
      color: #00BFFF;
      font-size: 22px;
      font-family: "diginormalbold";
      align-items: center;
      display: flex;
      flex-direction: column;
      text-shadow: 0 0 4px rgb(120, 203, 224);
      letter-spacing: .2px;
      margin-top: 5px;
      margin-bottom: 5px;
      }


    .scrolling-box-buddymembers {
      width: 100%;            
      overflow: hidden;       
      white-space: nowrap;    
      border: 1px solid #565656; 
      background: #0a0a0a;           
      box-sizing: border-box; 
      border-radius: 2px;
      margin-top: 10px;
    }

    span.buddymembers {
      color: #00BFFF;
      font-size: 18px;
      font-family: "otherdigi";
      align-items: center;
      display: flex;
      flex-direction: column;
      text-shadow: 0 0 4px rgb(120, 203, 224);
      letter-spacing: .2px;
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 0 12px;
      }

      span.buddy-request-text {
        color: #00BFFF;
        font-size: 18px;
        font-family: "otherdigi";
        align-items: center;
        display: flex;
        flex-direction: column;
        text-shadow: 0 0 4px rgb(120, 203, 224);
        letter-spacing: .2px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0 12px;
        }

      .buddy-invite-item {
        width: 100%;            
        overflow: hidden;       
        white-space: nowrap;    
        border: 1px solid #565656; 
        background: #0a0a0a;           
        box-sizing: border-box; 
        border-radius: 2px;
        margin-top: 10px;
      }

     
      .chat-page .buddyItem {
        color: #00BFFF;
        font-size: 18px;
        font-family: "otherdigi";
        display: flex;
        flex-direction: row;          
        align-items: center;          
        justify-content: space-between;
        text-shadow: 0 0 4px rgb(120, 203, 224);
        letter-spacing: .2px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;                
        padding: 0 10px; 
      }
        

    .chat-page .buddyItem span {
      flex-grow: 1;
    }

    .chat-page .buddyItem button {
      margin-left: 4px;
      margin-left: 2px;
      background-color: transparent;
      border: none;                     
      color: #00BFFF;                      
      padding: 2px 4px;                 
      border-radius: 0;                 
      cursor: pointer;
      font-size: 12px;                  
      font-family: "otherdigi";           
      text-shadow: 0 0 4px rgb(120, 203, 224);
      margin-top: 1px;
    }
    
    .chat-page .buddyItem button:hover {
      color: #84e0ff; 
    }





  .chat-page .buddy-system .buddy-leave button {
    padding: 3px 20px;             
    background: #191d21;            
    color: #fff;
    border: 1px solid #565656;      
    border-radius: 4px;
    cursor: pointer;
    display: flex;                  
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
    margin-top: 5px;
  }
  
  .chat-page .buddy-system .buddy-leave button:hover {
  border-color: #a7cbd7;         
  color: #a7cbd7;                
  }

 



@keyframes glowFlash {
  0% {
    text-shadow: 0 0px 20px var(--myColor);
    text-shadow: 0 0px 20px var(--myColor);
  }
  80% {
    text-shadow: 0 0px 20px var(--myColor);
    text-shadow: 0 0px 20px var(--myColor);
  }
  100% {
    text-shadow: none;
  }
}


.sliderContainer {
  display: flex;
  flex-direction: column;
  gap: 10px; 
  margin-top: 8px;
  margin-bottom: 18px;
}


.sliderContainer input[type="range"] {
  width: 100%;
}


.scrolling-boxnameglow {
  width: 100%;            
  overflow: hidden;       
  white-space: nowrap;    
  border: 1px solid #565656; 
  background: #0a0a0a;       
  color: #0f0;            
  font-family: 'YourLCDFont', monospace;
  box-sizing: border-box; 
  border-radius: 4px;
}

p.glowPreviewText {


  color: #00BFFF;
  font-size: 1vw;
  font-family: "otherdigi";
  align-items: center;
  display: flex;
  flex-direction: column;
  letter-spacing: .2px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0 12px;
  text-shadow: rgb(120, 203, 224) 0px 0px 4px;


}




input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;   
  appearance: none;        
  width: 100%;
  background: transparent; 
  margin: 8px 0;
  
  text-shadow: 0 0 4px rgb(120, 203, 224);
}


input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
}


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 0; 
  width: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  margin-top: 0;
}


input[type=range]::-moz-range-track {
  height: 8px;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
}


input[type=range]::-moz-range-thumb {
  height: 0;
  width: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  border: none;
}


input[type=range]:focus {
  outline: none;
  
}


input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-moz-range-thumb:hover {
  background: #111;
}


input[type=range]::-webkit-slider-thumb:active,
input[type=range]::-moz-range-thumb:active {
  background: #222;
}



label.inbox{

  font-family: "diginormal";
  letter-spacing: 1px;
  font-size: 20px;
  color: #00BFFF;
  margin: 0;
  padding: 5px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 4px rgb(120, 203, 224);

}




.select-border-container {
  background: #050607;
  border-radius: 6px;
  padding: 7.5px;
  text-align: center;
  transform-origin: center;    
  border: 1px solid #565656;
}

.select-border-container > label {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 12px;
}


.border-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;                            
  justify-items: center;                
  margin-bottom: 20px;                  
}



.border-box {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: radial-gradient( #0c0f11, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  position: relative;
  border: 1px solid #14191d;
}

.border-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.border-box.selected {
  outline: 2px solid #a7cbd7;
  outline-offset: -2px;
}


.border-preview {
  margin: 0 auto; 
}


.border-preview > label {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 6px;
}


.preview-video-slot {
  position: relative;
  aspect-ratio: 4 / 3;  
 
 
  border: 1px solid #565656;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}




.preview-video-slot video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}


* {
  caret-color: transparent;
}


input,
textarea,
[contenteditable] {
  caret-color: auto;
}



.user-placeholder {
  width: 220px;  
  opacity: 1;
  z-index: 1;
  transform: translateY(20px);
}


.video-border-overlay {
  display: none;
  position: absolute;
  top: -140px; left: -140px; right: -140px; bottom: -140px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 999;
  transform: scale(.76) translate(-6px, -2px);

}

#preview.video-border-overlay {
  position: absolute;
  top: -140px; left: -140px; right: -140px; bottom: -140px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 999;
  transform: scale(.6) translate(-5px, -2px);


}


.border-label {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-top: 10px;    
  margin-bottom: 6px;  
  text-align: center;
}

.border-box-row {
  display: flex;
  justify-content: center;
  gap: 7.5px;              
}

.preview-label {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 6px;
  text-align: center;
}


.scrolling-boxselectborder {
  width: 100%;            
  overflow: hidden;       
  white-space: nowrap;    
  border: 1px solid #565656; 
  background: #0a0a0a;       
  color: #0f0;            
  font-family: 'YourLCDFont', monospace;
  padding: 6px;          
  box-sizing: border-box; 
  border-radius: 2px;
}

.guest-message {

  margin: 0;
  font-size: 14px;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: flex-start;
  align-items: left;
  margin: 0;

}


p.buddyRequestNotiText{

  font-size: 20px;
  font-family: "notidigi";
  color: #00BFFF;
  text-shadow: rgb(120, 203, 224) 0px 0px 4px;
  margin-top: 3px;
  margin-left: 8px;

}

 
  .buddy-invite-notification button.acceptBtn {
    font-size: 20px;
    font-family: "notidigi";
    color: #28a745; 
    cursor: default;
    text-shadow: #28a745 0px 0px 4px;
    margin-top: 3px;
  }
  
  .buddy-invite-notification button.acceptBtn:hover {
    color: #5cd65c; 
    cursor: default;
    text-shadow: #28a745 0px 0px 22px;
  }
  
 
  .buddy-invite-notification button.declineBtn {
    font-size: 20px;
    font-family: "notidigi";
    color: #dc3545; 
    cursor: default;
    text-shadow: #dc3545 0px 0px 4px;
    margin-top: 3px;
  }
  
  .buddy-invite-notification button.declineBtn:hover {
    color: #ff6666; 
    cursor: default;
    text-shadow: #dc3545 0px 0px 22px;
  }


  p.buddyAccepted {


    font-size: 20px;
    font-family: "notidigi";
    color: #00BFFF;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -1px;

  }



  .buddy-invite-notification button {
    background: transparent;
    border: none;
    color: #ffce00;
    cursor: pointer;
    margin: 0 5px;
    font-size: 13px;
    font-family: "customfont";
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }


  .notification {
    pointer-events: auto;
    background: rgba(0,0,0,1);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 18px;
    color: #00BFFF;
    font-family: "notidigi";
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    border: 1px solid #565656;
    visibility: hidden;
    opacity: 0
  }

  body.fonts-loaded .notification {
    visibility: visible;
    opacity: 1;
  }


  button#closeNotificationBtn {
    background: transparent;     
    border: none;                
    outline: none;               
    -webkit-appearance: none;    
    -moz-appearance: none;       
    appearance: none;            
    
    font-size: 16px;
    font-family: "notidigi";
    color: #00bfff;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -1px;
    transform: translateX(4px);
  }
  

  button#closeNotificationBtn:hover {
    color: rgb(143, 211, 238);;
    text-shadow: rgb(153, 224, 241) 0px 0px 10px;
  }

  button.closeNotificationBtn2 {
    background: transparent;     
    border: none;                
    outline: none;               
    -webkit-appearance: none;    
    -moz-appearance: none;       
    appearance: none;            
    color: #00bfff;
    font-size: 16px;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    font-family: "notidigi";
    margin-left: 20px;
  }

  button.closeNotificationBtn2:hover {
    color: rgb(143, 211, 238);;
    font-size: 16px;
    text-shadow: rgb(153, 224, 241) 0px 0px 10px;
    font-family: "notidigi";
    cursor:default;
  }


  p.buddyDeclined {


    font-size: 20px;
    font-family: "notidigi";
    color: #00BFFF;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: 10px;
    transform: translateX(8px);

  }



  h1.bannedmessage{

    letter-spacing: -3px;
    color: #e4e4e4;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);

  }


  a.logout-link {

    color: #a82424;
    cursor:default

  }

  a.logout-link:hover {

    color: #fa4f4f;
    cursor:default

  }


.chat-page .left-column {
  display: flex;         
  flex-direction: column;
  height: 100%;          

 
  overflow-y: auto;

 
  position: relative;

 
  scrollbar-width: none;
  -ms-overflow-style: none;
  
}








.left-column .footer.footeropen {

  padding: 0;
}

.chat-page .left-column .footer {
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  width: 100%;
  font-size: clamp(12px, 1.5vw, 14px);
  grid-area: left;
  container-type: inline-size;
}

.left-column .footer .icons {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 80px);
  overflow: hidden;
  width: 100%;
}
.left-column .footer .icons a {
  flex-shrink: 1;
}
.left-column .footer .icons img {
  width:  clamp(14px, 4vw, 22px);
  height: clamp(14px, 4vw, 22px);
  cursor: pointer;
  transition: filter 0.2s ease;
  filter: none;
}
.left-column .footer .icons a:hover img {
  filter: brightness(0) invert(1);
}
.left-column .footer .policies {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
 
  font-size: 18px; 
}
.left-column .footer .policies a {
  flex: none;
  color: #a7cbd7;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  font-size: inherit;
  font-size: clamp(8px, .9vw, 16px);
}
.left-column .footer .policies a:hover {
  color: #ffffff;
}




.logo-container {
  display: flex;
  align-items: center;   
 
}

#clickableLogo {
  content: url("margprehover.png");
  max-width: 250px;      
  width: 100%;           
  height: auto;          
  cursor: pointer;
 
}


#clickableLogo:hover {
  content: url("margposthover.png");
}

.tos-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px;
  margin-top: 30px;
}

.tos-container input[type="checkbox"] {
  margin-right: 18px;
  transform: scale(1.2);
}

.tos-container label {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #d6d6d6;
}

.tos-container a {
  text-decoration: underline;
  color: #a7cbd7;
}























.jump-to-bottom-btn {
  border: none;
  padding: 12px 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: "CustomFont", sans-serif;
  background: #191d21;
}

.buddy-plus-btn {
  margin-left: 6px;
  background: transparent;
  color: #eee;
  border: none;
  font-weight: bold;
  cursor: pointer;
}
.buddy-plus-btn:hover {
  color: #fff;
}





.auth-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

#overlayContainer {
  position: fixed;
  inset: 0;              
  display: flex;
  justify-content: center; 
  align-items: center;     
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

.overlay-heading {
  margin-top: 0;
}

.overlay-link {
  color: #f0c040;
  cursor: pointer;
  text-decoration: underline;
}


.signup-page {
  display: none;
}


.mention-dropdown {
 
  position: absolute;
  bottom: 100%;  
  left: 0;       
  width: 100%;   
  max-height: 200px;
  overflow-y: auto;
  z-index: 2000;
  background: #191d21;
  border-top: 1px solid #565656;
  border-bottom: 1px solid #565656;
  border-right: 1px solid #565656;
  border-top-right-radius: 8px;
  transform: translateY(-4px);
  
}


.mention-dropdown .highlight {
  background: rgba(161, 161, 161, 0.2);
}
.mention-dropdown div {
  padding: 8px 8px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}
.mention-dropdown div:hover {
  background: #191d21;
}


.mention-other {
  color: white;
  cursor: pointer;
}
.chat-line.self-mention {
  background-color: #171a26;
  transition: background-color 0.5s ease;
  padding: 6px;
  border-radius: 4px;
  border: 2px dotted #e2e2e2;
}



#profilePictureSection img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
#profilePictureSection input,
#profilePictureSection button {
  margin: 0.25rem;
}
#profilePictureSection #profilePictureControls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}


.field-group {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.field-group label {
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.field-group textarea {
  resize: vertical;
  padding: 0.5rem;
}


.social-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.social-field {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
  background: #191d21;
  padding: 0.5rem;
  border-radius: 4px;
}
.social-field .social-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.social-field input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  outline: none;
  font-family: inherit;
}


.live-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
}
.live-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.live-field select {
  margin-top: 0.25rem;
  padding: 0.4rem;
}


.live-field label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}



.settings-grid {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  column-gap: 2rem;
  row-gap:    1rem;
 
  margin: 0 auto;  
}

.setting-label label {
  font-family:   CustomFont;
  font-size:     14px;
  color:         #ddd;
  text-align:    left;
}

.setting-input {
  display: flex;
  justify-content: flex-end;
}


.setting-input select {
  background:    #191d21;
  border:        1px solid #565656;
  border-radius: 4px;
  padding:       0.5rem 0.75rem;

 
  font-size:     12px;
  letter-spacing:-1px;
  max-width: 150px; 
  font-family:   CustomFont2;
  color:         #ddd;
  outline:       none;
  cursor:        pointer;
}
.setting-input select option:hover,
.setting-input select option:focus {
  background-color: #2a2f33; 
  color: #fff;               
}

.setting-input select {
  -webkit-appearance: none;
  appearance: none;
}


.setting-input input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #586f77;
  cursor: pointer;
}


.settings-inner {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.settings-inner.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem;
}


.mobile-tabbar,
#mobilePanel {
  display: none;
}

#mobilePanel {
  position: fixed;
  top: 3rem;   
  bottom: 3rem;
  left: 0;
  right: 0;
  display: flex;           
  justify-content: center;
  align-items: center;
  z-index: 1003;
}


#mobilePanel.hidden {
  display: none;
}
#mobilePanel .panel-content {
  flex: none;                  
  width: 90%;                  
  max-width: 400px;            
  max-height: 100%;            
  overflow-y: auto;            
  background: #191d21;
  border: 1px solid #565656;
  border-radius: 6px;
  box-sizing: border-box;
}

  .mobile-control-bar {
    display: none !important;
  }


  .app-profileOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

button:disabled,
input[type="button"]:disabled {
  opacity: 1 !important;            
  background-color: inherit !important; 
  color: inherit !important;           
  cursor: not-allowed !important;      
  background: inherit !important;
}

#fade-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      opacity: 1;
      transition: opacity 0.2s ease;
      z-index: 9999;
    }

   
    #view-container {
      visibility: hidden;
    }
   
    html, body {
      margin: 0;
      padding: 0;
      background: #070707;
      background-size: cover;
      font-family: 'CustomFont', Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
    }






/* Tweak the Report button */
.report-btn {
  position: absolute;
  /* move it 8px from the top-right corner of .peer-tile */
  top: 8px;
  right: 8px;

  /* force the button itself to exactly 24×24px */
  width: 24px;
  height: 24px;

  /* no extra padding or margin */
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

/* SVG should fill the button exactly */
.report-btn svg {
  display: block;    /* remove inline-svg whitespace */
  width: 100%;
  height: 100%;
}

/* icon colors */
.report-btn svg path {
  fill: #888888;
}
.report-btn:hover svg path {
  fill: #FEFEFE;
}

:root {

	--top-bar-h: 3rem;
	--control-bar-h: 3rem;
	--tabbar-h: 3rem;
	--bottom-bars-total: calc(var(--control-bar-h) + var(--tabbar-h));

}

@media (max-width: 600px) {
 

  .notification {
    font-size: 12px !important;        
    padding:    4px 8px !important;    
    max-width:  90% !important;        
   
  }

    p.glowPreviewText{

    font-size: 18px;

    }

    #mobilePanel .buddy-leave {
    display: none;
    padding: 4px 8px;
    text-align: center;
  }
 
  .buddy-system.active-buddy-group + #mobilePanel .buddy-leave {
    display: flex;
    justify-content: center;
  }

 
  #mobilePanel .buddy-leave button {
    padding: 3px 20px;             
    background: #191d21;
    color: #fff;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
    margin: 0 auto;
    margin-top: 5px;
  }
  #mobilePanel .buddy-leave button:hover {
    border-color: #a7cbd7;
    color:       #a7cbd7;
  }



  .mobile-control-bar {
    display: flex !important;
  }
.mobile-badge {
  position: absolute;
  top: 0.4rem;     
  right: 0.5rem;    
  display: none;    
  background-color: transparent;
  color: #a7cbd7;
  border: none;
  font-size: 10px;  
  line-height: 1;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  letter-spacing: -1.5px;
}
.mobile-badge::before { content: "[ "; }
.mobile-badge::after  { content: " ]"; }


.mobile-badge[data-count]:not([data-count="0"]) {
  display: inline;
}

  .chat-page #chatBox {
    min-height: 55vh !important;
    max-height: 55vh !important;

  }
  
.chat-page .chat-wrapper #chatBox {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}


.chat-page .chat-wrapper #jumpToBottomBtn {
  position: absolute;
  right: 1rem;            
  bottom: 1rem;
  z-index: 10;
 
}

 #mobilePanel .panel-content .buddy-input-container {
    background: #191d21;
    padding: 0;
    box-sizing: border-box;
  }

  #mobilePanel .buddy-leave {
    display: none;
  }

  #mobilePanel .panel-content .buddy-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  #mobilePanel .panel-content .buddy-input-row input[type="text"] {
    flex: 1;
    background: #191d21;
    border: none;
    color: #fff;
    padding-top: 1rem;
    margin: 0;
    font-family: 'CustomFont', Arial, sans-serif;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    letter-spacing: -1.5px;
    height: 40px;
    -webkit-tap-highlight-color: transparent;
  }

    #mobilePanel .panel-content .buddy-input-row input[type="text"]:focus {
    outline: none;
    box-shadow: none;
  }

  #mobilePanel .panel-content .buddy-input-row button {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: default;
    outline: none;
  }

  #mobilePanel .panel-content .buddy-input-row button img {
    width: 18px;
    height: auto;
    vertical-align: middle;
    cursor: default;
  }

  #mobilePanel .panel-content .buddy-input-row button:hover img {
    filter: brightness(1.5);
  }


  #mobilePanel .panel-content .cosmetics-footer {
    background: #191d21;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;   
    margin-right: 0;
    box-sizing: border-box;
    width: 100%;
    margin-top: auto;
  }

    #mobilePanel .panel-content .cosmetics .select-border-container {
    display: none;
  }

  #mobilePanel .panel-content
    .cosmetics-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
  }

    #mobilePanel .panel-content .cosmetics-footer #saveCosmeticsBtn {
    padding: 3px 20px;
    background: #191d21;
    color: #bbbbbb;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;
    margin: 0 auto;          
  }
  #mobilePanel .panel-content
    .cosmetics-footer
    #saveCosmeticsBtn:hover {
    border-color: #a7cbd7;
    color:       #a7cbd7;
  }

 
  #mobilePanel .panel-content
    .cosmetics-inner
    .cosmetics-section.name-glow
    + .scrolling-boxnameglow {
    display: none;
  }
  #mobilePanel .panel-content
    .cosmetics-inner
    .select-border-container {
    display: none;
  }



  .chat-page .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;              
    padding: 0 1.5vw;
    box-sizing: border-box;
    background: #191d21;
    display: flex;
    align-items: center;
    z-index: 1002;
    border-bottom: 1px #565656;
    margin-top: -1px;
  }
 
 
  .top-bar .top-left { flex: 1; }
  .top-bar .logo-container { display: flex; }
  .top-bar .top-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

    .top-bar .logo-container img,
  .top-bar .top-right {
    max-width: 25vw;   
  }

    .top-bar .top-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 25vw;          
    gap: 1vw;              
    overflow: hidden;         
  }

 
  .top-bar .top-right .user-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.4vw;        
  }

 
  .top-bar .top-right .profile-picture-container img {
    width: 6vw;               
    height: auto;
    border-radius: 4px;
    object-fit: cover;
  }

    .top-bar .logo-container img {
    width: 25vw;
    height: auto;
    object-fit: contain;
  }

  

  .top-bar .logo-container img#clickableLogo {
 
  max-width: 30vw;
  height: auto;
  object-fit: contain;
}

  .notification-container {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 50%; transform: translate(-50%, -50%);
    z-index: 1003;
  }
 
  #clickableLogo, .top-bar .top-right { display: flex !important; }

 
  .left-column,
  .buttons-container,
  .collapsible-section.local-chat-section,
  .left-column .footer {
    display: none !important;
  }

    .mobile-tabbar button {
    font-family: CustomFont, sans-serif; 
    text-transform: uppercase;
    position: relative;
  }


  .mobile-tabbar button:not(:last-child) {
  border-right: 1px solid #565656;
}

 
  .chat-page .video-grid {
    position: fixed;
    top: var(--top-bar-h);
    height: calc(
      100dvh
      - var(--top-bar-h)
      - var(--bottom-bars-total)
    );
    left: 0;
    right: 0;
    bottom: var(--bottom-bars-total);

    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 1fr 1fr;
    gap: 0;
  }



  .chat-page .video-wrapper,
  .chat-page .video-slot {
    width: 100%;
    height: 100%;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    
  outline: 1px solid #565656 !important;
  }

  .chat-page .video-slot video{

    border:1px #565656;

  }

.chat-page .video-grid .video-slot {
 
  box-sizing: border-box;
}



 
  .mobile-control-bar {
    position: fixed;
    bottom: 3rem;
    left: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    background: #191d21;
    border-bottom: 1px solid #565656;
    border-top: 1px solid #565656;
    z-index: 1002;
  }
  .mobile-control-bar button {
    flex: 1;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.9rem;              
    font-family: CustomFont, sans-serif;
    text-transform: uppercase;
    letter-spacing: -1.5px;
    cursor: pointer;
  }
  .mobile-control-bar button:first-child {
    border-right: 1px solid #565656;
    margin-right: 1px;
  }
  .mobile-control-bar button.active {
    color: #a7cbd7;
    background: rgba(167,203,215,0.1);
  }

  .chat-page .video-border-overlay { display: none !important; }

 
  .mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;              
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: #191d21;
    border-top: 1px solid #565656;
    z-index: 1002;
  }

  .chat-page .video-slot {
   
    aspect-ratio: auto !important;
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .mobile-tabbar button {
    padding: 0.75rem 0;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .mobile-tabbar button.active {
    color: #a7cbd7;
    border-top: 2px solid #a7cbd7;
  }

 
  .mobile-panel {
    position: fixed;
    top: 3rem; left: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1003;
  }
  .mobile-panel.hidden { display: none; }
  .mobile-panel .panel-content {
    background: #191d21;
    border: 1px solid #565656;
    border-radius: 4px;
    width: 90%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
    height: auto;
max-height: calc(100vh - 6rem);

  }
}


@media (max-width: 768px) {
  .login-page .login-container,
  .signup-page .signup-container {
    width: 90%;
    max-width: 384px;
    padding: 32px;
    margin: 40px auto;
  }
}
@media (max-width: 480px) {
  .login-page .login-container,
  .signup-page .signup-container {
    width: 95%; padding: 24px; margin: 24px auto; border-radius: 2px;
  }
  .login-page .login-container label,
  .signup-page .signup-container label { font-size: 14px; }
  .login-page .login-container input,
  .signup-page .signup-container input { font-size: 14px; padding:4px; }
  .login-page .login-container button,
  .signup-page .signup-container button { font-size:18px; padding:8px; }
  .login-page .login-heading,
  .signup-page .login-heading { font-size:18px; }
}
@media (max-height: 750px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.9); margin-top:12px; }
}
@media (max-height: 650px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.8); }
}
@media (max-height: 550px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.6); }
}