:root {
    --main-color-1: #f68b1e;
    --main-color-2: #344d23;
    --select-color: #4c8a22;
    --hoover-color: #6e8d59;
    --error-color: #bb2121;
    --white: #fff;
    --black: black;
    --disabled: rgb(65, 65, 65);
}
.title {
       
    height: 40px;
    background: url('https://flexatar-generic-shared-files.s3.amazonaws.com/images/flexatar_logo.png') no-repeat right center;
    background-size: 50px;
    padding-top: 20px;
    padding-bottom: 0px;
    padding-right: 100px;
    padding-left: 50px;
    background-position: calc(100% - 20px) center;
    line-height: 1.2;
    background-color: #344d23;
    
    color: white;
    font-family: Courier New;
    font-weight: normal;
    font-style: normal; 
    font-size: 40px;
   
    
}

.subtitle {
       
    height: 30px;
   
   
    padding-top: 0px;
    padding-bottom: 10px;
    padding-right: 100px;
    padding-left: 50px;
  
    line-height: 1.2;
    background-color: #344d23;
    
    color: white;
    font-family: Courier New;
    font-weight: normal;
    font-style: normal; 
    font-size: 20px;
   
    
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  .main-content {
    display: none;
    text-align: center;
    padding: 20px;
  }
  
  .description {
    background-color: #344d23;
    color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .description h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .description p {
    font-size: 16px;
    line-height: 1.5;
  }

  .description li {
    font-size: 16px;
    line-height: 1.5;
    margin-left: 20px;
    text-align: left;
  }
  .description strong {
    color:#f68b1e;
  }
  
  /* Authorize Button */
  .auth-btn {
    background-color: #f68b1e;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;

    border-radius: 0px;
    margin: 20px 0;
  }
  

  
  /* Authorization Container */
  .auth-container {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-width: 500px;
  }
  
  
  .vg-switch {
    width: 100%;
    background-color: #f4f4f4;
    display: inline;
    display: flex;
    flex-direction: column;
    /* border: 2px solid #ccc; */
    /* align-items: center; 
    justify-content: center; */
    position: sticky;
    top: 0;
    background-color: var(--main-color-2);
    z-index: 999999;
   }
   .button-pair{
    display: flex;
    flex-direction: row;
   }
  .switch-button {
    /* padding: 10px; */
    align-items: center; 
    justify-content: center;
    background-color: #344d23;
    /* border: 1px solid #ccc ; */
    /* border: none; */
    /* border-radius: 5px; */
    cursor: pointer;
    font-size: 18px;
    color:#f68b1e;
    /* width:60px; */
    height:60px;
    /* flex-grow: 1; */
    display: flex;
    flex: 1;
    border: none;
    /* border: 2px solid var(--main-color-1)  ; */
    /* max-width: 20vw; */
  }

  .ftar-style-button {
    padding: 10px;
    align-items: center; 
    justify-content: center;
    background-color: #344d23;
    border: 1px solid #ccc ;
    /* border: none; */
    /* border-radius: 5px; */
    cursor: pointer;
    font-size: 15px;
    color:#f68b1e;
    display: flex;
    height:35px;

  }

  .active{
    background-color: #f68b1e !important;
    color: white !important;
  }

  .button-on-panel-pressed {
    background-color: #f68b1e !important;
    color: white !important;
  }
  
  .button-panel button:hover {
    background-color: #4e7435;
  }


  .subscription-container {
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    margin: 10px;
  }

  .plan-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .price {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 15px;
  }

  .resources {
    text-align: left;
    margin-bottom: 20px;
  }

  .resources ul {
    list-style: none;
    padding: 0;
  }

  .resources li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .resources li span {
    font-weight: bold;
    color: #333;
  }

  .subscribe-button {
    display: inline-block;
    background-color: #344d23;
    color: #f68b1e;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 0px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }

  .subscribe-button:hover {
    background-color: #4e7435;
  }

  .subscription-list-container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .popup-window {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    /* width:400px; */
    /* height:400px; */
  }

  .button-flexatar-style {
    background-color: #344d23;
    color: #f68b1e;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    /* border-radius: 4px; */
    cursor: pointer;
    transition: background-color 0.3s;
    /* display: flex; */
   
}



.button-flexatar-style:hover {
    background-color: #4e7435;
}

.loader {
    

    margin: 5px;
    border: 10px solid #838383;
    border-radius: 50%;
    border-top: 10px solid #f68b1e;
    width: 40px;
    height: 40px;
    animation: spinner 4s steps(10) infinite;
    /* display: flex; */
    
  }

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

  .loader-frame {
    position: fixed; /* Position relative to the .container */
    top: 50%; /* Distance from the top */
    left: 50%; /* Distance from the left */
    /* padding: 10px; */
    border-radius: 10%;
    border: 1px solid #838383;
    background-color: #ddd;
   
    width: 70px;
    height: 70px;
    
    display: flex;
    
  }


  .card-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 350px;
    margin-bottom: 16px;
  }

  .card-logo {
    width: 100px;
    height: auto;
    margin-right: 5px;
  }
  .card-info {
    display: flex;
    flex-direction: column;
  }

  .card-brand {
    font-weight: bold;
    margin-bottom: 4px;
  }

  .card-last4 {
    font-size: 18px;
    color: #333;
  }

  .card-expiry {
    font-size: 14px;
    color: #666;
  }

  .card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
  }


  .footer{
    display: flex;
    flex-direction: column;
    background-color: black;
    align-content: center;
    justify-content: center;
    background-color: black;
    align-items: center;
    width: 100vw;
  
  }
  .footer img{
    width: 130px;
    height: auto;
    margin: 30px;
  }
  .footer a {
    color:white;
    display: flex;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
  }
  .company-line {
    width: 100%;
    text-align: center;
    font-size: 12px;
    background-color: black;
    display: flex;
    gap:20px;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex:1;
  }
  .company-line a {
    color:white;
    display: flex;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .company-line strong {
    color: #f68b1e;
    background-color: #344d23;
    border-radius: 10px;
    padding: 3px;
  }

  /* extension block */
  .flexatar-section {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px;
  }

  .flexatar-buttons {
    text-align: center;
    margin-bottom: 30px;
    
  }

  .flexatar-button {
    background-color: #344d23;
    color: #f68b1e;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
    cursor:pointer;
    transition: background 0.3s ease;
  }

  .flexatar-button:hover {
    background-color: #557e35;
  }

  .flexatar-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 25px;
    margin-bottom: 30px;
  }

  .youtube-video{
    display: block;
    margin: 0 auto;
    width:100%;
    height: auto;
    aspect-ratio: 4/3;
    margin-top:5px;
    margin-bottom:5px;
    max-width:50vw;
  }

  .flexatar-card h2 {
    background-color: #344d23;
    color: #f68b1e;
    padding: 10px;
    margin-top: 0;
    text-align: center;
    font-size: 1.25rem;
    border-radius: 4px;
  }

  .flexatar-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 15px;
  }

  .flexatar-card ul {
    padding-left: 20px;
  }

  .flexatar-card li {
    margin-bottom: 10px;
  }

  .flexatar-video {
    width: 100%;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
#pluginContentContainer{
  display: flex;
  flex-direction: row;
  width:100%;
}
#pluginContentContainer img{
  width:50% !important;
  height: auto !important;
   aspect-ratio: auto; /* or a specific ratio like 16/9 */
  object-fit: contain; /* ensures image fits within box without distortion */
  display: block;
}
#getCamPluginLinkContainer{
  display: flex;
  justify-content: center;

  align-items: center;
  align-content: center;
  flex-direction: column;
  max-width: 50%;
}
#vCamLinkContainer{
  max-width: 150px;
  border: 1px solid var(--main-color-1) !important;
  border-radius: 8px;
  padding: 5px;
  overflow:hidden;
  white-space: nowrap;
  margin-bottom: 0px;
}
#copyLinkButton{
  margin-top: 0px !important;
  margin-left: auto !important;
  padding: 5px;
}
#pluginInfo{
  width:90%;
}
.green-text{
  color: green !important;
}
/*===========Myx styling=========*/

#myxAuthorizedPlacholder {
  font-family: Arial, sans-serif;
  /* padding: 1rem; */
  /* max-width: 800px; */
  /* margin: 0 auto; */
  /* position: relative; */
  box-sizing: border-box;
  background-color: var(--black);
  border: 2px solid var(--main-color-1);
}
#myxContainer {
  font-family: Arial, sans-serif;
  /* padding: 1rem; */
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  background-color: var(--black);
  border: 2px solid var(--main-color-1);
}

#myxNickName {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin: 0px;
  padding: 0.25rem;

}

#myxGreatings{
  background-color: var(--black);
  color: white;
  padding: 0.25rem;
  border: 1px solid var(--main-color-1);
  margin-bottom: 0.25rem;

}

#myxNickName input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  background-color: var(--black);
  color: var(--white);
  /* border:none; */
}

#myxNickName button {
  width: 100px;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: var(--main-color-2);
  color: var(--main-color-1);
  border: 1px solid var(--main-color-2);
  margin: 0px;

}

#myxFunctionalityContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Semi-transparent overlay that blocks UI */
#blockingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.5);
  z-index: 10;
  /* display: none; */
}

/* Guest link creation row */
#guestLinkCreationContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* padding: 0.25rem; */
}

#guestLinkCreationContainer button {
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: var(--main-color-2);
  color: var(--main-color-1);
  border: 1px solid var(--main-color-2);
}

#invitationLinkStatus {
  font-size: 0.9rem;
  color: var(--white);
}

/* Guest link add row */
#guestLinkAddContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
}

#guestLinkAddContainer input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  background-color: var(--black);
  color: var(--white);
}

#guestLinkAddContainer button {
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
   background-color: var(--main-color-2);
  color: var(--main-color-1);
  border: 1px solid var(--main-color-2);
}

#contactListHeader{
 /* padding: 0.25rem; */
  /* width: 100%;
  height:100%; */
  color: var(--white);
  background-color: var(--main-color-1);
  display: flex;
  justify-content: center;
  align-items: center;
}
#contactListHeader span{
  margin: 0 auto;
  padding: 0.25rem;
  color: var(--white);
  background-color: var(--main-color-1);
}
/* Contact list: vertical rows */
#contactListContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height:8rem;
  overflow-y: auto;
}

.contactButtonRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contactButtonRow button {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: var(--main-color-2);
  color: var(--main-color-1);
  border: 1px solid var(--main-color-2);
}

/* Replace with emoji or icon later */
.contactButtonRow span {
  font-size: 1.2rem;
  cursor: pointer;
  color: white;
  padding-right: 2rem;
  padding-left: 2rem;
}

/* Plugin containers: responsive layout */
#pluginsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#pluginsContainer iframe {
  flex: 1 1 300px;
  min-width: 300px;
  height: 500px;
  border: 1px solid #ccc;
}

.invisible{
  display: none !important;
}

.selected{
  border: solid 1px var(--main-color-1) !important;
}