@import url(https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap);
body:has(.external-links-warning-overlay) .user-header,
body:has(.external-links-warning-overlay) .admin-header,
body:has(.external-links-warning-overlay) .main-footer,
body:has(.external-links-warning-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.external-links-warning-overlay) .global-footer,
body:has(.external-links-warning-overlay) .ask-treo,
body:has(.external-links-warning-overlay) .agent-interaction-dock-button,
body:has(.external-links-warning-overlay) .float-chat-button {
  display: none;
}

.external-links-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
   background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
  }

  .external-links-warning-content {
      background: #7375e1;
    color: rgba(255, 255, 255, 0.9);
    padding: 25px;
    width: 30%;
    max-width: 30%;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(220, 0, 0, 1);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
  }

  body.dark .external-links-warning-content {
    background: rgba(0, 0, 0, 0.9);
  }

    body.light .external-links-warning-content {
          background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.9);
  }


  @media (max-width: 1366px) {
    .external-links-warning-content {
      padding: 20px;
      width: 35%;
      max-width: 35%;
    }}

    @media (max-width: 768px) {
      .external-links-warning-content {
        padding: 20px;
        width: 95%;
        max-width: 95%;
        margin-top: -70px;
      }}
  
  .external-links-warning-content i {
    font-size: 56px;
    color: rgba(240, 255, 0, 0.9);
    margin-bottom: 10px;
  }

  body.light .external-links-warning-content i {
    color: rgba(220, 50, 70, 1);
  }

  @media (max-width: 1366px) {
    .external-links-warning-content i {
      font-size: 36px;
      margin-bottom: 7px;
    }}

  

  .external-links-warning-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: 1px;
  }

  body.light .external-links-warning-title {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .external-links-warning-title {
      font-size: 20px;
      margin-bottom: 10px;
    }}


  .external-links-warning-content .detected-external-link {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    word-wrap: break-word;
    margin: 0 auto;
    margin-bottom: 25px;
    text-align: center;
    padding: 8px 12px;
    background: rgba(220, 50, 70, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 8px;
  }

  body.dark .external-links-warning-content .detected-external-link {
    background: rgba(220, 50, 70, 0.6);
  }

   body.light .external-links-warning-content .detected-external-link {
    background: rgba(220, 50, 70, 0.9);
  }

  @media (max-width: 1366px) {
    .external-links-warning-content .detected-external-link {
      font-size: 11.5px;
      line-height: 15px;
      padding: 6px 12px;
      margin-bottom: 15px;
    }}

  .external-links-warning-content .detected-external-link a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }

    .external-links-warning-content .warning-list-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .external-links-warning-content .warning-list-item {
    font-size: 14px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: left;
  }

  body.light .external-links-warning-content .warning-list-item {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .external-links-warning-content .warning-list-item {
      font-size: 12px;
    }}

      @media (max-width: 768px) {
    .external-links-warning-content .warning-list-item {
      font-size: 12px;
    }}
  
      .external-links-warning-content .warning-list-item i {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    margin: 0;
  }

  body.light .external-links-warning-content .warning-list-item i {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .external-links-warning-content .warning-list-item i {
      font-size: 13px;
          margin: 0;
    }}


  .external-links-warning-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 10px;
  }

  .external-links-warning-buttons a {
    text-decoration: none;
  }

  @media (max-width: 1366px) {
    .external-links-warning-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      gap: 10px;
    }}
  
  .cancel-button,
  .continue-button {
    background: rgba(145, 75, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 300;
    border-radius: 5px;
    width: auto;
    min-width: 125px;
    max-width: 125px;
  }

body.dark .cancel-button,
body.dark .continue-button {
      background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .cancel-button,
body.light .continue-button {
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.9);
}

.continue-button a {
  text-decoration: none;
}

  @media (max-width: 1366px) {
    .cancel-button,
  .continue-button {
    font-size: 13px;
    padding: 6px 12px;
  }}

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  
  
.twofa-input-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
.twofa-input-container {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
    }}

.twofa-field {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.7);
  transition: all 0.2s;
}

.twofa-field:focus {
  outline: none;
}

@media (max-width: 768px) {
    .twofa-field {
  width: 35px;
  height: 35px;
    }}
.terms-container {
  width: 100%;
  max-width: 100%;
    margin: 0 auto;
    padding: 20px 0px;
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Inter', sans-serif;
    line-height: 35px;
  }

  @media (max-width: 1366px) {
    .terms-container {
      padding: 20px 0px;
    }}

    @media (max-width: 768px) {
      .terms-container {
        padding: 10px 15px;
      }}
  
      .terms-title {
        background: rgb(145, 75, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        padding: 10px;
        font-size: 22px;
        font-weight: 500;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
        text-align: center;
        display: none;
      }
    
      body.dark .terms-title {
        background: rgba(0, 0, 0, 1);
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
      }

  @media (max-width: 1366px) {
    .terms-title {
      font-size: 16px;
      margin-bottom: 20px;
      padding: 0px;
    }}

    @media (max-width: 768px) {
      .terms-title {
        font-size: 16px;
        margin-bottom: 15px;
        padding: 0px;
        font-weight: 500;
      }}

  body.dark .terms-title {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .terms-section {
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 20px 30px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  }

  @media (max-width: 1366px) {
    .terms-section {
      padding: 10px 20px 15px 20px;
      margin-bottom: 15px;
    }}

  @media (max-width: 768px) {
    .terms-section {
      padding: 15px;
      margin-bottom: 15px;
    }}

  body.dark .terms-section {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .terms-section {
 background: rgba(255,255,255,1);
     border: 1px solid rgba(0, 0, 0, 0.2); 
  }

  .terms-section-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  @media (max-width: 1366px) {
    .terms-section-title {
      font-size: 16px;
      padding-bottom: 0px;
    }}

  @media (max-width: 768px) {
    .terms-section-title {
      font-size: 15px;
      padding-bottom: 0px;
    }}

  body.dark .terms-section-title {
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

    body.light .terms-section-title {
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .terms-section-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px !important;
    line-height: 24px !important;
  }

  @media (max-width: 1366px) {
    .terms-section-content {
    font-size: 12px !important;
    line-height: 16px !important;
  }}

  @media (max-width: 768px) {
    .terms-section-content {
    font-size: 13px !important;
    line-height: 16px !important;
  }}

  body.dark .terms-section-content {
    color: rgba(255, 255, 255, 0.9);
  }
  
  body.light .terms-section-content {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .terms-section-content {
    font-size: 13px;
    line-height: 18px;
  }}
  
  .terms-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .terms-list li {
    margin-bottom: 5px;
    padding-left: 35px;
    position: relative;
  }
  
  .terms-list li::before {
    content: "•";
    position: absolute;
    left: 20px;
    color: rgba(225, 225, 255, 0.9);
  }

  body.dark .terms-list li::before {
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .terms-list li::before {
    color: rgba(0, 0, 0, 0.9);
  }

  .terms-subsection-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(225, 225, 255, 0.9);
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
    .terms-subsection-title {
      font-size: 13px;
    }}

  @media (max-width: 768px) {
    .terms-subsection-title {
      font-size: 13px;
    }}


  body.dark .terms-subsection-title {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .important-none {
    font-style: italic;
  }

  .terms-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  
  .terms-footer {
    text-align: left;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(40, 50, 100, 1);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
  }

    @media (max-width: 1366px) {
      .terms-footer {
        font-size: 11px;
        margin-top: 0px;
        padding-top: 0px;
        font-weight: 500;
      }}

      
  @media (max-width: 768px) {
    .terms-footer {
      font-size: 10px;
      margin-top: 10px;
      padding-top: 10px;
      font-weight: 500;
    }}

  body.dark .terms-footer {
    color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
    body.light .terms-footer {
    color: rgba(0, 0, 0, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .terms-container .contact-link {
  color: rgba(255, 255, 255, 0.9); 
  text-decoration: underline;
  font-weight: 300;
  }

  body.dark .contact-link {
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .contact-link {
    color: rgba(0, 0, 0, 0.9);
  }


.privacy-container {
  width: 100%;
  max-width: 100%;
    margin: 0 auto;
    padding: 20px 0px;
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Inter', sans-serif;
    line-height: 35px;
  }

  @media (max-width: 1366px) {
    .privacy-container {
      padding: 20px 0px;
    }}

    @media (max-width: 768px) {
      .privacy-container {
        padding: 10px 15px;
      }}

  .privacy-title {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 10px;
    font-size: 22px;
    font-weight: 500;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    text-align: center;
    display: none;
  }

  body.dark  .privacy-title {
    background: rgba(0.0.0,0.1);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }

  @media (max-width: 1366px) {
    .privacy-title {
      font-size: 16px;
      margin-bottom: 20px;
      padding: 0px;
    }}

    @media (max-width: 768px) {
      .privacy-title {
        font-size: 16px;
        margin-bottom: 15px;
        padding: 0px;
        font-weight: 500;
      }}

  .privacy-section {
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 20px 30px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  }

  @media (max-width: 1366px) {
    .privacy-section {
      padding: 10px 20px 15px 20px;
      margin-bottom: 15px;
    }}

  @media (max-width: 768px) {
    .privacy-section {
      padding: 15px;
      margin-bottom: 15px;
    }}

  body.dark .privacy-section {
    background: rgba(0.0.0,0.1);
    color: rgba(255, 255, 255, 0.9);
  }

  
  body.light .privacy-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }


  .privacy-section-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }



  @media (max-width: 1366px) {
    .privacy-section-title {
      font-size: 16px;
      padding-bottom: 0px;
    }}

  @media (max-width: 768px) {
    .privacy-section-title {
      font-size: 15px;
      padding-bottom: 0px;
    }}

  body.dark .privacy-section-title {
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

    body.light .privacy-section-title {
    color: rgba(0, 0, 0, 0.9);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }


  .privacy-section-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 24px;
  }

  body.dark .privacy-section-content {
    color: rgba(255, 255, 255, 0.9);
  }

  
  body.light .privacy-section-content {
    color: rgba(0, 0, 0, 0.9);
  }


  @media (max-width: 1366px) {
    .privacy-section-content {
    font-size: 12px;
    line-height: 16px;
  }}

  @media (max-width: 768px) {
    .privacy-section-content {
    font-size: 13px;
    line-height: 16px;
  }}

  .privacy-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .privacy-list li {
    margin-bottom: 5px;
    padding-left: 35px;
    position: relative;
  }

  .privacy-list li::before {
    content: "•";
    position: absolute;
    left: 20px;
    color: rgba(255, 255, 255, 0.9);
  }

  body.dark  .privacy-list li::before {
    color: rgba(255, 255, 255, 0.9);
  }

      body.light .privacy-list li::before {
    color: rgba(0, 0, 0, 0.9);
  }


  .privacy-subsection-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
    .privacy-subsection-title {
      font-size: 13px;
    }}

  @media (max-width: 768px) {
    .privacy-subsection-title {
      font-size: 13px;
    }}

  body.dark  .privacy-subsection-title {
    color: rgba(255, 255, 255, 0.9);
  }

  body.light  .privacy-subsection-title {
    color: rgba(0, 0, 0, 0.9);
  }

  .important-note {
    font-style: italic;
  }

  @media (max-width: 768px) {
    .important-note {
      font-size: 12px;
    }}

  .privacy-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }

  .privacy-footer {
    text-align: left;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(40, 50, 100, 1);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
  }

  @media (max-width: 1366px) {
    .privacy-footer {
      font-size: 11px;
      margin-top: 0px;
      padding-top: 0px;
    }}

  @media (max-width: 768px) {
    .privacy-footer {
      font-size: 10px;
      margin-top: 10px;
      padding-top: 10px;
    }}

  body.dark .privacy-footer {
    color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

    body.light .privacy-footer {
    color: rgba(0, 0, 0, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .privacy-container .contact-link {
  color: rgba(255, 255, 255, 0.9); 
  text-decoration: underline;
  font-weight: 300;
  }

  body.dark .contact-link {
    color: rgba(255, 255, 255, 0.9);
  }

  body.light .contact-link {
    color: rgba(0, 0, 0, 0.9);
  }

.user-login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    z-index: 999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:has(.user-login-modal-overlay) .ask-treo,
body:has(.user-login-modal-overlay) .agent-interaction-dock-button,
body:has(.user-login-modal-overlay) .float-chat-button {
  display: none !important;
}

body.has-modal {
    overflow: hidden;
}

.user-login-modal-content {
    background: linear-gradient(100deg, rgba(145, 75, 255, 1), rgba(20, 241, 149, 1));
    padding: 15px 25px 25px 25px;
    border-radius: 8px;
    height: auto;
    max-height: 95vh;
    width: 25%;
    min-width: 25%;
    max-width: 25%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    margin: auto;
    animation: modalAppear 0.3s ease-out;
    position: relative;
    z-index: 9999 !important;
    overflow: auto;
}

body.dark .user-login-modal-content {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-login-modal-content {
    background: rgba(225, 225, 225, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(66px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1366px) {
    .user-login-modal-content {
    padding: 25px 20px;
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    }}

@media (max-width: 768px) {
    .user-login-modal-content {
    padding: 25px 20px;
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    }}


.user-login-modal-content.welcome-to-web3 {
    width: 25%;
    min-width: 25%;
    max-width: 25%;
}

@media (max-width: 768px) {
.user-login-modal-content.welcome-to-web3 {
    width: 95%;
    min-width: 95%;
    max-width: 95%;
}
}


 .modal-border-wrapper {
  position: relative;
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(270deg, #9945FF, #14F195, #00FFA3, #9945FF);
  background-size: 600% 600%;
  animation: animateBorder 8s ease infinite;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  z-index: 1;
}

@keyframes animateBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.user-login-back-button {
    position: absolute;
    top: 13px;
    left: 13px;
}

.user-login-close-button {
    position: absolute;
    top: 13px;
    right: 13px;
}

.user-login-back-button,
.user-login-close-button {
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
}

body.light .user-login-back-button,
body.light .user-login-close-button {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-login-close-button {
      font-size: 11px;
    }}

@media (max-width: 768px) {
    .user-login-close-button {
      font-size: 14px;
    }}


.login-on-desktop {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    position: absolute;
    top: 6px;
    right: 6px;
}

@media (max-width: 1366px) {
.login-on-desktop {
    font-size: 9px;
    position: absolute;
    top: 4px;
    right: 4px;
}}


.user-login-title-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    margin: 0 auto;

}

.user-login-title,
.user-login-title-confirmation {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    font-weight: 300;
    vertical-align: middle;
}

body.light .user-login-title,
body.light .user-login-title-confirmation {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

.user-login-title {
    font-size: 26px;
}

@media (max-width: 1366px) {
    .user-login-title {
    font-size: 22px;
}}


.user-login-title-confirmation {
    font-size: 26px;
}

@media (max-width: 1366px) {
.user-login-title-confirmation {
    font-size: 22px;
}}



.user-login-desc {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

.user-login-trusty-style {
font-family: 'Iceland', sans-serif;
font-size: 35px;
line-height: 35px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-shadow: none;
margin-top: -2px;
margin-bottom: 0px;
margin-left: 4px;
margin-right: 0px;
vertical-align: middle;
}

@media (max-width: 1366px) {
    .user-login-trusty-style {
font-family: 'Iceland', sans-serif;
font-size: 28px;
line-height: 28px;
    }}

   .user-login-options-box {
    display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 10px;
          gap: 10px;
          grid-row-gap: 0px;
          row-gap: 0px;
          width: 100%;
    }

.user-login-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 1366px) {
    .user-login-options {
            margin-top: 10px;
}}

.user-login-options-method {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0 auto;
}

.user-login-method-button {
    display: flex;
    flex-direction: row;
    gap: 7px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 66px;
    margin: 0 auto;
    padding: 10px 10px;
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(20, 241, 149, 0.6));
    border: 0px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: 300;
    text-shadow: none;
    cursor: pointer;
    margin-top: 15px;
}

body.dark .user-login-method-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body.light .user-login-method-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}


@media (max-width: 768px) {
    .user-login-method-button {
      font-size: 18px;
      padding: 15px 15px;
      
}}


.user-login-method-button i {
    margin-right: 5px;
}

.user-login-method-solana,
.user-login-method-x {
    width: 25px;
    height: 25px;
}

@media (max-width: 768px) {
.user-login-method-solana,
.user-login-method-x {
    width: 20px;
    height: 20px;
}}

.user-login-method-telegram {
    width: 32px;
    height: 32px;
}

@media (max-width: 768px) {
.user-login-method-telegram {
    width: 20px;
    height: 20px;
}}


.user-login-method-google {
    width: 82px;
    height: auto;
}

@media (max-width: 768px) {
.user-login-method-google {
    width: 66px;
    height: auto;
}}

.user-login-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 10px;
    border-radius: 8px;
    background: rgba(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 500;
    text-shadow: none;
    position: relative;
    overflow: hidden;
}

body.dark .user-login-option {
background: rgba(0, 0, 0, 0.2);
}

.user-login-option:hover {
    transform: translateX(2px);
    background: rgba(145, 75, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .user-login-option {
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 500;
    }}

@media (max-width: 768px) {
    .user-login-option {
        gap: 3px;
        padding: 10px 5px;
        font-size: 13px;
        font-weight: 500;
    }}

.user-login-modal-content.wallet-selection-mode {
    height: auto;
    max-height: 90vh;
    width: 25%;
    min-width: 25%;
    max-width: 25%;
    z-index: 99999 !important;
}

@media (max-width: 768px) {
    .user-login-modal-content.wallet-selection-mode {
    height: auto;
    max-height: 76vh;
    width: 90%;
    min-width: 90%;
    max-width: 90%;
}}


.user-login-modal-content.wallet-selection-mode.supported-wallets {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
}

@media (max-width: 768px) {
.user-login-modal-content.wallet-selection-mode.supported-wallets {
    width: 90%;
    min-width: 90%;
    max-width: 90%;
}}


.user-login-wallet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  width: 100%;
  margin-top: 0px;
}

@media (max-width: 768px) {
.user-login-wallet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  width: 100%;
  margin-top: 0px;
}}

.user-login-modal-content.wallet-selection-mode.supported-wallets .user-login-wallet {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
.user-login-modal-content.wallet-selection-mode.supported-wallets .user-login-wallet {
    grid-template-columns: repeat(3, 1fr);
}}


.wallet-tab-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0px;
}

.wallet-tab-button {
    background: rgba(147, 88, 219, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 2px 16px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    border-radius: 20px;
    transition: all 0.2s ease;
    transform: scaleY(0.95);
}

body.dark .wallet-tab-button {
background: rgba(0, 0, 0, 1);
}

body.light .wallet-tab-button {
background: rgba(225, 225, 225, 0.9);
color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 768px) {
.wallet-tab-button {
        font-size: 12px;
}}

.wallet-tab-button.active {
    background: rgba(125, 55, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .wallet-tab-button.active {
background: rgba(255, 255, 255, 0.2);
}

body.light .wallet-tab-button.active {
background: rgba(0, 0, 0, 0.9);
color: rgba(255, 255, 255, 0.9);
}


.user-login-wallet-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    padding: 10px 10px;
    border-radius: 8px;
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 300;
    text-shadow: none;
    position: relative;
    overflow: hidden;
}

body.dark .user-login-wallet-options {
background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.light .user-login-wallet-options {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}


@media (max-width: 768px) {
.user-login-wallet-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 10px 5px;
    font-size: 13px;
    font-weight: 500;
}}



.user-login-wallet-options.user-login-wallet-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.user-login-wallet-options.login-loading:disabled {
    opacity: 1;
    cursor: wait;
}

.user-login-wallet-logo {
    width: 46px;
    height: 46px;
    transition: transform 0.3s ease;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1366px) {
   .user-login-wallet-logo {
        width: 35px;
        height: 35px;
}}

@media (max-width: 768px) {
   .user-login-wallet-logo {
        width: 46px;
        height: 46px;
}}

.user-login-wallet-installed {
  position: absolute;
  top: 18px;
  right: -28px;
  width: 120px;
  text-align: center;
  background: rgba(125, 55, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 300 !important;
  transform: rotate(45deg);
  z-index: 99999;
  padding: 0px 0px 2px 0px;
}

body.dark .user-login-wallet-installed {
    background: rgba(255, 255, 255, 0.2);
}

body.light .user-login-wallet-installed {
    background: rgba(0, 0, 0, 0.9);
}


@media (max-width: 768px) {
    .user-login-wallet-installed {
    display: none;
    }}

.user-login-option[disabled] {
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.7;
}

.spinner-icon {
    display: inline-block;
    animation: spin 1.5s infinite linear;
    margin-left: 6px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.login-loading {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.login-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.wallet-disabled {
  opacity: 0.6; 
  pointer-events: none;
  cursor: not-allowed;
}

.login-error-message-box {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    padding: 15px 15px 15px 15px;
    background: rgba(220, 50, 70, 0.4);
    border: 1px solid rgba(220, 50, 70, 0.5);
    box-shadow: 0px 0px 0px rgba(220, 50, 70, 0.7);
    border-radius: 8px;
    animation: fadeIn 1s ease-out;
    width: 100%;
}

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

body.dark .login-error-message-box {
    background: rgba(220, 50, 70, 0.3);
    border: 1px solid rgba(220, 50, 70, 0.2);
}

@media (max-width: 1366px) {
.login-error-message-box {
        padding: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}}

    .login-error-message-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
        text-align: center;
        margin: 0 auto;
        width: 90%;
    }


@media (max-width: 1366px) {
    .login-error-message-text {
        font-size: 12px;
    }}


.login-error-message-text a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.user-login-modal-content.confirmation-mode {
    width: auto;
    min-width: 22%;
    max-width: 22%;
    z-index: 999999 !important;
}

@media (max-width: 768px) {
    .user-login-modal-content.confirmation-mode {
        width: 90%;
        max-width: 90%;
    }}

.login-note-box {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 0px;
    padding: 20px;
    background: rgba(220, 50, 70, 0.6);
    border-radius: 8px;
    color:rgba(225, 225, 225, 0.8);
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .login-note-box {
    background: rgba(220, 50, 70, 0.9);
}

body.light .login-note-box {
    background: rgba(220, 50, 70, 0.9);
    color:rgba(225, 225, 225, 0.9);
}


@media (max-width: 768px) {
    .login-note-box {
       padding: 10px;
    }}

    .login-note-text {
        font-size: 14px;
        line-height: 18px;
    }

@media (max-width: 1366px) {
    .login-note-text {
        font-size: 12px;
        line-height: 16px;
    }}

@media (max-width: 768px) {
    .login-note-text {
        font-size: 13px;
        line-height: 16px;
    }}

    .login-note-box i {
    display: block;
    font-size: 26px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 7px;
    color: rgba(240, 255, 0, 1);
     animation: softblink 2s ease-in-out infinite; 
    transition: all 0.3s ease;
    }

.login-data-confirmation {
    text-align: center;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(145, 75, 255, 0.2);
    border-radius: 8px;
    color:rgba(225, 225, 225, 0.9);
    font-size: 15px;
    line-height: 20px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .login-data-confirmation {
    background: rgba(0, 0, 0, 1);
}

body.light .login-data-confirmation {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .login-data-confirmation {
        font-size: 13px;
    }}

@media (max-width:768px) {
    .login-data-confirmation {
        padding: 10px 20px 20px 20px;
    }}

    .user-confirmation-message-note {
        width: 100%;
    }

.user-confirmation-message .required-url{
    color: rgba(0, 255, 163, 1);
}

.detected-url {
    font-size: 16px;
    color:rgba(225, 225, 225, 0.9);
    font-weight: 300;
    margin-top: 0px;
    margin-bottom: 3px;
}

body.light .detected-url {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .detected-url {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 3px;
    }}

    @media (max-width: 1366px) {
    .detected-url {
        font-size: 14px;
    }}

.detected-url-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 15px;
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 20px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .detected-url-value {
       background: rgba(0, 0, 0, 0.1);
}

body.light .detected-url-value {
       background: rgba(255, 255, 255, 0.9)
}


@media (max-width: 1366px) {
    .detected-url-value {
        font-size: 13px;
        padding: 6px;
    }}

.detected-url-value.trusted {
  color: rgba(0, 255, 163, 1);
}

.detected-url-value.untrusted {
  color: rgba(220, 50, 70, 1);
}

.detected-url-value.trusted i,
.detected-url-value.untrusted i {
    font-size: 20px;
}

.detected-url-value.untrusted i {
 animation: blinking 0.6s ease-in-out infinite;
}

@keyframes blinking {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.06;
  }
}

.detected-url-value-text {
    font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
  display: inline-block;
}

.user-login-method {
    font-size: 16px;
    color:rgba(225, 225, 225, 0.9);
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 3px;
    
}

body.light .user-login-method {
    color:rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-login-method {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 3px;
    }}

    @media (max-width: 768px) {
    .user-login-method {
        font-size: 14px;
    }}

.user-login-method-value {
  background: rgba(255, 255, 255, 0.2); 
    padding: 10px;
    border-radius: 8px;
    color:rgba(225, 225, 225, 1);
    text-shadow: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .user-login-method-value {
    background: rgba(0, 0, 0, 0.3);
}

body.light .user-login-method-value {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .user-login-method-value {
        font-size: 13px;
        padding: 6px;
    }}
    

.user-provider-name {
    font-size: 15px;
    color:rgba(225, 225, 225, 0.9);
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 6px;
    
}

@media (max-width: 1366px) {
    .user-provider-name {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 3px;
    }}

    @media (max-width: 768px) {
    .user-provider-name {
        font-size: 14px;
    }}

.user-login-provider-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
border-radius: 3px;
}

body.dark .user-login-provider-logo {
      border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.2); 
}

@media (max-width: 1366px) {
    .user-login-provider-logo {
  width: 18px;
  height: 18px;
            }}

.user-provider-name-value {
  background: rgba(255, 255, 255, 0.2); 
    padding: 10px;
    border-radius: 8px;
    color:rgba(225, 225, 225, 1);
    text-shadow: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .user-provider-name-value {
    background: rgba(0, 0, 0, 0.3);
}


@media (max-width: 1366px) {
    .user-provider-name-value {
        font-size: 13px;
        padding: 6px;
    }}

.user-provider-address {
    font-size: 16px;
    color:rgba(225, 225, 225, 0.9);
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 3px;
}

body.light .user-provider-address {
    color:rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-provider-address {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 3px;
    }}

.user-provider-address-value {
  background: rgba(255, 255, 255, 0.2); 
    padding: 10px;
    border-radius: 8px;
    word-break: break-all;
    color:rgba(225, 225, 225, 1);
    text-shadow: none;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .user-provider-address-value {
    background: rgba(0, 0, 0, 0.3);
}

body.light .user-provider-address-value {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .user-provider-address-value {
        font-size: 12px;
        padding: 6px;
    }}

.user-confirmation-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.user-confirm-button,
.user-cancel-button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    width: auto;
    min-width: 100px;
    max-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    font-weight: 300;
}

@media (max-width: 1366px) {
    .user-confirm-button,
    .user-cancel-button {
    font-size: 13px;
    padding: 8px 20px;
        border-radius: 6px;
}}

@media (max-width: 768px) {
    .user-confirm-button,
    .user-cancel-button {
    padding: 12px 20px;
    font-size: 14px;
}}

.user-confirm-button,
.user-cancel-button {
    background: rgba(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .user-confirm-button,
body.dark .user-cancel-button {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .user-confirm-button,
body.light .user-cancel-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


.user-confirm-button:disabled,
.user-cancel-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.user-confirmation-buttons span {
    cursor: pointer;
}

.phrase-saved input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
  margin: 0; 
  padding: 0; 
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important; 
  min-height: 14px !important;
  flex-shrink: 0; 
  display: inline-block;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  cursor: pointer;
  margin-top: -2px;
  margin-right: 4px;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

body.dark .phrase-saved input[type="checkbox"] {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .phrase-saved input[type="checkbox"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}


.phrase-saved input[type="checkbox"]:checked {
  background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
body.dark .phrase-saved input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

body.light .phrase-saved input[type="checkbox"]:checked {
  background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }


.phrase-saved span {
    font-size: 14px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .phrase-saved span {
    font-size: 13px;
}}

.user-confirm-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.login-agreement {
    padding: 0px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 19px;
    font-weight: 300;
    text-shadow: none;
    text-align: center;
    width: 75%;
    margin: 0 auto;
    margin-top: 25px;
}

body.light .login-agreement {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.login-agreement {
     font-size: 12px;
    line-height: 15px;
    width: 75%;
}}

@media (max-width: 768px) {
.login-agreement {
     font-size: 13px;
    line-height: 16px;
    width: 85%;
}}


.login-agreement a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

body.dark .login-agreement a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

body.light .login-agreement a {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: underline;
}


.user-login-modal-content::-webkit-scrollbar {
    display: block !important;
    width: 3px !important;
  }
  
.user-login-modal-content::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.7) !important;
    width: 3px !important;
  }

    body.light .user-login-modal-content::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 1) !important;
    width: 3px !important;
  }

.user-login-modal-content::-webkit-scrollbar-thumb {
    background-color: rgb(149, 73, 252, 0.7) !important;
    width: 3px !important;
    border-radius: 3px !important;
  }

body.light  .user-login-modal-content::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0, 0.7) !important;
    width: 3px !important;
    border-radius: 3px !important;
  }

body:has(.user-login-2fa-modal) .user-login-modal-content.confirmation-mode {
    display: none;
}

.user-login-2fa-modal {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

body:has(.user-login-modal-content) .user-login-2fa-modal {
    width: 100%;
    height: 100%;
}

.user-login-2fa-title {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    font-weight: 300;
    vertical-align: middle;
}

body.light .user-login-2fa-title {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

@media (max-width: 1366px) {
    .user-login-title {
    font-size: 22px;
}}

.user-login-2fa-desc {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.light .user-login-2fa-desc {
    color: rgba(0, 0, 0, 0.9);
}

.user-login-2fa-input-group {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

 .user-login-2fa-input {
        width: 25%;
        margin: 0 auto;
        margin-top: 5px;
        display: block;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        border-radius: 6px;
        height: 36px;
        border-color: transparent;
        outline: none;
        padding: 1px 6px;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        }

    body.light  .user-login-2fa-input {
          border: 1px solid rgba(0, 0, 0, 0.2);
        }

    .user-login-2fa-input:focus {
        border-color: transparent;
        outline: none;
        }

.user-login-2fa-action {
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-login-2fa-confirm {
    background: rgb(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    width: auto;
    min-width: 75px;
    max-width: 150px;
    justify-content: center;
    align-items: center;
}

body.dark .user-login-2fa-confirm {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-login-2fa-confirm {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.user-login-2fa-confirm .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.user-login-2fa-message-box {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    padding: 15px 15px 15px 15px;
    background: rgba(220, 50, 70, 0.4);
    border: 1px solid rgba(220, 50, 70, 0.5);
    box-shadow: 0px 0px 0px rgba(220, 50, 70, 0.7);
    border-radius: 8px;
    animation: fadeIn 1s ease-out;
    width: 100%;
}

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

body.dark .user-login-2fa-message-box {
    background: rgba(220, 50, 70, 0.3);
    border: 1px solid rgba(220, 50, 70, 0.2);
}

@media (max-width: 1366px) {
.user-login-2fa-message-box {
        padding: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
}}

    .user-login-2fa-message-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
        text-align: center;
        margin: 0 auto;
        width: 90%;
    }


@media (max-width: 1366px) {
    .user-login-2fa-message-text {
        font-size: 12px;
    }}


.user-login-2fa-message-text a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.user-login-timer,
.user-login-timer.expired {
    font-size: 14px;
    font-weight: 400;
    color: rgba(225, 225, 225, 1);
    text-shadow: none;
    margin-top: 5px;
    margin-bottom: 0px;
}

body.light .user-login-timer,
body.light .user-login-timer.expired {
  color: rgba(0, 0, 0, 0.9);
}

.user-login-2fa-lost-access,
.user-login-2fa-back-to {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 300;
    color: rgba(225, 225, 225, 1);
    text-shadow: none;
    margin-top: 15px;
    margin-bottom: 0px;
    text-decoration: none;
    cursor: pointer;
}

body.light .user-login-2fa-lost-access,
body.light .user-login-2fa-back-to {
  color: rgba(0, 0, 0, 0.9);
}

.user-login-2fa-lost-access span {
    text-decoration: underline;
}

.agreement-link {
    text-decoration: underline;
    cursor: pointer;
}

body:has(.agreement-modal-overlay) .user-login-modal-overlay,
body:has(.agreement-modal-overlay) .user-login-modal-content,
body:has(.agreement-modal-overlay) .user-header,
body:has(.agreement-modal-overlay) .homepage-footer,
body:has(.agreement-modal-overlay) .main-footer,
body:has(.agreement-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agreement-modal-overlay) .terms-container {
  padding: 0px 0px 0px 0px;
}

body:has(.agreement-modal-overlay) .terms-section {
    padding: 15px 15px;
    margin-bottom: 15px;
  }

  .agreement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    transition: background-color 0.3s;
  z-index: 9999999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px); 
}

 .agreement-modal-content {
  position: relative;
  background: linear-gradient(100deg, #9945FF, #14F195);
  width: 50%;
  max-width: 50%;
  max-height: 90vh;
  border-radius: 12px;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInagreement 0.2s ease-out;
  padding: 25px;
  z-index: 9999999999 !important;
}

 body.dark .agreement-modal-content {
    border: 1px solid rgba(255, 255, 255, 0.2); 
 background: rgba(0, 0, 0, 1);
 }

  body.light .agreement-modal-content {
 background: rgba(255,255,255,1);
     border: 1px solid rgba(0, 0, 0, 0.2); 
 }

 @media (max-width: 1366px) {
 .agreement-modal-content {
  width: 50%;
  max-width: 50%;
  max-height: 85vh;
  padding: 25px 15px 15px 15px;
  }
}

@media (max-width: 768px) {
 .agreement-modal-content {
  width: 95%;
  max-width: 95%;
  max-height: 85vh;
  padding: 25px 15px 15px 15px;
  }
}

.agreement-scroll-area {
  padding: 0px 0px 0px 0px;
  overflow-y: auto;
}

 .agreement-modal-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 2px;
  right: 2px;
}

body.dark .agreement-modal-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agreement-modal-close {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agreement-modal-close {
      font-size: 11px;
  }
}

@media (max-width: 768px) {
.agreement-modal-close {
      font-size: 13px;
  }
}

.agreement-scroll-area::-webkit-scrollbar {
display: none !important;
width: 0px !important;
}

.agreement-scroll-area::-webkit-scrollbar-track {
display: none !important;
width: 0px !important;
}

.agreement-scroll-area::-webkit-scrollbar-thumb {
display: none !important;
width: 0px !important;
}


body:has(.user-login-phrase-overlay) .user-header,
body:has(.user-login-phrase-overlay) .footer,
body:has(.user-login-phrase-overlay) .main-footer,
body:has(.user-login-phrase-overlay) .global-footer,
body:has(.user-login-phrase-overlay) .ask-treo,
body:has(.user-login-phrase-overlay) .agent-interaction-dock-button,
body:has(.user-login-phrase-overlay) .float-chat-button {
  display: none !important;
}


.user-login-phrase-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    z-index: 999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-login-welcome-title {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    font-weight: 300;
    vertical-align: middle;
    font-size: 32px;
    line-height: 38px;
}

body.light .user-login-welcome-title {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

@media (max-width: 1366px) {
    .user-login-welcome-title {
    font-size: 26px;
        line-height: 32px;
}}

.user-login-welcome-desc {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    font-weight: 300;
    vertical-align: middle;
    font-size: 16px;
    line-height: 20px;
    margin: 0 auto;
    margin-top: 5px;
    width: 90%
}

body.light .user-login-welcome-desc {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

@media (max-width: 1366px) {
    .user-login-welcome-desc {
    font-size: 14px;
    line-height: 18px;
}}

@media (max-width: 768px) {
    .user-login-welcome-desc {
    font-size: 15px;
    line-height: 18px;
    width: 95%
}}


.user-login-welcome-desc a {
color: rgba(255, 255, 255, 0.9);
text-decoration: underline;
}

body.light .user-login-welcome-desc a {
color: rgba(0, 0, 0, 0.9);
text-decoration: underline;
}


.user-login-welcome-desc-sub {
    color: rgba(255, 255, 255, 1);
    text-shadow: none;
    text-align: center;
    font-weight: 300;
    vertical-align: middle;
    font-size: 13px;
    line-height: 20px;
    margin: 0 auto;
    margin-top: 5px;
    width: 100%;
    font-style: italic;
}

body.light .user-login-welcome-desc-sub {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

@media (max-width: 1366px) {
    .user-login-welcome-desc-sub {
    font-size: 12px;
    line-height: 15px;
}}

@media (max-width: 768px) {
    .user-login-welcome-desc-sub {
    font-size: 12px;
    line-height: 15px;
}}

.user-login-welcome-desc-sub a {
color: rgba(255, 255, 255, 0.9);
text-decoration: underline;
}

body.light .user-login-welcome-desc-sub a {
color: rgba(0, 0, 0, 0.9);
text-decoration: underline;
font-weight: 400;
}

.solana-wallet {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    padding: 25px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), 
                      linear-gradient(to right, #9945FF, #14F195);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .solana-wallet {
    min-height: 222px;
    padding: 20px;
}}

.solana-wallet::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(153,69,255,0.2), transparent);
    z-index: 0;
    pointer-events: none;
}

.solana-wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.solana-wallet-logo {
    height: 36px;
    width: auto;
}

.solana-wallet-label {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

@media (max-width: 768px) {
.solana-wallet-label {
    font-size: 18px;
    font-weight: 500;
}}

.solana-wallet-body {
    margin-top: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

.solana-wallet-address-label {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 5px;
    margin-left: 5px;
}

.solana-wallet-address-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Courier New', monospace; 
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    width: 100%;
}

.solana-wallet-address {
    font-size: 14px;
    color: rgba(225, 225, 225, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
.solana-wallet-address {
    font-size: 12px;
}}


.address-copy-button {
    background: none;
    border: none;
    font-size: 15px;
    color: rgba(225, 225, 225, 0.9);
    cursor: pointer;
    margin-top: -2px;
    transition: transform 0.2s;
}

.phrase-note-box {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 0px;
    padding: 20px;
    background: rgba(220, 50, 70, 0.6);
    border-radius: 8px;
    color:rgba(225, 225, 225, 1);
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .phrase-note-box {
    background: rgba(220, 50, 70, 0.9);
}

body.light .phrase-note-box {
    background: rgba(220, 50, 70, 0.9);
    color:rgba(225, 225, 225, 0.9);
}


@media (max-width: 768px) {
    .phrase-note-box {
       padding: 20px 15px;
    }}

    .phrase-note-box i {
    display: block;
    font-size: 36px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 7px;
    color: rgba(240, 255, 0, 1);
     animation: softblink 2s ease-in-out infinite; 
    transition: all 0.3s ease;
    }

    .phrase-note-title {
        font-size: 20px;
        line-height: 25px;
        font-weight: 400;
    }

    @media (max-width: 1366px) {
    .phrase-note-title {
        font-size: 18px;
        line-height: 22px;
    }}

    @media (max-width: 768px) {
    .phrase-note-title {
        font-size: 18px;
        line-height: 22px;
    }}


    .phrase-note-text {
        font-size: 14.5px;
        font-weight: 300;
        line-height: 18px;
        margin-top: 5px;
    }

    @media (max-width: 1366px) {
    .phrase-note-text {
        font-size: 12px;
        line-height: 16px;
    }}

    @media (max-width: 768px) {
    .phrase-note-text {
        font-size: 14px;
        line-height: 17px;
    }}

    .mnemonic-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        gap: 10px;
        grid-row-gap: 10px;
        row-gap: 10px;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
    }

    .mnemonic-items {
       font-size: 16px;
       font-weight: 300;
        background: transparent;
        padding: 7px 14px;
        border: 1px solid rgba(255, 255, 255, 0.3); 
        border-radius: 6px;
        text-align: center;
}

body.light .mnemonic-items {
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    font-weight: 400;
}

    @media (max-width: 768px) {
    .mnemonic-items {
        font-size: 14px;
        line-height: 17px;
    }}

.mnemonic-no {
    display: none;
}

.phrase-saved {
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



.login-with-telegram-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.telegram-visual-button {
    position: relative;
    z-index: 1; 
    width: 100%;
}

.login-with-telegram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.001; 
    z-index: 9999999999 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.5); 
    cursor: pointer;
}


.treo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999999999 !important;
  cursor: pointer;
  animation: floatTreo 3s ease-in-out infinite;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(1);
}

 @media (max-width: 1366px) {
    .treo {
  position: fixed;
  top: 17px;
  left: 10px;
    }}

.treo-hidden {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}


.treo-close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  padding: 0px 0px 3px 0px;
  font-size: 8px;
  cursor: pointer;
  z-index: 99999;
}

body.dark .treo-close-button {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.6);
}

 @media (max-width: 1366px) {
.treo-close-button {
  position: absolute;
  top: -9px;
  right: -9px;
    width: 14px;
  height: 14px;
  padding: 0px 0px 2px 0px;
  font-size: 7px;
}}


        .ask-treo {
          position: fixed;
          top: 10px;
          left: 10px;
          cursor: pointer;
          width: 46px;
          height: 46px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.2); 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        }

body.dark .ask-treo {
  background: rgba(0, 0, 0, 1);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 1px 3px rgba(255, 255, 255, 1);
}

 @media (max-width: 1366px) {
    .ask-treo {
          width: 42px;
          height: 42px;
 }}

@keyframes floatTreo {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
.treo-disconnectback {
  position: fixed;
  inset: 0;
  z-index: 9999 !important;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 1);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-position: var(--treo-bg-pos, center center);
  will-change: transform;
  transform: translateX(-100%);
  animation: TreoAppear 0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: saturate(1.02) contrast(1.05);
  min-height: 100vh;
  min-width: 100vw;
}

@keyframes TreoAppear {
  from {
    transform: translateX(-100%) scale(1.06);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 768px) {
  .treo-disconnectback {
    background-position: 10% 36% !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {
  .treo-disconnectback {
    transform: scale(1.02);
  }
}


.treo-disconnectback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 0; 
}


body.dark .treo-disconnectback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 0; 
}

.user-logout-confirm-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.has-modal {
    overflow: hidden;
    background: rgba(0, 0, 0, 1);
    z-index: 9999 !important;
}

body:has(.user-logout-confirm-overlay) .user-header,
body:has(.user-logout-confirm-overlay) .main-footer,
body:has(.user-logout-confirm-overlay) .global-footer,
body:has(.user-logout-confirm-overlay) .ask-treo,
body:has(.user-logout-confirm-overlay) .agent-interaction-dock-button,
body:has(.user-logout-confirm-overlay) .float-chat-button,
body:has(.user-logout-confirm-overlay) .agent-interaction-dock,
body:has(.user-logout-confirm-overlay) .float-chatbox  {
  display: none !important;
}

.user-logout-confirm-content {
    background: linear-gradient(100deg, rgba(145, 75, 255, 1), rgba(20, 241, 149, 1));
    padding: 35px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    border: 0px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    margin: auto;
    animation: modalAppear 0.3s ease-out;
    z-index: 999999 !important;
}

body.dark .user-logout-confirm-content {
background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-logout-confirm-content {
background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .user-logout-confirm-content {
        width: 90%;
        max-width: 90%;
        padding: 30px 15px 30px 15px;
    }}


.user-logout-confirm-content h2 {
    font-size: 25px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    margin-bottom: 10px;
}

body.light .user-logout-confirm-content h2 {
    color: rgba(0, 0, 0, 0.9);
}

.user-logout-confirm-content p {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    color: white;
    font-size: 16px;
}

body.light .user-logout-confirm-content p {
    color: rgba(0, 0, 0, 0.9);
}

.user-logout-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.logout-confirm-button,
.logout-cancel-button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    width: 166px;
    min-width: 166px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
   .logout-confirm-button,
    .logout-cancel-button {
    font-size: 13px;
    padding: 8px 20px;
    font-weight: 500;
    border-radius: 6px;
}}

@media (max-width: 768px) {
   .logout-confirm-button,
    .logout-cancel-button {
    width: 125px;
    min-width: 125px;
}}

   .logout-confirm-button,
   .logout-cancel-button {
      background: rgba(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .logout-confirm-button,
body.dark .logout-cancel-button {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .logout-confirm-button,
body.light .logout-cancel-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.logout-confirm-button:disabled,
.logout-cancel-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-logout-confirm-buttons .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}
body:has(.agent-compare-modal-overlay) .user-header,
body:has(.agent-compare-modal-overlay) .admin-header,
body:has(.agent-compare-modal-overlay) .main-footer,
body:has(.agent-compare-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-compare-modal-overlay) .global-footer,
body:has(.agent-compare-modal-overlay) .ask-treo,
body:has(.agent-compare-modal-overlay) .agent-interaction-dock-button,
body:has(.agent-compare-modal-overlay) .float-chat-button {
  display: none;
}
.agent-compare-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 20px 20px 20px;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 9999999999;
    overflow-y: auto;
  }

  @media (max-width: 1366px) {
    .agent-compare-modal-overlay {
      padding-top: 20px;
    }}

    @media (max-width:768px) {
      .agent-compare-modal-overlay {
            width: 100%;
    max-width: 100%;
    padding: 10px 10px 10px 10px;
      }}
  
  .agent-compare-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: 0px solid rgba(255, 255, 255, 0.2);
    padding: 30px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 1);
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
  z-index: 1;
  }
  
  @media (max-width: 1366px) {
    .agent-compare-modal {
    width: 100%;
    min-width: 66%;
    max-width: 100%;
      padding: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .agent-compare-modal {
      width: 100%;
            max-width: 100%;
      margin-bottom: 50px;
      padding: 10px 10px 10px 10px;
    }
  }
  
  body.dark .agent-compare-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
    body.light .agent-compare-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .agent-compare-title-and-desc {
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(145, 75, 255, 0.01) !important;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
    margin-bottom: 20px;
    text-align: center;
}

body.light .agent-compare-title-and-desc {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

        @media (max-width: 1366px) {
          .agent-compare-title-and-desc {
            padding: 10px;
                margin-bottom: 20px;
          }}

        @media (max-width: 768px) {
          .agent-compare-title-and-desc {
            padding: 10px;
                margin-bottom: 12px;
          }}

          body.dark .agent-compare-title-and-desc {
            background: rgba(0, 0, 0, 1) !important;
          }

  .agent-compare-title {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 300;
  }

  body.light .agent-compare-title {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .agent-compare-title {
      font-size: 20px;
      margin-bottom: 6px;
    }}

    @media (max-width: 768px) {
      .agent-compare-title {
        font-size: 22px;
        margin-bottom: 3px;
      }}
  

      .agent-compare-desc {
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        text-align: center;
        font-size: 15px;
        line-height: 18px;
        margin-bottom: 0px;
        font-weight: 300;
        font-style: italic;
        width: 99%;
        max-width: 99%;
      }

        body.light .agent-compare-desc {
    color: rgba(0, 0, 0, 0.9);
  }
      @media (max-width: 1366px) {
        .agent-compare-desc {
          font-size: 13px;
          line-height: 18px;
          width: 55%;
          max-width: 55%;
        }}
    
        @media (max-width: 768px) {
          .agent-compare-desc {
            font-size: 13px;
            line-height: 16px;
            width: 100%;
            max-width: 100%;
            margin-bottom: 0px;
          }}

  .agent-compare-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }
  
  @media (max-width: 768px) {
    .agent-compare-grid {
      gap: 10px;
    }}

  .agent-compare-column {
    flex: 1 1;
    min-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 15px 15px 15px;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  body.dark .agent-compare-column {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

    body.light .agent-compare-column {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 768px) {
    .agent-compare-column {
      padding: 10px 10px 12px 10px;
    }}

  .compare-agent-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    margin: 0 auto 0px auto;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  }

  .agent-compare-column .compare-agent-name {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    padding: 0px 0px;
    margin-top: 10px;
  }

  @media (max-width: 1366px) {
    .agent-compare-column .compare-agent-name {
      font-size: 13px;
    }}


    .compare-table-wrapper {
      padding-top: 0px;
      padding-bottom: 0px;
    }


  .compare-table {
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-top: 15px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    font-size: 15px;
    font-weight: 300;
  }

  body.dark .compare-table {
    background-color: rgba(0, 0, 0, 1);
  }

    body.light .compare-table {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9);
  }


  @media (max-width: 1366px) {
    .compare-table {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
      .compare-table {
        font-size: 13px;
      }}


  .compare-table td {
    padding: 8px 10px;
    vertical-align: middle;
    max-width: 100%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 75px;
  }

  body.dark .compare-table td {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

    body.light .compare-table td {
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1366px) {
    .compare-table td {
    padding: 2px 6px;
  }}

  @media (max-width: 1366px) {
    .compare-table td {
    padding: 4px 8px;
  }}

  @media (max-width: 768px) {
    .compare-table td {
    padding: 6px 10px;
  }}

  .compare-table td:first-child {
    font-weight: 300;
    width: 100px;
    color: rgba(255, 255, 255, 0.9);
  }

  body.light .compare-table td:first-child {
    color: rgba(0, 0, 0, 0.9);
  }


  @media (max-width: 1366px) {
    .compare-table td:first-child {
      width: 80px;
    }}
  

.compare-table tr,
.compare-table td {
  height: 50px !important;
  min-height: 50px !important;
  }


  @media (max-width: 1366px) {
  .compare-table tr,
  .compare-table td {
  height: 35px !important;
  min-height: 35px !important;
  }}

  .compare-links a {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
    margin-right: 8px;
    transition: color 0.2s;
  }

  body.light .compare-links a {
  color: rgba(0, 0, 0, 0.9);
  }

  .compare-submitter-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }

    body.light .compare-submitter-link {
  color: rgba(0, 0, 0, 0.9);
  }

  .compare-submitter-link i {
    margin-left: 2px;
    font-size: 10px;
    line-height: 13px;
    vertical-align: middle;
  }

  .compare-agent-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    word-break: break-all;
    display: inline-block;
  }

    body.light .compare-agent-link {
  color: rgba(0, 0, 0, 0.9);
  }


  .agent-detail-page {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    word-break: break-all;
    display: inline-block;
    font-size: 14px;
  }

    body.light  .agent-detail-page {
  color: rgba(0, 0, 0, 0.9);
  }

  .agent-compare-search-container {
    margin-bottom: 10px;
    width: 100%;
    position: relative;
  }
  
  .agent-compare-search-container input[type="text"] {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .agent-compare-search-container input[type="text"]:focus {
    outline: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0, 0.6);
  }
  
  .compare-search-results {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 10px;
  }
  
  .compare-search-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(0, 0, 0, 1);
    margin-bottom: 6px;
    transition: background 0.2s;
  }
  
  .compare-search-item:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .compare-search-thumb {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 10px;
  }
  
  .compare-search-info {
    flex: 1 1;
  }
  
  .compare-search-info .agent-name {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
    margin-bottom: 2px;
  }
  
  .compare-search-info .agent-specialization {
    font-size: 12px;
    color: #ddd;
  }
  
  .agent-compare-modal .close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 4px;
  right: 4px;
  }

  body.light .agent-compare-modal .close-button {
    color: rgba(0, 0, 0, 0.9)
  }

    @media (max-width: 1366px) {
    .agent-compare-modal .close-button {
      font-size: 11px;
        top: 2px;
        right: 2px;
    }}

  @media (max-width: 768px) {
    .agent-compare-modal .close-button {
      font-size: 13px;
       top: 12px;
        right: 12px;
    }}


  .compare-agent-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
  }
  
  .compare-image-wrapper {
    position: relative;
    width: 100%;
  }

  .compare-button-group {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
  }

    .compare-change-button {
      position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 4px;
  right: 4px;
  }

    @media (max-width: 1366px) {
    .compare-change-button {
      font-size: 11px;
        top: 2px;
        right: 2px;
    }}

  @media (max-width: 768px) {
    .compare-change-button {
      font-size: 13px;
       top: 12px;
        right: 12px;
    }}


  
  .compare-detail-button {
    background: #8c5edc ;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }

  body.dark .compare-detail-button {
    background: rgb(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .compare-detail-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
  .compare-detail-button {
    font-size: 11px;
    padding: 6px 6px;
    border-radius: 3px;
  }}

  @media (max-width: 768px) {
    .compare-detail-button {
    font-size: 12px;
    border-radius: 3px;
  }}


  .compare-detail-button i {
    margin-left: 2px;
  }
  

  .compare-search-input-container {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
    height: 30px;
    position: relative;
    z-index: 999;
    }

    .compare-search-input-container input[type="text"] {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    padding: 8px 40px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 999;
    }

    body.light  .compare-search-input-container input[type="text"] {
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
  
    @media (max-width: 1366px) {
      .compare-search-input-container input[type="text"] {
        width: 100%;
        height: 30px;    }
    }
  
    @media (max-width: 768px) {
      .compare-search-input-container input[type="text"] {
        width: 100%;
        height: 33px !important;    }
    }
  
    .compare-search-input-container input[type="text"]:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  
    .compare-search-input-container input[type="text"]:focus {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    font-weight: 300;
    padding: 8px 40px 8px 12px;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
    }
  
    @media (max-width: 1366px) {
      .compare-search-input-container input[type="text"]:focus {
      font-size: 12px;
    }}
  
    .compare-search-input-container input[type="text"]::placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    }
  
    
    @media (max-width: 1366px) {
      .compare-search-input-container input[type="text"]::placeholder {
      font-size: 12px;
    }}
  
    .fas.fa-search {
    position: absolute;
    top: 66%;
    right: 10px;
    transform: translateY(-50%);
    color: rgb(0, 0, 0, 0.6);
    pointer-events: none;
    display: none;
    }
  
    @media (max-width: 1366px) {
      .fas.fa-search {
        position: absolute;
        top: 56%;
    }}
  
    .compare-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 20px;
    margin-left: 0px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1003;
    max-height: 728px;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    animation: dropdownFade 0.2s ease;
    }
  
    
    body.dark .compare-search-dropdown {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 1366px) {
      .compare-search-dropdown {
    width: 100%;
        max-height: 300px;
        margin-top: 6px;
    }}
  
  
    @media (max-width: 768px) {
      .compare-search-dropdown {
        width: 100%;
        margin: 0px;
        top: 40px;
        height: auto;
        max-height: 580px;
        box-sizing: border-box;
        margin: 0 auto;
        margin: 0 0px;
    }}
  
  
    .compare-no-results-message {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      margin-top: 20px;
      margin-left: 0px;
      background: rgb(145, 75, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      z-index: 1003;
      max-height: 512px;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      -webkit-backdrop-filter: blur(10px);
              backdrop-filter: blur(10px);
      animation: dropdownFade 0.2s ease;
      font-size: 13px;
      color: rgba(255, 255, 255,0.7);
      font-style: italic;
      padding: 15px 10px;
  }

      body.dark .compare-no-results-message {
        background: rgb(0, 0, 0, 1);
      }
  
            body.light .compare-no-results-message {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
      }
  

  @media (max-width: 1366px) {
    .compare-no-results-message {
      margin-top: 10px;
      font-size: 12px;
      padding: 10px 10px;
  }}
  
  @media (max-width: 768px) {
    .compare-no-results-message {
      width: 95%;
      margin: 0px;
      top: 50px;
      height: auto;
      max-height: 580px;
      box-sizing: border-box;
      margin: 0 auto;
      margin: 0 10px;
  }}
  
    .compare-search-dropdown:empty {
    display: none;
    }
    @keyframes dropdownFade {
    from {
    opacity: 0;
    transform: translateY(-10px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
    }
  
  
    .compare-search-result-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
    padding: 10px;
    }

    body.dark .compare-search-result-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    }
  
    .compare-search-result-item:last-child {
    border-bottom: none;
    }
  
    .compare-search-result-item a {
    padding: 12px;
    text-decoration: none;
    color: rgb(0, 0, 0, 0.6);
    width: 100%;
    display: block;
    transition: background-color 0.2s;
    font-size: 13px;
    }
  
    .compare-search-result-content {
    display: flex;
    align-items: center;
    }
  
    .compare-search-result-content img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    }

  body.dark  .compare-search-result-content img {
  background-color: rgba(255,255,255, 1);
    }

  
    @media (max-width: 1366px) {
      .compare-search-result-content img {
        width: 50px;
        height: 50px;
        margin-right: 6px;
    }}
  
  
    .compare-search-result-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 66px;
    }
  
    @media (max-width: 1366px) {
      .compare-search-result-text {
        min-height: 50px;
    }}
  
    .compare-search-result-item .compare-agentsearchname {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
    color: rgba(0, 0, 0, 0.7);
    }

    body.dark .compare-search-result-item .compare-agentsearchname {
      color: rgba(255, 255, 255, 0.8)
    }
  
    @media (max-width: 1366px) {
      .compare-search-result-item .compare-agentsearchname {
        font-size: 12px;
            margin-bottom: 2px;
    }}
  
      @media (max-width: 768px) {
      .compare-search-result-item .compare-agentsearchname {
        font-size: 13px;
    }}

    .compare-search-result-item .compare-agentsearchspecialization {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 4px;
    font-weight: 500;
    }

        body.dark .compare-search-result-item .compare-agentsearchspecialization {
      color: rgba(255, 255, 255, 0.8)
    }
  
    @media (max-width: 1366px) {
      .compare-search-result-item .compare-agentsearchspecialization {
        font-size: 11px;
            margin-bottom: 2px;
  
    }}
  
    .compare-search-result-item .compare-agentsearchpricing {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.7);
      font-weight: 500;
      }
    
      @media (max-width: 1366px) {
        .compare-search-result-item .compare-agentsearchpricing {
          font-size: 11px;
    
      }}
  
  
    .compare-search-result-item:hover {
    background-color: rgba(145, 75, 255, 0.1);
    cursor: pointer;
    }
  
    body.dark .compare-search-result-item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      }
  
      body.light .compare-search-result-item:hover {
      background-color: rgba(0, 0, 0, 0.1);
      }

    body.dark .compare-search-result-item input[type="text"] {
    background: rgba(255, 255, 255, 0.95);
    color: rgb(0, 0, 0, 0.6);
    }
  
    body.dark .compare-search-result-item input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.7);
    }


.agent-compare-loading-initial {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      margin-top: 6px;
      text-align: left;
      color: rgba(255, 255, 255, 0.6);
}

body.light .agent-compare-loading-initial {
      color: rgba(0, 0, 0, 0.9);
}

    @media (max-width: 768px) {
.agent-compare-loading-initial {
  margin: 0 auto;
        margin-top: 0px;
      text-align: center;
      }}

.initial-loading.spinning {
      display: inline-block;
      animation: spin 1.5s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.agent-compare-loading-initial .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


    .agent-compare-loading {
      font-size: 13px;
      margin-top: 25px;
      text-align: left;
      color: rgba(255, 255, 255, 0.6);
    }

    body.light .agent-compare-loading {
      color: rgba(0, 0, 0, 0.9)
    }

    @media (max-width: 1366px) {
      .agent-compare-loading {
        margin-top: 10px;
        font-size: 12px;
      }}

    @media (max-width: 768px) {
      .agent-compare-loading {
          margin: 0 auto;
                margin-top: 12px;
                text-align: center;
      }}
    
    .compare-loading {
      display: inline-block;
      animation: spin 1.5s infinite linear;
      margin-right: 6px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }


.agent-compare-loading .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

    .agent-stats-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .agent-radar-chart-wrapper .recharts-surface {
      width: 100% !important; 
      height: 310px !important;
    }
    

    .agent-radar-chart-wrapper {
      position: relative;
      background: rgb(145, 75, 255, 0.1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
      border-radius: 6px;
      margin-top: 15px;
      width: 100% !important; 
      height: 250px !important;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 0px 0px 0px;
      overflow: hidden;
    }


      body.dark .agent-radar-chart-wrapper {
        background: rgba(0, 0, 0, 1);
        border: 1px solid rgba(0, 0, 0, 0.1); 
      }

    body.light .agent-radar-chart-wrapper {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
      }


    .recharts-polar-radius-axis-tick-value {
      font-size: 10px;
      fill: rgba(255, 255, 255, 0.9);
    }    

body.light .recharts-polar-radius-axis-tick-value {
      fill: rgba(0, 0, 0, 0.9);
    }   

    .radar-label {
      fill: rgba(255, 255, 255, 0.7);
      font-size: 13px;
      pointer-events: none;
    }

    body.light .radar-label {
      fill: rgba(0, 0, 0, 0.9);
    }   


        @media (max-width: 1366px) {
      .radar-label {
        font-size: 12px;
        font-weight: 560;
      }}

    @media (max-width: 768px) {
      .radar-label {
        font-size: 11px;
        font-weight: 560;
      }}
    

    .radar-label-capabilities {
      transform: translateY(-4px);
    }

    @media screen and (max-width: 768px) {
      .radar-label-capabilities {
        transform: translateY(-2px);
    }}

    .radar-label-specialization {
      transform: translateX(-42px);
    }

    @media screen and (max-width: 768px) {
      .radar-label-specialization {
        transform: translateX(-33px);
    }}

    .radar-label-availability {
      transform: translateX(30px);
    }

    @media screen and (max-width: 768px) {
      .radar-label-availability {
        transform: translateX(23px);
    }}

    

    

    .agent-score-flex {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;
      padding: 0px 15px;
      top: 15px;
      gap: 15px;
    }
    
    
    .agent-score-block {
      background: rgba(145, 75, 255,0.2);
      border: 1px solid rgba(255, 255, 255, 0.2); 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
      border-radius: 6px;
      padding: 10px;
      text-align: center;
      width: 100%;
    }

    body.dark .agent-score-block {
      background: rgba(0.0.0,0.1);
    }
    
    .agent-score-value {
      font-size: 26px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
    }
    
        @media (max-width: 1366px) {
      .agent-score-value {
        font-size: 22px;
      }}

    @media (max-width: 768px) {
      .agent-score-value {
        font-size: 26px;
      }}

    .agent-score-label {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      margin-top: 3px;
      font-style:italic;
    }

            @media (max-width: 1366px) {
      .agent-score-label {
        font-size: 11px;
        margin-top: 2px;
      }}

    @media (max-width: 768px) {
      .agent-score-label {
        font-size: 11px;
        margin-top: 2px;
      }}
    

    

    
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  background: transparent;
  border-bottom: 1px solid rgba(225,225,255, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: background-color 0.3s;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

body.dark .user-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .user-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1366px) {
  .user-header {
    height: 56px;
  }}

.header-top {
  display: flex;
  align-items: center;

}

.logo-container {
  display: flex;
  flex-direction: column;
}

.mobile-buttons {
  display: none;
}

.user-header h1 {
  margin: 0;
}

.user-header h1 a {
  font-family: 'Iceland', sans-serif;
  position: relative;
  display: block;
  left: 8px;
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  text-decoration: none;
  margin-top: -26px;
}

body.light .user-header h1 a {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    font-weight: 600;
}

@media (max-width: 1366px) {
  .user-header h1 a {
    font-size: 22px;
    margin-top: -19px;
  }}

.user-header p {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 300;
  text-shadow: none;
  margin-top: 7px;
  left: 8px;
}

body.light .user-header p {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
}

@media (max-width: 1366px) {
  .user-header p {
    font-size: 11px;
    margin-top: 5px;
  }}

.user-header .user-header-notifications-dropdown {
  position: absolute;
  top: 40px;
  right: 6px;
  width: auto;
  min-width: 400px;
  max-width: 400px;
  height: auto;
  min-height: 50px;
  max-height: 600px;
  background: #8f55ff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px;
  overflow-y: auto;
  z-index: 999;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-weight: 500 !important;
}

body.dark .user-header .user-header-notifications-dropdown {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-header .user-header-notifications-dropdown {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .user-header .user-header-notifications-dropdown {
    top: 45px;
    right: 6px;
    width: auto;
    min-width: 350px;
    max-width: 350px;
    height: auto;
    min-height: 50px;
    max-height: 500px;
      padding: 10px;
  }}

@media (max-width: 768px) {
  .user-header .user-header-notifications-dropdown {
    position: absolute;
    top: 65px;
    right: 9px;
    width: 95%;
    min-width: 96%;
    max-width: 96%;
    height: auto;
    min-height: 90px;
    max-height: 90vh;
    border-radius: 8px;
    padding: 15px;
    overflow-y: auto;
  }}

.user-header .user-header-notification-item-box {
  padding: 10px 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 300;
  position: relative;
}

body.dark .user-header .user-header-notification-item-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-header .user-header-notification-item-box {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .user-header .user-header-notification-item-box {
    padding: 8px;
    margin-bottom: 8px;
  }}

.user-header .user-header-notification-item-box.unread {
  background: rgba(255, 255, 255, 0.2);
}

body.dark .user-header .user-header-notification-item-box.unread {
  background: rgba(255, 255, 255, 0.1);
}

body.light .user-header .user-header-notification-item-box.unread {
  background: rgba(0, 0, 0, 0.1);
}

.user-header .user-header-notification-item-box:hover {
  cursor: pointer;
}


.user-header-notification-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
}

.user-header-notification-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.user-header .user-header-notification-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1366px) {
.user-header .user-header-notification-avatar {
  width: 33px !important;
  height: 33px !important;
}}

@media (max-width: 768px) {
  .user-header .user-header-notification-avatar {
    width: 26px !important; 
    height: 26px !important;
  }}


.user-header .user-header-notification-text-group .user-header-notification-item {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-weight: 300 !important;
  word-wrap: break-word;
  margin-bottom: 5px;
}

@media (max-width: 1366px) {
  .user-header .user-header-notification-text-group .user-header-notification-item {
    font-size: 12px;
      margin-bottom: 2px;
  }}

  @media (max-width: 768px) {
  .user-header .user-header-notification-text-group .user-header-notification-item {
    max-width: 90%;
    font-size: 12px;
    line-height: 18px;
  }}

.user-header .user-header-notification-item.unread {
  font-weight: 600 !important;
}

body.dark .user-header .user-header-notification-item {
  color: rgba(255, 255, 255, 0.9);
}

body.light .user-header .user-header-notification-item {
  color: rgba(0, 0, 0, 0.9);
}

.user-header .user-header-notification-text-group .user-header-notification-time {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0px;
  text-align: left;
  font-weight: 300 !important;
  font-style: italic;
    position: absolute;
  bottom: 8px;
  right: 8px;
}

body.dark .user-header .user-header-notification-time {
  color: rgba(255, 255, 255, 0.6);
}

body.light .user-header .user-header-notification-time {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .user-header .user-header-notification-text-group .user-header-notification-time {
    font-size: 9px;
  }}

.user-header .user-header-no-notifications-box {
  padding: 10px 10px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500 !important;
}


.user-header .user-header-no-notifications {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-weight: 500 !important;
  word-wrap: break-word;
  display: block;
  position: relative;
  text-align: center;
  padding: 0;
  left: 0;
  text-shadow: none;
  font-style: italic;
  margin-top: 0px;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1366px) {
  .user-header .user-header-no-notifications {
  font-size: 11px;
  }}

.user-header-notification-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  position: absolute;
  top: 6px;
  right: 8px;
}

body.dark .user-header-notification-status {
  color: rgba(255, 255, 255, 0.6);
}

body.light .user-header-notification-status {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .user-header-notification-status {
    font-size: 9px;
    top: 4px;
    right: 6px;
  }}


.user-header .view-all-notifications {
  display: block;
  text-align: center;
  padding: 0px 10px;
  padding-top: 6px;
  margin-top: 5px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: background 0.3s ease;
}

body.dark .user-header .view-all-notifications {
  color: rgba(255, 255, 255, 0.6);
}

body.light .user-header .view-all-notifications {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.user-header .view-all-notifications {
    font-size: 12px;
  }}

@media (max-width: 768px) {
.user-header .view-all-notifications {
    font-size: 13px;
  }}


  .user-header .header-actions {
  position: relative;
  align-items: center;
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

@media (max-width: 1366px) {
  .user-header .header-actions {
      gap: 10px;
  }}


.user-header .user-login-button,
.user-header .user-dashboard-button,
.user-header .get-trusty,
.user-header .show-trusty-balance,
.user-header .submit-agent-button,
.user-header .create-agent-button,
.user-header .user-explore-button,
.user-header .compare-agent-button,
.user-header .insight-button,
.user-header-notification-icon,
.user-header .user-logout-button,
.user-header .treo-mobile {
  font-size: 15px; 
  line-height: 23px;
  font-weight: 300;
  background: transparent;
  border: none; 
  box-shadow: none; 
  cursor: pointer; 
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.light .user-header .user-login-button,
body.light .user-header .user-dashboard-button,
body.light .user-header .get-trusty,
body.light .user-header .show-trusty-balance,
body.light .user-header .submit-agent-button,
body.light .user-header .create-agent-button,
body.light .user-header .user-explore-button,
body.light .user-header .compare-agent-button,
body.light .user-header .insight-button,
body.light .user-header-notification-icon,
body.light .user-header .user-logout-button,
body.light .user-header .treo-mobile {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 300;
}



.user-header .show-trusty-balance {
    font-size: 13px; 
}

@media (max-width: 1366px) {
.user-header .user-login-button,
.user-header .user-dashboard-button,
.user-header .get-trusty,
.user-header .show-trusty-balance,
.user-header .submit-agent-button,
.user-header .create-agent-button,
.user-header .user-explore-button,
.user-header .compare-agent-button,
.user-header .insight-button,
.user-header-notification-icon,
.user-header .user-logout-button,
.user-header .treo-mobile {
  font-size: 15px; 
}}


.shaking-flask {
  display: inline-block;
  animation: shakeFlask 1s infinite ease-in-out;
}

@keyframes shakeFlask {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

.user-header .user-login-button i,
.user-header .user-dashboard-button i,
.user-header .submit-agent-button i,
.user-header .create-agent-button i,
.user-header .user-explore-button i,
.user-header .compare-agent-button i,
.user-header .insight-button i,
.user-header-notification-icon i {
  font-size: 15px;
  line-height: 23px;
  margin-right: 5px;
}

@media (max-width: 768px) {
.user-header .user-login-button i,
.user-header .user-dashboard-button i,
.user-header .submit-agent-button i,
.user-header .create-agent-button i,
.user-header .user-explore-button i,
.user-header .compare-agent-button i,
.user-header .insight-button i,
.user-header-notification-icon i {
  font-size: 15px;
  line-height: 15px;
  margin-right: 0px;
}}

.trusty-style {
  font-family: 'Iceland', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  order: 1;
}

body.light .trusty-style {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

  .user-header .get-trusty-icon {
      width: 36px;
      height: 36px;
       order: 1;
  margin-left: 0px;
  margin-right: 0px;
    }

        @media (max-width: 768px) {
  .user-header .get-trusty-icon {
    order: 1;
      width: 25px;
      height: 25px;
        margin-left: -4px;
  margin-right: 0px;
    }}


    .user-header .trusty-static-icon,
    .user-header .trusty-balance-icon  {
      width: 23px;
      height: 23px;
      margin-right: 5px;
    }

    @media (max-width: 1366px) {
    .user-header .trusty-static-icon,
    .user-header .trusty-balance-icon  {
        width: 18px;
        height: 18px;
      }}
  
    @media (max-width: 768px) {
    .user-header .trusty-static-icon,
    .user-header .trusty-balance-icon  {
        width: 18px;
        height: 18px;
      }}
  

      @media (max-width: 768px) {
        .user-header .ask-treo-icon {
          width: 17px;
          height: 17px;
          margin-left: 0px;
          margin-right: 5px;
          margin-top: 3px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.2); 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        }}


.user-header-notification-badge {
  font-size: 13px;
}

body.light .user-header-notification-badge {
  font-weight: 300;
}

@media (max-width: 768px) {
.user-header-notification-badge {
  margin-left: 3px;
}}

.header-search-container.fade-search-box {
  opacity: 0;
  animation: fadeInSearch 0.2s ease-in-out forwards;
}

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


  .header-search-container.mobile .header-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 6px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
  }

  .header-search-input-container {
    position: static;
    order: initial;
    margin: 0;
  }



@media (max-width: 1366px) {
  
  .user-header .header-actions {
    gap: 6px;
    margin-right: -2px;
  }

  .user-header .user-login-button,
  .user-header .user-dashboard-button,
  .user-header .submit-agent-button,
  .user-header .create-agent-button,
  .user-header .user-explore-button,
  .user-header .compare-agent-button,
  .user-header .insight-button,
  .user-header .user-logout-button,
     .user-header .get-trusty{
    padding: 7px 10px 8px 10px; 
    font-size: 11px;
    font-weight: 300;
  }
  
}


@media (max-width: 768px) {

  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  .user-header {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 56px;
    padding: 0;
    margin: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    box-sizing: border-box;
  }

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px 0px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    box-sizing: border-box;
  }

  .user-header h1 {
    margin: 0;
  }

  .user-header h1 a {
    position: static;
    font-size: 23px;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 1;
    margin-top: -5px;
  }

  .user-header p {
    position: static;
    font-size: 11px;
    font-weight: 500;
    margin: 0;
    margin-top: 3px;
    padding: 0;
    display: block;
    line-height: 1;
  }

  .user-header .header-actions {
    display: none;
    position: fixed;
    top: -10px;
    left: 0;
    right: 12px; 
    width: 26%;
    max-width: 26%;
    height: auto;
    padding: 10px;
    margin: 0;
    margin-top: 55px;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
    z-index: 1001;
    box-sizing: border-box;
    overflow-y: auto;
    background:  #866dfe;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    border-radius: 6px;
    transition: all 0.3s ease;
  }

body.dark .user-header .header-actions {
background: rgba(0, 0, 0, 0.9);
}

body.light .user-header .header-actions {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.2); 
}

  .user-header .header-actions.show {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;  
    flex-wrap: wrap;       
    align-items: flex-start;  
    justify-content: flex-start; 
    gap: 10px;     
    padding: 6px 12px 12px 10px;
    width: 100%;
    height: auto;         
  }

  .user-header .header-actions.show .user-login-button,
    .user-header .header-actions.show .user-dashboard-button,
    .user-header .header-actions.show .submit-agent-button,
    .user-header .header-actions.show .create-agent-button,
    .user-header .header-actions.show .user-explore-button,
    .user-header .header-actions.show .compare-agent-button,
    .user-header .header-actions.show .insight-button,
    .user-header .header-actions.show .get-trusty,
    .user-header .header-actions.show .show-trusty-balance,
    .user-header .header-actions.show .treo-mobile,
    .user-header .header-actions.show .user-logout-button {  
      padding: 0px;   
      margin: 0;   
      display: flex;
      align-items: center;
      vertical-align: middle;
      justify-content: flex-start;
      font-size: 13px;
      text-align: left;
    }

        .user-header .header-actions.show .show-trusty-balance span{
          font-size: 12px;
          margin-top: 0px;
        }

        .user-header .header-actions.show .treo-mobile,
        .user-header .header-actions.show .user-logout-button {
          margin-right: 0px;
        }

    .user-header .header-actions.show .user-login-button i,
    .user-header .header-actions.show .user-dashboard-button i,
    .user-header .header-actions.show .submit-agent-button i,
    .user-header .header-actions.show .create-agent-button i,
    .user-header .header-actions.show .user-explore-button i,
    .user-header .header-actions.show .compare-agent-button i,
    .user-header .header-actions.show .insight-button i,
    .user-header .header-actions.show .get-trusty i,
    .user-header .header-actions.show .trusty-balance-icon,
    .user-header .header-actions.show .treo-mobile i,
    .user-header .header-actions.show .user-logout-button i {  
      margin-top: 2px;
      margin-right: 3px;
    }

        .user-header .header-actions.show .user-logout-button::after {
          content: "Logout";
          margin-left: 0px;
        }

  .user-header .user-dashboard-button,
  .user-header .compare-agent-button,
  .user-header .insight-button,
  .user-header .user-logout-button {
    flex: 0 1 auto;
    min-width: auto;
    height: 30px;
    padding: 0 15px;
    font-size: 13px;
    justify-content: center;
    white-space: nowrap;
        text-align: left;
  }

  .user-header .user-dashboard-button,
  .user-header .user-login-button,
  .user-header .user-logout-button,
  .user-header .submit-agent-button,
  .user-header .create-agent-button,
  .user-header .user-explore-button,
  .user-header .compare-agent-button,
  .user-header .insight-button {
    flex: 0 1 auto;
    min-width: auto;
    padding: 0 15px;
    font-size: 13px;
    justify-content: center;
    white-space: nowrap;
    margin-top: 0px;
    text-align: left;
  }


    .user-header .user-logout-button {  
           text-align: center;
        }

  .mobile-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .mobile-buttons button,
  .mobile-buttons .mobile-search-button,
  .mobile-buttons .mobile-menu-button {
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    background: transparent;
    border: none;
    position: relative;
  }

  .mobile-buttons button i,
  .mobile-buttons .mobile-search-button i,
  .mobile-buttons .mobile-menu-button i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
  }

  body.light .mobile-buttons button i,
  body.light .mobile-buttons .mobile-search-button i,
  body.light .mobile-buttons .mobile-menu-button i {
    color: rgba(0, 0, 0, 0.9);
  }

  .mobile-search-button .fas.fa-search {
    color: rgba(255, 255, 255, 0.9);
    top: 47%;
    font-size: 14px;
  }

  body.dark .mobile-search-button .fas.fa-search {
    color: rgba(255, 255, 255, 0.9) !important; 
  }

  .header-search-container.mobile {
    position: fixed;
    top: 55px; 
    left: 0;
    width: 100%;
    padding: 8px 8px 8px 8px;
    background: rgba(145, 75, 255,0.3);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    -webkit-backdrop-filter: blur(10px); 
            backdrop-filter: blur(10px);
    z-index: 999;
  }

  body.dark .header-search-container.mobile {
    background: rgba(0, 0, 0, 0.6);
        border: 0px solid rgba(255, 255, 255, 0.2); 
  }

    body.light .header-search-container.mobile {
    background: rgba(255,255,255, 1);
        border: 0px solid rgba(0, 0, 0, 0.2); 
  }

  .header-search-container.mobile .header-search-input-container {
    width: 100% !important;
    margin: 0 !important;
  }
}

 .header-search-input-container {
        position: relative;
        margin-top: 1px;
        min-width: 275px;
        width: 275px;
        height: 33px;
        z-index: 999;
  }


        @media (max-width: 1366px) {
       .header-search-input-container {
        margin-top: 10px;
        min-width: 175px;
        width: 175px;
       }}

      @media (max-width: 768px) {
       .header-search-input-container {
           width: 100%;
          margin-top: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
       }}



.header-search-input-container input[type="text"] {
  width: 100%;
  height: 33px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  padding: 0px 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
  }

  body.dark .header-search-input-container input[type="text"] {
  background: rgba(0,0,0,1);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }

    body.light .header-search-input-container input[type="text"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .header-search-input-container input[type="text"] {
      width: 100%;
      height: 29px; 
        font-size: 12px;
    }
  }

  @media (max-width: 768px) {
    .header-search-input-container input[type="text"] {
      width: 100%;
      height: 33px !important;
      padding: 10px;
        }
  }

    .header-search-input-container input[type="text"]:hover {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

    .header-search-input-container input[type="text"]:focus {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 300;
  padding: 0px 6px;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: none;
  }

body.dark .header-search-input-container input[type="text"]:focus {
  background: rgba(0,0,0,1);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }

  @media (max-width: 1366px) {
      .header-search-input-container input[type="text"]:focus {
    font-size: 12px;
  }}

   .header-search-input-container input[type="text"]::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  }

  body.dark .header-search-input-container input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1366px) {
      .header-search-input-container input[type="text"]::placeholder {
    font-size: 12px;
  }}

  .header-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 529px;
  margin-top: 7px;
  margin-left: 0px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  z-index: 1003;
  max-height: 728px;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: dropdownFade 0.2s ease;
  }

  body.dark .header-search-dropdown {
  background: rgba(0,0,0,1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }


  @media (max-width: 1366px) {
    .header-search-dropdown {
      width: 363px;
      max-height: 415px;
      margin-top: 5px;
  }}


  @media (max-width: 768px) {
    .header-search-dropdown {
      width: 95%;
      margin: 0px;
      top: 33px !important;
      height: auto;
      max-height: 580px;
      box-sizing: border-box;
      margin: 0 auto;
      margin: 0px;
  }}

  .header-search-result-message {
    position: absolute;
    top: 7px;
    right: 0;
    text-align: right;
    width: auto;
    margin-top: 0px;
    padding-right: 20px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: none;
    z-index: 1000;
    height: 30px;
    overflow-y: auto;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    animation: none;
    font-size: 11px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
    padding: none;
    font-style: italic;
}

  body.dark  .header-search-result-message {
  color: rgba(255, 255, 255, 0.6)
  }

@media (max-width: 1366px) {
  .header-search-result-message {
        top: 10px;
    margin-top: 0px;
    font-size: 9px;
    padding: 0px 16 0px 0px;
}}

@media (max-width: 768px) {
 .header-search-result-message {
    top: 10px;
    font-size: 10px;
    font-weight: 300;
        padding: 0px 10 0px 0px;
}}


.header-search-result-message .search-loading {
      animation: floatUpDown 1.5s ease-in-out infinite;
    }

   @keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

  .header-search-dropdown:empty {
  display: none;
  }
  @keyframes dropdownFade {
  from {
  opacity: 0;
  transform: translateY(-10px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }

 .header-search-result-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
    padding: 10px !important;
  }

  body.dark  .header-search-result-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
  }

  .header-search-result-item:last-child {
  border-bottom: none;
  }

  .header-search-result-item a {
    padding: 0px;
    text-decoration: none;
    color: rgb(0, 0, 0, 0.6);
    width: 100%;
    display: block;
    transition: background-color 0.2s;
    font-size: 13px;
  }
  
  .header-search-result-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  }

  .header-search-result-content img {
    border-radius: 50%;
    margin-right: 0px;
    object-fit: cover;
    flex-shrink: 0;
    float: left;
    width: 66px;
    height: 66px;
    margin-right: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  }

    body.dark .header-search-result-content img {
  background-color: rgba(255,255,255, 1);
}


  @media (max-width: 1366px) {
    .header-search-result-content img {
      width: 60px;
      height: 60px;
      margin-right: 24px;
  }}

  @media (max-width: 768px) {
    .header-search-result-content img {
      margin-right: 6px;
          width: 60px;
    height: 60px;
        margin-right: 22px;
  }}

  .header-search-result-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  padding-right: 15px;
  }

  @media (max-width: 1366px) {
    .header-search-result-text {
      min-height: 50px !important;
      padding-right: 15px;
  }}

    @media (max-width: 768px) {
    .header-search-result-text {
      min-height: 50px !important;
      padding-right: 20px;
  }}

  .header-search-result-item .agentsearchname {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    margin-top: 0px;
    margin-left: -23px;
  }

  body.dark .header-search-result-item .agentsearchname {
    color: rgba(255, 255, 255, 0.6)
  }

  @media (max-width: 1366px) {
    .header-search-result-item .agentsearchname {
      font-size: 11.5px;
          margin-bottom: 2px;
  }}

    @media (max-width: 768px) {
    .header-search-result-item .agentsearchname {
          margin-bottom: 3px;
  }}


  .header-search-result-item .agentsearchspecialization {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    margin-top: 0px;
    margin-left: -23px;
    margin-bottom: 4px;
  }

    body.dark .header-search-result-item .agentsearchspecialization {
    color: rgba(255, 255, 255, 0.6)
  }

  @media (max-width: 1366px) {
    .header-search-result-item .agentsearchspecialization {
      font-size: 11px;
          margin-bottom: 2px;

  }}

    @media (max-width: 768px) {
    .header-search-result-item .agentsearchspecialization {
          margin-bottom: 3px;
          line-height: 12px;

  }}

  .header-search-result-item .agentsearchpricing {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    margin-top: 0px;
    margin-left: -23px;
    }

  body.dark .header-search-result-item .agentsearchpricing {
    color: rgba(255, 255, 255, 0.6)
  }
  
    @media (max-width: 1366px) {
      .header-search-result-item .agentsearchpricing {
        font-size: 10px;
  
    }}


  .header-search-result-item:hover {
  background-color: rgba(145, 75, 255, 0.1);
  }

  body.dark .header-search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    }
 
      body.light .header-search-result-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }

    body.dark .header-search-dropdown {
  background: rgba(0,0,0,1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }

.theme-button {
  background: linear-gradient(100deg, rgba(153, 69, 255, 0.6), rgba(20, 241, 149, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.theme-button:active {transform: translateY(0);}
.theme-button i { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.theme-button:active i {transform: rotate(25deg) scale(0.9);}

body.dark .theme-button {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
}

body.light .theme-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.9);
}



.theme-button-mobile {
  background: transparent;
  border: none;
  box-shadow: none; 
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  margin-top: 2px;
}

.theme-button-mobile:active {transform: translateY(0);}
.theme-button-mobile i { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.theme-button-mobile:active i {transform: rotate(25deg) scale(0.9);}

body.dark .theme-button-mobile {
  background: transparent;
  border: none;
  box-shadow: none; 
  color: rgba(255, 255, 255, 0.8);
}

body.light .theme-button-mobile {
  background: transparent;
  border: none;
  box-shadow: none; 
  color: rgba(0, 0, 0, 0.9);
}

.notifications-section {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 15px 15px;
  margin-top: 10px;
    height: auto;
min-height: 86.5vh;
}

@media (max-width: 768px) {
  .notifications-section {
    height: auto;
    min-height: auto;
  }}

body.dark .notifications-section {
  background: rgba(0, 0, 0, 1);
}

body.light .notifications-section {
    background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
.notifications-section {
   padding: 10px;
  }}

.notifications-header {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  margin-bottom: 6px;
  gap: 10px;
}

@media (max-width: 1366px) {
  .notifications-header {
    gap: 6px !important;
  }}

.notifications-section-title {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  flex-grow: 1;
  margin-right: 10px;
  height: 40px;
  display: none;
}

body.dark .notifications-section-title {
  background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .notifications-section-title {
      font-size: 13px;
      padding: 6px 10px;
      height: 30px;
  }}

  @media (max-width: 768px) {
    .notifications-section-title {
        font-size: 15px;
        padding: 8px 10px;
        height: 35px;
    }}


    .notification-main-button {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-bottom: 0px;
      margin-top: 0px;
      gap: 10px;
    }

    @media (max-width:1366px) {
      .notification-main-button {
        gap: 8px;
      }}

          @media (max-width:768px) {
      .notification-main-button {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
              gap: 8px;
      }}
    
    .notification-main-button button {
      background: rgb(145, 75, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    @media (max-width: 1366px) {
      .notification-main-button button {
        width: 30px !important;
        height: 30px !important;
      }}


  .notification-main-button .notifications-refresh,
  .notification-main-button .notifications-select {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 11px;
}

body.dark .notification-main-button .notifications-select,
body.dark .notification-main-button .notifications-refresh {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

body.light .notification-main-button .notifications-select,
body.light .notification-main-button .notifications-refresh {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .notification-main-button .notifications-refresh,
  .notification-main-button .notifications-select {
    width: 26px;
    height: 26px;
    font-size: 10px !important;
    border-radius: 6px;
  }}

  @media (max-width: 768px) {
  .notification-main-button .notifications-refresh,
  .notification-main-button .notifications-select {
      width: 30px;
      height: 30px;
      font-size: 12px !important;
    }}

    .notification-main-button .notifications-refresh i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

body.light .notification-main-button .notifications-refresh i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .notification-main-button .notifications-refresh i {
    font-size: 11px;
  }}

  @media (max-width: 768px) {
    .notification-main-button .notifications-select i,
    .notification-main-button .notifications-refresh i {
      font-size: 10px;
    }}


.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.notifications-select.notifications-select-active {
  background: rgba(220, 50, 70, 0.8);
}

body.dark .notifications-select.notifications-select-active {
  background: rgba(220, 50, 70, 0.6);
}

body.light .notifications-select.notifications-select-active {
  background: rgba(220, 50, 70, 0.9);
  color: rgba(255,255,255,0.9);
}



@media (max-width:1366px) {
.notifications-filter-box,
.notifications-action-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
}}


.notifications-filter-box,
.notifications-action-box {
  display: flex;
  flex-direction: row;
  gap: 10px;
}


.notification-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  align-items:start;
  margin-top: 0px;
  margin-bottom: 0px;
  flex-wrap: wrap;
  vertical-align: middle;
}


@media (max-width:1366px) {
  .notification-actions {
    gap: 6px;
}}

@media (max-width:768px) {
  .notification-actions {
    gap: 6px;
}}


.notification-actions button {
background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    width: auto !important;
  min-width: 33px !important;
  max-width: 150px !important;
  height: 33px !important;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 300;
    vertical-align: middle;
}

body.dark .notification-actions button {
  background: rgba(0, 0, 0, 1);
}

body.light .notification-actions button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .notification-actions button {
      padding: 3px 10px;
      font-size: 11px;
    width: auto !important;
  min-width: 26px !important;
  max-width: 150px !important;
  height: 26px !important;
      padding: 6px 10px;
}}

@media (max-width:768px) {
  .notification-actions button {
    width: auto !important;
  min-width: 30px !important;
  max-width: 150px !important;
  height: 30px !important;
      padding: 5px 7px;
      font-size: 12px;
}}

.notification-checkbox {
  -webkit-appearance: none;
          appearance: none;
    width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  box-shadow: none; 
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

body.dark .notification-checkbox {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .notification-checkbox {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

@media (max-width: 1366px) {
  .notification-checkbox {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  }}

  @media (max-width: 768px) {
  .notification-checkbox {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  }}

  .notification-checkbox:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
  body.dark .notification-checkbox:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

    body.light .notification-checkbox:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

.notification-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
  flex: 1 1;
}

@media (max-width: 768px) {
  .notification-container {
    flex-direction: column;
    align-items: flex-start;
  }}

  .notification-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0px 0;
}

.notification-item {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  box-shadow: none;
  border-radius: 8px;
  padding: 10px;
  transition: transform 0.3s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  font-weight: 300;
  position: relative;
}

body.dark .notification-item {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .notification-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.notification-item.unread {
  background: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}

body.dark .notification-item.unread {
  background: rgba(255, 255, 255, 0.1);
}

body.light .notification-item.unread {
  background: rgba(0, 0, 0, 0.1);
}

.notification-item:hover {
  transform: translateX(1px);
}

.notification-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  vertical-align: middle;
      border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); 
}

@media (max-width: 1366px) {
  .notification-avatar {
    width: 26px;
    height: 26px;
  }}

@media (max-width: 768px) {
  .notification-avatar {
    width: 46px;
    height: 46px;
    margin-right: 8px;
  }}

.notification-message {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  flex-grow: 1;
  vertical-align: middle;
  margin-top: -5px
}

body.light .notification-message {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .notification-message {
    font-size: 12px;
    line-height: 16px;
  }}

@media (max-width: 768px) {
  .notification-message {
    font-size: 13px;
    line-height: 17px;
    width: 75%;
  }}

.notification-message.unread {
  font-weight: 600 !important;
}

.no-notifications {
  font-size: 14px;
  line-height: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  text-align: center;
}

body.light .no-notifications {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .no-notifications {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .no-notifications {
  font-size: 13px;
  }}

.notification-time {
  font-size: 11.5px;
  line-height: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  white-space: nowrap;
  margin-left: 0px;
  margin-right: 15px;
  vertical-align: middle;
  font-style: italic;
  position: absolute;
  bottom: 8px;
  right: 0px;
}

body.light .notification-time {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .notification-time {
    font-size: 10px;
    line-height: 10px;
    margin-top: 0px;
  }}

@media (max-width: 768px) {
  .notification-time {
    font-size: 10px;
    line-height: 10px;
    margin-top: 0px;
  }}

.notification-status {
  font-size: 12px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  position: absolute;
  top: 8px;
  right: 12px;
}

body.light .notification-status {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .notification-status {
    font-size: 11px;
    line-height: 10px;
  }}

@media (max-width: 768px) {
  .notification-status {
    font-size: 12px;
    line-height: 12px;
  }}

.notifications-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 0;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-right: 0px;
  padding: 0px 0px;
}

.notifications-pagination button {
  font-size: 13px;
  padding: 5px 20px;
  border: none;
  border-radius: 4px;
  background: rgb(145, 75, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}



@media (max-width: 1366px) {
  .notifications-pagination button {
  font-size: 12px;
}}

@media (max-width: 768px) {
  .notifications-pagination button {
  font-size: 12px;
}}

body.dark .notifications-pagination button {
  background: rgba(0,0,0,0.1);
}

body.light .notifications-pagination button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.notifications-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notifications-pagination button:hover:not(:disabled) {
  background: rgba(145, 75, 255, 0.7);
}

body.dark .notifications-pagination button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 1);
}

.notifications-pagination span {
font-size: 13px;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}

body.light .notifications-pagination span {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .notifications-pagination span {
  font-size: 12px;
}}

@media (max-width: 768px) {
  .notifications-pagination span {
  font-size: 12px;
}}



.notif-icon {
  min-width: 26px;
  text-align: center;
  display: none;
}



.notif-filter-status__control,
.notif-filter-category__control,
.notif-filter-perpage__control {
  font-size: 13px !important;
  height: 33px !important;
  min-height: 33px !important;
  padding: 0px 3px !important;
  border-radius: 6px !important;
  background: rgb(145, 75, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

body.dark .notif-filter-status__control,
body.dark .notif-filter-category__control,
body.dark .notif-filter-perpage__control {
  background: rgba(0,0,0,0.1) !important;
}

body.light .notif-filter-status__control,
body.light .notif-filter-category__control,
body.light .notif-filter-perpage__control {
  background: rgba(255,255,255,1) !important;
}

@media (max-width: 1366px) {
  .notif-filter-status__control,
  .notif-filter-category__control,
  .notif-filter-perpage__control {
    font-size: 11px !important;
    height: 26px !important;
    min-height: 26px !important;
  }}

@media (max-width: 768px) {
  .notif-filter-status__control,
  .notif-filter-category__control,
  .notif-filter-perpage__control {
    font-size: 12px !important;
    height: 30px !important;
    min-height: 30px !important;
  }}

.notif-filter-status__control {
min-width: 180px!important;
min-width: 180px!important;
}

@media (max-width: 1366px) {
  .notif-filter-status__control {
    min-width: 140px!important;
    min-width: 140px!important;
    }}

@media (max-width: 768px) {
  .notif-filter-status__control {
    min-width: 150px!important;
    min-width: 150px!important;
    }}

.notif-filter-category__control {
  min-width: 195px!important;
  min-width: 195px!important;
  }


    @media (max-width: 1366px) {
    .notif-filter-category__control {
      min-width: 160px!important;
      min-width: 160px!important;
      }}


  @media (max-width: 768px) {
    .notif-filter-category__control {
      min-width: 150px!important;
      min-width: 150px!important;
      }}

  .notif-filter-perpage__control {
    min-width: 75px!important;
    max-width: 75px!important;
    }

.notif-filter-status__single-value,
.notif-filter-category__single-value,
.notif-filter-perpage__single-value,
.notif-filter-status__input,
.notif-filter-category__input,
.notif-filter-perpage__input,
.notif-filter-status__placeholder,
.notif-filter-category__placeholder,
.notif-filter-perpage__placeholder {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 300;
  font-size: 13px;
  margin-top: -2px;
}

  @media (max-width: 768px) {
    .notif-filter-status__single-value,
.notif-filter-category__single-value,
.notif-filter-perpage__single-value,
.notif-filter-status__input,
.notif-filter-category__input,
.notif-filter-perpage__input,
.notif-filter-status__placeholder,
.notif-filter-category__placeholder,
.notif-filter-perpage__placeholder {
  font-size: 12px;
}}

body.light .notif-filter-status__single-value,
body.light .notif-filter-category__single-value,
body.light .notif-filter-perpage__single-value,
body.light .notif-filter-status__input,
body.light .notif-filter-category__input,
body.light .notif-filter-perpage__input,
body.light .notif-filter-status__placeholder,
body.light .notif-filter-category__placeholder,
body.light .notif-filter-perpage__placeholder {
  color: rgba(0, 0, 0, 0.9) !important;
}

.notif-filter-status__indicator,
.notif-filter-category__indicator,
.notif-filter-perpage__indicator {
color: rgba(255, 255, 255, 0.9) !important;
padding-left: 5px !important;
margin-top: -3px !important;
}

body.light .notif-filter-status__indicator,
body.light .notif-filter-category__indicator,
body.light .notif-filter-perpage__indicator {
color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .notif-filter-status__indicator,
  .notif-filter-category__indicator,
  .notif-filter-perpage__indicator{
  margin-top: -5px !important;
}}

@media (max-width: 768px) {
  .notif-filter-status__indicator,
  .notif-filter-category__indicator,
  .notif-filter-perpage__indicator{
      margin-top: -3px !important;
    padding-left: 2px !important;
}}

.notif-filter-status__dropdown-indicator,
.notif-filter-category__dropdown-indicator,
.notif-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-left: 5px !important;
}

@media (max-width: 1366px) {
.notif-filter-status__dropdown-indicator,
.notif-filter-category__dropdown-indicator,
.notif-filter-perpage__dropdown-indicator {
  margin-top: -5px !important;
}}

@media (max-width: 768px) {
  .notif-filter-status__dropdown-indicator,
  .notif-filter-category__dropdown-indicator,
  .notif-filter-perpage__dropdown-indicator {
      margin-top: -3px !important;
    padding-right: 2px !important;
  }}

@media (max-width: 1366px) {
  .notif-filter-status__indicator-separator,
.notif-filter-category__indicator-separator,
.notif-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 16px !important;
}}

@media (max-width: 768px) {
  .notif-filter-status__indicator-separator,
.notif-filter-category__indicator-separator,
.notif-filter-perpage__indicator-separator {
  margin-top: 6px !important;
  height: 16px !important;
}}


.notif-filter-status__value-container,
.notif-filter-category__value-container,
.notif-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
}

@media (max-width: 1366px) {
  .notif-filter-status__value-container,
.notif-filter-category__value-container,
.notif-filter-perpage__value-container {
  margin-top: -6px !important;
}}

.notif-filter-status__menu,
.notif-filter-category__menu,
.notif-filter-perpage__menu {
  background: #7d65ed !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 100;
  cursor: pointer !important;
}

body.dark .notif-filter-status__menu,
body.dark .notif-filter-category__menu,
body.dark .notif-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .notif-filter-status__menu,
body.light .notif-filter-category__menu,
body.light .notif-filter-perpage__menu {
  background: rgba(255,255,255,1)!important;
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .notif-filter-status__menu,
  .notif-filter-category__menu,
  .notif-filter-perpage__menu {
    margin-top: 5px !important;
  }}

.notif-filter-status__option,
.notif-filter-category__option,
.notif-filter-perpage__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #7d65ed !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.dark .notif-filter-status__option,
body.dark .notif-filter-category__option,
body.dark .notif-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .notif-filter-status__option,
body.light .notif-filter-category__option,
body.light .notif-filter-perpage__option {
  background: rgba(255,255,255,1)!important;
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
  .notif-filter-status__option,
  .notif-filter-category__option,
  .notif-filter-perpage__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

  @media (max-width: 768px) {
  .notif-filter-status__option,
  .notif-filter-category__option,
  .notif-filter-perpage__option {
    font-size: 12px !important;
    padding: 4px 10px 4px 10px!important;
  }}

.notif-filter-status__option:last-child,
.notif-filter-category__option:last-child,
.notif-filter-perpage__option:last-child {
  padding-bottom: 6px !important;
}

@media (max-width: 1366px) {
  .notif-filter-status__option:last-child,
  .notif-filter-category__option:last-child,
  .notif-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

  @media (max-width: 768px) {
  .notif-filter-status__option:last-child,
  .notif-filter-category__option:last-child,
  .notif-filter-perpage__option:last-child {
    padding-bottom: 6px !important;
  }}






.user-notification-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-filter-and-button-wrapper {
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  padding: 0px 0px 0px 0px;
  margin: 0px 0 0px 0;
  border-radius: 8px;
}

body.dark .notif-filter-and-button-wrapper  {
  background: rgba(0, 0, 0, 1);
}


      body:has(.user-notification-message-overlay) .user-header,
body:has(.user-notification-message-overlay) .admin-header,
body:has(.user-notification-message-overlay) .main-footer,
body:has(.user-notification-message-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.user-notification-message-overlay) .global-footer,
body:has(.user-notification-message-overlay) .ask-treo,
body:has(.user-notification-message-overlay) .agent-interaction-dock-button,
body:has(.user-notification-message-overlay) .float-chat-button {
  display: none;
}



.user-notification-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-notification-message-content {
background: rgba(145, 75, 255,0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  max-width: 40%;
  white-space: pre-line !important;
}

body.dark .user-notification-message-content {
background: #555;
}

@media (max-width: 768px) {
  .user-notification-message-content {
      max-width: 95%;
        padding: 20px;
  }}


  .user-notification-message-content h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.user-notification-message-content h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.user-notification-message-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}

.user-notification-message-content p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.user-notification-message-content p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.user-notification-message-content p {
  font-size: 14px;
  margin-bottom: 6px;
  }}

.user-notification-message-button {
  margin-top: 15px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

body.dark .user-notification-message-button {
background: #444;
}

@media (max-width: 1366px) {
.user-notification-message-button {
  font-size: 13px;
    padding:6px 20px;
  }}

@media (max-width: 768px) {
.user-notification-message-button {
  font-size: 12px;
  }}
.logout-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    z-index: 9999999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-confirm-modal {
    background: linear-gradient(100deg, #9945FF, #14F195);
    padding: 25px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    margin: 20px;
}

.logout-confirm-modal h2 {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 15px;
}

.logout-confirm-modal p {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(225, 225, 225, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 16px;
}

.logout-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.logout-confirm-buttons button {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.logout-confirm-buttons .confirm-button {
    background: #FF4444;
    color: white;
}

.logout-confirm-buttons .confirm-button:hover:not(:disabled) {
    background: #ff2020;
}

.logout-confirm-buttons button:not(.confirm-button):hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}

.logout-confirm-buttons button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.admin-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 75px;
  background: transparent;
  border-bottom: 1px solid rgba(225,225,255, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color 0.3s;
  width: 100%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.admin-header .admin-header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-right: 20px;
}

.admin-logout-button {
  font-size: 17px; 
  font-weight: 500;
  padding: 10px 20px; 
  background: rgba(145, 75, 255,0.3);
  border: 1px solid rgba(255, 255, 255, 0.8); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 5px; 
  cursor: pointer; 
  transition: all 0.3s ease;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-header .theme-toggle {
  position: relative;
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.admin-header .theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-header .theme-toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(145, 75, 255,0.3);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.admin-header .theme-toggle-label:before {
  position: absolute;
  content: "";
  height: 38px;
  width: 25px;
  left: 22px;
  bottom: -1px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  transition: .4s;
}

.admin-header .theme-toggle-input:checked + .theme-toggle-label {
  background-color: rgba(145, 75, 255,0.3);
}

.admin-header .theme-toggle-input:checked + .theme-toggle-label:before {
  transform: translateX(-23px);
}

.admin-header .theme-toggle-label:after {
  content: '☀️';
  position: absolute;
  left: 25px;
  top: 7px;
  font-size: 15px;
  opacity: 1;
  transition: .4s;
}

.theme-toggle-input:checked + .theme-toggle-label:after {
  content: '🌙';
  left: 1px;
}

body.explore .global-footer {
  width: 57%;
  margin-left: 30%;
}

  @media (max-width: 768px) {
body.explore .global-footer {
  width: 95%;
  margin-left: 0%;
}}

.global-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px 15px 0px !important;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  width: 75%;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 9;
  flex-shrink: 0;
  }

  body.dark .global-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  @media (max-width: 1366px) {
    .global-footer {
  width: 75%;
  margin: 0 auto;
  margin-top: 15px;
    }}

    @media (max-width: 768px) {
      .global-footer{
          padding: 20px 0px 65px 0px !important;
        display: flex;
        flex-direction: column;
        gap: 15px; 
        width: 95%;
      }}


.global-footer .global-footer-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (max-width: 768px) {
.global-footer .global-footer-info {
       display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
      }}

.global-footer .global-footer-version,
.global-footer .global-footer-copyright {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: rgba(40, 50, 100, 1);
      font-size: 13px;
      font-weight: 500;
      vertical-align: middle;
    }
  
    body.dark .global-footer .global-footer-version,
    body.dark .global-footer .global-footer-copyright {
      color: rgba(255, 255, 255, 0.8);
      text-shadow: none;
    }

    @media (max-width: 1366px) {
      .global-footer .global-footer-version,
      .global-footer .global-footer-copyright {
        font-size: 12px;
      }}

    @media (max-width: 768px) {
      .global-footer .global-footer-version,
      .global-footer .global-footer-copyright {
        font-size: 13px;
      }}


      .global-footer .global-footer-version i,
      .global-footer .global-footer-copyright i {
      font-size: 11px;
          }

     @media (max-width:1366px) {
      .global-footer .global-footer-version i,
      .global-footer .global-footer-copyright i {
      font-size: 9px;
      }}

      @media (max-width: 768px) {
      .global-footer .global-footer-version i,
      .global-footer .global-footer-copyright i {
      font-size: 10px;
      }}

      .global-footer .global-footer-version {
        margin-left: 3px;
      }

.global-footer a {
  color: rgba(40, 50, 100, 1);
  font-weight: 500;
  text-decoration: none;
}

body.dark .global-footer a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  text-decoration: none;
}

body.light .global-footer a {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 300;
  text-decoration: none;
}

  .global-footer-links-box {
    display: flex;
    flex-direction: row;
    gap: 30px;
  }

  @media (max-width: 768px) {
  .global-footer-links-box {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
  }}

.global-footer-links {
  display: grid;
  grid-template-columns: repeat(1, auto);
  grid-row-gap: 3px;
  row-gap: 3px;
  font-size: 13.5px;
  font-weight: 500;
    transform: scaleY(0.95);
}

@media (max-width:1366px) {
  .global-footer-links {
  row-gap: 0px;
  font-size: 12px;
}}

@media (max-width:768px) {
  .global-footer-links {
  font-size: 13px;
  text-align: center;
    row-gap: 6px;
}}

.trusty-on-footer {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 17px;
    font-weight: 600;
}
.defaultpage:has(.admin-login-container) html,
.defaultpage:has(.admin-login-container) body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
}

.defaultpage:has(.admin-login-container) .sidebar,
body:has(.admin-login-container) header,
body:has(.admin-login-container) .header-actions input[type="text"],
body:has(.admin-login-container) .header-actions .fas.fa-search,
body:has(.admin-login-container) .submit-agent-button,
body:has(.admin-login-container) .user-dashboard-button,
body:has(.admin-login-container) .get-trusty,
body:has(.admin-login-container) .footer,
.admin-login-box button {
    display: none;
}

.defaultpage:has(.admin-login-container),
.defaultpage:has(.admin-login-container) html, 
.defaultpage:has(.admin-login-container) body, 
.defaultpage:has(.admin-login-container) #root,
.defaultpage:has(.admin-login-container) .defaultpage,
.defaultpage:has(.admin-login-container) .main-content,
.admin-login-container {
    background-color: black;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.defaultpage:has(.admin-login-container) .main-content {
    margin-left: 0;
    margin-top: 0;
}

.admin-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes web3backAppear {
  from {
    transform: translateX(0) scale(1.1);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

.web3back-container {
  position: fixed;
  inset: 0;
  z-index: 1; 
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-position: var(--treo-bg-pos, center center);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  will-change: transform;
  transform: translateX(-100%);
  animation: web3backAppear 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: saturate(1.02) contrast(1.05);
  min-height: 100vh;
  min-width: 100vw;
}

  @media (max-width: 768px) {
  .web3back-container {
    display: none !important;
  }}


.web3back-container-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
}

.web3back-item-wrapper {
  position: absolute;
  z-index: 2;
  will-change: transform;
  animation: orbitRotate var(--orbit-duration) linear infinite;
  animation-direction: var(--orbit-direction);
}

.web3back-content-holder {
  transform: translateX(var(--orbit-radius)) translate(-50%, -50%);
  animation: counterRotate var(--orbit-duration) linear infinite;
  animation-direction: var(--orbit-direction);
  will-change: transform;
}

@keyframes orbitRotate {
  from {
    transform: rotate(var(--start-angle));
  }
  to {
    transform: rotate(calc(var(--start-angle) + 360deg));
  }
}

@keyframes counterRotate {
  from {
    transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(calc(var(--start-angle) * -1));
  }
  to {
    transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(calc((var(--start-angle) + 360deg) * -1));
  }
}

.floating-item.image {
  height: 30px;
  width: auto;
  opacity: 0.9;
}


.floating-item.icon {
  font-size: 30px;
  text-align: center;
  margin: 0 auto;
  background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9));
  display: inline-block;
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.dark .floating-item.icon {
  background: rgba(255, 255, 255, 0.9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.light .floating-item.icon {
  background: rgba(0, 0, 0, 0.9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}



.defaultpage:has(.admin-dashboard) .sidebar,
.defaultpage:has(.admin-dashboard) .float-chat-button {
  display: none !important;
}

.defaultpage:has(.admin-dashboard) {
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
}

.logout-admin {
  background: rgba(0, 0, 0, 0.4);
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9); 
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.8); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  cursor: pointer;
  padding: 11px 15px; 
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.admin-dashboard {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.admin-dashboard main {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  position: relative;
  padding-bottom: 0px;
  margin: 0 auto !important;
}

stats-container {
  display: flex;
  gap: 20px;
  margin-bottom: 0px;
  padding: 0px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.5);
  padding: 0px;
  border-radius: 8px;
  flex: 1 1;
  text-align: center;
}

.stat-box h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin: 10px 0 0 0;
}

.tabs-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.tab-button {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.tab-button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.tab-button.active {
  background: rgba(0, 0, 0, 0.6);
}

.stats-section {
  padding: 20px;
  margin-bottom: 20px;
}

.stats-overview {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 8px;
  flex: 1 1;
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-box:hover {
  transform: scale(1.01);
}

.stats-chart {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.chart-container {
  height: 300px;
  width: 100%;
  position: relative;
}

.stat-box h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin: 10px 0 0 0;
}

.admin-dashboard .table-container {
  width: 98%;
  overflow-x: auto; 
  overflow-y: auto; 
  margin: 0 auto;
  max-height: calc(100vh - 200px); 
  position: relative;
}

.admin-dashboard .table-container a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.table-container::-webkit-scrollbar {
  width: 17px; 
}

.table-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5); 
}

.table-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
}

.admin-dashboard table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1200px;
}

.admin-dashboard table th:first-child,
.admin-dashboard table td:first-child {
  position: -webkit-sticky;
  position: sticky; 
  left: 0; 
  z-index: 4; 
  background-color: rgba(0, 0, 0, 1); 
  width: 66px; 
  min-width: 66px; 
  text-align: center;
}


.admin-dashboard table th:nth-child(2),
.admin-dashboard table td:nth-child(2) {
  position: -webkit-sticky;
  position: sticky; 
  left: 66px; 
  z-index: 4; 
  background-color: rgba(0, 0, 0, 1); 
  width: 66px; 
  min-width: 66px; 
  text-align: center;
}

.admin-dashboard table th:nth-child(3), 
.admin-dashboard table td:nth-child(3) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(4), 
.admin-dashboard table td:nth-child(4) {
  width: 100px;
  min-width: 100px;
}

.admin-dashboard table th:nth-child(5), 
.admin-dashboard table td:nth-child(5) {
  width: 66px;
  min-width: 66px;
}

.admin-dashboard table th:nth-child(6), 
.admin-dashboard table td:nth-child(6) {
  width: 66px;
  min-width: 66px;
}

.admin-dashboard table th:nth-child(7), 
.admin-dashboard table td:nth-child(7) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(8), 
.admin-dashboard table td:nth-child(8) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(9), 
.admin-dashboard table td:nth-child(9) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(10), 
.admin-dashboard table td:nth-child(10) {
  width: 600px;
  min-width: 600px;
  white-space: normal;
}

.admin-dashboard table th:nth-child(11), 
.admin-dashboard table td:nth-child(11) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(12), 
.admin-dashboard table td:nth-child(12) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(13), 
.admin-dashboard table td:nth-child(13) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table th:nth-child(14), 
.admin-dashboard table td:nth-child(14) {
  width: 600px;
  min-width: 600px;
  white-space: normal;
}

.admin-dashboard table th:nth-child(15), 
.admin-dashboard table td:nth-child(15) {
  width: 250px;
  min-width: 250px;
}

.admin-dashboard table th:nth-child(16), 
.admin-dashboard table td:nth-child(16) {
  width: 250px;
  min-width: 250px;
}

.admin-dashboard table th:nth-child(17), 
.admin-dashboard table td:nth-child(17) {
  width: 100px;
  min-width: 100px;
}

.admin-dashboard table th:nth-child(18), 
.admin-dashboard table td:nth-child(18) {
  width: 200px;
  min-width: 200px;
}

.admin-dashboard table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 1);
}

.admin-dashboard table th {
  background-color: rgba(0, 0, 0, 1);
  padding: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.admin-dashboard table td {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.admin-dashboard table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
}

.approve-button {
background: rgba(0, 255, 0, 0.5);
color: white;
border: 1px solid rgba(0, 255, 0, 0.7);
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
width: 75px;
max-width: 75px;
margin: 5px 5px 5px 5px;
text-align: center;
display: inline-block;
}

.reject-button {
background: rgba(255, 0, 0, 0.5);
color: white;
border: 1px solid rgba(255, 0, 0, 0.7);
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
width: 75px;
max-width: 75px;
margin: 5px 5px 5px 5px;
text-align: center;
display: inline-block;
}

.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-modal {
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border-radius: 8px;
  width: 375px;
  text-align: center;
}

.confirm-modal h3 {
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 30px;
}

.confirm-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.confirm-modal button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  width: 150px;
  min-width: 150px;
  font-size: 16px;
  opacity: 0.8;
}

.confirm-modal .confirm-button {
  background: rgba(0, 255, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.7);
}

.confirm-modal .cancel-button {
  background: rgba(255, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 0, 0, 0.7);
}

.confirm-modal button:hover {
  opacity: 1;
}

.action-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 4px;
  color: white;
  z-index: 1000;
  animation: fadeOut 3s forwards;
}

.action-message.success {
  background: rgba(0, 255, 0, 0.2);
  border: 1px solid rgba(0, 255, 0, 0.5);
}

.action-message.error {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.5);
}

@keyframes fadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.suspend-button {
  display: inline-block;
  padding: 6px 12px;
  margin: 3px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 75px;
  text-align: center;
  background-color: rgba(255, 165, 0, 0.3); 
  border: 1px solid rgba(255, 165, 0, 0.5);
  color: white;
}

.suspend-button:hover {
  background-color: rgba(255, 165, 0, 0.5);
}

.confirm-modal .suspend-button {
  background: rgba(255, 165, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 165, 0, 0.5);
}

.confirm-modal .suspend-button:hover {
  background: rgba(255, 165, 0, 0.5);
}

.restore-button {
  background-color: #4CAF50;  
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.restore-button:hover {
  background-color: #45a049;
}

.restore-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.password-modal {
  background: rgba(30, 30, 30, 0.95);
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  text-align: center;
}

.password-modal input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}


.admin-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 75px);
  margin-top: 75px;
  padding: 20px;
}

.admin-login-box {
  background: rgba(0, 0, 0, 0.5);
  padding: 30px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
}

.admin-login-box h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.admin-login-box .input-group {
  margin-bottom: 15px;
}

.admin-login-box input {
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}

.admin-login-box button {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.admin-login-box button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.admin-login-box button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error-message {
  color: #ff4444;
  text-align: center;
  margin-bottom: 15px;
  padding: 10px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 4px;
}

.admin-logout-confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.admin-logout-confirm-modal {
  background: rgba(30, 30, 30, 0.95);
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  text-align: center;
}

.admin-logout-confirm-modal h3 {
  margin-bottom: 15px;
  color: #fff;
  font-size: 20px;
}

.admin-logout-confirm-modal p {
  color: #fff;
  margin-bottom: 20px;
}

.admin-logout-confirm-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.admin-logout-confirm-modal button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.3s;
}

.admin-logout-confirm-modal .confirm-button {
  background: #dc3545;
  color: white;
}

.admin-logout-confirm-modal .cancel-button {
  background: #6c757d;
  color: white;
}

.admin-logout-confirm-modal button:hover {
  opacity: 0.8;
}

.section-title {
  font-size: 36px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  margin: 0 auto;
  text-align: center;
}

.section-separator {
  height: 2px;
  background: rgba(0, 0, 0, 1);
  margin: 40px 0;
}

.user-stats-section {
  margin-bottom: 30px;
}

.user-stats-chart {
  background: rgba(145, 75, 255,0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.user-table-container {
  background: rgba(145, 75, 255,0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
}

.user-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.user-table th {
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  white-space: nowrap;
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.user-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.user-table tr:hover td {
  background: rgba(0, 0, 0, 1);
}

body.dark .section-title {
  color: rgb(0, 0, 0, 0.6);
}

body.dark .user-stats-chart,
body.dark .user-table-container {
  background: rgba(255, 255, 255, 1);
}

body.dark .user-table th {
  background: rgba(0, 0, 0, 1);
  color: rgb(0, 0, 0, 0.6);
}

body.dark .user-table td {
  color: rgba(0, 0, 0, 0.7);
}

body.dark .user-table tr:hover td {
  background: rgba(0, 0, 0, 0.05);
}

.preset-image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .preset-image-modal-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.preset-image-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 50%;
min-height: 97vh;
  max-height: 97vh;
  overflow-y: auto;
    z-index: 99999;
    position: relative;
}

body.dark .preset-image-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

body.light .preset-image-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
    .preset-image-modal {
        width: 100%;
  max-width: 75%;
min-height: 98vh;
  max-height: 98vh;
    }}

@media (max-width: 768px) {
    .preset-image-modal {
  border-radius: 6px;
  padding: 15px 10px 10px 10px;
  width: 95%;
  max-width: 95%;
min-height: 85vh;
  max-height: 85vh;
    }}

.preset-image-header {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0px;
}

@media (max-width: 768px) {
    .preset-image-header {
          margin-bottom: 0px;
}}

.preset-image-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .preset-image-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .preset-image-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .preset-image-close-button {
      font-size: 11px;
    }}

@media (max-width: 768px) {
    .preset-image-close-button {
      font-size: 13px;
    }}

.preset-image-categories {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.preset-image-category-button {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color:rgba(255, 255, 255, 0.8); 
  padding: 1px 15px 3px 15px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  font-size: 14px;
}

body.dark .preset-image-category-button {
  background: rgba(0, 0, 0, 1); 
}

body.light .preset-image-category-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 768px) {
    .preset-image-category-button {
          font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
    }}

.preset-image-category-button.active {
  background: rgba(125, 55, 255, 0.6);
  color:rgba(255, 255, 255, 1); 
  font-weight: 400;
}

body.dark .preset-image-category-button.active {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .preset-image-category-button.active {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9); 
}

.preset-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

@media (max-width: 1366px) {
    .preset-image-grid {
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}}

@media (max-width: 768px) {
    .preset-image-grid {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}}

.preset-image-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.preset-image-zoom {
    position: relative;
  width: 100%;
  padding-top: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
  border-radius: 8px;
  border: none; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.preset-image-label {
  margin: 0 auto;
  text-align: center;
  align-items: center;
  font-size: 15px;
  color:rgba(255, 255, 255, 1); 
  text-shadow: none;
  position: absolute;
  bottom: 0px;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
      background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 3px 12px;
  border-radius: 6px;
}


body.dark .preset-image-label {
  background: rgba(255, 255, 255, 0.3); 
}

@media (max-width: 768px) {
    .preset-image-label {
          font-size: 13px;
            padding: 3px 10px;
    }}

.preset-image-modal::-webkit-scrollbar {
  display: none;
}
body:has(.submit-agent-modal-overlay) .user-header,
body:has(.submit-agent-modal-overlay) .admin-header,
body:has(.submit-agent-modal-overlay) .main-footer,
body:has(.submit-agent-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.submit-agent-modal-overlay) .global-footer,
body:has(.submit-agent-modal-overlay) .ask-treo,
body:has(.submit-agent-modal-overlay) .agent-interaction-dock-button,
body:has(.submit-agent-modal-overlay) .float-chat-button {
  display: none;
}

.submit-agent-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999;
  overflow-y: auto !important;
}

body.dark .submit-agent-modal-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.submit-agent-modal-content {
  background: linear-gradient(100deg, #9945FF, #14F195);
  padding: 10px 20px 20px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  width: 36%;
  max-width: 36%;
  box-sizing: border-box;
  position: relative;
}

@media (max-width: 1366px) {
  .submit-agent-modal-content {
    padding: 6px 10px 10px 10px;
  }}

@media (max-width: 768px) {
  .submit-agent-modal-content {
    width: 95%;
    max-width: 95%;
    padding: 10px;
  }}


body.dark .submit-agent-modal-content {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .submit-agent-modal-content {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-url-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

  .agent-url-note {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
    font-size: 12px;
    font-weight: 400;
    margin-right: 5px;
    font-style: italic;
    margin-top: 7px;
}

body.light .agent-url-note {
    color: rgba(0, 0, 0, 0.9);
        font-weight: 300;
    text-shadow: none;
}

@media (max-width: 1366px) {
  .agent-url-note {
    font-size: 11px;
    margin-right: 5px;
    font-style: italic;
    margin-top: 8px;
  }}

  @media (max-width: 768px) {
  .agent-url-note {
    font-size: 12px;
    margin-right: 5px;
    font-style: italic;
    margin-top: 3px;
  }}


  .agent-url-note-2 {
position: relative;
display: block;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
font-size: 12px;
font-weight: 400;
margin: 0 auto;
margin-top: -8px;
margin-bottom: 0px;
text-align: right;
font-style: italic;
float: right;
margin-right: 5px;
}

body.dark .agent-url-note-2 {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-url-note-2 {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 300;
    text-shadow: none;
}

@media (max-width: 1366px) {
   .agent-url-note-2 {
        font-size: 10px;
        margin-top: 0px;
    }}

    @media (max-width: 768px) {
  .agent-url-note-2 {
        font-size: 11px;
        margin-top: -1px;
    }}



.submit-agent-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 26px;
  text-align: center;
  margin-bottom: 5px;
}

@media (max-width: 1366px) {
  .submit-agent-title{
    font-size: 22px;
    margin-bottom: 2px;
  }}

body.dark .submit-agent-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .submit-agent-title {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: none;
}

.submit-agent-desc {
font-size: 13px;
line-height: 16px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 15px;
font-weight: 300;
}

body.dark .submit-agent-desc {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
}

body.light .submit-agent-desc {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: none;
}

@media (max-width: 1366px) {
  .submit-agent-desc {
    font-size: 11px;
    line-height: 12px;
    width: 100%;
    margin-bottom: 6px;
  }}


@media (max-width: 768px) {
  .submit-agent-desc {
    font-size: 11px;
    line-height: 12px;
    width: 100%;
    margin-bottom: 10px;
  }}

    .submission-desc-note {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
    font-size: 12px;
    font-weight: 400;
    margin-left: 5px;
    font-style: italic;
    margin-bottom: 10px;
}

body.light .submission-desc-note {
    color: rgba(0, 0, 0, 0.9);
            font-weight: 300;
    text-shadow: none;
}

@media (max-width: 1366px) {
    .submission-desc-note {
    font-size: 12px;
    margin-right: 5px;
    font-style: italic;
    margin-bottom: 5px;
  }}

  @media (max-width: 768px) {
    .submission-desc-note {
    font-size: 12px;
    margin-right: 5px;
    font-style: italic;
    margin-bottom: 5px;
  }}


.from-agent-builder {
font-size: 16px;
line-height: 20px;
font-weight: 300;
padding: 0px;
background: none;
color: rgba(255, 255, 255, 0.9);
text-shadow: none;
border-radius: 0px;
border: 0px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 20px;
}

body.light .from-agent-builder {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: none;
}

@media (max-width: 1366px) {
  .from-agent-builder {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 15px;
  }}

@media (max-width: 1366px) {
  .from-agent-builder {
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 10px;
  }}

.submit-agent-modal-content label {
  display: inline-block;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 3px;
  margin-bottom: 3px;
}

@media (max-width: 1366px) {
  .submit-agent-modal-content label {
    font-size: 13px;
    line-height: 13px;
    margin-bottom: 3px;
  }}

  @media (max-width: 768px) {
    .submit-agent-modal-content label {
      font-size: 13px !important;
      line-height: 13px;
      margin-bottom: 3px;
    }}

body.dark .submit-agent-modal-content label {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-weight: 300;
}

body.light .submit-agent-modal-content label {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: none;
  font-weight: 300;
}

.submit-agent-modal-content .character-counter {
  font-size: 11px;
  color: #fff;
  display:block;
  text-align: right;
  margin-right: 3px;
  margin-top: 9px;
  display:inline-block;
  float: right;
}

body.light .submit-agent-modal-content .character-counter {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .character-counter {
    font-size: 9px;
    line-height: 11px;
    margin-top: 9px;
  }}


.submit-agent-modal-content .character-counter.warning i {
color: rgba(240, 255, 0, 1);
text-shadow: none;
margin-left: 3px;
  }


.submit-agent-modal-content .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
  font-size: 15px;
  line-height: 15px;
  margin-left: 2px;
}

body.dark .submit-agent-modal-content .required {
    color: rgb(221, 17, 17, 1);
  text-shadow: 0px 0px 1px rgb(221, 17, 17, 1);
}

body.light .submit-agent-modal-content .required {
    color: rgb(221, 17, 17, 1);
  text-shadow: 0px 0px 1px rgb(221, 17, 17, 1);
}

.submit-agent-modal-content .optional {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 12px;
    line-height: 13px;
  margin-left: 2px;
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .optional {
    font-size: 10px;
    line-height: 13px;
  }}

  @media (max-width: 768px) {
    .submit-agent-modal-content .optional {
      font-size: 10px !important;
      line-height: 10px !important;
    }}

body.dark .submit-agent-modal-content .optional {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
}

.submit-agent-modal-content input {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.7); 
  width: 100%;
  max-width: 100%;
  height: 35px; 
  min-height: 35px; 
  max-height: 35px; 
  padding: 2px 6px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  transition: none;
  transform: none;
}

body.light .submit-agent-modal-content input {
  color: rgba(0, 0, 0, 0.9); 
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.submit-agent-modal-content input:focus {
  transform: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1366px) {
  .submit-agent-modal-content input {
  height: 25px; 
  min-height: 25px; 
  max-height: 25px; 
  margin-bottom: 5px;
  font-size: 11px;
}}

@media (max-width: 768px) {
  .submit-agent-modal-content input {
    padding: 5px !important;
    font-size: 12px !important;
}}

.submit-agent-modal-content input[type="text"] {
  width: 100%;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  padding: 2px 6px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 5px; 
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
}

body.light .submit-agent-modal-content input[type="text"] {
  color: rgba(0, 0, 0, 0.9); 
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.submit-agent-modal-content input:disabled{
  cursor: not-allowed;
}

@media (max-width: 1366px) {
.submit-agent-modal-content input[type="text"] {
  font-size: 12px;
}}

.submit-agent-modal-content input[type="text"]::placeholder {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
}

@media (max-width: 1366px) {
.submit-agent-modal-content input[type="text"]::placeholder {
  font-size: 11px;
}}

.submit-agent-modal-content .url-preview {
  background: rgba(0, 0, 0, 0.05);
  cursor: default;
  color: rgba(0, 0, 0, 0.7);
}

.submit-agent-modal-content .select-options {
  margin-top: 10px;
}

.submit-agent-modal-content .input-agent-name {
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}

.submit-agent-modal-content .input-agent-name:disabled {
    cursor: not-allowed
}

.agent-image-label-and-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

  .submit-agent-modal-content .agent-image {
    width: 100%;
    max-width: 100%;
    height: 40px; 
    min-height: 40px; 
    max-height: 40px; 
    color:rgba(0, 0, 0, 0.6); 
    cursor: pointer;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
    .submit-agent-modal-content .agent-image {
      height: 35px; 
      min-height: 35px; 
      max-height: 35px; 
      margin-bottom: 5px;
    }}

  body.dark .submit-agent-modal-content .agent-image {
    color:rgba(0, 0, 0, 0.6); 
  }

    body.light .submit-agent-modal-content .agent-image {
    color:rgba(0, 0, 0, 0.9); 
  }


  .agent-image-section-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 0px;
  }

    @media (max-width: 1366px) {
        .agent-image-section-box {
  margin-top: 10px;
  margin-bottom: 10px;
        }}


.agent-image-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  margin: 0 auto;
  margin-bottom: 0px;
  flex-wrap: wrap;
  vertical-align: middle;
}

  @media (max-width: 1366px) {
.agent-image-section {
  gap: 0px;
  margin-bottom: 0px;
}}

  @media (max-width: 768px) {
.agent-image-section {
  gap: 0px;
  margin-bottom: 0px;
}}

.agent-multi-image {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
}

  @media (max-width: 1366px) {
.agent-multi-image {
  gap: 6px;
}}

  @media (max-width: 768px) {
.agent-multi-image {
  gap: 5px;
}}


.agent-multi-image-item {
    width: 200px;
    height: 200px;
  position: relative;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

  @media (max-width: 1366px) {
.agent-multi-image-item {
    width: 150px;
    height: 150px;
    }}

  @media (max-width: 768px) {
.agent-multi-image-item {
    width: 200px;
    height: 200px;
    }}

.agent-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 0px;
    text-align: center;
     position: relative;
}

body.light .agent-image-preview {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

  @media (max-width: 1366px) {
    .agent-image-preview {
    width: 200px;
    height: 200px;
    }}

      @media (max-width: 768px) {
    .agent-image-preview {
    width: 250px;
    height: 250px;
    }}

.agent-image-preview-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  background-color: rgba(220, 50, 70, 0.7);
  color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: 9px;
  padding: 3px 2px 3px 1px;
  line-height: 1;
  cursor: pointer;
}

body.dark .agent-image-preview-remove {
  background-color: rgba(220, 50, 70, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

body.light .agent-image-preview-remove {
  background-color: rgba(220, 50, 70, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

.add-more-box {
  cursor: pointer;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
    width: 200px;
    height: 200px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

body.light .add-more-box {
  border: 2px dashed rgba(0, 0, 0, 0.2);
}

  @media (max-width: 1366px) {
.add-more-box {
    width: 200px;
    height: 200px;
    }}

      @media (max-width: 768px) {
.add-more-box {
    width: 250px;
    height: 250px;
    }}

.plus-icon {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.3);
}

body.light .plus-icon {
  color: rgba(0, 0, 0, 0.3);
}

      @media (max-width: 768px) {
.plus-icon {
  font-size: 22px;
}}



.agent-multi-image-item.add-more-box .add-box-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 1366px) {
  .agent-multi-image-item.add-more-box .add-box-buttons {
  gap: 6px;
}}

@media (max-width: 768px) {
  .agent-multi-image-item.add-more-box .add-box-buttons {
  gap: 4px;
}}

.add-box-buttons .upload-button,
.add-box-buttons .library-button {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

body.light .add-box-buttons .upload-button,
body.light .add-box-buttons .library-button {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .add-box-buttons .upload-button,
.add-box-buttons .library-button {
  font-size: 12px;
  padding: 6px 8px;
}}

@media (max-width: 768px) {
  .add-box-buttons .upload-button,
.add-box-buttons .library-button {
  font-size: 10px;
  padding: 4px 6px;
}}


  .submit-agent-modal-content .image-rules {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
 margin: 0 auto;
 margin-bottom: 0px;
  vertical-align: middle;
  font-style: italic;
  display: none;
  }

  @media (max-width: 1366px) {
    .submit-agent-modal-content .image-rules {
        gap: 0px;
      font-size: 10px;
    }}

    @media (max-width: 768px) {
      .submit-agent-modal-content .image-rules {
        font-size: 10px;
      }}

  body.dark .submit-agent-modal-content .image-rules {
    color: rgba(255, 255, 255, 0.6);
    }

      body.light .submit-agent-modal-content .image-rules {
    color: rgba(0, 0, 0, 0.9);
    }

  .submit-agent-modal-content .image-rules-symbol {
   color: red;
   margin-left: 5px;
  }



 .preset-image-button {
  margin-top: 3px;
  margin-bottom: 10px;
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

body.dark  .preset-image-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.9);
}

.preset-image-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1366px) {
   .preset-image-button {
      padding: 4px 6px;
  font-size: 9px;
  font-weight: 500;
    margin-bottom: 6px;
   }}


@media (max-width: 768px) {
   .preset-image-button {
      padding: 3px 6px;
  font-size: 10px;
    border-radius: 4px;
   }}

.submit-agent-modal-content textarea {
  resize: vertical; 
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.7); 
  font-size: 14px;
  width: 100%;
  max-width: 100%;
  height: 200px; 
  min-height: 200px; 
  max-height: 200px; 
  padding: 8px;
  margin-bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 4px;
  box-sizing: border-box;
  transition: none;
  transform: none;
}

body.light .submit-agent-modal-content textarea {
  border: 1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.9); 
}

@media (max-width: 1366px) {
  .submit-agent-modal-content textarea {
    height: 150px; 
    min-height: 150px; 
    max-height: 150px; 
    margin-bottom: 3px;
    font-size: 11px;
  }}

.submit-agent-modal-content textarea::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

.submit-agent-modal-content textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

body.dark .submit-agent-modal-content textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

  .submit-agent-modal-content select {
    box-sizing: border-box;
    transition: none;
    transform: none;
    max-width: 100%;
}

.submit-agent-modal-content textarea:focus {
    transform: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .submit-agent-modal-content .character-counter {
  color: rgba(255, 255, 255, 0.9);
}

.submit-agent-modal-content .input-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
}

@media (max-width: 1366px) {
.submit-agent-modal-content .input-container {
gap: 5px;
}}

@media (max-width: 768px) {
.submit-agent-modal-content .input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  }}


.submit-agent-modal-content .input-group {
  flex: 1 1;
  margin-right: 0px; 
  margin-top: 0px;
  transition: none; 
  transform: none; 
  box-sizing: border-box; 
  max-width: 100%; 
  position: relative;
}

@media (max-width: 768px) {
  .submit-agent-modal-content .input-group {
    margin-right: 0px; 
  }}

.submit-agent-modal-content .input-group:last-child {
  margin-right: 0; 
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .input-group.custom-margin {
    margin-top: 3px; 
  }}


@media (max-width: 768px) {
  .submit-agent-modal-content .input-group.custom-margin {
    margin-top: 3px; 
  }}



.capslock-warning {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 6px;
  text-shadow: none !important;
  float: right;
}


.submit-agent-modal-content .multiple-checkbox-button {
  width: 100%;
  background: #fff;
  color: #666; 
  padding: 7px 10px 7px 10px; 
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 5px; 
  cursor: pointer; 
  font-size: 14px; 
  transition: background-color 0.3s; 
  margin-top: 3px;
  margin-bottom: 10px;
  height: 35px;
  min-height: 35px;
  max-height: 35px; 
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .multiple-checkbox-button {
  height: 25px;
  min-height: 25px;
  max-height: 25px; 
  padding: 5px 10px 10px 10px; 
  margin-bottom: 5px;
  font-size: 11px; 
  }}

.multiple-checkbox-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 0px;
  margin: 0;
  margin-top: -10px;
  background: transparent;
  border-radius: 4px;
  padding: 10px;
  z-index: 999;
}

.submit-agent-modal-content .multiple-checkbox-title {
margin-bottom: 3px;
font-size: 13.5px;
line-height: 15px;
}

@media (max-width: 1366px) {
.submit-agent-modal-content .multiple-checkbox-title {
  font-size: 11px; 
  margin-bottom: 0px;
}}

.multiple-checkbox-dropdown-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 0px;
  margin: 0;
  margin-top: 0px;
  background: transparent;
  padding: 0px;
  z-index: 999;
}

  @media (max-width: 1366px) {
    .multiple-checkbox-dropdown-2 {
      margin-top: 3px;
    }}

.multiple-checkbox-dropdown-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  z-index: 999;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}

.multiple-checkbox-dropdown-options-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  z-index: 999;
  -webkit-user-select: none;
          user-select: none;
  margin-bottom: -13px;
    cursor: pointer;
}

.multiple-checkbox-dropdown-options-2:last-child {
  margin-bottom: 0px;
}

.multiple-checkbox-dropdown-options > label {
  display: flex;
  align-items: center;
  gap: 0px;
  margin: 0;
  margin-top: 11px;
  margin-left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: none;
  position: absolute;
  font-weight: 500;
  width: 100%;
  pointer-events: none;
}

@media (max-width: 1366px) {
  .multiple-checkbox-dropdown-options > label {
  font-size: 11px;
  margin-top: 6.5px;
  margin-left: 18px;
  }}

.multiple-checkbox-dropdown-options-2 label {
  display: flex;
  align-items: center;
  gap: 0px;
  margin: 0;
  margin-top: -31.5px;
  margin-left: 0px;
  padding-left: 22px;
  font-size: 14px;
  color: #fff;
  text-shadow: none;
  position: absolute;
  font-weight: 500;
  width: 100%;
  pointer-events: none;
}

.multiple-checkbox-dropdown-options input[type="checkbox"] {
  margin: 0;
  margin-bottom: -10px;
  width: auto;
  cursor: pointer;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 1366px) {
  .multiple-checkbox-dropdown-options input[type="checkbox"] {
    margin-bottom: -5px;
  }}

.multiple-checkbox-dropdown-options-2 input[type="checkbox"] {
  margin: 0;
  margin-left: 10px;
  margin-bottom: 0px;
  width: auto;
  cursor: pointer;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 1366px) {
  .multiple-checkbox-dropdown-options-2 input[type="checkbox"] {
    margin-bottom: 8px;
  }}

.multiple-checkbox-dropdown-options:last-child input[type="checkbox"] {
  margin-bottom: -5px;
}

.multiple-checkbox-dropdown-2 .sub-options {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: -13px;
  margin-bottom: 20px;
  margin-left: 17px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.multiple-checkbox-dropdown-2 .sub-options div {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: -10px;
  -webkit-user-select: none;
          user-select: none;
}

.multiple-checkbox-dropdown-2 .sub-options input[type="checkbox"] {
  margin: 0;
  width: auto;
  margin-left: 5px;
  margin-top: 2px;
  pointer-events: none;
}

.multiple-checkbox-dropdown-2 .sub-options-head {
  margin-top: -29px;
  margin-left: 9px;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1366px) {
  .multiple-checkbox-dropdown-2 .sub-options-head {
    font-size: 11px;
    margin-top: -26px;
    margin-left: 6px;
  }}

.multiple-checkbox-dropdown-2 .sub-options label {
  margin: 0;
  margin-top: 3px;
  color: #fff;
  text-shadow: none;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

@media (max-width: 1366px) {
  .multiple-checkbox-dropdown-2 .sub-options label {
    font-size: 11px;
  }}

.submit-agent-modal-content .single-select {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 4px;
  padding: 0px 5px 0px 5px;
  width: 100%;
  margin-top: 0px;
  color:rgba(0, 0, 0, 0.6);
  cursor:pointer;
  height: 35px;
  min-height: 35px;
  max-height: 35px; 
  font-size: 12px;
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .single-select {
    height: 25px;
    min-height: 25px;
    max-height: 25px; 
    margin-top: 3px;
  }}

  @media (max-width: 768px) {
  .submit-agent-modal-content .single-select {
  font-size: 11px;
    margin-top: 1px;
  }}

 .single-select-title {
  margin-top: 0px;
  margin-bottom: 0px;
  }

.submit-agent-modal-content .single-select .single-select-options {
  background: #fff;
  border: 1px solid #ddd!important;
  color: rgba(0, 0, 0, 0.7); 
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 0px;
  margin-top: 10px;
  margin-bottom: 10px;

}

@media (max-width: 1366px) {
  .submit-agent-modal-content .single-select .single-select-options {
    color: rgba(0, 0, 0, 0.6) !important; 
    font-size: 11px;
    font-weight: 500;
  }}

.submit-agent-modal-content .submit-agent-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .submit-agent-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .submit-agent-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .submit-agent-close-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .submit-agent-modal-content .submit-agent-close-button {
      font-size: 13px;
  }}

body.dark .submit-agent-modal-content .close-button{
background: none;
}

.submit-agent-modal-content .submit-button {
  position: relative;
  display: block;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
  right: 0px;
  float: right;
  width: 100%;
  transition: all 0.3s ease;
}

@media (max-width: 1366px) {
  .submit-agent-modal-content .submit-button {
  font-size: 13px;
  padding: 7px 15px;
}}

.submit-agent-modal-content .submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

body.dark .submit-agent-modal-content .submit-button {
  background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .submit-agent-modal-content .submit-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}




.submit-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}



  .form-submited-back {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2000 !important;
    width: 100% !important;  
    height: 100% !important;
    background: linear-gradient(100deg, rgba(145, 75, 255, 1), rgba(20, 241, 149, 1));
    background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 20px !important;
  }

  @keyframes GradientMove {
  0% { background-position: 0 0; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

  body.dark .form-submited-back {
    background: rgba(0, 0, 0, 1) !important;
  }

  .form-submited-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 25%;
    background: rgba(145, 75, 255,0.3);
    padding: 20px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  body.dark .form-submited-box {
    background: rgba(0, 0, 0, 1) !important;
  }

    @media (max-width: 1366px) {
      .form-submited-box {
         min-width: 30%;
    max-width: 30%;
    }}

        @media (max-width: 768px) {
      .form-submited-box {
         min-width: 95%;
    max-width: 95%;
    }}

  .form-submited-text {
    width: 90% !important;  
    max-width: 90% !important;  
    font-size: 22px !important;
    line-height: 35px !important;
    color: rgba(255, 255, 255, 0.9);
    text-align: center !important;
    margin: 0 !important;
  }

  .form-submited-back .message-ok-button {
    background: rgba(145, 75, 255,0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    padding: 7px 25px;
    width: auto;
    min-width: 86px;
    max-width: 86px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-top: 20px;
  }

  body.dark .form-submited-back .message-ok-button {
    background: rgba(0, 0, 0, 1);
    }

  @media (max-width: 1366px) {
    .form-submited-back .message-ok-button {
      font-size: 12px !important;
    }}

      @media (max-width: 768px) {
    .form-submited-back .message-ok-button {
      font-size: 16px !important;
    }}


  .error-message-back {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 25%;
    background:  rgba(220, 50, 70, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 20px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin: 0 auto;
  }

  body.dark .error-message-back {
      background: rgb(0, 0, 0, 1);
}

  @media (max-width: 1366px) {
    .error-message-back {
      min-width: 90%;
      max-width: 90%;
    }}

  .error-message-text {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.9);
    text-align: center !important;
    margin: 0 !important;
  }

  @media (max-width: 1366px) {
    .error-message-text {
      font-size: 12px !important;
    }}

  .error-message-back .message-ok-button {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0px;
  }

  body.dark .error-message-back .message-ok-button {
  background: rgba(0, 0, 0, 1);
}

  @media (max-width: 1366px) {
    .error-message-back .message-ok-button {
      font-size: 12px !important;
    }}

  .turnstile-container {
    margin: 10px 0;
    display: flex;
    justify-content: center;
  }

  .submit-agent-modal-content::-webkit-scrollbar {
width: 8px;
}

.submit-agent-modal-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 1);
border-radius: 4px;
}

.submit-agent-modal-content::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 4px;
}

body:has(.follow-to-agent-interaction-overlay) .user-header,
body:has(.follow-to-agent-interaction-overlay) .admin-header,
body:has(.follow-to-agent-interaction-overlay) .main-footer,
body:has(.follow-to-agent-interaction-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.follow-to-agent-interaction-overlay) .global-footer,
body:has(.follow-to-agent-interaction-overlay) .ask-treo,
body:has(.follow-to-agent-interaction-overlay) .agent-interaction-dock-button,
body:has(.follow-to-agent-interaction-overlay) .float-chat-button {
  display: none;
}

.follow-to-agent-interaction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10050 !important;
}


.follow-to-agent-interaction-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 25px;
    z-index: 9999; 
  width: auto;
  min-width: 33%;
  max-width: 33%;
}

  body.dark .follow-to-agent-interaction-modal {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

@media (max-width: 786px) {
  .follow-to-agent-interaction-modal {
  width: auto;
  min-width: 95%;
  max-width: 95%;
}}



.follow-to-agent-interaction-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 2px;
  right: 2px;
}

body.dark .follow-to-agent-interaction-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1366px) {
.follow-to-agent-interaction-close {
      font-size: 11px;
  }
}

@media (max-width: 768px) {
.follow-to-agent-interaction-close {
      font-size: 13px;
  }
}




.follow-to-agent-interaction-title {
 color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 20px;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 1366px) {
  .follow-to-agent-interaction-title {
    font-size: 16px;
  }}

@media (max-width: 768px) {
  .follow-to-agent-interaction-title {
    font-size: 16px;
  }}

  .follow-to-agent-interaction-owner-card-title {
 color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 1366px) {
  .follow-to-agent-interaction-owner-card-title {
    font-size: 14px;
  }}

@media (max-width: 768px) {
  .follow-to-agent-interaction-owner-card-title {
    font-size: 13px;
  }}


  .follow-to-agent-interaction-owner-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 1366px) {
    .follow-to-agent-interaction-owner-avatar img {
        width: 150px;
        height: 150px;
            margin-top: 5px;
    }}

    @media (max-width: 768px) {
        .follow-to-agent-interaction-owner-avatar img {
            width: 150px;
            height: 150px;
        }}



.follow-to-agent-interaction-owner-name {
 color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 16px;
  text-align: center;
      margin-top: 5px;
}

@media (max-width: 1366px) {
  .follow-to-agent-interaction-owner-name {
    font-size: 13px;
  }}

@media (max-width: 768px) {
  .follow-to-agent-interaction-owner-name {
    font-size: 15px;
  }}

.follow-to-agent-interaction-button-group {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}


@media (max-width: 768px) {
.follow-to-agent-interaction-button-group {
  gap: 10px;
}}


.follow-to-agent-interaction-visit-profile,
.follow-to-agent-interaction-confirm {
  background: rgba(145, 75, 255,0.3);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
  text-decoration: none;
}

body.dark .follow-to-agent-interaction-visit-profile,
body.dark .follow-to-agent-interaction-confirm {
    background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .follow-to-agent-interaction-visit-profile,
.follow-to-agent-interaction-confirm {
    padding: 6px 12px;
  font-size: 12px;
}}

@media (max-width: 768px) {
  .follow-to-agent-interaction-visit-profile,
.follow-to-agent-interaction-confirm,
.follow-to-agent-interaction-cancel {
    padding: 10px 10px;
  font-size: 12px;
}}


.follow-to-agent-interaction-confirm .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}



  .follow-to-agent-interaction-error {
    font-size: 13px;
    text-align: center;
    margin-top: 20px;
  }
body:has(.agent-review-modal-overlay) .user-header,
body:has(.agent-review-modal-overlay) .admin-header,
body:has(.agent-review-modal-overlay) .main-footer,
body:has(.agent-review-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-review-modal-overlay) .global-footer,
body:has(.agent-review-modal-overlay) .ask-treo,
body:has(.agent-review-modal-overlay) .agent-interaction-dock-button,
body:has(.agent-review-modal-overlay) .float-chat-button {
  display: none;
}


.agent-review-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.agent-review-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 40px 20px 20px 20px;
    z-index: 10000; 
    width: 500px;
}

body.dark .agent-review-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


body.light .agent-review-modal {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .agent-review-modal {
        width: 95%;
        max-width: 95%;
    }}

.agent-review-modal .modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.agent-review-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .agent-review-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-review-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}


  @media (max-width: 1366px) {
  .agent-review-close-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .agent-review-close-button {
      font-size: 13px;
  }}

.agent-review-modal-title {
    margin-top: -20px;
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
}

.give-agent-review {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .give-agent-review {
    color: rgba(255, 255, 255, 0.9);
}

body.light .give-agent-review {
    color: rgba(0, 0, 0, 0.9);
}


.rating-container {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    margin-top: -25px;
}

.agent-rating {
    margin-top: 0px;
    margin-right: 10px;
}

.star-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    background-color: rgba(145, 75, 255,0.3);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s ease, background-color 0.2s ease;
}

body.dark .star-container {
    background: rgba(0, 0, 0, 0.06);
}

body.light .star-container {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.2);
}

.star-container.filled {
    background-color: rgba(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .star-container.filled {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

body.light .star-container.filled {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9);
}


.rating-label {
    font-size: 14px;
    font-weight: 300;
    line-height: 32px;
    margin-left: -6px;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .rating-label {
    color: rgba(255, 255, 255, 0.9);
}

.agent-review-modal textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    border-radius: 4px;
    padding: 4px 10px;
    resize: vertical; 
    height: 100px; 
    min-height: 100px; 
    max-height: 200px; 
}

body.light .agent-review-modal textarea {
    border: 1px solid rgba(0, 0, 0, 0.2)
}

.agent-review-modal input:focus,
.agent-review-modal textarea:focus,
.agent-review-modal select:focus {
  border-color: transparent;
  outline: none;
}

.agent-review-modal .textarea-container {
    position: relative;
    width: 100%;
}

.agent-review-modal .character-count {
    position: absolute;
    top: -18px !important;
    right: 6px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .agent-review-modal .character-count {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-review-modal .character-count {
    color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 768px) {
    .agent-review-modal .character-count {
        top: -18px !important;
    }}

.agent-review-submit-button {
    position: relative;
    display: block;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    font-size: 17px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    transition: all 0.3s ease;
    text-align: center;
}

body.dark .agent-review-submit-button {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-review-submit-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-review-submit-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .agent-review-submit-button-text {
    text-align: center;
    margin: 0 auto;
  }

 .agent-review-submit-button-text .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


  .agent-review-submit-button i {
    margin-right: 6px;
  }



.agent-review-modal-error {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    position: relative;
    padding-top: 20px;
    text-align: center;
}

body.dark .agent-review-modal-error {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-review-modal-error {
    color: rgba(0, 0, 0, 0.9);
}

.agent-review-modal-success {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .agent-review-modal-success {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-review-modal-success {
    color: rgba(0, 0, 0, 0.9);
}
.agent-reviews-container {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    position: relative;
}

@media (max-width: 1366px) {
  .agent-reviews-container {
    padding: 15px;
  }}

body.dark .agent-reviews-container {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-reviews-container {
    background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px;
    gap: 10px;
}

.agent-reviews-title {
  color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 15px;
}

body.light .agent-reviews-title {
  color: rgba(0, 0, 0, 0.9);
  }

@media (max-width: 1366px) {
  .agent-reviews-title {
    font-size: 15px;
  }}

@media (max-width: 768px) {
  .agent-reviews-title {
    font-size: 16px;
  }}

body.dark .agent-reviews-title {
  background: rgba(0, 0, 0, 1);
}

.agent-reviews-write-button {
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 5px 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 10px;
    right: 15px;
}

body.dark .agent-reviews-write-button {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-reviews-write-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-reviews-write-button {
    font-size: 13px;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 6px;
  }}

  @media (max-width: 768px) {
    .agent-reviews-write-button {
      font-size: 13px;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 6px;
    }}

.agent-reviews-content {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.agent-reviews-card {
    background: rgba(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 15px 15px;
    border-radius: 8px;
    margin-top: 20px;
    transition: 0.3s;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

body.dark .agent-reviews-card {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-reviews-card {
   background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.agent-reviews-rating {
    font-size: 16px;
    color: rgba(255,215,0, 0.9);
}

@media (max-width: 1366px) {
  .agent-reviews-rating {
    font-size: 12px;
  }}

@media (max-width: 768px) {
  .agent-reviews-rating {
    font-size: 13px;
  }}

.agent-reviews-date {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    position: absolute;
    top: 6px;
    right: 8px;
}

body.light .agent-reviews-date {
  color: rgba(0, 0, 0, 0.9)
}

.agent-reviews-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
}

body.light .agent-reviews-text {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .agent-reviews-text {
    font-size: 12px;
  }}

@media (max-width: 768px) {
  .agent-reviews-text {
        font-size: 13px;
        margin-top: 5px;
  }}

.agent-reviews-text a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

body.light .agent-reviews-text a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: underline;
}

.no-reviews {
    text-align: left;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 20px;
    margin-left: 5px;
    font-style: italic;
    cursor: pointer;
    position: absolute;
    top: -10px;
    right: 15px;
}

body.light .no-reviews {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .no-reviews {
        font-size: 12px;
  }}

@media (max-width: 768px) {
  .no-reviews {
        font-size: 12px;
  }}

.no-reviews i {
    margin-left: 5px;
}

  .agent-review-alert {
    background: rgba(220,50,70,0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 15px;
    margin-top: -10px;
    margin-bottom: 10px;
    border-radius: 6px;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 300;
}

body.dark .agent-review-alert {
  background: rgb(0, 0, 0, 1);
  color: rgba(226, 56, 76, 0.7);
}

@media (max-width: 1366px) {
    .agent-review-alert {
        padding: 10px;
    }}

@media (max-width: 768px) {
    .agent-review-alert {
    font-size: 12px;
    margin-top: -5px;
}}

.agent-reviews-user {
    font-size: 13px;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
}

body.light .agent-reviews-user {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .agent-reviews-user {
        margin-top: 5px;
  }}

.agent-reviews-user img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    object-fit: cover;
    vertical-align: middle;
}

.agent-reviews-username {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

body.light .agent-reviews-username {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-reviews-username {
         font-size: 11px;
  }}

  @media (max-width: 768px) {
.agent-reviews-username {
         font-size: 12px;
  }}

.agent-review-with-reply {
  position: relative;
  margin-bottom: 0px;
  padding-left: 0px;
}

.agent-reply-action .agent-owner-reply-button {
  background: rgba(145, 75, 255,0.3);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-top: 6px;
  width: auto;
  min-width: 100px;
  max-width: 100px;
}

body.dark .agent-reply-action .agent-owner-reply-button {
  background: rgba(0,0,0,0.1);
}

body.light .agent-reply-action .agent-owner-reply-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-reply-action .agent-owner-reply-button i {
  margin-right: 2px;
}

.agent-reply-action {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.reply-character-count {
  margin-top: -15px;
  margin-bottom: 3px;
  margin-right: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  float: right;
}

body.light .reply-character-count {
  color: rgba(0, 0, 0, 0.9);
}


.agent-reply-action textarea {
  resize: vertical;
  min-height: 66px;
  max-height: 200px;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 100%;
}

body.dark .agent-reply-action textarea {
  background: rgba(0,0,0,0.1);
  color: rgba(255, 255, 255, 0.8);
}

body.light .agent-reply-action textarea {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-reply-action input:focus,
.agent-reply-action textarea:focus,
.agent-reply-action select:focus {
  border-color: transparent;
  outline: none;
}


.agent-reply-action textarea::placeholder {
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
}

body.dark .agent-reply-action textarea::placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}


.agent-reply-action .agent-owner-reply-submit-button {
  background: rgba(145, 75, 255,0.3);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-top: 4px;
  width: auto;
  min-width: 100px;
  max-width: 100px;
}

body.dark .agent-reply-action .agent-owner-reply-submit-button {
  background: rgba(0,0,0,0.1);
}

body.light .agent-reply-action .agent-owner-reply-submit-button {
   background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-reply-action .agent-owner-reply-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.replying-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.replying-icon-text .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}





.agent-reply-error {
  font-size: 12px;
  margin-top: 0px;
  margin-left: 6px;
  margin-bottom: 0px;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
}

body.light .agent-reply-error {
  color: rgba(0, 0, 0, 0.9)
}

.agent-owner-reply-box {
  position: relative;
  margin-top: 10px;
  margin-left: 3%;
  padding: 15px;
   background: rgba(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 8px;
  width: 97%;
  max-width: 97%;
  text-align: left;
}


body.dark .agent-owner-reply-box {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-owner-reply-box {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

.agent-review-with-reply::before {
  content: '';
  position: absolute;
  top: 138px;
  left: 0;
  margin-left: 26px;
  width: 2px;
  height: calc(100% - 214px); 
  background: #b8b7b7;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  display: none;
}

body.dark .agent-review-with-reply::before {
  background: #666;
}


.agent-owner-reply-box::before {
  font-family: "FontAwesome";
  content: '\f112';
  position: absolute;
  top: 0px;
  left: -26px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(180deg);
  background: none;
}

@media (max-width: 1366px) {
  .agent-owner-reply-box::before {
    top: -4px;
    left: -19px;
    font-size: 11px;
  }}

@media (max-width: 768px) {
  .agent-owner-reply-box::before {
    top: -7px;
    left: -17px;
    font-size: 14px;
  }}

.agent-owner-reply-date {
  display: flex;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  position: absolute;
  top: 6px;
  right: 8px;
}

body.light .agent-owner-reply-date {
  color: rgba(0, 0, 0, 0.9)
}

.agent-owner-reply-message {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0px;
  margin-bottom: 7px;
}

body.light .agent-owner-reply-message {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-owner-reply-message {
      font-size: 12px;
  }}

@media (max-width: 768px) {
  .agent-owner-reply-message {
          font-size: 13px;
  }}

.agent-owner-reply-message a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  font-weight: 300;
}

body.light .agent-owner-reply-message a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: underline;
}

.agent-owner-reply-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  object-fit: cover;
  vertical-align: middle;
}

.agent-owner-reply-name {
  font-size: 13px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
   display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

body.light .agent-owner-reply-name {
  color: rgba(0, 0, 0, 0.9);
}


















body:has(.agent-report-modal-overlay) .user-header,
body:has(.agent-report-modal-overlay) .admin-header,
body:has(.agent-report-modal-overlay) .main-footer,
body:has(.agent-report-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-report-modal-overlay) .global-footer,
body:has(.agent-report-modal-overlay) .ask-treo,
body:has(.agent-report-modal-overlay) .agent-interaction-dock-button,
body:has(.agent-report-modal-overlay) .float-chat-button {
  display: none;
}

.agent-report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: transparent;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .agent-report-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(100deg, #9945FF, #14F195);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 10000; 
    width: 25%;
    height: auto;
  }
  
  body.dark .agent-report-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  body.light .agent-report-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 768px) {
    .agent-report-modal {
        width: 95%;
        max-width: 95%;
        padding: 15px;
  }}
  
  
  .agent-report-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .agent-report-title {
    font-size: 26px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10px;
}
  
  .agent-report-modal .close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
  }
  
  body.dark .agent-report-modal .close-button {
    background: none;
}

  body.light .agent-report-modal .close-button {
  color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
  .agent-report-modal .close-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .agent-report-modal .close-button {
      font-size: 13px;
  }}
  

  .agent-report-name {
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
}

  .agent-report-modal .agent-report-field-title {
    font-size: 15px;
    margin-bottom:4px;
    margin-left: 6px;
  }

  .agent-report-field-required {
    font-size: 15px;
    margin-left: 3px;
    margin-right: 0px;
    color: rgba(220, 50, 70, 1);
    font-weight: 500;
  }
  
  .agent-report-modal select,
  .agent-report-modal textarea {
    width: 100%;
    padding: 3px 10px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  body.dark .agent-report-modal select,
  body.dark .agent-report-modal textarea {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

      body.light .agent-report-modal select,
  body.light .agent-report-modal textarea {
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  .agent-report-modal textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 360px;
    margin-top: 5px;
  }


  .agent-report-modal input:focus,
.agent-report-modal textarea:focus,
.agent-report-modal select:focus {
  border-color: transparent;
  outline: none;
}

  .textarea-group {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .character-count {
    position: absolute;
    top: -8px;
    right: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    display: none;
  }
  
  body.dark .character-count {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .reason-description {
    font-size: 14px;
    margin-top: 6px;
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
  }
  
  .urgent-box {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .urgent-box input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
    width: 13px;
    height: 13px;
  background-color: rgba(255,255,255,0.06);
  border: 2px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  vertical-align: middle; 
  margin: 0px 3px;
  margin-top: -2px;
  }

      body.dark .urgent-box input[type="checkbox"]  {
  background-color: rgba(0.0.0,0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  }


  body.light .urgent-box input[type="checkbox"]  {
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(0, 0, 0, 0.5);
  }


  .urgent-box input[type="checkbox"]:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  body.dark .urgent-box input[type="checkbox"]:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  body.light .urgent-box input[type="checkbox"]:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  .urgent-box label {
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
  }

  .agent-report-modal .submit-button {
     display: block;
  background: rgba(145, 75, 255,0.3);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    font-size: 17px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s ease;
  }
  
  body.dark .agent-report-modal .submit-button {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .agent-report-modal .submit-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  .submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .agent-report-modal .warning-message,
  .agent-report-modal .success-message {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;
    margin-top: 10px;
    display: block;
  }
  

  .custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .custom-select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 12px 40px 12px 14px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
  }
  

  .custom-select-wrapper select {
    -webkit-appearance: none;
            appearance: none;
    background: rgba(255,255,255, 1);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid #666;
    padding: 10px 40px 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  
    .custom-select-wrapper::after {
    content: '\f078'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    font-size: 12px;
  }
  
  .custom-select-wrapper select:focus {
    outline: none;
    border-color: none;
  }
  
  .report-options__control {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0px !important;
  border-radius: 6px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
}

@media (max-width: 1366px) {
  .report-options__control {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
    font-size: 11px !important;
  }}

  @media (max-width: 768px) {
  .report-options__control {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
    font-size: 13px !important;
  }}

.report-options__single-value,
.report-options__placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
  text-shadow: none !important;
  display: flex;
  padding: 0px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin-top: 6px !important;
}

body.light .report-options__single-value,
body.light .report-options__placeholder {
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .report-options__single-value,
.report-options__placeholder {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin-top: 6px !important;
}}

@media (max-width: 768px) {
  .report-options__single-value,
.report-options__placeholder {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-top: 2px !important;
}}

.report-options__indicator,
.report-options__dropdown-indicator,
.report-options__indicator-separator {
display: none !important;
}

.report-options__menu {
  background: #8571f4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 5px !important;
  z-index: 100;
  cursor: pointer !important;
  padding: 3px 0px !important;
}

body.dark .report-options__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .report-options__menu {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .report-options__menu {
      margin-top: 3px !important;
  }}

.report-options__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #8571f4 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

@media (max-width: 1366px) {
  .report-options__option {
  font-size: 11px !important;
  font-weight: 300;
  padding: 3px 10px 3px 10px!important;
  }}

@media (max-width: 768px) {
  .report-options__option {
  font-size: 13px !important;
  font-weight: 300;
  padding: 5px 10px 5px 10px!important;
  }}

.report-options__option:last-child {
  padding-bottom: 6px !important;
}

body.dark .report-options__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .report-options__option {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
body:has(.agent-watchlist-action-confirm-overlay) .user-header,
body:has(.agent-watchlist-action-confirm-overlay) .admin-header,
body:has(.agent-watchlist-action-confirm-overlay) .main-footer,
body:has(.agent-watchlist-action-confirm-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-watchlist-action-confirm-overlay) .ask-treo,
body:has(.agent-watchlist-action-confirm-overlay) .agent-interaction-dock-button,
body:has(.agent-watchlist-action-confirm-overlay) .float-chat-button  {
  display: none !important;
}

.defaultpage:has(.agent-page) .sidebar {
    display: none;
}

.defaultpage:has(.agent-page) .main-content {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .defaultpage:has(.agent-page) .main-content {
        width: 100%;
    }}

.agent-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .agent-page {
        width: 100%;
    }}

.agent-page-layout {
    display: flex;
    gap: 20px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

@media (max-width: 1366px) {
    .agent-page-layout {
        gap: 15px !important;
        padding-top: 5px !important;
            padding-bottom: 20px;
    }}

    @media (max-width: 768px) {
    .agent-page-layout {
        padding: 0px !important;
        padding-top: 0px !important;
            padding-bottom: 25px;
    }}

.agent-left-section {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 1366px) {
    .agent-left-section {
        gap: 15px;
    }}

.agent-page-sidebar {
  width: 21%;
  min-width: 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

@media (max-width: 1366px) {
    .agent-page-sidebar {
  width: 18%;
    min-width: 210px;
    max-width: 210px;
    }}

.agent-details-container {
    background: rgb(145, 75, 255, 0.6);
    display: flex;
    width: 100%;
    gap: 15px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    align-items: stretch;
    min-height: -webkit-fit-content;
    min-height: fit-content;
    box-sizing: border-box;
}

@media (max-width: 1366px) {
    .agent-details-container {
        gap: 15px;
        padding: 15px;
    }}

    @media (max-width: 768px) {
    .agent-details-container {
        gap: 10px;
        padding: 10px;
    }}

body.dark .agent-details-container {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-details-container {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-image {
  width: 100%;
  min-width: 500px;
  max-width: 100%;
  height: auto;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  flex: 1 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1366px) {
    .agent-image {
        width: auto;
        min-width: 350px;
        max-width: 100%;
    }}

.agent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.agent-image-wrapper {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  flex: 1 1;
}

.agent-image-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}

.image-nav-button {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: none;
  border: none;
  font-size: 32px;
  padding: 0px 6px;
  cursor: pointer;
}

@media (max-width: 1366px) {
    .image-nav-button {
font-size: 20px;
  padding: 0px 6px;
    }}

@media (max-width: 768px) {
    .image-nav-button {
          font-size: 22px;
  padding: 0px 6px;
    }}

.image-progress-bar {
  width: 100%;
  animation: progressBarAnim 4s linear forwards;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

@keyframes progressBarAnim {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}


.image-pause-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(145, 75, 255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .image-pause-button {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
}

body.light .image-pause-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.image-pause-button {
  top: 6px;
  right: 6px;
  font-size: 8px !important;
  border-radius: 3px;
  width: 16px;
  height: 16px;
}}


@media (max-width: 768px) {
.image-pause-button {
  top: 6px;
  right: 6px;
  font-size: 7px !important;
  border-radius: 3px;
  width: 16px;
  height: 16px;
}}


.agent-info {
    flex: 1 1;
    position: relative;
    padding-bottom: 0px;
    max-width: 50%;
}

@media (max-width: 768px) {
    .agent-info {
    max-width: 100%;
}}

.agent-info > * {
    width: 100%;
    box-sizing: border-box;
}

.agent-name {
    font-size: 22px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0px;
    margin-top: 5px;
    text-align: left;
    word-break: break-word;
}

body.light .agent-name {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-name {
        font-size: 14px;
    }}

    @media (max-width: 768px) {
        .agent-name {
            font-size: 17px;
            margin-top: 0px;
            margin-left: 5px;
        }}

.tahoa-name-button {
    font-size: 18px;
    font-weight: 300;
}

.agent-name.tahoa-name {
    font-family: 'Iceland', sans-serif;
    font-size: 36px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    margin: 0px;
    margin-top: 0px;
    text-align: left;
    word-break: break-word;
}

@media (max-width: 1366px) {
    .agent-name.tahoa-name {
        font-size: 28px;
    }}

    @media (max-width: 768px) {
        .agent-name.tahoa-name {
            font-size: 32px;
            margin-top: 0px;
        }}


.agent-submitter i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: color 0.3s ease;
}

@media (max-width: 1366px) {
    .agent-submitter i {
        font-size: 12px;
    }}

.agent-submitter .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    vertical-align: middle;
    margin-right: 5px;
}

@media (max-width: 1366px) {
    .agent-submitter .user-avatar {
        width: 25px;
        height: 25px;
    }}

    @media (max-width: 768px) {
        .agent-submitter .user-avatar {
            width: 25px;
            height: 25px;
        }}

.agent-submitter {
    background: transparent;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

@media (max-width: 1366px) {
    .agent-submitter {
        font-size: 11px;
    }}

.agent-submitter a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
    line-height: 14px;
    transition: color 0.3s ease;
    margin-left: 0px;
    vertical-align: middle;
}

body.light .agent-submitter a {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .agent-submitter a{
        font-size: 12px;
        line-height: 14px;
    }}

    .agent-submitter .submitter-info {
        display: flex;
        flex-direction: row;
        gap: 2px;
      }


      .agent-submitter .submitter-info p {
        margin: 0;
        padding: 0;
        font-size: 11.5px;
        line-height: 13px;
        color: rgba(255, 255, 255, 0.9);
      }


      @media (max-width: 1366px) {
        .agent-submitter .submitter-info p {
            font-size: 10px;
            line-height: 11px;
        }}

      @media (max-width: 768px) {
        .agent-submitter .submitter-info p {
            font-size: 11.5px;
            line-height: 13px;
        }}

    .agent-description-box {
        display: block;
        margin-top: 12px;
        padding: 10px 10px;
        margin-bottom: 15px;
        background: rgb(145, 75, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        border-radius: 8px;
        transition: all 0.2s ease;
        min-height: 325px;
        height: auto;
        max-height: 325px;
        overflow:auto;
    }

            body.dark .agent-description-box {
            background: rgba(0, 0, 0, 1);
        }

      body.light .agent-description-box {
             background: rgba(255,255,255,1);
              border: 1px solid rgba(0, 0, 0, 0.2);
        }

    @media (max-width: 1366px) {
        .agent-description-box{
            padding: 10px 10px;
            margin-bottom: 10px;
        min-height: 275px;
        height: auto;
        max-height: 275px;
        }}


    @media (max-width: 768px) {
        .agent-description-box{
            padding: 10px 10px;
            font-size: 12px;
            margin-bottom: 10px;
        min-height: auto;
        height: auto;
        max-height: 100%;
        }}


 .agent-description-box::-webkit-scrollbar {
    display: block;
    width: 4px;
  }
  
.agent-description-box::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.6);
    width: 4px;
  }
  
.agent-description-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    width: 4px;
    border-radius: 4px;
  }

  
        .agent-description-box.tahoa-desc-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
        padding: 14px 14px;
        margin-bottom: 0px;
        background: rgb(145, 75, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        border-radius: 8px;
        transition: all 0.2s ease;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    @media (max-width: 1366px) {
        .agent-description-box.tahoa-desc-box {
            padding: 10px 10px;
            font-size: 12px;
            margin-bottom: 0px;
             margin-top: 0px;
        }}

    @media (max-width: 768px) {
        .agent-description-box.tahoa-desc-box {
            padding: 10px 10px;
            font-size: 12px;
             margin-bottom: 0px;
            margin-top: 0px;
        }}

        
        .agent-description-content {
        font-size: 15px;
        line-height: 20px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 0px;
        margin-bottom: 0px;
        word-break: break-word;   
        overflow-wrap: break-word;  
        white-space: pre-wrap;  
        max-width: 100%;
    }

    body.light .agent-description-content {
      color: rgba(0, 0, 0, 0.9);
    }
    
    @media (max-width: 1366px) {
        .agent-description-content {
            font-size: 12px;
            line-height: 16px;
                    margin-top: 0px;
        }}
    
        @media (max-width: 768px) {
            .agent-description-content {
                font-size: 14px;
                line-height: 17px;
            }}
        

    .agent-description-content.tahoa-desc {
        font-size: 16px;
        line-height: 22px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 0px;
        margin-bottom: 0px;
        word-break: break-word;   
        overflow-wrap: break-word;  
        white-space: pre-wrap;     
        max-width: 100%;
    }
    
    @media (max-width: 1366px) {
        .agent-description-content.tahoa-desc {
            font-size: 12px;
            line-height: 16px;
                    margin-top: 0px;
        }}
    
        @media (max-width: 768px) {
            .agent-description-content.tahoa-desc {
                font-size: 13px;
                line-height: 17px;
            }}

        .agent-description-content a {
          color: rgba(255, 255, 255, 0.9);
            text-decoration: underline;
            font-weight: 300;
        }
    
        body.light .agent-description-content a {
          color: rgba(0, 0, 0, 0.9);
            text-decoration: underline;
            font-weight: 300;
        }

        .tahoa-builder-link {
          font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 300 !important;
            text-decoration: underline;
        }
    
        body.light .tahoa-builder-link {
            color: rgba(0, 0, 0,0.9);
            text-decoration: none;
            font-weight: underline;
        }

    @media (max-width: 1366px) {
        .tahoa-builder-link {
          font-size: 12px;
        }}

    @media (max-width: 768px) {
        .tahoa-builder-link {
          font-size: 14px;
        }}

.agent-specialization,
.agent-capabilities,
.agent-channels {
    display: block;
    align-items: center;
    gap: 15px;
    padding: 10px;
    margin-bottom: 15px;
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 8px;
    transition: all 0.2s ease;
}

body.dark .agent-specialization,
body.dark .agent-capabilities,
body.dark .agent-channels {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-specialization,
body.light .agent-capabilities,
body.light .agent-channels {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-channels {
    margin-bottom: 0px;
}

@media (max-width: 1366px) {
    .agent-specialization,
.agent-capabilities,
.agent-channels {
    gap: 10px;
    padding: 10px;
    margin-bottom: 10px;
}}

@media (max-width: 1366px) {
.agent-channels {
    margin-bottom: 0px;
}}

.agent-specialization p,
.agent-capabilities p,
.agent-channels p {
    margin-bottom: 10px;
    font-size: 15px;
}


@media (max-width: 1366px) {
    .agent-specialization p,
    .agent-capabilities p,
    .agent-channels p {
    font-size: 12px;
    margin-bottom: 6px;
}}

@media (max-width: 768px) {
    .agent-specialization p,
    .agent-capabilities p,
    .agent-channels p {
    font-size: 14px;
    margin-bottom: 6px;
}}

.agent-selected-specialization,
.agent-selected-capabilities,
.agent-selected-channels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}


@media (max-width: 1366px) {
    .agent-selected-specialization,
.agent-selected-capabilities,
.agent-selected-channels {
    gap: 7px;
        margin-top: 7px;
}}

@media (max-width: 768px) {
    .agent-selected-specialization,
.agent-selected-capabilities,
.agent-selected-channels {
    gap: 6px;
        margin-top: 6px;
}}

.agent-selected-specialization:hover,
.agent-selected-capabilities:hover,
.agent-selected-channels:hover {
    cursor:default;
}

.agent-selected-channels a {
    text-decoration: none;
}

.selected-specialization,
.selected-capabilities,
.selected-channels {
    display: inline-block;
    padding: 2px 15px 4px 15px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 300;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .selected-specialization,
body.dark .selected-capabilities,
body.dark .selected-channels {
    background: rgba(0, 0, 0, 1);
}

body.light .selected-specialization,
body.light .selected-capabilities,
body.light .selected-channels {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
    .selected-specialization,
.selected-capabilities,
.selected-channels {
    font-size: 11px;
    padding: 2px 5px 4px 5px;
        border-radius: 8px;
}}

@media (max-width: 768px) {
    .selected-specialization,
.selected-capabilities,
.selected-channels {
    font-size: 12px;
    padding: 3px 8px 5px 8px;
}}

.agent-pricing {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0px;
    background: transparent;
    border-radius: 0px;
    transition: all 0.2s ease;
}

body.dark .agent-pricing {
    background: rgba(0, 0, 0, 1);
}

    @media (max-width: 1366px) {
    .agent-pricing {
            gap: 4px;
    }}

    @media (max-width: 768px) {
    .agent-pricing {
            gap: 2px;
            padding-right: 3px;
    }}



.agent-pricing.tahoa-pricing {
    background: rgba(145, 75, 255,0.3);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 8px 10px 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    }

    @media (max-width: 1366px) {
        .agent-pricing.tahoa-pricing {
    padding: 6px 10px 3px 10px;
    }}

        @media (max-width: 768px) {
        .agent-pricing.tahoa-pricing {
    padding: 6px 8px 4px 8px;
    }}


.agent-pricing i {
    flex: 0 1;
    font-size: 20px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 0px;
    vertical-align: middle;
}

@media (max-width: 1366px) {
    .agent-pricing i {
        font-size: 15px;
    }}


    .agent-pricing.tahoa-pricing i {
        margin-right: 6px;
        vertical-align: middle;
        font-size: 16px;
        margin-top: -3px;
    }

    @media (max-width: 768px) {
    .agent-pricing.tahoa-pricing i {
        margin-right: 4px;
        vertical-align: middle;
        font-size: 16px;
        margin-top: -3px;
    }}


.agent-pricing-info {
    margin: 0;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.agent-pricing-info:hover {
    cursor: default;
}

@media (max-width: 1366px) {
    .agent-pricing-info {
        font-size: 11px;
        line-height: 15px;
        font-weight: 500;
    }}

    @media (max-width: 768px) {
    .agent-pricing-info {
        font-size: 11px;
        line-height: 15px;
    }}



.agent-pricing-info.tahoa-pricing {
    font-size: 13px;
    line-height: 16px;
    vertical-align: middle;
}

@media (max-width: 1366px) {
.agent-pricing-info.tahoa-pricing {
        font-size: 11px;
        line-height: 15px;
        font-weight: 500;
    }}
    
.agent-links {
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    padding: 0px;
    margin-top: 0px;
    border-radius: 0px;
    transition: all 0.2s ease;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;

}

@media (max-width: 1366px) {
    .agent-links {
    position: absolute;
    bottom: 7px;
    right: 7px;
    gap: 5px;
    }}


    @media (max-width: 768px) {
    .agent-links {
    position: absolute;
    bottom: 7px;
    right: 7px;
    gap: 5px;
    justify-content: flex-end;
        }}

.agent-links.hidden {
    display: none;
    background: none;
    padding: 0;
    margin: 0;
    border: none;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 10px !important;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .link-item {
        gap: 6px !important;
    }}

.link-item i {
    font-size: 16px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    width: auto;
    min-width: 36px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(145, 75, 255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 6px !important;
}

body.dark .link-item i {
    background: rgba(0, 0, 0, 1);
}

body.light .link-item i {
     background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .link-item i {
    font-size: 11px;
    height: 23px;
    min-height: 23px;
    max-height: 23px;
    width: auto;
    min-width: 25px;
    max-width: 100%;
    border-radius: 6px;
    }}

    @media (max-width: 768px) {
        .link-item i {
            font-size: 11px;
            width: 25px;
            height: 25px;
        }}

.link-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.join-pricing-links {
    display: flex; 
    justify-content: space-between; 
    gap: 15px;
}

@media (max-width: 1366px) {
    .join-pricing-links {
        gap: 12px;
    }}

    @media (max-width: 768px) {
        .join-pricing-links {
            gap: 10px;
        }}

.agent-pricing {
    flex: 1 1; 
}

.agent-links {
    flex: 1 1; 
}

.hidden {
    display: none; 
}

.agent-time {
    margin-top: 6px;
}

@media (max-width: 1366px) {
    .agent-time {
        margin-top: 3px;
    }}

.agent-time p{
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
font-weight: 500;
}

@media (max-width: 1366px) {
    .agent-time p {
        font-size: 11px;
    }}

.view-and-review-stats {
    background: none;
    border: none; 
    box-shadow: none; 
    padding: 0px;
    margin-top: 6px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    margin-left: auto;
    vertical-align: middle;
}

@media (max-width: 1366px) {
    .view-and-review-stats {
        padding: 0px;
    }}

    .view-and-review-stats i {
        font-size: 12px;
        margin-right: 3px;
        vertical-align: middle;
    }

.view-and-review-stats p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 300;
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 1366px) {
    .view-and-review-stats p {
    font-size: 11px;
}}








.agent-owner-alert {
  background: rgb(145, 75, 255, 0.6)!important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 12px 15px 12px 15px;
  margin-bottom: 0px;
  width: 100%;
  max-width: 100%;
  text-align: left;
    margin: 0 auto;
}

body.dark .agent-owner-alert {
  background: rgba(0, 0, 0, 1) !important;
}

@media (max-width: 768px) {
.agent-owner-alert  {
      text-align: center;
  padding: 13px 10px 10px 10px !important;
}}

.agent-owner-alert span {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
.agent-owner-alert span {
      font-size: 12px;
      line-height: 15px;
      width: 90%;
      max-width: 90%;
      font-style: italic;
}}

.status-pending i,
.status-pending-changes i,
.status-rejected i,
.status-suspended i,
.status-changes-rejected i {
  margin-right: 6px;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0.1;
  }
}

.status-archived i {
  margin-right: 6px;
  animation: none;
}

@media (max-width: 768px) {
.status-pending i,
.status-pending-changes i,
.status-rejected i,
.status-suspended i,
.status-changes-rejected i,
.status-archived i {
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}}


.similar-agents {
    width: 100%;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 12px;
    padding: 0px;
    padding-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    position: relative;
}

body.dark .similar-agents {
    background: rgba(0, 0, 0, 1);
}

body.light .similar-agents {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.similar-agents-title {
     font-size: 20px;
     color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 10px;
    left: 15px;
}

body.light .similar-agents-title {
     color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .similar-agents-title {
        font-size: 13px;
    }}
    
@media (max-width: 768px) {
    .similar-agents-title {
        font-size: 16px;
    }}



.similar-agents-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    gap: 15px;
    width: 100%;
    padding: 0 15px;
    margin-top: 55px;
}

.similar-agent-card {
    position: relative;
        background: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 0px;
    color: white;
    overflow: hidden;
}

    body.light .similar-agent-card {
      border: 1px solid rgba(0, 0, 0, 0.1); 
    }

  .similar-agent-card:hover {
        transform: scale(1.01);
      }
    
    .similar-agent-info-box {
        position: absolute;
        bottom: 5%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .similar-agent-info {
        position: relative;
            background: transparent;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        min-height: 250px;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
        width: 100%;
    }

      @media (max-width: 1366px) {
          .similar-agent-info {
              height: 160px;
              min-height: 160px;
              border-radius: 6px;
          }}

      .similar-agent-info:hover {
          cursor: pointer;
      }

body.dark .similar-agent-info {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.similar-agent-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
        background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.similar-agent-info:hover::before {
    background: rgba(145, 75, 255, 0.1);
}

body.dark .similar-agent-info:hover::before {
   background: rgba(255, 255, 255, 0.1);
}

body.light .similar-agent-info:hover::before {
  background: rgba(145, 75, 255, 0.1);
}

.similar-agent-name {
    color:  rgba(255, 255, 255, 1);
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 3px 3px #333,
    0 2px 4px rgba(0,0,0,0.6),
    0px 1px 2px rgba(0,0,0,0.6);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    width: 90%;
}

@media (max-width: 1366px) {
    .similar-agent-name {
        font-size: 12px;
}}

@media (max-width: 768px) {
    .similar-agent-name {
        font-size: 13px;
}}

.similar-agent-specialization {
    color:  rgba(255, 255, 255, 1);
    text-shadow: 
    0 1px 1px #111,
    0 2px 2px #111,
    0 3px 3px #111;
    font-size: 14px;
    line-height: 18px;
    font-weight: 300;
    text-align: center;
    width: 90%;
    font-style: normal;
}

@media (max-width: 1366px) {
    .similar-agent-specialization {
        font-size: 11px;
        line-height: 11px;
    }}


.similar-agent-stats {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  width: 100%;
}

    @media (max-width: 1366px) {
  .similar-agent-stats {
  bottom: 5%;
  gap: 4px;
  font-size: 8.5px;
}}

        @media (max-width: 768px) {
  .similar-agent-stats {
  bottom: 5%;
  gap: 4px;
  font-size: 9px;
    }}

.similar-agent-stats-item {
  background: rgba(145, 75, 255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 6px;
  border-radius: 4px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}

body.dark .similar-agent-stats-item {
  background: rgba(0, 0, 0, 0.7);
}

    @media (max-width: 1366px) {
  .similar-agent-stats-item {
  padding: 3px 6px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

    @media (max-width: 768px) {
  .similar-agent-stats-item {
  padding: 4px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

.similar-agent-stats-item i {
  margin-right: 4px
}


.similar-agent-info:hover .similar-agent-name,
.similar-agent-info:hover .similar-agent-specialization,
.similar-agent-info:hover .similar-agent-pricing {
    color: rgba(255, 255, 255, 1);
}

.agent-page-sidebar {
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    flex: 1 1;
}

@media (max-width: 1366px) {
    .agent-page-sidebar {
        padding: 15px;
    }}

body.dark .agent-page-sidebar {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-page-sidebar {
     background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.most-viewed-agent-title,
.latest-agent-title {
    font-size: 20px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 15px;
    text-align: center;
      display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1366px) {
.most-viewed-agent-title,
.latest-agent-title {
    margin-bottom: 15px;
    font-size: 15px !important;
}}


@media (max-width: 768px) {
    .most-viewed-agent-title,
.latest-agent-title {
    font-size: 16px !important;
    margin-bottom: 0px;
}}

body.dark .most-viewed-agent-title, 
body.dark .latest-agent-title {
    background: rgba(0, 0, 0, 1);
}



@media (max-width: 1366px) {
    .most-viewed-agent-title,
.latest-agent-title {
    font-size: 16px;
    padding: 8px 12px;
}}

@media (max-width: 768px) {
.most-viewed-agent-title {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 0px;
  }
}

.sidebar-agent-card {
    margin-bottom: 15px;
    display: block;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 0px;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    width: 100%;
}


    body.light .sidebar-agent-card {
      border: 1px solid rgba(0, 0, 0, 0.1) !important; 
    }

    .sidebar-agent-card:hover {
      transform: scale(1.01);
    }
  

@media (max-width: 768px) {
  .most-viewed-agents {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
      }

    .sidebar-agent-card {
    width: 100%;
    margin-bottom: 0px;
  }

  .sidebar-agent-info {
    width: 100%;
    height: 160px;
    min-height: 160px;
  }

    }

.sidebar-agent-info {
    height: 260px;
    min-height: 260px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%;
}

@media (max-width: 1366px) {
    .sidebar-agent-info {
        height: 160px;
        min-height: 160px;
    }}

.sidebar-agent-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

  .sidebar-agent-info:hover::before {
    background: rgba(145, 75, 255, 0.1);
    }

body.dark .sidebar-agent-info:hover::before {
       background: rgba(255, 255, 255, 0.1);
}

body.light .sidebar-agent-info:hover::before {
      background: rgba(145, 75, 255, 0.1);
}

.sidebar-agent-info-box {
      position: absolute;
      bottom: 5%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 3px;
      justify-content: center;
      align-items: center;
      width: 100%;
}

.sidebar-agent-name {
    color:  rgba(255, 255, 255, 1);
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 3px 3px #333,
    0 2px 4px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    width: 90%;
}

@media (max-width: 1366px) {
    .sidebar-agent-name {
        font-size: 12px;
}}

@media (max-width: 768px) {
    .sidebar-agent-name {
        font-size: 13px;
}}

.sidebar-agent-specialization {
    color:  rgba(255, 255, 255, 1);
    text-shadow: 
    0 1px 1px #111,
    0 2px 2px #111,
    0 3px 3px #111;
    font-size: 14px;
    line-height: 18px;
    font-weight: 300;
    text-align: center;
    width: 90%;
    font-style: normal;
}

@media (max-width: 1366px) {
    .sidebar-agent-specialization {
        font-size: 11px;
        line-height: 13px;
    }}


.trending-agent-stats {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  width: 100%;
}

    @media (max-width: 1366px) {
  .trending-agent-stats {
  bottom: 5%;
  gap: 4px;
  font-size: 8.5px;
}}

        @media (max-width: 768px) {
  .trending-agent-stats {
  bottom: 5%;
  gap: 4px;
  font-size: 9px;
    }}

.trending-agent-stats-item {
  background: rgba(145, 75, 255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 6px;
  border-radius: 4px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}

body.dark .trending-agent-stats-item {
  background: rgba(0, 0, 0, 0.7);
}

    @media (max-width: 1366px) {
  .trending-agent-stats-item {
  padding: 3px 6px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

    @media (max-width: 768px) {
  .trending-agent-stats-item {
  padding: 4px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

.trending-agent-stats-item i {
  margin-right: 4px
}


.sidebar-agent-info:hover .sidebar-agent-name,
.sidebar-agent-info:hover .sidebar-agent-specialization,
.sidebar-agent-info:hover .sidebar-agent-pricing {
    color: rgba(255, 255, 255, 1);
}

  
@media (max-width: 768px) {
  .agent-page {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 20px;
    padding-top: 0px;
  }

  .agent-page-layout {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 10px;
  }

  .agent-left-section {
    width: 100%;
    order: 1;
  }

  .agent-details-container {
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    gap: 10px;
  }

  .agent-image {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }

  .agent-info {
    width: 100%;
  }

  .similar-agents {
    width: 100%;
    margin: 0;
    order: 2;
  }

  .similar-agents-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 15px;
    gap: 10px;
  }

  .agent-page-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
    margin: 0 auto;
    position: static;
    order: 3;
  }

}


.agent-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 0px;
    padding: 0px;
    margin-top: 0px;
  }

  .agent-main-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
   flex: 1 1;
   max-width: 50%;
  }

     @media (max-width: 1366px) {
  .agent-main-container {
  gap: 8px;
  }}

     @media (max-width: 768px) {
  .agent-main-container {
  max-width: 100%;
  }}

.try-and-ask-box {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

  .agent-start-button,
  .agent-message-button {
  background: rgba(145, 75, 255,0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  }
  

    body.dark .agent-start-button,
    body.dark .agent-message-button {
    background: rgb(0, 0, 0, 1);
}

    body.light .agent-start-button,
    body.light .agent-message-button {
      background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-start-button.interaction-disabled,
.agent-message-button.interaction-disabled {
      opacity: 0.6;
      cursor: not-allowed;
}


      @media (max-width: 1366px) {
  .agent-start-button,
  .agent-message-button {
    border-radius: 6px;
    padding: 6px ;
    font-size: 11px;
    }}


  @media (max-width: 768px) {
  .agent-start-button,
  .agent-message-button {
    border-radius: 6px;
    padding: 6px;
    font-size: 13px;
    }}


.interaction-disabled-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  z-index: 9999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.interaction-disabled-modal {
background: #7375e1;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 30%;
  max-width: 30%;
  white-space: pre-line !important;
}

body.dark .interaction-disabled-modal {
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2); 
}


@media (max-width: 768px) {
.interaction-disabled-modal {
    width: 95%;
      max-width: 90%;
        padding: 20px;
        height: auto;
        min-height: auto;
  }}

.interaction-disabled-modal h3 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.interaction-disabled-modal h3 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.interaction-disabled-modal h3 {
  font-size: 18px;
  margin-bottom: 10px;
  }}

.interaction-disabled-modal p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
    text-align: center;
}

@media (max-width: 1366px) {
.interaction-disabled-modal p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.interaction-disabled-modal p {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 6px;
  }}

.interaction-disabled-modal-actions .ok-button {
    background: #7375e1; 
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    padding: 10px 25px;
    width: auto;
    min-width: 86px;
    max-width: 86px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 300;
    transition: all 0.2s ease;
    margin-top: 10px;
}


.agent-actions-container {
  display: flex;
    align-items: flex-end;
    align-self: flex-end;
    align-content: flex-end;
  width: 100%; 
  margin-top: 12px;
  }

  @media (max-width: 1366px) {
.agent-actions-container {
      margin-top: 10px;
  }}

  .agent-actions-box {
  display: flex;
    align-items: center;
  width: 100%; 
  gap: 10px;
  }

  .agent-actions-box button {
  background: rgba(145, 75, 255,0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 14px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  height: 40px;
  }

  body.dark .agent-actions-box button {
    background: rgb(0, 0, 0, 1);
  }

    body.light .agent-actions-box button {
      background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .agent-actions-box button {
  padding: 3px 10px;
  font-size: 12px;
    }}

      @media (max-width: 768px) {
    .agent-actions-box button {
      padding: 2px 6px;
      height: 33px;
  font-size: 13px;
    }}


  .agent-watchlist-button,
  .agent-compare-button,
  .agent-share-button,
  .agent-report-button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .agent-watchlist-button i,
  .agent-compare-button i,
  .agent-share-button i,
  .agent-report-button i {
    margin-right: 3px;
    vertical-align: middle;
    margin-top: 2px;
  }

  body.light .agent-watchlist-button i,
  body.light .agent-compare-button i,
  body.light .agent-share-button i,
  body.light .agent-report-button i {
    color: rgba(0, 0, 0, 0.9);
  }

  .agent-watchlist-button.active i {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
  }

  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.2);
    }
    50% {
      transform: scale(0.9);
    }
    75% {
      transform: scale(1.3);
    }
    
  }
  
  .heartbeat-anim {
    animation: heartbeat 0.6infinite;
  }

  .agent-watchlist-button .watchlist-count {
    font-size: 12px;
    line-height: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    top: 0px;
    margin-left: 3px;
  }

  body.light .agent-watchlist-button .watchlist-count {
    color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .agent-watchlist-button .watchlist-count {
      font-size: 10px;
      line-height: 10px;
      font-weight: 300;
    }}

  @media (max-width: 768px) {
  .agent-watchlist-button .watchlist-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 300;
  }}

  .agent-watchlist-message {
    background: rgba(145,75,255,0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 15px;
    margin-bottom: -10px;
    border-radius: 6px;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 300;
}

body.dark .agent-watchlist-message {
    background: rgba(0,0,0,1);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

body.light .agent-watchlist-message {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

@media (max-width: 1366px) {
    .agent-watchlist-message {
        padding: 10px;
    }}

@media (max-width: 768px) {
    .agent-watchlist-message {
    font-size: 12px;
    margin-bottom: -5px;
}}


.agent-watchlist-action-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    z-index: 999999999 !important;
}

.agent-watchlist-action-confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #8063ef;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 999999; 
    min-width: 25%;
    max-width: 25%;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  overflow-y: auto;
}

  body.dark .agent-watchlist-action-confirm-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

    body.light .agent-watchlist-action-confirm-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.4)
  }

  @media (max-width: 1366px) {
    .agent-watchlist-action-confirm-modal {
    padding: 20px 20px;
    }}

  @media (max-width: 768px) {
    .agent-watchlist-action-confirm-modal {
    min-width: 90%;
    max-width: 90%;
    }}

  .agent-watchlist-action-confirm-content {
        width: 100%;
    margin: 0 auto;
        vertical-align: middle;
  }

.agent-watchlist-action-confirm-modal h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-watchlist-action-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-watchlist-action-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}



.agent-watchlist-action-confirm-modal p {
  font-size: 14px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-watchlist-action-confirm-modal p {
  font-size: 11px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-watchlist-action-confirm-modal p {
  font-size: 12px;
  margin-bottom: 6px;
  }}


.agent-watchlist-action-confirm-button-box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.agent-watchlist-action-confirm-button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 7px 15px;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 90px;
  max-width: auto;
}

@media (max-width: 1366px) {
.agent-watchlist-action-confirm-button {
      padding: 6px 10px;
  font-size: 11px;
}}

@media (max-width: 768px) {
.agent-watchlist-action-confirm-button {
      padding: 6px 10px;
  font-size: 12px;
}}


body.dark .agent-watchlist-action-confirm-button {
  background: rgb(0, 0, 0, 1);
}


body.light .agent-watchlist-action-confirm-button {
    background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

.agent-message-alert {
    background: rgba(145,75,255,0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 15px;
    margin-bottom: -10px;
    border-radius: 8px;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 300;
}

body.dark .agent-message-alert {
    background: rgba(0,0,0,1);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

body.light .agent-message-alert {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

@media (max-width: 1366px) {
    .agent-message-alert {
        padding: 10px;
    }}

@media (max-width: 768px) {
    .agent-message-alert {
    font-size: 12px;
    margin-bottom: -5px;
}}



.agent-report-message  {
    background: rgba(145,75,255,0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 15px;
    margin-bottom: -10px;
    border-radius: 8px;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 300;
}

body.dark .agent-report-message {
    background: rgba(0,0,0,1);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

body.light .agent-report-message {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(220,50,70,1);
  color: rgba(220,50,70,1);
}

@media (max-width: 1366px) {
    .agent-report-message {
        padding: 10px;
    }}

@media (max-width: 768px) {
    .agent-report-message {
    font-size: 12px;
    margin-bottom: -5px;
}}


.agent-message-message  {
    background: rgba(145, 75, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    padding: 15px;
    margin-bottom: 0px;
    border-radius: 8px;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 300;
}

@media (max-width: 1366px) {
    .agent-message-message {
        padding: 10px;
    }}

@media (max-width: 768px) {
    .agent-message-message {
    font-size: 12px;
}}

.agent-copied-tooltip {
        position: absolute !important;
        top: 90%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        color: rgba(0, 0, 0, 0.7);
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        animation: fadeInOut 2s ease;
    }

      @media (max-width: 1366px) {
        .agent-copied-tooltip {
        position: absolute !important;
        top: -25px !important;
        font-size: 10px;
        border-radius: 3px;
        padding: 3px 6px;
        }}
    
              @media (max-width: 768px) {
        .agent-copied-tooltip {
        position: absolute !important;
                top: 100%;
        left: 50%;
        font-size: 12px;
        border-radius: 3px;
        padding: 3px 6px;
        }}
    

    @keyframes fadeInOut {
        0% { opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }
    


.similar-agent-interaction-status {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(6, 186, 126);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

    @media (max-width: 1366px) {
      .similar-agent-interaction-status {
  bottom: 35px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

    @media (max-width: 768px) {
      .similar-agent-interaction-status  {
  bottom: 40px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

      .trending-agent-interaction-status {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(6, 186, 126);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

    @media (max-width: 1366px) {
      .trending-agent-interaction-status {
  bottom: 35px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

    @media (max-width: 768px) {
      .trending-agent-interaction-status  {
  bottom: 40px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}


.starting-interaction::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}



body:has(.agent-edit-modal-overlay) .user-header,
body:has(.agent-edit-modal-overlay) .admin-header,
body:has(.agent-edit-modal-overlay) .main-footer,
body:has(.agent-edit-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-edit-modal-overlay) .global-footer,
body:has(.agent-edit-modal-overlay) .ask-treo,
body:has(.agent-edit-modal-overlay) .agent-interaction-dock-button,
body:has(.agent-edit-modal-overlay) .float-chat-button {
  display: none;
}

.agent-edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
}

body.dark .agent-edit-modal-overlay {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}


.agent-edit-modal-content {
  background: linear-gradient(100deg, #9945FF, #14F195);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
    width: 36%;
    max-width: 36%;
    height: auto;
    max-height: 95vh;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
}

body.dark .agent-edit-modal-content {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .agent-edit-modal-content {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-edit-modal-content {
        padding: 10px 15px 10px 15px;
        padding-bottom: 30px !important;
    }}

    @media (max-width: 768px) {
        .agent-edit-modal-content {
            width: 95%;
            max-width: 95%;
            padding: 10px 10px 10px 10px;
            max-height: 95vh;
        }}

.agent-edit-modal-content::-webkit-scrollbar {
    display: none !important;
}

.agent-edit-modal-content::-webkit-scrollbar-track {
    display: none !important;
}

.agent-edit-modal-content::-webkit-scrollbar-thumb {
    display: none !important;
}

.edit-agent-title{
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 26px;
  text-align: center;
  margin-bottom: 8px;
}

body.light .edit-agent-title{
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .edit-agent-title{
    font-size: 22px;
    margin-bottom: 4px;
  }}

body.dark .edit-agent-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

.edit-agent-desc {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  text-shadow: none;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  font-style: normal;
  display: none;
}

@media (max-width: 1366px) {
.edit-agent-desc {
font-size: 11px;
line-height: 13px;
width: 100%;
margin-bottom: 10px;
}}

@media (max-width: 768px) {
.edit-agent-desc {
font-size: 11.5px;
line-height: 13px;
width: 100%;
margin-bottom: 20px;
}}

.edit-agent-desc i {
  font-size: 18px;
  color: rgba(240, 255, 0, 0.9);
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
}

@media (max-width: 1366px) {
.edit-agent-desc i {
  font-size: 16px;
  margin-bottom: 3px;
}}

@media (max-width: 768px) {
.edit-agent-desc i {
  font-size: 16px;
  margin-bottom: 3px;
}}

  .agent-edit-desc-note {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
    font-size: 12px;
    font-weight: 400;
    margin-left: 5px;
    font-style: italic;
    margin-top: -7px;
    margin-bottom: 10px;
}

body.dark .agent-edit-desc-note {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 300;
}

body.light .agent-edit-desc-note {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
    font-weight: 300;
}

@media (max-width: 1366px) {
    .agent-edit-desc-note {
    font-size: 10px;
    margin-right: 5px;
    font-style: italic;
        margin-top: 0px;
    margin-bottom: 5px;
  }}

  @media (max-width: 768px) {
    .agent-edit-desc-note {
    font-size: 11px;
    margin-right: 5px;
    font-style: italic;
            margin-top: 0px;
    margin-bottom: 5px;
  }}


.agent-edit-optional {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
    line-height: 15px;
  margin-left: 3px;
  vertical-align: middle;
  font-weight: 300;
}

@media (max-width: 1366px) {
  .agent-edit-optional {
    font-size: 10px;
    line-height: 13px;
  }}

  @media (max-width: 768px) {
    .agent-edit-optional {
      font-size: 10px !important;
      line-height: 10px !important;
    }}

body.dark .agent-edit-optional {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}


body.light .agent-edit-optional {
  color: rgba(0, 0, 0, 0.9);
}

.agent-edit-modal-content label {
    display: inline-block;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 3px;
}

@media (max-width: 1366px) {
    .agent-edit-modal-content label {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 2px;
    }}

    @media (max-width: 768px) {
    .agent-edit-modal-content label {
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 3px;
    }}

body.dark .agent-edit-modal-content label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}

body.light .agent-edit-modal-content label {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 300;
}

.agent-edit-character-counter {
    font-size: 11px;
    color: #fff;
    display: block;
    text-align: right;
    margin-right: 3px;
    margin-top: 9px;
    float: right;
}

@media (max-width: 1366px) {
    .agent-edit-character-counter {
        font-size: 9px;
        line-height: 11px;
        margin-top: 6px;
    }}

    @media (max-width: 768px) {
    .agent-edit-character-counter {
        font-size: 9px;
        line-height: 11px;
        margin-top: 10px;
    }}

body.dark .agent-edit-character-counter {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-edit-character-counter {
    color: rgba(0, 0, 0, 0.9);
}

.agent-edit-character-counter.warning i {
color: rgba(240, 255, 0, 1);
text-shadow: none;
margin-left: 3px;
  }

.agent-edit-required {
    color: rgb(221, 17, 17, 1);
    text-shadow: none;
    font-size: 15px;
    line-height: 15px;
    margin-left: 2px;
}

.agent-edit-image-label-and-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.agent-edit-image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0px;
}

@media (max-width: 1366px) {
    .agent-edit-image-container {
          gap: 5px;
            margin-bottom: -10px;
    }}

    @media (max-width: 768px) {
    .agent-edit-image-container {
          gap: 5px;
            margin-bottom: -10px;
    }}

.agent-edit-image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 200px;
  max-width: 200px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  z-index: 0;
}

@media (max-width: 1366px) {
.agent-edit-image-item {
  flex: 1 1 150px;
  max-width: 150px;
    }}

    @media (max-width: 768px) {
.agent-edit-image-item {
  flex: 1 1 200px;
  max-width: 200px;
    }}

.agent-edit-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  z-index: 0;
  
}

.agent-edit-image-box:not(:has(img)) {
  border: 2px dashed rgba(255, 255, 255, 0.2);
}

body.light .agent-edit-image-box:not(:has(img)) {
  border: 2px dashed rgba(0, 0, 0, 0.2);
}

.agent-edit-image-box:has(img) {
  border: none;
}

.agent-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-preview-image {
    border: 2px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
    .agent-preview-image {
        width: 200px;
        height: 200px;
    }}

@media (max-width: 768px) {
    .agent-preview-image {
        width: 250px;
        height: 250px;
          border-radius: 3px;
    }}

.agent-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-edit-image-placeholder {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 32px;
  font-weight: 500;
  cursor: pointer;
  display: none;
  z-index: 1;
}

.agent-image-overlay {
  position: absolute;
  pointer-events: auto;
  inset: 0;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  bottom: 0px;
  vertical-align: middle;
  z-index: 99999;
}

@media (max-width: 1366px) {
.agent-image-overlay {
  gap: 10px;
    bottom: 6px;
}}

@media (max-width: 768px) {
.agent-image-overlay {
  gap: 10px;
}}

.agent-image-overlay .icon-button {
  pointer-events: auto;
  z-index: 999999 !important;
    border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-image-overlay .icon-button {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.agent-edit-image-box.has-image .agent-image-overlay .icon-button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  z-index: 999;
}

.custom-change-agent-image, .agent-edit-image-actions, .edit-preset-image-button {
  display: none !important;
}


@media (max-width: 1366px) {
.agent-image-overlay .icon-button {
  font-size: 12px;
  padding: 8px 12px;
}}


@media (max-width: 768px) {
.agent-image-overlay .icon-button {
  font-size: 22px;
  padding: 8px 12px;
}}

.change-agent-image {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-top: 6px;
    z-index: 1;
      cursor: pointer;
}

.original-change-agent-image {
   display: none;
}

.custom-change-agent-image {
    display: block;
    padding: 4px;
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px !important;
    font-weight: 500;
    text-align: center !important;
    margin-top: 0px !important;
    width: 100%;
    box-sizing: border-box;
}


body.dark .custom-change-agent-image {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.light .custom-change-agent-image {
    background: rgba(255, 255, 255, 1);
    color: rgb0a(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .custom-change-agent-image {
            padding: 6px;
            margin-top: 4px !important;
    font-size: 11px !important;
    }}

    @media (max-width: 768px) {
    .custom-change-agent-image {
            padding: 3px;
            margin-top: 2px !important;
    font-size: 9px !important;
        border-radius: 3px;
    }}

    .agent-edit-remove-image-button {
  position: absolute;
  top: 7px;
  right: 7px;
  background-color: rgba(220, 50, 70, 0.7);
  color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    padding: 3px 2px 3px 1px;
  border-radius: 50%;
  font-size: 9px;
  cursor: pointer;
  z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}


body.dark .agent-edit-remove-image-button {
  background-color: rgba(220, 50, 70, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

body.light .agent-edit-remove-image-button {
  background-color: rgba(220, 50, 70, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .agent-edit-remove-image-button {
          width: 14px;
  height: 14px;
  font-size: 11px;
    }}
    
    @media (max-width: 768px) {
    .agent-edit-remove-image-button {
  width: 18px;
  height: 18px;
  font-size: 8px;
  padding: 2px 2px 3px 1px;
    }}
    


.agent-edit-image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0px;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1366px) {
  .agent-edit-image-wrapper {
    margin-top: 10px;
  margin-bottom: 10px;
}}

.agent-edit-image-rules {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 7px;
  text-align: center;
  font-style: italic;
  display: none;
}

@media (max-width: 1366px) {
    .agent-edit-image-rules {
        gap: 0px;
      font-size: 10px;
       margin-top: 7px;
    }}

    @media (max-width: 768px) {
        .agent-edit-image-rules {
        font-size: 10px;
        }}

body.dark .agent-edit-image-rules {
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-edit-image-rules {
    color: rgba(0, 0, 0, 0.9);
}

.agent-edit-image-rules-symbol {
    color: rgba(220, 50, 70, 1);
   margin-right: 2px;
}

.agent-edit-image-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}


.edit-preset-image-button {
  margin-top: 3px;
  margin-bottom: 0px;
  background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none; ;
padding: 4px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-left: 3px;
}

body.dark .edit-preset-image-button {
    background: rgba(0,0,0,0.3);
      color: rgba(255, 255, 255, 0.9);
}

body.light .edit-preset-image-button {
    background: rgba(255, 255, 255, 1);
      color: rgba(0, 0, 0, 0.9);
}

.edit-preset-image-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1366px) {
   .edit-preset-image-button {
  font-size: 11px;
    margin-top: 3px;
   }}


@media (max-width: 768px) {
   .edit-preset-image-button {
  font-size: 9px;
      margin-top: 3px;
   }}

.agent-edit-name-note {
position: relative;
display: block;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
font-size: 12px;
font-weight: 400;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 0px;
text-align: right;
font-style: italic;
float: right;
margin-right: 5px;
}

@media (max-width: 1366px) {
    .agent-edit-name-note {
        font-size: 9px;
        margin-top: 4px;
    }}

    @media (max-width: 768px) {
    .agent-edit-name-note {
        font-size: 11px;
        margin-right: 5px;
    }}

body.dark .agent-edit-name-note {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}


body.light .agent-edit-name-note {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
    font-weight: 300;
}

.agent-edit-name-note-simbol {
    color: rgba(220, 50, 70, 1);
}


.agent-edit-input-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 10px;
    margin-bottom: 0px;
}

@media (max-width: 1366px) {
    .agent-edit-input-container {
        font-size: 11px;
    }}

    @media (max-width: 768px) {
        .agent-edit-input-container {
              display: flex;
    flex-direction: column;
            gap: 8px;
        }}

.agent-edit-input-group {
    flex: 1 1;
    width: 100%;
    overflow-x: hidden;
}

.agent-edit-input-group input:focus {
  transform: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agent-edit-single-select:focus {
  transform: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}


.agent-edit-input-group input,
.agent-edit-input-group textarea {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.7);
    width: 100%;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .agent-edit-input-group input {
        font-size: 12px !important;
            line-height: 18px;
        padding: 5px !important;
    }}

    @media (max-width: 768px) {
        .agent-edit-input-group textarea {
            font-size: 13px !important;
            line-height: 19px;
            padding: 5px !important;
        }}

body.dark .agent-edit-input-group input,
body.dark .agent-edit-input-group textarea {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.7);
}

body.light .agent-edit-input-group input,
body.light .agent-edit-input-group textarea {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}


.agent-edit-input-group input {
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    margin-bottom: 0px;
}

@media (max-width: 1366px) {
    .agent-edit-input-group input {
    height: 25px; 
    min-height: 25px; 
    max-height: 25px; 
    margin-bottom: 0px;
    font-size: 11px;
  }}

  @media (max-width: 768px) {
    .agent-edit-input-group input {
    height: 33px; 
    min-height: 33px; 
    max-height: 33px; 
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 14px;
  }}

.agent-edit-url-preview {
    background: rgba(255, 255, 255, 1);
    cursor: default !important;
    color: rgba(0, 0, 0, 0.6) !important;
    cursor: not-allowed;
}

body.dark .agent-edit-url-preview {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.5) ;
}

body.light .agent-edit-url-preview {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9) ;
}

@media (max-width: 1366px) {
    .agent-edit-url-preview {
        margin-top: 4px;
    }}

.agent-edit-url-preview:hover {
    cursor: not-allowed;
}

.agent-edit-input-group input[type="text"] {
  width: 100%;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  padding: 2px 6px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 5px; 
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
}

body.dark .agent-edit-input-group input[type="text"] {
  color: rgba(0, 0, 0, 0.7);
}

body.light .agent-edit-input-group input[type="text"] {
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
    .agent-edit-input-group input[type="text"] {
font-size: 12px;
  }}

@media (max-width: 768px) {
    .agent-edit-input-group input[type="text"] {
    padding: 0px 8px !important;
    font-size: 14px !important;
  }}

  .agent-edit-input-group input[type="text"]::placeholder {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.3);
    opacity: 1;
}


@media (max-width: 1366px) {
    .agent-edit-input-group input[type="text"]::placeholder {
    font-size: 11px;
  }}

@media (max-width: 768px) {
    .agent-edit-input-group input[type="text"]::placeholder {
    font-size: 12px;
  }}


.agent-edit-input-group textarea {
    resize: vertical; 
  width: 100%;
  max-width: 100%;
  height: 150px; 
  min-height: 150px; 
  max-height: 250px; 
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1366px) {
    .agent-edit-input-group textarea {
        height: 100px; 
        min-height: 100px; 
        max-height: 200px; 
        margin-bottom: 0px;
        font-size: 11px;
    }}

@media (max-width: 768px) {
    .agent-edit-input-group textarea {
        height: 150px; 
        min-height: 150px; 
        max-height: 250px; 
        margin-bottom: 0px;
        font-size: 13px;
    }}

.agent-edit-input-group textarea:focus {
        transform: none;
        outline: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }


.agent-edit-input-group textarea::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

.agent-edit-input-group textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

body.dark .agent-edit-input-group textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.agent-edit-url-box {
  display: flex;
  justify-content: space-between;
}

.agent-edit-multiple-checkbox-button {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.7);
    padding: 0px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    margin-top: 2px;
    margin-bottom: 0px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .agent-edit-multiple-checkbox-button {
   background: rgba(255, 255, 255, 1);
   color: rgba(0, 0, 0, 0.9);
}

body.light .agent-edit-multiple-checkbox-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-edit-multiple-checkbox-button {
    height: 25px;
    min-height: 25px;
    max-height: 25px; 
    margin-bottom: 0px;
    font-size: 12px; 
    }}

    @media (max-width: 1366px) {
    .agent-edit-multiple-checkbox-button {
    height: 30px;
    min-height: 30px;
    max-height: 30px; 
    margin-bottom: 0px;
    font-size: 13px; 
    }}

     @media (max-width: 768px) {
    .agent-edit-input-group.website {
      order: 1;
    }
  .agent-edit-input-group.specialization {
      order: 2;
    }
  }


.agent-edit-multiple-checkbox-dropdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px;
  gap: 0px;
  grid-row-gap: 10px;
  row-gap: 10px;
    width: 100%;
    padding: 10px;
    z-index: 999;
    margin-top: 10px;
}

 @media (max-width: 768px) {
.agent-edit-multiple-checkbox-dropdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}}

.agent-edit-multiple-checkbox-dropdown-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0px;
    margin: 0;
    margin-top: 10px;
    background: transparent;
    padding: 0px;
    z-index: 999;
    overflow-x: hidden;
}

.agent-edit-multiple-checkbox-dropdown-options {
    display: flex;
    gap: 3px;
    row-gap: 5px;
    -webkit-user-select: none;
            user-select: none;
}

.agent-edit-multiple-checkbox-dropdown-options-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    z-index: 999;
    -webkit-user-select: none;
            user-select: none;
    margin-bottom: -13px;
}

.agent-edit-multiple-checkbox-dropdown-options-2:last-child {
    margin-bottom: 0px;
  }

.agent-edit-multiple-checkbox-dropdown-options > label {
    margin: 0;
    margin-top: 0px;
    margin-left: 0px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 300;
    pointer-events: none;
}

 @media (max-width: 768px) {
.agent-edit-multiple-checkbox-dropdown-options > label {
      font-size: 12px;
}}

.agent-edit-multiple-checkbox-dropdown-options-2 label {
    display: flex;
    align-items: center;
    gap: 0px;
    margin: 0;
    margin-top: -31.5px;
    margin-left: 0px;
    padding-left: 22px;
    font-size: 15px;
    color: #fff;
    text-shadow: none;
    position: absolute;
    font-weight: 300;
    width: 100%;
    pointer-events: none;
    width: calc(100% - 22px);
}

.agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
  margin: 0; 
  padding: 0; 
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important; 
  min-height: 12px !important;
  flex-shrink: 0; 
  display: inline-block;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  cursor: pointer;
  margin-top: 1px;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

body.dark .agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"] {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"]:checked {
  background-color: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
body.dark .agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

body.light .agent-edit-multiple-checkbox-dropdown-options input[type="checkbox"]:checked {
  background-color: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }




.agent-edit-multiple-checkbox-dropdown-options-2 input[type="checkbox"] {
    margin: 0;
    margin-left: 0px;
    margin-bottom: 0px;
    width: auto;
    cursor: pointer;
    pointer-events: none;
    border: none !important;
    box-shadow: none !important;
}

.agent-edit-multiple-checkbox-dropdown-options:last-child input[type="checkbox"] {
    margin-bottom: -5px;
  }
  
  .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: -13px;
    margin-bottom: 20px;
    margin-left: 17px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  
  .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options div {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: -10px;
    -webkit-user-select: none;
            user-select: none;
  }
  
  .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options input[type="checkbox"] {
    margin: 0;
    width: auto;
    margin-left: 5px;
    margin-top: 2px;
    pointer-events: none;
  }
  
  .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options-head {
    margin-top: -31px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
  }

  @media (max-width: 1366px) {
    .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options-head {
      font-size: 11px;
      margin-top: -26px;
      margin-left: 6px;
    }}
  
  .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options label {
    margin: 0;
    margin-top: 3px;
    color: #fff;
    text-shadow: none;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
  }
  
  @media (max-width: 1366px) {
    .agent-edit-multiple-checkbox-dropdown-2 .agent-edit-sub-options label {
      font-size: 11px;
    }}

.agent-edit-single-select {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 7px 5px 9px 5px;
    width: 100%;
    margin-top: 0px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
}

body.dark .agent-edit-single-select {
    background: rgb(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-edit-single-select {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-edit-single-select {
      height: 25px;
      min-height: 25px;
      max-height: 25px; 
      font-size: 11px;
      padding: 2px;
    }}

    @media (max-width: 768px) {
    .agent-edit-single-select {
margin-top: -4px;
    }}

    .agent-edit-single-select-title {
margin-bottom: 5px !important;
    }

        @media (max-width: 768px) {
    .agent-edit-single-select-title {
margin-bottom: 7px !important;
    }}

    .agent-edit-single-select-options {
        background: #fff;
        color: rgba(0, 0, 0, 0.7); 
        font-size: 13.5px;
        font-weight: 500;
        margin-top: 10px;
      }
    
      @media (max-width: 1366px) {
        .agent-edit-single-select-options {
          font-size: 11px;
          font-weight: 500;
        }}

        @media (max-width: 768px) {
            .agent-edit-single-select-options {
              font-size: 11px !important;
              font-weight: 500 !important;
            }}

.agent-edit-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

@media (max-width: 1366px) {
    .agent-edit-close-button {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
    .agent-edit-close-button {
      font-size: 13px;
    }}

body.dark .agent-edit-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-edit-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

.agent-edit-submit-button {
    position: relative;
    display: block;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    transition: all 0.3s ease;
}

@media (max-width: 1366px) {
    .agent-edit-submit-button {
        font-size: 13px;
        padding: 7px 15px;
        margin-bottom: 0px;
    }}

@media (max-width: 768px) {
    .agent-edit-submit-button {
        font-size: 13px;
        padding: 7px 15px;
        margin-bottom: 0px;
    }}

body.dark .agent-edit-submit-button {
    background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
}

body.light .agent-edit-submit-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

.agent-edit-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.agent-edit-submit-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.agent-edit-error-message-back {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 35%;
    background:  #7375e1; 
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 20px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

body.dark .agent-edit-error-message-back {
  background: rgba(0, 0, 0, 1);
}


body.light .agent-edit-error-message-back {
background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width:768px) {
    .agent-edit-error-message-back {
        min-width: 90%;
        max-width: 90%;
    }}

.agent-edit-error-message-text {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.9);
    text-align: center !important;
    margin: 0 !important;
}

body.light .agent-edit-error-message-text {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-edit-error-message-text {
        font-size: 12px !important;
    }}

.agent-edit-form-submited-back {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 25%;
    background: #7375e1; 
    padding: 20px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .agent-edit-form-submited-back {
      background: rgb(0, 0, 0, 1);
}

body.light .agent-edit-form-submited-back {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width:768px) {
    .agent-edit-form-submited-back {
        min-width: 90%;
        max-width: 90%;
    }}

.agent-edit-form-submited-text {
    font-size: 18px !important;
    line-height: 20px !important;
    color: rgba(255, 255, 255, 0.9);
    text-align: center !important;
    margin: 0 !important;
    font-weight: 300;
}


body.light .agent-edit-form-submited-text {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .agent-edit-form-submited-text {
      font-size: 12px !important;
    }}



.agent-edit-message-ok-button {
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0px;
}

body.dark .agent-edit-message-ok-button {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-edit-message-ok-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}


@media (max-width: 1366px) {
    .agent-edit-message-ok-button {
      font-size: 12px !important;
    }}

.agent-edit-confirm-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 35%;
    background:  transparent;
    border: 0px solid rgba(255, 255, 255, 0.2);
    padding: 15px 20px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
.agent-edit-confirm-dialog {
      min-width: 90%;
    max-width: 90%;
}}

.agent-edit-confirm-content {
    background: #7375e1;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .agent-edit-confirm-content {
    background:  rgb(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-edit-confirm-content {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

.agent-edit-confirm-content p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.dark .agent-edit-confirm-content p {
    color:  rgba(255, 255, 255, 0.8);
}

body.light .agent-edit-confirm-content p {
    color:  rgba(0, 0, 0, 0.9);
}

.agent-edit-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.agent-edit-confirm-button {
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agent-edit-confirm-button.discard,
.agent-edit-confirm-button.keep {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .agent-edit-confirm-button.discard,
body.dark .agent-edit-confirm-button.keep {
    background:  rgb(0, 0, 0, 1);
}

body.light .agent-edit-confirm-button.discard,
body.light .agent-edit-confirm-button.keep {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}










body:has(.preset-modal-overlay) .user-header,
body:has(.preset-modal-overlay) .admin-header,
body:has(.preset-modal-overlay) .main-footer,
body:has(.preset-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.preset-modal-overlay) .global-footer,
body:has(.preset-modal-overlay) .ask-treo,
body:has(.preset-modal-overlay) .agent-interaction-dock-button,
body:has(.preset-modal-overlay) .float-chat-button {
  display: none;
}


.preset-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .preset-modal-overlay {
  background: rgba(0, 0, 0, 0.1);
}


.preset-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 15px 20px 20px 20px;
  width: 75%;
  max-width: 75%;
  min-height: 95vh;
  max-height: 95vh;
  overflow-y: auto;
  z-index: 99999;
  position: relative;
}

body.dark .preset-modal {
  background: rgb(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .preset-modal {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .preset-modal {
  max-width: 85%;
  }}


@media (max-width: 768px) {
  .preset-modal {
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    width: 95%;
    max-width: 95%;
    min-height: 95vh;
    max-height: 95vh;
  }
}

.preset-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

 @media (max-width: 768px) {
    .preset-modal-header {
          margin-bottom: 10px;
    }}

.builder-preset-title {
  font-size: 26px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-align: center;
  margin: 0 auto;
}

body.light .builder-preset-title {
  color: rgba(0, 0, 0, 0.9);
}

 @media (max-width: 1366px) {
    .builder-preset-title {
  font-size: 20px;
    }}


 @media (max-width: 768px) {
    .builder-preset-title {
      margin-top: 10px;
  font-size: 22px;
    }}

.builder-preset-desc {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-align: center;
  margin: 0 auto;
  margin-top: 5px;
}

body.light .builder-preset-desc {
  color: rgba(0, 0, 0, 0.9);
}

 @media (max-width: 1366px) {
    .builder-preset-desc {
  font-size: 12px;
    }}


 @media (max-width: 768px) {
    .builder-preset-desc {
  font-size: 14px;
  line-height: 16px;
  width: 90%;
    }}


.builder-preset-desc-merge-mode {
background: transparent;
  font-size: 14px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.9);
  padding: 0px;
  text-shadow: none;
  width: 66%;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  font-style: normal;
}

body.dark .builder-preset-desc-merge-mode {
  background: rgba(0,0,0,0.1);
}

body.light .builder-preset-desc-merge-mode {
  background: rgba(255,255,255,1);
}

 @media (max-width: 1366px) {
    .builder-preset-desc-merge-mode  {
font-size: 11.5px;
line-height: 14px;
    }}


 @media (max-width: 768px) {
    .builder-preset-desc-merge-mode  {
font-size: 11.5px;
line-height: 14px;
  width: 100%;
    }}


.builder-preset-desc-merge-mode i {
  font-size: 20px;
  color: rgba(240, 255, 0, 0.9);
  display: block;
  margin-bottom: 5px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 5px;
}

body.light .builder-preset-desc-merge-mode i {
  color: rgba(220, 50, 70, 1);
}

.preset-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .preset-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .preset-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .preset-close-button {
      font-size: 11px;
  }
}

@media (max-width: 768px) {
  .preset-close-button {
      font-size: 13px;
  }
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 1366px) {
  .preset-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  }}


@media (max-width: 768px) {
  .preset-grid {
    grid-template-columns: 1fr;
      gap: 10px;
  }}


.preset-card {
  background: rgb(145, 75, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 15px;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
}

body.dark .preset-card {
  background: rgba(0,0,0,0.2);
}

body.light .preset-card {
  background: rgba(255,255,255,1);
border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 768px) {
    .preset-card {
          padding: 10px ;
    }}


.preset-card-merge-mode {
  cursor: pointer;
}

    .agent-builder-preset-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  box-shadow: none; 
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.dark .agent-builder-preset-checkbox {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .agent-builder-preset-checkbox {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .agent-builder-preset-checkbox {
  width: 15px;
  height: 15px;
    }}

.agent-builder-preset-checkbox:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body.dark .agent-builder-preset-checkbox:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body.light .agent-builder-preset-checkbox:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.preset-card .builder-template-title {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 225, 255, 1);
  text-shadow: none;
  text-align: center;
}

body.light .preset-card .builder-template-title {
  color: rgba(0, 0, 0, 0.9)
}

 @media (max-width: 1366px) {
  .preset-card .builder-template-title {
  font-size: 14px;
}}


@media (max-width: 768px) {
.preset-card .builder-template-title {
  font-size: 16px;
}}

.preset-card .builder-template-summary {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  margin-top: 5px;
  color: rgba(255, 225, 255, 1);
  text-shadow: none;
  text-align: center;
}

body.light .preset-card .builder-template-summary {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.preset-card .builder-template-summary {
  font-size: 11px;
}}

@media (max-width: 768px) {
.preset-card .builder-template-summary {
  font-size: 14px;
  line-height: 18px;
  max-width: 90%;
  margin: 0 auto;
    margin-top: 5px;
}}

.preset-use-button {
  background: rgba(145, 75, 255,0.6);
  color: rgba(255, 225, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  font-weight: 300;
  align-self: flex-start;
  margin: 0 auto;
  margin-top: 12px;
    margin-bottom: 3px;
}

body.dark .preset-use-button {
  background: rgba(0, 0, 0, 1);
}

body.light .preset-use-button {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.preset-use-button {
  padding: 6px 10px;
  font-size: 11px;
  margin-bottom: 3px;
}}

@media (max-width: 768px) {
.preset-use-button {
  padding: 6px 10px;
  font-size: 13px;
  margin-bottom: 3px;
}}



.preset-merge-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
}


@media (max-width: 768px) {
  .preset-merge-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
    margin-top: 6px;
}}

.preset-merge-button,
.preset-merge-confirm-button {
  background:  rgba(145, 75, 255,0.6);
  color: rgba(255, 225, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 300;
  align-self: flex-start;
  margin-top: 10px;
    margin-bottom: 3px;
}

body.dark .preset-merge-button,
body.dark .preset-merge-confirm-button {
  background: rgba(0, 0, 0, 1);
}

body.light .preset-merge-button,
body.light .preset-merge-confirm-button {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.preset-merge-button,
.preset-merge-confirm-button {
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 3px;
}}

@media (max-width: 768px) {
.preset-merge-button,
.preset-merge-confirm-button {
  padding: 3px 10px;
  font-size: 13px;
  margin-bottom: 0px;
}}


.preset-card-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


.preset-modal-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  z-index: 9999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preset-modal-warning-box {
background: rgba(145, 75, 255,0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 20%;
  max-width: 33%;
  white-space: pre-line !important;
}


body.dark .preset-modal-warning-box {
background: rgba(0, 0, 0, 1);
border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .preset-modal-warning-box {
background: rgba(255,255,255,1);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
.preset-modal-warning-box {
    min-width: 90%;
  max-width: 90%;
}}

.preset-modal-warning-box button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(145, 75, 255,0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
  margin-top: 20px;
}

body.dark .preset-modal-warning-box button {
background: rgb(0, 0, 0, 1);
}


body.light .preset-modal-warning-box button {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

.preset-modal::-webkit-scrollbar {
  display: none;
}
body:has(.integration-picker-overlay) .user-header,
body:has(.integration-picker-overlay) .admin-header,
body:has(.integration-picker-overlay) .main-footer,
body:has(.integration-picker-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.integration-picker-overlay) .global-footer,
body:has(.integration-picker-overlay) .ask-treo,
body:has(.integration-picker-overlay) .agent-interaction-dock-button,
body:has(.integration-picker-overlay) .float-chat-button {
  display: none;
}

.integration-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .integration-picker-overlay {
  background: rgba(0, 0, 0, 0.1);
}

#trusty-global-back {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.integration-picker-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 25px 30px 35px 30px;
  width: 45%;
  max-width: 45%;
  min-height: auto;
  max-height: 95vh;
  overflow-y: auto;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

@media (max-width: 1366px) {
    .integration-picker-modal {
  padding: 15px 15px 25px 15px;
  width: 50%;
  max-width: 50%;
    }}

    @media (max-width: 768px) {
    .integration-picker-modal {
  padding: 15px 15px 20px 15px;
  width: 95%;
  max-width: 95%;
    }}

body.dark .integration-picker-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .integration-picker-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2)
}


.integration-picker-modal::-webkit-scrollbar{
  display: none;
}

.integration-picker-header {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.integration-picker-title {
  font-size: 26px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
    text-align: center;
}

body.light .integration-picker-title {
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.integration-picker-title {
  font-size: 22px;
}}

@media (max-width: 768px) {
.integration-picker-title {
  font-size: 25px;
}}

.integration-picker-desc {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 1366px) {
.integration-picker-desc {
  font-size: 11px;
    line-height: 15px;
      margin-top: 5px;
}}

@media (max-width: 768px) {
.integration-picker-desc {
  font-size: 11.5px;
    line-height: 15px;
      margin-top: 5px;
}}



.integration-agent-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
}

.integration-selected-agent {
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 225, 255, 1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  margin: 0 auto;
  text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

body.dark .integration-selected-agent {
  background: rgba(0, 0, 0, 1);
}

body.light .integration-selected-agent {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
.integration-selected-agent {
  font-size: 14px;
    line-height: 10px;
      padding: 6px 12px;
}}

@media (max-width: 768px) {
.integration-selected-agent {
  font-size: 15px;
    line-height: 15px;
      padding: 6px 12px;
}}


.integration-agent-image {
  width: 150px;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  margin-bottom: 10px;
}

body.dark .integration-agent-image {
  border: 1px solid rgba(0, 0, 0, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
}


@media (max-width: 1366px) {
.integration-agent-image {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  }}

  @media (max-width: 768px) {
.integration-agent-image {
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
  }}

  .integration-agent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  .integration-agent-image i {
  font-size: 66px;
}






body.dark .integration-close-button {
    background: #333;
  color: rgba(255, 255, 255, 0.6);
}


.integration-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .integration-close-button {
  background: none;
}

@media (max-width: 1366px) {
    .integration-close-button {
  font-size: 11px;
    }}

    @media (max-width: 768px) {
    .integration-close-button {
  font-size: 13px;
    }}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  grid-gap: 15px;
  gap: 15px;
  margin-top: 20px;
}

    @media (max-width: 768px) {
.integration-grid {
  grid-template-columns: repeat(2, 2fr);
  gap: 12px;
}}

.integration-grid-item {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 30px 15px 25px 15px;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
    overflow: hidden;
}

@media (max-width: 1366px) {
    .integration-grid-item {
          padding: 25px 10px 20px 10px;
    }}

    @media (max-width: 768px) {
    .integration-grid-item {
          padding: 25px 10px 23px 10px;
    }}

.integration-grid-item:hover {
  transform: scale(1.016);
}

body.dark .integration-grid-item {
  background: rgba(0, 0, 0, 0.2);
}

body.light .integration-grid-item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}


.integration-image {
  width: 75px;
  height: 75px;
  object-fit: contain;
  margin-bottom: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}


@media (max-width: 1366px) {
    .integration-image {
  width: 66px;
  height: 66px;
  margin-bottom: 3px;
    }}

    @media (max-width: 768px) {
    .integration-image {
  width: 66px;
  height: 66px;
    margin-bottom: 4px;
    }}

.integration-label {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-align: center;
}

body.light .integration-label {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.integration-label {
  font-size: 13px;
    }}


@media (max-width: 768px) {
.integration-label {
  font-size: 14px;
    }}


.builder-modal-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
}

.builder-modal-warning-box {
background: #7375e1 ;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 20%;
  max-width: 20%;
  white-space: pre-line !important;
}


body.dark .builder-modal-warning-box {
background: rgba(0, 0, 0, 1);
color: rgba(225, 255, 225, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .builder-modal-warning-box {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 768px) {
.builder-modal-warning-box {
    min-width: 90%;
  max-width: 90%;
}}

.builder-modal-warning-box button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
  margin-top: 20px;
}

body.dark .builder-modal-warning-box button {
background: rgb(0, 0, 0, 1);
}

body.light .builder-modal-warning-box button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

.integration-grid-item.integration-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: auto;
}

.integration-integrated {
      opacity: 1;
  cursor: pointer;
  position: relative;
}


.integration-status-badge {
  position: absolute;
  top: 13px;
  left: -30px;
  width: 120px;
  text-align: center;
  background: rgba(125, 55, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 300 !important;
  transform: rotate(-45deg);
  z-index: 99999;
  padding: 3px 0;
}

body.dark .integration-status-badge {
  background: rgba(255, 255, 255, 0.2);
}

body.light .integration-status-badge {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .integration-status-badge {
  top: 18px;
  left: -28px;
  width: 120px;
  font-size: 12px;
  padding: 3px 0;
}}

@media (max-width: 768px) {
  .integration-status-badge {
  top: 18px;
  left: -28px;
  width: 120px;
  font-size: 12px;
  padding: 5px 0;
}}

.integration-settings-button {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: none; 
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
  cursor: pointer;
  z-index: 999999;
  font-size: 15px;
}

body.light .integration-settings-button {
  color: rgba(0, 0, 0, 0.9);
}

  .integration-disconnect-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: none; 
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
  cursor: pointer;
  z-index: 999999;
    font-size: 11px;
}

body.light .integration-disconnect-button {
  color: rgba(0, 0, 0, 0.9);
}

  /* message */
.integration-message-back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    z-index: 999 !important;
}

body:has(.integration-message-back) .integration-status-badge,
body:has(.integration-message-back) .integration-settings-button,
body:has(.integration-message-back) .integration-disconnect-button {
  z-index: 1 !important;
}

.integration-message-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7375e1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 99999999999 !important; 
    width: 75%;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  overflow-y: auto;
}

  body.dark .integration-message-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2)
  }

    body.light .integration-message-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 768px) {
.integration-message-modal {
 width: 95%;
  }}

.integration-message-modal-title {
  font-size: 18px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.integration-message-modal-title {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.integration-message-modal-title {
  font-size: 16px;
  margin-bottom: 10px;
  }}

.integration-message-modal-body {
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

body.light .integration-message-modal-body {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
.integration-message-modal-body {
  font-size: 12px;
  margin-bottom: 6px;
  }}


.integration-message-modal-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.integration-message-modal-button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
}

body.dark .integration-message-modal-button {
  background: rgb(0, 0, 0, 1);
}

body.light .integration-message-modal-button {
  background: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.integration-message-modal-button {
      padding: 6px 10px;
  font-size: 12px;
}}


.integration-status-loading {
  position: relative;
  overflow: hidden;
}

.integration-status-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

body:has(.agent-builder-setting-integration-telegram-overlay) .integration-status-badge,
body:has(.agent-builder-setting-integration-telegram-overlay) .integration-settings-button,
body:has(.agent-builder-setting-integration-telegram-overlay) .integration-disconnect-button {
  z-index: 1 !important;
}

body:has(.agent-builder-setting-integration-telegram-overlay) .integration-picker-modal {
  max-width: 33%;
  min-height: 95vh;
  max-height: 95vh;
}

@media (max-width: 1366px) {
  body:has(.agent-builder-setting-integration-telegram-overlay) .integration-picker-modal {
  max-width: 40%;
  min-height: 95vh;
  max-height: 95vh;
}}

@media (max-width: 768px) {
  body:has(.agent-builder-setting-integration-telegram-overlay) .integration-picker-modal {
  max-width: 100%;
  min-height: 85vh;
  max-height: 95vh;
  border-radius: none;
}}

.agent-builder-setting-integration-telegram-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 95vh;
  max-height: 95vh;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  overflow: auto;
}

    @media (max-width: 1366px) {
      .agent-builder-setting-integration-telegram-overlay {
          position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 95vh;
  max-height: 95vh;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  overflow: auto;
}}

    @media (max-width:768px) {
      .agent-builder-setting-integration-telegram-overlay {
          position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 70vh;
  max-height: 85vh;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  overflow: auto;
}}

.agent-builder-setting-integration-telegram-modal {
  padding: 20px 20px 20px 20px;
  background: linear-gradient(100deg, #9945FF, #14F195);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 95vh;
  max-height: 95vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
}

 body.dark .agent-builder-setting-integration-telegram-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

   body.light .agent-builder-setting-integration-telegram-modal {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

    @media (max-width: 1366px) {
    .agent-builder-setting-integration-telegram-modal {
  padding: 20px 20px 20px 20px;
  background: linear-gradient(100deg, #9945FF, #14F195);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 95vh;
  max-height: 95vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  }}
  
  @media (max-width: 768px) {
    .agent-builder-setting-integration-telegram-modal {
  padding: 10px 10px 10px 10px;
  background: linear-gradient(100deg, #9945FF, #14F195);
  border-radius: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 85vh;
  max-height: 95vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  }}
  
  .agent-builder-setting-integration-telegram-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 26px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 300;
}

  body.light .agent-builder-setting-integration-telegram-title {
  color: rgba(0, 0, 0, 0.9);
  }

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-title {
    font-size: 18px;
  }}

@media (max-width: 768px) {
  .agent-builder-setting-integration-telegram-title {
    font-size: 22px;
  }}



  .agent-builder-setting-integration-telegram-selected-agent {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 7px 12px;
border-radius: 8px;
}

body.dark .agent-builder-setting-integration-telegram-selected-agent {
  background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-selected-agent {
  font-size: 11px;
    line-height: 15px;
      margin-top: 7px;
        margin-bottom: 3px;
      padding: 6px 12px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-selected-agent {
  font-size: 11.4px;
    line-height: 15px;
      margin-top: 10px;
      padding: 6px 12px;
}}




.agent-builder-setting-integration-telegram-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .agent-builder-setting-integration-telegram-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-builder-setting-integration-telegram-close-button {
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
    .agent-builder-setting-integration-telegram-close-button {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
    .agent-builder-setting-integration-telegram-close-button {
      font-size: 13px;
    }}

.agent-builder-setting-integration-telegram-box {
  margin-top: 3px;
  margin-bottom: 3px;
 display: flex;
 flex-direction: row;
  justify-content: space-between;
    vertical-align: middle;
}

.agent-builder-setting-integration-telegram-box-2 {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 7px 12px;
border-radius: 6px;
  margin-top: 15px;
  margin-bottom: 0px;
 display: flex;
 flex-direction: row;
  justify-content: space-between;
    vertical-align: middle;
}

body.dark .agent-builder-setting-integration-telegram-box-2 {
  background: rgba(0.0.0,0.1);
}

body.light .agent-builder-setting-integration-telegram-box-2 {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-builder-setting-integration-telegram-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
    .agent-builder-setting-integration-telegram-label {
  font-size: 13px;
}}

@media (max-width: 768px) {
    .agent-builder-setting-integration-telegram-label {
  font-size: 13px;
}}

.agent-builder-setting-integration-telegram-label-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  vertical-align: middle;
  margin-left: 5px;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-label-sub {
  font-size: 13px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-label-sub {
  font-size: 13px;
}}

.agent-builder-setting-integration-telegram-label-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
    .agent-builder-setting-integration-telegram-label-2 {
  font-size: 12px;
}}

@media (max-width: 768px) {
    .agent-builder-setting-integration-telegram-label-2 {
  font-size: 13px;
}}

.agent-builder-setting-integration-telegram-label i {
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 3px;
}

.agent-builder-setting-integration-telegram-moderate-url-prefix-label,
.agent-builder-setting-integration-telegram-moderate-url-exact-label {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  padding: 6px 0px 6px 0px;
  margin: 0px 0px 0px 5px;
  font-weight: 300;
  font-style: italic;
  gap: 0px;
}


body.dark .agent-builder-setting-integration-telegram-moderate-url-prefix-label,
body.dark .agent-builder-setting-integration-telegram-moderate-url-exact-label {
  color:rgba(255, 255, 255, 0.9);
  text-shadow: none;
}


@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-moderate-url-prefix-label,
.agent-builder-setting-integration-telegram-moderate-url-exact-label {
  font-size: 13px;
  padding: 6px 0px 6px 0px;
}}




.agent-builder-setting-integration-telegram-options {
  display: flex;
  gap: 10px;
    vertical-align: middle;
}

.agent-builder-setting-integration-telegram-options-2 {
  display: flex;
  gap: 6px;
    vertical-align: middle;
}

.agent-builder-setting-integration-telegram-options .toggle-icon,
.agent-builder-setting-integration-telegram-options-2 .toggle-icon {
  margin-left: -3px;
  margin-top: px;
  cursor: pointer;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.agent-builder-setting-integration-telegram-options .toggle-icon.disabled,
.agent-builder-setting-integration-telegram-options-2 .toggle-icon.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.agent-builder-setting-integration-telegram-options span,
.agent-builder-setting-integration-telegram-options-2 span {
  cursor: pointer;
}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-options,
.agent-builder-setting-integration-telegram-options-2 {
  display: flex;
  gap: 5px;
}}

.agent-builder-setting-integration-telegram-options label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-options label {
  font-size: 12px;
}}

@media (max-width:768px) {
  .agent-builder-setting-integration-telegram-options label {
  font-size: 12px;
}}

.agent-builder-setting-integration-telegram-options-2 label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-options-2 label {
  font-size: 11px;
}}

@media (max-width:768px) {
  .agent-builder-setting-integration-telegram-options-2 label {
  font-size: 12px;
}}

.agent-builder-setting-integration-telegram-modal input[type="radio"] {
    accent-color: #a372f7 !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.agent-builder-setting-integration-telegram-modal  input[type="radio"]:disabled {
    accent-color: #a372f7 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

body.dark .agent-builder-setting-integration-telegram-modal input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1) !important;
}

body.light .agent-builder-setting-integration-telegram-modal input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1) !important;
}


.agent-builder-setting-integration-telegram-footer {
margin-top: auto;
text-align: right;
}

.agent-builder-setting-integration-telegram-save-button {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 5px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    margin-top: 20px;
}

@media (max-width: 768px) {
  .agent-builder-setting-integration-telegram-save-button {
    font-size: 12px;
        padding: 3px 10px;
  }}
    
  @media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-save-button {
    font-size: 14px;
        padding: 3px 10px;
  }}
    

.agent-builder-setting-integration-telegram-save-button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

body.dark .agent-builder-setting-integration-telegram-save-button {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-builder-setting-integration-telegram-save-button {
        background: rgb(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}

/* confirm */

.agent-builder-setting-integration-telegram-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    z-index: 999 !important;
}

.agent-builder-setting-integration-telegram-confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7375e1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 999999; 
    width: auto;
    min-width: 75%;
    max-width: 90%;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

  body.dark .agent-builder-setting-integration-telegram-confirm-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

    @media (max-width: 1366px) {
    .agent-builder-setting-integration-telegram-confirm-modal {
    padding: 20px 20px;
    }}

  .agent-builder-setting-integration-telegram-confirm-content {
  width: 100%;
    margin: 0 auto;
   vertical-align: middle;
  }

.agent-builder-setting-integration-telegram-confirm-modal h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

.agent-builder-setting-integration-telegram-confirm-modal p {
  font-size: 14px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-confirm-modal p {
  font-size: 11px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-confirm-modal p {
  font-size: 12px;
  margin-bottom: 6px;
  }}

.agent-builder-setting-integration-telegram-confirm-button-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.agent-builder-setting-integration-telegram-confirm-button {
  padding: 3px 14px;
  border-radius: 6px;
  cursor: pointer;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-confirm-button {
      padding: 3px 10px;
  font-size: 12px;
}}

body.dark .agent-builder-setting-integration-telegram-confirm-button {
  background: rgb(0, 0, 0, 1);
}

.agent-builder-setting-integration-telegram-custom-greeting,
.agent-builder-setting-integration-telegram-whitelist,
.agent-builder-setting-integration-telegram-moderate-url,
.agent-builder-setting-integration-telegram-moderate-keyword,
.agent-builder-setting-integration-telegram-custom-autoresponse,
.agent-builder-setting-integration-telegram-scheduled-messages {
    display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 0px;
    background: none;
}

.agent-builder-setting-integration-telegram-moderate-url-box,
.agent-builder-setting-integration-telegram-moderate-keyword-box {
    display: flex;
  justify-content: space-between;
  vertical-align: middle;
  margin-top: 3px;
  margin-bottom: 3px;
  background: none;
}

.agent-builder-setting-integration-telegram-moderate-url-list {
  padding: 0px 0px 0px 0px;
}


.agent-builder-setting-integration-telegram-moderate-url-section,
.agent-builder-setting-integration-telegram-moderate-keyword-section {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 0px 15px 15px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
}

.agent-builder-setting-integration-telegram-moderate-keyword-section {
    padding: 15px 15px 15px 15px;
}

body.dark .agent-builder-setting-integration-telegram-moderate-url-section,
body.dark .agent-builder-setting-integration-telegram-moderate-keyword-section {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-builder-setting-integration-telegram-moderate-url-section,
body.light .agent-builder-setting-integration-telegram-moderate-keyword-section {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

  .agent-builder-setting-integration-telegram-moderate-url-section:last-child,
  .agent-builder-setting-integration-telegram-moderate-keyword-section {
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-moderate-url-sectionm:last-child,
  .agent-builder-setting-integration-telegram-moderate-keyword-section {
    margin-bottom: 5px;
  }}

  .keyword-and-char-box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .keyword-and-char-count {
   font-size: 13px;
   margin-bottom: 0px;
     padding-right: 3px;
  }

    @media (max-width: 1366px) {
        .keyword-and-char-count {
   font-size: 11px;
        }}
     
.agent-builder-setting-integration-telegram-moderate-url-items {
    display: flex;
  justify-content: flex-start;
  vertical-align: middle;
  margin-top: 10px;
  background: none;
  gap: 6px;
}

.telegram-greeting-no-and-char-count {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

.telegram-custom-greeting-input-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
   margin-top: 10px;
}

body.dark .telegram-custom-greeting-input-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .telegram-custom-greeting-input-row {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .telegram-custom-greeting-input-row {
      padding: 10px;
  }}

  .telegram-custom-greeting-input-row:last-child {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .telegram-custom-greeting-input-row:last-child {
    margin-top: 5px;
    margin-bottom: 5px;
  }}

  .telegram-custom-greeting-label {
   font-size: 14px;
   margin-bottom: 2px;
     padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .telegram-custom-greeting-label {

  font-weight: 300;
}

@media (max-width: 1366px) {
.telegram-custom-greeting-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.telegram-custom-greeting-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

.telegram-custom-greeting-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}

.telegram-greeting-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .telegram-greeting-char-count {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.telegram-greeting-char-count {
  font-size: 10px;
    padding-top: 2px;
}}


.telegram-custom-greeting-input-row textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .telegram-custom-greeting-input-row textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.telegram-custom-greeting-input-row textarea {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.telegram-custom-greeting-input-row textarea {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

.telegram-custom-greeting-input-row textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.telegram-custom-greeting-input-row textarea::-webkit-scrollbar{
  width: 3px;
}

.agent-builder-setting-integration-telegram-moderate-url textarea {
  width: 100%;
  resize: none;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  background: rgba(255,255,255,0.9);
  padding: 2px 10px;
  border-radius: 3px;
  margin-top: 5px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-moderate-url textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-moderate-url textarea {
  min-height: 50px;
    font-size: 13px;
      padding: 3px 6px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-moderate-url textarea {
  height: 27px;
  min-height: 27px;
  font-size: 12px;
  padding: 3px 6px;
}}


.agent-builder-setting-integration-telegram-moderate-keyword textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 3px;
  margin-top: 5px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-moderate-keyword textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-moderate-keyword textarea {
 font-size: 13px;
  padding: 3px 6px;
  height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-moderate-keyword textarea {
 font-size: 12px;
  padding: 3px 6px;
  height: 50px;
  min-height: 50px;
  max-height: 100px;
}}


.agent-builder-setting-integration-telegram-moderate-url textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.agent-builder-setting-integration-telegram-moderate-url textarea::-webkit-scrollbar {
  width: 3px;
}

/* dm disabled */

.agent-builder-setting-integration-telegram-custom-nodm {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

body.light .agent-builder-setting-integration-telegram-custom-nodm {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agent-builder-setting-integration-telegram-custom-nodm-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  display: flex;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.9);
}

body.light .agent-builder-setting-integration-telegram-custom-nodm-char-count {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-custom-nodm-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

.agent-builder-setting-integration-telegram-custom-nodm textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-custom-nodm textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.agent-builder-setting-integration-telegram-custom-nodm textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-custom-nodm textarea {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

@media (max-width: 768px) {
  .agent-builder-setting-integration-telegram-custom-nodm textarea {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

.agent-builder-setting-integration-telegram-custom-nodm textarea::-webkit-scrollbar{
  width: 3px;
}

/* premium response */

.agent-builder-setting-integration-telegram-custom-premium {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

body.light .agent-builder-setting-integration-telegram-custom-premium {
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.agent-builder-setting-integration-telegram-custom-premium-title-and-charcount {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  float: right;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: flex-end;
}

body.light .agent-builder-setting-integration-telegram-custom-premium-title-and-charcount {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-custom-premium-title-and-charcount {
  font-size: 10px;
    padding-top: 2px;
}}

.agent-builder-setting-integration-telegram-custom-premium textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-custom-premium textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.agent-builder-setting-integration-telegram-custom-premium textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-custom-premium textarea {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

@media (max-width: 768px) {
  .agent-builder-setting-integration-telegram-custom-premium textarea {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

.agent-builder-setting-integration-telegram-custom-premium textarea::-webkit-scrollbar{
  width: 3px;
}



/* custom welcome */

.agent-builder-setting-integration-telegram-custom-welcome {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.agent-builder-setting-integration-telegram-custom-welcome-title-and-char-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-title-and-char-count {
  color: rgba(0, 0, 0, 0.9)
}

.agent-builder-setting-integration-telegram-custom-welcome-image-title-and-note {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-custom-welcome-image-title-and-note {
  gap: 3px;
}}

.agent-builder-setting-integration-telegram-custom-welcome-title {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-title {
  color: rgba(0, 0, 0, 0.9)
}

.agent-builder-setting-integration-telegram-custom-welcome-image-title {
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-image-title {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-custom-welcome-image-title {
  font-size: 14px;
}}



.agent-builder-setting-integration-telegram-custom-welcome-image-title .welcome-image-optional {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  vertical-align: middle;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-image-title .welcome-image-optional {
  color: rgba(0, 0, 0, 0.9);
}

.agent-builder-setting-integration-telegram-custom-welcome-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-char-count {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-custom-welcome-char-count {
  font-size: 9px;
    padding-top: 2px;
}}

.agent-builder-setting-integration-telegram-custom-welcome textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.agent-builder-setting-integration-telegram-custom-welcome textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-custom-welcome textarea {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

@media (max-width: 768px) {
  .agent-builder-setting-integration-telegram-custom-welcome textarea {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
  }
}

.agent-builder-setting-integration-telegram-custom-welcome textarea::-webkit-scrollbar{
  width: 3px;
}


/* action button */

.agent-builder-setting-integration-telegram-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-action-buttons {
  gap: 3px;
  margin-top: 0px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-action-buttons {
  gap: 3px;
  margin-top: 1px;
}}

.agent-builder-setting-integration-telegram-action-buttons-welcome-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-action-buttons-welcome-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
}}

.agent-builder-setting-integration-telegram-action-buttons-welcome-image .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-builder-setting-telegram-save-button,
.agent-builder-setting-telegram-edit-button,
.agent-builder-setting-telegram-delete-button,
.agent-builder-setting-telegram-cancel-button {
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

.agent-builder-setting-telegram-save-button,
.agent-builder-setting-telegram-edit-button {
  background: rgb(145, 75, 255, 0.6);
}

.agent-builder-setting-telegram-delete-button,
.agent-builder-setting-telegram-cancel-button {
  background: rgba(220, 50, 70, 0.7);}

body.dark .agent-builder-setting-telegram-save-button,
body.dark .agent-builder-setting-telegram-edit-button,
body.dark .agent-builder-setting-telegram-delete-button,
body.dark .agent-builder-setting-telegram-cancel-button {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-builder-setting-telegram-save-button,
body.light .agent-builder-setting-telegram-edit-button,
body.light .agent-builder-setting-telegram-delete-button,
body.light .agent-builder-setting-telegram-cancel-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.agent-builder-setting-telegram-save-button,
.agent-builder-setting-telegram-edit-button,
.agent-builder-setting-telegram-delete-button,
.agent-builder-setting-telegram-cancel-button {
  padding: 2px 6px;
    font-size: 11px;
  margin-top: 6px;
}}

@media (max-width: 768px) {
.agent-builder-setting-telegram-save-button,
.agent-builder-setting-telegram-edit-button,
.agent-builder-setting-telegram-delete-button,
.agent-builder-setting-telegram-cancel-button {
  padding: 3px 7px;
}}

.agent-builder-setting-telegram-save-button i,
.agent-builder-setting-telegram-edit-button i,
.agent-builder-setting-telegram-delete-button i,
.agent-builder-setting-telegram-cancel-button i {
  margin-right: 3px;
  margin-top: 1px;
}


.agent-builder-setting-telegram-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* button */

.telegram-custom-greeting-add-button,
.telegram-custom-autoresponse-add-button,
.telegram-scheduled-messages-add-button {
  margin-top: 10px;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
}

body.dark .telegram-custom-greeting-add-button,
body.dark .telegram-custom-autoresponse-add-button,
body.dark .telegram-scheduled-messages-add-button {
  background: rgba(0, 0, 0, 1);
}

body.light .telegram-custom-greeting-add-button,
body.light .telegram-custom-autoresponse-add-button,
body.light .telegram-scheduled-messages-add-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .telegram-custom-greeting-add-button,
.telegram-custom-autoresponse-add-button,
.telegram-scheduled-messages-add-button {
      font-size: 12px;
  }}

  @media (max-width: 768px) {
  .telegram-custom-greeting-add-button,
.telegram-custom-autoresponse-add-button,
.telegram-scheduled-messages-add-button {
      font-size: 12px;
        margin-top: 10px;
  }}

.telegram-custom-greeting-add-button i,
.telegram-custom-autoresponse-add-button i,
.telegram-scheduled-messages-add-button i {
  margin-right: 1px;
}

.telegram-custom-greeting-add-button:disabled,
.telegram-custom-autoresponse-add-button:disabled,
.telegram-scheduled-messages-add-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* category */

.telegram-integration-setting-direct,
.telegram-integration-setting-group {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  padding: 6px 0px 6px 0px;
  margin: 10px 0px 10px 0px;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


body.dark .telegram-integration-setting-direct,
body.dark .telegram-integration-setting-group {
  color:rgba(255, 255, 255, 0.9);
  text-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


body.light .telegram-integration-setting-direct,
body.light .telegram-integration-setting-group {
  color:rgba(0, 0, 0, 0.9);
  text-shadow: none;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1366px) {
.telegram-integration-setting-direct,
.telegram-integration-setting-group {
  font-size: 13px;
  padding: 6px 0px 6px 0px;
}}



/* temp */

.agent-builder-setting-integration-telegram-url-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 4px;
}

.agent-builder-setting-integration-telegram-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.add-url-button {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    margin-top: 20px;
}

body.dark .add-url-button {
    background: rgba(0, 0, 0, 1)
}

body.light .add-url-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


  @media (max-width: 1366px) {
    .add-url-button {
          font-size: 11px;
    }}

      @media (max-width: 768px) {
    .add-url-button {
          font-size: 11px;
    }}

.agent-builder-setting-integration-telegram-subtitle {
  font-weight: 300;
  margin-top: 12px;
  margin-bottom: 4px;
}


/* select */

.telegram-moderate-url-select__control {
    font-size: 13px !important;
    font-weight: 300 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin-top: 5px;
    padding: 0px 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 76px!important;
    max-width: 76px!important;
    cursor: pointer !important; 
  }
  
  body.dark .telegram-moderate-url-select__control {
    background: rgba(0, 0, 0, 1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  @media (max-width: 1366px) {
    .telegram-moderate-url-select__control {
      font-size: 11px !important;
      height: 26px !important;
      min-height: 26px !important;
    }}

.telegram-moderate-url-select__single-value,
.telegram-moderate-url-select__input,
.telegram-moderate-url-select__placeholder
 {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  text-shadow: none !important;
}

body.dark .telegram-moderate-url-select__single-value,
body.dark .telegram-moderate-url-select__input,
body.dark .telegram-moderate-url-select__placeholder
 {
    color: rgba(255, 255, 255, 0.7) !important;
}


.telegram-moderate-url-select__indicator,
.telegram-moderate-url-select__dropdown-indicator {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  padding: 0px !important;
  padding-top: 5px !important;
    text-shadow: none !important;
}

body.dark .telegram-moderate-url-select__indicator,
body.dark .telegram-moderate-url-select__dropdown-indicator {
    color: rgba(255, 255, 255, 0.7) !important;
}

  .telegram-moderate-url-select__indicator {
  margin-top: -5px !important;
}

  .telegram-moderate-url-select__indicator-separator {
  display: none !important;
}

.telegram-moderate-url-select__value-container {
  padding: 0 0px !important;
  display: flex;
  align-items: center;
}

.telegram-moderate-url-select__menu {
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: none !important;
    font-weight: 300 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 3px !important;
  margin-top: 3px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

.telegram-moderate-url-select__option {
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 4px 8px 5px 10px!important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
}

.telegram-moderate-url-select__option:last-child {
  padding-bottom: 5px !important;
}

/* ban */

.agent-builder-setting-integration-telegram-ban-box {
  display: flex;
  flex-direction: column;
}

.agent-builder-setting-integration-telegram-ban-options {
    display: flex;
  flex-direction: row;
  justify-content: space-between;
    margin-top: 3px;
  margin-bottom: 3px;
}

.agent-builder-setting-integration-telegram-ban-sub {
  display: flex;
  flex-direction: column;
}


.agent-builder-setting-integration-telegram-ban-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px 15px 25px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
   margin-top: 10px;
   position: relative;
}

body.dark .agent-builder-setting-integration-telegram-ban-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-builder-setting-integration-telegram-ban-row {
    border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-ban-row {
      padding: 10px;
  }}

  .agent-builder-setting-integration-telegram-ban-row:last-child {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-ban-row:last-child {
    margin-top: 5px;
    margin-bottom: 5px;
  }}

  .agent-builder-setting-integration-telegram-ban-row textarea {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 5px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-ban-row textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-ban-row textarea {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-ban-row textarea {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

.agent-builder-setting-integration-telegram-ban-row textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.agent-builder-setting-integration-telegram-ban-row textarea::-webkit-scrollbar{
  width: 3px;
}


.agent-builder-setting-integration-telegram-ban-warning-message-box,
.agent-builder-setting-integration-telegram-ban-message-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 3px;
}

.agent-builder-setting-integration-telegram-ban-threshold-box {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: flex-end;
  vertical-align: middle;
  align-items: center;
     margin-top: 5px;
}

.agent-builder-setting-integration-telegram-ban-threshold-label {
   font-size: 14px;
   margin-top: 2px;
   margin-bottom: 0px;
     padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-ban-threshold-label {
  font-size: 12px;
     margin-top: 4px;
}}

.action-buttons-and-char-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.agent-builder-setting-integration-telegram-ban-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-left: 5px;
  margin-top: -10px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-ban-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

  .agent-builder-setting-integration-telegram-ban-label {
   font-size: 14px;
   margin-bottom: 2px;
     padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .agent-builder-setting-integration-telegram-ban-label {
  font-weight: 300;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-ban-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-ban-label {
   font-size: 14px;
   margin-bottom: 0px;
}}

.agent-builder-setting-integration-telegram-ban-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}

/* ban select */

.telegram-ban-after-select__control {
    font-size: 13px !important;
    font-weight: 300 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin-top: 5px;
    padding: 0px 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: auto!important;
    max-width: auto!important;
    cursor: pointer !important; 
  }
  
  body.dark .telegram-ban-after-select__control {
    background: rgba(0, 0, 0, 1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  @media (max-width: 1366px) {
    .telegram-ban-after-select__control {
      font-size: 11px !important;
      height: 26px !important;
      min-height: 26px !important;
    }}

.telegram-ban-after-select__single-value,
.telegram-ban-after-select__input,
.telegram-ban-after-select__placeholder
 {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  text-shadow: none !important;
}

body.dark .telegram-ban-after-select__single-value,
body.dark .telegram-ban-after-select__input,
body.dark .telegram-ban-after-select__placeholder
 {
    color: rgba(255, 255, 255, 0.7) !important;
}


.telegram-ban-after-select__indicator,
.telegram-ban-after-select__dropdown-indicator {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  padding: 0px !important;
  padding-top: 5px !important;
    text-shadow: none !important;
}

body.dark .telegram-ban-after-select__indicator,
body.dark .telegram-ban-after-select__dropdown-indicator {
    color: rgba(255, 255, 255, 0.7) !important;
}

  .telegram-ban-after-select__indicator {
  margin-top: -5px !important;
}

  .telegram-ban-after-select__indicator-separator {
  display: none !important;
}

.telegram-ban-after-select__value-container {
  padding: 0 0px !important;
  display: flex;
  align-items: center;
}

.telegram-ban-after-select__menu {
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: none !important;
    font-weight: 300 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 3px !important;
  margin-top: 3px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

.telegram-ban-after-select__option {
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 4px 8px 5px 10px!important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
}

@media (max-width: 1366px) {
  .telegram-ban-after-select__option {
  font-size: 11px !important;
  }}

.telegram-ban-after-select__option:last-child {
  padding-bottom: 5px !important;
}

.agent-builder-setting-integration-telegram-ban-options-desc {
  margin-top: 0px;
  font-size: 12px;
  font-style: italic;
  display: flex;
  justify-content: flex-start;
    background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px;
  border-radius: 6px;
}

body.dark .agent-builder-setting-integration-telegram-ban-options-desc {
  background: rgba(0, 0, 0, 1)
}

body.light .agent-builder-setting-integration-telegram-ban-options-desc {
  background: rgba(255,255,255,1)
}


@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-ban-options-desc {
   font-size: 10px;
     line-height: 12px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-ban-options-desc {
   font-size: 11px;
     line-height: 13px;
}}

/* welcome image */

.agent-builder-setting-integration-telegram-custom-welcome-image-note {
  font-size: 13px;
  padding-top: 0px;
  padding-right: 0px;
  color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    font-weight: 300;
}

body.light .agent-builder-setting-integration-telegram-custom-welcome-image-note {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-custom-welcome-image-note {
  font-size: 10px;
    padding-top: 0px;
}}

.custom-welcome-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-welcome-image-preview {
    width: 250px;
    height: 250px;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1366px) {
    .custom-welcome-image-preview {
        width: 125px;
        height: 125px;
        margin-top: 10px;
    }}

    @media (max-width: 768px) {
    .custom-welcome-image-preview {
        width: 175px;
        height: 175px;
        margin-top: 10px;
    }}

.agent-builder-setting-integration-telegram-action-buttons-welcome-image .welcome-image-error {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-action-buttons-welcome-image .welcome-image-error {
    font-size: 11px;
  }}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-action-buttons-welcome-image .welcome-image-error {
    font-size: 12px;
  }}

.welcome-image-error{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 0px 0px;
  border-radius: 8px;
  background: none; 
border: none; 
box-shadow: none; 
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 13px;
  line-height: 13px;
  font-weight: 300;
  word-break: break-word;
  max-width: 100%;
  animation: blink 1.2s infinite;
  transition: opacity 0.2s ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

.welcome-image-error i {
  color: rgba(240, 255, 0, 0.9);
}

/* integration info */
.integrated-info-box {
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  gap:10px;
  padding: 0px 0px;
  margin: 10px 0px;
background: none;
border: none;
box-shadow: none;
  border-radius:8px;
}

@media (max-width: 768px) {
.integrated-info-box {
display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  gap:10px;
  }}

.integrated-info-card {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 0px;
  padding: 10px 10px 10px 10px;
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius:8px;
  width: auto;
  min-width: 47%;
  max-width: 47%;
  position: relative;
  height: auto; 
  min-height: 130px;
  max-height: 100%;
}

body.dark .integrated-info-card {
  background: rgba(0, 0, 0, 1)
}

body.light .integrated-info-card {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
  .integrated-info-card {
      padding: 10px 6px 10px 6px;
      min-width: 45%;
      max-width: 45%;
        height: auto; 
      min-height: 100px;
      max-height: 100px;
  }}

  @media (max-width: 768px) {
  .integrated-info-card {
      padding: 10px 6px 6px 6px;
  min-width: 45%;
  max-width: 45%;
  height: auto; 
  min-height: 100px;
  max-height: 200px;
  }}


.integrated-info-card a {
  color:rgba(255,255,255,0.9);
  text-decoration:none;
}

.integrated-info-link,
.integrated-info-nolink {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 6px;
}


@media (max-width:768px) {
.integrated-info-link,
.integrated-info-nolink {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 6px;
}}


.integrated-info-avatar{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit:cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  margin-bottom: 5px;
}

@media (max-width: 1366px) {
.integrated-info-avatar{
  width: 50px;
  height: 50px;
  }}

  @media (max-width: 768px) {
.integrated-info-avatar{
  width: 75px;
  height: 75px;
  }}

.integrated-info-details{
  display:flex;
  flex-direction:column;
  gap: 3px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1366px) {
.integrated-info-details{
  display:flex;
  flex-direction:column;
  gap: 1px;
}}

.integrated-info-name {
  font-weight: 300;
  font-size: 16px;
  line-height: 16px;
  color:rgba(255,255,255,1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  max-width: 100%;
  text-align: center;
}

body.light .integrated-info-name {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.integrated-info-name {
    font-size: 13px;
  line-height: 13px;
  }}

  @media (max-width: 768px) {
.integrated-info-name {
    font-size: 13px;
  line-height: 13px;
  text-align: center;
  }}


.integrated-info-username {
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  color:rgba(255,255,255,1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-style: normal;
  margin-top: 3px;
}

body.light .integrated-info-username {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.integrated-info-username {
    font-size: 12px;
  line-height: 12px;
  }}

@media (max-width: 768px) {
.integrated-info-username {
    font-size: 13px;
  line-height: 12px;
    text-align: center;
  }}

.integrated-info-arrow{
      font-size: 16px;
  color:rgba(255,255,255,0.9);
}

body.light .integrated-info-arrow{
      font-size: 16px;
  color:rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
.integrated-info-arrow{
      font-size: 13px;
}}

@media (max-width: 768px) {
.integrated-info-arrow{
      font-size: 14px;
}}


.integrated-info-refresh-button {
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  top: 8px;
  right: 8px;
}

@media (max-width: 1366px) {
.integrated-info-refresh-button {
    top: 6px;
  right: 6px;
}}

@media (max-width: 768px) {
.integrated-info-refresh-button {
  top: 8px;
  right: 8px;
}}

body.dark .integrated-info-refresh-button {
    background: rgba(0, 0, 0, 1)
}

.integrated-info-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
}

@media (max-width: 1366px) {
  .integrated-info-refresh-button i {
      font-size: 9px;
  }}

  @media (max-width: 768px) {
  .integrated-info-refresh-button i {
      font-size: 11px;
  }}

  
.integrated-info-refresh-button .fa-sync {
  transition: transform 160ms ease, opacity 160ms ease;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.integrated-info-refresh-button .fa-sync.rotating {
  animation: sync-rotate 820ms linear infinite;
  opacity: 0.8;
  transform: translateZ(0);
}

.integrated-info-refresh-button:disabled .fa-sync {
  opacity: 1;
  cursor: none;
}

@keyframes sync-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.integrated-info-refresh-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.agent-builder-integration-refresh-error {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 13px;
    margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.agent-builder-integration-refresh-error i {
margin-right: 3px;
color: rgba(240, 255, 0, 0.9);
  text-shadow: none;
}


.integration-platform-badge {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit:cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  position: absolute;
  top: 6px;
  left: 6px;
}

@media (max-width: 1366px) {
.integration-platform-badge {
    top: 4px;
  left: 4px;
    width: 20px;
  height: 20px;
}}

@media (max-width: 768px) {
.integration-platform-badge {
  top: 6px;
  left: 6px;
}}


/* warning */

.telegram-setting-warning {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 13px;
line-height: 17px;
font-style: normal;
background: rgb(145, 75, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 10px;
border-radius: 6px;
margin: 0px 0px 10px 0px;
}

body.dark .telegram-setting-warning {
  background: rgba(0, 0, 0, 1)
}

body.light .telegram-setting-warning {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}


@media (max-width: 1366px) {
.telegram-setting-warning {
padding: 6px;
font-size: 10px;
line-height: 13px;
}}

.telegram-setting-warning i {
  margin-right: 5px;
  color: rgba(240, 255, 0, 0.9);
}

body.light .telegram-setting-warning i {
  margin-right: 5px;
  color: rgba(220, 50, 70, 1);
}

/* note */

.telegram-custom-nodm-note-box,
.telegram-custom-premium-note-box,
.telegram-custom-greeting-note-box,
.telegram-whitelist-note-box,
.telegram-custom-welcome-note-box,
.telegram-moderate-url-note-box,
.telegram-moderate-keyword-note-box,
.telegram-custom-warning-note-box,
.telegram-custom-ban-note-box,
.telegram-custom-autoresponse-note-box,
.telegram-scheduled-messages-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px;
  border-radius: 6px;
  margin: 3px 0px;
}

body.dark .telegram-custom-nodm-note-box,
body.dark .telegram-custom-premium-note-box,
body.dark .telegram-custom-greeting-note-box,
body.dark .telegram-whitelist-note-box,
body.dark .telegram-custom-welcome-note-box,
body.dark .telegram-moderate-url-note-box,
body.dark .telegram-moderate-keyword-note-box,
body.dark .telegram-custom-warning-note-box,
body.dark .telegram-custom-ban-note-box,
body.dark .telegram-custom-autoresponse-note-box,
body.dark .telegram-scheduled-messages-box  {
  background: rgba(0, 0, 0, 1)
}

body.light .telegram-custom-nodm-note-box,
body.light .telegram-custom-premium-note-box,
body.light .telegram-custom-greeting-note-box,
body.light .telegram-whitelist-note-box,
body.light .telegram-custom-welcome-note-box,
body.light .telegram-moderate-url-note-box,
body.light .telegram-moderate-keyword-note-box,
body.light .telegram-custom-warning-note-box,
body.light .telegram-custom-ban-note-box,
body.light .telegram-custom-autoresponse-note-box,
body.light .telegram-scheduled-messages-box  {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.telegram-custom-nodm-note-box,
.telegram-custom-premium-note-box,
.telegram-custom-greeting-note-box,
.telegram-whitelist-note-box,
.telegram-custom-welcome-note-box,
.telegram-moderate-url-note-box,
.telegram-moderate-keyword-note-box,
.telegram-custom-warning-note-box,
.telegram-custom-ban-note-box,
.telegram-custom-autoresponse-note-box,
.telegram-scheduled-messages-box  {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 3px;
  padding: 6px;
}}

@media (max-width: 768px) {
.telegram-custom-nodm-note-box,
.telegram-custom-premium-note-box,
.telegram-custom-greeting-note-box,
.telegram-whitelist-note-box,
.telegram-custom-welcome-note-box,
.telegram-moderate-url-note-box,
.telegram-moderate-keyword-note-box,
.telegram-custom-warning-note-box,
.telegram-custom-ban-note-box,
.telegram-custom-autoresponse-note-box,
.telegram-scheduled-messages-box  {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
  padding: 10px;
}}


.telegram-custom-nodm-note,
.telegram-custom-premium-note,
.telegram-whitelist-note,
.telegram-custom-welcome-note,
.telegram-custom-greeting-note,
.telegram-moderate-url-note,
.telegram-moderate-keyword-note,
.telegram-custom-warning-note,
.telegram-custom-ban-note,
.telegram-custom-autoresponse-note,
.telegram-scheduled-messages-note {
  font-size: 13px;
  font-weight: 300;
    line-height: 18px;
  font-style: italic;
}

@media (max-width: 1366px) {
.telegram-custom-nodm-note,
.telegram-custom-premium-note,
.telegram-whitelist-note,
.telegram-custom-welcome-note,
.telegram-custom-greeting-note,
.telegram-moderate-url-note,
.telegram-moderate-keyword-note,
.telegram-custom-warning-note,
.telegram-custom-ban-note,
.telegram-custom-autoresponse-note,
.telegram-scheduled-messages-note {
   font-size: 12px;
     line-height: 15px;
}}

@media (max-width: 768px) {
.telegram-custom-nodm-note,
.telegram-custom-premium-note,
.telegram-whitelist-note,
.telegram-custom-welcome-note,
.telegram-custom-greeting-note,
.telegram-moderate-url-note,
.telegram-moderate-keyword-note,
.telegram-custom-warning-note,
.telegram-custom-ban-note,
.telegram-custom-autoresponse-note,
.telegram-scheduled-messages-note {
   font-size: 12px;
     line-height: 16px;
}}



/* auto response */

.telegram-autoresponse-label {
  font-size: 14px;
  margin-bottom: 2px;
  padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .telegram-autoresponse-label {
  font-weight: 300;
}

@media (max-width: 1366px) {
.telegram-autoresponse-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.telegram-autoresponse-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

.telegram-autoresponse-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}

.telegram-autoresponse-input-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
   margin-top: 10px;
}

body.dark .telegram-autoresponse-input-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .telegram-autoresponse-input-row {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .telegram-autoresponse-input-row {
      padding: 10px;
  }}

  .telegram-autoresponse-input-row:last-child {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .telegram-autoresponse-input-row:last-child {
    margin-top: 5px;
    margin-bottom: 5px;
  }}

.telegram-autoresponse-no-and-char-count {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

.telegram-autoresponse-char-count {
  font-size: 12px;
  padding-top: 3px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .telegram-autoresponse-char-count {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.telegram-autoresponse-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

.telegram-autoresponse-input-row .autoresponseinput {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .telegram-autoresponse-input-row .autoresponseinput {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.telegram-autoresponse-input-row .autoresponseinput {
    font-size: 12px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.telegram-autoresponse-input-row .autoresponseinput {
    font-size: 13px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

.telegram-autoresponse-input-row .autoresponseinput::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.telegram-autoresponse-input-row .autoresponseinput::-webkit-scrollbar{
  width: 3px;
}


.telegram-autoresponse-input-row .autoresponsetriggerinput {
  width: 100%;
  resize: vertical;
  height: 46px;
  min-height: 46px;
  max-height: 66px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .telegram-autoresponse-input-row .autoresponsetriggerinput {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.telegram-autoresponse-input-row .autoresponsetriggerinput {
    font-size: 12px;
      padding: 3px 6px;
      height: 36px;
  min-height: 36px;
  max-height: 66px;
}}

@media (max-width: 768px) {
.telegram-autoresponse-input-row .autoresponsetriggerinput {
    font-size: 13px;
      padding: 3px 6px;
      height: 46px;
  min-height: 46px;
  max-height: 66px;
}}

.telegram-autoresponse-input-row .autoresponsetriggerinput::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.telegram-autoresponse-input-row .autoresponsetriggerinput::-webkit-scrollbar{
  width: 3px;
}

.autoresponsetriggerinput.readonly,
.autoresponseinput.readonly {
  cursor:default
}

.more-autoresponse-options-box {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 7px 12px;
border-radius: 6px;
  margin-top: 0px;
  margin-bottom: 5px;
 display: flex;
 flex-direction: row;
  justify-content: space-between;
    vertical-align: middle;
}

body.dark .more-autoresponse-options-box {
  background: rgba(0.0.0,0.1);
}

body.light .more-autoresponse-options-box {
  background: rgba(255,255,255,1)
}

.more-autoresponse-options-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
    .more-autoresponse-options-label {
  font-size: 12x;
}}

@media (max-width: 768px) {
    .more-autoresponse-options-label {
  font-size: 12px;
}}


.more-autoresponse-options-toggle {
  display: flex;
  gap: 6px;
    vertical-align: middle;
}

.more-autoresponse-options-toggle .toggle-icon {
  margin-left: -3px;
  margin-top: 0px;
  cursor: pointer;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.more-autoresponse-options-toggle .toggle-icon.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: pointer;
}

.more-autoresponse-options-toggle span {
  cursor: pointer;
}

@media (max-width: 768px) {
.more-autoresponse-options-toggle {
  display: flex;
  gap: 5px;
}}

.more-autoresponse-options-toggle label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .more-autoresponse-options-toggle label {
  font-size: 11px;
}}

@media (max-width:768px) {
  .more-autoresponse-options-toggle label {
  font-size: 12px;
}}

/* test whitelist */

.agent-builder-setting-integration-telegram-whitelist-section {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px 15px 15px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
}

body.dark .agent-builder-setting-integration-telegram-whitelist-section {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-builder-setting-integration-telegram-whitelist-section {
    border: 1px solid rgba(0, 0, 0, 0.2);
}


  .agent-builder-setting-integration-telegram-whitelist-section:last-child {
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .agent-builder-setting-integration-telegram-whitelist-section:last-child {
    margin-bottom: 5px;
  }}
     
.telegram-whitelist-items-label {
  font-size: 14px;
  line-height: 14px;
  font-weight: 300;
    vertical-align: middle;
}

@media (max-width: 1366px) {
  .telegram-whitelist-items-label {
  font-size: 12px;
  line-height: 12px;
}}

@media (max-width:768px) {
  .telegram-whitelist-items-label {
  font-size: 12px;
    line-height: 12x;
}}

.telegram-whitelist-items-label-required,
.telegram-whitelist-items-label-optional {
  
  font-size: 11px;
  line-height: 13px;
  font-weight: 300;
  margin-left: 3px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
.telegram-whitelist-items-label-required,
.telegram-whitelist-items-label-optional {
  font-size: 10px;
  line-height: 11px;
}}

@media (max-width:768px) {
.telegram-whitelist-items-label-required,
.telegram-whitelist-items-label-optional {
  font-size: 10px;
    line-height: 11px;
}}

.agent-builder-setting-integration-telegram-whitelist-items {
display: block;
}

.telegram-whitelist-items-label.group-id {
  margin-top: 5px;
}

.agent-builder-setting-integration-telegram-whitelist textarea {
  width: 100%;
  resize: none;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  background: rgba(255,255,255,0.9);
  padding: 3px 10px;
  border-radius: 3px;
  margin-top: 5px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .agent-builder-setting-integration-telegram-whitelist textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
.agent-builder-setting-integration-telegram-whitelist textarea {
  min-height: 50px;
    font-size: 12px;
      padding: 3px 6px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
}}

@media (max-width: 768px) {
.agent-builder-setting-integration-telegram-whitelist textarea {
  height: 27px;
  min-height: 27px;
  font-size: 13px;
  padding: 3px 6px;
}}

.agent-builder-setting-integration-telegram-whitelist textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.agent-builder-setting-integration-telegram-whitelist textarea::-webkit-scrollbar {
  width: 3px;
}



.telegram-scheduled-messages-label {
  font-size: 14px;
  margin-bottom: 0px;
  padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .telegram-scheduled-messages-label {
  font-weight: 300;
}

@media (max-width: 1366px) {
.telegram-scheduled-messages-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.telegram-scheduled-messages-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

.telegram-scheduled-messages-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}


.telegram-scheduled-messages-input-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
   margin-top: 10px;
}

body.dark .telegram-scheduled-messages-input-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1366px) {
  .telegram-scheduled-messages-input-row {
      padding: 10px;
  }}

  .telegram-scheduled-messages-input-row:last-child {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .telegram-scheduled-messages-input-row:last-child {
    margin-top: 5px;
    margin-bottom: 5px;
  }}

.telegram-scheduled-messages-no-and-char-count {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

.telegram-scheduled-messages-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.telegram-scheduled-messages-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

.telegram-scheduled-messages-input-row .scheduled-messages-input {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 3px 6px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

@media (max-width: 1366px) {
.telegram-scheduled-messages-input-row .scheduled-messages-input {
    font-size: 11px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.telegram-scheduled-messages-input-row .scheduled-messages-input {
    font-size: 11px;
      padding: 3px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

.telegram-scheduled-messages-input-row .scheduled-messages-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.telegram-scheduled-messages-input-row .scheduled-messages-input::-webkit-scrollbar{
  width: 3px;
}


.telegram-send-to-selector {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  width: auto;
  min-width: 75px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  text-align: center;
  height: 28px !important;
  min-height: 28px !important;
}

body.dark .telegram-send-to-selector {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .telegram-send-to-selector {
    font-size: 12px;
    min-width: 50px;
    padding: 3px 6px;
      height: 22px !important;
  min-height: 22px !important;
  }}


  @media (max-width: 768px) {
  .telegram-send-to-selector {
    font-size: 11px;
    min-width: 75px;
    padding: 3px 6px;
      height: 22px !important;
  min-height: 22px !important;
  }}


.telegram-send-to-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: auto;
  min-width: 200px;
  max-height: 300px;
  overflow: auto;
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);  
  border-radius: 6px;
  padding: 12px 10px;
  z-index: 999;
  box-sizing: border-box;
}

body.dark .telegram-send-to-dropdown {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .telegram-send-to-dropdown {
    top: calc(100% + 2px);
  padding: 3px 6px;
  }}

.telegram-send-to-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 1366px) {
  .telegram-send-to-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}}

.telegram-send-to-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  text-shadow: none;
  cursor: pointer;
}

body.dark .telegram-send-to-item {
  color: rgba(255, 255, 255, 0.9);
}


@media (max-width: 1366px) {
  .telegram-send-to-item {
  font-size: 11px;
  gap: 5px;
  }}

.telegram-send-to-item input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
  margin: 0; 
  padding: 0; 
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important; 
  min-height: 13px !important;
  flex-shrink: 0; 
  display: inline-block;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(0, 0, 0, 0.2); 
  border-radius: 50%;
  cursor: pointer;
  margin-top: 1px;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

body.dark .telegram-send-to-item input[type="checkbox"] {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .telegram-send-to-item input[type="checkbox"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.telegram-send-to-item input[type="checkbox"]:checked {
  background-color: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
body.dark .telegram-send-to-item input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

body.light .telegram-send-to-item input[type="checkbox"]:checked {
  background-color: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

.telegram-send-to-loading,
.telegram-send-to-empty {
  padding: 0px;
  color: rgba(0,0,0,0.6);
  text-shadow: none;
  font-size: 13px;
  text-align: center;
}

.scheduled-messages-config-box-main {
  margin-top: 15px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 5px;
}

.scheduled-messages-config-box-top {
  margin-top: 0px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-start;
   gap: 10px;
}


.scheduled-messages-config-box {
  margin-top: 0px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 10px;
}

@media (max-width: 1366px) {
.scheduled-messages-config-box {
  margin-top: 10px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 5px;
}}

@media (max-width: 768px) {
.scheduled-messages-config-box {
  margin-top: 10px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 10px;
}}

.scheduled-messages-config-box-left {
  position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 10px;
}

@media (max-width: 1366px) {
.scheduled-messages-config-box-left {
  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 5px;
}}

.scheduled-messages-config-box-right {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 10px;
}

@media (max-width: 1366px) {
.scheduled-messages-config-box-right {
  position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 5px;
}}



.telegram-scheduled-messages-date-box {
  margin-top: 10px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 5px;
}

.telegram-scheduled-messages-date-box-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.telegram-scheduled-messages-date-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.telegram-scheduled-messages-date-sub-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.telegram-scheduled-messages-date-sub-sub input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
  margin: 0; 
  padding: 0; 
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important; 
  min-height: 15px !important;
  flex-shrink: 0; 
  display: inline-block;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  cursor: pointer;
  margin-top: -2px;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

body.dark .telegram-scheduled-messages-date-sub-sub input[type="checkbox"] {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .telegram-scheduled-messages-date-sub-sub input[type="checkbox"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.telegram-scheduled-messages-date-sub-sub input[type="checkbox"]:checked {
  background-color: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
body.dark .telegram-scheduled-messages-date-sub-sub input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

body.light .telegram-scheduled-messages-date-sub-sub input[type="checkbox"]:checked {
  background-color: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

.telegram-scheduled-messages-date-input {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
    font-size: 13px;
  text-align: center;
  width: 100px;
}

body.dark .telegram-scheduled-messages-date-input {
  background: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.telegram-scheduled-messages-date-input:focus {
  outline: none;
}




.scheduled-messages-selector {
  position: relative;
  margin-top: 0px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 0px;
}


.selected-schedule-display-box {
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}

.selected-schedule-display-label {
  font-size: 14px;
  margin-bottom: 0px;
  padding-left: 3px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .selected-schedule-display-label {
  font-weight: 300;
}

@media (max-width: 1366px) {
.selected-schedule-display-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.selected-schedule-display-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

.selected-schedule-display {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  padding: 3px 6px;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px;
  cursor: pointer;
  width: 135px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

body.dark .selected-schedule-display {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.selected-schedule-display {
font-size: 11px;
width: 85px;
  height: 22px !important;
  min-height: 22px !important;
}}

@media (max-width: 768px) {
.selected-schedule-display {
font-size: 11px;
width: 95px;
  height: 22px !important;
  min-height: 22px !important;
}}

.selected-schedule-display:focus {
  outline: none;
}

.scheduled-messages-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);     
  width: 135px;
  height: auto;
  overflow: auto;
  padding: 10px 10px 12px 10px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

body.dark .scheduled-messages-dropdown {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.scheduled-messages-dropdown {
  top: calc(100% + 2px);
font-size: 11px;
width: 80px;
padding: 8px 6px 10px 6px;
}}

@media (max-width: 768px) {
.scheduled-messages-dropdown {
  top: calc(100% + 2px);
font-size: 11px;
width: 95px;
padding: 8px 6px 10px 6px;
}}


.scheduled-messages-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0px;
}

.scheduled-messages-dropdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  padding: 0px;
  border-radius: 0px;
}

.scheduled-messages-dropdown-item {
  display: flex;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  cursor: pointer;
  justify-content: center;
  font-size: 14px;
}

body.dark .scheduled-messages-dropdown-item {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.scheduled-messages-dropdown-item {
font-size: 11px;
}}


.scheduled-messages-dropdown-item:focus {
  outline: none;
}

.scheduled-messages-delete {
  background: transparent;
  border: none;
  color: rgba(220, 50, 70, 1);
  padding: 0px;
  margin-left: 0px;
  cursor: pointer;
  vertical-align: middle;
}

.scheduled-messages-actions {
  margin-top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.scheduled-messages-add-button {
    background: #7375e1;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

body.dark .scheduled-messages-add-button {
    background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.scheduled-messages-add-button {
font-size: 11px;
padding: 4px 6px;
}}


.group-select-empty {
  padding: 8px;
  color: #666;
  text-align: center;
}

.telegram-interval-select__control {
    font-size: 13px !important;
    font-weight: 300 !important;
    height: 28px !important;
    min-height: 28px !important;
    margin-top: 0px;
    padding: 0px 5px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 50px!important;
    max-width: 50px!important;
    cursor: pointer !important; 
    text-align: center !important;
  }
  
  body.dark .telegram-interval-select__control {
    background: rgba(0, 0, 0, 1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  @media (max-width: 1366px) {
    .telegram-interval-select__control {
      font-size: 11px !important;
      height: 22px !important;
      min-height: 22px !important;
          min-width: 38px!important;
    max-width: 38px!important;
    padding: 0px 3px !important;
    }}

      @media (max-width:768px) {
    .telegram-interval-select__control {
      font-size: 11px !important;
      height: 22px !important;
      min-height: 22px !important;
          min-width: 42px!important;
    max-width: 42px!important;
    padding: 0px 3px !important;
    }}

.telegram-interval-select__single-value,
.telegram-interval-select__input,
.telegram-interval-select__placeholder
 {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  text-shadow: none !important;
  margin-top: -2px !important
}

body.dark .telegram-interval-select__single-value,
body.dark .telegram-interval-select__input,
body.dark .telegram-interval-select__placeholder
 {
    color: rgba(255, 255, 255, 0.9) !important;
}


.telegram-interval-select__indicator,
.telegram-interval-select__dropdown-indicator {
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 300 !important;
  padding: 0px !important;
  padding-top: 5px !important;
    text-shadow: none !important;
  display: none !important;
}

body.dark .telegram-interval-select__indicator,
body.dark .telegram-interval-select__dropdown-indicator {
    color: rgba(255, 255, 255, 0.7) !important;
}

  .telegram-interval-select__indicator {
  margin-top: -5px !important;
}

  .telegram-interval-select__indicator-separator {
  display: none !important;
}

.telegram-interval-select__value-container {
  padding: 0 0px !important;
  display: flex;
  align-items: center;
}

.telegram-interval-select__menu {
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: none !important;
    font-weight: 300 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .telegram-interval-select__menu {
  background: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

  @media (max-width: 1366px) {
   .telegram-interval-select__menu {
   margin-top: 3px !important;
    }}

.telegram-interval-select__option {
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 0px 8px 0px 8px!important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
}

body.dark .telegram-interval-select__option {
  background: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

  @media (max-width: 1366px) {
    .telegram-interval-select__option {
  font-size: 11px !important;
    }}

.telegram-interval-select__option:last-child {
  padding-bottom: 0px !important;
}

.telegram-interval-box,
.telegram-time-range-box,
.telegram-random-delay-box {
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.telegram-send-to-box {
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.telegram-interval-box.disabled,
.telegram-time-range-box.disabled,

.telegram-random-delay-box.disabled,
.telegram-send-to-box.disabled {
  opacity: 0.7;
  pointer-events: none; 
}

.telegram-scheduled-messages-date-box.disabled {
  opacity: 0.7;
}

.telegram-interval-box.disabled .telegram-interval-select__control {
  opacity: 1;
  pointer-events: none;
}

.telegram-time-range-box.disabled .telegram-time-input {
  background-color: rgba(255, 255, 255, 0.9);
  color: rgba(0,0,0,0.6);
}

body.dark .telegram-interval-box.disabled .telegram-interval-select__control,
body.dark .telegram-time-range-box.disabled .telegram-time-input {
  opacity: 0.7;
  color: rgba(255,255,255,0.7);
}

.telegram-time-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telegram-time-input {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
  font-size: 13px;
text-align: center;
}

body.dark .telegram-time-input {
  background: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 1366px) {
.telegram-time-input {
  height: 22px !important;
  min-height: 22px !important;
    font-size: 11px;
    padding: 0px 3px;
}}

.telegram-time-input-start { width: auto; }
.telegram-time-input-end   { width: auto; }

.telegram-time-sep {
  color: rgba(255, 255, 255, 0.9)
}

body.light .telegram-time-sep {
  color: rgba(0, 0, 0, 0.9)
}

.telegram-time-input:focus {
  outline: none;
}







.telegram-random-delay {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telegram-random-delay-input {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  color: rgba(0, 0, 0, 0.7) !important;
  text-shadow: none !important;
  font-size: 13px;
text-align: center;
}

body.dark .telegram-random-delay-input {
  background: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.telegram-random-delay-input:focus {
  outline: none;
}


.selected-schedule-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}

@media (max-width: 1366px) {
  .selected-schedule-actions {
  margin-left: 5px;
  margin-top: -5px;
  }}

.telegram-scheduled-messages-control-button,
.telegram-scheduled-messages-save-button,
.telegram-scheduled-messages-edit-button,
.telegram-scheduled-messages-delete-button,
.telegram-scheduled-messages-cancel-button {
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  width: 33px;
  height: 28px !important;
  min-height: 28px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1366px) {
  .telegram-scheduled-messages-control-button,
  .telegram-scheduled-messages-save-button,
.telegram-scheduled-messages-edit-button,
.telegram-scheduled-messages-delete-button,
.telegram-scheduled-messages-cancel-button {
  width: 28px;
  height: 22px !important;
  min-height: 22px !important;
}}

.telegram-scheduled-messages-control-button,
.telegram-scheduled-messages-save-button,
.telegram-scheduled-messages-edit-button {
  background: rgb(145, 75, 255, 0.6);
}

.telegram-scheduled-messages-delete-button,
.telegram-scheduled-messages-cancel-button {
  background: rgba(220, 50, 70, 0.7);}

body.dark .telegram-scheduled-messages-control-button,
body.dark .telegram-scheduled-messages-save-button,
body.dark .telegram-scheduled-messages-edit-button,
body.dark .telegram-scheduled-messages-delete-button,
body.dark .telegram-scheduled-messages-cancel-button {
  background: rgba(0, 0, 0, 1);
}

body.light .telegram-scheduled-messages-control-button,
body.light .telegram-scheduled-messages-save-button,
body.light .telegram-scheduled-messages-edit-button,
body.light .telegram-scheduled-messages-delete-button,
body.light .telegram-scheduled-messages-cancel-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.telegram-scheduled-messages-control-button,
.telegram-scheduled-messages-save-button,
.telegram-scheduled-messages-edit-button,
.telegram-scheduled-messages-delete-button,
.telegram-scheduled-messages-cancel-button {
  padding: 3px 6px;
    font-size: 10px;
  margin-top: 6px;
}}

@media (max-width: 768px) {
.telegram-scheduled-messages-control-button,
.telegram-scheduled-messages-save-button,
.telegram-scheduled-messages-edit-button,
.telegram-scheduled-messages-delete-button,
.telegram-scheduled-messages-cancel-button {
  padding: 4px 7px;
}}

.telegram-scheduled-messages-control-button i,
.telegram-scheduled-messages-save-button i,
.telegram-scheduled-messages-edit-button i,
.telegram-scheduled-messages-delete-button i,
.telegram-scheduled-messages-cancel-button i {
  margin-right: 0px;
}


.telegram-scheduled-messages-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



.telegram-scheduled-messages-control-button {
    background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  width: 33px;
  height: 28px !important;
  min-height: 28px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1366px) {
  .telegram-scheduled-messages-control-button {
  width: 28px;
  height: 22px !important;
  min-height: 22px !important;
}}

body.dark .telegram-scheduled-messages-control-button {
  background: rgba(0, 0, 0, 1);
}

body.light .telegram-scheduled-messages-control-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.telegram-scheduled-messages-control-button {
  padding: 3px 6px;
    font-size: 10px;
  margin-top: 6px;
}}

@media (max-width: 768px) {
.telegram-scheduled-messages-control-button {
  padding: 4px 7px;
}}

.telegram-scheduled-messages-control-button i {
  margin-right: 0px;
}


.telegram-scheduled-messages-control-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.agent-builder-setting-integration-telegram-scheduled-messages .scheduled-messages-config-box input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.agent-builder-setting-integration-telegram-scheduled-messages .scheduled-messages-config-box input[type="time"]::-webkit-clear-button,
.agent-builder-setting-integration-telegram-scheduled-messages .scheduled-messages-config-box input[type="time"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

.agent-builder-setting-integration-telegram-scheduled-messages .scheduled-messages-config-box input[type="time"]::-moz-focus-inner {
  border: 0;
}

.agent-builder-setting-integration-telegram-scheduled-messages .scheduled-messages-config-box input[type="time"] {
  padding-right: 6px; 
}






body:has(.integration-form-overlay) .user-header,
body:has(.integration-form-overlay) .admin-header,
body:has(.integration-form-overlay) .main-footer,
body:has(.integration-form-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.integration-form-overlay) .global-footer,
body:has(.integration-form-overlay) .ask-treo,
body:has(.integration-form-overlay) .agent-interaction-dock-button,
body:has(.integration-form-overlay) .float-chat-button {
  display: none;
}

.integration-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .integration-form-overlay {
  background: rgba(0, 0, 0, 0.1);
}


.integration-form {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 25px 25px 25px 25px;
  width: 600px;
  max-height: 75vh;
  z-index: 99999;
  position: relative;
  overflow: hidden;
}

body.dark .integration-form {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .integration-form {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
    .integration-form {
          padding: 20px 20px 20px 20px;
  width: 400px;
  min-height: 230px;
  max-height: 75vh;
    }}


    @media (max-width: 768px) {
    .integration-form {
          max-width: 95%;
          padding: 18px 15px 20px 15px;
    }}



.integration-form-sub {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding: 0px;
  z-index: 99999;
  position: relative;
  margin: 0 auto;
  margin-top: 0px;
  width: 100%;
}

body.dark .integration-form-sub {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2)
}


@media (max-width: 768px) {
    .integration-form-sub {
  margin-top: 0px;
    }}


.integration-form-title,
.integration-confirmation-title {
  font-size: 26px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
  text-align: center;
}

body.light .integration-form-title,
body.light .integration-confirmation-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.integration-form-title,
.integration-confirmation-title {
  font-size: 18px;
    }}

.integration-form-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}


body.dark .integration-form-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .integration-form-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.integration-form-close-button {
  font-size: 11px;
    }}

    @media (max-width: 768px) {
.integration-form-close-button {
  font-size: 13px;
    }}

.integration-form-desc {
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
    margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

body.light .integration-form-desc {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.integration-form-desc {
  font-size: 11px;
  line-height: 17px;
      margin-top: 7px;
  margin-bottom: 15px;
  width: 90%;
}}

.integration-form-desc a {
      color: rgba(255, 225, 255, 0.9);
    text-decoration: underline;
}

body.light .integration-form-desc a {
      color: rgba(0, 0, 0, 0.9);
    text-decoration: underline;
}

.integration-form-selected-agent {
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 8px 15px 8px 15px;
border-radius: 8px;
width: auto;
min-width: 50%;
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}


body.dark .integration-form-selected-agent {
  background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.integration-form-selected-agent {
  font-size: 13px;
  margin-top: 15px;
  margin-bottom: 15px;
padding: 6px 12px 4px 12px;
}}


.integration-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.integration-form-group label {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 3px;
  margin-left: 3px;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
}

body.light .integration-form-group label {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .integration-form-group label {
  font-size: 11px;
    margin-bottom: 1px;
    }}

@media (max-width: 768px) {
    .integration-form-group label {
  font-size: 12px;
    margin-bottom: 3px;
    }}

.integration-form-group input,
.integration-form-group textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-style: normal;
  outline: none;
  transition: border 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .integration-form-group input,
body.light .integration-form-group textarea {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
    .integration-form-group input,
.integration-form-group textarea {
  font-size: 11px;
  padding: 6px 10px;
    border-radius: 6px;
}}

.integration-form-group input:focus,
.integration-form-group textarea:focus {
  border-color: none;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
    font-style: normal;
}


.integration-form-input-wrapper {
  position: relative;
}

.integration-form-input-wrapper input {
  width: 100%;
  padding-right: 36px; 
}

.toggle-visibility-icon {
  position: absolute;
  right: 10px;
  top: 48%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(145, 75, 255, 0.6);
  text-shadow: none;
  font-size: 13px;
  z-index: 2;
  display: none;
}

body.dark .toggle-visibility-icon {
   color: rgba(0, 0, 0, 0.7);
}

.integration-form-button-box {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
}

.integration-form-button {
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 15px;
    color: rgba(255, 255, 255, 0.9);
  background: rgba(145, 75, 255,0.3);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 125px;
  max-width: auto;
}


body.dark .integration-form-button {
background: rgb(0, 0, 0, 1);
}

body.light .integration-form-button {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.integration-form-button {
  font-size: 11px;
      padding: 10px 16px 8px 16px;
  }}

@media (max-width: 768px) {
.integration-form-button {
  font-size: 12px;
      padding: 10px 16px 8px 16px;
  }}

.integration-form-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}




.integration-form-success {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 14px;
    margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
}


.integration-form-warning {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 14px;
    margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.integration-form-warning i {
margin-right: 3px;
color: rgba(240, 255, 0, 0.9);
  text-shadow: none;
}

body.light .integration-form-warning i {
  color: rgba(220, 50, 70, 1);
}

body.light .integration-form-warning {
  color: rgba(0, 0, 0, 0.9);
}

/* confirm */

.integration-form-confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding: 0px 0px 0px 0px;
  width: auto;
  height: auto;
  z-index: 99999;
  position: relative;
  margin: 0 auto;
}

body.dark .integration-form-confirm {
  background: transparent
}


.integration-form-confirm-title {
  font-size: 17px;
  line-height: 25px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-align: center;
  padding-top: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
}

body.light .integration-form-confirm-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .integration-form-confirm-title {
  font-size: 13px;
    line-height: 16px;
    }}

@media (max-width: 768px) {
    .integration-form-confirm-title {
  font-size: 15px;
    line-height: 18px;
    }}


    .integration-form-confirm-avatar {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  vertical-align: middle;
}

@media (max-width: 1366px) {
      .integration-form-confirm-avatar {
  width: 200px;
  height: 200px;
      }}

.integration-form-confirm-details-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  vertical-align: middle;
  position: relative;
}

@media (max-width: 1366px) {
.integration-form-confirm-details-box {
        gap: 6px;
  }}

.integration-form-confirm-details {
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin-top: 0px;
  text-align: center;
}

.integration-form-confirm-details a {
    color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-decoration: none;
}

body.light .integration-form-confirm-details a {
  color: rgba(0, 0, 0, 0.9);
}

.integration-form-confirm-details-name {
font-size: 18px;
line-height: 24px;
margin-bottom: 6px;
}

@media (max-width: 1366px) {
.integration-form-confirm-details-name {
font-size: 12px;
line-height: 15px;
margin-bottom: 4px;
}}

.integration-form-confirm-details-username {
font-size: 15px;
line-height: 15px;
}

@media (max-width: 1366px) {
.integration-form-confirm-details-username {
font-size: 10px;
line-height: 13px;
}}

.integration-form-confirm-button-box {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  margin-top: 35px;
}

.integration-form-confirm-button {
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 10px;
    color: rgba(255, 255, 255, 0.9);
  background: rgba(145, 75, 255,0.3);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 150px;
  max-width: auto;
}

body.dark .integration-form-confirm-button {
background: rgb(0, 0, 0, 1);
}

body.light .integration-form-confirm-button {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.integration-form-confirm-button {
  font-size: 11px;
    padding: 8px 20px;
  }}

@media (max-width: 768px) {
.integration-form-confirm-button {
  font-size: 12px;
  }}

.integration-form-confirm-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}





/* success */

.integration-form-final {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding: 0px 0px 0px 0px;
  width: auto;
  height: auto;
  z-index: 99999;
  position: relative;
  margin: 0 auto;
}

body.dark .integration-form-final {
  background: transparent
}

.integration-form-final-title {
  font-size: 25px;
  line-height: 22px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  text-align: center;
      padding-top: 5px;
    margin-bottom: 10px;
}

@media (max-width: 1366px) {
.integration-form-final-title {
  font-size: 15px;
    line-height: 18px;
    }}

@media (max-width: 768px) {
.integration-form-final-title {
    font-size: 20px;
    line-height: 24px;
    width: 75%;
    }}

.integration-form-final-message {
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 225, 255, 0.9);
  text-shadow: none;
  margin: 0 auto;
    margin-top: 10px;
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
}

body.light .integration-form-final-message {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.integration-form-final-message {
  font-size: 11px;
  line-height: 13px;
      margin-top: 7px;
  margin-bottom: 10px;
  width: 100%;
}}

@media (max-width: 768px) {
.integration-form-final-message {
  font-size: 13px;
  line-height: 17px;
      margin-top: 7px;
  margin-bottom: 10px;
  width: 100%;
}}

.integration-form-final-details-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  vertical-align: middle;
  width: 50%;
  margin: 0 auto;
    margin-top: 20px;
  margin-bottom: 20px;
}

.integration-form-final-details-box i{
font-size: 20px;
}

@media (max-width: 768px) {
.integration-form-final-details-box i{
font-size: 16px;
}}


    .integration-form-final-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  vertical-align: middle;
}

@media (max-width: 1366px) {
      .integration-form-final-avatar {
  width: 100px;
  height: 100px;
      }}

      @media (max-width: 768px) {
      .integration-form-final-avatar {
  width: 125px;
  height: 125px;
      }}

    .integration-form-final-button-box {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 0 auto;
  margin-top: 25px;
  width: 50%;
}

@media (max-width: 1366px) {
    .integration-form-final-button-box {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 auto;
  margin-top: 20px;
  width: 60%;
}}

@media (max-width: 768px) {
    .integration-form-final-button-box {
  gap: 15px;
   width: 66%;
    }}

.integration-form-final-button,
.integration-form-final-button a {
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 125px;
  max-width: auto;
  text-align: center;
  text-decoration: none;
}


body.dark .integration-form-final-button {
background: rgb(0, 0, 0, 1);
}

body.light .integration-form-final-button {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.integration-form-final-button {
  font-size: 11px;
      padding: 10px 10px 8px 10px;
      width: auto;
        min-width: 100px;
  }}

@media (max-width: 768px) {
.integration-form-final-button {
  font-size: 12px;
  padding: 10px 10px 10px 10px;
  width: auto;
  max-width: 150px;
  }}

  .integration-form-final-button i {
  margin-right: 3px;
  }

.integration-form-final-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}




  .integration-copy-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
}

.integration-copy-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 25px 25px 25px 25px;
  width: 20%;
  height: auto;
  max-height: 25vh;
  z-index: 9999999999;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
}

body.dark .integration-copy-modal {
  background: rgb(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body:has(.agent-files-overlay) .user-header,
body:has(.agent-files-overlay) .admin-header,
body:has(.agent-files-overlay) .main-footer,
body:has(.agent-files-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-files-overlay) .global-footer,
body:has(.agent-files-overlay) .ask-treo,
body:has(.agent-files-overlay) .agent-interaction-dock-button,
body:has(.agent-files-overlay) .float-chat-button {
  display: none;
}

.agent-files-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .agent-files-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.agent-files-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 20px;
    z-index: 9999; 
  width: auto;
  min-width: 33%;
  max-width:33%;
  min-height: 300px;
}

body.dark .agent-files-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .agent-files-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 768px) {
  .agent-files-modal {
    width: 95%;
    max-width: 95%;
        padding: 20px 10px 20px 10px;
    min-height: 300px;
  }
}

.agent-files-header {
margin: 0 auto;
}

.agent-files-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 18px;
  text-align: center;
}

body.light .agent-files-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-title {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .agent-files-title {
    font-size: 13px;
    max-width: 90%;
    text-align: center;
    margin: 0 auto;
  }
}


.agent-files-desc {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 14px;
  line-height: 18px;
    text-align: center;
    width: 90%;
    margin: 0 auto;
      margin-top: 10px;
}

body.light .agent-files-desc {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-desc {
    font-size: 11px;
      line-height: 14px;
  }
}

@media (max-width: 768px) {
  .agent-files-desc {
    font-size: 13px;
    line-height: 17px;
        width: 90%;
    margin-top: 20px;
  }
}

.agent-files-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .agent-files-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-files-close {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-close {
    font-size: 11px;
  }
}

    @media (max-width: 768px) {
  .agent-files-close {
      font-size: 13px;
    }}

.agent-files-upload {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0px 0px 0px;
  align-items: flex-start;
  align-self: flex-start;
}

#agent-file-input {
  display: none;
}

.agent-files-upload-button-left {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  vertical-align: middle
}

@media (max-width: 1366px) {
.agent-files-upload-button-left {
  gap: 6px;
  }
}

@media (max-width: 768px) {
.agent-files-upload-button-left {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  vertical-align: middle
  }
}

.agent-files-select-label {
  display: inline-block;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
    width: auto;
  min-width: 66px;
}

body.dark .agent-files-select-label {
  background: rgb(0, 0, 0, 1);
}

body.light .agent-files-select-label {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-files-select-label {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 768px) {
.agent-files-select-label {
    font-size: 13px;
    padding: 3px 8px;
  }
}

.agent-files-selected-info {
  max-width: 256px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 1366px) {
.agent-files-selected-info {
    font-size: 11px;
    }
}

@media (max-width: 768px) {
.agent-files-selected-info {
    font-size: 12px;
  }
}

.agent-files-upload-button-right {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  vertical-align: middle
}

@media (max-width: 1366px) {
.agent-files-upload-button-right {
  gap: 6px;
  }
}

.agent-files-upload-button {
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
    width: auto;
  min-width: 66px;
}

body.light .agent-files-upload-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-upload-button {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 768px) {
  .agent-files-upload-button {
    font-size: 13px;
    padding: 3px 8px;
  }
}

.agent-files-upload-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-files-upload-button.cancel {
 background: rgba(220, 50, 70, 0.7);
}


.agent-files-upload-button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

body.dark .agent-files-upload-button {
    background: rgba(0, 0, 0, 1);
}




.agent-files-list-loading {
  min-height: 100px;
  max-height: 150px;
}

.agent-files-list {
  margin: 20px 0px 0px 0px;
  min-height: 100px;
  max-height: 150px;
}

.agent-files-list .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.agent-files-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease-in-out;
  position: relative;
    opacity: 1;
}

.agent-files-list-items.loading {
  opacity: 0;
}

.agent-files-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0px;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

body.dark .agent-files-list-item {
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.agent-files-list-item span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-files-list-item i {
  font-size: 28px;
  min-width: 28px;
  margin-right: -3px;
}

.agent-files-list-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 16px;
  text-align: left;
}

@media (max-width: 1366px) {
  .agent-files-list-title {
    font-size: 13px;
  }
}

.searching-file,
.no-file-uploaded {
font-size: 13.5px;
font-style: italic;
text-align: center;
}

@media (max-width: 1366px) {
.searching-file,
.no-file-uploaded {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
.searching-file,
.no-file-uploaded {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
.agent-files-no-file {
   font-size: 13px;
}}


.agent-files-list-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-files-list-icon-and-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-files-filename {
  font-weight: 300;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1366px) {
.agent-files-filename {
  font-size: 11px;
  gap: 6px;
  }
}

.agent-files-filesize {
  font-size: 11px;
  color:rgba(255, 255, 255, 0.9);
  font-style: italic;
}

body.light .agent-files-filesize {
  color:rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-files-filesize {
  font-size: 9.5px;
  }
}


.agent-files-list-name-size {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agent-files-list-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 1366px) {
.agent-files-list-actions {
  gap: 6px;
}
}

.agent-files-preview-button {
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
    width: auto;
  min-width: 66px;
  font-weight: 300;
}

body.dark .agent-files-preview-button {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-files-preview-button {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-files-preview-button {
    font-size: 11px;
      padding: 4px 6px;
  }
}

@media (max-width: 768px) {
.agent-files-preview-button {
    font-size: 12px;
      padding: 6px 6px;
  }
}

.agent-files-delete-button {
  background: rgba(220, 50, 70, 0.7);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
    width: auto;
  min-width: 66px;
    font-weight: 300;
}

body.light .agent-files-delete-button {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.agent-files-delete-button {
    font-size: 11px;
      padding: 4px 6px;
  }
}

@media (max-width: 768px) {
.agent-files-delete-button {
    font-size: 12px;
      padding: 6px 6px;
  }
}

.agent-files-delete-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-files-delete-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.dark .agent-files-delete-button {
    background: rgba(0, 0, 0, 1);
}


.agent-files-delete-button i {
  margin-right: 0px;
    font-size: 13px;
}

@media (max-width: 1366px) {
.agent-files-delete-button i {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
.agent-files-delete-button i {
    font-size: 12px;
  }
}

/* preview */

.agent-files-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.agent-files-preview-box {
 background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.6);
  width: 125%;
  min-width: 125%;
  max-width: 125%;
  min-height: 320px;
  max-height: 90vh;
  padding: 20px;
  overflow: hidden;
  position: relative;
    display: flex;
  flex-direction: column;
}

body.dark .agent-files-preview-box {
 background: rgba(0, 0, 0, 1);
     box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-files-preview-box {
 background: rgba(255, 255, 255, 1);
     box-shadow: none;
     border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .agent-files-preview-box {
  width: 120%;
  min-width: 120%;
  max-width: 120%;
  }}

  @media (max-width: 768px) {
  .agent-files-preview-box {
  width: 101%;
  min-width: 101%;
  max-width: 101%;
    padding: 10px;
      max-height: 85vh;
  }}

  .agent-files-preview-name {
  text-align: center;
  margin: 0 auto;
}

.agent-files-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
  text-align: center;
}

body.light .agent-files-preview-header {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-preview-header {
      font-size: 13px;
  }}

.agent-files-preview-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  border-radius: 0px 0px 0px 15px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 10px;
  right: 10px;
}

body.dark .agent-files-preview-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-files-preview-close {
    background: transparent;
  color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1366px) {
.agent-files-preview-close {
    font-size: 9px;
  }
}

    @media (max-width: 768px) {
.agent-files-preview-close {
      font-size: 11px;
    }}

.agent-files-preview-content {
  white-space: pre-wrap;
  word-break: break-word; 
  overflow-wrap: anywhere; 
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  text-shadow: none;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: auto;
  border-top: 1px dotted rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    flex-grow: 1;
    padding: 10px 0px 10px 0px;
    color: rgba(255, 255, 255, 0.9);
}

body.light .agent-files-preview-content {
    border-top: 1px dotted rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-files-preview-content {
  font-size: 11px;
  line-height: 13px;
  }}

  @media (max-width: 768px) {
  .agent-files-preview-content {
  font-size: 12px;
  line-height: 15px;
  }}

  .agent-files-preview-content pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
}

.agent-files-preview-content::-webkit-scrollbar {
  width: 3px;
  height: 6px;
  margin-top: 6px !important;
  padding-left: 3px;
  display: none;
}

.agent-files-preview-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.agent-files-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 9999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-files-message-content {
background: rgba(145, 75, 255,0.96);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 50%;
  max-width: 75%;
  height: auto;
  min-height: auto;
  white-space: pre-line !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body.dark .agent-files-message-content {
background: rgba(0, 0, 0, 1);
border: 1px solid rgba(255, 255, 255, 0.2); ;
}

@media (max-width: 768px) {
  .agent-files-message-content {
        padding: 20px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  }}



    .agent-files-message-content h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-files-message-content h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-files-message-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}


.agent-files-message-content p {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
    text-align: center;
}

@media (max-width: 1366px) {
.agent-files-message-content p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-files-message-content p {
  font-size: 14px;
  margin-bottom: 6px;
  }}





.agent-files-message-button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}


.agent-files-message-button-group-confirm,
.agent-files-message-button-group-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
}


body.dark .agent-files-message-button-group-cancel,
body.dark .agent-files-message-button-group-confirm {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.agent-files-message-button-group-cancel,
.agent-files-message-button-group-confirm {
  font-size: 13px;
    padding:6px 20px;
  }}

@media (max-width: 768px) {
.agent-files-message-button-group-cancel,
.agent-files-message-button-group-confirm {
  font-size: 12px;
  }}

.agent-files-message-button-group-confirm .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}



/* excel */

  .agent-files-excel-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 14px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.9);
  overflow-x: auto;
  padding-right: 0px;
}

@media (max-width: 1366px) {
    .agent-files-excel-preview {
        font-size: 11px;
    }}

.excel-sheet-block {
  border: none;
  padding: 0px;
  border-radius: 0px;
  background: transparent;
  overflow-x: auto;
}

.excel-row {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.excel-cell {
  padding: 6px 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  white-space: pre-wrap;
  min-width: 60px;
  overflow-wrap: break-word;
}


@media (max-width: 1366px) {
.excel-cell {
  padding: 3px 5px;
    }}

.excel-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.excel-cell:last-child {
  border-right: none;
}



/* tabs */

.agent-sources-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px auto;
}

.agent-sources-tabs button {
  padding: 6px 12px;
  background: rgba(145, 75, 255,0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  min-width: 20%;
  max-width: 20%;
}

body.dark .agent-sources-tabs button {
  background: rgba(0,0,0,0.1);
}

body.light .agent-sources-tabs button {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-sources-tabs button {
    font-size: 12px;
  }}

@media (max-width: 768px) {
  .agent-sources-tabs button {
    font-size: 13px;
    padding: 3px 12px;
  }}

.agent-sources-tabs button.active {
  background: rgba(125, 55, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); 
}

body.dark .agent-sources-tabs button.active {
  background: rgba(255,255,255,0.2);
}

body.light .agent-sources-tabs button.active {
  background: rgba(0,0,0,0.9);
  color: rgba(255, 255, 255, 0.9);
}

.agent-sources-placeholder {
font-size: 13.5px;
font-style: italic;
text-align: center;
margin-top: 36px;
}

@media (max-width: 1366px) {
.agent-sources-placeholder {
    font-size: 12px;
}}

.agent-sources-placeholder i {
font-size: 36px;
margin-bottom: 10px;
}
.rdrCalendarWrapper {
  box-sizing: border-box;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateDisplay{
  display: flex;
  justify-content: space-between;
}

.rdrDateDisplayItem{
  flex: 1 1;
  width: 0;
  text-align: center;
  color: inherit;
}

.rdrDateDisplayItem + .rdrDateDisplayItem{
    margin-left: 0.833em;
  }

.rdrDateDisplayItem input{
    text-align: inherit
  }

.rdrDateDisplayItem input:disabled{
      cursor: default;
    }

.rdrDateDisplayItemActive{}

.rdrMonthAndYearWrapper {
  box-sizing: inherit;
  display: flex;
  justify-content: space-between;
}

.rdrMonthAndYearPickers{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdrMonthPicker{}

.rdrYearPicker{}

.rdrNextPrevButton {
  box-sizing: inherit;
  cursor: pointer;
  outline: none;
}

.rdrPprevButton {}

.rdrNextButton {}

.rdrMonths{
  display: flex;
}

.rdrMonthsVertical{
  flex-direction: column;
}

.rdrMonthsHorizontal > div > div > div{
  display: flex;
  flex-direction: row;
}

.rdrMonth{
  width: 27.667em;
}

.rdrWeekDays{
  display: flex;
}

.rdrWeekDay {
  flex-basis: calc(100% / 7);
  box-sizing: inherit;
  text-align: center;
}

.rdrDays{
  display: flex;
  flex-wrap: wrap;
}

.rdrDateDisplayWrapper{}

.rdrMonthName{}

.rdrInfiniteMonths{
  overflow: auto;
}

.rdrDateRangeWrapper{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateInput {
  position: relative;
}

.rdrDateInput input {
    outline: none;
  }

.rdrDateInput .rdrWarning {
    position: absolute;
    font-size: 1.6em;
    line-height: 1.6em;
    top: 0;
    right: .25em;
    color: #FF0000;
  }

.rdrDay {
  box-sizing: inherit;
  width: calc(100% / 7);
  position: relative;
  font: inherit;
  cursor: pointer;
}

.rdrDayNumber {
  display: block;
  position: relative;
}

.rdrDayNumber span{
    color: #1d2429;
  }

.rdrDayDisabled {
  cursor: not-allowed;
}

@supports (-ms-ime-align: auto) {
  .rdrDay {
    flex-basis: 14.285% !important;
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  pointer-events: none;
}

.rdrInRange{}

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  pointer-events: none;
}

.rdrDayHovered{}

.rdrDayActive{}

.rdrDateRangePickerWrapper{
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDefinedRangesWrapper{}

.rdrStaticRanges{
  display: flex;
  flex-direction: column;
}

.rdrStaticRange{
  font-size: inherit;
}

.rdrStaticRangeLabel{}

.rdrInputRanges{}

.rdrInputRange{
  display: flex;
}

.rdrInputRangeInput{}

.rdrCalendarWrapper{
  color: #000000;
  font-size: 12px;
}

.rdrDateDisplayWrapper{
  background-color: rgb(239, 242, 247);
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
  border: 1px solid transparent;
}

.rdrDateDisplayItem input{
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: #849095;
  }

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrDateDisplayItemActive input{
    color: #7d888d
  }

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthAndYearPickers select{
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 30px 10px 10px;
    border-radius: 4px;
    outline: 0;
    color: #3e484f;
    background: url("data:image/svg+xml;utf8,<svg width=%279px%27 height=%276px%27 viewBox=%270 0 9 6%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><g id=%27Artboard%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27 transform=%27translate%28-636.000000, -171.000000%29%27 fill-opacity=%270.368716033%27><g id=%27input%27 transform=%27translate%28172.000000, 37.000000%29%27 fill=%27%230E242F%27 fill-rule=%27nonzero%27><g id=%27Group-9%27 transform=%27translate%28323.000000, 127.000000%29%27><path d=%27M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z%27 id=%27arrow%27></path></g></g></g></svg>") no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    text-align: center
  }

.rdrMonthAndYearPickers select:hover{
      background-color: rgba(0,0,0,0.07);
    }

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrNextPrevButton {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0.833em;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #EFF2F7
}

.rdrNextPrevButton:hover{
    background: #E1E7F0;
  }

.rdrNextPrevButton i {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    text-align: center;
    border-style: solid;
    margin: auto;
    transform: translate(-3px, 0px);
  }

.rdrPprevButton i {
    border-width: 4px 6px 4px 4px;
    border-color: transparent rgb(52, 73, 94) transparent transparent;
    transform: translate(-3px, 0px);
  }

.rdrNextButton i {
    margin: 0 0 0 7px;
    border-width: 4px 4px 4px 6px;
    border-color: transparent transparent transparent rgb(52, 73, 94);
    transform: translate(3px, 0px);
  }

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
}

.rdrMonth .rdrWeekDays {
    padding: 0;
  }

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: #1d2429
}

.rdrDay:focus {
    outline: 0;
  }

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500
}

.rdrDayToday .rdrDayNumber span:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }

.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
      background: #fff;
    }

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
          color: rgba(255, 255, 255, 0.85);
        }

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }

.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 2px;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: solid 1px #eff2f7;
  background: #fff;
}

.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: 1px solid #eff2f7;
  padding: 0;
  background: #fff
}

.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
      background: #eff2f7;
    }

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122)
}

.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
}

.rdrDayPassive .rdrDayNumber span{
    color: #d5dce0;
  }

.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
    display: none;
  }

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
}

.rdrDayDisabled .rdrDayNumber span{
    color: #aeb9bf;
  }

.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}

body:has(.agent-analytics-overlay) .user-header,
body:has(.agent-analytics-overlay) .admin-header,
body:has(.agent-analytics-overlay) .main-footer,
body:has(.agent-analytics-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-analytics-overlay) .global-footer,
body:has(.agent-analytics-overlay) .ask-treo,
body:has(.agent-analytics-overlay) .agent-interaction-dock-button,
body:has(.agent-analytics-overlay) .float-chat-button {
  display: none;
}

.agent-analytics-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .agent-analytics-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.agent-analytics-modal {
    position: fixed;
    inset: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 10px 15px;
  width: auto;
  min-width: 40%;
  max-width: 40%;
    min-height: 95vh;
  max-height: 95vh;
  overflow: hidden;
      z-index: 999;
}

body.dark .agent-analytics-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-analytics-modal {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 768px) {
  .agent-analytics-modal {
    width: 95%;
    max-width: 95%;
        padding: 10px;
    min-height: 85vh;
    max-height: 85vh;
  }
}

.agent-analytics-modal a {
  text-decoration: underline !important;
}

.agent-analytics-title {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  text-align: center;
  font-weight: 300;
}

body.light .agent-analytics-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-analytics-title {
  font-size: 20px;
}}

@media (max-width: 768px) {
.agent-analytics-title {
  font-size: 22px;
}}

.agent-analytics-desc {
  font-size: 16px;
  line-height: 20px;
  color:rgba(255,255,255,1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  max-width: 98%;
}

body.light .agent-analytics-desc {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-analytics-desc {
  font-size: 13px;
    line-height: 16px;
}}

@media (max-width: 768px) {
.agent-analytics-desc {
  font-size: 16px;
    line-height: 18px;
    margin-top: 10px;
}}

.agent-analytics-modal::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  margin-top: 0px !important;
  padding-left: 3px;
}

.agent-analytics-scrollable {
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
  max-height: calc(70vh); 
  padding-right: 2px;
}

@media (max-width: 1366px) {
  .agent-analytics-scrollable {
      max-height: calc(60vh); 
        padding-right: 0px;
  }}


@media (max-width: 768px) {
  .agent-analytics-scrollable {
      max-height: calc(58vh); 
        padding-right: 0px;
  }}

.agent-analytics-scrollable::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  margin-top: 0px !important;
  padding-left: 5px;
    display:none;
}

@media (max-width: 1366px) {
.agent-analytics-scrollable::-webkit-scrollbar {
  padding-left: 0px;
  display:none;
  }}


@media (max-width: 768px) {
.agent-analytics-scrollable::-webkit-scrollbar {
  padding-left: 0px;
  display:none;
  }}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
}

@media (max-width: 1366px) {
    .analytics-header {
  margin-top: 10px;
  margin-bottom: 10px;
    }}

    @media (max-width: 768px) {
    .analytics-header {
  margin-top: 20px;
  margin-bottom: 10px;
  gap: 10px;
    }}
    

.analytics-filter-page-and-date {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 1366px) {
    .analytics-filter-page-and-date {
            gap: 5px;
}}

.agent-analytics-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}


body.dark .agent-analytics-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-analytics-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-analytics-close-button {
    font-size: 11px;
  }
}

    @media (max-width: 768px) {
.agent-analytics-close-button {
      font-size: 13px;
    }}

.analytics-loading,
.analytics-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
  font-size: 15px;
  font-weight: 300 !important;
}

body.light .analytics-loading,
body.light .analytics-empty {
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .analytics-loading,
.analytics-empty {
font-size: 12px;
}}

@media (max-width: 768px) {
    .analytics-loading,
.analytics-empty {
font-size: 13px;
}}

.analytics-loading .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.analytics-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
    max-height: 72vh;
}

@media (max-width: 1366px) {
    .analytics-log-list {
        max-height: 66vh;
          gap: 5px;
    }}

    @media (max-width: 768px) {
    .analytics-log-list {
        max-height: 68vh;
          gap: 8px;
    }}

.analytics-log-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  margin-top: 6px !important;
  padding-left: 3px;
}

.analytics-log-item {
  padding: 10px;
background: rgba(145, 75, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
position: relative;
}

body.dark .analytics-log-item {
    background: rgba(0, 0, 0, 1)
}

body.light .analytics-log-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}


.analytics-log-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.analytics-log-date {
    font-style: italic;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 5px;
}

body.light .analytics-log-date {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .analytics-log-date {
    font-size: 10px;
    }}

    .analytics-log-right {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;

}

@media (max-width: 1366px) {
      .analytics-log-right {
      display: flex;
      gap: 4px;
}}

@media (max-width: 768px) {
      .analytics-log-right {
      display: flex;
      gap: 4px;
      margin-top: -5px;
      margin-right: -2px;
}}

.analytics-log-source-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
}

body.dark .analytics-log-source-icon {
  border: none;
}

body.light .analytics-log-source-icon {
  border: none;
}

@media (max-width: 1366px) {
.analytics-log-source-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin-top: -2px;
}}

@media (max-width: 768px) {
.analytics-log-source-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin-top: -2px;
}}


.analytics-log-greeting-native,
.analytics-log-type-badge-telegram,
.analytics-log-moderation-badge-telegram,
.analytics-log-greeting-telegram,
.analytics-log-welcome-telegram {
  padding: 0px 0px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  -webkit-user-select: none; 
          user-select: none;
  white-space: nowrap;
  display: inline-block;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

body.dark .analytics-log-greeting-native,
body.dark .analytics-log-type-badge-telegram,
body.dark .analytics-log-moderation-badge-telegram,
body.dark .analytics-log-greeting-telegram,
body.dark .analytics-log-welcome-telegram {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.analytics-log-greeting-native,
.analytics-log-type-badge-telegram,
.analytics-log-moderation-badge-telegram,
.analytics-log-greeting-telegram,
.analytics-log-welcome-telegram {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 9px;
}}


.analytics-log-greeting-native {
  background: rgba(145, 75, 255, 0.6);
}

.analytics-log-type-badge-telegram,
.analytics-log-moderation-badge-telegram,
.analytics-log-greeting-telegram,
.analytics-log-welcome-telegram {
  background: rgb(45, 169, 219);
}


.analytics-log-interaction-response {
  display: flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
}

.analytics-log-interaction-label,
.analytics-log-interaction-group,
.analytics-log-interaction-prompt,
.analytics-log-interaction-response,
.analytics-log-interaction-response-type,
.analytics-log-greeting-name,
.analytics-log-action-type,
.analytics-log-action-prompt,
.analytics-log-action-response,
.analytics-log-action-followup,
.analytics-log-automation-group,
.analytics-log-automation-type,
.analytics-log-automation-message,
.analytics-log-interaction-response-type  {
  font-size: 15px;
  line-height: 15px;
  white-space: pre-wrap;
  max-width: 95%;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
.analytics-log-interaction-label,
.analytics-log-interaction-group,
.analytics-log-interaction-prompt,
.analytics-log-interaction-response,
.analytics-log-interaction-response-type,
.analytics-log-greeting-name,
.analytics-log-action-type,
.analytics-log-action-prompt,
.analytics-log-action-response,
.analytics-log-action-followup,
.analytics-log-automation-group,
.analytics-log-automation-type,
.analytics-log-automation-message,
.analytics-log-interaction-response-type  {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 5px;
}}

@media (max-width: 768px) {
.analytics-log-action-response,
.analytics-log-action-followup {
  display: flex;
  flex-direction: column;
  gap: 5px;
}}

.analytics-log-interaction-response-type  {
  font-size: 15px;
  margin-bottom: 5px;
}

.analytics-log-interaction-input,
.rich-text,
.analytics-log-greeting-text,
.analytics-log-greeting-text a,
.analytics-log-action-value,
.analytics-action-group-name,
.analytics-action-group-name a,
.analytics-log-interaction-group,
.analytics-log-interaction-group a,
.analytics-log-interaction-response-type-value,
.analytics-log-action-sender,
.analytics-log-action-sender a,
.analytics-log-actions-ignored,
.analytics-log-actions-failed,
.analytics-log-actions-moderation,
.analytics-log-actions-value,
.analytics-log-actions-value a,
.analytic-log-action-follow-up,
.analytic-log-action-follow-up a,
.analytics-log-automation-value {
font-weight: 300;
  font-size: 15px;
  line-height: 22px;
}

@media (max-width: 768px) {
  .analytics-log-interaction-input,
.rich-text,
.analytics-log-greeting-text,
.analytics-log-greeting-text a,
.analytics-log-action-value,
.analytics-action-group-name,
.analytics-action-group-name a,
.analytics-log-interaction-group,
.analytics-log-interaction-group a,
.analytics-log-interaction-response-type-value,
.analytics-log-action-sender,
.analytics-log-action-sender a,
.analytics-log-actions-ignored,
.analytics-log-actions-failed,
.analytics-log-actions-moderation,
.analytics-log-actions-value,
.analytics-log-actions-value a,
.analytic-log-action-follow-up,
.analytic-log-action-follow-up a,
.analytics-log-automation-value {
font-weight: 300;
  font-size: 13px;
  line-height: 18px;
}}

.analytics-log-interaction-response-type-value {
font-weight: 300;
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 768px) {
  .analytics-log-interaction-response-type-value {
font-weight: 300;
  font-size: 12px;
  line-height: 16px;
}}

.analytics-log-interaction-response a,
.analytics-log-interaction-group a,
.analytics-log-action-prompt a,
.analytics-log-action-followup a,
.analytics-log-automation-group a {
     text-decoration: underline;
   color: rgba(255, 255, 255, 0.9);
}

body.light .analytics-log-interaction-response a,
body.light .analytics-log-interaction-group a,
body.light .analytics-log-action-prompt a,
body.light .analytics-log-action-followup a,
body.light .analytics-log-automation-group a {
     text-decoration: underline;
   color: rgba(0, 0, 0, 0.9);
}

.analytics-log-interaction-label,
.analytics-log-action-label,
.analytics-log-automation-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.light .analytics-log-interaction-label,
body.light .analytics-log-action-label,
body.light .analytics-log-automation-label {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
}


@media (max-width: 768px) {
.analytics-log-interaction-label,
.analytics-log-action-label,
.analytics-log-automation-label,
.analytics-log-action-value {
    font-size: 13px;
}}

.analytics-log-interaction-label a,
.analytics-log-action-label a,
.analytics-log-automation-label a {
    font-weight: 500;
    color: rgba(40, 50, 100, 1) !important;
    text-shadow: none;
}

body.light .analytics-log-interaction-label a,
body.light .analytics-log-action-label a,
body.light .analytics-log-automation-label a {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
}

.analytics-log-interaction-response-type-label {
      font-weight: 500;
}

@media (max-width: 768px) {
.analytics-log-interaction-response-type-label {
     font-size: 12px;
}}

.analytics-log-interaction-prompt a.analytics-log-interaction-label {
   text-decoration: underline;
   color: rgba(255, 255, 255, 0.9);
}

body.light .analytics-log-interaction-prompt a.analytics-log-interaction-label {
   text-decoration: underline;
   color: rgba(0, 0, 0, 0.9);
}

.analytics-log-action-sender {
    font-size: 15px;
        margin-bottom: 10px;
}

@media (max-width: 1366px) {
.analytics-log-action-sender {
    font-size: 12px;
        margin-bottom: 5px;
}}

@media (max-width: 768px) {
.analytics-log-action-sender {
    font-size: 13px;
}}


.analytics-log-action-sender .analytics-log-username-link {
   text-decoration: underline;
   color: rgba(255, 255, 255, 0.9);
}

body.light .analytics-log-action-sender .analytics-log-username-link {
  color: rgba(0, 0, 0, 0.9);
}

.analytics-log-interaction-config,
.analytics-log-interaction-protection,
.analytics-log-interaction-ignored,
.analytics-log-actions-moderation,
.analytics-log-actions-ignored,
.analytics-log-actions-failed,
.analytic-log-action-follow-up,
.analytic-log-action-follow-up a {
  display: inline-block;
  color: rgba(240, 255, 0, 1);
  text-shadow: none;
  font-size: 14px;
  line-height: 17px;
  white-space: pre-wrap;
  margin-top: 0px;
  margin-bottom: 0px;
}

body.light .analytics-log-interaction-config,
body.light .analytics-log-interaction-protection,
body.light .analytics-log-interaction-ignored,
body.light .analytics-log-actions-moderation,
body.light .analytics-log-actions-ignored,
body.light .analytics-log-actions-failed,
body.light .analytic-log-action-follow-up,
body.light .analytic-log-action-follow-up a {
  color: rgba(220, 50, 70, 1);
  text-shadow: none;
}

@media (max-width: 1366px) {
.analytics-log-interaction-config,
.analytics-log-interaction-protection,
.analytics-log-interaction-ignored,
.analytics-log-actions-moderation,
.analytics-log-actions-ignored,
.analytics-log-actions-failed,
.analytic-log-action-follow-up,
.analytic-log-action-follow-up a {
  font-size: 12px;
  line-height: 15px;
}}

@media (max-width: 768px) {
.analytics-log-interaction-config,
.analytics-log-interaction-protection,
.analytics-log-interaction-ignored,
.analytics-log-actions-moderation,
.analytics-log-actions-ignored,
.analytics-log-actions-failed,
.analytic-log-action-follow-up,
.analytic-log-action-follow-up a {
  font-size: 13px;
  line-height: 16px;
}}


.no-follow-up {
  color: rgba(240, 255, 0, 0.9);
}

.agent-analytics-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  gap: 15px;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  padding: 0px 0px;
  bottom: 20px;
  width: 96%;
}

.agent-analytics-pagination button {
  font-size: 13px;
  padding: 4px 20px;
  border: none;
  border-radius: 4px;
  background: rgb(145, 75, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

@media (max-width: 1366px) {
  .agent-analytics-pagination button {
  font-size: 12px;
}}

@media (max-width: 768px) {
  .agent-analytics-pagination button {
  font-size: 12px;
}}

body.dark .agent-analytics-pagination button {
  background: rgba(0,0,0,0.1);
}

body.light .agent-analytics-pagination button {
  background: rgb(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

.agent-analytics-pagination button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.agent-analytics-pagination button:hover:not(:disabled) {
  background: rgba(145, 75, 255, 0.7);
}

body.dark .agent-analytics-pagination button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 1);
}

.agent-analytics-pagination span {
font-size: 13px;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1366px) {
  .agent-analytics-pagination span {
  font-size: 11px;
}}

@media (max-width: 768px) {
  .agent-analytics-pagination span {
  font-size: 12px;
}}

.analytics-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 1366px) {
    .analytics-tabs {
  gap: 5px;
}}

.analytics-tabs button {
  padding: 6px 12px;
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
   text-shadow: none;
  font-size: 13.5px;
  font-weight: 300;
  cursor: pointer;
  min-height: 30px;
}

body.dark .analytics-tabs button {
    background: rgba(0, 0, 0, 1)
}

body.light .analytics-tabs button {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.analytics-tabs button {
    font-size: 11px;
      padding: 3px 10px;
      min-height: 23px;
  }}

@media (max-width: 768px) {
.analytics-tabs button {
    font-size: 12px;
    padding: 4px 8px;
  }}

.analytics-tabs button.active {
  background: rgba(125, 55, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
   text-shadow: none;
  font-weight: 300;
}

body.light .analytics-tabs button.active {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .analytics-tabs button.active {
  font-weight: 300;
    }}

body.dark .analytics-tabs button.active {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

.analytics-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
  font-size: 13px;
}

.analytics-tabs button:disabled {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

.agent-analytics-filter-perpage {
    z-index: 999999;
}

.agent-analytics-filter-perpage__control {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 3px !important;
    border-radius: 6px !important;
    background: rgba(145, 75, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    width: auto!important;
    cursor: pointer !important; 
  }
  
  body.dark .agent-analytics-filter-perpage__control {
    background: rgba(0, 0, 0, 1) !important;
  }

  body.light .agent-analytics-filter-perpage__control {
    background: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
  }

  @media (max-width: 1366px) {
    .agent-analytics-filter-perpage__control {
      font-size: 11px !important;
      height: 26px !important;
      min-height: 26px !important;
    width: auto!important;
    }}

      @media (max-width: 768px) {
    .agent-analytics-filter-perpage__control {
    width: auto!important;
    }}
    
.agent-analytics-filter-perpage__single-value,
.agent-analytics-filter-perpage__input,
.agent-analytics-filter-perpage__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 300 !important;
  margin-top: -4px;
  font-size: 13px;
}

body.light .agent-analytics-filter-perpage__single-value,
body.light .agent-analytics-filter-perpage__input,
body.light .agent-analytics-filter-perpage__placeholder
 {
  color: rgba(0, 0, 0, 0.9) !important;
 }

      @media (max-width: 768px) {
.agent-analytics-filter-perpage__single-value {
  margin-top: 0px;
    }}

.agent-analytics-filter-perpage__indicator,
.agent-analytics-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.7) !important;
  padding-left: 5px !important;
  margin-top: -4px;
}

body.light .agent-analytics-filter-perpage__indicator,
body.light .agent-analytics-filter-perpage__dropdown-indicator {
  color: rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__indicator {
  margin-top: -5px !important;
}}

@media (max-width: 768px) {
  .agent-analytics-filter-perpage__indicator,
.agent-analytics-filter-perpage__dropdown-indicator {
  padding-left: 0px !important;
}}

@media (max-width: 768px) {
.agent-analytics-filter-perpage__dropdown-indicator {
  padding-left: 3px !important;
  padding-right: 0px !important;
  width: 18px;
}}

  .agent-analytics-filter-perpage__indicator-separator {
  margin-top: 6px !important;
     height: 16px !important;
  }

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__indicator-separator {
  margin-top: 7px !important;
  height: 16px !important;
}}

@media (max-width: 768px) {
  .agent-analytics-filter-perpage__indicator-separator {
  margin-top: 9px !important;
  height: 12px !important;
}}

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__dropdown-indicator {
  margin-top: -5px !important;
}}

.agent-analytics-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
}

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__value-container {
  margin-top: -6px !important;
}}

.agent-analytics-filter-perpage__menu {
  background: #7375e1  !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .agent-analytics-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .agent-analytics-filter-perpage__menu {
  background: rgba(255, 255, 255, 0.9)!important;
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
.agent-analytics-filter-perpage__menu {
  margin-top: 5px !important;
}}

.agent-analytics-filter-perpage__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #7375e1  !important;
}

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

  @media (max-width: 768px) {
  .agent-analytics-filter-perpage__option {
    font-size: 11px !important;
    padding: 4px 10px 4px 10px!important;
  }}

.agent-analytics-filter-perpage__option:last-child {
  padding-bottom: 6px !important;
}

@media (max-width: 1366px) {
  .agent-analytics-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

body.dark .agent-analytics-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}


body.light .agent-analytics-filter-perpage__option {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}


.analytics-date-filter {
  position: relative;
   z-index: 100;
}

.analytics-date-toggle-button {
    font-size: 13px;
    height: 30px;
    min-height: 30px;
    padding: 0px 10px;
    border-radius: 6px;
    background: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
}

body.dark .analytics-date-toggle-button {
    background: rgba(0, 0, 0, 1);
}

body.light .analytics-date-toggle-button {
      background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .analytics-date-toggle-button {
    font-size: 12px;
            height: 26px;
    min-height: 26px;
    }}

@media (max-width: 768px) {
    .analytics-date-toggle-button {
    font-size: 11px;
            height: 26px;
    min-height: 26px;
    }}

.analytics-date-toggle-button i {
    margin-right: 3px;
}

.analytics-reset-button {
    font-size: 13px;
    height: 30px;
    min-height: 30px;
    padding: 0px 10px;
    border-radius: 6px;
    background: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    margin-left: 0px;
}

body.dark .analytics-reset-button {
    background: rgba(0, 0, 0, 1);
}

body.light .analytics-reset-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.analytics-reset-button {
    font-size: 11px;
            height: 26px;
    min-height: 26px;
    }}

.analytics-reset-button i {
    margin-right: 3px;
}

.rdrSelected,
.rdrInRange,
.rdrStartEdge,
.rdrEndEdge {
  background: #7375e1 !important;
  color: white !important;
}

body.dark .rdrSelected,
body.dark .rdrInRange,
body.dark .rdrStartEdge,
body.dark .rdrEndEdge {
  background: rgba(0, 0, 0, 1) !important;
  color: #fff !important;
}

body.light .rdrSelected,
body.light .rdrInRange,
body.light .rdrStartEdge,
body.light .rdrEndEdge {
  background: rgba(0, 0, 0, 1) !important;
  color: #fff !important;
}

body.light .rdrDateDisplayItemActive {
  border: 1px solid rgba(0, 0, 0, 0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  outline: none !important;
}

.analytics-date-picker-container {
  position: absolute;
  z-index: 999999; 
  top: 40px;
  right: 0;
  left: auto;
  background:rgba(255, 255, 255, 1);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
.analytics-date-picker-container {
    right: -70px;
}}


.chart-toggle-and-refresh {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 10px;
}

.toggle-chart-button {
  padding: 6px 12px;
background: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  min-height: 30px;
  margin-bottom: 0px;
}

body.dark .toggle-chart-button {
    background: rgba(0, 0, 0, 1)
}

body.light .toggle-chart-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.toggle-chart-button {
    font-size: 11px;
      padding: 3px 10px;
      min-height: 23px;
  }}

@media (max-width: 768px) {
.toggle-chart-button {
    font-size: 11px;
  }}

.analytics-chart-wrapper {
  background: rgba(145, 75, 255, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px 0px 10px 10px;
  height: 222px;
  width: 100%;
  max-width: 100%;
    margin-top: 0px;
}

body.dark .analytics-chart-wrapper {
  background: rgba(0.0.0,0.1);
}

body.light .analytics-chart-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
  .analytics-chart-wrapper {
      height: 200px;
        padding: 10px 10px 10px 10px;
  }}

  @media (max-width: 768px) {
  .analytics-chart-wrapper {
      height: 200px;
        padding: 10px 0px 10px 10px;
  }}

.analytics-chart-container {
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 0px;
}




.agent-analytics-refresh-button {
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.dark .agent-analytics-refresh-button {
    background: rgba(0, 0, 0, 1)
}

body.light .agent-analytics-refresh-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
  .agent-analytics-refresh-button {
      width: 23px;
      height: 23px;
        border-radius: 6px;
  }}

.agent-analytics-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

body.light .agent-analytics-refresh-button i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-analytics-refresh-button i {
      font-size: 9px;
  }}


.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.trusty-global-overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: block;
  background: transparent;
}

.trusty-global-particles-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  z-index: 999 !important;
}

.trusty-global-particles-container.trusty-fullscreen,
.trusty-global-particles-container[data-trusty-fullscreen="1"] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trusty-global-particles-container > canvas,
.trusty-global-particles-container canvas,
.trusty-global-particles-container > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body:has(.simulation-chat-overlay) .user-header,
body:has(.simulation-chat-overlay) .main-footer,
body:has(.simulation-chat-overlay) .global-footer,
body:has(.simulation-chat-overlay) .agent-actions-box {
  z-index: 0 !important;
}

body:has(.simulation-chat-overlay) .global-footer,
body:has(.simulation-chat-overlay) .ask-treo,
body:has(.simulation-chat-overlay) .agent-interaction-dock-button,
body:has(.simulation-chat-overlay) .float-chat-button {
  display: none;
}

@media (max-width: 768px) {
body:has(.simulation-chat-overlay) .float-chat-button,
body:has(.simulation-chat-overlay) .agent-interaction-dock-button {
      display: none !important;
      z-index: 0 !important;
}}

.simulation-chat-overlay {
  position: fixed;
  inset: 0;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999 !important;
  overflow-y: auto !important;
}

body.dark .simulation-chat-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.agent-simulation-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  margin-top: 0%;
}

.agent-simulation-loading-rotate {
  animation: loadingRotate 1.6s linear infinite;
}

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

.agent-simulation-loading-pulse {
  font-size: 28px;
  color: rgba(255,225,255,0.7);
  animation: loadingPulse 1s ease-in-out infinite alternate;
}

@keyframes loadingPulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 1; }
}


.simulation-previous-box {
  margin: 0 auto;
}

.simulation-previous-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  min-height: 35px;
  min-width: 175px;
  font-size: 26px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

body.light .simulation-previous-button {
  color: rgba(0, 0, 0, 0.9)
}

.simulation-previous-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.simulation-previous-button .simulation-previous-button-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: opacity 0.2s ease;
}

.simulation-previous-loading {
  animation: ZoomIn 0.6s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes ZoomIn {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 1; }
}

.simulation-scroll-bottom {
  background-color: rgba(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 15%;
  left: 47%;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

body.dark .simulation-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .simulation-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}


.simulation-scroll-bottom:hover {
  background-color: rgba(145, 75, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
}

body.dark .simulation-scroll-bottom:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.3);
}

body.light .simulation-scroll-bottom:hover {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

.simulation-chat-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(100deg, #9945FF, #14F195);
  border-radius: 8px;
  padding: 0px;
  width: 40%;
  max-width: 40%;
  height: 90vh;
  min-height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 9999999999 !important;
}

body.dark .simulation-chat-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.3)
}

body.light .simulation-chat-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 768px) {
  .simulation-chat-modal {
      transform: none;
      top: 0px;
      left: 0px;
      width: 100%;
  max-width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  z-index: 9999999999;
  margin: 0 auto;
    border-radius: 0px;
  }
}

   .simulation-chat-modal.maximized {
  height: 97vh !important;
  min-height: 97vh !important;
  max-height: 97vh !important;
  }

  @media (max-width: 768px) {
     .simulation-chat-modal.maximized {
  height: 66vh !important;
  min-height: 66vh !important;
  max-height: 66vh !important;
  }}

.simulation-chat-header {
  position: relative;
  background: transparent;
  padding: 25px 25px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(255,225,255,0.9);
}

body.dark .simulation-chat-header {
  background: rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(255, 225, 255, 0.4);
}

body.light .simulation-chat-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

@media (max-width: 1366px) {
  .simulation-chat-header {
      padding: 20px 25px;
  }}

@media (max-width: 768px) {
  .simulation-chat-header {
      padding: 25px 25px;
  }}


  .simulation-chat-modal-content {
  height: 97vh;
  min-height: 97vh;
  max-height: 97vh;
}

.simulation-chat-top-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
      position: absolute;
    top: 10px;
    left: 10px;
}

@media (max-width: 1366px) {
.simulation-chat-top-info {
      position: absolute;
    top: 5px;
    left: 10px;
  }}

  @media (max-width: 768px) {
.simulation-chat-top-info {
       top: 9px;
    max-width: 75%;
  }}


  .simulation-expand-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(145, 75, 255, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

  body.light .simulation-expand-avatar {
  background-color: rgb(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
  }

.simulation-expand-avatar i {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

body.light .simulation-expand-avatar i {
  color: rgba(0, 0, 0, 0.9);
}


.simulation-chat-top-info-agent-name {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 225, 255, 1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  text-align: left;
}

body.light .simulation-chat-top-info-agent-name {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .simulation-chat-top-info-agent-name {
    text-align: left !important;
    font-size: 12px;
  }}


@media (max-width: 768px) {
  .simulation-chat-top-info-agent-name {
    text-align: left !important;
    font-size: 15px;
  }}



.simulation-chat-top-info-agent-specialization {
  font-size: 13px;
  font-weight: 500 !important;
  color: rgba(255, 225, 255, 1);
  text-shadow: none;
  text-align: left;
}

@media (max-width: 768px) {
  .simulation-chat-top-info-agent-specialization {
    text-align: left !important;
    font-size: 12px;
  }}



.simulation-top-options {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    gap: 10px;
    position: absolute;
    top: 15px;
    right: 10px;
}

@media (max-width: 1366px) {
  .simulation-top-options {
    top: 13px;
    right: 6px;
        gap: 6px;
  }}

@media (max-width: 768px) {
  .simulation-top-options {
    top: 15px;
    right: 10px;
        gap: 8px;
  }}

.enter-to-send-simulation {
display: flex; 
align-items: center;
gap: 6px;
}

@media (max-width: 768px) {
  .enter-to-send-simulation {
    gap: 6px;
}
}

.enter-to-send-simulation-switch {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 20px;
}

@media (max-width: 1366px) {
  .enter-to-send-simulation-switch {
  width: 24px;
  height: 14px;
}}

@media (max-width: 768px) {
  .enter-to-send-simulation-switch {
  width: 26px;
  height: 16px;
}}

.enter-to-send-simulation-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-simulation-switch .enter-to-send-simulation-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  transition: 0.4s;
  border-radius: 20px;
}

body.light .enter-to-send-simulation-switch .enter-to-send-simulation-slider {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

.enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
 background: rgba(145, 75, 255,0.3);
  transition: 0.4s;
  border-radius: 50%;
}

body.light .enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
  color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 1366px) {
  .enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
      height: 10px;
  width: 10px;
  left: 0x;
  bottom: 1px;
  }}

@media (max-width: 768px) {
  .enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
      height: 12px;
  width: 12px;
  left: 2px;
  bottom: 1px;
  }}

body.dark .enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
    background: rgba(0, 0, 0, 0.3);
}

body.light .enter-to-send-simulation-switch .enter-to-send-simulation-slider::before {
    background: rgba(0, 0, 0, 0.3);
}

.enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

body.dark .enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

.enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider::before {
  transform: translateX(16px);
 background: rgba(145, 75, 255, 0.7);
}

@media (max-width: 1366px) {
  .enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider::before {
  transform: translateX(8px);
  }}

@media (max-width: 768px) {
  .enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider::before {
  transform: translateX(8px);
  }}

body.dark .enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider::before {
  background-color: rgba(0, 0, 0, 1);
}

body.light .enter-to-send-simulation-switch input:checked + .enter-to-send-simulation-slider::before {
  background-color: rgba(0, 0, 0, 1);
}


.enter-to-send-simulation-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

body.light .enter-to-send-simulation-label {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .enter-to-send-simulation-label {
      font-size: 12px;
        text-shadow: none;
  }}

@media (max-width: 768px) {
  .enter-to-send-simulation-label {
      font-size: 12px;
        text-shadow: none;
  }}



    .simulation-chat-modal .simulation-chat-maximize-button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    cursor: pointer;
    display: none;
  }
  
  @media (min-width: 769px) {
    .float-chatbox .interaction-maximize-button {
      display: none;
    }}


.simulation-chat-close {
  background: none;
border: none; 
box-shadow: none; 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
}

body.dark .simulation-chat-close {
  background: none;
}

body.light .simulation-chat-close {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .simulation-chat-close {
  padding: 0px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .simulation-chat-close {
  padding: 0px;
    font-size: 15px;
    MARGIN-BOTTOM: -1px;
  }
}


.simulation-chat-mode-messages {
  flex: 1 1;
  padding: 16px;
  overflow-y: auto;
  background: linear-gradient(100deg, #9945FF, #14F195);
  display: flex;
  flex-direction: column;
  gap: 25px;
}

body.dark .simulation-chat-mode-messages {
  background: rgba(0, 0, 0, 1);
}

body.light .simulation-chat-mode-messages {
  background: rgba(255, 255, 255, 0.9)
}

@media (max-width: 1366px) {
  .simulation-chat-mode-messages {
      gap: 15px;
}}

.simulation-greeting-note {
      font-size: 13px;
      line-height: 16px;
      font-weight: 400;
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.7);
      font-style: italic;
}

body.dark .simulation-greeting-note {
color: rgba(255, 255, 255, 0.6)
}

@media (max-width: 1366px) {
  .simulation-greeting-note {
      font-size: 10px;
            line-height: 12px;
  }}

@media (max-width: 768px) {
  .simulation-greeting-note {
      font-size: 12px;
            line-height: 14px;
  }}

.simulation-greeting-message.thinking {
color: rgba(255, 255, 255, 0.9);
text-shadow: none;
font-size: 20px;
line-height: 20px; 
width: auto;
padding: 0px;
}

.simulation-greeting-message .on-thinking::after,
.agent-simulation-agent .on-thinking::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

body.dark .simulation-greeting-message.thinking {
color: rgba(255, 255, 255, 0.7)
}


.agent-simulation-bubble .simulation-greeting-message {
  width: auto;
}




.agent-simulation-bubble {
  max-width: 75%;
  padding: 9px 12px 12px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 20px;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scaleY(0.95);
}

@media (max-width: 768px) {
  .agent-simulation-bubble {
  font-size: 13px;
  line-height: 15px;
  padding: 10px;
  }}

.agent-simulation-user {
background: rgba(255,225,255,1);
color: rgba(0, 0, 0, 0.8);
text-shadow: none;
align-self: flex-end;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
border-bottom-right-radius: 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
}

body.dark .agent-simulation-user {
background: rgba(0,0,0,1);
color: rgba(255,225,255,0.7);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .agent-simulation-user {
background: rgba(255, 255, 255, 0.9);
color: rgba(0,0,0,0.9);
border: 1px solid rgba(0, 0, 0, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
.agent-simulation-user {
  font-size: 12px;
  line-height: 15px;
  }}

@media (max-width: 768px) {
.agent-simulation-user {
  font-size: 13px;
  line-height: 14px;
  }}


.agent-simulation-agent {
background: rgba(255,225,255,1);
color: rgba(0, 0, 0, 0.8);
text-shadow: none;
align-self: flex-start;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
border-bottom-left-radius: 2px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

body.dark .agent-simulation-agent {
  background: rgba(0,0,0,1);
}

  body.light .agent-simulation-agent {
  background: rgba(255, 255, 255, 0.9)
}
  
@media (max-width: 768px) {
.agent-simulation-agent {
      font-size: 13px;
  line-height: 15px;
  }}


.agent-simulation-bubble.agent-simulation-agent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}



.agent-simulation-bubble .formatted-agent-output {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
}

body.dark .agent-simulation-bubble .formatted-agent-output {
  color: rgba(255,255,255,0.8)
}

@media (max-width: 1366px) {
.agent-simulation-bubble .formatted-agent-output {
  font-size: 11px;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.8);
  }}

@media (max-width: 768px) {
.agent-simulation-bubble .formatted-agent-output {
  font-size: 13px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.8);
  }}


.agent-simulation-bubble .formatted-agent-output a {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    text-decoration: underline;
}

body.dark .agent-simulation-bubble .formatted-agent-output a {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
    text-decoration: underline;
}

.simulation-response-time-and-action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 6px;
vertical-align: middle;
padding-top: 2px;
}

@media (max-width: 1366px) {
  .simulation-response-time-and-action {
margin-top: 1px;
  }}



.simulation-copy-agent-response-button {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  font-size: 10px;
}


body.dark .simulation-copy-agent-response-button {
  color: rgba(255,255,255,0.8);
}

body.light .simulation-copy-agent-response-button {
  color: rgba(0,0,0,0.8);
}

@media (max-width: 1366px) {
  .simulation-copy-agent-response-button {
      font-size: 9px;
}}

.simulation-copy-button-wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
}

.simulation-copied-confirmation {
  color: rgba(255,255,255,0.8);
  text-shadow: none;
  font-size: 11px;
}

@media (max-width: 1366px) {
.simulation-copied-confirmation {
  font-size: 10px;
}}

.simulation-sender-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-bottom: 2px;
  padding: 0px 6px;
  font-style: italic;
}

body.dark .simulation-sender-label {
color: rgba(255, 255, 255, 0.6);
}

body.light .simulation-sender-label {
color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.simulation-sender-label {
  font-size: 10px;
}}

@media (max-width: 768px) {
.simulation-sender-label {
  font-size: 11px;
  margin-bottom: 1px;
}}

.simulation-message-time {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-top: 0px;
  padding: 0px 0px;
  font-style: italic;
}

body.dark .simulation-message-time {
color: rgba(255, 255, 255, 0.6);
}

body.light .simulation-message-time {
color: rgba(0, 0, 0, 0.7);
}


@media (max-width: 1366px) {
.simulation-message-time {
  font-size: 10px;
}}

.agent-simulation-input-container {
  display: flex;
   flex-direction: column;
    align-items: center;
    justify-content: space-between;
  gap: 0px;
  border-top: 1px solid rgba(255,225,255,0.9);
  padding: 10px;
  background: linear-gradient(100deg, #9945FF, #14F195);
}

body.dark .agent-simulation-input-container {
   background: rgba(0, 0, 0, 1);
     border-top: 1px solid rgba(255,225,255,0.3);
}

body.light .agent-simulation-input-container {
   background: rgba(255,255,255,1);
     border-top: 1px solid rgba(0,0,0,0.2);
}


@media (max-width: 768px) {
  .agent-simulation-input-container {
      padding: 10px;
  }}

.agent-simulation-input {
  flex: 1 1;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  resize: none;
  font-size: 14px;
  height: 50px;
  max-height: 300px;
  overflow-y: auto;
  vertical-align: middle;
     width: 100%;
}

@media (max-width: 1366px) {
  .agent-simulation-input {
  padding: 5px;
  font-size: 12px;
  height: 50px;
  max-height: 300px;
  }}


@media (max-width: 768px) {
  .agent-simulation-input {
  padding: 8px;
  font-size: 13px;
  height: 50px;
  max-height: 300px;
  }}

.agent-simulation-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.agent-simulation-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: none !important;
}

     .agent-simulator-input::placeholder {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    }


@media (max-width: 1366px) {
 .agent-simulator-input::placeholder {
      font-size: 12px;
  }}


@media (max-width: 768px) {
 .agent-simulator-input::placeholder {
      font-size: 13px;
  }}

  .agent-simulation-input textarea {
    background: rgba(255,225,255,1) ;
  }

.agent-simulation-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 6px;
  gap: 3px;
  vertical-align: middle;
  margin-top: 2px;
}

.agent-simulation-charcount.warning {
  color: rgba(255,255,255,0.9);
  text-shadow: none;
}

.agent-simulation-charcount {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-shadow: none;
  display: none;
}

@media (max-width: 1366px) {
  .agent-simulation-charcount {
  font-size: 10px;
  }}

.agent-simulation-charcount i {
color: rgba(240, 255, 0, 1);
text-shadow: none;
  }

.agent-simulation-send-button {
background-color: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px 8px 8px 8px;
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
  cursor: pointer;
  transition: background 0.2s ease;
      position: absolute;
    bottom: 25px;
    right: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .agent-simulation-send-button {
   background: rgba(0, 0, 0, 1);
   border: 1px solid rgba(255, 255, 255, 0.2); 
}


body.light .agent-simulation-send-button {
   background: rgba(0, 0, 0, 1);
   border: 1px solid rgba(255, 255, 255, 0.2); 
}

@media (max-width: 1366px) {
.agent-simulation-send-button {
font-size: 11px;
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
            position: absolute;
    bottom: 18px;
    right: 15px;
  }}

@media (max-width: 768px) {
.agent-simulation-send-button {
font-size: 11px;
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
            position: absolute;
    bottom: 20px;
    right: 15px;
  }}

.agent-simulation-send-button i {
  font-size: 11px;
}

@media (max-width: 1366px) {
  .agent-simulation-send-button i {
  font-size: 10px;
}}

@media (max-width: 768px) {
  .agent-simulation-send-button i {
  font-size: 11px;
}}

.agent-simulation-send-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.agent-simulation-error-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-simulation-error-box {
  background: rgba(145, 75, 255,0.6);
  padding: 20px 30px;
  border-radius: 10px;
  max-width: 75%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
}

body.dark .agent-simulation-error-box {
     background: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .agent-simulation-error-box {
      font-size: 13px;
  }}


.agent-simulation-error-box button {
  margin-top: 12px;
  background-color: rgba(145, 75, 255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
    font-size: 13px;
}

body.dark .agent-simulation-error-box button {
     background: rgba(0, 0, 0, 1);
}

@media (max-width: 768px) {
.agent-simulation-error-box button {
      font-size: 12px;
  }}
.agent-builder-latest-title {
    font-size: 18px;
    width: 100%;
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 15px;
    padding: 10px 10px 10px 10px;
    text-align: center;
}

@media (max-width: 1366px) {
.agent-builder-latest-title {
    margin-top: -10px;
    margin-bottom: 15px;
    font-size: 13px;
    padding: 6px 10px 6px 10px;
    border-radius: 6px;
}}

@media (max-width: 768px) {
.agent-builder-latest-title {
    margin-top: -15px;
    margin-bottom: 15px;
    font-size: 15px;
    padding: 10px 10px 10px 10px;
    border-radius: 6px;
}}

body.dark .agent-builder-latest-title { 
    background: rgba(0, 0, 0, 1);
}

.agent-builder-latest-box {
      padding: 10px 10px 10px 10px;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  margin: 0 auto;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 
}

  .agent-builder-latest {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
      }

.sidebar-agent-card {
    margin-bottom: 15px;
    display: block;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   border: none; 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 10px;
    padding: 0px;
    color: white;
    overflow: hidden;
    width: 100%;
}

.agent-builder-latest-agent-info {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%;
    height: 200px;
    min-height: 180px;
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
    .agent-builder-latest-agent-info {
        height: 160px;
        min-height: 160px;
    }}

.agent-builder-latest-agent-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.agent-builder-latest-agent-info:hover::before {
    background: rgba(0, 0, 0, 1);
    width: 100%;
    height: 100%;
    border: none;
}

.agent-builder-latest-agent-name {
    position: absolute;
    color:  rgba(255, 255, 255, 1);
    text-shadow: none;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    bottom: 4%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
    padding: 5px 10px;
}

@media (max-width: 1366px) {
    .agent-builder-latest-agent-name {
        bottom: 2%;
        font-size: 11px;
}}

@media (max-width: 768px) {
    .agent-builder-latest-agent-name {
        bottom: 4%;
        font-size: 11px;
}}

.agent-builder-latest-agent-info:hover .sidebar-agent-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

body:has(.agent-builder-setting-overlay) .integration-picker-modal,
body:has(.agent-builder-setting-overlay) .user-header,
body:has(.agent-builder-setting-overlay) .admin-header,
body:has(.agent-builder-setting-overlay) .main-footer,
body:has(.agent-builder-setting-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-builder-setting-overlay) .global-footer,
body:has(.agent-builder-setting-overlay) .ask-treo,
body:has(.agent-builder-setting-overlay) .agent-interaction-dock-button,
body:has(.agent-builder-setting-overlay) .float-chat-button {
  display: none;
}

body.modal-open .user-header,
body.modal-open .admin-header,
body.modal-open .main-footer,
body.modal-open .global-footer {
  z-index: 1 !important;
}

body.modal-open .global-footer {
  display: none;
}

.agent-builder-setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .agent-builder-setting-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.agent-builder-setting-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    padding: 20px;
    z-index: 9999; 
    width: auto;
    min-width: 30%;
    max-width: 30%;
    
    max-height: 90vh;
    overflow-y: auto;
}

  body.dark .agent-builder-setting-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

    body.light .agent-builder-setting-modal {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

    @media (max-width: 1366px) {
    .agent-builder-setting-modal {
            padding: 10px;
  }}
  

  @media (max-width: 768px) {
    .agent-builder-setting-modal {
        width: 95%;
        max-width: 95%;
        max-height: 75vh;
            padding: 10px;
  }}
  
.agent-builder-setting-modal::-webkit-scrollbar{
  display: none;
}

.agent-builder-setting-modal::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
  display: none;
}


  .agent-builder-setting-title{
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 20px;
  text-align: left;
  font-weight: 300;
}

body.light .agent-builder-setting-title{
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-builder-setting-title{
    font-size: 15px;
  }}

  
.agent-builder-setting-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .agent-builder-setting-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .agent-builder-setting-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
    .agent-builder-setting-close-button {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
    .agent-builder-setting-close-button {
      font-size: 13px;
    }}


.agent-builder-setting-section {
 display: flex;
 flex-direction: row;
  justify-content: space-between;
  margin: 5px 0px;
}

.followup-greeting-mode-section {
 display: flex;
 flex-direction: row;
  justify-content: space-between;
  margin: 5px 0px 20px 0px;
}

.agent-builder-setting-label .toggle-icon {
  margin-left: 5px;
  margin-top: 0px;
  cursor: pointer;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

body.light .agent-builder-setting-label .toggle-icon {
  color: rgba(0, 0, 0, 0.9);
}


.agent-builder-setting-options .toggle-icon {
  margin-left: -3px;
  margin-top: 0px;
  cursor: pointer;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

body.light .agent-builder-setting-options .toggle-icon {
  color: rgba(0, 0, 0, 0.9);
}

.agent-builder-setting-label.not-integrated {
  font-style: italic;
}

.agent-setting-interaction,
.agent-setting-visibility,
.agent-setting-greeting,
.agent-setting-integration,
.agent-setting-security {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  padding: 6px 0px 6px 0px;
  margin: 10px 0px 10px 0px;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body.dark .agent-setting-interaction,
body.dark .agent-setting-visibility,
body.dark .agent-setting-greeting,
body.dark .agent-setting-integration,
body.dark .agent-setting-security {
  color:rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .agent-setting-interaction,
body.light .agent-setting-visibility,
body.light .agent-setting-greeting,
body.light .agent-setting-integration,
body.light .agent-setting-security {
  color:rgba(0, 0, 0, 0.9);
  text-shadow: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
.agent-setting-interaction,
.agent-setting-visibility,
.agent-setting-greeting,
.agent-setting-integration,
.agent-setting-security {
  font-size: 12px;
  padding: 6px 0px 6px 0px;
}}

@media (max-width: 768px) {
.agent-setting-interaction,
.agent-setting-visibility,
.agent-setting-greeting,
.agent-setting-integration,
.agent-setting-security {
  font-size: 15px;
  padding: 6px 0px 6px 0px;
}}

.agent-builder-setting-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

body.light .agent-builder-setting-label {
  color:rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .agent-builder-setting-label {
  font-size: 13px;
}}

@media (max-width: 768px) {
    .agent-builder-setting-label {
  font-size: 14px;
}}


.agent-builder-setting-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
}

@media (max-width: 768px) {
.agent-builder-setting-options {
  display: flex;
  gap: 5px;
}}

.agent-builder-setting-options label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 300;
    cursor: pointer;
}

body.light .agent-builder-setting-options label {
  color:rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-builder-setting-options label {
  font-size: 12px;
}}

@media (max-width: 768px) {
  .agent-builder-setting-options label {
  font-size: 13px;
}}


.agent-builder-setting-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.agent-builder-setting-delete-global-button {
  background: rgba(220, 50, 70, 0.7);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
}

.agent-builder-setting-delete-global-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.dark .agent-builder-setting-delete-button {
    background: rgba(0, 0, 0, 1);
}

.agent-builder-setting-delete-global-button i {
  margin-right: 3px;
}


@media (max-width: 1366px) {
.agent-builder-setting-delete-global-button {
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
}}

  .agent-builder-setting-save-global-button {
  background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.2s;
  width: 100%;
}

.agent-builder-setting-save-global-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.dark .agent-builder-setting-save-global-button {
    background: rgba(0, 0, 0, 1);
}

body.light .agent-builder-setting-save-global-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


.agent-builder-setting-save-global-button i {
  margin-right: 3px;
}


@media (max-width: 1366px) {
.agent-builder-setting-save-button {
  padding: 10px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  height: -webkit-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
}}


.agent-builder-setting-save-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-builder-setting-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    z-index: 999 !important;
}

.agent-builder-setting-confirm-modal {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7375e1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 999999; 
    width: auto;
    min-width: 75%;
    max-width: 90%;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    overflow: auto;
}

  body.dark .agent-builder-setting-confirm-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

    body.light .agent-builder-setting-confirm-modal {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2)
  }

  @media (max-width: 1366px) {
    .agent-builder-setting-confirm-modal {
    padding: 20px 20px;
    }}

  .agent-builder-setting-confirm-content {
        width: 100%;
    margin: 0 auto;
        vertical-align: middle;
  }

.agent-builder-setting-confirm-modal h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

body.light .agent-builder-setting-confirm-modal h1 {
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.agent-builder-setting-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-builder-setting-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

.agent-builder-setting-confirm-modal p {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

body.light .agent-builder-setting-confirm-modal p {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-setting-confirm-modal p {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-builder-setting-confirm-modal p {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 6px;
  }}


.agent-builder-setting-confirm-button-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.agent-builder-setting-confirm-button {
  padding: 5px 15px;
  border-radius: 6px;
  cursor: pointer;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 90px;
  max-width: auto;
      display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1366px) {
.agent-builder-setting-confirm-button {
      padding: 5px 10px;
  font-size: 12px;
}}

@media (max-width: 768px) {
.agent-builder-setting-confirm-button {
      padding: 5px 10px;
  font-size: 13px;
}}


body.dark .agent-builder-setting-confirm-button {
  background: rgb(0, 0, 0, 1);
}

body.light .agent-builder-setting-confirm-button {
 background: rgb(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}



/* greeting mode */

.default-greeting-preview {
  background: rgb(145, 75, 255, 0.1);
  padding: 10px 10px;
  border-radius: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  display: none;
}

body.dark .default-greeting-preview {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
}

.agent-custom-greeting-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
    background: none;
}

.custom-greeting-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
}

@media (max-width: 1366px) {
.custom-greeting-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 3px;
}}

@media (max-width: 1366px) {
.custom-greeting-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
padding: 10px;
}}

.custom-greeting-note-box {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px;
  border-radius: 6px;
}

body.dark .custom-greeting-note-box {
  background: rgba(0, 0, 0, 1)
}

body.light .custom-greeting-note-box {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
  color: rgba(0, 0, 0, 0.9);
}


.custom-greeting-note {
  font-size: 13px;
  font-weight: 300;
    line-height: 18px;
  font-style: italic;
}

body.light .custom-greeting-note {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.custom-greeting-note {
   font-size: 11px;
     line-height: 14px;
}}

@media (max-width: 768px) {
.custom-greeting-note {
   font-size: 12px;
     line-height: 16px;
}}




.custom-greeting-label {
   font-size: 14px;
   margin-bottom: 2px;
     padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .custom-greeting-label {
  font-weight: 300;
}

@media (max-width: 1366px) {
.custom-greeting-label {
   font-size: 11px;
   margin-bottom: 0px;
}}


@media (max-width: 768px) {
.custom-greeting-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

.custom-greeting-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}

.greeting-no-and-char-count {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

.custom-greeting-input-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
}

body.dark .custom-greeting-input-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .custom-greeting-input-row {
    border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
  .custom-greeting-input-row {
      padding: 10px;
  }}

  .custom-greeting-input-row:last-child {
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .custom-greeting-input-row:last-child {
    margin-bottom: 5px;
  }}

.custom-greeting-input-row textarea {
  width: 100%;
  resize: vertical;
  min-height: 66px;
  max-height: 100px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.dark .custom-greeting-input-row textarea {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
}

body.light .custom-greeting-input-row textarea {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
.custom-greeting-input-row textarea {
  min-height: 50px;
    font-size: 12px;
      padding: 2px 6px;
        min-height: 80px;
}}

@media (max-width: 768px) {
.custom-greeting-input-row textarea {
  min-height: 80px;
      font-size: 13px;
            padding: 2px 6px;
}}

.custom-greeting-input-row textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.custom-greeting-input-row textarea::-webkit-scrollbar{
  width: 3px;
}



.agent-builder-setting-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.agent-builder-setting-save-button,
.agent-builder-setting-edit-button,
.agent-builder-setting-delete-button,
.agent-builder-setting-cancel-button {
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-builder-setting-save-button,
.agent-builder-setting-edit-button {
  background: rgb(145, 75, 255, 0.6);
}

.agent-builder-setting-delete-button,
.agent-builder-setting-cancel-button {
  background: rgba(220, 50, 70, 0.7);}

body.dark .agent-builder-setting-save-button,
body.dark .agent-builder-setting-edit-button,
body.dark .agent-builder-setting-delete-button,
body.dark .agent-builder-setting-cancel-button {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-builder-setting-save-button,
body.light .agent-builder-setting-edit-button,
body.light .agent-builder-setting-delete-button,
body.light .agent-builder-setting-cancel-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-setting-save-button,
.agent-builder-setting-edit-button,
.agent-builder-setting-delete-button,
.agent-builder-setting-cancel-button {
  padding: 2px 6px;
    font-size: 10px;
  margin-top: 6px;
}}

@media (max-width: 768px) {
.agent-builder-setting-save-button,
.agent-builder-setting-edit-button,
.agent-builder-setting-delete-button,
.agent-builder-setting-cancel-button {
  padding: 3px 7px;
}}

.agent-builder-setting-save-button i,
.agent-builder-setting-edit-button i,
.agent-builder-setting-delete-button i,
.agent-builder-setting-cancel-button i{
  margin-right: 3px;
  margin-top: 1px;
}


.agent-builder-setting-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.custom-greeting-add-button {
  margin-top: 6px;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  width: auto;
  margin-bottom: 10px;
}

body.dark .custom-greeting-add-button {
  background: rgba(0, 0, 0, 1);
}

body.light .custom-greeting-add-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .custom-greeting-add-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .custom-greeting-add-button {
      font-size: 11px;
        margin-top: 0px;
  }}

.custom-greeting-add-button i {
  margin-right: 3px;
}

.custom-greeting-add-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.custom-greeting-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    margin-top: 6px;
}

.greeting-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .greeting-char-count {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.greeting-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

.agent-builder-setting-modal input[type="radio"] {
  accent-color: #a372f7;
    cursor: pointer;
}

body.dark .agent-builder-setting-modal input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1);
}

body.light .agent-builder-setting-modal input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1);
}




/* placeholder */

.default-placeholder-preview {
  display: none;
}

.custom-placeholder-section {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px 15px 15px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 15px;
}

body.dark .custom-placeholder-section {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .custom-placeholder-section {
  border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
.custom-placeholder-section {
    font-size: 11px;
      padding: 10px 10px 10px 10px;
  }
}

.custom-placeholder-label {
  font-size: 13px;
  margin-bottom: 0px;
  display: none;
}

@media (max-width: 1366px) {
  .custom-placeholder-label {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .custom-placeholder-label {
    font-size: 12px;
  }
}

.placeholder-no-and-char-count {
  display: flex;
  justify-content: flex-end;
  vertical-align: middle;
}



.custom-placeholder-section textarea {
  width: 100%;
  resize: none;
  min-height: 70px;
  height: auto;
  background: rgba(255,255,255,0.9);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.dark .custom-placeholder-section textarea {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
}

body.light .custom-placeholder-section textarea {
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.custom-placeholder-section textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

@media (max-width: 1366px) {
  .custom-placeholder-section textarea {
    min-height: 50px;
    font-size: 12px;
      padding: 2px 6px;
        min-height: 55px;
  }
}

@media (max-width: 768px) {
  .custom-placeholder-section textarea {
    min-height: 55px;
    font-size: 13px;
  }
}

.custom-placeholder-section textarea::-webkit-scrollbar{
  width: 3px;
}

.placeholder-char-count {
  font-size: 12px;
  padding-top: 0px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .placeholder-char-count {
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.placeholder-char-count {
  font-size: 10px;
    padding-top: 2px;
}}


/* autoresponse */

.agent-builder-setting-autoresponse {
    display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 0px;
    background: none;
}

.agent-builder-setting-autoresponse-box {
  margin-top: 5px 0px;
 display: flex;
 flex-direction: row;
  justify-content: space-between;
    vertical-align: middle;
}

.agent-builder-setting-autoresponse-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
.agent-builder-setting-autoresponse-label {
  font-size: 12px;
}}

@media (max-width: 768px) {
.agent-builder-setting-autoresponse-label {
  font-size: 13px;
}}

.autoresponse-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px;
  border-radius: 6px;
}

body.dark .autoresponse-note-box {
  background: rgba(0, 0, 0, 1)
}

body.light .autoresponse-note-box {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2); 
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.autoresponse-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 3px;
  padding: 6px;
}}

@media (max-width: 768px) {
.autoresponse-note-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
  padding: 10px;
}}


.autoresponse-note {
  font-size: 13px;
  font-weight: 300;
    line-height: 18px;
  font-style: italic;
}

@media (max-width: 1366px) {
.autoresponse-note {
   font-size: 12px;
     line-height: 15px;
}}

@media (max-width: 768px) {
.autoresponse-note {
   font-size: 13px;
     line-height: 16px;
}}

.autoresponse-input-row {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: none; 
          backdrop-filter: none;
   margin-top: 10px;
}

body.dark .autoresponse-input-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .autoresponse-input-row {
    border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
  .autoresponse-input-row {
      padding: 10px;
  }}

  .autoresponse-input-row:last-child {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {
  .autoresponse-input-row:last-child {
    margin-top: 5px;
    margin-bottom: 5px;
  }}


  .autoresponse-label {
   font-size: 14px;
   margin-bottom: 2px;
     padding-left: 0px;
  text-shadow: none !important;
  font-weight: 300;
}

body.dark .autoresponse-label {
  font-weight: 300;
}

body.light .autoresponse-label {
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.autoresponse-label {
   font-size: 12px;
   margin-bottom: 0px;
}}

@media (max-width: 768px) {
.autoresponse-label {
   font-size: 13px;
   margin-bottom: 0px;
}}

.autoresponse-label .required {
  color: rgb(221, 17, 17, 1);
  text-shadow: none;
  margin-left: 2px;
}

.autoresponse-no-and-char-count {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
}

.autoresponse-char-count {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .autoresponse-char-count {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.autoresponse-char-count {
  font-size: 10px;
    padding-top: 2px;
}}

.autoresponse-input-row .autoresponseinput {
  width: 100%;
  resize: vertical;
  height: 75px;
  min-height: 75px;
  max-height: 150px;
  background: rgba(255,255,255,0.9);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .autoresponse-input-row .autoresponseinput {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.autoresponse-input-row .autoresponseinput {
    font-size: 12px;
      padding: 2px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

@media (max-width: 768px) {
.autoresponse-input-row .autoresponseinput {
    font-size: 13px;
      padding: 2px 6px;
      height: 50px;
  min-height: 50px;
  max-height: 100px;
}}

.autoresponse-input-row .autoresponseinput::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.autoresponse-input-row .autoresponseinput::-webkit-scrollbar{
  width: 3px;
}


.autoresponse-input-row .autoresponsetriggerinput {
  width: 100%;
  resize: vertical;
  height: 46px;
  min-height: 46px;
  max-height: 66px;
  background: rgba(255,255,255,0.9);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 14px;
  font-style: normal;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  outline: none;
}

body.light .autoresponse-input-row .autoresponsetriggerinput {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.autoresponse-input-row .autoresponsetriggerinput {
    font-size: 12px;
      padding: 2px 6px;
      height: 36px;
  min-height: 36px;
  max-height: 66px;
}}

@media (max-width: 768px) {
.autoresponse-input-row .autoresponsetriggerinput {
    font-size: 13px;
      padding: 2px 6px;
      height: 46px;
  min-height: 46px;
  max-height: 66px;
}}

.autoresponse-input-row .autoresponsetriggerinput::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.autoresponse-input-row .autoresponsetriggerinput::-webkit-scrollbar{
  width: 3px;
}

.autoresponsetriggerinput.readonly,
.autoresponseinput.readonly {
  cursor:default
}

.more-autoresponse-options-box {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 7px 12px;
border-radius: 6px;
  margin-top: 0px;
  margin-bottom: 5px;
 display: flex;
 flex-direction: row;
  justify-content: space-between;
    vertical-align: middle;
}

body.dark .more-autoresponse-options-box {
  background: rgba(0.0.0,0.1);
}

.more-autoresponse-options-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
    .more-autoresponse-options-label {
  font-size: 11px;
}}

@media (max-width: 768px) {
    .more-autoresponse-options-label {
  font-size: 11px;
}}


.more-autoresponse-options-toggle {
  display: flex;
  gap: 6px;
    vertical-align: middle;
}

.more-autoresponse-options-toggle .toggle-icon {
  margin-left: -3px;
  margin-top: 0px;
  cursor: pointer;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.more-autoresponse-options-toggle .toggle-icon.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: pointer;
}

.more-autoresponse-options-toggle span {
  cursor: pointer;
}

@media (max-width: 768px) {
.more-autoresponse-options-toggle {
  display: flex;
  gap: 5px;
}}

.more-autoresponse-options-toggle label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .more-autoresponse-options-toggle label {
  font-size: 11px;
}}

@media (max-width:768px) {
  .more-autoresponse-options-toggle label {
  font-size: 12px;
}}

.autoresponse-add-button {
  margin-top: 6px;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  width: auto;
  margin: 10px 0px;
  width: 100%;
}

body.dark .autoresponse-add-button {
  background: rgba(0, 0, 0, 1);
}

body.light .autoresponse-add-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .autoresponse-add-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .autoresponse-add-button {
      font-size: 11px;
        margin-top: 10px;
  }}

.autoresponse-add-button i {
  margin-right: 1px;
}

.autoresponse-add-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.agent-builder-page {
    padding: 10px 0px 20px 0px;
    width: 100%;
    overflow-y: auto;
}

@media (max-width: 768px) {
  .agent-builder-page {
    margin: 0 auto;
    width: 95%;
}}

.agent-builder-container {
    position: relative;
  padding: 20px 20px 20px 20px;
  width: 100%;
  margin: 0 auto;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  overflow-y: auto;
}

body.dark .agent-builder-container {
    background: rgba(0,0,0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .agent-builder-container {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
  .agent-builder-container {
      padding: 10px 10px;
      border-radius: 6px;
  }}

@media (max-width: 768px) {
  .agent-builder-container {
      padding: 20px 10px 20px 10px;
  }}

.agent-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.agent-builder-login-required,
.agent-builder-minimum-trusty-skip,
.agent-builder-minimum-trusty-warning {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  padding: 15px;
  height: 53px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
}

@media (max-width: 768px) {
.agent-builder-login-required,
.agent-builder-minimum-trusty-skip,
.agent-builder-minimum-trusty-warning {
max-width: 100%;
text-align: center;
margin: 0 auto;
height: auto;
}}


.trusty-warning-text span {font-weight: 500;}


/* trusty-warning */

.agent-builder-minimum-trusty-warning {
    background: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(145, 75, 255, 0.4), rgba(145, 75, 255, 0.6));
    color: rgba(255, 255, 255, 0.9);
    background-size: 200% 200%;
    animation: GradientMove 3s ease-in-out infinite;
}

body.dark .agent-builder-minimum-trusty-warning {
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    background-size: 200% 200%;
    animation: GradientMove 3s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: rgba(255, 255, 255, 0.9);
}

  body.light .agent-builder-minimum-trusty-warning {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}

body.light .agent-builder-minimum-trusty-warning a {
color: rgba(0, 0, 0, 0.9);
}

/* login-required */

.agent-builder-login-required {
    background: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(145, 75, 255, 0.4), rgba(145, 75, 255, 0.6));
    color: rgba(255, 255, 255, 0.9);
    background-size: 200% 200%;
    animation: GradientMove 3s ease-in-out infinite;
}

body.dark .agent-builder-login-required {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  color: rgba(226, 56, 76, 0.7);
  background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.2);  
  }

  body.light .agent-builder-login-required {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(0, 0, 0, 0.9);
    font-weight: 400;
}


/* trusty-skip */

.agent-builder-minimum-trusty-skip {
    background: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(145, 75, 255, 0.4), rgba(145, 75, 255, 0.6));
    color: rgba(255, 255, 255, 0.9);
    background-size: 200% 200%;
    animation: GradientMove 3s ease-in-out infinite;
}

body.dark .agent-builder-minimum-trusty-skip {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  color: rgba(40, 170, 131, 0.9);
  background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

  body.light .agent-builder-minimum-trusty-skip {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
    color: rgba(40, 170, 131, 0.9);
    font-weight: 400;
}


@media (max-width: 1366px) {
.agent-builder-login-required,
.agent-builder-minimum-trusty-skip,
.agent-builder-minimum-trusty-warning {
  font-size: 11px;
    line-height: 13px;
    margin-bottom: 10px;
    padding: 10px;
}}

@media (max-width: 768px) {
.agent-builder-login-required,
.agent-builder-minimum-trusty-skip,
.agent-builder-minimum-trusty-warning {
  font-size: 13px;
  line-height: 18px;
    margin-bottom: 10px;
}}

.agent-builder-login-required i,
.agent-builder-minimum-trusty-skip i,
.agent-builder-minimum-trusty-warning i {
  display: none;
  margin-right: 5px;
}

.agent-builder-minimum-trusty-warning i {
  animation: blink 1.2s infinite;
  transition: opacity 0.2s ease;
}

@keyframes GradientMove {
  0%   { background-position: 0 0; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

body.dark .agent-builder-minimum-trusty-skip i {color: rgb(6, 186, 126);}

body.dark .agent-builder-minimum-trusty-warning i {color: rgba(240, 255, 0, 1);}


@media (max-width: 768px) {
.agent-builder-minimum-trusty-skip i {
  display: none;
}}


@media (max-width: 768px) {
.agent-builder-minimum-trusty-warning i {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}}


.agent-builder-minimum-trusty-skip a,
.agent-builder-minimum-trusty-warning a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

.trusty-on-builder {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    color: rgba(40, 50, 100, 1);
    margin-left: 0px;
    margin-top: -5px;
    vertical-align: middle;
  }


  @media (max-width: 1366px) {
.trusty-on-builder {
    font-size: 14px;
      line-height: 14px;
}}

  @media (max-width: 768px) {
.trusty-on-builder {
    font-size: 19px;
      line-height: 19px;
    top: -4px;
}}

.announcement-on-x {
  display: block;
  margin: 0 auto;
  margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 6px 12px;
width: auto;
max-width: 20%;
}

body.dark .announcement-on-x {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .announcement-on-x {
    font-size: 11px;
padding: 3px 10px;
width: auto;
max-width: 25%;
  margin-top: 5px;
}}

@media (max-width: 1366px) {
  .announcement-on-x {
    font-size: 11px;
padding: 5px 10px;
width: auto;
max-width: 45%;
  margin-top: 7px;
}}

.agent-builder-title {
  font-family: 'Iceland', sans-serif;
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
  text-shadow: 
    0 1px 1px #111,
    0 2px 2px #222,
    0 1px 2px rgba(255,255,255,0.9),
    0px 1px 2px rgba(255,255,255,0.9);
  transform: scaleY(1.2);
}

body.dark .agent-builder-title {
  text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.7)
}

body.light .agent-builder-title {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1366px) {
  .agent-builder-title {
  font-size: 36px;
  margin-bottom: 5px;
}}


@media (max-width: 768px) {
  .agent-builder-title {
  font-size: 36px;
    margin-bottom: 0px;
    margin-top: 30px;
}}

.agent-builder-desc {
font-size: 22px;
line-height: 22px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 
    0 1px 1px #111,
    0 2px 2px #222;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 7px;
}

body.dark .agent-builder-desc {
  text-shadow: 
    0 1px 1px #666,
    0 2px 2px #888;
}

body.light .agent-builder-desc {
  color: rgba(0, 0, 0, 0.9);
    text-shadow: 
    0 0px 1px #222;
}

@media (max-width: 1366px) {
.agent-builder-desc {
font-size: 13px;
line-height: 14px;
width: 100%;
margin-bottom: 20px;
}}

@media (max-width: 768px) {
.agent-builder-desc {
font-size: 15px;
line-height: 18px;
width: 90%;
margin-bottom: 0px;
}}


.agent-builder-desc i {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
}

body.light .agent-builder-desc i {
  text-shadow: none;
}

.in-tuning-mode-box {
margin: 0 auto;
margin-top: 7px;
width: 100%;
padding: 0px 20px;
}

.in-tuning-mode-name {
font-size: 16px;
line-height: 20px;
color: rgba(255, 255, 255, 1);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
text-align: center;
}

.in-tuning-mode-name span {
  font-weight: 400;
}

body.light .in-tuning-mode-name  {
  color: rgba(0, 0, 0, 0.7);
}

.in-tuning-mode-name i {
  cursor: pointer;
}

body.light .in-tuning-mode-name i {
  text-shadow: none;
}

.in-tuning-mode-note-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  position: relative;
  transition: all 0.6s ease;
  opacity: 1;
  transform: translateY(0);
  width: 50%;
}

body.dark .in-tuning-mode-note-box {
  background: rgba(0, 0, 0, 1);
}

body.light .in-tuning-mode-note-box {
  background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .in-tuning-mode-note-box {
    width: 100%;
  }}

.in-tuning-mode-note {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255,255,255, 1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  display: block;
  font-style: italic;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

body.light .in-tuning-mode-note  {
  color: rgba(0, 0, 0, 0.9);
}

body.light .in-tuning-mode-note  {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
}

.in-tuning-mode-note i {
  display: block;
  font-size: 20px;
  color: rgba(240, 255, 0, 0.9);
  margin: 0 auto;
  margin-bottom: 3px;
}

body.light .in-tuning-mode-note i {
  color: rgba(220, 50, 70, 1);
  text-shadow: none;
}

.in-tuning-mode-note-box.collapsed {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.in-tuning-mode-note-hide-button {
  position: absolute;
  top: -4px;
  right: -4px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); 
  padding: 0px 2px 1px 2px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 8px;
}

body.light .in-tuning-mode-note-hide-button {
    background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

@media (max-width: 1366px) {
.in-tuning-mode-note-hide-button {
  font-size: 9px;
  padding: 0px 0px;
}}

@media (max-width: 768px) {
.in-tuning-mode-note-hide-button {
  font-size: 9px;
  padding: 0px 1px;
}}


.in-tuning-mode-note-info-icon {
  margin-left: 0px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
  pointer-events: none;
}

body.light .in-tuning-mode-note-info-icon  {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

.in-tuning-mode-note-info-icon.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (max-width: 1366px) {
.in-tuning-mode-note-info-icon  {
    font-size: 12px;
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
}}

@media (max-width: 768px) {
.in-tuning-mode-note-info-icon  {
  font-size: 12px;
  vertical-align: middle;
  margin-top: 0px;
  margin-left: 5px;
}}

.agent-builder-desc-tuning-mode {
background: rgba(226, 56, 76, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  font-size: 12px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  text-shadow: none;
  width: 66%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  font-style: normal;
  display: none;
}

body.dark .agent-builder-desc-tuning-mode {
  background: rgb(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-desc-tuning-mode {
font-size: 11px;
line-height: 14px;
width: 100%;
margin-bottom: 20px;
}}

@media (max-width: 768px) {
.agent-builder-desc-tuning-mode {
font-size: 12px;
line-height: 14px;
width: 100%;
margin-top: 10px;
margin-bottom: 20px;
}}

.agent-builder-desc-tuning-mode i {
  font-size: 20px;
  color: rgba(240, 255, 0, 0.9);
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
  text-align: center;
}


.agent-builder-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .agent-builder-form {
  gap: 5px;
}}

.agent-builder-form .builder-form-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

@media (max-width: 768px) {
  .agent-builder-form .builder-form-group {
      display: flex;
  flex-direction: column;
  gap: 5px;
}}

.agent-builder-form .builder-form-item-grouped {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0px;
}

@media (max-width: 768px) {
  .agent-builder-form .builder-form-item-grouped {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}}

.agent-builder-form .builder-form-item {
  flex: 1 1;
  margin-top: 0px;
  transition: none; 
  transform: none; 
  box-sizing: border-box; 
  max-width: 100%; 
}

.builder-form-item select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill=%27black%27 height=%2712%27 viewBox=%270 0 24 24%27 width=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M7 10l5 5 5-5z%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; 
  background-size: 1rem;
  padding-right: 2.5rem; 
  cursor: pointer;
}

.builder-form-item select:hover {
  cursor: pointer;
}

.builder-form-item select:disabled {
    opacity: 1;
    cursor: not-allowed !important;
}

.optional-field-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 0px;
  text-shadow: none;
}

@media (max-width: 1366px) {
.optional-field-title {
  font-size: 14px;
}}

@media (max-width: 768px) {
.optional-field-title {
  font-size: 14px;
}}

.agent-builder-form label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 3px;
}

body.light .agent-builder-form label {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .agent-builder-form label {
      font-size: 11.5px;
  }}

@media (max-width: 768px) {
  .agent-builder-form label {
      font-size: 14px;
  }}

.agent-builder-form label .required-field {
  margin-left: 4px;
  color: rgba(220, 50, 70, 1);
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}

body.dark .agent-builder-form label .required-field {
  color: rgba(220, 50, 70, 1);
  text-shadow: 0px 0px 1px rgba(220, 50, 70, 1);
}

body.light .agent-builder-form label .required-field {
  color: rgba(220, 50, 70, 1);
  text-shadow: 0px 0px 1px rgba(220, 50, 70, 1);
}

.agent-builder-form label .optional-field {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-size: 10px;
}

.builder-form-item .field-character-count {
  font-size: 11px;
  vertical-align: middle; 
  position: relative;
  top: 6px;
  padding-right: 6px;
  float: right;
}

@media (max-width: 1366px) {
  .builder-form-item .field-character-count {
  font-size: 10px;
  top: 2px;
}}

.builder-form-item-agent-name .field-character-count {
      top: 6px; 
}

@media (max-width: 1366px) {
.builder-form-item-agent-name .field-character-count {
  font-size: 10px;
  top: 3px;
}}

.builder-form-item .field-character-count i {
color: rgba(240, 255, 0, 1);
text-shadow: none;
margin-left: 3px;
  }

body.light .builder-form-item .field-character-count i {
color: rgba(220, 50, 70, 1);
  }


.agent-builder-form input {
  width: 100%;
  height: 36px;
  padding: 10px;
  background-color: rgba(255,255,255, 0.9);
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  margin-top: -5px;
  margin-bottom: 5px;
}

@media (max-width: 1366px) {
  .agent-builder-form input {
      padding: 6px 10px;
        font-size: 12px;
        
  }}


@media (max-width: 768px) {
  .agent-builder-form input {
      padding: 6px 10px;
        font-size: 13px;
  }}

.agent-builder-form .agent-name-input {
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    height: 30px;
    min-height: 36px;
    max-height: 36px;
}

body.light .agent-builder-form .agent-name-input {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.agent-builder-form .agent-name-input {
      height: 30px;
    min-height: 30px;
    max-height: 30px;
}}

@media (max-width: 768px) {
.agent-builder-form .agent-name-input {
      height: 33px;
    min-height: 33px;
    max-height: 33px;
}}

.agent-builder-form .agent-name-input[disabled] {
  opacity: 1;
  cursor: not-allowed
}

.agent-builder-form textarea {
  width: 100%;
  padding: 6px 10px;
  background-color: rgba(255,255,255, 0.9);
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 15px;
  resize: none;
  min-height: 125px;
  max-height: 250px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .agent-builder-form textarea {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
  .agent-builder-form textarea {
      font-size: 12px;
  min-height: 100px;
  max-height: 250px;
  }}

@media (max-width: 768px) {
  .agent-builder-form textarea {
      font-size: 13px;
  min-height: 100px;
  max-height: 250px;
  }}

  .agent-builder-form textarea:disabled {
    opacity: 1;
    cursor: not-allowed;
}



.agent-builder-form textarea::-webkit-scrollbar{
width: 3px !important;
}


.agent-builder-form textarea::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 1) !important;
width: 3px !important;
}

body.dark .agent-builder-form textarea::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 1) !important;
}

.agent-builder-form textarea::-webkit-scrollbar-thumb {
background-color: rgba(145, 75, 255, 0.6) !important;
  border-radius: 10px !important;
  width: 3px !important;
}

body.dark .agent-builder-form textarea::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6) !important;
}

body.light .agent-builder-form textarea::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6) !important;
}




.agent-builder-form select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  margin-top: 3px;
  margin-bottom: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
cursor: pointer;
}


.agent-builder-form select:hover {
  cursor: pointer !important;
}

.agent-builder-form .builder-select {
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.agent-builder-form .builder-select:disabled,
.builder-select--is-disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.builder-select__control {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0px !important;
  border-radius: 8px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  text-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  margin-bottom: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
}

body.light .builder-select__control {
  color: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important; 
}

@media (max-width: 1366px) {
  .builder-select__control {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
    font-size: 12px !important;
  }}

  @media (max-width: 768px) {
  .builder-select__control {
  width: 100% !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
    font-size: 13px !important;
  }}

.builder-select__single-value {
  color: rgba(0, 0, 0, 0.6) !important;
  text-shadow: none !important;
  display: flex;
  padding: 0px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-top: 2px !important;
}

body.light .builder-select__single-value {
  color: rgba(0, 0, 0, 0.9) !important;
  font-weight: 300 !important;
}

@media (max-width: 1366px) {
  .builder-select__single-value {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin-top: 3px !important;
}}

@media (max-width: 768px) {
  .builder-select__single-value {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-top: 2px !important;
}}

.builder-select__indicator,
.builder-select__dropdown-indicator,
.builder-select__indicator-separator {
display: none !important;
}

.builder-select__menu {
  background: #8063ef !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 100;
  cursor: pointer !important;
  padding: 3px 0px !important;
}

body.dark .builder-select__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .builder-select__menu {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
  .builder-select__menu {
      margin-top: 3px;
  }}

.builder-select__option {
  font-size: 15px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #8063ef !important;
  margin: 0 !important;
}

body.light .builder-select__option {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
  .builder-select__option {
  font-size: 12px !important;
  padding: 3px 10px 3px 10px!important;
  }}

@media (max-width: 768px) {
  .builder-select__option {
  font-size: 13px !important;
  padding: 4px 10px 4px 10px!important;
  }}

.builder-select__option:last-child {
  padding-bottom: 6px !important;
}

body.dark .builder-select__option {
  background: rgba(0, 0, 0, 1) !important;
}

.agent-builder-form input:focus,
.agent-builder-form textarea:focus,
.agent-builder-form select:focus,
.builder-select__control {
  border-color: transparent;
  outline: none;
}

.agent-builder-name-alert,
.agent-builder-specialization-alert {
  font-size: 12.5px;
  font-weight: 500;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
}

.agent-builder-name-alert a,
.agent-builder-specialization-alert a {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .agent-builder-name-alert,
  .agent-builder-specialization-alert {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .agent-builder-name-alert,
  .agent-builder-specialization-alert {
  font-size: 11px;
  }}

.agent-builder-name-alert i,
.agent-builder-specialization-alert i {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  color: rgba(240, 255, 0, 0.9);
}

@media (max-width: 768px) {
  .agent-builder-name-alert i,
  .agent-builder-specialization-alert i {
  font-size: 11px;
  }}

.specialization-label {
    margin-top: 0px;
      font-size: 16px;
      font-weight: 300 ;
}

@media (max-width: 1366px) {
  .specialization-label {
      font-size: 13px;
}}

@media (max-width: 768px) {
  .specialization-label {
      font-size: 14px;
}}

.specialization-checkbox-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
  gap: 0px;
  grid-row-gap: 5px;
  row-gap: 5px;
  width: 100%;    
    margin-top: 0px;
  margin-bottom: 10px;
}

@media (max-width: 1366px) {
  .specialization-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px;
  gap: 0px;
  grid-row-gap: 5px;
  row-gap: 5px;
  width: 100%;    
    margin-top: 0px;
  margin-bottom: 10px;
}}

@media (max-width: 768px) {
  .specialization-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
  gap: 0px;
  grid-row-gap: 5px;
  row-gap: 5px;
  width: 100%;    
    margin-top: 0px;
  margin-bottom: 10px;
}}

.specialization-checkbox-item {
  width: 100%;
  display: flex;
  align-items: center;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .specialization-checkbox-item {
  width: 100%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  }}

@media (max-width: 768px) {
  .specialization-checkbox-item {
  width: 100%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  }}

.specialization-checkbox-item label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255, 0.9);
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .specialization-checkbox-item label {
      font-size: 12px;
  }}

@media (max-width: 768px) {
  .specialization-checkbox-item label {
      font-size: 13px;
      gap: 5px;
  }}

body.dark .specialization-checkbox-item label {
    color: rgba(255,255,255, 0.8);
}

.specialization-checkbox-item span {
    font-weight: 300 !important;
}

.specialization-checkbox-item input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
  margin: 0; 
  padding: 0; 
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important; 
  min-height: 13px !important;
  flex-shrink: 0; 
  display: inline-block;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0px;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

body.dark .specialization-checkbox-item input[type="checkbox"] {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body.light .specialization-checkbox-item input[type="checkbox"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}


.specialization-checkbox-item input[type="checkbox"]:checked {
  background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
body.dark .specialization-checkbox-item input[type="checkbox"]:checked {
  background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

body.light .specialization-checkbox-item input[type="checkbox"]:checked {
  background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

.specialization-checkbox-item input.disable {
  cursor: not-allowed;
  opacity: 1;
}

.agent-builder-note-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  margin: 0 auto;
  margin-top: -7px;
  margin-bottom: 15px;
  position: relative;
  transition: all 0.35s ease;
  opacity: 1;
  transform: translateY(0);
  width: 82%;
}

body.dark .agent-builder-note-box {
  background: rgba(0, 0, 0, 1);
}

body.light .agent-builder-note-box {
  background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
.agent-builder-note-box {
    padding: 8px 10px;
  margin-top: -10px;
  margin-bottom: 10px;
}}

@media (max-width: 768px) {
.agent-builder-note-box {
    padding: 8px 10px;
  margin-top: -5px;
  margin-bottom: 10px;
  width: 100%;
}}

.agent-builder-note {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255,255,255, 1);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  display: block;
  font-style: italic;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

body.light .agent-builder-note {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
}


@media (max-width: 1366px) {
.agent-builder-note {
  font-size: 11px;
  line-height: 14px;
}}

@media (max-width: 768px) {
.agent-builder-note {
  font-size: 13px;
  line-height: 17px;
}}

.agent-builder-note-presets,
.agent-builder-note-guides {
    font-weight: 300;
  text-decoration: underline;
  cursor: pointer;
}

body.light .agent-builder-note-presets,
body.light .agent-builder-note-guides {
  color: rgba(0,0,0, 0.9);
}

.agent-builder-note a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  cursor: pointer;
}

body.light .agent-builder-note a {
  color: rgba(0,0,0, 0.9);
}

.agent-builder-note-presets:disabled,
.agent-builder-note-guides:disabled {
  cursor: not-allowed;
}

.agent-builder-note-box.collapsed {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.note-hide-button {
  position: absolute;
  top: -4px;
  right: -4px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); 
  padding: 0px 2px 2px 2px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 8px;
}

body.light .note-hide-button {
    background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

@media (max-width: 1366px) {
.note-hide-button {
  font-size: 9px;
  padding: 0px 0px;
}}

@media (max-width: 1366px) {
.note-hide-button {
  font-size: 9px;
  padding: 0px 1px;
}}

.agent-builder-note-info-icon {
  margin-left: 0px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease;
  color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  font-size: 14px;
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
  pointer-events: none;
}

body.light .agent-builder-note-info-icon {
  color: rgba(0, 0, 0, 0.9);
}

.agent-builder-note-info-icon.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (max-width: 1366px) {
.agent-builder-note-info-icon {
    font-size: 12px;
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
}}

@media (max-width: 768px) {
.agent-builder-note-info-icon {
  font-size: 12px;
  vertical-align: middle;
  margin-top: 0px;
  margin-left: 5px;
}}

.agent-builder-agreement-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  background: rgb(145, 75, 255, 0.1); 
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .agent-builder-agreement-box {
  background: rgba(255, 255, 255, 0.9);
}

.agent-builder-agreement {
  display: block; 
  font-size: 13px;
  color: rgba(255,255,255, 0.9);
  line-height: 18px;
}

body.light .agent-builder-agreement {
  color: rgba(0, 0, 0, 0.9);
}

.agent-builder-agreement a {
  text-decoration: underline;
  color: rgba(255,255,255, 0.8);
}

body.light .agent-builder-agreement a {
  color: rgba(0, 0, 0, 0.9);
}

.agreement-label {
  display: flex;
  justify-content: center;
  align-items: center;  
  gap: 8px;
  cursor: pointer;
}

.agreement-label span {
  font-size: 14px;
  line-height: 16px;
}

.agreement-label input[type="checkbox"] {
  accent-color: rgba(145, 75, 255, 0.6); 
  border: 1px solid rgba(255, 255, 255, 1); 
  box-shadow: 0px 0px 1px rgba(255, 255, 255, 1); 
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-top: 2px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 5px !important;
}

body.dark .agreement-label input[type="checkbox"] {
  accent-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 1); 
  box-shadow: 0 0px 2px rgba(255, 255, 255, 1); 
}

body.light .agreement-label input[type="checkbox"] {
  accent-color: rgba(255, 255, 255, 1); 
  border: 1px solid rgba(0, 0, 0, 1); 
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.6); 
}

.agreement-tos-link {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

body.light .agreement-tos-link {
  color: rgba(0,0,0,0.9);
  text-decoration: underline;
}

/* mobile only */

.show-specializations-button,
.hide-specializations-button {
  margin: 2px 0px 4px 0px;
  padding: 8px 16px;
  background-color: rgba(255,255,255, 0.9);
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.hide-specializations-button {
  margin: 0px 0px 6px 0px;
}


.agent-builder-form .login-button,
.agent-builder-form .create-agent-button {
  width: 100%;
  margin: 0 auto;
  margin-top: 5px;
  padding: 10px;
  font-size: 16px;
  background: rgb(145, 75, 255, 0.1);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 
  border-radius: 8px;
  cursor: pointer;
  font-weight: 300;
  transition: background-color 0.3s ease;
}

body.dark .agent-builder-form .login-button,
body.dark .agent-builder-form .create-agent-button  {
      background: rgba(0, 0, 0, 1);
        color: rgba(255,255,255, 0.8);
}

body.light .agent-builder-form .login-button,
body.light .agent-builder-form .create-agent-button  {
      background: rgba(255,255,255,1);
      border: 1px solid rgba(0, 0, 0, 0.2);
        color: rgba(0,0,0, 0.9);
}


@media (max-width: 1366px) {
  .agent-builder-form .login-button,
.agent-builder-form .create-agent-button {
    padding: 10px;
  font-size: 13px;
}}

@media (max-width: 768px) {
  .agent-builder-form .login-button,
.agent-builder-form .create-agent-button {
    padding: 10px;
  font-size: 15px;
}}

.create-agent-button[disabled] {
  opacity: 0.7;
  cursor: not-allowed !important;
}

.simulation-log-loading {
  font-size: 15px;
      display: flex;
    justify-content: center;
    align-items: center;

}

@media (max-width: 1366px) {
  .simulation-log-loading {
  font-size: 11px;
}}

@media (max-width: 768px) {
  .simulation-log-loading {
  font-size: 12px;
}}

.create-agent-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


  .simulation-log-loading .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-builder-layout {
  display: flex;
  gap: 10px;
  padding: 0px;
  flex-direction: row;
  align-items: flex-start;
}

@media (max-width: 1366px) {
  .agent-builder-layout {
      gap: 10px;
  }}

@media (max-width: 768px) {
  .agent-builder-layout {
      gap: 10px;
  }}

  .agent-builder-left-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.agent-builder-left {
  position: relative;
  width: 67%;
  overflow-y: auto;
}

@media (max-width: 1366px) {
.agent-builder-left {
  width: 65%;
  }}

.agent-builder-right {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 33% 1;
  gap: 0px;
  padding: 0px 0px 0px 0px;
  width: 100%;
  max-height: 100%;
  overflow-y: none;
  margin: 0 auto;
  background: none;
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border-radius: 0px;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
.agent-builder-right {
  width: 35%;
  }}

.agent-builder-right::-webkit-scrollbar {
display:none;
}

@media (max-width: 768px) {
  .agent-builder-layout {
    flex-direction: column;
  }

  .agent-builder-left,
  .agent-builder-right {
    width: 100%;
  }

  .agent-builder-right {
    margin-top: 0px;
  }
}

.agent-builder-right-simulation,
.agent-builder-right-agents {
  padding: 10px 10px 10px 10px;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: auto;
  margin: 0 auto;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
}

.agent-builder-right-simulation {
  margin-top: 10px
}

.agent-builder-right-quota {
  background: rgb(145, 75, 255, 0.6);
  border-radius: 10px;
    border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}

body.dark .agent-builder-right-quota,
body.dark .agent-builder-right-simulation,
body.dark .agent-builder-right-agents {
    background: rgb(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .agent-builder-right-quota,
body.light .agent-builder-right-simulation,
body.light .agent-builder-right-agents {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}

.agent-builder-right-simulation.open {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.agent-builder-right-simulation.closed {
  height: 55px !important;
  max-height: 100%;
  overflow: hidden;
  padding: 7px 10px;
}

.agent-builder-right-agents {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  margin-top: 0px;
}

.agent-builder-right-simulation::-webkit-scrollbar,
.agent-builder-right-agents::-webkit-scrollbar {
  width: 4px;
    background-color: transparent;
}

.agent-builder-right-simulation::-webkit-scrollbar-thumb,
.agent-builder-right-agents::-webkit-scrollbar-thumb {
    background-color:  rgba(255,255,255,0.6);
}

.title-and-options-container  {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0px;
}

.created-agent-top-button {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1366px) {
.created-agent-top-button {
    gap: 6px;
}}

.created-agent-top-button.disabled {
  opacity: 1;
  cursor: not-allowed;
}

.created-agent-top-button.disabled .simulation-log-filter-perpage,
.created-agent-top-button.disabled .simulation-log-filter-order {
  pointer-events: none;
}

.created-agent-refresh-button {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.dark .created-agent-refresh-button {
  background: rgba(0, 0, 0, 1);
}

body.light .created-agent-refresh-button {
  background: rgba(255,255,255,0.9);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .created-agent-refresh-button {
      width: 23px;
      height: 23px;
        border-radius: 6px;
  }}

  @media (max-width: 1366px) {
  .created-agent-refresh-button {
      width: 30px;
      height: 30px;
        border-radius: 6px;
  }}


.created-agent-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

body.light .created-agent-refresh-button i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .created-agent-refresh-button i {
      font-size: 9px;
  }}

  @media (max-width: 768px) {
  .created-agent-refresh-button i {
      font-size: 10px;
  }}

.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.created-agent-filter-status__control {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 0px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.1)  !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 131px !important;
    max-width: 131px !important;
    cursor: pointer !important; 
  }
  
  body.dark .created-agent-filter-status__control {
  background: rgba(0, 0, 0, 1) !important;
  }
  
  body.light .created-agent-filter-status__control {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  }

  @media (max-width: 1366px) {
    .created-agent-filter-status__control {
      font-size: 11px !important;
      height: 23px !important;
      min-height: 23px !important;
          min-width: 115px !important;
    max-width: 115px !important;
        padding: 0px 0px !important;
    }}

      @media (max-width: 768px) {
    .created-agent-filter-status__control {
      font-size: 12px !important;
      height: 30px !important;
      min-height: 30px !important;
          min-width: 125px !important;
    max-width: 125px !important;
        padding: 0px 0px !important;
    }}

.created-agent-filter-status__single-value,
.created-agent-filter-status__input,
.created-agent-filter-status__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none;
  font-weight: 300;
}

body.light .created-agent-filter-status__single-value,
body.light .created-agent-filter-status__input,
body.light .created-agent-filter-status__placeholder
 {
  color: rgba(0, 0, 0, 0.9) !important;
 }

.created-agent-filter-status__indicator,
.created-agent-filter-status__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none;
  padding-left: 5px !important;
  margin-top: -4px;
}

body.light .created-agent-filter-status__indicator,
body.light .created-agent-filter-status__dropdown-indicator {
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-status__indicator {
  margin-top: -5px !important;
}}

@media (max-width: 768px) {
  .created-agent-filter-status__indicator {
  margin-top: -3px !important;
}}

  .created-agent-filter-status__indicator-separator {
  margin-top: 4px !important;
  height: 18px !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-status__indicator-separator {
  margin-top: 4px !important;
  height: 12px !important;
}}

@media (max-width: 768px) {
  .created-agent-filter-status__indicator-separator {
  margin-top: 6px !important;
  height: 14px !important;
}}


  .created-agent-filter-status__dropdown-indicator {
    width: 25px !important;
  }

@media (max-width: 1366px) {
  .created-agent-filter-status__dropdown-indicator {
  margin-top: -8px !important;
    width: 25px !important;
}}

@media (max-width: 768px) {
  .created-agent-filter-status__dropdown-indicator {
  margin-top: -3px !important;
    width: 30px !important;
}}

.created-agent-filter-status__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
  margin-top: -5px;
}

@media (max-width: 1366px) {
  .created-agent-filter-status__value-container {
  margin-top: -6px !important;
}}

.created-agent-filter-status__menu {
  background: #6d7ce1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .created-agent-filter-status__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .created-agent-filter-status__menu {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border: none !important;
}


@media (max-width: 1366px) {
.created-agent-filter-status__menu {
  margin-top: 5px !important;
}}

.created-agent-filter-status__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #6d7ce1 !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-status__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

  @media (max-width: 768px) {
  .created-agent-filter-status__option {
    font-size: 12px !important;
    padding: 4px 10px 4px 10px!important;
  }}


.created-agent-filter-status__option:last-child {
  padding-bottom: 6px !important;
}


@media (max-width: 1366px) {
  .created-agent-filter-status__option:last-child {
    padding-bottom: 2px !important;
  }}

  @media (max-width: 768px) {
  .created-agent-filter-status__option:last-child {
    padding-bottom: 6px !important;
  }}

body.dark .created-agent-filter-status__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .created-agent-filter-status__option {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border: none !important;
}

.created-agent-filter-perpage__control {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 0px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.1)  !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    width: auto!important;
    cursor: pointer !important; 
  }
  
  body.dark .created-agent-filter-perpage__control {
  background: rgba(0, 0, 0, 1) !important;
  }
  
  body.light .created-agent-filter-perpage__control {
  background: rgba(0, 0, 0, 1) !important;
  }

  @media (max-width: 1366px) {
    .created-agent-filter-perpage__control {
      font-size: 11px !important;
      height: 23px !important;
      min-height: 23px !important;
    width: auto!important;
        padding: 0px 0px !important;
    }}

.created-agent-filter-perpage__single-value,
.created-agent-filter-perpage__input,
.created-agent-filter-perpage__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none;
  font-weight: 300;
}

.created-agent-filter-perpage__indicator,
.created-agent-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none;
  padding-left: 5px !important;
  margin-top: -4px;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__indicator {
  margin-top: -5px !important;
}}


  .created-agent-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 18px !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 12px !important;
}}

  .created-agent-filter-perpage__dropdown-indicator {
  width: 25px !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__dropdown-indicator {
  margin-top: -8px !important;
  width: 25px !important;
}}

.created-agent-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
  margin-top: -5px;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__value-container {
  margin-top: -6px !important;
}}

.created-agent-filter-perpage__menu {
  background: #9352e1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .created-agent-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .created-agent-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

@media (max-width: 1366px) {
.created-agent-filter-perpage__menu {
  margin-top: 5px !important;
}}

.created-agent-filter-perpage__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 8px 10px 2px 10px!important;
  cursor: pointer !important;
  background: #9352e1 !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__option {
    font-size: 11px !important;
    padding: 4px 10px 2px 10px!important;
  }}

.created-agent-filter-perpage__option:last-child {
  padding-bottom: 10px !important;
}

@media (max-width: 1366px) {
  .created-agent-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

body.dark .created-agent-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .created-agent-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}

.created-agent-filter-perpage__option:hover {
  background: #7D37FF !important;
}

.builder-created-agent {
  padding: 0px;
  margin-top: 5px;
}

@media (max-width: 768px) {
.builder-created-agent {
  min-height: 75px;
}}

.builder-created-agent-title {
  font-size: 22px;
  text-align: left;
  font-weight: 300;
  margin-top: -6px;
  margin-left: 0px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.light .builder-created-agent-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-title {
  font-size: 14px;
  }}

@media (max-width: 768px) {
  .builder-created-agent-title {
  font-size: 18px;
  margin-left: 0px;
  }}

.no-agent-created,
.no-agent-found {
  font-size: 13px;
  text-align: left;
  font-style: italic;
  margin-top: 20px;
}

body.light .no-agent-created,
body.light .no-agent-found {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.no-agent-created,
.no-agent-found {
  font-size: 11px;
  }}

@media (max-width: 768px) {
.no-agent-created,
.no-agent-found {
  font-size: 13px;
  }}

.builder-created-agent-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 1366px) {
.builder-created-agent-list {
  gap: 10px;
  }}

@media (max-width: 768px) {
.builder-created-agent-list {
  gap: 10px;
}}

.builder-created-agent-item {
  background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: rgba(255,255,255, 0.9);
  position: relative;
  overflow: hidden;
}

body.dark .builder-created-agent-item {
    background: rgba(0, 0, 0, 1);
}

body.light .builder-created-agent-item {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 0, 0, 0.2); 
}


.builder-created-agent-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.light .builder-created-agent-info {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-info {
  gap: 2px;
}}

@media (max-width: 768px) {
  .builder-created-agent-info {
  gap: 1px;
}}

.builder-created-agent-name {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
}

@media (max-width: 1366px) {
  .builder-created-agent-name {
  font-size: 15px;
}}

@media (max-width: 768px) {
  .builder-created-agent-name {
  font-size: 16px;
}}

.builder-created-agent-specialization {
  font-size: 14px;
      line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
  width: 100%;
  margin-top: 0px;
}

body.light .builder-created-agent-specialization {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-specialization {
  font-size: 12px;
    line-height: 15px;
  }}


@media (max-width: 768px) {
  .builder-created-agent-specialization {
  font-size: 13px;
  line-height: 17px;
  }}

.builder-created-agent-dates {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
    margin-top: 0px;
      text-align: left;
}

body.light .builder-created-agent-dates {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.builder-created-agent-dates {
  font-size: 12px;
}}

@media (max-width:768px) {
.builder-created-agent-dates {
  font-size: 12px;
  margin-top: -3px;
  margin-bottom: 5px;
}}


.builder-created-agent-submission-status {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .builder-created-agent-submission-status {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-submission-status {
  font-size: 12px;
  }}


@media (max-width: 768px) {
  .builder-created-agent-submission-status {
  font-size: 13px;
  }}

  .builder-created-agent-integration-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .builder-created-agent-integration-status {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-integration-status {
  font-size: 12px;
  }}


@media (max-width: 768px) {
  .builder-created-agent-integration-status {
  font-size: 13px;
  }}


.builder-created-agent-files {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .builder-created-agent-files {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.builder-created-agent-files {
  font-size: 12px;
  }}


@media (max-width: 768px) {
.builder-created-agent-files {
  font-size: 13px;
  }}


.builder-created-agent-simulation-stats {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-simulation-stats {
  font-size: 12px;
  }}


@media (max-width: 768px) {
  .builder-created-agent-simulation-stats {
  font-size: 13px;
  }}

  .builder-created-agent-interaction-stats {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .builder-created-agent-interaction-stats {
  font-size: 12px;
  }}


@media (max-width: 768px) {
  .builder-created-agent-interaction-stats {
  font-size: 13px;
  }}

.created-agent-button-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 7px;
}

.created-agent-button-container-1 {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    z-index: 2;
}

.created-agent-tune-button,
.created-agent-simulate-button,
.created-agent-submit-button,
.created-agent-integrate-button,
.created-agent-source-button, 
.created-agent-analytics-button, 
.created-agent-setting-button,
.created-agent-edit-button,
.created-agent-delete-button {
  background: rgb(145, 75, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;  width: auto;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1366px) {
.created-agent-tune-button,
.created-agent-simulate-button,
.created-agent-submit-button,
.created-agent-integrate-button,
.created-agent-source-button,
.created-agent-analytics-button, 
.created-agent-setting-button,
.created-agent-edit-button,
.created-agent-delete-button {
  padding: 6px 15px;
  border-radius: 6px;
  font-size: 12px;
  transition: background-color 0.2s;
}}

@media (max-width: 768px) {
.created-agent-tune-button,
.created-agent-simulate-button,
.created-agent-submit-button,
.created-agent-integrate-button,
.created-agent-source-button,
.created-agent-analytics-button, 
.created-agent-setting-button,
.created-agent-edit-button,
.created-agent-delete-button {
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 13px;
  transition: background-color 0.2s;
}}

body.dark .created-agent-tune-button,
body.dark .created-agent-simulate-button,
body.dark .created-agent-submit-button,
body.dark .created-agent-integrate-button,
body.dark .created-agent-source-button, 
body.dark .created-agent-analytics-button, 
body.dark .created-agent-setting-button,
body.dark .created-agent-edit-button,
body.dark .created-agent-delete-button {
    background: rgba(0, 0, 0, 1);
}

body.light .created-agent-tune-button,
body.light .created-agent-simulate-button,
body.light .created-agent-submit-button,
body.light .created-agent-integrate-button,
body.light .created-agent-source-button, 
body.light .created-agent-analytics-button, 
body.light .created-agent-setting-button,
body.light .created-agent-edit-button,
body.light .created-agent-delete-button {
    background: rgba(255,255,255,0.9);
    color: rgba(0, 0, 0, 0.9);
}

.created-agent-tune-button.disabled,
.created-agent-simulate-button.disabled,
.created-agent-submit-button.disabled,
.created-agent-integrate-button.disabled,
.created-agent-source-button.disabled, 
.created-agent-analytics-button.disabled, 
.created-agent-setting-button.disabled,
.created-agent-edit-button.disabled,
.created-agent-delete-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.created-agent-submit-button.submitted {
  cursor: not-allowed;
}

.created-agent-submit-button {
  text-decoration: none !important;
}

.created-agent-tune-button i,
.created-agent-simulate-button i,
.created-agent-submit-button i,
.created-agent-integrate-button i,
.created-agent-source-button i,
.created-agent-analytics-button i, 
.created-agent-setting-button i,
.created-agent-edit-button i,
.created-agent-delete-button i {
  margin-right: 5px;
}

.created-agent-setting-button .fa-spin {
  animation: fa-spin 1.5s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}


.created-agent-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px 0px;
    }

    @media (max-width: 1366px) {
      .created-agent-pagination {
        margin-top: 10px;
      }}

    @media (max-width: 768px) {
      .created-agent-pagination {
        justify-content:space-between;
        margin-top: 20px;
      }}
  
    .created-agent-pagination-button {
    font-size: 13px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    }
  
    body.dark .created-agent-pagination-button {
      background: rgba(0,0,0,0.1);
    }

        body.light .created-agent-pagination-button {
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(0, 0, 0, 0.2); 
      color: rgba(0, 0, 0, 0.9);
    }
  
    @media (max-width: 1366px) {
      .created-agent-pagination-button {
          font-size: 12px;
          padding: 4px 10px;
    width: 75px;
    min-width: 75px;
    max-width: 75px;
      }}
  
      @media (max-width: 768px) {
        .created-agent-pagination-button {
            font-size: 12px;
            padding: 4px 10px;
        }}
  
    .created-agent-pagination-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    }
  
    .created-agent-pagination-info {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    }

    body.light .created-agent-pagination-info {
      color: rgba(0, 0, 0, 0.6);
    }

    @media (max-width: 1366px) {
      .created-agent-pagination-info {
        font-size: 11px;
      }}

    @media (max-width: 768px) {
      .created-agent-pagination-info {
        font-size: 12px;
      }}





.response-simulator {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  padding: 10px 10px 5px 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  margin-top: 10px;
  position: relative;
}

body.dark .response-simulator {
      background: rgba(0,0,0,0.1);
}

body.light .response-simulator {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.2); 
}


@media (max-width: 768px) {
  .response-simulator {
      padding: 10px 10px 10px 10px;
      margin-top: 15px;
  }}

.builder-simulator-title {
  font-size: 22px;
  text-align: left;
  font-weight: 300;
  margin-top: 0px;
  margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.light .builder-simulator-title {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .builder-simulator-title {
  font-size: 16px;
  }}


@media (max-width: 768px) {
  .builder-simulator-title {
  font-size: 20px;
  }}

.currently-simulating {
  font-size: 15px;
  text-align: left;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  width: 95%;
  margin-top: 0px;
  margin-bottom: 10px;
}

body.light .currently-simulating {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.currently-simulating {
  font-size: 11.2px;
  }}

@media (max-width: 768px) {
.currently-simulating {
  font-size: 13px;
  }}

.currently-simulating span {
    font-weight: 400;
    text-shadow: none;
}


.simulator-header-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -5px;
}

.builder-simulator-title-and-toggle {
  display: flex;
  justify-content: space-between;
}

      .simulation-expand-button,
      .simulation-stop-button,
      .simulation-hide-show-button {
     background: rgb(145, 75, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.9);
        font-size: 12px;
        padding: 6px 8px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
  }

    body.dark .simulation-expand-button,
    body.dark .simulation-stop-button,
    body.dark .simulation-hide-show-button {
      background: rgba(0,0,0,0.1);
    }

        body.light .simulation-expand-button,
    body.light .simulation-stop-button,
    body.light .simulation-hide-show-button {
      background: rgba(255,255,255,0.9);
      color: rgba(0, 0, 0, 0.9);
    }

        @media (max-width: 1366px) {
      .simulation-expand-button,
      .simulation-stop-button,
      .simulation-hide-show-button {
        border-radius: 6px !important;
        font-size: 9px;
        padding: 4px 6px;
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
            }}

    @media (max-width: 768px) {
      .simulation-expand-button,
      .simulation-stop-button,
      .simulation-hide-show-button {
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        border-radius: 6px !important;
        font-size: 11px;
        padding: 4px 8px;
            }}


.simulation-log-error {
  font-size: 13px;
  text-align: left;
  font-weight: 500;
  color: rgb(255, 255, 255, 0.8);
  text-shadow: none;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-style: italic;
}

@media (max-width: 1366px) {
  .simulation-log-error {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .simulation-log-error {
  font-size: 12px;
  }}


.simulator-error-message {
  font-size: 13px;
  text-align: left;
  font-weight: 300;
  color: rgb(255, 255, 255, 0.8);
  text-shadow: none;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 10px;
  font-style: italic;
}

@media (max-width: 1366px) {
  .simulator-error-message {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .simulator-error-message {
  font-size: 12px;
  }}

.simulator-input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  margin-top: 0px;
  margin-bottom: 0px;
  resize: vertical;
  height: 100px;
  min-height: 100px;
  max-height: 300px;
  font-size: 14px;
  line-height: 19px;
  background-color: rgba(255,255,255,1);
  color: rgba(0,0,0,0.66);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .simulator-input {
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

.simulator-input:focus,
.simulator-input:focus  {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.simulator-input:disabled {
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 1366px) {
  .simulator-input {
  padding: 8px;
  margin-bottom: 8px;
  resize: vertical;
  height: 100px;
  min-height: 100px;
  max-height: 200px;
  font-size: 13px;
}}

     .simulator-input::placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    opacity: 1;
    }

@media (max-width: 1366px) {
     .simulator-input::placeholder {
    font-size: 11px;
     }}

@media (max-width: 768px) {
     .simulator-input::placeholder {
    font-size: 13px;
     }}

.simulator-input-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.simulator-input-wrapper.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(145, 75, 255, 0) 0%,
    rgba(145, 75, 255, 0.2) 50%,
    rgba(145, 75, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 1.5s infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes shimmer {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(150%) skewX(-20deg); }
}


body.dark .simulator-input-wrapper.loading::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

body.light .simulator-input-wrapper.loading::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}


     .agent-response-label {
      font-size: 14px;
  line-height: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  margin-bottom: 10px;
     }

     @media (max-width: 1366px) {
     .agent-response-label {
      font-size: 11px;
  line-height: 13px;
     }}

          @media (max-width: 768px) {
     .agent-response-label {
      font-size: 12px;
  line-height: 14px;
     }}

.simulator-output {
 margin-top: 15px;
 margin-bottom: 10px;
 height: auto;
 min-height: auto;
 max-height: auto;
  overflow-y: auto;
  white-space: pre-wrap;
  background: rgba(255,255,255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.7);
  position: relative;
}

@media (max-width: 1366px) {
  .simulator-output {
      font-size: 12px;
  line-height: 14px;
  }}

@media (max-width: 768px) {
  .simulator-output {
      font-size: 13px;
  line-height: 16px;
   margin-bottom: 3px;
  }}

.simulator-output a,
.formatted-agent-output a {
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    text-decoration: underline;
    font-weight: 300;
}

.formatted-agent-output {
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  margin-top: 6px;
}

@media (max-width: 1366px) {
.formatted-agent-output {
      font-size: 12px;
  line-height: 14px;
  }}


@media (max-width: 768px) {
.formatted-agent-output {
      font-size: 13px;
  line-height: 15px;
  }}

.log-error-output {
  color: rgba(255,215,0, 0.9);
  text-shadow: none;
  font-style: none;
}










.simulator-input-info {
  text-align: right;
  margin: 0px 6px 3px 0px;
  font-size: 11px;
  display: none;
}

@media (max-width: 1366px) {
  .simulator-input-info {
      font-size: 10px;
      margin: 0px 4px 1px 0px;
  }}

@media (max-width: 768px) {
  .simulator-input-info {
      font-size: 10px;
      margin: 0px 4px 2px 0px;
  }}

  .simulator-input-info .input-character-count.warning {
  color: rgba(255,255,255, 0.7);
  text-shadow: none;
  font-weight: 500;
}

.simulator-input-info .input-character-count {
  color: rgba(255,255,255, 0.7);
  text-shadow: none;
  font-weight: 500;
}

  .simulator-input-info .input-character-count.warning i {
color: rgba(240, 255, 0, 1);
text-shadow: none;
margin-left: 1px;
  }

  .simulator-input-info .input-character-count i {
color: rgb(6, 186, 126, 1);
text-shadow: none;
margin-left: 2px;
  }


.simulator-action-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 8px;
  gap: 10px;
}

    @media (max-width: 1366px) {
      .simulator-action-button {
          gap: 6px;
}}

    @media (max-width: 768px) {
      .simulator-action-button {
      margin-top: 5px;
      margin-bottom: 3px;
}}


.simulator-action-button-sub {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

    @media (max-width: 1366px) {
      .simulator-action-button-sub {
          gap: 6px;
}}


.simulator-run-button,
.simulator-clear-button,
.simulator-copy-button {
  padding: 4px 8px;
  font-size: 13px;
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
}

body.dark .simulator-run-button,
body.dark .simulator-clear-button,
body.dark .simulator-copy-button  {
      background: rgba(0,0,0,0.1);
}

body.light .simulator-run-button,
body.light .simulator-clear-button,
body.light .simulator-copy-button  {
      background: rgba(255,255,255,0.9);
      color: rgba(0, 0, 0, 0.9);
      font-weight: 300;
}

.simulator-run-button {
 width: auto;
  max-width: auto;
  text-align: center;
} 

    @media (max-width: 1366px) {
      .simulator-run-button {
 width: auto;
  max-width: auto;
}}

    @media (max-width: 768px) {
      .simulator-run-button {
 width: auto;
  max-width: auto;
}}


.simulator-run-button:disabled,
.enter-to-send-main-simulation-switch input:disabled,
.simulation-expand-button:disabled,
.simulator-clear-button:disabled,
.simulator-copy-button:disabled {
  opacity: 1;
  cursor: not-allowed;
}


.enter-to-send-main-simulation.disabled {
  opacity: 1;
  cursor: not-allowed;
}

.simulator-run-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.simulator-run-button i,
.simulator-clear-button i,
.simulator-copy-button i {
       margin-right: 5px;
    }



    @media (max-width: 1366px) {
.simulator-run-button,
.simulator-clear-button,
.simulator-copy-button {
  padding: 4px 6px;
  font-size: 12px;
}}

    @media (max-width: 768px) {
.simulator-run-button,
.simulator-clear-button,
.simulator-copy-button {
  padding: 4px 10px;
  font-size: 12px;
  height: 30px;
  min-height: 30px;
}}


 

  .simulation-log-section {
  background: transparent;
  padding: 0px;
  margin-top: 0px;
  color: rgba(255, 255, 255, 0.9);
  min-height: 200px;
}

 @media (max-width: 768px) {
 .simulation-log-section {
  min-height: 66px;
}}

.simulation-log-title-and-options  {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0px;
  vertical-align: middle;
  margin-top: 10px;
}

.simulation-log-top-options {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1366px) {
.simulation-log-top-options {
    gap: 6px;
}}

.simulation-log-top-options.disabled {
  opacity: 1;
  cursor: not-allowed;
}
.simulation-log-top-options.disabled .simulation-log-filter-perpage,
.simulation-log-top-options.disabled .simulation-log-filter-order {
  pointer-events: none;
}

.simulation-log-title {
  font-size: 20px;
  text-align: left;
  font-weight: 300;
  margin-bottom: 0px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .simulation-log-title {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .simulation-log-title {
  font-size: 16px;
  }}

@media (max-width: 768px) {
  .simulation-log-title {
  font-size: 18px;
  }}






  .simulation-log-refresh-button {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.dark .simulation-log-refresh-button {
  background: rgba(0, 0, 0, 1);
}

body.light .simulation-log-refresh-button {
  background: rgba(255,255,255,0.9);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .simulation-log-refresh-button {
      width: 23px;
      height: 23px;
        border-radius: 6px;
  }}

  @media (max-width: 768px) {
  .simulation-log-refresh-button {
      width: 30px;
      height: 30px;
        border-radius: 6px;
  }}

.simulation-log-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

body.light .simulation-log-refresh-button i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .simulation-log-refresh-button i {
      font-size: 9px;
  }}

@media (max-width: 768px) {
  .simulation-log-refresh-button i {
      font-size: 10px;
  }}

.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

  .simulation-log-filter-order__control {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 0px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.1)  !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 88px !important;
    max-width: 88px !important;
    cursor: pointer !important; 
  }
  
  body.dark .simulation-log-filter-order__control {
  background: rgba(0, 0, 0, 1) !important;
  }
  
  body.light .simulation-log-filter-order__control {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  }

  @media (max-width: 1366px) {
    .simulation-log-filter-order__control {
      font-size: 11px !important;
      height: 23px !important;
      min-height: 23px !important;
          min-width: 85px !important;
    max-width: 85px !important;
        padding: 0px 0px !important;
    }}

      @media (max-width: 768px) {
    .simulation-log-filter-order__control {
      font-size: 12px !important;
      height: 30px !important;
      min-height: 30px !important;
          min-width: 90px !important;
    max-width: 90px !important;
        padding: 0px 0px !important;
    }}

.simulation-log-filter-order__single-value,
.simulation-log-filter-order__input,
.simulation-log-filter-order__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none;
  font-weight: 300;
  font-size: 13px !important;
  margin-top: -2px;
}

body.light .simulation-log-filter-order__single-value,
body.light .simulation-log-filter-order__input,
body.light .simulation-log-filter-order__placeholder
 {
  color: rgba(0, 0, 0, 0.9) !important;
 }

.simulation-log-filter-order__indicator,
.simulation-log-filter-order__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none;
  padding-left: 5px !important;
  margin-top: -4px;
}

body.light .simulation-log-filter-order__indicator,
body.light .simulation-log-filter-order__dropdown-indicator {
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
  .simulation-log-filter-order__indicator {
  margin-top: -5px !important;
}}


  .simulation-log-filter-order__indicator-separator {
  margin-top: 4px !important;
  height: 18px !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-order__indicator-separator {
  margin-top: 4px !important;
  height: 12px !important;
}}

@media (max-width: 768px) {
  .simulation-log-filter-order__indicator-separator {
  margin-top: 6px !important;
  height: 14px !important;
}}

  .simulation-log-filter-order__dropdown-indicator {
  width: 25px !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-order__dropdown-indicator {
  margin-top: -8px !important;
  width: 25px !important;
}}

@media (max-width: 768px) {
  .simulation-log-filter-order__dropdown-indicator {
  margin-top: -3px !important;
  width: 30px !important;
}}

.simulation-log-filter-order__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
  margin-top: -5px;
}

@media (max-width: 1366px) {
  .simulation-log-filter-order__value-container {
  margin-top: -6px !important;
}}


.simulation-log-filter-order__menu {
  background: #6d7ce1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .simulation-log-filter-order__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .simulation-log-filter-order__menu {
  background: rgba(255,255,255,0.9) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 1366px) {
.simulation-log-filter-order__menu {
  margin-top: 5px !important;
}}

.simulation-log-filter-order__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #6d7ce1 !important;
}

body.light .simulation-log-filter-order__option {
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-order__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

  @media (max-width: 768px) {
  .simulation-log-filter-order__option {
    font-size: 12px !important;
    padding: 4px 10px 4px 10px!important;
  }}

.simulation-log-filter-order__option:last-child {
  padding-bottom: 10px !important;
}


@media (max-width: 1366px) {
  .simulation-log-filter-order__option:last-child {
    padding-bottom: 2px !important;
  }}

  @media (max-width: 1768px) {
  .simulation-log-filter-order__option:last-child {
    padding-bottom: 6px !important;
  }}


body.dark .simulation-log-filter-order__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .simulation-log-filter-order__option {
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.9) !important;
}


.simulation-log-filter-perpage__control {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 0px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.1)  !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 60px !important;
    max-width: 60px !important;
    cursor: pointer !important; 
  }
  
  body.dark .simulation-log-filter-perpage__control {
  background: rgba(0, 0, 0, 1) !important;
  }
  
    body.light .simulation-log-filter-perpage__control {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  }
  

  @media (max-width: 1366px) {
    .simulation-log-filter-perpage__control {
      font-size: 11px !important;
      height: 23px !important;
      min-height: 23px !important;
          min-width: 60px !important;
    max-width: 60px !important;
        padding: 0px 0px !important;
    }}

      @media (max-width: 768px) {
    .simulation-log-filter-perpage__control {
      font-size: 12px !important;
      height: 30px !important;
      min-height: 30px !important;
          min-width: 65px !important;
    max-width: 65px !important;
        padding: 0px 0px !important;
    }}

.simulation-log-filter-perpage__single-value,
.simulation-log-filter-perpage__input,
.simulation-log-filter-perpage__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none;
  font-weight: 300;
  font-size: 13px !important;
}

body.light .simulation-log-filter-perpage__single-value,
body.light .simulation-log-filter-perpage__input,
body.light .simulation-log-filter-perpage__placeholder
 {
  color: rgba(0, 0, 0, 0.9) !important;
}



.simulation-log-filter-perpage__indicator,
.simulation-log-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none;
  padding-left: 5px !important;
  margin-top: -4px;
}

body.light .simulation-log-filter-perpage__indicator,
body.light .simulation-log-filter-perpage__dropdown-indicator {
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
  .simulation-log-filter-perpage__indicator {
  margin-top: -5px !important;
}}


  .simulation-log-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 18px !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 12px !important;
}}

@media (max-width: 768px) {
  .simulation-log-filter-perpage__indicator-separator {
  margin-top: 6px !important;
  height: 14px !important;
}}

  .simulation-log-filter-perpage__dropdown-indicator {
  width: 25px !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-perpage__dropdown-indicator {
  margin-top: -8px !important;
  width: 25px !important;
}}

@media (max-width: 768px) {
  .simulation-log-filter-perpage__dropdown-indicator {
  margin-top: -3px !important;
  width: 30px !important;
}}

.simulation-log-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
  margin-top: -5px;
}

@media (max-width: 1366px) {
  .simulation-log-filter-perpage__value-container {
  margin-top: -6px !important;
}}


.simulation-log-filter-perpage__menu {
  background: #7078e5 !important;
  color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .simulation-log-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .simulation-log-filter-perpage__menu {
  background: rgba(255,255,255,0.9) !important;  
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}


@media (max-width: 1366px) {
.simulation-log-filter-perpage__menu {
  margin-top: 5px !important;
}}

.simulation-log-filter-perpage__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #7078e5 !important;
}

@media (max-width: 1366px) {
  .simulation-log-filter-perpage__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

  @media (max-width: 768px) {
  .simulation-log-filter-perpage__option {
    font-size: 12px !important;
    padding: 4px 10px 4px 10px!important;
  }}

.simulation-log-filter-perpage__option:last-child {
  padding-bottom: 6px !important;
}


@media (max-width: 1366px) {
  .simulation-log-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

  @media (max-width: 768px) {
  .simulation-log-filter-perpage__option:last-child {
    padding-bottom: 6px !important;
  }}

body.dark .simulation-log-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .simulation-log-filter-perpage__option {
  background: rgba(255,255,255,0.9) !important;  
  color: rgba(0, 0, 0, 0.9) !important;
}

.no-simulation-log {
  font-size: 14px;
  text-align: left;
  font-style: italic;
    margin-top: 0px;
}

body.light .no-simulation-log {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .no-simulation-log {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .no-simulation-log {
  font-size: 12px;
  }}

.simulation-log-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 1366px) {
  .simulation-log-list {
  gap: 8px;
  }}


@media (max-width: 768px) {
  .simulation-log-list {
  gap: 10px;
  }}

.simulation-log-item {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 10px;
  color: rgba(255,255,255,0.8);
  position: relative;
}

body.dark .simulation-log-item {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.9);
}

body.light .simulation-log-item {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.log-content-input-owner, 
.log-content-input-agent,
.log-content-input-type {
  font-weight: 400
}

.simulation-log-item .formatted-agent-output {
  display: block;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
    margin-top: 5px;
}

body.light .simulation-log-item .formatted-agent-output {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.simulation-log-item .formatted-agent-output {
      font-size: 12px;
  line-height: 15px;
  }}


@media (max-width: 768px) {
.simulation-log-item .formatted-agent-output {
      font-size: 13px;
  line-height: 16px;
  margin-top: 5px;
  }}


.simulation-log-item .formatted-agent-output a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

body.light .simulation-log-item .formatted-agent-output a {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: none;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-copy-button button {
  padding: 0px;
  font-size: 11px;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: none;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

body.dark .log-copy-button button {
  background: rgba(0, 0, 0, 1);
}

body.light .log-copy-button button {
  background: transparent;
}

.log-copy-button button i {
  margin-right: 1px;
}

body.light .log-copy-button button i {
  color: rgba(0, 0, 0, 0.9);
}

.log-copy-disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 1366px) {
  .log-copy-button button {
  padding: 3px 6px;
  font-size: 10px;
    position: absolute;
  bottom: 6px;
  right: 6px;
  }}


@media (max-width: 768px) {
  .log-copy-button button {
  padding: 2px 8px;
  font-size: 10px;
  }}



.simulation-log-current {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

body.light .simulation-log-current {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .simulation-log-current {
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .simulation-log-current {
  font-size: 13px;
  margin-top: 20px;
  }}


.log-content-agent-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  display: none;
}

body.dark .log-content-agent-name {
  color: rgba(255,255,255,0.8);
}

body.light .log-content-agent-name {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .log-content-agent-name {
  font-size: 13px;
  }}

@media (max-width: 768px) {
  .log-content-agent-name {
  font-size: 13px;
  }}


.log-content-date {
  font-size: 11px;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.95);
margin-top: 0px;
}

body.dark .log-content-date {
  color: rgba(255,255,255,0.8);
}

body.light .log-content-date {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .log-content-date {
    margin-top: 2px;
  font-size: 11px;
  }}

@media (max-width: 768px) {
  .log-content-date {
  font-size: 11px;
  }}


.log-content-input {
  margin-top: 10px;
  font-size: 14px;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.95);
}

body.dark .log-content-input {
  color: rgba(255,255,255,0.8);
}

body.light .log-content-input {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .log-content-input {
    margin-top: 5px;
  font-size: 12px;
  }}

@media (max-width: 768px) {
  .log-content-input {
  font-size: 13px;
  }}


.log-content-output {
  font-size: 14px;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 10px;
}

body.dark .log-content-output {
  color: rgba(255,255,255,0.8);
}

body.light .log-content-output {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .log-content-output {
        margin-top: 5px;
  font-size: 12px;
  }}

@media (max-width: 768px) {
  .log-content-output {
  font-size: 13px;
  }}

.log-content-type {
    font-size: 14px;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 10px;
  }

body.dark .log-content-type {
  color: rgba(255,255,255,0.8);
}

body.light .log-content-type {
  color: rgba(0,0,0,0.9);
}

@media (max-width: 1366px) {
  .log-content-type {
        margin-top: 5px;
  font-size: 12px;
  }}

@media (max-width: 768px) {
  .log-content-type {
  font-size: 13px;
  }}

.simulation-log-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 0px;
    padding: 0px 0px;
    }

    @media (max-width: 1366px) {
      .simulation-log-pagination {
        margin-top: 10px;
      }}

    @media (max-width: 768px) {
      .simulation-log-pagination {
        justify-content:space-between;
        margin-top: 20px;
      }}
  
    .simulation-log-pagination-button {
    font-size: 13px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    }
  
    body.dark .simulation-log-pagination-button {
      background: rgba(0,0,0,0.1);
    }

        body.light .simulation-log-pagination-button {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.9);
    }
  
    @media (max-width: 1366px) {
      .simulation-log-pagination-button {
          font-size: 12px;
          padding: 4px 10px;
    width: 75px;
    min-width: 75px;
    max-width: 75px;
      }}
  
      @media (max-width: 768px) {
        .simulation-log-pagination-button {
            font-size: 12px;
            padding: 4px 10px;
        }}
  
    .simulation-log-pagination-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    }
  
    .simulation-log-pagination-info {
      color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 300;
    }

    body.dark .simulation-log-pagination-info {
      color: rgba(255, 255, 255, 0.9);
    }

        body.light .simulation-log-pagination-info {
      color: rgba(0, 0, 0, 0.9);
    }


    @media (max-width: 1366px) {
      .simulation-log-pagination-info {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8) !important;
      }}

    @media (max-width: 768px) {
      .simulation-log-pagination-info {
        font-size: 12px;
        font-weight: 300;
      }}

body:has(.agent-builder-message-overlay) .user-header,
body:has(.agent-builder-message-overlay) .admin-header,
body:has(.agent-builder-message-overlay) .main-footer,
body:has(.agent-builder-message-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.agent-builder-message-overlay) .global-footer,
body:has(.agent-builder-message-overlay) .ask-treo,
body:has(.agent-builder-message-overlay) .agent-interaction-dock-button,
body:has(.agent-builder-message-overlay) .float-chat-button {
  display: none;
}

.agent-builder-message-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999999999;
}

.agent-builder-message-content {
background: #7375e1;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 25%;
  max-width: 25%;
  white-space: pre-line !important;
}

body.dark .agent-builder-message-content {
background: rgba(0, 0, 0, 1);
border: 1px solid rgba(255, 255, 255, 0.2); 
}

body.light .agent-builder-message-content {
background: rgba(255,255,255,1);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .agent-builder-message-content {
    min-width: 95%;
    max-width: 95%;
    padding: 20px;
    height: auto;
    min-height: auto;
  }}


  .agent-builder-message-content h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-builder-message-content h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}


.agent-builder-message-content p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
    text-align: center;
}

@media (max-width: 1366px) {
.agent-builder-message-content p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content p {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 6px;
  }}

  .agent-builder-message-content a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }



/* threshold */

.agent-builder-message-content-threshold {
background: #7375e1;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 25%;
  max-width: 25%;
  white-space: pre-line !important;
}

body.dark .agent-builder-message-content-threshold {
background: rgba(0, 0, 0, 1);
}


body.light .agent-builder-message-content-threshold {
background: rgba(255,255,255,1);
border: 1px solid rgba(0, 0, 0, 0.2); 
color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .agent-builder-message-content-threshold {
    width: 95%;
      max-width: 90%;
        padding: 20px;
        height: auto;
        min-height: auto;
  }}


  .agent-builder-message-content-threshold h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

@media (max-width: 1366px) {
.agent-builder-message-content-threshold h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content-threshold h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}


.agent-builder-message-content-threshold p {
  font-size: 16px;
  line-height: 22px;
  margin: 0 auto;
  margin-bottom: 10px;
  white-space: pre-line !important;
    text-align: center;
    max-width: 100%;
}

@media (max-width: 1366px) {
.agent-builder-message-content-threshold p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content-threshold p {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 6px;
  }}

  .agent-builder-message-content-threshold a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }

.agent-builder-message-content .success-text {
  font-size: 22px;
  line-height: 25px;
  margin-bottom: 20px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.agent-builder-message-content .success-text {
  font-size: 18px;
    line-height: 22px;
  margin-bottom: 15px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content .success-text {
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 15px;
  }}

.agent-builder-message-content .error-text {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.agent-builder-message-content .error-text {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.agent-builder-message-content .error-text {
  font-size: 14px;
  margin-bottom: 6px;
  }}

  .trusty-style-on-message {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-left: 0px;
  }

    @media (max-width: 1366px) {
  .trusty-style-on-message {
              font-size: 15px;
                  margin-left: 0px;
        }}

  @media (max-width: 768px) {
  .trusty-style-on-message {
              font-size: 18px;
                  margin-left: 0px;
        }}

.trusty-style-on-message-get {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-left: 0px;
  }

    @media (max-width: 1366px) {
  .trusty-style-on-message-get {
              font-size: 14px;
                  margin-left: 0px;
        }}

  @media (max-width: 768px) {
  .trusty-style-on-message-get {
              font-size: 16px;
                  margin-left: 0px;
        }}

.agent-builder-message-button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.agent-builder-message-button-group-cancel,
.agent-builder-message-button-group-confirm {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background-color: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
}


body.dark .agent-builder-message-button-group-cancel,
body.dark .agent-builder-message-button-group-confirm {
background: rgb(0, 0, 0, 1);
}

body.light .agent-builder-message-button-group-cancel,
body.light .agent-builder-message-button-group-confirm {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2); 
}

@media (max-width: 1366px) {
.agent-builder-message-button-group-cancel,
.agent-builder-message-button-group-confirm {
  font-size: 13px;
    padding:6px 20px;
  }}

@media (max-width: 768px) {
.agent-builder-message-button-group-cancel,
.agent-builder-message-button-group-confirm {
  font-size: 12px;
  }}

.agent-builder-message-button-group-confirm .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.header-button-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 12px 15px;
}

body.dark .header-button-group {
    background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .header-button-group {
  padding: 10px;
  margin-bottom: 10px;
    border-radius: 6px;
  }}

@media (max-width: 768px) {
  .header-button-group {
  gap: 10px;
  justify-content: space-between;
  }}

.builder-preset-button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 13px;
  cursor: pointer;
}

.builder-preset-button i {
  margin-right: 2px;
}

body.light .builder-preset-button {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 300;
}

.builder-preset-button.disabled {
  cursor: not-allowed;
}

.stop-and-hide-button {
  display: flex;
  flex-direction: row;
  gap: 6px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.builder-form-stop-button {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    padding: 3px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .builder-form-stop-button {
    background: rgb(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .builder-form-stop-button {
    background: rgba(255,255,255,1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

.builder-hide-show-mobile {
    background: rgba(145, 75, 255, 0.);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        width: auto;
        min-width: 150px;
        max-width: auto;
        cursor: pointer;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        font-weight: 300;
        padding: 5px 10px;
        overflow: hidden;
    }

    body.dark .builder-hide-show-mobile {
         background: transparent;
    }

    body.light .builder-hide-show-mobile {
      background: transparent;
        color: rgba(0, 0, 0, 0.9) !important;
    }


   

.builder-hide-show-button {
    background: rgb(145, 75, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        width: auto;
        min-width: auto;
        max-width: auto;
        height: 25px;
        min-height: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.9);
        font-size: 11px;
        padding: 4px 8px;
        overflow: hidden;
    }

    body.dark .builder-hide-show-button {
         background: rgba(0, 0, 0, 1);
    }

        body.light .builder-hide-show-button {
         background: rgba(255,255,255, 1);
         border: 1px solid rgba(0, 0, 0, 0.2);
         color: rgba(0, 0, 0, 0.9);
    }

    .builder-hide-show-button i {
  margin-left: 0px;
}

.interaction-toggle-switch {
    position:absolute;
    top: 10px;
    right: 10px;
}

.toggle-switch {
  padding: 3px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 13px;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

 @media (max-width: 1366px) {
  .toggle-switch {
  padding: 2px 10px;
    font-size: 11px;
  }}

.toggle-switch.on {
  background: rgb(6, 186, 126);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
}

.toggle-switch.off {
  background: rgba(220, 50, 70, 1);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
}

.enter-to-send-main-simulation {
display: flex; 
align-items: center;
gap: 6px;
}

@media (max-width: 768px) {
  .enter-to-send-main-simulation {
    gap: 6px;
}}

.enter-to-send-main-simulation-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

@media (max-width: 1366px) {
  .enter-to-send-main-simulation-switch {
  width: 22px;
  height: 14px;
}}

@media (max-width: 768px) {
  .enter-to-send-main-simulation-switch {
  width: 25px;
  height: 16px;
}}

.enter-to-send-main-simulation-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  transition: 0.4s;
  border-radius: 20px;
}

.enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 1px;
  bottom: 1px;
  background: rgb(145, 75, 255, 0.3);
  transition: 0.4s;
  border-radius: 50%;
}

@media (max-width: 1366px) {
  .enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider::before {
      height: 10px;
  width: 10px;
  left: 1px;
  bottom: 1px;
  }}

@media (max-width: 768px) {
  .enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider::before {
      height: 12px;
  width: 12px;
  left: 1px;
  bottom: 1px;
  }}

body.dark .enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider::before {
    background: rgba(0, 0, 0, 0.3);
}

body.light .enter-to-send-main-simulation-switch .enter-to-send-main-simulation-slider::before {
    background: rgba(0, 0, 0, 0.4);
}

.enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider {
 background: rgb(145, 75, 255, 0.1);
}

body.dark .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

body.light .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider::before {
  transform: translateX(16px);
  background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider::before {
  transform: translateX(8px);
  }}

@media (max-width: 768px) {
  .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider::before {
  transform: translateX(8px);
  }}

body.dark .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider::before {
  background-color: rgba(0, 0, 0, 1);
}

body.light .enter-to-send-main-simulation-switch input:checked + .enter-to-send-main-simulation-slider::before {
  background-color: rgba(0,0,0,0.9);
}

.enter-to-send-main-simulation-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

body.light .enter-to-send-main-simulation-label {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .enter-to-send-main-simulation-label {
      font-size: 11px;
  }}

@media (max-width: 768px) {
  .enter-to-send-main-simulation-label {
      font-size: 13px;
        text-shadow: none;
  }}


.simulation-note {
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 5px;
  display: none;
}

@media (max-width: 1366px) {
.simulation-note {
  font-size: 11px;
  line-height: 13px;
  margin-top: 10px;
}}

@media (max-width: 768px) {
.simulation-note {
  font-size: 12px;
  line-height: 14px;
  margin-top: 5px;
}}
  

.builder-limit-usage-container {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    padding: 15px 10px 15px 10px;
  margin-bottom: 0px;
  position: relative;
}

@media (max-width: 1366px) {
  .builder-limit-usage-container {
        padding: 10px 10px 15px 10px;
  }}

body.dark .builder-limit-usage-container {
    background: rgba(0, 0, 0, 1);
}

.builder-limit-usage-title {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 5px;
  color:rgba(255,255,255, 0.9)
}

@media (max-width: 1366px) {
  .builder-limit-usage-title {
  font-size: 16px;
  }}

  @media (max-width:768px) {
  .builder-limit-usage-title {
  font-size: 20px;
  }}

.builder-limit-usage-desc {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  color:rgba(255,255,255, 0.9);
  font-style: italic;
  max-width: 90%;
}

@media (max-width: 1366px) {
  .builder-limit-usage-desc {
  font-size: 11px;
    margin-bottom: 10px;
  }}


  .builder-limit-usage-cta {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  color:rgba(255,255,255, 0.9);
  font-style: italic;
  max-width: 95%;
  cursor: pointer;
  animation: blink 1s infinite;
  transition: opacity 0.2s ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (max-width: 1366px) {
  .builder-limit-usage-cta {
  font-size: 12px;
    margin-bottom: 10px;
  }}

@media (max-width: 768px) {
  .builder-limit-usage-cta {
  font-size: 13.5px;
    margin-bottom: 20px;
      max-width: 100%;
  }}

.builder-limit-usage-grid {
  display: grid;
  grid-template-columns: 15% 81%;
  align-items: center;
  grid-gap: 15px 15px;
  gap: 15px 15px;
}

@media (max-width: 1366px) {
  .builder-limit-usage-grid {
  grid-template-columns: 17% 79%;
  gap: 10px 10px;
}}

@media (max-width: 768px) {
  .builder-limit-usage-grid {
  grid-template-columns: 17% 79.5%;
  gap: 10px 10px;
}}


.builder-limit-usage-label {
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  padding-right: 0px;
  color:rgba(255,255,255, 0.9)
}

@media (max-width: 1366px) {
  .builder-limit-usage-label {
  font-size: 11px;
  padding-right: 3px;
  }}

  @media (max-width: 768px) {
  .builder-limit-usage-label {
  font-size: 12px;
  padding-right: 3px;
  }}

.builder-limit-usage-type {
  font-size: 12px;
  text-align: center;
  color:rgba(255,255,255, 0.7);
  text-shadow: none;
}

@media (max-width: 1366px) {
  .builder-limit-usage-type {
  font-size: 11px;
  }}

  @media (max-width: 768px) {
  .builder-limit-usage-type {
  font-size: 12px;
  }}


.builder-limit-usage-bar {
  position: relative;
  height: 26px;
  background: rgba(255, 255, 255, 0.7);
    border: 0px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
  --fill: 0%;
}

body.dark .builder-limit-usage-bar {
    background: #666;
}

@media (max-width: 1366px) {
  .builder-limit-usage-bar {
  position: relative;
  height: 22px;
  }}

.builder-limit-usage-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--fill);
  background: #9159df; 
  border: none;
  border-radius: 0px;
  z-index: 1;
  transition: width 0.4s ease;
}

body.dark .builder-limit-usage-bar::before {
    background: #454345;
}

.builder-limit-usage-fill-label {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  text-align: center;
  line-height: 26px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
    text-shadow: none;
  font-weight: 500;
}

body.dark .builder-limit-usage-fill-label {
  color: rgba(255,255,255,0.7);
  text-shadow: none;
}

@media (max-width: 1366px) {
  .builder-limit-usage-fill-label {
      line-height: 22px;
  font-size: 11px;
  }}

  @media (max-width: 768) {
  .builder-limit-usage-fill-label {
      line-height: 22px;
  font-size: 12px;
  }}


.builder-limit-usage-bar.quest-quota .builder-limit-usage-fill-label {
    color: rgba(145, 75, 255, 0.6);
    text-shadow: none;
    font-weight: 500;
}

body.dark .builder-limit-usage-bar.quest-quota .builder-limit-usage-fill-label {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: none;
    font-weight: 500;
}

  .builder-quota-refresh-button {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  top: 10px;
  right: 10px;
}

body.dark .builder-quota-refresh-button {
  background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .builder-quota-refresh-button {
      width: 23px;
      height: 23px;
        border-radius: 6px;
  }}

.builder-quota-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

@media (max-width: 1366px) {
  .builder-quota-refresh-button i {
      font-size: 9px;
  }}


.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.builder-created-agent-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 10px;
  display: block;
}

body.dark .builder-created-agent-image { 
  border: 1px solid rgba(0, 0, 0, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
}


@media (max-width: 1366px) {
.builder-created-agent-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 10px;
  display: block;
  }}

  @media (max-width: 768px) {
.builder-created-agent-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 10px;
  display: block;
  }}

  .builder-created-agent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.builder-created-agent-image i {
  font-size: 66px;
}



.simulation-current-agent-image{
  width: 36px;
  height: 36px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 10px;
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
}

@media (max-width: 1366px) {
.simulation-current-agent-image{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  }}

  @media (max-width: 768px) {
.simulation-current-agent-image{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 6px;
  right: 6px;
  }}


  .simulation-log-agent-image{
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: absolute;
  top: 8px;
  right: 8px;
}

body.dark .simulation-log-agent-image{
  background: rgba(255,255,255, 1);
}

@media (max-width: 1366px) {
.simulation-log-agent-image{
  width: 30px;
  height: 30px;
  }}

  @media (max-width: 768px) {
.simulation-log-agent-image{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 6px;
  right: 6px;
  }}

  
.user-agents-name-filter {
  position: relative;
  margin-top: 15px;
  margin-bottom: -5px;
  width: 100%;
  height: 33px;
  z-index: 999;
  }

@media (max-width: 1366px) {
.user-agents-name-filter{
  margin-top: 15px;
  margin-bottom: -5px;
       }}

@media (max-width: 768px) {
 .user-agents-name-filter {
  margin-top: 15px;
  margin-bottom: -5px;
       }}

.user-agents-name-filter-input {
  width: 100%;
  height: 33px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  padding: 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
  }

  body.dark .user-agents-name-filter-input {
  background: rgba(0,0,0,1);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }

    body.light .user-agents-name-filter-input {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1366px) {
    .user-agents-name-filter-input {
    font-size: 11px;
    }
  }

  @media (max-width: 768px) {
    .user-agents-name-filter-input {
    font-size: 12px;
        }}

 .user-agents-name-filter-input:focus {
  background: rgba(255, 255, 255, 1);
  outline: none;
  }

.user-agents-name-filter-input::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  }

  body.dark .user-agents-name-filter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1366px) {
   .user-agents-name-filter-input::placeholder {
    font-size: 12px;
  }}

body:has(.tos-modal-overlay) .user-header,
body:has(.tos-modal-overlay) .homepage-footer,
body:has(.tos-modal-overlay) .main-footer,
body:has(.tos-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.tos-modal-overlay) .terms-container {
  padding: 0px 0px 0px 0px;
}

body:has(.tos-modal-overlay) .terms-section {
    padding: 15px 15px;
    margin-bottom: 15px;
  }

  .tos-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    transition: background-color 0.3s;
  z-index: 999999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px); 
}

 .tos-modal-content {
  position: relative;
  background: linear-gradient(100deg, #9945FF, #14F195);
  width: 50%;
  max-width: 50%;
  max-height: 80vh;
  border-radius: 12px;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInTos 0.2s ease-out;
  padding: 25px;
  z-index: 9999999999 !important;
}

 body.dark .tos-modal-content {
    border: 1px solid rgba(255, 255, 255, 0.2); 
 background: rgba(0, 0, 0, 1);
 }

  body.light .tos-modal-content {
 background: rgba(255,255,255,1);
     border: 1px solid rgba(0, 0, 0, 0.2); 
 }

 @media (max-width: 1366px) {
 .tos-modal-content {
  width: 50%;
  max-width: 50%;
  max-height: 85vh;
  padding: 25px 15px 15px 15px;
  }
}

@media (max-width: 768px) {
 .tos-modal-content {
  width: 95%;
  max-width: 95%;
  max-height: 85vh;
  padding: 25px 15px 15px 15px;
  }
}

.tos-scroll-area {
  padding: 0px 0px 0px 0px;
  overflow-y: auto;
}

 .tos-modal-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 2px;
  right: 2px;
}

body.dark .tos-modal-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .tos-modal-close {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.tos-modal-close {
      font-size: 11px;
  }
}

@media (max-width: 768px) {
.tos-modal-close {
      font-size: 13px;
  }
}

.tos-scroll-area::-webkit-scrollbar {
display: none !important;
width: 0px !important;
}

.tos-scroll-area::-webkit-scrollbar-track {
display: none !important;
width: 0px !important;
}

.tos-scroll-area::-webkit-scrollbar-thumb {
display: none !important;
width: 0px !important;
}

.tuning-mode-agent-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
  animation: fadeIn 0.5s ease;
  position: relative;
}

.tuning-mode-agent-avatar {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  background-color: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(20, 241, 149, 0.6));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid rgba(145, 75, 255, 0.7);
  box-shadow: 0 0 15px rgba(145, 75, 255, 0.2);
  position: relative;
  z-index: 1; 
}

@media (max-width: 1366px) {
  .tuning-mode-agent-avatar {
  width: 75px;
  height: 75px;
  }}

@media (max-width: 768px) {
  .tuning-mode-agent-avatar {
  width: 175px;
  height: 175px;
  }}


/* no img */

.tuning-mode-agent-avatar.no-image {
  background: linear-gradient(100deg, rgba(145, 75, 255, 0.6), rgba(20, 241, 149, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
  background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
}

body.dark .tuning-mode-agent-avatar.no-image {
  background: linear-gradient(100deg, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
}

body.light .tuning-mode-agent-avatar.no-image {
  background: linear-gradient(100deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
  background-size: 200% 200%;
  animation: GradientMove 3s ease-in-out infinite;
}

/* before */

.tuning-mode-agent-avatar::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: techSpin 6s linear infinite;
  z-index: -1;
}

body.dark .tuning-mode-agent-avatar::before {
border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left-color: transparent;
  border-right-color: transparent;
}

body.light .tuning-mode-agent-avatar::before {
border: 1px solid rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  border-left-color: transparent;
  border-right-color: transparent;
}

/* after */

.tuning-mode-agent-avatar::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  animation: techSpinReverse 6s linear infinite;
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.3);
  z-index: -1;
}

body.dark .tuning-mode-agent-avatar::after {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  animation: techSpinReverse 6s linear infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.light .tuning-mode-agent-avatar::after {
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-top: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  animation: techSpinReverse 6s linear infinite;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.3);
}

.tuning-mode-agent-avatar i {
  font-size: 46px;
  color: rgba(255, 255, 255, 0.8);
}

body.light .tuning-mode-agent-avatar i {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1366px) {
  .tuning-mode-agent-avatar i {
  font-size: 36px;
  }}

@media (max-width: 768px) {
  .tuning-mode-agent-avatar i {
  font-size: 66px;
  }}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes techSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
.user-details-agents-section {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
    position: relative;
}

body.dark .user-details-agents-section {
    background: rgba(0, 0, 0, 1);
}

body.light .user-details-agents-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.user-details-agents-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .user-details-agents-header {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  gap: 10px;
}}

.user-details-agents-header-left {
  flex: 1 1;
}

.user-details-agents-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .user-details-agents-header-right {
  justify-content: flex-end;
    align-items: flex-end;
  }}

.user-details-agents-section-title {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

body.dark .user-details-agents-section-title {
    background: rgba(0, 0, 0, 1);
}

body.light .user-details-agents-section-title {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-details-agents-section-title {
        font-size: 13px;
    }}
    

@media (max-width: 768px) {
    .user-details-agents-section-title {
    background: transparent;
    border: none;
    box-shadow: none;
        font-size: 15px;
    }}
    

.user-details-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.user-details-filter-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  position: absolute;
  top: 15px;
  right: 15px;
}


@media (max-width: 768px) {
  .user-details-filter-controls {
  display: flex;
  gap: 10px;
  align-items: start;
}}


.user-details-agents-filter-sortby__control,
        .user-details-agents-filter-perpage__control {
            font-size: 14px !important;
            height: 33px !important;
            min-height: 33px !important;
            padding: 0px 3px !important;
            border-radius: 6px !important;
            background: rgb(145, 75, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: rgba(255, 255, 255, 0.9) !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            z-index: 999 !important;
            vertical-align: middle;
          }
          
          body.dark .user-details-agents-filter-sortby__control,
          body.dark .user-details-agents-filter-perpage__control {
            background: rgba(0,0,0,0.1) !important;
          }
          
          body.light .user-details-agents-filter-sortby__control,
          body.light .user-details-agents-filter-perpage__control {
            background: rgba(255,255,255,1) !important;
            border: 1px solid rgba(0, 0, 0, 0.2) !important;
          }

          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__control,
            .user-details-agents-filter-perpage__control {
              font-size: 11px !important;
              height: 30px !important;
              min-height: 30px !important;
            }}
        
              @media (max-width: 768px) {
            .user-details-agents-filter-sortby__control,
            .user-details-agents-filter-perpage__control {
              font-size: 12px !important;
              height: 30px !important;
              min-height: 30px !important;
            }}

          .user-details-agents-filter-sortby__control {
            min-width: 200px !important;
            max-width: 200px !important;
          }

                    @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__control {
              min-width: 150px !important;
              max-width: 150px !important;
              z-index: 999 !important;
            }}

          @media (max-width: 768px) {
            .user-details-agents-filter-sortby__control {
              min-width: auto !important;
              max-width: auto !important;
              z-index: 999 !important;
            }}

          .agents-filter-sort__control {
            min-width: 200px !important;
            max-width: 200px !important;
          }

          .user-details-agents-filter-perpage__control {
            min-width: 75px !important;
            max-width: 75px !important;
          }
          
          @media (max-width: 768px) {
            .user-details-agents-filter-perpage__control {
              min-width: 63px !important;
              max-width: 63px !important;
              z-index: 999 !important;
            }}
          
          
          .user-details-agents-filter-sortby__single-value,
          .user-details-agents-filter-perpage__single-value,
          .user-details-agents-filter-sortby__input,
          .user-details-agents-filter-perpage__input,
          .user-details-agents-filter-sortby__placeholder,
          .user-details-agents-filter-perpage__placeholder {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 300;
            font-size: 13px !important;
            margin-top: -3px !important;
          }

          body.light .user-details-agents-filter-sortby__single-value,
          body.light .user-details-agents-filter-perpage__single-value,
          body.light .user-details-agents-filter-sortby__input,
          body.light .user-details-agents-filter-perpage__input,
          body.light .user-details-agents-filter-sortby__placeholder,
          body.light .user-details-agents-filter-perpage__placeholder {
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__single-value,
            .user-details-agents-filter-perpage__single-value {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 300;
            font-size: 11px !important;
            margin-top: 2px;
          }}
        
          .user-details-agents-filter-sortby__indicator,
          .user-details-agents-filter-perpage__indicator {
            color: rgba(255, 255, 255, 0.9) !important;
            padding-left: 5px !important;
            margin-top: -3px !important;
          }

          body.light .user-details-agents-filter-sortby__indicator,
          body.light  .user-details-agents-filter-perpage__indicator {
            color: rgba(0, 0, 0, 0.9) !important;
          }


          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__indicator,
            .user-details-agents-filter-perpage__indicator {
            margin-top: 0px !important;
          }}

          @media (max-width: 768px) {
            .user-details-agents-filter-sortby__indicator,
            .user-details-agents-filter-perpage__indicator {
              padding-left: 2px !important;
            }}

          .user-details-agents-filter-sortby__dropdown-indicator,
          .user-details-agents-filter-perpage__dropdown-indicator {
            color: rgba(255, 255, 255, 0.9) !important;
            padding-left: 5px !important;
          }

                 @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__dropdown-indicator,
            .user-details-agents-filter-perpage__dropdown-indicator {
            margin-top: -4px !important;
          }}

          @media (max-width: 768px) {
            .user-details-agents-filter-sortby__dropdown-indicator,
            .user-details-agents-filter-perpage__dropdown-indicator {
              padding-left: 2px !important;
              padding-right: 2px !important;
            }}
  
          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__indicator-separator,
            .user-details-agents-filter-perpage__indicator-separator {
            margin-top: 6px !important;
            height: 16px !important;
          }}


          .user-details-agents-filter-sortby__value-container,
          .user-details-agents-filter-perpage__value-container {
            padding: 0 6px !important;
            display: flex;
            align-items: center;
            z-index: 9999999999 !important;
          }
          
          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__value-container,
            .user-details-agents-filter-perpage__value-container {
            margin-top: -6px !important;
          }}

          .user-details-agents-filter-sortby__menu,
          .user-details-agents-filter-perpage__menu {
            background: #6b7ddf !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            border-radius: 8px !important;
            margin-top: 6px;
            z-index: 9999999999 !important;
            cursor: pointer !important;
            font-size: 14px !important;
          }
          
          body.dark .user-details-agents-filter-sortby__menu,
          body.dark .user-details-agents-filter-perpage__menu {
            background: rgba(0, 0, 0, 1) !important;
          }

          body.light .user-details-agents-filter-sortby__menu,
          body.light .user-details-agents-filter-perpage__menu {
            background: rgba(255,255,255,1) !important;
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__menu,
            .user-details-agents-filter-perpage__menu {
              margin-top: 5px !important;
            }}
            
          .user-details-agents-filter-sortby__option,
          .user-details-agents-filter-perpage__option {
            font-size: 14px !important;
            font-weight: 300;
            padding: 4px 10px 4px 10px!important;
            cursor: pointer !important;
            background: #6b7ddf !important;
            color: rgba(255, 255, 255, 0.9) !important;
            z-index: 9999999999 !important;
          }
          
              body.dark .user-details-agents-filter-sortby__option,
              body.dark .user-details-agents-filter-perpage__option {
            background: rgba(0, 0, 0, 1) !important;
          }

              body.light .user-details-agents-filter-sortby__option,
              body.light .user-details-agents-filter-perpage__option {
             background: rgba(255,255,255,1) !important;
            color: rgba(0, 0, 0, 0.9) !important;
          }
          

          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__option,
            .user-details-agents-filter-perpage__option {
              font-size: 11px !important;
              padding: 3px 10px 3px 10px!important;
            }}

          .user-details-agents-filter-sortby__option:last-child,
          .user-details-agents-filter-perpage__option:last-child {
            padding-bottom: 10px !important;
          }
        
          @media (max-width: 1366px) {
            .user-details-agents-filter-sortby__option:last-child,
            .user-details-agents-filter-perpage__option:last-child {
              padding-bottom: 2px !important;
            }}


    








.user-details-refresh-button {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark .user-details-refresh-button {
    background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
    .user-details-refresh-button {
        width: 30px;
        height: 30px;
    }}

.user-details-refresh-button i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

@media (max-width: 1366px) {
    .user-details-refresh-button i {
        font-size: 13px;
    }}


@media (max-width: 768px) {
    .user-details-refresh-button i {
        font-size: 12px;
    }}

.refreshing i {
    animation: spin 1s linear infinite;
    transform-origin: center;
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

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

.user-details-agents-list .no-agents-submitted {
    margin-top: 20px;
    font-size: 15px;
    font-style: italic;
}

@media (max-width: 1366px) {
    .user-details-agents-list .no-agents-submitted {
        font-size: 13px;
    }}


.user-details-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    grid-gap: 15px;
    gap: 15px;
    padding: 0px;
    margin-top: 20px;
}

@media (max-width: 1366px) {
    .user-details-agents-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        margin-top: 15px;
    }}

.user-details-agent-card {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   border: none; 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 0px;
    color: white;
    overflow: hidden;
    height: 250px;
    min-height: 250px;
}

@media (max-width: 1366px) {
    .user-details-agent-card {
        height: 200px;
        min-height: 200px;
    }}


    .user-details-agent-card:hover {
      transform: scale(1.01);
    }
  

.user-details-agent-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.user-details-agent-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details-agent-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 1);
}

.user-details-agent-image-placeholder i {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.5);
}



.user-details-agent-info-box {
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.user-details-agent-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
    z-index: 999;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.user-details-agent-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.user-details-agent-info:hover::before {
    background: rgba(145, 75, 255, 0.2);
    width: 100%;
    height: 100%;
}

body.dark .user-details-agent-info:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

body.light .user-details-agent-info:hover::before {
    background: rgba(0, 0, 0, 0.3);
}

.user-details-agent-name {
    color:  rgba(255, 255, 255, 1);
    text-shadow: none;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    width: 90%;
}

@media (max-width: 1366px) {
    .user-details-agent-name {
        font-size: 13px;
}}

@media (max-width: 768px) {
    .user-details-agent-name {
        font-size: 15px;
}}

.user-details-agent-specialization {
    color:  rgba(255, 255, 255, 1);
    text-shadow: none;
    font-size: 13px;
    line-height: 15px;
    font-weight: 300;
    text-align: center;
    width: 90%;
    font-style: normal;
}

@media (max-width: 1366px) {
    .user-details-agent-specialization {
        font-size: 10px;
        line-height: 13px;
    }}




.user-details-agent-stats {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  width: 100%;
}

    @media (max-width: 1366px) {
  .user-details-agent-stats {
  bottom: 4%;
  gap: 6px;
  font-size:9px;
}}

        @media (max-width: 768px) {
  .user-details-agent-stats {
  bottom: 6%;
  gap: 4px;
  font-size: 9px;
    }}

.user-details-agent-stats-item {
  background: rgba(145, 75, 255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 6px;
  border-radius: 4px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}

body.dark .user-details-agent-stats-item {
  background: rgba(0, 0, 0, 0.7);
}

    @media (max-width: 1366px) {
  .user-details-agent-stats-item {
  padding: 3px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

    @media (max-width: 768px) {
  .user-details-agent-stats-item {
  padding: 4px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

.user-details-agent-stats-item i {
  margin-right: 4px
}






.user-details-agent-card:hover .user-details-agent-name,
.user-details-agent-card:hover .user-details-agent-specialization,
.user-details-agent-card:hover .user-details-agent-pricing,
.user-details-agent-card:hover .user-details-agent-date {
    color: rgba(255, 255, 255, 1);
}

.user-details-agent-card.non-clickable {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.user-details-agent-card.non-clickable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
    pointer-events: none;
}

.user-details-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0px 4px;
}

.user-details-pagination button {
    font-size: 13px;
    font-weight: 300;
    padding: 4px 20px;
    border: none;
    border-radius: 4px;
    background: rgba(145, 75, 255,0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

body.dark .user-details-pagination button {
    background: rgba(0,0,0,0.1);
}

body.light .user-details-pagination button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-details-pagination button {
        font-size: 12px;
        padding: 4px 20px;
    }}

@media (max-width: 768px) {
    .user-details-pagination button {
        font-size: 12px;
        padding: 4px 20px;
    }}

.user-details-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.user-details-pagination span {
    font-size: 13px;
    font-weight: 300;
     color: rgba(255, 255, 255, 0.7);
}

body.light .user-details-pagination span {
  color: rgba(0, 0, 0, 0.5)
}

@media (max-width: 1366px) {
    .user-details-pagination span {
        font-size: 12px;
  }}

  @media (max-width: 768px) {
    .user-details-pagination span {
        font-size: 10px;
  }}

@media (max-width: 768px) {
  .user-details-agents-section {
    width: 100%;
    order: 2;
    padding: 15px;
    margin: 0;
  }

  .user-details-agents-header {
    margin-bottom: 15px;
  }

  .user-details-refresh-button {
    width: 30px;
    height: 30px;
  }

  .user-details-agents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
    margin-top: 15px;
  }

  .user-details-agent-card {
    height: 160px;
    min-height: 160px;
  }

  .user-details-agent-name {
    font-size: 15px;
  }

  .user-details-agent-specialization {
    font-size: 11px;
  }

  .user-details-agent-pricing {
    font-size: 11px;
    bottom: 8%;
  }

  .user-details-pagination {
    margin-top: 15px;
    gap: 10px;
    margin-top: 30px;
  }

  .user-details-pagination button {
    font-size: 13px;
    padding: 6px 15px;
  }

  .user-details-pagination span {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
  }
}


.user-details-agent-live-label {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(6, 186, 126);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

    @media (max-width: 1366px) {
      .user-details-agent-live-label {
  bottom: 35px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

    @media (max-width: 768px) {
      .user-details-agent-live-label  {
  bottom: 40px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}
.user-follow-list {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
    position: relative;
    min-height: 86.5vh;
}

  body.dark .user-follow-list {
    background: rgba(0, 0, 0, 1)
  }

    body.light .user-follow-list {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 768px) {
    .user-follow-list {
      min-height: auto;
      padding: 15px 15px 15px 15px;
    }}



.user-follow-list-grider {
      display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    gap: 15px;
    grid-row-gap: 15px;
    row-gap: 15px
}

    @media (max-width: 768px) {
      .user-follow-list-grider {
      display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 15px;
    gap: 15px;
    grid-row-gap: 15px;
    row-gap: 15px
}}

  .user-follow-card-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(145, 75, 255,0.2);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 6px;
    padding: 15px 15px 15px 15px;
    transition: background 0.2s ease;
    margin-bottom: 0px;
  }

    .user-follow-card-wrapper:last-child {
    margin-bottom: 0px;
    }

  @media (max-width: 1366px) {
    .user-follow-card-wrapper {
      padding: 10px 10px 10px 10px;
    }}

  @media (max-width: 768px) {
    .user-follow-card-wrapper {
      padding: 10px 10px 10px 10px;
    }}
  
  .user-follow-card-wrapper:hover {
    background: rgb(145, 75, 255, 0.1);
  }

  body.dark .user-follow-card-wrapper {
    background: rgba(0,0,0,0.1);
  }

    body.light .user-follow-card-wrapper {
    background: rgba(255,255,255,1);
  }



  .user-follow-card-wrapper .follows-back-label {
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-size: 10.5px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    z-index: 2;
    font-style: italic;
  }

  body.dark .user-follow-card-wrapper .follows-back-label {
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .user-follow-card-wrapper .follows-back-label {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .user-follow-card-wrapper .follows-back-label {
      top: 10px;
      right: 10px;
      font-size: 9px;
      font-weight: 500;
    }}

  @media (max-width: 768px) {
    .user-follow-card-wrapper .follows-back-label {
      top: 10px;
      right: 15px;
      font-size: 10px;
      font-weight: 500;
    }}

  .user-follow-card {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex: 1 1;
  }

  .user-follow-card .user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 7px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  }

  @media (max-width: 1366px) {
    .user-follow-card .user-avatar {
      width: 32px;
      height: 32px;
      margin-right: 6px;
    }}
  
  @media (max-width: 768px) {
    .user-follow-card .user-avatar {
      width: 46px;
      height: 46px;
    }}

  .user-follow-card .user-info {
    flex: 1 1;
  }

  .user-follow-card .user-name {
    color: rgba(255, 255, 255, 0.9); 
    font-size: 14px;
    line-height: 16px;
    font-weight: 300;
    max-width: 90%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  body.light .user-follow-card .user-name {
    color: rgba(0, 0, 0, 0.9); 
  }

  @media (max-width: 1366px) {
    .user-follow-card .user-name {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
      .user-follow-card .user-name {
        font-size: 11.5px;
        max-width: 70%;
      }}
  
  .user-follow-card .user-username {
    color: rgba(255, 255, 255, 0.9); 
    font-size: 14px;
    font-weight: 300;
    margin-top: 4px;
  }
  
    body.light .user-follow-card .user-username {
    color: rgba(0, 0, 0, 0.9); 
  }

  @media (max-width: 1366px) {
    .user-follow-card .user-username {
      font-size: 11px;
      margin-top: 2px;
    }}

  .user-follow-card .user-bio {
    color: rgba(255, 255, 255, 0.9); 
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 0px;
    font-weight: 300;
    line-height: 16px;
    max-width: 90%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  
  @media (max-width: 1366px) {
    .user-follow-card .user-bio {
      font-size: 11px;
      line-height: 13px;
      margin-top: 2px;
    }}

    
    @media (max-width: 768px) {
      .user-follow-card .user-bio {
        display: none;
      }}

  .user-follow-card .follow-action {
    align-self: center;
  }
  
  .unfollow-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
        padding: 2px 10px;
    font-size: 12px !important;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    z-index: 2;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    }

    @media (max-width: 1366px) {
      .unfollow-button {
        padding: 4px 8px;
        font-size: 10px !important;
        border-radius: 6px;
      }}

    @media (max-width: 768px) {
      .unfollow-button {
        padding: 3px 7px;
        font-size: 11px !important;
      }}

    body.dark .unfollow-button {
        background: rgba(0, 0, 0, 1);
    }

    body.light .unfollow-button {
      background: rgba(255,255,255,1);
      border: 1px solid rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.9);
          }


    .unfollow-button:disabled {
      cursor: not-allowed;
    }

    .follow-back-button {
        position: absolute;
        bottom: 15px !important;
        right: 10px !important;
        background: rgb(145, 75, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        padding: 2px 10px;
        font-size: 12px !important;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        z-index: 2;
        font-size: 0.9rem;
        transition: all 0.3s ease;
      }
      
      body.dark .follow-back-button {
        background: rgba(0, 0, 0, 1);
      }
    
      body.light .follow-back-button {
      background: rgba(255,255,255,1);
      border: 1px solid rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.9);
          }

      @media (max-width: 1366px) {
        .follow-back-button {
            bottom: 10px !important;
            right: 10px !important;
            padding: 4px 8px;
            font-size: 10px !important;
            border-radius: 6px;
        }}



    .empty-state {
      font-size: 14px;
    font-weight: 300;
    font-style: italic;
    margin-left: 0px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    }

    @media (max-width: 768px) {
      .empty-state {
      font-size: 13px;
        padding: 0px 0px;
         text-align: left;
      }}



    .user-follow-list .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      
      .user-follow-list .pagination button {
        font-size: 13px;
        padding: 4px 10px;
        border: none;
        border-radius: 4px;
        background: rgb(145, 75, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        min-width: 100px;
        vertical-align: middle;
      }

      body.dark .user-follow-list .pagination button {
        background: rgba(0, 0, 0, 0.2);
      }

            body.light .user-follow-list .pagination button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
      }


          @media (max-width: 1366px) {
                  .user-follow-list .pagination button {
        font-size: 12px;
                  }}
      
      .user-follow-list .pagination button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      .user-follow-list .pagination .page-indicator {
        font-size: 13px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.7);
        vertical-align: middle;
        margin-top: 3px;
      }
    
      body.light .user-follow-list .pagination .page-indicator {
        color: rgba(0, 0, 0, 0.6)
      }

      .connections-subtabs-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 0px;
        margin-bottom: 12px !important;
        margin-left: 0px;
        margin-right: 0px;
      }
    
    .connections-subtabs-1,
     .connections-subtabs-2 {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
      }

    @media (max-width: 1366px) {
    .connections-subtabs-1,
     .connections-subtabs-2 {
        gap: 8px;
      }
    }

            @media (max-width: 768px) {
                  .connections-subtabs {
        gap: 8px;
      }
    }
      
      .subtab-button {
        background: rgb(145, 75, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        color: rgba(255, 255, 255, 0.9);
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        opacity: 1;
        vertical-align: middle;
        height: 33px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3px;
      }
    
      @media (max-width: 1366px) {
        .subtab-button {
            font-size: 11px;
            height: 26px !important;
        }}
      
              @media (max-width: 768px) {
        .subtab-button {
            font-size: 12px;
            height: 30px !important;
        }}

      .subtab-button.active {
        background: rgba(125, 55, 255, 0.6);
      }
    
      body.dark .subtab-button {
        background: rgba(0,0,0,0.1);
        opacity: 1;
      }

          body.light .subtab-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
      }
    
      body.dark .subtab-button.active {
        background: rgba(255, 255, 255, 0.2);
      }
    
    body.light .subtab-button.active {
  background: rgba(0,0,0,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255,255,255,0.9);
      }

      .subtab-button .total-following,
      .subtab-button .total-followers {
        font-size: 13px;
        line-height: 14px;
        vertical-align: middle;
        align-items: center;
      }



  @media (max-width: 1366px) {
         .subtab-button .total-following,
      .subtab-button .total-followers {
        font-size: 11px;
        line-height: 11px;
        vertical-align: middle;
      }}


      .connections-filter-perpage__control {
    font-size: 13px !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0px 3px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.1)  !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 75px!important;
    max-width: 75px!important;
    cursor: pointer !important; 
  }
  
  body.dark .connections-filter-perpage__control {
    background: rgba(0, 0, 0, 1) !important;
  }
  

  @media (max-width: 1366px) {
    .connections-filter-perpage__control {
      font-size: 12px !important;
      height: 26px !important;
      min-height: 26px !important;
    }}

.connections-filter-perpage__single-value,
.connections-filter-perpage__input,
.connections-filter-perpage__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 300;
}


.connections-filter-perpage__indicator,
.connections-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-left: 5px !important;
}

@media (max-width: 1366px) {
  .connections-filter-perpage__indicator {
  margin-top: -5px !important;
}}

@media (max-width: 1366px) {
  .connections-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 16px !important;
}}

@media (max-width: 1366px) {
  .connections-filter-perpage__dropdown-indicator {
  margin-top: -5px !important;
}}

.connections-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
}

@media (max-width: 1366px) {
  .connections-filter-perpage__value-container {
  margin-top: -6px !important;
}}




.connections-filter-perpage__menu {
  background: #7375e1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .connections-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

@media (max-width: 1366px) {
.connections-filter-perpage__menu {
  margin-top: 5px !important;
}}

.connections-filter-perpage__option {
  font-size: 13px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #7375e1 !important;
}

@media (max-width: 1366px) {
  .connections-filter-perpage__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

.connections-filter-perpage__option:last-child {
  padding-bottom: 10px !important;
}


@media (max-width: 1366px) {
  .connections-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

body.dark .connections-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}


      .connections-subtabs-wrapper .connections-refresh-button {
        background: rgb(145, 75, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px !important;
        width: 33px !important;
        height: 33px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
      }
    
      body.dark .connections-subtabs-wrapper .connections-refresh-button {
        background: rgba(0, 0, 0, 1);
      }
      
      body.light .connections-subtabs-wrapper .connections-refresh-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
      }
      

      @media (max-width: 1366px) {
        .connections-subtabs-wrapper .connections-refresh-button {
            width: 26px !important;
            height: 26px !important;
        }}
      

      @media (max-width: 768px) {
        .connections-subtabs-wrapper .connections-refresh-button {
            width: 30px !important;
            height: 30px !important;
        }}
      
        .connections-subtabs-wrapper i {
        color: rgba(255, 255, 255, 0.9);
        font-size: 11px;
      }
      
      body.light .connections-subtabs-wrapper i {
        color: rgba(0, 0, 0, 0.9);
      }

      @media (max-width: 1366px) {
        .connections-subtabs-wrapper .connections-refresh-button i {
            font-size: 9px;
        }}

        @media (max-width: 768px) {
          .connections-subtabs-wrapper .connections-refresh-button i {
              font-size: 10px;
          }}
      
      
      .connections-refreshing-icon {
        animation: spin 1s linear infinite;
        transform-origin: center;
        will-change: transform;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      
      .connections-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        margin: 0 auto;
        margin-top: -35px;
        z-index: 999;
        animation: loading-stats 1.5s infinite linear;
        display: none;
    }
    
    .connections-loading i {
        font-size: 18px;
    }
    
    @media (max-width: 1366px) {
        .connections-loading i{
            font-size: 13px;
        }}
    
    @keyframes loading-stats {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
      
    
    @media (max-width: 768px) {
        .connections-loading {
            font-size: 20px !important;
            margin-top: 30px;
            margin-left: 0px;
            margin-bottom: 30px;
        }}

      .connections-subtabs-wrapper {
        background: transparent;
        border: 0px solid rgba(255, 255, 255, 0.2); 
          box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
        padding: 0px 0px 0px 0px;
        border-radius: 8px;
      }
      
      body.dark .connections-subtabs-wrapper  {
        background: rgba(0, 0, 0, 1);
      }

      body:has(.user-follow-message-overlay) .user-header,
body:has(.user-follow-message-overlay) .admin-header,
body:has(.user-follow-message-overlay) .main-footer,
body:has(.user-follow-message-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.user-follow-message-overlay) .global-footer,
body:has(.user-follow-message-overlay) .ask-treo,
body:has(.user-follow-message-overlay) .agent-interaction-dock-button,
body:has(.user-follow-message-overlay) .float-chat-button {
  display: none;
}


.user-follow-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-follow-message-content {
background: rgba(145, 75, 255,0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  max-width: 40%;
  white-space: pre-line !important;
}

body.dark .user-follow-message-content {
background: rgba(0, 0, 0, 1);
border: 1px solid rgba(255, 255, 255, 0.2); 
}

@media (max-width: 768px) {
  .user-follow-message-content {
      max-width: 95%;
        padding: 20px;
  }}


  .user-follow-message-content h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.user-follow-message-content h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.user-follow-message-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}

.user-follow-message-content p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.user-follow-message-content p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.user-follow-message-content p {
  font-size: 14px;
  margin-bottom: 6px;
  }}

.user-follow-message-button {
  margin-top: 15px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(145, 75, 255,0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

body.dark .user-follow-message-button {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.user-follow-message-button {
  font-size: 13px;
    padding:6px 20px;
  }}

@media (max-width: 768px) {
.user-follow-message-button {
  font-size: 12px;
  }}
.hashtag {
  color: rgba(40, 50, 100, 1);
  cursor: pointer;
}

body.dark .hashtag {
  color: rgba(145, 75, 255,0.7);
}

body:has(.user-report-modal-overlay) .user-header,
body:has(.user-report-modal-overlay) .admin-header,
body:has(.user-report-modal-overlay) .main-footer,
body:has(.user-report-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.user-report-modal-overlay) .global-footer,
body:has(.user-report-modal-overlay) .ask-treo,
body:has(.user-report-modal-overlay) .agent-interaction-dock-button,
body:has(.user-report-modal-overlay) .float-chat-button {
  display: none;
}

.user-report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: transparent;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .user-report-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(100deg, #9945FF, #14F195);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 999999999 !important; 
    width: 25%;
    height: auto;
  }
  
  body.dark .user-report-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
    body.light .user-report-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 768px) {
    .user-report-modal {
      width: 95%;
      max-width: 95%;
      padding: 15px;
    }
  }
  
  .user-report-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .user-report-title {
    font-size: 26px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .user-report-modal .close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
  }
  
  body.dark .user-report-modal .close-button {
  background: transparent;
  }

  body.light .user-report-modal .close-button {
  color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
  .user-report-modal .close-button {
      font-size: 11px;
  }}

  @media (max-width: 768px) {
  .user-report-modal .close-button {
      font-size: 13px;
  }}
  

  .user-report-modal select,
  .user-report-modal textarea {
  width: 100%;
    padding: 3px 10px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  body.dark .user-report-modal select,
  body.dark .user-report-modal textarea {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

    body.light .user-report-modal select,
  body.light .user-report-modal textarea {
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .user-report-modal textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 360px;
    margin-top: 10px;
  }


.user-report-modal input:focus,
.user-report-modal textarea:focus,
.user-report-modal select:focus {
  border-color: transparent;
  outline: none;
}

  
  .textarea-group {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .character-count {
    position: absolute;
    top: -8px;
    right: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    display: none;
  }
  
  body.dark .character-count {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .reason-description {
    font-size: 14px;
    margin-top: 6px;
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
  }
  
  .urgent-box {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .urgent-box input[type="checkbox"] {
-webkit-appearance: none;
  appearance: none;
    width: 13px;
    height: 13px;
  background-color: rgba(255,255,255,0.06);
  border: 2px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  vertical-align: middle; 
  margin: 0px 3px;
  margin-top: -2px;
  }

      body.dark .urgent-box input[type="checkbox"]  {
  background-color: rgba(0.0.0,0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  }


  body.light .urgent-box input[type="checkbox"]  {
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(0, 0, 0, 0.5);
  }


  .urgent-box input[type="checkbox"]:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  body.dark .urgent-box input[type="checkbox"]:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  body.light .urgent-box input[type="checkbox"]:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
    }

  .urgent-box label {
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
  }
  
  .user-report-modal .submit-button {
    display: block;
  background: rgba(145, 75, 255,0.3);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    font-size: 17px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s ease;
  }
  
  body.dark .user-report-modal .submit-button {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.9);
  }

      body.light .user-report-modal .submit-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
  }

  
  .submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .user-report-modal .warning-message,
  .user-report-modal .success-message {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 12px 10px;
    border-radius: 8px;
    margin-top: 10px;
  }
  
  .custom-select-wrapper {
    position: relative;
    width: 100%;
  }
  
  .custom-select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 12px 40px 12px 14px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
  }
  
  .custom-select-wrapper::after {
  content: '\f078'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    font-size: 12px;
  }
  
    .custom-select-wrapper select:focus {
    outline: none;
    border-color: none;
  }
  
.user-details {
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    padding: 10px 0px 10px 0px;
    color: rgba(255, 255, 255, 0.9);
}

.user-details-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 20px;
    gap: 20px;
}

@media (max-width: 1366px) {
    .user-details-content {
        grid-template-columns: 250px 1fr;
    }}

.user-details-profile-section {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
}

body.dark .user-details-profile-section {
    background: rgba(0, 0, 0, 1);
}

body.light .user-details-profile-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.user-details .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    gap: 12px; 
}

.user-details .section-title {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: auto;
    height: 45px;
    padding: 15px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    flex-grow: 1;
    margin-right: 0px;
    display: none;
}

body.dark .user-details .section-title {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .user-details .section-title {
        font-size: 15px;
    }}


    @media (max-width: 768px) {
        .user-details .section-title {
            font-size: 18px;
            width: auto;
            height: 36px;
            padding: 6px;
        }}



        .user-header-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: stretch; 
            margin-left: 0; 
            width: 100%;
            flex-grow: 1;
          }

   
          .user-follow-message {
            background: none;
            border: none;
            box-shadow: none;
            transition: all 0.3s ease;
            padding: 0px;
            margin-top: 10px;
            border-radius: 0px;
            text-align: center;
            width: 100%;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 500;
        }
    
        
        @media (max-width: 1366px) {
            .user-follow-message {
                padding: 10px;
            }}
        
        
        @media (max-width: 768px) {
            .user-follow-message {
            font-size: 12px;
        }}
    
    
    body.dark .user-report-message {
        background: none;
    }
    
    @media (max-width: 1366px) {
        .user-report-message {
            padding: 10px;
        }}
    
    
    @media (max-width: 768px) {
        .user-report-message {
        font-size: 12px;
    }}
    

    .user-details .user-follow-button,
    .user-details .user-dm-button,
    .user-details .user-share-button,
    .user-details .user-report-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1;    
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    width: auto;
    max-width: 100%;
    height: 33px;
    min-height: 33px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: center;
    }

    body.dark .user-follow-button,
    body.dark .user-dm-button,
    body.dark .user-share-button,
    body.dark .user-report-button {
        background: rgba(0,0,0,0.1);
      }

    body.light .user-follow-button,
    body.light .user-dm-button,
    body.light .user-share-button,
    body.light .user-report-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
      }

    @media (max-width: 1366px) {
    .user-details .user-follow-button,
    .user-details .user-dm-button,
    .user-details .user-share-button,
    .user-details .user-report-button {
        height: 30px;
        min-height: 30px;
     }}
    
  
    @media (max-width: 768px) {
    .user-details .user-follow-button,
    .user-details .user-dm-button,
    .user-details .user-share-button,
    .user-details .user-report-button {
     width: 33px;
     height: 33px;
    }}

    .user-details .user-follow-button i,
    .user-details .user-dm-button i,
    .user-details .user-share-button i,
    .user-details .user-report-button i{
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    display: block;
    margin: 0 auto;
    }

    body.light .user-details .user-follow-button i,
    body.light .user-details .user-dm-button i,
    body.light .user-details .user-share-button i,
    body.light .user-details .user-report-button i{
    color: rgba(0, 0, 0, 0.9);
    }
    
     .user-details .user-follow-button:disabled,
     .user-details .user-dm-button:disabled,
     .user-details .user-share-button:disabled,
     .user-details .user-report-button:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }


     .user-copied-tooltip {
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);       
        color: rgba(0, 0, 0, 0.7);
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        animation: fadeInOut 2s ease;
    }

    @media (max-width: 1366px) {
        .user-copied-tooltip {
            font-size: 11.5px;
        }}
    
    
    @keyframes fadeInOut {
        0% { opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    





        

.user-details-profile-picture {
    width: 75%;
    max-width: 75%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1366px) {
    .user-details-profile-picture {
        width: auto;
        max-width: 100%;
        height: auto;
            margin-bottom: 15px;
    }}


    @media (max-width:768px) {
    .user-details-profile-picture {
        width: auto;
        max-width: 50%;
        height: 50%;
        height: auto;
        margin-bottom: 0px;
        border-radius: 50%;
    }}

.user-details-profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
        margin-bottom: 0px;
  }

      @media (max-width: 1366px) {
  .user-stats {
        display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 0px;
        margin-bottom: 10px;
  }}

        @media (max-width: 768px) {
  .user-stats {
        display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 10px;
        margin-bottom: 10px;
  }}

  .user-stats-box {
    text-align: center;
  }
  
  .user-stats-count {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
  }

  body.light .user-stats-count {
    color: rgba(0, 0, 0, 0.9)
  }

        @media (max-width: 1366px) {
            .user-stats-count {
    font-size: 16px;
  }}
  
          @media (max-width: 768px) {
            .user-stats-count {
    font-size: 16px;
  }}


  .user-stats-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .user-stats-label {
    color: rgba(0, 0, 0, 0.9)
  }
  
          @media (max-width: 1366px) {
              .user-stats-label {
    font-size: 10px;
  }}

          @media (max-width: 768px) {
              .user-stats-label {
    font-size: 12px;
  }}





  .getting-user-stats {
      font-size: 13px;
      margin-top: 10px;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
    }

    @media (max-width: 1366px) {
      .getting-user-stats {
        margin-top: 10px;
        font-size: 12px;
      }}
    
    .getting-user-stats-loading{
      display: inline-block;
      animation: spin 1.5s infinite linear;
      margin-right: 6px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }


.getting-user-stats .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}



.connections-clickable {
  cursor: pointer;
}






body.modal-active .user-header,
body.modal-active .global-footer {
  filter: blur(6px);
  transition: filter 0.2s ease;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}



body:has(.user-connections-modal-overlay) .user-header,
body:has(.user-connections-modal-overlay) .admin-header,
body:has(.user-connections-modal-overlay) .main-footer,
body:has(.user-connections-modal-overlay) .global-footer {
  z-index: 1;
}

body:has(.user-connections-modal-overlay) .global-footer,
body:has(.user-connections-modal-overlay) .ask-treo,
body:has(.user-connections-modal-overlay) .agent-interaction-dock-button,
body:has(.user-connections-modal-overlay) .float-chat-button {
  display: none;
}

.user-connections-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
}


.user-connections-modal-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  padding: 40px 0;
}



    .user-connections-loading {
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(255, 255, 255, 0.9);
          font-size: 18px;
          padding: 36px 0;
                animation: spin 1.5s infinite linear;
    }

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

    @media (max-width: 1366px) {
      .user-connections-loading {
          font-size: 18px;
      }}

    @media (max-width: 768px) {
      .user-connections-loading {
          font-size: 18px;
      }}
    



.user-connections-empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 300;
  padding: 0px 10px 20px 10px;
}

    @media (max-width: 1366px) {
.user-connections-empty-state {
          font-size: 12px;
      }}

    @media (max-width: 768px) {
.user-connections-empty-state {
          font-size: 12px;
      }}


.user-connections-modal-title {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
  background: linear-gradient(100deg, #9945FF, #14F195);
  font-size: 16px;
  line-height: 22px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-bottom: 0px;
  text-align: left;
  z-index: 3;
  padding: 15px 15px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

body.dark .user-connections-modal-title {
  background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

    @media (max-width: 1366px) {
.user-connections-modal-title {
  font-size: 16px;
    line-height: 18px;
    padding: 10px 10px;
}}


    @media (max-width: 768px) {
.user-connections-modal-title {
  font-size: 15px;
    line-height: 20px;
    padding: 10px 12px;
    font-weight: 500;
}}


.user-connections-modal-close {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
  z-index: 999;
}

body.dark .user-connections-modal-close {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}


    @media (max-width: 1366px) {
      .user-connections-modal-close {
      font-size: 11px;
      }}

          @media (max-width: 768px) {
      .user-connections-modal-close {
      font-size: 13px;
  top: 8px;
  right: 10px;
      }}

.user-connections-modal-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(100deg, #9945FF, #14F195);
  padding: 0px 0px;
  z-index: 5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

body.dark .user-connections-modal-header {
  background: rgba(0, 0, 0, 1);
}

    @media (max-width: 1366px) {
      .user-connections-modal-header {
         margin-bottom: 13px;
}}

.user-connections-modal-content {
  background: linear-gradient(100deg, #9945FF, #14F195);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: none;
  padding: 0px 0px 6px 0px;
  border-radius: 10px;
  width: 30%;
  max-width: 30%;
  min-height: 80vh;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

body.dark .user-connections-modal-content {
  background: rgba(0, 0, 0, 1);
      border: 1px solid rgba(255, 255, 255, 0.2);
}


    @media (max-width: 1366px) {
      .user-connections-modal-content {
          width: 30%;
  max-width: 30%;
  min-height: 75vh;
  max-height: 75vh;
    padding: 0px 0px 0px 0px;
      }}

          @media (max-width: 768px) {
      .user-connections-modal-content {
  width: 95%;
  max-width: 95%;
  min-height: 75vh;
  max-height: 75vh;
    padding: 0px 0px 0px 0px;
    margin-top: 0px;
    z-index: 9999999999;
      }}

.user-connections-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 96%;
  margin: 0 auto;
}

          @media (max-width: 768px) {
            .user-connections-list {
                width: 94%;
            }}

.user-connections-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .user-connections-card {
  background: rgba(0, 0, 0, 0.2);
}

    @media (max-width: 1366px) {
.user-connections-card {
  display: flex;
  gap: 6px;
}}

    @media (max-width: 768px) {
.user-connections-card {
  display: flex;
  gap: 6px;
  padding: 8px;
}}

.user-connections-avatar {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

    @media (max-width: 1366px) {
      .user-connections-avatar {
  width: 70px;
  height: 70px;
      }}

          @media (max-width: 768px) {
      .user-connections-avatar {
  width: 56px;
  height: 56px;
      }}

.user-connections-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}




.user-connections-card-name {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  line-height: 17px;
}

    @media (max-width: 1366px) {
      .user-connections-card-name {
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 2px;
      }}


    @media (max-width: 768px) {
      .user-connections-card-name {
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 2px;
  width: 60%;
  word-break: break-word;
      }}

.user-connections-card-username {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}

    @media (max-width: 1366px) {
      .user-connections-card-username {
  font-size: 10px;
      }}




.user-connections-card-bio {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
  line-height: 15px;
  width: 90%;
  max-height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

    @media (max-width: 1366px) {
      .user-connections-card-bio {
  font-size: 10px;
    line-height: 11px;
    width: 88%;
      margin-top: 2px;
      }}

          @media (max-width: 768px) {
      .user-connections-card-bio {
display: none;
      }}

.user-connections-card-wrapper {
  position: relative;
  margin-bottom: 1rem;
}


.connections-labels {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-end;
  z-index: 2;
}

@media (max-width:1366px) {
  .connections-labels {
  top: 9px;
  right: 9px;
  gap: 5px;
  }}

@media (max-width:768px) {
  .connections-labels {
  top: 9px;
  right: 9px;
  gap: 5px;
  }}

.connections-stats-label {
  background: transparent;
  padding: 0px;
  color: rgba(40, 50, 100, 1);
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
}

@media (max-width: 1366px) {
  .connections-stats-label {
      font-size: 10px;
  }}

  @media (max-width:768px) {
  .connections-stats-label {
      font-size: 11px;
        padding: 3px 8px;
  }}


.user-connections-follow-button,
.user-connections-unfollow-button {
        position: absolute;
        bottom: 10px !important;
        right: 10px !important;
        background: rgba(145, 75, 255,0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        padding: 2px 12px;
        font-size: 12px !important;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        z-index: 2;
        transition: all 0.3s ease;
}

body.dark .user-connections-follow-button,
body.dark .user-connections-unfollow-button {
    background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.user-connections-follow-button,
.user-connections-unfollow-button {
            bottom: 10px !important;
        right: 9px !important;
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 10px !important;
        
}}

@media (max-width:768px) {
.user-connections-follow-button,
.user-connections-unfollow-button {
          bottom: 10px !important;
        right: 9px !important;
        border-radius: 6px;
        padding: 2px 10px;
        font-size: 11px !important;
        
}}

.user-details-info {
    margin-top: 20px;
}

@media (max-width: 1366px) {
    .user-details-info {
        margin-top: 15px;
    }}

    @media (max-width: 768px) {
    .user-details-info {
        margin-top: 20px;
    }}

.user-details-info-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 5px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
}

.user-details-info-item:last-child {
    border-bottom: none;
}

.user-details-info-item .user-details-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    line-height: 24px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
}

body.light .user-details-info-item .user-details-name {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .user-details-info-item .user-details-name {
        font-size: 14px;
        line-height: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
    }}

    @media (max-width: 768px) {
    .user-details-info-item .user-details-name {
        font-size: 18px;
         line-height: 20px;
        margin-top: 6px;
        margin-bottom: 0px;
    }}
    


    .user-details-info-item .user-details-joined {
      font-family: 'Roboto', sans-serif;
        text-align: center;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        font-size: 11.5px;
        font-weight: 500;
        font-style: italic;
        margin-top: 5px;
    }

    body.light .user-details-info-item .user-details-joined {
      color: rgba(0, 0, 0, 0.7)
    }

    @media (max-width: 1366px) {
        .user-details-info-item .user-details-joined {
            font-size: 10px !important;
            margin-top: 0px;
        }}

            @media (max-width: 768px) {
        .user-details-info-item .user-details-joined {
            font-size: 10px !important;
            margin-top: 0px;
        }}


.user-details-info-item .user-details-bio {
  display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 18px;
    white-space: pre-wrap;
        word-break: break-all;
    padding-top: 10px;
}

body.light .user-details-info-item .user-details-bio {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .user-details-info-item .user-details-bio {
        font-size: 12px;
        line-height: 15px;
    }}

    @media (max-width: 768px) {
        .user-details-info-item .user-details-bio {
            font-size: 13px;
            line-height: 17px;
        }}

.user-details-info-item:has(.user-details-bio) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.user-details-info-item:has(.user-details-bio) .user-details-bio {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    margin: 0 auto;
}

.user-details-bio a {
  display: inline; 
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    font-weight: 300;
}


body.light .user-details-info-item .user-details-bio a {
  color: rgba(0, 0, 0, 0.9)
}



.user-details .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0px;
    background: transparent;
    border-radius: 50%;
    flex-wrap: wrap;
}

@media (max-width: 1366px) {
    .user-details .social-links {
        margin-top: 15px;
        gap: 6px;
    }}

    @media (max-width: 768px) {
        .user-details .social-links {
            margin-top: 20px;
            gap: 8px;
        }}

    .user-details .social-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.user-details .social-link i,
.user-details .social-link .x-twitter-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(145, 75, 255, 0.6);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .user-details .social-link i,
body.dark .user-details .social-link .x-twitter-icon {
background: rgba(0, 0, 0, 1);
}

body.light .user-details .social-link i,
body.light .user-details .social-link .x-twitter-icon {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-details .social-link i,
    .user-details .social-link .x-twitter-icon {
    width: 36px;
    height: 26px;
}}

@media (max-width: 768px) {
    .user-details .social-link i,
    .user-details .social-link .x-twitter-icon {
    width: 33px;
    height: 33;
}}

.user-details .x-twitter-icon {
    fill: currentColor;
    padding: 8px;
}

body:has(.user-details) .main-footer {
    width: 75%;
    margin: 0 auto;
    margin-top: 0px;
    padding: 20px 0px 10px 0px;
}

body:has(.user-details) .main-footer-column:nth-child(1) {
    flex: 0 0 71%;
    padding-right: 10px;
  }
  
body:has(.user-details) .main-footer-column:nth-child(2) {
    flex: 0 0 8.5%;
    padding-right: 10px;
  }
  
body:has(.user-details) .main-footer-column:nth-child(3) {
    flex: 0 0 5%;
    padding-right: 10px;
  }

body:has(.user-details) .main-footer-column:nth-child(4) {
    flex: 0 0 6%;
    padding-right: 10px;
  }

body:has(.user-details) .main-footer-column:nth-child(5) {
    flex: 0 0 4%;
    padding-right: 0px;
  }

  
@media (max-width: 768px) {
  .user-details {
    width: 100%;
    margin: 0;
    padding: 15px;
  }

  .user-details-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-template-columns: initial;
  }

  .user-details-profile-section {
    width: 100%;
    order: 1;
    padding: 15px 15px 5px 15px;
  }

  .user-details-profile-picture {
    width: 100%;
    height: auto;
  }

  .section-title {
    font-size: 18px;
    padding: 8px;
  }

  .share-button {
    width: 38px;
    height: 38px;
  }

  .social-links {
    gap: 10px;
  }

  .social-link i,
  .social-link .x-twitter-icon {
    font-size: 20px;
    width: 33px;
    height: 33px;
  }

  body:has(.user-details) .main-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 30px 10px 20px 10px;
    width: 100%;
  }

  body:has(.user-details) .main-footer-column:nth-child(1) {
    flex: 0 0 100%;
    margin-bottom: 10px;
  }

  body:has(.user-details) .main-footer-column:nth-child(2) {
    flex: 1 1 auto;
    min-width: 80px;
    padding-right: 0;
  }
  
  body:has(.user-details) .main-footer-column:nth-child(3) {
    flex: 1 1 auto;
    min-width: 80px;
    padding-right: 0;
  }

  body:has(.user-details) .main-footer-column:nth-child(4) {
    flex: 1 1 auto;
    min-width: 80px;
    padding-right: 0;
  }
  
  body:has(.user-details) .main-footer-column:nth-child(5) {
    flex: 1 1 auto;
    min-width: 80px;
    padding-right: 0;
  }

  .main-footer ul {
    margin: 0;
    padding: 0;
}

    .main-footer ul li {
    margin: 6px 0;
}
  
}

.user-connections-modal-content::-webkit-scrollbar,
.user-connections-modal-content::-webkit-scrollbar-track,
.user-connections-modal-content::-webkit-scrollbar-thumb {
  display: none;
}


body:has(.user-connection-action-confirm-overlay) .user-header,
body:has(.user-connection-action-confirm-overlay) .admin-header,
body:has(.user-connection-action-confirm-overlay) .main-footer,
body:has(.user-connection-action-confirm-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.user-connection-action-confirm-overlay) .ask-treo,
body:has(.user-connection-action-confirm-overlay) .agent-interaction-dock-button,
body:has(.user-connection-action-confirm-overlay) .float-chat-button  {
  display: none !important;
}

.user-connection-action-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    z-index: 999999999 !important;
}

.user-connection-action-confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7375e1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 999999; 
    min-width: 25%;
    max-width: 25%;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  overflow-y: auto;
}

  body.dark .user-connection-action-confirm-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
  }

    body.light .user-connection-action-confirm-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1366px) {
    .user-connection-action-confirm-modal {
    padding: 20px 20px;
    }}

  @media (max-width: 768px) {
    .user-connection-action-confirm-modal {
    min-width: 90%;
    max-width: 90%;
    }}

  .user-connection-action-confirm-content {
        width: 100%;
    margin: 0 auto;
        vertical-align: middle;
  }

.user-connection-action-confirm-modal h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

body.light .user-connection-action-confirm-modal h1 {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.user-connection-action-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.user-connection-action-confirm-modal h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}



.user-connection-action-confirm-modal p {
  font-size: 14px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

body.light .user-connection-action-confirm-modal p {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.user-connection-action-confirm-modal p {
  font-size: 11px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.user-connection-action-confirm-modal p {
  font-size: 12px;
  margin-bottom: 6px;
  }}


.user-connection-action-confirm-button-box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.user-connection-action-confirm-button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 7px 15px;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  width: auto;
  min-width: 90px;
  max-width: auto;
}

@media (max-width: 1366px) {
.user-connection-action-confirm-button {
      padding: 6px 10px;
  font-size: 11px;
}}

@media (max-width: 768px) {
.user-connection-action-confirm-button {
      padding: 6px 10px;
  font-size: 12px;
}}


body.dark .user-connection-action-confirm-button {
  background: rgb(0, 0, 0, 1);
}


body.light .user-connection-action-confirm-button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 768px) {
  body:has(.agent-interaction-dock) .agent-interaction-dock-button,
body:has(.agent-interaction-dock) .float-chat-button  {
    display: none;
}}


.agent-interaction-dock-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(100deg, rgba(145, 75, 255, 0.7), rgba(20, 241, 149, 0.7));
  border: 0px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 26px;
  cursor: pointer;
  z-index: 9999999999 !important;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .agent-interaction-dock-button {
  background: rgba(0, 0, 0, 1);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 1px 3px rgba(255, 255, 255, 1);
}

body.light .agent-interaction-dock-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .agent-interaction-dock-button {
    bottom: 15px;
    left: 15px;
    padding: 8px;
    font-size: 18px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  }}

@media (max-width: 768px) {
  .agent-interaction-dock-button {
    bottom: 0px;
    left: 0px;
    font-size: 16px;
  width: 50.2%;
  min-width: 50.2%;
  max-width: 50.2%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0px;
  padding: 0px 10px;
  box-shadow: none;
  background: transparent !important;
  transition: background-color 0.3s;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
      color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
        z-index: 9999999999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
        vertical-align: middle;
  }}

@media (max-width: 768px) {
  body.dark .agent-interaction-dock-button {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  }}

  .agent-interaction-dock-button-label {
    margin-left: 5px;
    font-size: 13px;
    line-height: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    vertical-align: middle;
  }

  body.light .agent-interaction-dock-button-label {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 768px) {
  .agent-interaction-dock-button-label {
    font-size: 13px;
  }}

.agent-interaction-dock {
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 450px;
  height: auto;
  min-height: 76vh !important;
  max-height: 76vh !important;
  background: rgba(255,255,255,1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999999999 !important;
  transition: bottom 0.25s ease-in-out;
}

@media (max-width: 1366px) {
.agent-interaction-dock {
    width: 350px;
    bottom: 12px;
    left: 12px;
    max-height: 475px !important;
  }}

@media (max-width: 768px) {
.agent-interaction-dock {
    width: 100%;
    bottom: 0%;
    left: 0%;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0px;
    border-radius: 0px;
  }}

.agent-interaction-dock-maximized {
  height: 66vh;
  max-height: 66vh;
  border-radius: 0;
  right: 0;
  bottom: 0;
}

.agent-interaction-dock-header {
  background: #8063ef;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

body.dark .agent-interaction-dock-header {
  background: rgb(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .agent-interaction-dock-header {
  background: rgb(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


@media (max-width: 1366px) {
.agent-interaction-dock-header {
  padding: 12px 12px;
}}

@media (max-width: 768px) {
.agent-interaction-dock-header {
  padding: 12px 12px;
}}


.agent-interaction-dock-title {
  font-weight: 300;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1366px) {
.agent-interaction-dock-title {
  font-size: 12px;
}}

@media (max-width: 768px) {
.agent-interaction-dock-title {
  font-size: 15px;
  font-weight: 500;
}}

.agent-interaction-dock-actions {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
  font-weight: 500 !important;
}




.enter-to-send-interaction-dock {
display: flex; 
align-items: center;
gap: 6px;
}

@media (max-width: 768px) {
  .enter-to-send-interaction-dock {
    gap: 6px;
}
}

.enter-to-send-interaction-dock-switch {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 20px;
}

@media (max-width: 1366px) {
  .enter-to-send-interaction-dock-switch {
  width: 24px;
  height: 14px;
}}

@media (max-width: 768px) {
  .enter-to-send-interaction-dock-switch {
  width: 26px;
  height: 16px;
}}

.enter-to-send-interaction-dock-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-interaction-dock-switch .enter-to-send-interaction-dock-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  transition: 0.4s;
  border-radius: 20px;
}

.enter-to-send-interaction-dock-switch .enter-to-send-interaction-dock-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
 background: rgba(145, 75, 255,0.3);
  transition: 0.4s;
  border-radius: 50%;
}

@media (max-width: 1366px) {
  .enter-to-send-interaction-dock-switch .enter-to-send-interaction-dock-slider::before {
      height: 10px;
  width: 10px;
  left: 0x;
  bottom: 1px;
  }}

@media (max-width: 768px) {
  .enter-to-send-interaction-dock-switch .enter-to-send-interaction-dock-slider::before {
      height: 12px;
  width: 12px;
  left: 2px;
  bottom: 1px;
  }}

body.dark .enter-to-send-interaction-dock-switch .enter-to-send-interaction-dock-slider::before {
    background: rgba(0, 0, 0, 0.3);
}

.enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

body.dark .enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

.enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider::before {
  transform: translateX(16px);
 background: #8063ef;
}

@media (max-width: 1366px) {
  .enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider::before {
  transform: translateX(8px);
  }}

@media (max-width: 768px) {
  .enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider::before {
  transform: translateX(8px);
  }}

body.dark .enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider::before {
  background-color: rgba(0, 0, 0, 1);
}

body.light .enter-to-send-interaction-dock-switch input:checked + .enter-to-send-interaction-dock-slider::before {
  background-color: rgba(0, 0, 0, 0.9);
}

.enter-to-send-interaction-dock-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

@media (max-width: 1366px) {
  .enter-to-send-interaction-dock-label {
      font-size: 12px;
        text-shadow: none;
  }}

@media (max-width: 768px) {
  .enter-to-send-interaction-dock-label {
      font-size: 12px;
        text-shadow: none;
  }}





.agent-interaction-dock-fullscreen-button {
  background: none;
  border: none; 
  box-shadow: none; 
  font-size: 15px;
  font-weight: normal !important;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  display: none; /*temp*/
}

.agent-interaction-dock-size-button {
  background: none;
  border: none; 
  box-shadow: none; 
  font-size: 13px;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 1px;
}

.agent-interaction-dock-close-button {
  background: none;
  border: none; 
  box-shadow: none; 
  font-size: 15px;
  font-weight: normal !important;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
}

@media (max-width: 1366px) {
  .agent-interaction-dock-close-button {
  font-size: 11px;
  }}

  @media (max-width: 768px) {
  .agent-interaction-dock-close-button {
  font-size: 14px;
  }}

.agent-interaction-dock-back-button {
  background: none;
  border: none; 
  box-shadow: none; 
  font-size: 17px;
  font-weight: normal !important;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
}

@media (max-width: 1366px) {
  .agent-interaction-dock-back-button {
  font-size: 13px;
  }}

  @media (max-width: 768px) {
  .agent-interaction-dock-back-button {
  font-size: 13px;
  }}

.agent-interaction-dock-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
}

.agent-interaction-dock-inbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 12px 12px 12px;
}

@media (max-width: 1366px) {
.agent-interaction-dock-inbox {
  gap: 3px;
  padding: 3px 3px 3px 3px;
}}


@media (max-width: 768px) {
.agent-interaction-dock-inbox {
  gap: 3px;
  padding: 3px 3px 3px 3px;
}}

.agent-interaction-dock-inbox-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.2s;
}

.agent-interaction-dock-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  margin-right: 6px;
}

.agent-interaction-dock-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  vertical-align: middle !important;
  position: relative;
}

.agent-interaction-dock-header-row { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.agent-interaction-dock-name-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 5px;
  align-items: center;
}

.agent-interaction-dock-name {
    font-weight: 500;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1366px) {
.agent-interaction-dock-name {
    font-size: 12px;
  }}

@media (max-width: 768px) {
.agent-interaction-dock-name {
    font-size: 13px;
  }}


.dock-official-badge {
  background: rgba(145, 75, 255, 0.2);
  color: rgb(0, 0, 0, 0.6);
  font-weight: 500;
  padding: 1px 7px 2px 7px;
  border: 1px solid rgba(145, 75, 255, 1);
  border-radius: 5px;
  font-size: 12px;
}

body.dark .dock-official-badge {
  background: rgb(255, 255, 255,1);
  color: rgb(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.3); 
  font-weight: 500;
}

body.light .dock-official-badge {
  background: rgb(0, 0, 0,1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.3); 
  font-weight: 300;
}

@media (max-width: 1366px) {
.official-badge {
  font-size: 9.5px;
  }}

  @media (max-width: 768px) {
.official-badge {
  font-size: 11px;
  }}

.agent-interaction-dock-inbox-date {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 8px;
  white-space: nowrap;
  position: absolute;
  top: 0px;
  right: 3px;
}

@media (max-width: 1366px) {
.agent-interaction-dock-inbox-date {
    font-size: 10px;
  }}

.agent-interaction-dock-inbox-time {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 8px;
  white-space: nowrap;
  position: absolute;
  top: 15px;
  right: 3px;
}

@media (max-width: 1366px) {
.agent-interaction-dock-inbox-time {
    font-size: 9px;
    font-weight: 500;
  }}

  @media (max-width: 768px) {
.agent-interaction-dock-inbox-time {
  top: 12px;
  }}

.agent-interaction-dock-preview {
  font-weight: 300;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap; 
  margin-top: 0px;
}

@media (max-width: 1366px) {
.agent-interaction-dock-preview {
    font-size: 12px;
  }}

  @media (max-width: 768px) {
.agent-interaction-dock-preview {
    font-size: 13px;
  }}

.agent-interaction-dock-thread {
   position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.agent-interaction-dock-card-box {
  position: relative;
}

.agent-interaction-dock-card {
display: flex;
flex-direction: row;
gap: 6px;
padding: 10px 10px 13px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: fixed;
z-index: 999999;
background: rgba(255, 255, 255, 1);
width: 450px;
}

@media (max-width: 1366px) {
  .agent-interaction-dock-card {
    width: 350px;
  }}

  @media (max-width: 768px) {
  .agent-interaction-dock-card {
    width: 100%;
    padding: 10px 10px 13px 10px;
  }}

  .agent-interaction-dock-card a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  text-decoration: none;
}

.agent-interaction-dock-card-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
.agent-interaction-dock-card-image {
    width: 36px;
  height: 36px;
}}

@media (max-width: 768px) {
.agent-interaction-dock-card-image {
    width: 40px;
  height: 40px;
}}

.agent-interaction-dock-card-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;
}

.agent-interaction-dock-card-info a {
  text-decoration: none;
}

.agent-interaction-dock-card-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  margin: 0;
}

@media (max-width: 1366px) {
  .agent-interaction-dock-card-name {
  font-size: 12px;
  }}

.agent-interaction-dock-card-specialization {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  margin: 0;
  padding-right: 66px;
}


@media (max-width: 1366px) {
.agent-interaction-dock-card-specialization {
  font-size: 10px;
  padding-right: 66px;
}}

@media (max-width: 768px) {
.agent-interaction-dock-card-specialization {
  padding-right: 26px;
}}





.agent-interaction-dock-builder-link-button {
    background: rgba(145, 75, 255, 0.7);
    color: rgba(255,225,255,0.9);
    text-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 10px;
    font-weight: 500;
    text-decoration: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 999999;
  }

.agent-interaction-dock-builder-link-button i {
    margin-right: 6px;
  }




.agent-interaction-dock-thread-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 90px 14px 110px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  scroll-behavior: smooth;
}

@media (max-width: 1366px) {
  .agent-interaction-dock-thread-messages {
  padding: 70px 14px 90px 16px;
}}

@media (max-width: 768px) {
  .agent-interaction-dock-thread-messages {
  padding: 80px 10px 130px 10px;
}}


.agent-on-thinking {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
}

@media (max-width: 1366px) {
.agent-on-thinking {
  font-size: 15px;
}}

@media (max-width: 768px) {
.agent-on-thinking {
  font-size: 16px;
}}

.agent-interaction-dock-maximized .agent-interaction-dock-thread-messages {
  padding: 90px 14px 16px 16px;
}

.agent-interaction-dock-bubble {
    max-width: 70%;
    padding: 10px 10px 7px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 18px ;
    display: inline-block;
    word-wrap: break-word;
    transition: all 0.2s ease-in-out;
    will-change: transform, opacity;
}

@media (max-width: 1366px) {
.agent-interaction-dock-bubble {
    font-size: 11px;
    line-height: 16px;
}}

.agent-interaction-dock-bubble.user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 2px;
    text-align: right;
}

.agent-interaction-dock-bubble.agent {
    align-self: flex-start;
    background: rgba(255, 255, 255, 1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 2px;
    text-align: left;
}

 .agent-interaction-dock-message-label  {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: -18px;
    padding: 0px;
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
  }

  @media (max-width: 1366px) {
     .agent-interaction-dock-message-label  {
    font-size: 9px;
        margin-bottom: -18px;
     }}

.agent-interaction-dock-message-label.user {
  align-self: flex-end;
  text-align: right;
  margin-right: 6px;
}

.agent-interaction-dock-message-label.agent {
  align-self: flex-start;
  text-align: left;
  margin-left: 6px;
}

.agent-interaction-dock-bubble-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

.agent-interaction-dock-bubble-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-interaction-dock-bubble-text {
  font-size: 14px;
  line-height: 18px;
}

 @media (max-width: 1366px) {
  .agent-interaction-dock-bubble-text {
  font-size: 11px;
  line-height: 16px;
}}

 @media (max-width: 768px) {
  .agent-interaction-dock-bubble-text {
  font-size: 12px;
  line-height: 16px;
}}

.interaction-dock-time-and-action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
vertical-align: middle;
  margin-top: 3px;
}


.agent-interaction-dock-bubble.agent .interaction-dock-time-and-action {
  display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

    .agent-interaction-dock-message-time {
  display: block;
  font-size: 10px;
  margin-top: 0px;
  padding: 0px;
  font-style: italic;
    float: right;
  }

  @media (max-width: 1366px) {
    .agent-interaction-dock-message-time {
  font-size: 9px;
}}


.agent-interaction-dock-copy-button {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  align-self: flex-end;
  cursor: pointer;
  vertical-align: middle;
  margin-bottom: 3px;
}

.interaction-dock-copied-confirmation {
  color: rgba(0,0,0,0.6);
  text-shadow: none;
  font-size: 11px;
  margin-left: 3px;
}

@media (max-width: 1366px) {
.interaction-dock-copied-confirmation {
  font-size: 10px;
}}






.agent-interaction-dock-thread-messages .on-thinking::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}




.agent-interaction-dock-input-container {
  position: fixed;
  bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 10px !important;
    border-radius: 0px 0px 12px 12px;
    background: #fff;
    gap: 0px;
    width: 450px;
    overflow: hidden;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1366px) {
  .agent-interaction-dock-input-container {
    width: 350px;
  }}

  @media (max-width: 768px) {
  .agent-interaction-dock-input-container {
    width: 100%;
        padding: 10px 10px 13px 10px !important;
  bottom: 0px;
  }}
  
  .agent-interaction-dock-maximized .agent-interaction-dock-input-container {
    padding: 44px 0px 4px 0px; 
    gap: 6px;
    position: relative;
    width: 100%;
    bottom: none;
    margin-left: 0px;
    border-radius: 0px 0px 0px 0px;
    }

  .agent-interaction-dock-input-container .charact-and-send {
    display: flex;
    flex-direction: row;
    gap: 5px;
    position: absolute;
    bottom: 19px;
    right: 18px;
  }

    @media (max-width: 1366px) {
  .agent-interaction-dock-input-container .charact-and-send {
    position: absolute;
    bottom: 17px;
    right: 17px;
     }}
      
    @media (max-width: 768px) {
  .agent-interaction-dock-input-container .charact-and-send {
    position: absolute;
    bottom: 18px;
    right: 18px;
     }}


.agent-interaction-dock-textarea {
   width: 100%;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 6px !important;
    padding: 8px;
    font-size: 14px;
    line-height: 17px;
    height: 50px;
    max-height: 300px;
    box-sizing: border-box;
    outline: none;
    vertical-align: middle;
    margin-bottom: -1px;
    color: rgba(0, 0, 0, 0.7);
    transition: height 0.1s ease;
    overflow-y: hidden;
}

         @media (max-width: 1366px) {
.agent-interaction-dock-textarea {
    padding: 6px 6px;
    height: 50px;
    max-height: 300px;
  font-size: 12px;
    line-height: 16px;
          }}


  @media (max-width: 768px) {
.agent-interaction-dock-textarea {
    padding: 8px 8px;
    height: 50px;
    max-height: 300px;
  font-size: 12px;
    line-height: 16px;
 }}


.agent-interaction-dock-textarea::placeholder {
    font-size: 13px;
    line-height: 17px;
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 100%;
    font-weight: 300;
    }

  @media (max-width: 1366px) {
.agent-interaction-dock-textarea::placeholder {
    font-size: 11px;
    line-height: 13px;
    }}

      @media (max-width: 768px) {
.agent-interaction-dock-textarea::placeholder {
    font-size: 12px;
    line-height: 16px;
    }}

.agent-interaction-dock-send-button {
background-color: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px 8px 12px !important;
    border-radius: 50%;
    font-size: 11px !important;
    cursor: pointer;
    transition: background 0.2s ease;
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 0px !important;
}

 body.dark .agent-interaction-dock-send-button {
background-color: rgb(0, 0, 0, 1);
 }

  body.light .agent-interaction-dock-send-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
 }

   @media (max-width: 1366px) {
  .agent-interaction-dock-send-button {
    width: 33px !important;
    min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
    }}


  @media (max-width: 768px) {
  .agent-interaction-dock-send-button {
    width: 33px !important;
    min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
    }}

.interaction-dock-sending {
  animation: shake 0.5s infinite;
}

@keyframes interaction-dock-sending  {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

.agent-interaction-dock-send-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.agent-interaction-dock-error-box {
  background: #2b1e1e;
  color: #fdd;
  border: 1px solid #aa4444;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 20px;
  text-align: center;
}

.agent-interaction-dock-error-close {
  margin-top: 12px;
  background: #aa4444;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.agent-interaction-dock-empty {
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
  margin-top: 50%;
  text-align: center;
}

.agent-interaction-dock-thread-messages::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
    z-index: 9999999999 !important;
  }
  
.agent-interaction-dock-thread-messages::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.6)!important;
    width: 4px!important;
  }
  
.agent-interaction-dock-thread-messages::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6)!important;
    width: 4px!important;
    border-radius: 4px!important;
  }


.agent-dock-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
}

.agent-dock-web-button, 
.agent-dock-telegram-button {
  background: #8063ef;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 2px;
  border-radius: 6px;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
  z-index: 9999999999 !important;
}

body.dark .agent-dock-web-button,
body.dark .agent-dock-telegram-button {
  background: rgb(0, 0, 0, 1);
}

body.light .agent-dock-web-button,
body.light .agent-dock-telegram-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.agent-dock-web-button, 
.agent-dock-telegram-button {
      top: 6px;
  right: 6px;
      padding: 4px 2px;
    font-size: 12px;
  }}

@media (max-width: 768px) {
.agent-dock-web-button, 
.agent-dock-telegram-button {
      padding: 4px 2px;
    font-size: 12px;
  }}


  .agent-interaction-dock-error-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-interaction-dock-error-box {
  background: rgba(145, 75, 255, 0.6);
  padding: 20px 30px;
  border-radius: 10px;
  max-width: 75%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
}

body.dark .agent-interaction-dock-error-box {
     background: #666;
}

@media (max-width: 768px) {
  .agent-interaction-dock-error-box {
      font-size: 13px;
  }}


.agent-interaction-dock-error-box button {
  margin-top: 12px;
  background-color: rgba(145, 75, 255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
    font-size: 13px;
}

body.dark .agent-interaction-dock-error-box button {
     background: rgb(0, 0, 0, 1);
}

@media (max-width: 768px) {
.agent-interaction-dock-error-box button {
      font-size: 12px;
  }}



  .agent-interaction-dock-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  margin-top: 50%;
}

@media (max-width: 768px) {
  .agent-interaction-dock-loading {
      margin-top: 36vh;
}}

.agent-interaction-dock-loading-rotate {
  animation: loadingRotate 1.6s linear infinite;
}

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

.agent-interaction-dock-loading-pulse {
  font-size: 28px;
  color: rgba(145, 75, 255, 0.6);
  animation: loadingPulse 1s ease-in-out infinite alternate;
}

@keyframes loadingPulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 1; }
}

body.dark .agent-interaction-dock-loading-pulse {
  color: rgba(0, 0, 0, 0.7);
}

body.light .agent-interaction-dock-loading-pulse {
  color: rgba(0, 0, 0, 0.7);
}



  .interaction-dock-previous-box {
  margin: 0 auto;
}

.interaction-dock-previous-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(0,0,0,0.5);
  cursor: pointer;
  min-height: 35px;
  min-width: 175px;
  font-size: 22px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.interaction-dock-previous-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.interaction-dock-previous-button .interaction-dock-previous-button-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: opacity 0.2s ease;
}

.interaction-dock-previous-loading {
  animation: ZoomIn 0.6s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes ZoomIn {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 1; }
}

.interaction-dock-scroll-bottom {
  background-color: rgba(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 18%;
  left: 46%;
  font-size: 20px;
  width: 50px;
  height: 50px;
  z-index: 9999999999 !important;
}

body.dark .interaction-dock-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .interaction-dock-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.interaction-dock-scroll-bottom:hover {
  background-color: rgba(145, 75, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

body.dark .interaction-dock-scroll-bottom:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

body.light .interaction-dock-scroll-bottom:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}
body:has(.agent-interaction-overlay) .user-header,
body:has(.agent-interaction-overlay) .main-footer,
body:has(.agent-interaction-overlay) .global-footer {
      z-index: 0 !important; 
}

body:has(.agent-interaction-overlay) .agent-actions-box {
      z-index: 0 !important; 
}

body:has(.agent-interaction-overlay) .agent-interaction-dock-button {
      display: none !important;
}

@media (max-width: 768px) {
body:has(.agent-interaction-overlay) .float-chat-button {
      display: none !important;
}}

.agent-interaction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999;
  overflow-y: auto !important;
  z-index: 2 !important; 
}

.agent-interaction-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(100deg, #9945FF, #14F195);
  border-radius: 8px;
  padding: 0px;
  width: 50%;
  max-width: 50%;
  height: 97vh;
  min-height: 97vh;
  max-height: 97vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

body.dark .agent-interaction-modal {
   background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .agent-interaction-modal {
      transform: none;
      top: 0px;
      left: 0px;
      width: 100%;
  max-width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  z-index: 9999999999;
  margin: 0 auto;
    border-radius: 0px;
  }}

  
     .agent-interaction-modal.maximized {
  height: 97vh !important;
  min-height: 97vh !important;
  max-height: 97vh !important;
  }


@media (max-width: 768px) {
   .agent-interaction-modal.maximized {
  height: 66vh !important;
  min-height: 66vh !important;
  max-height: 66vh !important;
  }
}

  
.agent-interaction-header {
  background: transparent;
  padding: 10px;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  border-bottom: 1px solid rgba(255,225,255,0.6);
}

body.dark .agent-interaction-header {
  border-bottom: 1px solid rgba(255,225,255,0.2);
}

@media (max-width: 1366px) {
  .agent-interaction-header {
      padding: 8px;
        min-height: 42px;
  }}

@media (max-width: 768px) {
  .agent-interaction-header {
      padding: 6px 6px 10px 6px;
        min-height: 45px;

  }}



  .agent-header-agent-card {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
padding: 10px 10px 13px 10px;
position: relative;
   }

   @media (max-width: 1366px) {
      .agent-header-agent-card {
gap: 6px;
padding: 7px 7px 9px 7px;
   }}

.agent-header-image {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
.agent-header-image {
  width: 40px;
  height: 40px;
  }}


@media (max-width: 768px) {
.agent-header-image {
  width: 46px;
  height: 46px;
  }}

.agent-interaction-header-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  position: relative;
}

.agent-interaction-header-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,225,255,2);
  text-shadow: none;
  margin: 0;
}

@media (max-width: 1366px) {
  .agent-interaction-header-name {
  font-size: 12px;
  }}


@media (max-width: 768px) {
  .agent-interaction-header-name {
  font-size: 14px;
  }}


.agent-interaction-header-specialization {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,225,255,2);
  text-shadow: none;
  margin: 0;
}

@media (max-width: 1366px) {
  .agent-interaction-header-specialization {
  font-size: 11px;
  }}


@media (max-width: 768px) {
  .agent-interaction-header-specialization {
  font-size: 11px;
  }}







     .interaction-action-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap: 8px;
  }

    @media (max-width: 1366px) {
    .interaction-action-button {
    gap: 0px;
  }}


  @media (max-width: 768px) {
    .interaction-action-button {
    gap: 10px;
    padding: 6px 4px 2px 4px;
  }}




   .interaction-action-button-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

    @media (max-width: 1366px) {
    .interaction-action-button-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: end;
    gap: 8px;
  }}

  @media (max-width: 768px) {
    .interaction-action-button-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: end;
    gap: 6px;
    margin-top: -1px;
  }}



  .enter-to-send {
display: flex; 
align-items: center;
gap: 6px;
    order: 2;
     margin-bottom: 1px;
}

@media (max-width: 1366px) {
  .enter-to-send {
    order: 2;
}}

@media (max-width: 768px) {
  .enter-to-send {
    gap: 6px;
    order: 2;
}}

.enter-to-send-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

@media (max-width: 1366px) {
  .enter-to-send-switch {
  width: 24px;
  height: 14px;
}}

@media (max-width: 768px) {
  .enter-to-send-switch {
  width: 26px;
  height: 16px;
}}

.enter-to-send-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-switch .enter-to-send-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.4s;
  border-radius: 20px;
}

.enter-to-send-switch .enter-to-send-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: rgba(145, 75, 255,0.3);
  transition: 0.4s;
  border-radius: 50%;
}

@media (max-width: 1366px) {
  .enter-to-send-switch .enter-to-send-slider::before {
      height: 10px;
  width: 10px;
  left: 3px;
  bottom: 2px;
  }}

@media (max-width: 768px) {
  .enter-to-send-switch .enter-to-send-slider::before {
      height: 12px;
  width: 12px;
  left: 3px;
  bottom: 2px;
  }}

body.dark .enter-to-send-switch .enter-to-send-slider::before {
    background: rgba(0, 0, 0, 1);
}

.enter-to-send-switch input:checked + .enter-to-send-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

body.dark .enter-to-send-switch input:checked + .enter-to-send-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

.enter-to-send-switch input:checked + .enter-to-send-slider::before {
  transform: translateX(16px);
  background: rgba(145, 75, 255, 0.7);
}

@media (max-width: 1366px) {
  .enter-to-send-switch input:checked + .enter-to-send-slider::before {
  transform: translateX(8px);
  }}

@media (max-width: 768px) {
  .enter-to-send-switch input:checked + .enter-to-send-slider::before {
  transform: translateX(8px);
  }}

body.dark .enter-to-send-switch input:checked + .enter-to-send-slider::before {
  background-color: rgba(0, 0, 0, 1);
}

.enter-to-send-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

@media (max-width: 1366px) {
  .enter-to-send-label {
      font-size: 11px;
        text-shadow: none;
        font-weight: 500;
  }}

@media (max-width: 768px) {
  .enter-to-send-label {
      font-size: 11px;
        text-shadow: none;
        font-weight: 500;
  }}



  .agent-interaction-modal .interaction-maximize-button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    cursor: pointer;
    order: 3;
          margin-bottom: 1px;
  }
  
  @media (min-width: 769px) {
    .float-chatbox .interaction-maximize-button {
      display: none;
    }}


.agent-interaction-close {
  background: none;
border: none; 
box-shadow: none; 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 1px;
  margin-right: 3px;
order: 4;
}

body.dark .agent-interaction-close {
    background: none;
}

@media (max-width: 1366px) {
  .agent-interaction-close {
        padding: 2px 5px 3px 5px;
    font-size: 12px;
    order: 2;
      margin-bottom: -2px;
  }}

@media (max-width: 768px) {
  .agent-interaction-close {
        padding: 2px 0px 3px 5px;
    font-size: 17px;
    order: 3;
    margin-left: -4px;
          margin-top: -2px;
  }}


   .interaction-action-button-2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

    @media (max-width: 1366px) {
    .interaction-action-button-2 {
    gap: 10px;
  }}


  @media (max-width: 768px) {
    .interaction-action-button-2 {
    gap: 10px;
    margin-right: -2px;
  }}

.agent-interaction-builder-link-button,
  .agent-interaction-floating-mode-button {
    background: rgba(145, 75, 255, 0.7);
    color: rgba(255,225,255,0.9);
    text-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    order: 2;
    vertical-align: middle;
    padding: 8px 12px;
    font-weight: 500;
    order: 2;
    text-decoration: none;
  }

  body.dark .agent-interaction-builder-link-button,
  body.dark .agent-interaction-floating-mode-button {
    background: rgba(255,225,255,0.9);
    color: rgba(0, 0, 0, 0.7); 
        font-weight: 500;
}

    @media (max-width: 1366px) {
      .agent-interaction-builder-link-button,
  .agent-interaction-floating-mode-button {
    font-size: 11px;
        padding: 4px 10px;
            border-radius: 6px;
  }}

  @media (max-width: 768px) {
    .agent-interaction-builder-link-button,
    .agent-interaction-floating-mode-button {
    border-radius: 6px;
    font-size: 11px;
  padding: 6px 10px;
  }}



.agent-interaction-builder-link-button i,
  .agent-interaction-floating-mode-button i {
    margin-right: 3px;
  }



.agent-interaction-messages {
  flex: 2 1;
  padding: 16px;
  overflow-y: auto;
  background: linear-gradient(100deg, #9945FF, #14F195);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

body.dark .agent-interaction-messages {
   background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .agent-interaction-messages {
  padding: 10px;
    gap: 6px;
  }}


@media (max-width: 768px) {
  .agent-interaction-messages {
  padding: 10px;
    gap: 10px;
  }}




.agent-interaction-bubble {
  max-width: 75%;
  padding: 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 17px;
  word-wrap: break-word;
}


@media (max-width: 1366px) {
  .agent-interaction-bubble {
  border-radius: 10px;
  }}


@media (max-width: 1366px) {
  .agent-interaction-bubble {
  font-size: 12px;
  line-height: 15px;
  padding: 6px 10px;
  }}


@media (max-width: 768px) {
  .agent-interaction-bubble {
  font-size: 13px;
  line-height: 15px;
  padding: 10px;
  }}

.agent-interaction-user {
background: rgba(255,225,255,2);
color: rgba(0, 0, 0, 0.7);
align-self: flex-end;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
border-bottom-right-radius: 2px;
font-size: 14px;
line-height: 18px;
}

@media (max-width: 1366px) {
.agent-interaction-user {
  font-size: 12px;
  line-height: 15px;
  }}


@media (max-width: 768px) {
.agent-interaction-user {
  font-size: 13px;
  line-height: 15px;
  }}


.agent-interaction-agent {
background: rgba(255,225,255,2);
color: rgba(0, 0, 0, 0.7);
align-self: flex-start;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
border-bottom-left-radius: 2px;
font-size: 14px;
line-height: 18px; 
}

@media (max-width: 768px) {
.agent-interaction-agent {
      font-size: 13px;
  line-height: 15px;
  }}


.agent-interaction-bubble .formatted-agent-output {
font-size: 14px;
line-height: 18px;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1366px) {
.agent-interaction-bubble .formatted-agent-output {
  font-size: 12px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.7);
  }}

@media (max-width: 768px) {
.agent-interaction-bubble .formatted-agent-output {
  font-size: 13px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.7);
  }}


.agent-interaction-bubble .formatted-agent-output a {
    color: rgba(145, 75, 255, 0.6);
    text-decoration: none;
    font-weight: 500;
    
}

  .agent-interaction-bubble.agent-interaction-agent {
  font-size: 12px;
  padding: 12px;
  margin-bottom: 2px;
  }


@media (max-width: 1366px) {
    .agent-interaction-bubble.agent-interaction-agent {
  font-size: 12px;
  padding: 6px 10px;
    margin-bottom: 0px;
  }}



.agent-interaction-message-wrapper {
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.agent-interaction-message-wrapper.own {
  align-items: flex-end;
}




.interaction-response-time-and-action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 6px;
vertical-align: middle;
margin-top: 4px;
}

@media (max-width: 1366px) {
  .interaction-response-time-and-action {
margin-top: 1px;
  }}

@media (max-width: 768px) {
  .interaction-response-time-and-action {
margin-top: 2px;
  }}

.interaction-copy-agent-response-button {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  font-size: 10px;
}


body.dark .interaction-copy-agent-response-button {
  color: rgba(255,255,255,0.9);
}

@media (max-width: 1366px) {
  .interaction-copy-agent-response-button {
      font-size: 9px;
}}

.interaction-copy-button-wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
}

.interaction-copied-confirmation {
  color: rgba(255,255,255,0.7);
  text-shadow: none;
  font-size: 11px;
}

@media (max-width: 1366px) {
.interaction-copied-confirmation {
  font-size: 10px;
}}





.agent-interaction-sender-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-bottom: 2px;
  padding: 0px 6px;
  font-style: italic;
}


@media (max-width: 1366px) {
.agent-interaction-sender-label {
      font-size: 10px;
  }}

.agent-interaction-time {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-top: 0px;
  padding: 0px 0px;
  font-style: italic;
}

@media (max-width: 1366px) {
.agent-interaction-time {
      font-size: 10px;
  }}


@media (max-width: 768px) {
.agent-interaction-time {
      font-size: 10px;
  }}

  .agent-latency {
    margin-left: 6px;
  }

.agent-interaction-input-container {
    position: relative;
  display: flex;
  border-top: 1px solid rgba(255,225,255,0.9);
  padding: 15px;
  background: linear-gradient(100deg, #9945FF, #14F195);
}

body.dark .agent-interaction-input-container {
   background: rgba(0, 0, 0, 1);
     border-top: 1px solid rgba(255,225,255,0.2);
}

@media (max-width: 1366px) {
  .agent-interaction-input-container {
      padding: 10px;
  }}

@media (max-width: 768px) {
  .agent-interaction-input-container {
      padding: 10px;
  }}

.agent-interaction-input {
  flex: 2 1;
  background: rgba(255,225,255,0.9);
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 10px 10px;
  resize: none;
  font-size: 14px;
  min-height: 67px;
  max-height: 67px;
  overflow-y: auto;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .agent-interaction-input {
      padding: 8px 10px;
      font-size: 12px;
  min-height: 62px;
  max-height: 62px;
  }}

@media (max-width: 768px) {
  .agent-interaction-input {
      padding: 5px 8px;
      font-size: 13px;
      line-height: 18px;
  min-height: 50px;
  max-height: 50px;
  }}

.agent-interaction-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.agent-interaction-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: none !important;
}

.agent-interaction-textarea-wrapper {
  position: relative;
  width: 100%;
}

.agent-send-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 6px;
  gap: 2px;
  vertical-align: middle;
}

  .agent-interaction-charcount.warning {
  color: rgba(255,255,255,0.9);
  text-shadow: none;
}

.agent-interaction-charcount {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-shadow: none;
}

body.dark .agent-interaction-charcount {
  color: rgba(255,255,255,0.7);
}

@media (max-width: 1366px) {
  .agent-interaction-charcount {
  font-size: 10px;
  }}

.agent-interaction-charcount i {
color: rgba(240, 255, 0, 2);
text-shadow: none;
  }

.agent-interaction-send-button {
background: rgba(145, 75, 255,0.3);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255,225,255,0.9);
padding: 10px 0px;
height: 43px;
max-height: 43px;
width: 56px;
max-width: 56px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
      display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .agent-interaction-send-button {
   background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1366px) {
  .agent-interaction-send-button {
border-radius: 6px;
padding: 6px 0px;
height: 37px;
max-height: 37px;
width: 46px;
max-width: 46px;
  }}

@media (max-width: 768px) {
  .agent-interaction-send-button {
border-radius: 6px;
padding: 6px 0px;
height: 27px;
max-height: 27px;
width: 33px;
max-width: 33px;
  }}

.agent-interaction-send-button i {
  font-size: 16px;
}

@media (max-width: 768px) {
  .agent-interaction-send-button i {
  font-size: 13px;
}}

.agent-interaction-send-button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

.agent-greeting-message.thinking,
.agent-interaction-agent.thinking {
color: rgba(0, 0, 0, 0.7);
font-size: 20px;
line-height: 20px; 
}

.agent-greeting-message .on-thinking::after,
.agent-interaction-agent .on-thinking::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.agent-interaction-error-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agent-interaction-error-box {
  background: #7375e1; 
  padding: 20px 30px;
  border-radius: 10px;
  max-width: 75%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
}

body.dark .agent-interaction-error-box {
     background: #666;
}

@media (max-width: 768px) {
  .agent-interaction-error-box {
      font-size: 13px;
  }}


.agent-interaction-error-box button {
  margin-top: 12px;
  background-color: rgba(145, 75, 255,0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
    font-size: 13px;
}

body.dark .agent-interaction-error-box button {
     background: rgb(0, 0, 0, 1);
}

@media (max-width: 768px) {
.agent-interaction-error-box button {
      font-size: 12px;
  }}


  .agent-modal-telegram-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 24px;
  min-width: 50px;
  min-height: 50px;
  text-decoration: none;
  transition: background 0.2s ease;
  z-index: 9999999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .agent-modal-telegram-button {
  background: rgba(0, 0, 0, 1);
}

@media (max-width:1366px) {
  .agent-modal-telegram-button {
      top: 8px;
  right: 8px;
      padding: 6px 8px;
    font-size: 18px;
      min-width: 40px;
  min-height: 40px;
  }}

@media (max-width: 768px) {
  .agent-modal-telegram-button {
          top: 6px;
  right: 6px;
      padding: 6px 6px;
    font-size: 13px;
   min-width: auto;
  min-height: auto;
  }}


body:has(.dm-alert-message-overlay) .user-header,
body:has(.dm-alert-message-overlay) .admin-header,
body:has(.dm-alert-message-overlay) .main-footer,
body:has(.dm-alert-message-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.dm-alert-message-overlay) .global-footer,
body:has(.dm-alert-message-overlay) .ask-treo,
body:has(.dm-alert-message-overlay) .agent-interaction-dock-button,
body:has(.dm-alert-message-overlay) .float-chat-button {
  display: none;
}

.user-dashboard .user-dm-container {
  display: flex;
  height: 66vh;
  border-radius: 8px;
  overflow: hidden;
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  height: auto;
  min-height: 76vh;
  max-height: 76vh;

}

@media (max-width: 1366px) {
.user-dashboard .user-dm-container {
  height: auto;
  min-height: 70vh;
  max-height: 70vh;
  }}

@media (max-width: 768px) {
.user-dashboard .user-dm-container {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }}

  body.dark .user-dashboard .user-dm-container {
    background: rgba(0.0.0,0.1);
  }
  
    body.light .user-dashboard .user-dm-container {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .user-dashboard .dm-inbox-panel {
    width: 300px; 
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }

  @media (max-width: 1366px) {
    .user-dashboard .dm-inbox-panel {
      width: 225px; 
      min-width: 225px;
      max-width: 225px;
    }}
  
  .user-dm-inbox-wrapper::-webkit-scrollbar {
    display: block;
    width: 2px !important;
  }
  
  .user-dm-inbox-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    width: 2px !important;
  }
  
.user-dm-inbox-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    width: 2px !important;
    border-radius: 4px;
  }

  .dm-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
  }

  .user-chat-thread {
    flex: 1 1;
    overflow-y: auto;
    padding: 0px;
  }
  
  .dm-placeholder {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8) ;
    font-size: 13px;
    font-style: italic;
  }

    body.light .dm-placeholder {
      color: rgba(0, 0, 0, 0.9)
    }

  @media (max-width: 1366px) {
    .dm-placeholder {
      font-size: 12px;
    }}


      @media (max-width: 768px) {
    .dm-placeholder {
          padding: 15px !important;
      font-size: 13px !important;
    }}
  
  .dm-input-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: #fff;
    padding: 12px 10px 13px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    gap: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }

    @media (max-width: 1366px) {
        .dm-input-container {
    padding: 8px 8px 10px 8px;
    margin-bottom: 0px;
        }}

            @media (max-width: 768px) {
        .dm-input-container {
    padding: 10px 8px 11px 8px;
        }}

  .dm-input-box-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: auto;
  }

  .dm-input-wrapper {
    flex-grow: 1;
    position: relative;
  }

  .user-dm-inbox-wrapper {
    height: 100%;
    overflow-y: auto; 
    padding: 10px;
    height: 100%;
  }
  
  .user-dm-inbox-title {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.9);
  }

  body.light .user-dm-inbox-title {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-title {
      font-size: 13px;
    }}

    @media (max-width: 768px) {
      .user-dm-inbox-title {
      font-size: 15px;
          margin-bottom: 15px;
      }}

  .user-dm-inbox-loading,
  .user-dm-inbox-empty {
    font-size: 14px;
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-loading,
  .user-dm-inbox-empty {
    font-size: 11px;
  }}

    @media (max-width: 1366px) {
    .user-dm-inbox-loading,
  .user-dm-inbox-empty {
    font-size: 13px;
  }}

  .user-dm-inbox-item {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 10px 5px 10px 0px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 10px;
    position: relative;
  }
  
  @media (max-width: 1366px) {
    .user-dm-inbox-item {
    gap: 3px;
        padding: 8px 5px 8px 5px;
            border-radius: 6px;
    }}

      @media (max-width: 768px) {
    .user-dm-inbox-item {
    gap: 3px;
        padding: 6px 5px 6px 5px;
            border-radius: 6px;
    }}
  
  .user-dm-inbox-item.unread {
    background: rgb(255, 255, 255, 0.2)
  }

  body.dark .user-dm-inbox-item.unread {
    background: rgba(255, 255, 255, 0.2)
  }

    body.light .user-dm-inbox-item.unread {
    background: rgba(0, 0, 0, 0.1)
  }
  
  .user-dm-inbox-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    margin-left: 10px;
    margin-right: 6px;
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-avatar {
      width: 36px;
      height: 36px;
      margin-left: 3px;
      margin-right: 3px;
    }}
  
  .user-dm-inbox-info {
    flex-grow: 1;
    overflow: hidden;
  }
  
  .user-dm-inbox-name {
    font-weight: 300;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.light .user-dm-inbox-name {
    color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-name {
      font-size: 12px;
    }}

  .user-dm-inbox-preview {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
    body.light .user-dm-inbox-preview {
    color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-preview {
      font-size: 11px;
    }}

  .user-dm-inbox-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
  }
  
  .user-dm-inbox-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-right: 5px;
  }

  body.light .user-dm-inbox-date {
    color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-date {
      font-size: 9px;
    }}

    
  .user-dm-inbox-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-right: 5px;
    margin-top: 2px;
  }

  body.light .user-dm-inbox-time {
    color: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-time {
      font-size: 10px;
    }}
  
  .user-dm-inbox-dot {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 0px 3px rgba(255, 255, 255, 1); 
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 10px;
  }
  
    body.light .user-dm-inbox-dot {
    background: rgba(0, 0, 0, 0.9)
  }

  @media (max-width: 1366px) {
    .user-dm-inbox-dot {
      width: 5px;
      height: 5px;
          top: 6px;
    right: 8px;
    }}
  
      @media (max-width: 768px) {
    .user-dm-inbox-dot {
display: none;
    }}

  .user-dashboard .dm-input-box {
    width: 100%;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 6px !important;
    padding: 8px 8px;
    font-size: 14px;
    line-height: 20px;
    height: 50px;
    max-height: 300px;
    box-sizing: border-box;
    outline: none;
    vertical-align: middle;
    margin-bottom: -1px;
    color: rgba(0, 0, 0, 0.6) !important;
        transition: height 0.1s ease;
  }

  @media (max-width: 1366px) {
    .user-dashboard .dm-input-box {
      padding: 6px 8px;
      font-size: 12px;
   line-height: 16px;
    height: 50px;
    max-height: 300px;
    }}

  @media (max-width: 768px) {
    .user-dashboard .dm-input-box {
      padding: 10px 10px;
      font-size: 12px;
      line-height: 16px;
    height: 50px;
    max-height: 300px;
    }}

    .float-chatbox .dm-input-box {
      padding: 6px 6px;
      font-size: 12px;
    padding: 12px 10px;
    height: 50px;
    max-height: 300px;
    }

  @media (max-width: 1366px) {
    .float-chatbox .dm-input-box {
      padding: 6px 6px;
      font-size: 12px;
    padding: 12px 10px;
    height: 50px;
    max-height: 300px;
    }}


      @media (max-width: 768px) {
    .float-chatbox .dm-input-box {
      padding: 10px 10px;
      font-size: 12px;
      line-height: 16px;
    height: 50px;
    max-height: 300px;
    }}



    
    .charact-and-send {
    display: flex;
    flex-direction: row;
    gap: 5px;
    position: absolute;
    bottom: 22px;
    right: 17px;
  }
  
    @media (max-width: 1366px) {
        .charact-and-send {
        gap: 5px;
           position: absolute;
    bottom: 18px;
    right: 17px;
  }}

    @media (max-width: 768px) {
        .charact-and-send {
        gap: 5px;
           position: absolute;
    bottom: 20px;
    right: 17px;
  }}
  
  .emoji-picker-box {
    position: absolute;
    bottom: 66px;
    right: 10px;
    z-index: 100;
  }
  
      @media (max-width: 1366px) {
          .emoji-picker-box {
    position: absolute;
    bottom: 63px;
    right: 9px;
  }}

    @media (max-width: 768px) {
    .emoji-picker-box {
    position: absolute;
    bottom: 70px;
    right: 8px;
  }}


  .dm-emoji-button {
background-color: #8063ef;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 6px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px;
  }
  
  @media (max-width: 1366px) {
    .dm-emoji-button {
    font-size: 16px;
    }}

      @media (max-width: 768px) {
    .dm-emoji-button {
    font-size: 16px;
    display: none;
    }}

  body.dark .dm-emoji-button {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .dm-emoji-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }


    
  .dm-input-container .dm-send-button {
background-color: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px 8px 12px;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s ease;
    height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
  }
  
  @media (max-width: 1366px) {
    .dm-input-container .dm-send-button {
    font-size: 13px;
  height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    padding: 6px 8px 6px 6px;
      font-size: 11px;
  }}

    @media (max-width: 768px) {
    .dm-input-container .dm-send-button {
  height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    }}



  .float-chatbox .dm-send-button {
  height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    }

      @media (max-width:1366px) {
      .float-chatbox .dm-send-button {
  height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    }}

  @media (max-width: 768px) {
      .float-chatbox .dm-send-button {
  height: 33px;
    min-height: 33px;
    max-height: 33px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    }}



  .dm-send-button:disabled {
  opacity: 0.6;
    cursor: not-allowed;
  }

  body.dark .dm-send-button {
    background: rgba(0, 0, 0, 1); 
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .dm-send-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

.messaging-sending {
  animation: shake 0.5s infinite;
}

@keyframes messaging-sending  {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

  .user-chat-thread {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    background: rgba(255,255,255,1);
    height: auto;
    min-height: 76vh;
    max-height: 76vh;
  }
  
      @media (max-width: 1366px) {
        .user-chat-thread {
    height: auto;
    min-height: 70vh;
    max-height: 70vh;
        }}

    @media (max-width: 768px) {
        .user-chat-thread {
    height: auto;
    min-height: 63vh;
    max-height: 63vh;
        }}

  .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999999999;
    width: 100%;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255,255,255,1);
    position: absolute;
  }

      @media (max-width: 768px) {
  .chat-header {
    padding: 10px 10px 10px 10px;
        }}
  
  .back-btn {
    background: none;
    border: none;
    font-size: 1rem;
    margin-right: 0.75rem;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.7);
  }
  
    .chat-partner-box {
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    align-items: center;
  }

  .chat-partner-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); 
  }

  @media (max-width: 1366px) {
    .chat-partner-avatar {
      width: 36px;
      height: 36px;
    }}

     @media (max-width: 768px) {
    .chat-partner-avatar {
      width: 36px;
      height: 36px;
    }}
  
    .chat-partner-info {
          display: flex;
    flex-direction: column;
    gap: 0px;
  }

  .chat-partner-info .name {
    font-weight: 500;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.7);
    margin-top: -2px;
  }
  
  @media (max-width: 1366px) {
    .chat-partner-info .name {
      font-size: 12px;
    }}

  .chat-partner-info .username {
    font-weight: 500;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
  }

  @media (max-width: 1366px) {
    .chat-partner-info .username {
      font-size: 11px;
    }}

  .chat-partner-info.clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .chat-partner-avatar-wrapper {
    cursor: pointer;
  }
  
  .chat-partner-info-box {
    vertical-align: middle;
  }

  .chat-messages {
    display: flex;
    flex-direction: column;
    padding: 66px 10px 90px 10px;
    gap: 0.5rem;
    background: rgba(255,255,255,1);
    height: auto;
    overflow-y: auto !important;
  }

    @media (max-width: 1366px) {
  .chat-messages {
    padding: 62px 10px 90px 10px;
  }}



.user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 138px;
}

 @media (max-width: 1366px) {
  .user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 118px;
}}

 @media (max-width: 768px) {
  .user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 118px;
  padding-bottom: 0px;
}}

  .chat-loading,
  .chat-empty {
    text-align: center;
    padding: 1rem;
    color: rgba(0, 0, 0, 0.6)
  }



.chat-empty.from-agent-page,
.chat-empty.from-user-page {
  margin-top: 20%;
  font-style: normal;
    font-size: 15px;
    line-height: 18px;;
}

@media (max-width: 1366px) {
.chat-empty.from-agent-page,
.chat-empty.from-user-page {
    font-size: 12px;
    line-height: 15px;;
}}

@media (max-width: 768px) {
.chat-empty.from-agent-page,
.chat-empty.from-user-page {
    font-size: 13px;
    line-height: 16px;;
}}


  .chat-content {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; 
  }

  .chat-content a {
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    text-decoration: underline;
    font-weight: 300;
  }

  .chat-bubble.emoji-only .chat-content {
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    padding: 3px 12px;
    z-index: 999999999 !important; 
    opacity: 1 !important;
    color: rgba(0, 0, 0, 0.7);
  }
  
  @media (max-width: 1366px) {
    .chat-bubble.emoji-only .chat-content {
      font-size: 26px;
      line-height: 26px;
    }}

  .chat-bubble {
    max-width: 70%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
    word-wrap: break-word;
    transition: all 0.2s ease-in-out;
    will-change: transform, opacity;
  }

  @media (max-width: 1366px) {
    .chat-bubble {
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 12px;
      line-height: 16px;
    }}
  
  .chat-bubble.own {
    align-self: flex-end;
    background: rgba(255, 255, 255, 1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 2px;
          text-align: right;
  }

  .chat-bubble.other {
    align-self: flex-start;
    background: rgba(255, 255, 255, 1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 2px;
              text-align: left;
  }

  .chat-bubble .chat-time {
  display: block;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  margin-top: 3px;
  padding: 0px 0px;
  font-style: italic;
  float: right;
  }

    body.dark .chat-bubble.other .chat-time {
    color: rgba(0, 0, 0, 0.7);
  }


  @media (max-width: 1366px) {
      .chat-bubble .chat-time {
      font-size: 9px;
      margin-top: 2px;
    }}

      @media (max-width: 768px) {
    .chat-bubble.other .chat-time {
      font-size: 9px;
    }}

  .chat-bubble.other .chat-time {
    color: rgba(0, 0, 0, 0.7);
  }
  



  .chat-message-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    margin-top: 6px;
  }
  
  .chat-message-wrapper.own {
    align-items: flex-end;
  }
  
  .chat-message-wrapper.other {
    align-items: flex-start;
  }
  
  .chat-sender-label {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 2px;
    margin-right: 2px;
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.7);
    align-self: flex-end;
    font-style: italic;
  }

  @media (max-width: 1366px) {
    .chat-sender-label {
      font-size: 9px;
    }}



  .dm-input-wrapper {
    position: relative;
    flex-grow: 1;
  }
  



  .dm-char-count {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6) !important;
    display: none;
  }

  @media (max-width: 1366px) {
    .dm-char-count {
      font-size: 9.5px;
    }}
  
  body.dark .dm-char-count {
    color: rgba(0, 0, 0, 0.6) !important;
  }




  @media (max-width: 768px) {
    .user-dashboard .user-dm-container {
      flex-direction: column;
      height: auto;
      max-height: none;
    }
  
    .user-dashboard .dm-inbox-panel {
      width: 100%; 
      min-width: 100%; 
      max-width: 100%; 
      height: 300px; 
      min-height: 300px; 
      max-height: 300px; 
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
  
    .dm-chat-panel {
      width: 100%;
      flex-grow: 1;
      height: 100vh; 
      min-height: 100vh; 
      max-height: 100vh; 
      overflow-y: auto;
      margin-top: 0px;
    }
  
    .chat-messages {
      padding-bottom: 10px; 
    }
  
    .dm-input-container {
      position: relative;
      bottom: 0;
      z-index: 9;
    }

  }
  
  
 
  .tagged-agent-box {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
    padding: 8px 10px 10px 10px;
    margin: 68px 0px 0px 0px;
    border-radius: 0px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.25s ease;
    position: absolute;
    width: 100%;
    z-index: 999999999;
  }

  body.dark .tagged-agent-box {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.1); 
  }

  @media (max-width: 1366px) {
    .tagged-agent-box {
    padding: 5px 10px 10px 10px;
    margin: 63px 0px 0px 0px;
    }}

      @media (max-width: 768px) {
    .tagged-agent-box {
    padding: 10px 10px 10px 10px;
    margin: 63px 0px 0px 0px;
    }}

  .tagged-agent-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    flex-shrink: 0;
  }

  @media (max-width: 1366px) {
    .tagged-agent-avatar {
      width: 36px;
      height: 36px;
    }}
  

      .start-con-agent-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    flex-shrink: 0;
    margin-top: 10px;
  }

  @media (max-width: 1366px) {
    .start-con-agent-avatar {
      width: 50px;
      height: 50px;
    }}


  .tagged-agent-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .tagged-agent-label {
    font-size: 13px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
    text-transform: none;
    margin-bottom: 1px;
  }

  @media (max-width: 1366px) {
    .tagged-agent-label {
      font-size: 11px;
    }}
  
    
  @media (max-width: 768px) {
    .tagged-agent-label {
      font-size: 12px;
      margin-bottom: -2px;
    }}
  

  .tagged-agent-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
  }
  
  @media (max-width: 1366px) {
    .tagged-agent-name {
      font-size: 12px;
    }}

  @media (max-width: 768px) {
    .tagged-agent-name {
      font-size: 13px;
    }}


  .message-loading::after {
    content: '';
    display: inline-block;
    width: 10px;
    text-align: left;
    animation: dots 1.6s steps(3, end) infinite;
  }
  
  @keyframes dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
  }


  .dm-topbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  
  .dm-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .dm-filter-select {
    padding: 6px 12px;
    background: #2c2c2c;
    color: #fff;
    border: 1px solid rgb(0, 0, 0, 1);
    border-radius: 8px;
  }
  
  .dm-refresh-button {
    padding: 6px 10px;
    background: #2c2c2c;
    color: #fff;
    border: 1px solid rgb(0, 0, 0, 1);
    border-radius: 6px !important;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  

  .fa-sync.spin {
    animation: spin 1s linear infinite;
    transform-origin: center;
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  


  .message-filter-and-button-wrapper {
    background: transparent;
    border: 0px solid rgba(255, 255, 255, 0.2); 
      box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
    padding: 0px 0px 0px 0px;
    margin: 0px 0 10px 0;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
  }

  body.dark .message-filter-and-button-wrapper  {
    background: rgba(0, 0, 0, 1);
  }

    @media (max-width: 768px) {
  .message-filter-and-button-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    }}

  .message-filter-and-button-1,
  .message-filter-and-button-2  {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  

  @media (max-width: 1366px) {
  .message-filter-and-button-1,
  .message-filter-and-button-2  {
      gap: 8px;
    }}

  .message-filter-status__control,
  .message-filter-category__control {
    font-size: 14px !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0px 3px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
  }
  
  body.dark .message-filter-status__control,
  body.dark .message-filter-category__control {
    background: rgba(0,0,0,0.1) !important;
  }

    body.light .message-filter-status__control,
  body.light .message-filter-category__control {
    background: rgba(255, 255, 255, 1) !important;
  }
  
  .message-filter-status__control {
  min-width: 170px!important;
  max-width: 170px!important;
}

@media (max-width: 1366px) {
    .message-filter-status__control {
      min-width: 136px!important;
      max-width: 136px!important;
    }}

  @media (max-width: 768px) {
    .message-filter-status__control {
      min-width: 156px!important;
      max-width: 156px!important;
    }}


.message-filter-category__control {
  min-width: 186px!important;
  max-width: 186px!important;
}

  @media (max-width: 768px) {
    .message-filter-category__control {
      min-width: 176px!important;
      max-width: 176px!important;
    }}


@media (max-width: 1366px) {
  .message-filter-status__control,
  .message-filter-category__control {
    font-size: 11px !important;
    height: 26px !important;
    min-height: 26px !important;
  }}

  @media (max-width: 768px) {
  .message-filter-status__control,
  .message-filter-category__control {
    font-size: 12px !important;
    height: 30px !important;
    min-height: 30px !important;
  }}

  .message-filter-status__single-value,
  .message-filter-category__single-value,
  .message-filter-status__input,
  .message-filter-category__input,
  .message-filter-status__placeholder,
  .message-filter-category__placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
        font-size: 13px !important;
    font-weight: 300;
    margin-top: -2px;
  }

   body.light .message-filter-status__single-value,
  body.light .message-filter-category__single-value,
  body.light .message-filter-status__input,
  body.light .message-filter-category__input,
  body.light .message-filter-status__placeholder,
  body.light .message-filter-category__placeholder {
    color: rgba(0, 0, 0, 0.9) !important;
  }

    @media (max-width: 768px) {
    .message-filter-category__control,
    .message-filter-status__single-value,
  .message-filter-category__single-value,
  .message-filter-status__input,
  .message-filter-category__input,
  .message-filter-status__placeholder,
  .message-filter-category__placeholder
   {
    font-size: 12px !important;
    }}

  .message-filter-status__indicator,
  .message-filter-category__indicator,
  .message-filter-status__dropdown-indicator,
  .message-filter-category__dropdown-indicator {
    color: rgba(255, 255, 255, 0.9) !important;
    padding-left: 5px !important;
    margin-top: -3px !important;
  }

  body.light .message-filter-status__indicator,
  body.light .message-filter-category__indicator,
  body.light .message-filter-status__dropdown-indicator,
  body.light .message-filter-category__dropdown-indicator {
    color: rgba(0, 0, 0, 0.9) !important;
  }

  @media (max-width: 1366px) {
    .message-filter-status__indicator,
    .message-filter-category__indicator {
    margin-top: -5px !important;
  }}

    @media (max-width: 768px) {
    .message-filter-status__indicator,
    .message-filter-category__indicator {
    margin-top: -3px !important;
  }}

  @media (max-width: 1366px) {
    .message-filter-status__dropdown-indicator,
    .message-filter-category__dropdown-indicator {
    margin-top: -5px !important;
  }}

    @media (max-width: 768px) {
    .message-filter-status__dropdown-indicator,
    .message-filter-category__dropdown-indicator {
    margin-top: -3px !important;
  }}
  
  @media (max-width: 1366px) {
    .message-filter-status__indicator-separator,
    .message-filter-category__indicator-separator,
    .message-filter-status__dropdown-indicator-separator,
    .message-filter-category__dropdown-indicator-separator {
    margin-top: 4px !important;
    height: 16px !important;
  }}
  
    @media (max-width: 768px) {
    .message-filter-status__indicator-separator,
    .message-filter-category__indicator-separator,
    .message-filter-status__dropdown-indicator-separator,
    .message-filter-category__dropdown-indicator-separator {
    margin-top: 6px !important;
    height: 16px !important;
  }}

  .message-filter-status__value-container,
  .message-filter-category__value-container {
    padding: 0 6px !important;
    display: flex;
    align-items: center;
  }


  @media (max-width: 1366px) {
    .message-filter-status__value-container,
    .message-filter-category__value-container {
    margin-top: -6px !important;
  }}
  

  .message-filter-status__menu,
  .message-filter-category__menu {
    background: #7d65ed !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    margin-top: 6px;
    z-index: 9999999999 !important;
    cursor: pointer !important;
  }
  
  body.dark .message-filter-status__menu,
  body.dark .message-filter-category__menu {
    background: rgba(0, 0, 0, 1) !important;
  }

    body.light .message-filter-status__menu,
  body.light .message-filter-category__menu {
    background: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 0, 0.9) !important;
  }

  @media (max-width: 1366px) {
    body.dark .message-filter-status__menu,
    body.dark .message-filter-category__menu {
      margin-top: 5px !important;
    }}

  .message-filter-status__option,
  .message-filter-category__option {
    font-size: 14px !important;
    font-weight: 300;
    padding: 4px 10px 4px 10px!important;
    cursor: pointer !important;
    background: #7d65ed !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

   body.light .message-filter-status__option,
  body.light  .message-filter-category__option {
    background: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 0, 0.9) !important;
  }

  @media (max-width: 1366px) {
    .message-filter-status__option,
    .message-filter-category__option {
      font-size: 11px !important;
      padding: 3px 10px 3px 10px!important;
    }}

      @media (max-width: 768px) {
    .message-filter-status__option,
    .message-filter-category__option {
      font-size: 12px !important;
      padding: 4px 10px 4px 10px!important;
    }}

  .message-filter-status__option:last-child,
  .message-filter-category__option:last-child {
    padding-bottom: 6px !important;
  }

  @media (max-width: 1366px) {
    .message-filter-status__option:last-child,
    .message-filter-category__option:last-child {
      padding-bottom: 2px !important;
    }}

      @media (max-width: 768px) {
    .message-filter-status__option:last-child,
    .message-filter-category__option:last-child {
      padding-bottom: 6px !important;
    }}

  body.dark .message-filter-status__option,
  body.dark .message-filter-category__option {
    background: rgba(0, 0, 0, 1) !important;
  }



  .message-refresh,
  .message-select {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
  }

    .message-refresh {
          font-size: 11px;
  }


  body.dark .message-refresh,
body.dark .message-select {
  background: rgba(0, 0, 0, 1);
}

  body.light .message-refresh,
body.light .message-select {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .message-refresh,
  .message-select {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }}

  @media (max-width: 768px) {
    .message-refresh,
    .message-select {
    font-size: 10px;
    width: 30px;
    height: 30px;
    }}


.message-select.message-select-active {
  background: rgba(220, 50, 70, 0.8);
}


body.dark .message-select.message-select-active {
  background: rgba(220, 50, 70, 0.6);
}

body.light .message-select.message-select-active {
  background: rgba(220, 50, 70, 0.9);
  color: rgba(255, 255, 255, 0.9)
}

  .message-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items:center;
    margin-top: 0px;
    margin-bottom: 0px;
    vertical-align: middle;
  }

  @media (max-width:1366px) {
    .message-actions {
      gap: 6px;
  }}

  @media (max-width:768px) {
    .message-actions {
      gap: 6px;
  }}
  
  .message-actions button {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    min-width: 33px;
    height: 33px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 300;
    vertical-align: middle;
  }
  
 
  body.dark .message-actions button {
    background: rgba(0, 0, 0, 1);
  }
  
    body.light .message-actions button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }
  

  @media (max-width: 1366px) {
    .message-actions button {
      padding: 3px 10px;
      font-size: 12px;
  min-width: 26px;
  height: 26px;
      padding: 6px 10px;
  }}
  
  @media (max-width:768px) {
    .message-actions button {
  min-width: 30px;
  height: 30px;
      padding: 5px 7px;
      font-size: 12px;
  }}




  .message-checkbox {
    -webkit-appearance: none;
            appearance: none;
    width: 13px;
    height: 13px;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  box-shadow: none; 
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    margin-right: 0px;
  }

    body.dark .message-checkbox {
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  }


  body.light .message-checkbox {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
  }

  
  @media (max-width: 1366px) {
    .message-checkbox {
    width: 12px;
    height: 12px;
    margin-right: 0px;
    }}

    @media (max-width: 768px) {
    .message-checkbox {
    width: 15px;
    height: 15px;
    margin-right: 0px;
    }}
  
 
  .message-checkbox:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
  body.dark .message-checkbox:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

    body.light .message-checkbox:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }


.tagged-agent-name-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}



.agent-status-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 3px 6px;
  margin-left: 0px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
      border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 10px;
    right: 10px;
}

  @media (max-width: 1366px) {
.agent-status-label {
  font-size: 11px;
      top: 6px;
    right: 10px;
}}

.agent-status-label.pending {background: rgba(0, 0, 0, 0.5);}
.agent-status-label.rejected {background: rgba(220, 50, 70, 0.7);}
.agent-status-label.suspended {background: rgba(220, 50, 70, 0.7);}
.agent-status-label.changes-rejected {background: rgba(220, 50, 70, 0.7);}
.agent-status-label.pending-changes {background: rgba(0, 0, 0, 0.5); }
.agent-status-label.archived {background: rgba(0, 0, 0, 0.5);}

.agent-status-label.approved {background: rgba(145, 75, 255, 0.7); display:none;}
.agent-status-label.restored {background: rgba(0, 255, 163, 0.6); display:none;}
.agent-status-label.changes-approved {background: rgba(145, 75, 255, 0.7); display:none;}

.dm-topright {
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}

.dm-user-report-button {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2); 
  box-shadow: none;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
  padding: 2px 7px 4px 7px;
  width: 100%;
  border-radius: 6px;
}


@media (max-width: 1366px) {
.dm-user-report-button {
  font-size: 10px;
  }}


.enter-to-send-dm {
  display: flex; 
  align-items: center;
  gap: 6px;
}

.enter-to-send-dm-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

@media (max-width: 1366px) {
.enter-to-send-dm-switch {
    width: 33px;
  height: 16px;
}}

.enter-to-send-dm-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-dm-switch .enter-to-send-dm-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(130, 115, 242, 0.6);
  transition: 0.4s;
  border-radius: 20px;
}

body.dark .enter-to-send-dm-switch .enter-to-send-dm-slider {
  border: 1px solid #888;
}

body.light .enter-to-send-dm-switch .enter-to-send-dm-slider {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.enter-to-send-dm-switch .enter-to-send-dm-slider::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 2px;
  bottom: 2px;
  background: rgba(145, 75, 255,0.3);
  transition: 0.4s;
  border-radius: 50%;
}

@media (max-width: 1366px) {
  .enter-to-send-dm-switch .enter-to-send-dm-slider::before {
  height: 11px;
  width: 11px;
  left: 2px;
  bottom: 2px;
  }}


body.dark .enter-to-send-dm-switch .enter-to-send-dm-slider::before {
  background: rgba(0, 0, 0, 1);
}

body.light .enter-to-send-dm-switch .enter-to-send-dm-slider::before {
  background: rgba(0, 0, 0, 1);
}

.enter-to-send-dm-switch input:checked + .enter-to-send-dm-slider {
  background: rgba(145, 75, 255, 0.7);
}

body.dark .enter-to-send-dm-switch input:checked + .enter-to-send-dm-slider {
  background-color: rgb(0, 0, 0, 1);
}

body.light .enter-to-send-dm-switch input:checked + .enter-to-send-dm-slider {
  background-color: rgb(0, 0, 0, 1);
}

.enter-to-send-dm-switch input:checked + .enter-to-send-dm-slider::before {
  transform: translateX(16px);
  background-color: rgba(255, 255, 255, 0.9);
}

body.dark .enter-to-send-dm-switch input:checked + .enter-to-send-dm-slider::before {
  background-color: rgba(255, 255, 255, 0.9);
}

.enter-to-send-dm-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

@media (max-width: 1366px) {
  .enter-to-send-dm-label {
  font-size: 10px;
  }}

    @media (max-width: 768px) {
  .enter-to-send-dm-label {
  font-size: 11px;
  }}




.enter-to-send-dm-header-toggle {
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0px;
}


.dm-alert-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 9999999999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dm-alert-message-content {
background: rgba(220, 50, 70, 1);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  max-width: 40%;
  white-space: pre-line !important;
}

body.dark .dm-alert-message-content {
background: rgba(0, 0, 0, 1);
border: 1px solid rgba(255, 255, 255, 0.2); 
}

@media (max-width: 768px) {
  .dm-alert-message-content {
      max-width: 95%;
        padding: 20px;
  }}


  .dm-alert-message-content h1 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.dm-alert-message-content h1 {
  font-size: 16px;
  margin-bottom: 10px;
  }}

@media (max-width: 768px) {
.dm-alert-message-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  }}

.dm-alert-message-content p {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
}

@media (max-width: 1366px) {
.dm-alert-message-content p {
  font-size: 12px;
    line-height: 16px;
  margin-bottom: 6px;
  }}

@media (max-width: 768px) {
.dm-alert-message-content p {
  font-size: 14px;
  margin-bottom: 6px;
  }}

.dm-alert-message-button {
  margin-top: 15px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

body.dark .dm-alert-message-button {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.dm-alert-message-button {
  font-size: 13px;
    padding:6px 20px;
  }}

@media (max-width: 768px) {
.dm-alert-message-button {
  font-size: 12px;
  }}


.user-chat-thread::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    display: none !important;
  }

.dm-loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30%;
}

.dm-loading {
  display: inline-block;
  width: 40px;
  height: 10px;
  position: relative;
}

.dm-loading::before,
.dm-loading::after,
.dm-loading span {
  content: '';
  width: 9px;
  height: 9px;
  background: rgba(145, 75, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  top: 0;
  animation: loadingWave 0.9s ease-in-out infinite;
}

body.dark .dm-loading::before,
body.dark .dm-loading::after,
body.dark .dm-loading span {
    background: rgba(0, 0, 0, 0.7);
}

body.light .dm-loading::before,
body.light .dm-loading::after,
body.light .dm-loading span {
    background: rgba(0, 0, 0, 0.7);
}


.dm-loading::before {
  left: 0;
  animation-delay: 0s;
}

.dm-loading span {
  left: 14px;
  animation-delay: 0.15s;
}

.dm-loading::after {
  left: 28px;
  animation-delay: 0.3s;
}

@keyframes loadingWave {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(-6px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.dm-previous-loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.dm-previous-loading {
  display: inline-block;
  width: 40px;
  height: 10px;
  position: relative;
}

.dm-previous-loading::before,
.dm-previous-loading::after,
.dm-previous-loading span {
  content: '';
  width: 6px;
  height: 6px;
  background: rgba(145, 75, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  top: 0;
  animation: loadingWave 0.9s ease-in-out infinite;
}


body.dark .dm-previous-loading::before,
body.dark .dm-previous-loading::after,
body.dark .dm-previous-loading span {
    background: rgba(0, 0, 0, 0.7);
}

body.light .dm-previous-loading::before,
body.light .dm-previous-loading::after,
body.light .dm-previous-loading span {
    background: rgba(0, 0, 0, 0.7);
}

.dm-previous-loading::before {
  left: 0;
  animation-delay: 0s;
}

.dm-previous-loading span {
  left: 14px;
  animation-delay: 0.15s;
}

.dm-previous-loading::after {
  left: 28px;
  animation-delay: 0.3s;
}

.messages-previous-box {
  margin: 0 auto;
  margin-top: 10px;
}

.messages-previous-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(0,0,0,0.5);
  cursor: pointer;
  min-height: 35px;
  min-width: 175px;
  font-size: 22px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.messages-previous-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.messages-previous-button .messages-previous-button-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: opacity 0.2s ease;
}

.messages-previous-button:hover {
  color: rgba(0, 0, 0, 0.7);
}


.messages-scroll-bottom {
  background-color: rgba(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 18%;
  left: 46%;
  font-size: 20px;
  width: 50px;
  height: 50px;
  z-index: 9999999999 !important;
}

body.dark .messages-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .messages-scroll-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1366px) {
.messages-scroll-bottom {
  width: 36px;
  height: 36px;
}}

@media (max-width: 768px) {
.messages-scroll-bottom {
  position: absolute;
  bottom: 22%;
}}

.messages-scroll-bottom:hover {
  background-color: rgba(145, 75, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

body.dark .messages-scroll-bottom:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

body.light .messages-scroll-bottom:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}
.float-chat-button-wrapper {
  position: relative;
  display: inline-block;
}

  .float-chat-button .float-chat-button-unread-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(145, 75, 255, 0.6); 
  color: #8063ef;
  font-size: 12px;
  border-radius: 50%;
  font-weight: 500;
  z-index: 10;
  padding: 5px 10px;
  display: flex;
  align-items: center; 
  justify-content: center;
}

body.dark .float-chat-button .float-chat-button-unread-badge {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0, 0, 0, 0.6);
  color: rgba(0, 0, 0, 0.7);
}

body.light .float-chat-button .float-chat-button-unread-badge {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
    .float-chat-button .float-chat-button-unread-badge {
  top: -8px;
  right: -8px;
  font-size: 9px;
    padding: 3px 7px;
}}

@media (max-width: 768px) {
    .float-chat-button .float-chat-button-unread-badge {
  top: -12px;
  right: 5px;
  font-size: 10px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(145, 75, 255, 0.9); 
  transition: background-color 0.3s;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}}

@media (max-width: 768px) {
    body.dark .float-chat-button .float-chat-button-unread-badge {
      background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
    }}

  .float-chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(100deg, rgba(145, 75, 255, 0.7), rgba(20, 241, 149, 0.7));
  border: 0px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 26px;
  cursor: pointer;
  z-index: 9999999999 !important;
    width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
      display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .float-chat-button {
  background: rgba(0, 0, 0, 1);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 1px 3px rgba(255, 255, 255, 1);
}

body.light .float-chat-button {
  background: rgba(255, 255, 255, 1);
  color: rgba(0,0,0,0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .float-chat-button {
    bottom: 15px;
    right: 15px;
    padding: 8px;
    font-size: 18px;
        width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  }}

@media (max-width: 768px) {
  .float-chat-button {
    bottom: 0px;
    right: 0px;
    font-size: 16px;
  width: 50%;
  min-width: 50%;
  max-width: 50%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0px;
  padding: 0px 10px;
  box-shadow: none;
  background: transparent !important;
  transition: background-color 0.3s;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
    z-index: 9999999999 !important;
      display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
  }

  @media (max-width: 768px) {
  body.dark .float-chat-button {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  }}

    .float-chat-button-label {
    margin-left: 5px;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    vertical-align: middle;
  }

    body.light .float-chat-button-label {
    color: rgba(0, 0, 0, 0.9);
  }

    .float-chat-button.shift-up-mobile {
      bottom: 100px !important;
    }
  }


  @media (max-width: 768px) {
  .float-chat-button.mobile-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
}

.float-chatbox .chat-header .enter-to-send-dm-header-toggle {
  display: none !important;
}

  .float-chatbox .chat-header {
    position: fixed;
    z-index: 999999999;
    width: 450px;
    border: none;
    border-bottom: none;
    padding: 8px 0px 10px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    margin-left: -10px;
  }

    @media (max-width: 1366px) {
    .float-chatbox .chat-header {
    width: 350px;
    }}



  @media (max-width: 768px) {
    .float-chatbox .chat-header {
      position: fixed;
      z-index: 999999999;
      width: 100%;
    }}
    

  
.float-chatbox .dm-input-box {
    width: 100%;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 6px !important;
    padding: 8px 8px;
    font-size: 14px;
    line-height: 19px;
    height: 50px;
    max-height: 300px;
    box-sizing: border-box;
    outline: none;
    vertical-align: middle;
    margin-bottom: -1px;
    color: rgba(0, 0, 0, 0.6) !important;
}

    @media (max-width: 1366px) {
    .float-chatbox .dm-input-box {
                padding: 6px 8px;
    height: 50px;
    max-height: 300px;
        font-size: 12px;
    line-height: 16px;
          }}

    @media (max-width: 768px) {
    .float-chatbox .dm-input-box {
    padding: 6px 8px 6px 8px;
    height: 50px;
    max-height: 300px;
  font-size: 12px;
    line-height: 16px;
          }}


    @media (max-width: 768px) {
    .float-chatbox.maximized .dm-input-box {
          padding: 6px 90x 6px 8px;
    height: 50px !important;
        max-height: 300px !important;
        margin-bottom: 1px !important;
          }}


     .float-chatbox .dm-input-box::placeholder {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    }

    @media (max-width: 1366px) {
     .float-chatbox .dm-input-box::placeholder {
    font-size: 12px;
     }}
      
    @media (max-width: 768px) {
     .float-chatbox .dm-input-box::placeholder {
    font-size: 13px;
     }}


  .float-chatbox .charact-and-send {
    display: flex;
    flex-direction: row;
    gap: 5px;
    position: absolute;
    bottom: 20px;
    right: 17px;
  }

    @media (max-width: 1366px) {
  .float-chatbox .charact-and-send {
    position: absolute;
    bottom: 20px;
    right: 17px;
     }}
      
    @media (max-width: 768px) {
  .float-chatbox .charact-and-send {
    position: absolute;
    bottom: 20px;
    right: 17px;
     }}


    @media (max-width: 768px) {
  .float-chatbox.maximized .charact-and-send {
    position: absolute;
    bottom: 10px;
    right: 10px;
     }}

    .float-chatbox .dm-input-container {
    padding: 11px 10px 12px 10px; 
    gap: 0px;
    position: absolute;
    bottom: 0px;
    width: 450px;
    overflow: hidden;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: -10px;
    border-radius: 0px 0px 10px 10px;
    }

         @media (max-width: 1366px) {
    .float-chatbox .dm-input-container {
      width: 350px;
      padding: 11px 10px 15px 10px; 
      bottom: 0px;
    }}

             @media (max-width: 768px) {
    .float-chatbox .dm-input-container {
      width: 100%;
      padding: 11px 10px 12px 10px; 
      margin-bottom: 0px;
      bottom: 3px !important;
      min-height: 70px;
      max-height: auto;
    }}

    @media (max-width: 768px) {
    .float-chatbox.maximized .dm-input-container {
      padding: 0px 0px 0px 0px !important; 
      margin-bottom: 0px !important;
      bottom: 0px !important;
      height: 90px !important;
      max-height: auto;
    }}

    .float-chatbox .dm-input-container .dm-send-button {
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
          display: flex;
    justify-content: center;
    align-items: center;
    }
    

            @media (max-width: 1366px) {
    .float-chatbox .dm-input-container .dm-send-button {
      width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
    }}


   @media (max-width: 768px) {
    .float-chatbox .dm-input-container .dm-send-button {
            width: 33px !important;
      min-width: 33px !important;
      max-width: 33px !important;
      height: 33px !important;
      min-height: 33px !important;
      max-height: 33px !important;
      
    }}

    .tagged-agent-box-container {
      background: rgba(255, 255, 255, 1);
      z-index: 999999999;
    }

     @media (max-width: 1366px) {
    .float-chatbox .dm-char-count {
      font-size: 9px;
    }}
  


.float-chatbox .dm-user-report-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  }





    .float-chatbox .tagged-agent-box {
      background: rgba(255, 255, 255, 1);
      margin: 65px 0px 0px -10px;
      position: fixed;
      width: 450px;
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, 0.2); 
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
      border-radius: 0px;
      z-index: 999999999;
    }

    
     @media (max-width: 1366px) {
 .float-chatbox .tagged-agent-box {
      width: 350px;
      margin: 55px 0px 0px -10px;
 }}
    
 
     @media (max-width: 768px) {
 .float-chatbox .tagged-agent-box {
  width: 100%;
  margin: 55px 0px 0px -10px;
 }}


 .float-chatbox .user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 140px;
    padding-bottom: 10px;
}

     @media (max-width: 1366px) {
       .float-chatbox .user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 110px;
    padding-bottom: 0px;
}}
    
     @media (max-width: 768px) {
       .float-chatbox .user-chat-thread:has(.tagged-agent-box) .chat-messages {
  padding-top: 120px;
  padding-bottom: 50px;
}}

.float-chatbox .chat-messages {
  padding: 66px 0px 20px 2px;
  margin-left: 0px;
}

     @media (max-width: 1366px) {
.float-chatbox .chat-messages {
  padding: 60px 0px 100px 2px;
  margin-left: 0px;
}}


     @media (max-width: 768px) {
.float-chatbox .chat-messages {
  padding: 70px 0px 10px 2px;
  margin-left: 0px;
}}



  .float-chatbox.maximized .chat-messages {
  padding: 70px 0px 10px 2px;
  }

.float-chatbox .chat-messages.with-tagged-agent {
  padding: 130px 0px 0px 2px;
    margin-bottom: 15px;
}


     @media (max-width: 768px) {
.float-chatbox .chat-messages.with-tagged-agent {
  padding: 120px 0px 50px 2px;
  margin-bottom: 20px;
}}

     @media (max-width: 768px) {
.float-chatbox.maximized .chat-messages.with-tagged-agent {
  padding: 120px 0px 0px 2px;
  margin-bottom: 0px;
  z-index: 1 !important;
}}





.chat-messages::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
    z-index: 9999999999 !important;
  }
  
.chat-messages::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.6)!important;
    width: 4px!important;
  }
  
.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6)!important;
    width: 4px!important;
    border-radius: 4px!important;
  }

      .float-chatbox .emoji-picker-box {
    position:fixed;
    bottom: 86px;
    right: 25px;
  }

    @media (max-width: 1366px) {
      .float-chatbox .emoji-picker-box {
    position:fixed;
    bottom: 2vh;
    right: 60vh;
  }}

    @media (max-width: 768px) {
      .float-chatbox .emoji-picker-box {
    position:fixed;
    bottom: 75px;
    right: 10px;
  }}

.float-chatbox .user-chat-thread {
  margin-left: 0px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 50px;
}

     @media (max-width: 1366px) {
      .float-chatbox .user-chat-thread {
  margin-bottom: 50px;
}}

     @media (max-width: 768px) {
      .float-chatbox .user-chat-thread {
  margin-bottom: 50px;
      height: auto;
    min-height: auto;
    max-height: 100vh;
}}


.float-chatbox.maximized .user-chat-thread {
      height: auto;
    min-height: 60vh;
    max-height: 60vh;
}

.float-chatbox {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 450px;
  height: auto;
  min-height: 76vh;
  max-height: 76vh;
  background: rgba(255,255,255,1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999999999;
  transition: bottom 0.25s ease-in-out;
}

@media (max-width: 1366px) {
  .float-chatbox {
    width: 350px;
    bottom: 10px;
    right: 10px;
    max-height: 475px;
  }}

@media (max-width: 768px) {
  .float-chatbox {
    width: 100%;
    bottom: 0%;
    right: 0%;
    height: auto;
    min-height: auto;
    max-height: 100vh;
    top: 0px;
    border-radius: 0px;
  }}








  
.float-chatbox-header {
    background: #8063ef;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

body.dark .float-chatbox-header {
  background: rgb(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .float-chatbox-header {
  background: rgb(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


@media (max-width: 1366px) {
.float-chatbox-header {
  padding: 12px 12px;
}}

@media (max-width: 768px) {
.float-chatbox-header {
  padding: 12px 12px;
}}

.float-chatbox-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px !important;
  font-weight: 300;
}

@media (max-width: 1366px) {
.float-chatbox-title {
  font-size: 12px !important;
}}

@media (max-width: 768px) {
.float-chatbox-title {
  font-size: 15px !important;
}}

.float-chatbox-header .close-btn,
.float-chatbox-header .back-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  cursor: pointer;
}

@media (max-width: 1366px) {
.float-chatbox-header .close-btn {
  font-size: 11px;
}}


@media (max-width: 768px) {
.float-chatbox-header .close-btn {
  font-size: 14px;
  margin-left: -6px;
}}

@media (max-width: 1366px) {
.float-chatbox-header .back-btn {
  font-size: 13px;
}}

@media (max-width: 768px) {
.float-chatbox-header .back-btn {
  font-size: 13px;
}}

.enter-to-send-float {
display: flex; 
align-items: center;
gap: 6px;
}

@media (max-width: 768px) {
  .enter-to-send-float {
    gap: 6px;
}
}

.enter-to-send-float-switch {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 20px;
}

@media (max-width: 1366px) {
  .enter-to-send-float-switch {
  width: 24px;
  height: 14px;
}}

@media (max-width: 768px) {
  .enter-to-send-float-switch {
  width: 26px;
  height: 16px;
}}

.enter-to-send-float-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.enter-to-send-float-switch .enter-to-send-float-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  transition: 0.4s;
  border-radius: 20px;
}

.enter-to-send-float-switch .enter-to-send-float-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
 background: rgba(145, 75, 255,0.3);
  transition: 0.4s;
  border-radius: 50%;
}

@media (max-width: 1366px) {
  .enter-to-send-float-switch .enter-to-send-float-slider::before {
      height: 10px;
  width: 10px;
  left: 0x;
  bottom: 1px;
  }}

@media (max-width: 768px) {
  .enter-to-send-float-switch .enter-to-send-float-slider::before {
      height: 12px;
  width: 12px;
  left: 2px;
  bottom: 1px;
  }}

body.dark .enter-to-send-float-switch .enter-to-send-float-slider::before {
    background: rgba(0, 0, 0, 0.3);
}

.enter-to-send-float-switch input:checked + .enter-to-send-float-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

body.dark .enter-to-send-float-switch input:checked + .enter-to-send-float-slider {
  background-color: rgba(255, 255, 255, 0.9);
}

.enter-to-send-float-switch input:checked + .enter-to-send-float-slider::before {
  transform: translateX(16px);
 background: #8063ef;
}

@media (max-width: 1366px) {
  .enter-to-send-float-switch input:checked + .enter-to-send-float-slider::before {
  transform: translateX(8px);
  }}

@media (max-width: 768px) {
  .enter-to-send-float-switch input:checked + .enter-to-send-float-slider::before {
  transform: translateX(8px);
  }}

body.dark .enter-to-send-float-switch input:checked + .enter-to-send-float-slider::before {
  background-color: rgba(0, 0, 0, 1);
}

body.light .enter-to-send-float-switch input:checked + .enter-to-send-float-slider::before {
  background-color: rgba(0, 0, 0, 0.9);
}

.enter-to-send-float-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  -webkit-user-select: none;
          user-select: none;
}

@media (max-width: 1366px) {
  .enter-to-send-float-label {
      font-size: 12px;
        text-shadow: none;
  }}

@media (max-width: 768px) {
  .enter-to-send-float-label {
      font-size: 12px;
        text-shadow: none;
  }}

.float-chatbox-body {
  flex: 1 1;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 0px 10px 10px 10px;
}

.float-chatbox-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.float-chatbox .chat-empty {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
    width: 90%;
    margin: 0 auto;
  margin-top: 50%;
}


@media (max-width: 1366px) {
.float-chatbox .chat-empty {
  font-size: 12px;
  line-height: 15px;;
}}

@media (max-width: 768px) {
.float-chatbox .chat-empty {
  font-size: 13px;
  line-height: 16px;;
}}


.float-chatbox .chat-empty.from-agent-page,
.float-chatbox .chat-empty.from-user-page {
  margin-top: 30%;
  font-style: normal;
    font-size: 15px;
    line-height: 18px;;
}

@media (max-width: 1366px) {
.float-chatbox .chat-empty.from-agent-page,
.float-chatbox .chat-empty.from-user-page {
    font-size: 12px;
    line-height: 15px;;
}}

@media (max-width: 768px) {
.float-chatbox .chat-empty.from-agent-page,
.float-chatbox .chat-empty.from-user-page {
    font-size: 13px;
    line-height: 16px;;
}}


.from-agent-page .from-agent-page-name,
.from-user-page .from-user-page-name {
  font-weight: 500;
  display: block;
  margin-top: 3px;
  font-size: 15px;
    line-height: 18px;;
}


@media (max-width: 1366px) {
  .from-agent-page .from-agent-page-name,
.from-user-page .from-user-page-name {
    font-size: 12px;
    line-height: 15px;;
}}

@media (max-width: 768px) {
  .from-agent-page .from-agent-page-name,
.from-user-page .from-user-page-name {
    font-size: 13px;
    line-height: 16px;;
}}

.inbox-item:first-child {
  margin-top: 10px;
}

.inbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
  transition: background 0.2s;
}

@media (max-width: 1366px) {
  .inbox-item {
    gap: 6px;
  padding: 6px;
  }}

.inbox-item.unread {
  background: rgba(145, 75, 255, 0.2);
}

body.dark .inbox-item.unread {
  background: rgba(0,0,0,0.1);
  font-weight: 500;
}

body.light .inbox-item.unread {
  background: rgba(0,0,0,0.1);
  font-weight: 500;
}

.float-chatbox .inbox-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
  vertical-align: middle !important;
}

.float-chatbox .inbox-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  vertical-align: middle !important;
  position: relative;
}

.inbox-name {
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1366px) {
  .inbox-name {
    font-size: 12px;
  }}

  @media (max-width:768px) {
  .inbox-name {
    font-size: 13px;
  }}

.inbox-preview {
  font-weight: 300;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap; 
    margin-top: 0px;
}

@media (max-width: 1366px) {
  .inbox-preview {
    font-size: 11px;
  }}

  @media (max-width: 768px) {
  .inbox-preview {
    font-size: 12px;
  }}

.inbox-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.inbox-date {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 8px;
  white-space: nowrap;
  position: absolute;
  top: 0px;
  right: 3px;
}

@media (max-width: 1366px) {
.inbox-date {
    font-size: 10px;
  }}

.inbox-time {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 8px;
  white-space: nowrap;
  position: absolute;
  top: 15px;
  right: 3px;
}

@media (max-width: 1366px) {
  .inbox-time {
    font-size: 9px;
    font-weight: 500;
  }}

@media (max-width: 768px) {
  .inbox-time {
  top: 12px;
  }}

  .float-chatbox.maximized {
    bottom: auto;
    top: 0px;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    height: 66vh;
    max-height: 66vh;
  }
  
  .float-chatbox .maximize-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    cursor: pointer;
    margin-right: 6px;
  }

  @media (min-width: 769px) {
    .float-chatbox .maximize-btn {
      display: none;
    }}


  .float-chatbox.maximized .dm-input-container {
    padding: 44px 0px 4px 0px; 
    gap: 6px;
    position: relative;
    width: 100%;
    bottom: 0;
    margin-left: 0px;
    border-radius: 0px 0px 0px 0px;
    }

@media (max-width: 768px) {
          .float-chatbox.maximized .dm-input-container {
    padding: 13px 0px 4px 0px; 
          }}

  .float-chatbox-header .chatbox-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  

.chat-loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50%;
}

@media (max-width: 768px) {
  .chat-loader {
      margin-top: 36vh;
}}

.chat-loading {
  display: inline-block;
  width: 40px;
  height: 10px;
  position: relative;
}

.chat-loading::before,
.chat-loading::after,
.chat-loading span {
  content: '';
  width: 9px;
  height: 9px;
  background: rgba(145, 75, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  top: 0;
  animation: loadingWave 0.9s ease-in-out infinite;
}

body.dark .chat-loading::before,
body.dark .chat-loading::after,
body.dark .chat-loading span {
    background: rgba(0, 0, 0, 0.7);
}

body.light .chat-loading::before,
body.light .chat-loading::after,
body.light .chat-loading span {
    background: rgba(0, 0, 0, 0.7);
}

.chat-loading::before {
  left: 0;
  animation-delay: 0s;
}

.chat-loading span {
  left: 14px;
  animation-delay: 0.15s;
}

.chat-loading::after {
  left: 28px;
  animation-delay: 0.3s;
}

@keyframes loadingWave {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(-6px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}


.float-chatbox .dm-loader {
    margin-top: 50%;
}


@media (max-width: 768px) {
  .float-chatbox .dm-loader {
    margin-top: 36vh;
}}
@keyframes FromLeftMain {
  0% {
    opacity: 0;
    transform: translateX(-100vw) translateY(50px);
  }
  70% {
    opacity: opacity 1;
  }
  100% {
    opacity: 1;
    transform: translateX(15vw) translateY(0);
  }
}

.homepage-footer {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  width: 100%;
  margin: 0 auto;
  padding: 50px 0px 20px 0px;
  z-index: 999;
  text-align: center;
  position: relative;
  bottom: 0;
  animation: FromLeftMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

.homepage-footer-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 auto;
}

.homepage-footer-copyright {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
}

  @media (max-width: 1366px) {
    .homepage-footer-copyright {
  font-size: 11px;
    }}

      @media (max-width: 768px) {
    .homepage-footer-copyright {
  font-size: 13px;
    }}

.homepage-footer-tagline {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
}

  @media (max-width: 1366px) {
    .homepage-footer-tagline {
  font-size: 11px;
    }}

      @media (max-width: 768px) {
    .homepage-footer-tagline {
  font-size: 12px;
    }}

.homepage-footer-social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0 auto;
  margin-top: 15px;
}

.homepage-footer-social a {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

.homepage-footer-version {
  font-size: 13.5px;
  line-height: 13.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

  @media (max-width: 1366px) {
.homepage-footer-version {
  font-size: 11px;
    margin-top: 5px;
    }}

      @media (max-width: 768px) {
.homepage-footer-version {
  font-size: 12px;
    }}

.homepage-footer-version a {
    color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.homepage-footer-version i {
  font-size: 12px;
  line-height: 13.5px;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 5px;
}
.treo-mainback {
position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-position: var(--treo-bg-pos, center center);
  will-change: transform;
  transform: translateX(-100%);
  animation: TreoAppear 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: saturate(1.02) contrast(1.05);
  min-height: 100vh;
  min-width: 100vw;
}

@keyframes TreoAppear {
  from {
    transform: translateX(-100%) scale(1.06);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 768px) {
  .treo-mainback {
    background-position: 10% 36% !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {
  .treo-mainback {
    transform: scale(1.02);
  }
}

.treo-mainback-overlay {
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

body.dark .treo-mainback-overlay {
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.treo-mainback-overlay::-webkit-scrollbar {
    display: none !important
  }


  
.floating-keywords-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.floating-keyword {
  position: absolute;
  right: 30px;
  background: linear-gradient(100deg, rgb(103, 49, 169), rgb(25, 139, 91));
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  padding: 10px 20px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(300px);
}

body.dark .floating-keyword {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.3); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@keyframes slideInRight {
  to {
    opacity: 0.94;
    transform: translateX(0);
  }
}

@keyframes floatRandom {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-26px, -34px) rotate(2deg); }
  40%  { transform: translate(18px, 12px) rotate(-1.5deg); }
  60%  { transform: translate(-12px, 38px) rotate(1.8deg); }
  80%  { transform: translate(22px, -20px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}


@keyframes GradientMove {
  0%   { background-position: 0 0; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

@keyframes scrollRight {
  0%   { transform: translateX(-50%); } 
  100% { transform: translateX(0%); }
}

@media (max-width: 768px) {
@keyframes scrollRight {
  0%   { transform: translateX(-50%); } 
  100% { transform: translateX(0%); }
}}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.96;
    transform: scale(1);
  }
}

.floating-keywords-center {
  position: relative;
  width: 52.5%;
  height: 60px;
  margin: 0 auto;
  margin-top: 50px;
  overflow: hidden; 
  pointer-events: none;
  background: transparent;
  z-index: 999;
}

@media (max-width: 768px) {
.floating-keywords-center {
  position: relative;
  width: 85%;
  height: 60px;
  margin-top: 20px;
}}

.ticker-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 60px;
  transform: translateY(-50%);
}

.ticker {
  display: flex;
  align-items: center;
  height: 60px;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content; 
  animation: scrollRight 36s linear infinite; 
  will-change: transform; 
}

.keyword-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 10px;
  padding: 4px 20px 7px 20px;
  background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9), rgba(153, 69, 255, 0.9));
  border: 1px solid rgba(0, 0, 0, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  background-size: 200% 200%;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: popIn 0.8s ease-out forwards;
  opacity: 0;
}

body.dark .keyword-item {
  background: rgba(0,0,0,1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .keyword-item {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
  color: rgba(0,0,0,0.9);
  font-weight: 300;
  padding: 2px 20px 5px 20px;
}


@media (max-width: 1366px) {
  .keyword-item {
    font-size: 12px;
    padding: 7px 15px;
    margin: 0 6px;
  }}

@media (max-width: 768px) {
  .keyword-item {
    font-size: 14px;
    padding: 3px 15px 7px 15px;
    margin: 0 6px;
  }}


  body.web3:has(.homepage-wrapper) {
  background:rgba(0, 0, 0, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  }

body:has(.homepage-wrapper) .defaultpage {
    display: flex;
    padding-top: 0px;
    margin-top: 0px;
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

body:has(.homepage-wrapper) .theme-button {
  background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 50%;
}

body.dark:has(.homepage-wrapper) .theme-button {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.light:has(.homepage-wrapper)  .theme-button {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 6px rgba(255,255,255,0.9);
  color: rgba(0, 0, 0, 0.9);
}

body:has(.homepage-wrapper) .user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(225,225,255, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: background-color 0.3s;
  width: 54%;
  margin-left: auto;
  margin-right: auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

body.light:has(.homepage-wrapper) .user-header h1 a {
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    font-weight: 800;
}

body.light:has(.homepage-wrapper) .user-header p {
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    font-weight: 400;
}


@media (max-width: 1366px) {
body:has(.homepage-wrapper) .user-header {
  height: 56px;
}}

@media (max-width: 768px) {
body:has(.homepage-wrapper) .user-header {
  width: 100%;
  height: 70px;
}}

@media (max-width: 768px) {
body:has(.homepage-wrapper) .user-header h1 a {
  font-size: 25px;
  font-weight: 600;
  margin-top: -8px;
}}

@media (max-width: 768px) {
body:has(.homepage-wrapper) .user-header p {
    font-size: 12px;
    margin-top: 5px;
}}

@media (max-width: 768px) {
body:has(.homepage-wrapper) .user-header .header-actions {
top: 0px;
}}

body:has(.homepage-wrapper) .user-header .header-actions.show {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 5px;
}

@media (max-width: 768px) {
  body:has(.homepage-wrapper) .user-header .header-actions.show {
  padding-top: 10px;
}}

body.light:has(.homepage-wrapper) .mobile-menu-button i,
body.light:has(.homepage-wrapper) .theme-button-mobile i {
  color: rgba(255, 255, 255, 0.9);
}

body:has(.homepage-wrapper) .user-header .user-login-button,
body:has(.homepage-wrapper) .user-header .user-dashboard-button,
body:has(.homepage-wrapper) .user-header .submit-agent-button,
body:has(.homepage-wrapper) .user-header .create-agent-button,
body:has(.homepage-wrapper) .user-header .user-explore-button,
body:has(.homepage-wrapper) .user-header .insight-button,
body:has(.homepage-wrapper) .user-header-notification-icon,
body:has(.homepage-wrapper) .user-header .trusty-style,
body:has(.homepage-wrapper) .user-header .show-trusty-balance,
body:has(.homepage-wrapper) .user-header .treo-mobile,
body:has(.homepage-wrapper) .user-header .user-logout-button {
  background: transparent;
  border: none; 
  box-shadow: none; 
  color: rgba(255, 255, 255, 0.8);
}

body:has(.homepage-wrapper) .user-header .get-trusty {
  display: none;
}

.homepage-wrapper::-webkit-scrollbar{
width: 0px !important;
display: none !important;
}

.homepage-wrapper::-webkit-scrollbar-track {
background-color: rgba(145, 75, 255, 0.1) !important;
width: 0px !important;
display: none !important;
}

.homepage-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 10px !important;
  width: 0px !important;
  display: none !important;
}

.homepage-wrapper {
  -ms-overflow-style: none; 
  scrollbar-width: none;
}

/* animation */

  @keyframes GradientMove {
  0%   { background-position: 0 0; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

@keyframes FromTopMain {
  0% { opacity: 0; transform: translateY(-100px) translateX(0vw);}
  100% { opacity: 1; transform: translateY(0) translateX(0vw); 
  }}

@keyframes FromRightMain {
  0% { opacity: 0; transform: translateX(100vw) translateY(0px);}
  100% { opacity: 1; transform: translateX(0vw) translateY(0); }}

@keyframes FromLeftMain {
  0% { opacity: 0; transform: translateX(-100vw) translateY(0px);}
  100% { opacity: 1; transform: translateX(0vw) translateY(0); }}

.homepage-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,0.9);
  width: 100%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 1);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 2;
}

.homepage-content {
  position: relative;
  z-index: 3;
  margin-top: 40px;
}

  @media (max-width: 1366px) {
.homepage-content {
  margin-top: 20px;
}}

  @media (max-width: 768px) {
.homepage-content {
  margin-top: 0px;
}}

/* dekstop intro */

.homepage-intro-desktop {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 0 auto;
  margin-top: 100px;
}

.homepage-intro-desktop-text {
  color: rgba(255,255,255,0.9);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #9945FF,
    0 4px 4px #9945FF,
    0 5px 5px #14F195,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.dark .homepage-intro-desktop-text {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #464646,
    0 4px 4px #6f6f6f,
    0 5px 5px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.light .homepage-intro-desktop-text {
    text-shadow:
    0 1px 1px #6f6f6f,
    0 2px 2px #6f6f6f,
    0 3px 3px #6f6f6f,
    0 4px 4px #9f9f9f,
    0 5px 5px #9f9f9f,
    0 3px 6px rgba(255,255,255,0.9),
    1px 2px 3px rgba(255,255,255,0.9);
}

.homepage-intro-desktop-text:nth-child(1) {
  text-align: center;
  margin-left: 0px;
  font-size: 90px;
  line-height: 90px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.homepage-intro-desktop-text:nth-child(2) {
  text-align: center;
  margin-left: 0px;
  font-size: 50px;
  line-height: 50px;
  margin-top: 15px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.homepage-intro-desktop {
  display: block;
}



 @media (max-width: 1366px) {

.homepage-intro-desktop-text:nth-child(1) {
  font-size: 75px;
  line-height: 75px;
}

.homepage-intro-desktop-text:nth-child(2) {
  font-size: 40px;
  line-height: 40px;
  margin-top: 10px;
}
 }


@media (max-width: 768px) {
  .homepage-intro-desktop {
    display: none !important;
  }
}

/* mobile intro */

.homepage-intro-mobile {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 0 auto;
  margin-top: 90px;
}

.homepage-intro-mobile-text {
  color: rgba(255,255,255,0.9);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #9945FF,
    0 4px 4px #9945FF,
    0 5px 5px #14F195,
    0 3px 6px rgba(0,0,0,0.9),
    1px 2px 3px rgba(0,0,0,0.9);
}

body.dark .homepage-intro-mobile-text {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #464646,
    0 4px 4px #6f6f6f,
    0 5px 5px #6f6f6f,
    0 3px 6px rgba(0,0,0,0.9),
    1px 2px 3px rgba(0,0,0,0.9);
}

body.light .homepage-intro-mobile-text {
    text-shadow:
    0 1px 1px #6f6f6f,
    0 2px 2px #6f6f6f,
    0 3px 3px #6f6f6f,
    0 4px 4px #9f9f9f,
    0 5px 5px #9f9f9f,
    0 3px 6px rgba(0,0,0,0.9),
    1px 2px 3px rgba(0,0,0,0.9);
}


.homepage-intro-mobile-text:nth-child(1) {
  text-align: center;
  margin-left: 0px;
  font-size: 55px;
  line-height: 60px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.homepage-intro-mobile-text:nth-child(2) {
  text-align: center;
  margin-left: 0px;
  font-size: 20px;
  line-height: 20px;
  margin-top: 12px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.homepage-intro-mobile {
  display: none;
}
@media (max-width: 768px) {
  .homepage-intro-mobile {
    display: block;
  }
}


.homepage-start-title,
.homepage-control-title,
.homepage-transform-title {
  font-family: 'Oswald', sans-serif;
  margin: 0 auto;
  font-size: 66px;
  line-height: 50px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #14F195,
    0 1px 2px rgba(255,255,255,0.6),
    0 1px 2px rgba(255,255,255,0.6);
  text-align: center;
  letter-spacing: 0.5px;
  animation: FromRightMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.dark .homepage-start-title,
body.dark .homepage-control-title,
body.dark .homepage-transform-title {
  text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #6f6f6f,
    0 1px 2px rgba(255,255,255,0.6),
    0 1px 2px rgba(255,255,255,0.6);
}

body.light .homepage-start-title,
body.light .homepage-control-title,
body.light .homepage-transform-title {
  text-shadow:
    0 1px 1px #999999,
    0 2px 2px #999999,
    0 3px 3px #999999,
    0 1px 2px rgba(255,255,255,0.9),
    0 1px 2px rgba(255,255,255,0.9);
}

  @media (max-width: 1366px) {
    .homepage-start-title,
    .homepage-control-title,
    .homepage-transform-title {
  margin: 0 auto;
  font-size: 30px;
  line-height: 30px;
}}


  @media (max-width: 768px) {
    .homepage-start-title,
    .homepage-control-title,
    .homepage-transform-title {
  margin: 0 auto;
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
  letter-spacing: 0.5px;
  width: 90%;
}}


.homepage-start-title {margin-top: 100px}
.homepage-control-title {margin-top: 100px}
.homepage-transform-title {margin-top: 50px}

  @media (max-width: 768px) {
.homepage-start-title {margin-top: 50px}
.homepage-control-title {margin-top: 25px}
.homepage-transform-title {margin-top: 25px}
  }

.homepage-start-desc,
.homepage-control-desc,
.homepage-transform-desc {
  margin: 0 auto;
  margin-top: 25px;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255,255,255,1);
  font-weight: 300;
  text-shadow: none;
  text-align: center;
  animation: FromRightMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

  @media (max-width: 1366px) {
    .homepage-start-desc,
    .homepage-control-desc,
    .homepage-transform-desc {
  margin-top: 15px;
  font-size: 16px;
  line-height: 20px;
}}

  @media (max-width: 768px) {
    .homepage-start-desc,
    .homepage-control-desc,
    .homepage-transform-desc {
  margin-top: 6px;
  font-size: 20px;
  line-height: 26px;
  width: 75%;
}}

.homepage-start-box,
.homepage-control-box,
.homepage-transform-box {
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0px;
  gap: 25px;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  animation: FromRightMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

  @media (max-width: 1366px) {
    .homepage-start-box,
    .homepage-control-box,
    .homepage-transform-box {
  width: 50%;
  margin-top: 10px;
  gap: 15px;
}}

  @media (max-width: 768px) {
    .homepage-start-box,
    .homepage-control-box,
    .homepage-transform-box {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0px;
  gap: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background: transparent;
  background: transparent;
  border: none;
  box-shadow: none; 
}}

  @media (max-width: 768px) {
    body.dark .homepage-start-box,
    body.dark .homepage-control-box,
    body.dark .homepage-transform-box {
  background: transparent;
  border: none;
  box-shadow: none; 
    }}

.homepage-start-sub,
.homepage-control-sub,
.homepage-transform-sub {
  width: auto;
  min-width: 33.333333333%;
  max-width: 33.333333333%;
  z-index: 6;
  margin: 0 auto;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  @media (max-width: 1366px) {
    .homepage-start-sub,
    .homepage-control-sub,
    .homepage-transform-sub {
  padding: 10px 10px;
  width: auto;
  min-width: 33.333333333%;
  max-width: 33.333333333%;
}}

  @media (max-width: 768px) {
.homepage-start-sub,
.homepage-control-sub,
.homepage-transform-sub {
  padding: 0px 0px;
  width: auto;
  min-width: 90%;
  max-width: 90%;
}}

.homepage-start-sub:hover,
.homepage-control-sub:hover,
.homepage-transform-sub:hover {
  transform: scale(1.06);
  cursor: pointer;
}

  @media (max-width: 768px) {
.homepage-start-sub:hover,
.homepage-control-sub:hover,
.homepage-transform-sub:hover {
  transform: scale(1);
  cursor: pointer;
}}

.homepage-start-sub-title,
.homepage-control-sub-title,
.homepage-transform-sub-title {
  font-size: 30px;
  color: rgba(255,255,255,1);
  font-weight: 300;
  text-shadow: none;
  text-align: center;
}

  @media (max-width: 1366px) {
    .homepage-start-sub-title,
    .homepage-control-sub-title,
    .homepage-transform-sub-title {
  font-size: 22px;
}}

  @media (max-width: 768px) {
    .homepage-start-sub-title,
    .homepage-control-sub-title,
    .homepage-transform-sub-title {
  font-size: 25px;
  font-weight: 400;
}}

.homepage-start-icon,
.homepage-control-icon,
.homepage-transform-icon {
  font-size: 45px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9));
  display: inline-block;
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.dark .homepage-start-icon,
body.dark .homepage-control-icon,
body.dark .homepage-transform-icon {
  background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 1));
    display: inline-block;
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 1);
  -webkit-text-fill-color: transparent;
}

body.light .homepage-start-icon,
body.light .homepage-control-icon,
body.light .homepage-transform-icon {
  background: linear-gradient(100deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    display: inline-block;
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


  @media (max-width: 1366px) {
.homepage-start-icon,
.homepage-control-icon,
.homepage-transform-icon {
  font-size: 26px;
  margin-bottom: 6px;
}}

  @media (max-width: 768px) {
.homepage-start-icon,
.homepage-control-icon,
.homepage-transform-icon {
  font-size: 50px;
  margin-bottom: 0px;
}}

.homepage-start-sub-desc,
.homepage-control-sub-desc,
.homepage-transform-sub-desc {
  font-size: 16px;
  line-height: 22px;;
  color: rgba(255,255,255,1);
  font-weight: 300;
  text-shadow: none;
  text-align: center;
  margin: 0 auto;
  margin-top: 6px;
  max-width: 90%;
}

  @media (max-width: 1366px) {
.homepage-start-sub-desc,
.homepage-control-sub-desc,
.homepage-transform-sub-desc {
  font-size: 11px;
  line-height: 14px;;
  margin-top: 6px;
    max-width: 100%;
}}

  @media (max-width: 768px) {
.homepage-start-sub-desc,
.homepage-control-sub-desc,
.homepage-transform-sub-desc {
  font-size: 16px;
  line-height: 20px;;
  margin-top: 0px;
  max-width: 75%;
}}


/* closing dekstop */

.homepage-closing-desktop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 0px;
}

.homepage-closing-desktop-text {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 60px;
  line-height: 60px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #9945FF,
    0 04px 4px #9945FF,
    0 5px 5px #14F195,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.dark .homepage-closing-desktop-text {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #464646,
    0 4px 4px #6f6f6f,
    0 5px 5px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.light .homepage-closing-desktop-text {
    text-shadow:
    0 1px 1px #6f6f6f,
    0 2px 2px #6f6f6f,
    0 3px 3px #6f6f6f,
    0 4px 4px #9f9f9f,
    0 5px 5px #9f9f9f,
    0 3px 6px rgba(255,255,255,0.9),
    1px 2px 3px rgba(255,255,255,0.9);
}

@media (max-width: 768px) {
  .homepage-intro-desktop {
    display: none !important;
  }
}

/* closing mobile */

.homepage-closing-mobile {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 0 auto;
  margin-top: 50px;
}

.homepage-closing-mobile-text {
  color: rgba(255,255,255,0.9);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #14F195,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.dark .homepage-closing-mobile-text {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.light .homepage-closing-mobile-text {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.9),
    1px 2px 3px rgba(255,255,255,0.9);
}

.homepage-closing-mobile-text:nth-child(1) {
  text-align: center;
  margin-left: 0px;
  font-size: 36px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.homepage-closing-mobile-text:nth-child(2) {
  text-align: center;
  margin-left: 0px;
  font-size: 36px;
  line-height: 36px;
  font-weight: 600;
  margin-top: 10px;
  letter-spacing: 1px;
  width: 100%;
  animation: FromTopMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.homepage-closing-mobile {
  display: none;
}

@media (max-width: 768px) {
.homepage-closing-mobile {
    display: block;
  }
}

.homepage-closing-desc {
  margin: 0 auto;
  margin-top: 20px;
  font-size: 30px;
  line-height: 30px;
  color: rgba(255,255,255,1);
  font-weight: 300;
  text-shadow: none;
  text-align: center;
  animation: FromRightMain 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

  @media (max-width: 1366px) {
.homepage-closing-desc {
  margin-top: 10px;
  font-size: 16px;
  line-height: 16px;
}}

  @media (max-width: 768px) {
.homepage-closing-desc {
  margin-top: 15px;
  font-size: 22px;
  line-height: 26px;
  width: 80%;
}}


.homepage-button {
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 9999 !important;
}

  @media (max-width: 1366px) {
    .homepage-button {
    margin-top: 20px;
    gap: 20px;
}}

  @media (max-width: 768px) {
    .homepage-button {
    margin-top: 15px;
    gap: 15px;
}}

.homepage-button a {
font-family: 'Iceland', sans-serif;
font-size: 32px;
line-height: 30px;
font-weight: 600;
color: rgba(255,255,255,1);
text-shadow: none;
background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9), rgba(153, 69, 255, 0.9));
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 3px 6px rgba(145, 75, 255, 0.4); 
padding: 15px 35px;
border-radius: 7px;
width: auto;
min-width: 150px;
text-align: center;
cursor: pointer;
text-decoration: none;
}

body.dark .homepage-button a {
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 3px 6px rgba(255, 255, 255, 0.2);  
}

  @media (max-width: 1366px) {
    .homepage-button a {
    font-size: 20px;
    padding: 12px 30px;
    min-width: 100px;
}}

  @media (max-width: 768px) {
    .homepage-button a {
    font-size: 26px;
    padding: 10px 20px;
    min-width: 100px;
    margin-top: 20px;
}}

.homepage-button .build-button {
    background: linear-gradient(100deg, rgba(153, 69, 255, 0.9), rgba(20, 241, 149, 0.9)); 
    border: none;
    transform: scaleY(1.3);
}

body.dark .homepage-button .build-button {
background: rgba(0, 0, 0, 1)
}

body.light .homepage-button .build-button {
background: rgba(255, 255, 255, 0.9);
color: rgba(0, 0, 0, 0.9);
font-weight: 800;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}

.homepage-button i {
    font-size: 30px;
    line-height: 30px;
    margin-left: 3px;
    animation: shakingFlaskMain 1s infinite ease-in-out;
    }

  @media (max-width: 768px) {
  .homepage-button i {
    font-size: 25px;
    line-height: 25px;
   }}







.view-options {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin: -33px 8px 10px 0px;
  max-width: 100%;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
  .view-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    position: static;
    z-index: auto;
     margin: 10px 10px 15px 0px;
  }}

.view-options .controls-container {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .view-options .controls-container {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  flex-wrap: wrap;
}}

.view-mode-controls,
.sort-controls,
.agents-perpage-controls,
.refresh-controls {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  width: auto;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}


  @media (max-width:768px) {
.view-mode-controls .view-options-mode__control {
  min-width: 85px !important; 
  width: 85px !important;
}}

  @media (max-width:768px) {
.agents-perpage-controls .view-options-perpage__control {
  min-width: 70px !important; 
  width: 70px !important;
}}

  @media (max-width:768px) {
.sort-controls .view-options-sortby__control {
  min-width: 141px !important; 
  width: 141px !important;
}}

.view-options .filter-button,
.view-options .refresh-button {
  background: rgba(145, 75, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  width: 33px;
  height: 33px;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.dark .view-options .filter-button,
body.dark .view-options .refresh-button {
    background: rgba(0, 0, 0, 1);
        color: rgba(255, 255, 255, 0.9);
  }

  body.light .view-options .filter-button,
body.light .view-options .refresh-button {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2); 
        color: rgba(0, 0, 0, 0.7);
  }

  @media (max-width: 1366px) {
    .view-options .filter-button,
.view-options .refresh-button {
  width: 26px;
  height: 26px;
  font-size: 10px;
  border-radius: 6px;
}}

.view-options .filter-button i,
.view-options .refresh-button i {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.view-options .filter-button:disabled,
.view-options .refresh-button:disabled {
  cursor: not-allowed;
}

.view-options .filter-button {
  display: none;
}

@media (max-width: 768px) {
  .view-options .filter-button {
  display: inline-block;
}}

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

.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

.view-options-mode__control,
.view-options-perpage__control,
.view-options-sortby__control {
    font-size: 13px !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0px 3px !important;
    border-radius: 6px !important;
    background: rgba(145, 75, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  width: auto!important;
  min-width: auto!important;
  max-width: auto!important;
    cursor: pointer !important; 
  }
  
body.dark .view-options-mode__control,
body.dark .view-options-perpage__control,
body.dark .view-options-sortby__control {
    background: rgba(0, 0, 0, 1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body.light .view-options-mode__control,
body.light .view-options-perpage__control,
body.light .view-options-sortby__control {
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: rgba(0, 0, 0, 0.9) !important;
  }

  @media (max-width: 1366px) {
.view-options-mode__control,
.view-options-perpage__control,
.view-options-sortby__control {
      font-size: 11px !important;
      height: 26px !important;
      min-height: 26px !important;
          border-radius: 6px !important;
    }}


      @media (max-width: 768px) {
.view-options-mode__control,
.view-options-perpage__control,
.view-options-sortby__control {
      font-size: 13px !important;
      height: 26px !important;
      min-height: 26px !important;
          border-radius: 6px !important;
    }}

    .view-options-mode__single-value,
    .view-options-perpage__single-value,
    .view-options-sortby__single-value,
    .view-options-mode__input,
    .view-options-perpage__input,
    .view-options-sortby__input,
    .view-options-mode__placeholder,
    .view-options-perpage__placeholder,
    .view-options-sortby__placeholder {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 300;
  margin-top: -4px !important;
}

body.dark .view-options-mode__single-value,
body.dark .view-options-perpage__single-value,
body.dark .view-options-sortby__single-value,
body.dark .view-options-mode__input,
body.dark .view-options-perpage__input,
body.dark .view-options-sortby__input,
body.dark .view-options-mode__placeholder,
body.dark .view-options-perpage__placeholder,
body.dark .view-options-sortby__placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body.light .view-options-mode__single-value,
body.light .view-options-perpage__single-value,
body.light .view-options-sortby__single-value,
body.light .view-options-mode__input,
body.light .view-options-perpage__input,
body.light .view-options-sortby__input,
body.light .view-options-mode__placeholder,
body.light .view-options-perpage__placeholder,
body.light .view-options-sortby__placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
  }

    .view-options-mode__indicator,
    .view-options-perpage__indicator,
    .view-options-sortby__indicator,
    .view-options-mode__dropdown-indicator,
    .view-options-perpage__dropdown-indicator,
    .view-options-sortby__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-left: 5px !important;
}

body.dark .view-options-mode__indicator,
body.dark .view-options-perpage__indicator,
body.dark .view-options-sortby__indicator,
body.dark .view-options-mode__dropdown-indicator,
body.dark .view-options-perpage__dropdown-indicator,
body.dark .view-options-sortby__dropdown-indicator {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body.light .view-options-mode__indicator,
body.light .view-options-perpage__indicator,
body.light .view-options-sortby__indicator,
body.light .view-options-mode__dropdown-indicator,
body.light .view-options-perpage__dropdown-indicator,
body.light .view-options-sortby__dropdown-indicator {
    color: rgba(0, 0, 0, 0.7) !important;
  }

@media (max-width: 1366px) {
    .view-options-mode__indicator,
    .view-options-perpage__indicator,
    .view-options-sortby__indicator {
  margin-top: -5px !important;
}}

    .view-options-mode__indicator-separator,
    .view-options-perpage__indicator-separator,
    .view-options-sortby__indicator-separator {
  margin-top: 7px !important;
  height: 16px !important;
    }

@media (max-width: 1366px) {
    .view-options-mode__indicator-separator,
    .view-options-perpage__indicator-separator,
    .view-options-sortby__indicator-separator {
  margin-top: 4px !important;
  height: 16px !important;
}}

    .view-options-mode__dropdown-indicator,
    .view-options-perpage__dropdown-indicator,
    .view-options-sortby__dropdown-indicator {
  margin-top: -2px !important;
  font-size: 10px !important;
  width: 30px !important;
}

@media (max-width: 1366px) {
    .view-options-mode__dropdown-indicator,
    .view-options-perpage__dropdown-indicator,
    .view-options-sortby__dropdown-indicator {
  margin-top: -5px !important;
  font-size: 10px !important;
  width: 25px !important;
  height: auto!important;
}}

.view-options-mode__value-container,
.view-options-perpage__value-container,
.view-options-sortby__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
}

@media (max-width: 1366px) {
.view-options-mode__value-container,
.view-options-perpage__value-container,
.view-options-sortby__value-container {
  margin-top: -6px !important;
}}

.view-options-mode__menu,
.view-options-perpage__menu,
.view-options-sortby__menu {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .view-options-mode__menu,
body.dark .view-options-perpage__menu,
body.dark .view-options-sortby__menu {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.light .view-options-mode__menu,
body.light .view-options-perpage__menu,
body.light .view-options-sortby__menu {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}


@media (max-width: 1366px) {
.view-options-mode__menu,
.view-options-perpage__menu,
.view-options-sortby__menu {
  margin-top: 5px !important;
}}

.view-options-mode__option,
.view-options-perpage__option,
.view-options-sortby__option {
  font-size: 13px !important;
  font-weight: 300;
  padding: 2px 10px 2px 10px!important;
  cursor: pointer !important;
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}


body.dark .view-options-mode__option,
body.dark .view-options-perpage__option,
body.dark .view-options-sortby__option {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.light .view-options-mode__option,
body.light .view-options-perpage__option,
body.light .view-options-sortby__option {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}


@media (max-width: 1366px) {
.view-options-mode__option,
.view-options-perpage__option,
.view-options-sortby__option {
    font-size: 11px !important;
    padding: 4px 10px 4px 10px!important;
  }}

  @media (max-width: 768px) {
.view-options-mode__option,
.view-options-perpage__option,
.view-options-sortby__option {
    font-size: 13px !important;
    padding: 3px 10px 3px 10px!important;
  }}

.view-options-mode__option:last-child,
.view-options-perpage__option:last-child,
.view-options-sortby__option:last-child {
  padding-bottom: 6px !important;
}


@media (max-width: 1366px) {
.view-options-mode__option:last-child,
.view-options-perpage__option:last-child,
.view-options-sortby__option:last-child {
    padding-bottom: 2px !important;
  }}

  @media (max-width: 768px) {
.view-options-mode__option:last-child,
.view-options-perpage__option:last-child,
.view-options-sortby__option:last-child {
    padding-bottom: 6px !important;
  }}

/* new view mode */

.view-mode-controls {
  display: flex;
  gap: 5px;
  background: rgba(145, 75, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 0px 10px;
  height: 33px;
  border-radius: 6px;
  justify-items: center;
  align-items: center;
}

body.dark .view-mode-controls {
    background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2)
}

body.light .view-mode-controls {
    background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2)
}

@media (max-width: 1366px) {
  .view-mode-controls {
      height: 26px;
        padding: 0px 6px;
  }}

.view-mode-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0px;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark .view-mode-icon {
 color: rgba(255, 255, 255, 0.3);
}

body.light .view-mode-icon {
 color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 1366px) {
.view-mode-icon {
  font-size: 16px;
  }}

  @media (max-width: 768px) {
.view-mode-icon {
  font-size: 15px;
  }}

.view-mode-icon.active {
  color: rgba(255, 255, 255, 0.9);
}

body.dark .view-mode-icon.active {
 color: rgba(255, 255, 255, 0.8);
}

body.light .view-mode-icon.active {
 color: rgba(0, 0, 0, 0.8);
}

.agent-collection {
    padding: 10px 7px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
  
    @media (max-width: 768px) {
      .agent-collection {
        padding: 0px 0px 0px 0px;
        width: 97.5%;
    }}
  
    .agent-card {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    height: 250px;
    min-height: 250px;
    transition: all 0.3s ease;
    }

    body.light .agent-card {
      border: 1px solid rgba(0, 0, 0, 0.1); 
    }

    .agent-card:hover {
    transform: scale(1.01);
    cursor:pointer;
    }

    .agent-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    }

    .agent-card:hover::before {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background: rgba(145, 75, 255, 0.1);
    font-weight: 300;
    }

    body.dark .agent-card:hover::before {
        background: rgba(255, 255, 255, 0.1);
    }

    body.light .agent-card:hover::before {
      background: rgba(145, 75, 255, 0.1);
    }
      
     
    @media (max-width: 1366px) {
      .agent-card {
        height: 200px;
        min-height: 200px;
      }}
  
      @media (max-width: 768px) {
        .agent-collection .agent-card {
          height: 175px !important;
          min-height: 175px !important;
        }}


    .agent-collection.grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
      gap: 20px;
       min-height: 100vh;
    }
  
    @media (max-width: 1366px) {
      .agent-collection.grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }}
  
      @media (max-width: 768px) {
        .agent-collection.grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 10px;
          gap: 10px;
          }}
  


    .agent-collection.list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
      gap: 15px;
      padding: 10px;
    }
  
    @media (max-width: 1366px) {
      .agent-collection.list {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 10px;
      }
    }


    @media (max-width: 768px) {
      .agent-collection.list {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        padding: 0px;
      }
    }


    .agent-list-mode {
      position: relative;
      text-decoration: none;
      color: inherit;
      padding: 10px;
      background: rgb(145, 75, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.2); 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
      border-radius: 8px;
      transition: transform 0.3s ease;
    }

    body.dark .agent-list-mode {
      background: rgb(255, 255, 255, 0.05);
    }

        body.light .agent-list-mode {
       background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9)

    }

    @media (max-width: 1366px) {
      .agent-list-mode {
  padding: 10px 10px 10px 10px;
}}

@media (max-width: 768px) {
  .agent-list-mode {
padding: 6px 10px;
}}
  
    .agent-list-mode:hover {
      transform: scale(1.01);
    }
  
    .agent-list-mode .agent-list-mode-content {
      display: flex;
      align-items: center;
    }
  
    .agent-list-mode .agent-list-mode-content img {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      margin-right: 6px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.2); 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    }

    @media (max-width: 1366px) {
      .agent-list-mode .agent-list-mode-content img {
        width: 66px;
        height: 66px;
        margin-right: 6px;
      }}

      
    @media (max-width: 768px) {
      .agent-list-mode .agent-list-mode-content img {
        width: 66px;
        height: 66px;
        margin-right: 6px;
      }}

  
    .agent-list-mode .agent-list-mode-value {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 76px;
    }

    @media (max-width: 1366px) {
      .agent-list-mode .agent-list-mode-value {
        min-height: 66px;
      }}

      @media (max-width: 768px) {
        .agent-list-mode .agent-list-mode-value {
          min-height: 76px;
        }}
  
    .agent-list-mode .agent-list-mode-name {
      font-size: 15px;
      font-weight: 300;
      margin-bottom: 0px;
    color:  rgba(255, 255, 255, 1);
    text-shadow: none;
    }

    body.light .agent-list-mode .agent-list-mode-name {
      color: rgba(0, 0, 0, 0.9);
    }

    @media (max-width: 1366px) {
      .agent-list-mode .agent-list-mode-name {
        font-size: 11px;
      }}

      @media (max-width: 768px) {
        .agent-list-mode .agent-list-mode-name {
          font-size: 13px;
        }}
  
    .agent-list-mode .agent-list-mode-specialization {
      font-size: 12.5px;
      line-height: 15px;
      font-weight: 300;
    color:  rgba(255, 255, 255, 1);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    }

        body.light .agent-list-mode .agent-list-mode-specialization {
      color: rgba(0, 0, 0, 0.9);
      text-shadow: none;
    }

    @media (max-width: 1366px) {
      .agent-list-mode .agent-list-mode-specialization {
        font-size: 10px;
              line-height: 13px;
      }}

      @media (max-width: 768px) {
        .agent-list-mode .agent-list-mode-specialization {
          font-size: 11px;
          line-height: 13px;
        }}
  

 .agent-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  width: 100%;
}

    @media (max-width: 1366px) {
       .agent-list-meta {
        font-size: 8px;
    }}

    @media (max-width: 768px) {
       .agent-list-meta {
        font-size: 9.5px;
    }}

.agent-list-meta-item {
  background: rgba(133,113,244,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 3px 6px;
  border-radius: 4px;
}

body.dark .agent-list-meta-item {
  background: rgba(0,0,0,0.1);
}

.agent-list-meta-item i {
  font-size: 11px;
  margin-right: 3px
}

    body.dark .agent-list-mode .agent-list-mode-name {
      color: rgba(255, 255, 255, 0.9);
    }
  
    body.dark .agent-list-mode .agent-list-mode-specialization {
      color: rgba(255, 255, 255, 0.9);
    }
  
    body.dark .agent-list-mode .agent-list-mode-pricing {
      color: rgba(255, 255, 255, 0.9);
    }

    .agent-collection.grid .agent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    height: 250px;
    min-height: 250px;
    }
  
    @media (max-width: 1366px) {
    .agent-collection.grid .agent-card {
      height: 160px;
      min-height: 160px;
    }}
  
    .agent-card-maininfo {
      position: absolute;
      bottom: 5%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  
    .agent-card .agent-card-name {
    color:  rgba(255, 255, 255, 1);
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 3px 3px #333,
    0 2px 4px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
    }

  
    @media (max-width: 1366px) {
      .agent-card .agent-card-name {
        font-size: 12px;
      }}
  
    .agent-card .agent-card-specialization {
    color:  rgba(255, 255, 255, 1);
    text-shadow: 
    0 1px 1px #111,
    0 2px 2px #111,
    0 3px 3px #111;
    font-size: 14px;
    line-height: 18px;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
    width: 90%;
    margin-top: 0px;
    font-style: normal;
    }
  
    @media (max-width: 1366px) {
      .agent-card .agent-card-specialization {
        font-size: 10px;
        line-height: 11px;
      }}
  

.agent-card-meta {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  width: 100%;
}

    @media (max-width: 1366px) {
  .agent-card-meta {
  bottom: 4%;
  gap: 4px;
  font-size: 8.5px;
}}

        @media (max-width: 768px) {
  .agent-card-meta {
  bottom: 5%;
  gap: 4px;
  font-size: 9px;
    }}

.agent-card-meta-item {
  background: rgba(133,113,244,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 6px;
  border-radius: 4px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}

body.dark .agent-card-meta-item {
  background: rgba(0, 0, 0, 0.7);
}

    @media (max-width: 1366px) {
  .agent-card-meta-item {
  padding: 3px 6px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

    @media (max-width: 768px) {
  .agent-card-meta-item {
  padding: 4px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

.agent-card-meta-item i {
  margin-right: 4px
}

    .main-content table {
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-collapse: separate;
    border-spacing: 0;
    border-radius:0x;
    overflow: hidden;
    margin-top: 10px !important;
    margin-bottom: 10px;
    margin-left: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
     table-layout: auto;
     width: auto;
    }

    body.dark .main-content table {
      background: rgba(0, 0, 0, 1);
      color: rgba(255, 255, 255, 0.9);
    }


    @media (max-width: 768px) {
      .main-content table {
      margin-left: 0px;
      margin-top: 0px !important;
      width: 100%;
    }}


.table-scroll-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(133,113,244,0.6) transparent;
}

body.dark .table-scroll-wrapper {
  scrollbar-color: rgba(255,255,255,0.6) transparent;
}

.table-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

body.dark .table-scroll-wrapper::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.6);
}

.table-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}







.main-content table th:first-child {
      border-top-left-radius: 0px;
    }
  
    .main-content table th:last-child {
      border-top-right-radius: 0px;
    }
  
    .main-content table tr:last-child td:first-child {
      border-bottom-left-radius: 0px;
    }
  
    .main-content table tr:last-child td:last-child {
      border-bottom-right-radius: 0px;
    }
  
  
    .main-content table th {
      background: rgba(145, 75, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    font-size: 15px;
    text-align: center;
    }

    body.dark .main-content table th {
      background: rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 0.9);
    }

    @media (max-width: 1366px) {
      .main-content table th {
        font-size: 11px;
        padding: 10px;
      }}


    @media (max-width: 768px) {
      .main-content table th {
        font-size: 11px;
        padding: 12px;
      }}
  
    


    
    .main-content table td {
      background: rgba(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 10px;
    font-size: 13px; 
    line-height: 20px;
    text-align: left;
    }

    body.dark .main-content table td {
      background: rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 0.9);
    }

    @media (max-width:1366px) {
      .main-content table td {
        font-size: 11px;
        line-height: 14px;
        padding: 8px;
      }}

    @media (max-width: 768px) {
      .main-content table td {
        font-size: 10px;
        line-height: 13px;
        padding: 10px;
      }}
  


    .main-content table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 1);
    }
  
    .main-content table td a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    }


    .main-content table th:nth-child(1),
    .main-content table td:nth-child(1) {
  width: auto;
  white-space: nowrap;
    }

    .main-content table th:nth-child(2),
    .main-content table td:nth-child(2) {
  width: auto;
  white-space: nowrap;
    }


    .main-content table th:nth-child(3),
    .main-content table td:nth-child(3) {
  width: auto;
  white-space: nowrap;
    }


    .main-content table th:nth-child(4),
    .main-content table td:nth-child(4) {
  width: auto;
  white-space: nowrap;
    }

    .main-content table th:nth-child(5),
    .main-content table td:nth-child(5) {
  width: auto;
  white-space: nowrap;
    }

    .main-content table th:nth-child(6),
    .main-content table td:nth-child(6) {
  width: auto;
  white-space: nowrap;
    }


   .main-content table th:nth-child(7),
    .main-content table td:nth-child(7) {
  width: auto;
  white-space: nowrap;
    }


    .main-content table th:nth-child(8),
    .main-content table td:nth-child(8) {
  width: auto;
  white-space: nowrap;
    }

.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-wrapper table {
  min-width: 150%;
  width: 100%;
  table-layout: auto;
}
  
    .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0px;
    padding: 0px 8px 0px 10px;
    }

    @media (max-width: 1366px) {
      .pagination {
        margin-top: 10px;
      }}

    @media (max-width: 768px) {
      .pagination {
        justify-content:space-between;
        margin-top: 20px;
            padding: 0px 12px 0px 2px;
      }}
  
    .pagination button {
    font-size: 13px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: rgb(145, 75, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    }
  
    body.light .pagination button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
    }
  
      
    body.dark .pagination button {
      background: rgba(0,0,0,0.1);
    }

    @media (max-width: 1366px) {
      .pagination button {
          font-size: 11px;
          padding: 4px 10px;
    width: 75px;
    min-width: 75px;
    max-width: 75px;
      }}
  
      @media (max-width: 768px) {
        .pagination button {
            font-size: 12px;
            padding: 4px 10px;
        }}
  
    .pagination button:disabled {
    opacity: 1;
    cursor: not-allowed;
    }
  
    .pagination span {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    }

body.light .pagination span {
  color: rgba(0, 0, 0, 0.5)
}

    @media (max-width: 1366px) {
      .pagination span {
        font-size: 11px;
      }}

    @media (max-width: 768px) {
      .pagination span {
        font-size: 12px;
        font-weight: 300;
      }}


.main-content table th:first-child,
.main-content table td:first-child {
  position: -webkit-sticky !important;
  position: sticky !important;
  left: 0;
  z-index: 2;
}








.agent-card-interaction-status {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(6, 186, 126);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

    @media (max-width: 1366px) {
      .agent-card-interaction-status {
  bottom: 35px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

    @media (max-width: 768px) {
      .agent-card-interaction-status  {
  bottom: 40px;
  left: 50%;
   font-size: 10px;
  padding: 2px 6px;
      }}

.agent-list-interaction-status  {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgb(6, 186, 126);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

    @media (max-width: 1366px) {
      .agent-list-interaction-status {
          top: 10px;
  right: 10px;
   font-size: 10px;
  padding: 2px 6px;
      }}




 .explore-note {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  background: rgba(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 10px;
  padding: 12px 12px;
  width: 98%;
  margin: 0 auto;
  margin-bottom: 10px;
  display: none !important;
}

body.dark .explore-note {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.explore-note {
  font-size: 10px;
    line-height: 13px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
    width: 97.5%;
    padding: 10px 10px;
}}

@media (max-width: 768px) {
.explore-note {
  font-size: 11px;
  line-height: 15px;
  margin-left: 0px;
    margin-bottom: 10px;
    width: 97%;
    padding: 8px 8px;
}}

.explore-note i {
  margin-right: 5px;
  transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
.explore-note i {
 display: none;
}}
body:has(.user-edit-profile-modal-overlay) .user-header,
body:has(.user-edit-profile-modal-overlay) .admin-header,
body:has(.user-edit-profile-modal-overlay) .main-footer,
body:has(.user-edit-profile-modal-overlay) .global-footer {
  z-index: 1 !important;
}

body:has(.user-edit-profile-modal-overlay) .global-footer,
body:has(.user-edit-profile-modal-overlay) .ask-treo,
body:has(.user-edit-profile-modal-overlay) .agent-interaction-dock-button,
body:has(.user-edit-profile-modal-overlay) .float-chat-button {
  display: none;
}

.user-edit-profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
}

body.dark .user-edit-profile-modal-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.user-edit-profile-modal {
  background: linear-gradient(100deg, #9945FF, #14F195);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 25px 20px 20px 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 33%;
    max-height: 95vh;
    overflow-y: auto;
    z-index: 1;
    position: relative;
}

body.dark .user-edit-profile-modal {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.4)
}

body.light .user-edit-profile-modal {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
    .user-edit-profile-modal {
        padding: 15px;
    }}

    @media (max-width: 768px) {
        .user-edit-profile-modal {
            width: 95%;
            max-width: 95%;
            padding: 20px 15px 20px 15px;
        }}

.user-edit-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0px;
}

.user-edit-close-button {
  position: absolute;
  background: transparent;
  border: 0px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px;
  border-radius: 0px 0px 0px 50%;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 6px;
  right: 6px;
}

body.dark .user-edit-close-button {
    background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

body.light .user-edit-close-button {
    background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-edit-close-button {
      font-size: 11px;
    }}

    @media (max-width: 768px) {
    .user-edit-close-button {
      font-size: 13px;
    }}


.user-edit-current-profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1366px) {
    .user-edit-current-profile-pic {
        width: 125px;
        height: 125px;
        margin-top: 0px;
    }}

    @media (max-width: 768px) {
    .user-edit-current-profile-pic {
        width: 125px;
        height: 125px;
        margin-top: 0px;
    }}

.user-edit-current-profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-edit-profile-pic-loading {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.7);
}

.change-profile-picture {
    position: relative;
    display: inline-block;
    text-align: center;
    z-index: 999999;
      cursor: pointer !important;
}

.original-change-profile-picture {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
    cursor: pointer !important;
}

.custom-change-profile-picture,
 .remove-profile-picture {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 300;
  text-align: center;
  cursor: pointer !important;
}


body.dark .custom-change-profile-picture,
body.dark .remove-profile-picture  {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.light .custom-change-profile-picture,
body.light .remove-profile-picture  {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .custom-change-profile-picture,
    .remove-profile-picture {
        padding: 3px 15px;
        font-size: 10px;
        font-weight: 300;
        margin-top: 0px;
    }}

    @media (max-width: 768px) {
    .custom-change-profile-picture,
    .remove-profile-picture {
           margin-top: 10px !important;
        }}  

    .profile-picture-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
        .profile-picture-actions {
           margin-top: 0px !important;
           margin-bottom: 15px;
        }}   

.user-edit-pic-guide {
    position: relative;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-style: italic;
    display: none;
}

@media (max-width: 1366px) {
    .user-edit-pic-guide {
        font-size: 10px;
        margin-top: 7px;
        margin-bottom: 5px;
    }}

body.dark .user-edit-pic-guide {
    color: rgba(255, 255, 255, 0.9);
}

.user-edit-pic-guide-note {
    color: rgba(220, 50, 70, 1);
}

.user-profile-basic,
.user-profile-contact,
.user-profile-security {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  padding: 6px 0px 6px 0px;
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .user-profile-basic,
body.dark .user-profile-contact,
body.dark .user-profile-security {
color: rgba(255, 255, 255, 0.9);
}

body.light .user-profile-basic,
body.light .user-profile-contact,
body.light .user-profile-security {
  color: rgba(0, 0, 0, 0.9);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
.user-profile-basic,
.user-profile-contact,
.user-profile-security {
      font-size: 15px;
        padding: 3px 0px 3px 0px;
}}

.user-profile-basic {
    margin-bottom: 5px;
}

.user-profile-contact {
    margin-top: 10px;
}

.user-profile-security {
    margin-top: 25px;
}

@media (max-width: 768px) {
   .user-profile-security {
    margin-top: 15px;
}}

.user-edit-input-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.user-edit-input-group {
    flex: 1 1;
    margin-right: 10px;
    margin-top: 0px;
}

@media (max-width: 768px) {
    .user-edit-input-group {
        margin-right: 8px;
    }}

.user-edit-input-group input[type="text"] {
    width: 100%;
    height: 35px;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    padding: 2px 6px 6px 6px;
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    border-radius: 5px; 
    transition: all 0.2s ease;
    position: relative;
    z-index: 999;
}

body.dark .user-edit-input-group input[type="text"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1366px) {
    .user-edit-input-group input[type="text"] {
    font-size: 12px;
    }}

    @media (max-width: 768px) {
        .user-edit-input-group input[type="text"] {
        font-size: 13px !important;
        }}

.user-edit-input-group input[type="text"]::placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.3);
    opacity: 1;
}

@media (max-width: 1366px) {
    .user-edit-input-group input[type="text"]::placeholder {
    font-size: 12px !important;
    }}

@media (max-width: 768px) {
    .user-edit-input-group input[type="text"]::placeholder {
    font-size: 13px !important;
    }}

.user-edit-input-group input:focus {
    border-color: transparent;
  outline: none;
}

.user-edit-input-group:last-child {
    margin-right: 0;
}

.user-edit-input-group label {
    display: inline-block;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 3px;
}

body.light .user-edit-input-group label {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-edit-input-group label {
        font-size: 11px;
        line-height: 11px;
        margin-bottom: 3px;
    }}

    @media (max-width: 768px) {
        .user-edit-input-group label {
            font-size: 14px;
            line-height: 14px;
            margin-top: 5px;
            margin-bottom: 5px;
        }}

body.dark .user-edit-input-group label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}

.user-edit-character-counter {
    font-size: 11px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    text-align: right;
    margin-right: 3px;
    margin-top: 12px;
    float: right;
    display: none;
}

body.light .user-edit-character-counter {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .user-edit-character-counter {
        font-size: 9px;
        line-height: 11px;
        margin-top:7px;
    }}

body.dark .user-edit-character-counter {
    color: rgba(255, 255, 255, 0.9);
}

.user-edit-input-group input {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    max-width: 100%;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    padding: 8px;
    margin-bottom: 0px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 4px
}

@media (max-width: 1366px) {
    .user-edit-input-group input {
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        margin-bottom: 5px;
    }}

    @media (max-width: 768px) {
        .user-edit-input-group input {
        height: 33px;
        min-height: 33px;
        max-height: 33px;
            padding: 0px 5px!important;
            font-size: 13px !important;
        }}

.user-edit-textarea-container {
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
}

    @media (max-width: 768px) {
.user-edit-textarea-container {
    margin-top: 0px;
}}

.user-edit-textarea-container label {
    display: inline-block;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 3px;
}

@media (max-width: 1366px) {
    .user-edit-textarea-container label {
        font-size: 11px;
    }}

@media (max-width: 768px) {
    .user-edit-textarea-container label {
        font-size: 12px;
        margin-bottom: 0px;
    }}

body.dark .user-edit-textarea-container label {
    color: rgba(255, 255, 255, 0.9);
}

body.light .user-edit-textarea-container label {
    color: rgba(0, 0, 0, 0.9);
}

.user-edit-textarea-input {
    resize: none;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    width: 100%;
    max-width: 100%;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    padding: 2px 6px;
    margin-bottom: 0px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

body.dark .user-edit-textarea-input {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .user-edit-textarea-input {
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        padding: 2px 6px;
        margin-bottom: 5px;
        font-size: 11px;
    }}

    @media (max-width: 768px) {
        .user-edit-textarea-input {
            padding: 2px 6px;
            font-size: 13px;
            margin-top: 0px;
        }}

.user-edit-textarea-input:focus {
    transform: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.user-edit-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    margin-top: 35px;
}

   @media (max-width: 768px) {
.user-edit-form-actions {
    margin-top: 25px;
}}

.user-edit-save-button {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 5px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    width: 75px;
}

body.dark .user-edit-save-button {
    background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
}

body.light .user-edit-save-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-edit-save-button {
        font-size: 13px;
        padding: 7px 15px;
    }}


.user-edit-save-button:disabled {
    opacity: 1;
    cursor: not-allowed;
}


.user-edit-save-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.user-edit-username-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0px;
}

.user-edit-username-label-group {
    display: flex;
    align-items: center;
    
}

.user-edit-username-input-wrapper {
    position: relative;
    width: 100%;
}

.user-edit-username-checking {
    font-size: 12px;
    line-height: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 5px;
    margin-top: 3px;
    margin-bottom: -3px;
}

body.light .user-edit-username-checking {
    color: rgba(0, 0, 0, 0.9);
}

.user-edit-username-checking .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.user-edit-username-checking.current {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 15px;
}

body.light .user-edit-username-checking.current {
    color: rgba(0, 0, 0, 0.9);
}

.user-edit-username-checking.available {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 14px;
}

body.light .user-edit-username-checking.current {
    color: rgba(0, 0, 0, 0.9);
}

.user-edit-username-checking.unavailable {
    color: rgba(220, 50, 70, 1);
    font-size: 12px;
    line-height: 14px;
}

body.light .user-edit-username-checking.unavailable {
    color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
    .user-edit-username-checking,
    .user-edit-username-checking.current,
    .user-edit-username-checking.available,
    .user-edit-username-checking.unavailable {
        font-size: 10px;
        line-height: 11.5px;
        margin-left: 6px;
        margin-top: 0px;
    }}

    @media (max-width:768px) {
     .user-edit-username-checking,
    .user-edit-username-checking.current,
    .user-edit-username-checking.available,
    .user-edit-username-checking.unavailable {
        font-size: 11px;
        line-height: 11px;
        margin-left: 5px;
        margin-top: 4px;
    }}


.user-edit-confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.user-edit-confirm-content {
    background: #7375e1 ;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .user-edit-confirm-content {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-edit-confirm-content {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.user-edit-confirm-content p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

body.dark .user-edit-confirm-content p {
    color: rgba(255, 255, 255, 0.9);
}

body.light .user-edit-confirm-content p {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width:768px) {
    .user-edit-confirm-content p {
        font-size: 15px;
    }}

.user-edit-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.user-edit-confirm-button {
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width:768px) {
    .user-edit-confirm-button {
        font-size: 13px;
    }}

.user-edit-confirm-button.discard,
.user-edit-confirm-button.keep {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

body.dark .user-edit-confirm-button.discard,
body.dark .user-edit-confirm-button.keep {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .user-edit-confirm-button.discard,
body.light .user-edit-confirm-button.keep {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


.user-edit-error-message,
.user-edit-success-message {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 25%;
    max-width: 29.5%;
    padding: 20px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 300;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: #7375e1;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


body.dark .user-edit-error-message,
body.dark .user-edit-success-message {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-edit-error-message,
body.light .user-edit-success-message {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.user-edit-error-message,
.user-edit-success-message {
    font-size: 13px !important;
    line-height: 18px !important;
}}

@media (max-width: 768px) {
    .user-edit-error-message,
.user-edit-success-message {
    min-width: 90%;
    max-width: 90%;
    padding: 10px !important;
    line-height: 17px !important;
}}

.user-edit-message-ok-button {
    background-color: rgba(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0px;
}

body.dark .user-edit-message-ok-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-edit-message-ok-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .user-edit-message-ok-button {
        font-size: 13px !important;
    }}

    @media (max-width: 768px) {
        .user-edit-message-ok-button {
            margin-top: -5px;
            margin-bottom: 5px;
        }}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
}


        .user-profile-2fa-setup-modal {
            background: linear-gradient(100deg, #9945FF, #14F195);
            border: 0px solid rgba(255, 255, 255, 0.2); 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
            color: rgba(255, 255, 255, 0.9);
            padding: 25px 25px;
            border-radius: 8px;
            text-align: center;
            width: auto;
            min-width: 25%;
            max-width: 25%;
            white-space: pre-line !important;
            z-index: 9999;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

                
        body.dark .user-profile-2fa-setup-modal {
        background: rgba(0, 0, 0, 1);
        border: 1px solid rgba(255, 255, 255, 0.4)
        }

        body.light .user-profile-2fa-setup-modal {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: rgba(0, 0, 0, 0.9);
        }

        @media (max-width: 768px) {
             .user-profile-2fa-setup-modal {
                width: auto;
            min-width: 95%;
            max-width: 95%;
            padding: 15px 15px;
             }}

       .user-profile-2fa-close-button {
        position: absolute;
        background: transparent;
        border: 0px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        border: none;
        padding: 5px;
        border-radius: 0px 0px 0px 50%;
        cursor: pointer;
        margin-top: 0px;
        margin-bottom: 0px;
        top: 6px;
        right: 6px;
            }

        body.dark .user-profile-2fa-close-button {
            background: transparent;
        color: rgba(255, 255, 255, 0.6);
        }

        body.light .user-profile-2fa-close-button {
            background: transparent;
        color: rgba(0, 0, 0, 0.9);
        }

        @media (max-width: 1366px) {
        .user-profile-2fa-close-button {
        font-size: 11px;
        }}

        @media (max-width: 768px) {
        .user-profile-2fa-close-button {
        font-size: 13px;
        }}

        .user-profile-2fa-title {
            font-size: 26px;
            line-height: 26px;
            color: rgba(255, 255, 255, 0.9);
        }

        body.light .user-profile-2fa-title {
            color: rgba(0, 0, 0, 0.9)
        }

        .user-profile-2fa-desc {
            font-size: 14px;
            line-height: 18px;
            color: rgba(255, 255, 255, 0.9);
            margin: 0 auto;
            margin-top: 5px;
            width: 60%;
        }

        body.light .user-profile-2fa-desc {
            color: rgba(0, 0, 0, 0.9)
        }
        
        @media (max-width: 768px) {
        .user-profile-2fa-desc {
         width: 75%;
        }}

    .user-profile-2fa-instructions {
        font-size: 14px;
        line-height: 18px;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 auto;
        margin-top: 25px;
        width: 90%;

    }

    body.light .user-profile-2fa-instructions {
            color: rgba(0, 0, 0, 0.9)
        }
        

    .user-profile-2fa-qrcode-box {
        display: block;
        margin: 0 auto;
        width: 100%;
        margin-top: 15px;
    }

    .user-profile-2fa-qrcode {
        width: 36%;
        height: auto;
        border: 2px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        border-radius: 16px;
    }

    .user-profile-2fa-manual-box {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-top: 10px;
    }

    .user-profile-2fa-manual-desc {
        font-size: 14px;
        line-height: 18px;
        color: rgba(255, 255, 255, 0.9);
    }

        body.light .user-profile-2fa-manual-desc {
            color: rgba(0, 0, 0, 0.9)
        }

    .user-profile-2fa-manual-code {
        font-size: 14px;
        line-height: 18px;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    }

            body.light .user-profile-2fa-manual-code {
            color: rgba(0, 0, 0, 0.9);
            text-shadow: none;
            font-weight: 400;
        }

    .user-profile-2fa-verification {
        width: 100%;
        margin: 0 auto;
        display: block;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
    }

        .user-profile-2fa-verification-label {
        font-size: 15px;
        line-height: 15px;
        color: rgba(255, 255, 255, 1);
        margin-top: 15px;
    }

    body.light .user-profile-2fa-verification-label {
            color: rgba(0, 0, 0, 0.9)
        }

     .user-profile-2fa-verification-input {
        width: 50%;
        margin: 0 auto;
        margin-top: 5px;
        display: block;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        border-radius: 6px;
        height: 36px;
        border-color: transparent;
        outline: none;
        padding: 1px 6px;
        text-align: center;
        }

    body.light .user-profile-2fa-verification-input {
          border: 1px solid rgba(0, 0, 0, 0.2);
        }

    .user-profile-2fa-verification-input:focus {
        border-color: transparent;
        outline: none;
        }

.user-profile-options-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    vertical-align: middle;
    margin-top: 10px;
}

.user-profile-options-label {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .user-profile-options-label {
  color: rgba(0, 0, 0, 0.9);
}

.user-profile-options-toggle-box {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.user-profile-options-toggle input[type="radio"] {
  accent-color: #a372f7 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  margin-right: 3px !important;
}

body.dark .user-profile-options-toggle input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1) !important;
}

body.light .user-profile-options-toggle input[type="radio"] {
  accent-color: rgba(0, 0, 0, 1) !important;
}

.user-profile-options-toggle input[type="radio"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

.user-profile-options-toggle span {
  font-size: 14px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

body.light .user-profile-options-toggle span {
  color: rgba(0, 0, 0, 0.9);
}


.user-profile-2fa-action-box {
    width: 100%;
    margin: 0 auto;
}

.user-profile-2fa-save-button {
    background: rgb(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 6px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    width: auto;
    min-width: 125px;
    max-width: 250px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
}

body.dark .user-profile-2fa-save-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-profile-2fa-save-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.user-profile-2fa-save-button .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.user-profile-2fa-error-message,
.user-profile-2fa-success-message {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    min-width: 15%;
    max-width: 15%;
    background-color: #7375e1;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 300;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

body.dark .user-profile-2fa-error-message,
body.dark .user-profile-2fa-success-message {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-profile-2fa-error-message,
body.light .user-profile-2fa-success-message {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.user-profile-2fa-error-message,
.user-profile-2fa-success-message {
    font-size: 13px !important;
    line-height: 18px !important;
}}

@media (max-width: 768px) {
    .user-profile-2fa-error-message,
.user-profile-2fa-success-message {
    min-width: 75%;
    max-width: 75%;
    padding: 10px !important;
    line-height: 17px !important;
}}

@media (max-width: 768px) {
    .user-profile-2fa-success-message {
        font-size: 15px !important;
    }}


.user-profile-2fa-message-ok-button {
    background-color: rgba(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0px;
}

body.dark .user-profile-2fa-message-ok-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-profile-2fa-message-ok-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
    .user-profile-2fa-message-ok-button {
        font-size: 13px !important;
    }}

    @media (max-width: 768px) {
        .user-profile-2fa-message-ok-button {
            margin-top: -5px;
            margin-bottom: 5px;
        }}

.user-profile-2fa-backup-warning {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.user-profile-2fa-backup-warning i {
    display: block;
    color: rgba(240, 255, 0, 0.9);
    margin-bottom: 5px;
    font-size: 22px;
}

body.light .user-profile-2fa-backup-warning i {
    color: rgba(220, 50, 70, 1);
}


.user-profile-2fa-backup-warning span {
  font-size: 18px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
}

body.light .user-profile-2fa-backup-warning span {
    color: rgba(0, 0, 0, 0.9);
}

.user-profile-2fa-backup-intruction {
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

body.light .user-profile-2fa-backup-intruction {
    color: rgba(0, 0, 0, 0.9);
}

.user-profile-2fa-backup-code {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  width: 66%;   
  margin: 0 auto;
  margin-top: 25px;
}


.user-profile-2fa-backup-code-item {
  font-size: 14px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 10px;
  border-radius: 6px;
}

body.light .user-profile-2fa-backup-code-item {
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.user-profile-2fa-backup-actions-box {
    width: 100%;
    margin: 0 auto;
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.user-profile-2fa-backup-copy,
.user-profile-2fa-backup-done {
    background: rgb(145, 75, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    padding: 6px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background-color 0.2s;
    width: auto;
    min-width: 125px;
    max-width: 250px;
}

body.dark .user-profile-2fa-backup-copy,
body.dark .user-profile-2fa-backup-done {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .user-profile-2fa-backup-copy,
body.light .user-profile-2fa-backup-done {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.user-profile-2fa-lost-access,
.user-profile-2fa-back-to {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 300;
    color: rgba(225, 225, 225, 1);
    text-shadow: none;
    margin-top: 5px;
    margin-bottom: 0px;
    text-decoration: none;
    cursor: pointer;
}

body.light .user-profile-2fa-lost-access,
body.light .user-profile-2fa-back-to {
  color: rgba(0, 0, 0, 0.9);
}

.user-profile-2fa-lost-access span {
    text-decoration: underline;
}
.agents-section {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px 15px 15px 15px;
    height: auto;
    min-height: 86.5vh;
}

@media (max-width: 768px) {
  .agents-section {
    height: auto;
    min-height: auto;
  }}

body.dark .agents-section {
    background: rgba(0, 0, 0, 1);
}

body.light .agents-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.agents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.user-agents-note {
    font-size: 15px;
    line-height: 16px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
    margin: 10px 0px 20px 0px;
    font-style: normal;
}

body.light .user-agents-note {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
.user-agents-note {
    font-size: 12px;
    line-height: 15px;
    }}

@media (max-width: 768px) {
.user-agents-note {
    font-size: 13px;
    line-height: 16px;
    margin: 10px 0px 10px 0px;
    }}

.user-agents-note a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.user-agents-note i {
   margin-right: 3px;
}

@media (max-width: 768px) {
.user-agents-note i {
  display: none;
  width: 90%;
    }}
    

.agents-list .no-agents-submitted,
.agents-list .no-agent-found {
    margin-top: 0px;
    font-size: 18px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
}

@media (max-width: 1366px) {
.agents-list .no-agents-submitted,
.agents-list .no-agent-found {
        font-size: 13px;
    }}


.agents-section-title {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    flex-grow: 1;
    margin-right: 10px;
    height: 40px;
}

body.dark .agents-section-title {
    background: rgba(0, 0, 0, 1);
}


@media (max-width: 1366px) {
    .agents-section-title {
        font-size: 13px;
        padding: 6px 10px;
        height: 30px;
    }}

    @media (max-width: 768px) {
        .agents-section-title {
            font-size: 15px;
            height: 35px;
            padding: 8px 10px;
        }}


.dashboard-refresh-button {
    background: rgb(145, 75, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 6px !important;
        width: 33px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    body.dark .dashboard-refresh-button {
        background: rgba(0, 0, 0, 1);
    }

        body.light .dashboard-refresh-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 1366px) {
        .dashboard-refresh-button {
            width: 26px !important;
            height: 26px !important;
        }}

        @media (max-width: 768px) {
            .dashboard-refresh-button {
              width: 30px !important;
                height: 30px !important;
                border-radius: 6px !important;
            }}

    .dashboard-refresh-button i {
        color: rgba(255, 255, 255, 0.9);
        font-size: 11px;
    }

    body.light .dashboard-refresh-button i {
        color: rgba(0, 0, 0, 0.9);
    }

    @media (max-width: 1366px) {
        .dashboard-refresh-button i {
            font-size: 9px;
        }}

        @media (max-width: 768px) {
          .dashboard-refresh-button i {
              font-size: 10px;
          }}

.refreshing i {
    animation: spin 1s linear infinite;
    transform-origin: center;
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

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

.user-agents-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    gap: 15px;
    padding: 0px;
    padding-top: 0px;
    margin-top: 0px;
}

@media (max-width: 1366px) {
    .user-agents-grid {
    grid-template-columns: repeat(4, 1fr);
            padding-top: 0px;
            margin-top: 0px;
    }}

.user-agent-card {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 0;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    height: auto;
    min-height: 250px;
    max-height: 250px;
    display: flex;
    flex-direction: column;
}

body.light .user-agent-card {
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: none; 
}

@media (max-width: 1366px) {
    .user-agent-card {
        height: 200px;
        min-height: 200px;
    }}

.user-agent-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8px;
}

.user-agent-card:hover {
    transform: scale(1);
    cursor: pointer;
}

.user-agent-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.user-agent-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-agent-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(145, 75, 255,0.3);
}

body.dark .user-agent-image-placeholder {
  background: rgba(0, 0, 0, 1)
}

.user-agent-image-placeholder i {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.5);
}

.user-agent-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 15px;
    z-index: 1;
    transition: background-color 0.3s ease;
    justify-content: center;
    align-items: center;
}


.user-agent-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.user-agent-info:hover::before {
    background: rgba(145, 75, 255, 0.1);
}

body.dark .user-agent-info:hover::before {
   background: rgba(255, 255, 255, 0.1);
}

body.light .user-agent-info:hover::before {
     background: rgba(145, 75, 255, 0.1);
}

.user-agent-name {
    color:  rgba(255, 255, 255, 0.9);
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 3px 3px #333,
    0 2px 4px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
    padding: 0px 0px;
    z-index: 999999;
    position: absolute;
    top: 5%;
}

@media (max-width: 1366px) {
    .user-agent-name {
        font-size: 13px;
}}

@media (max-width: 768px) {
    .user-agent-name {
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 2px 4px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9);
    font-weight: 300;
}}


.user-agent-status-info {
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    
}

.user-agent-status {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 50%;
    min-width: 50%;
    max-width: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

body.dark .user-agent-status {
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 1366px) {
    .user-agent-status {
        font-size: 11px !important;
    }}

    @media (max-width: 768px) {
        .user-agent-status {
            font-size: 9px;
        }}
        
.status-pending, 
.status-approved,
.status-rejected,
.status-suspended,
.status-restored,
.status-pending-changes,
.status-changes-approved,
.status-changes-rejected {
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.status-pending {background: rgba(0, 0, 0, 0.5);}
.status-rejected {background: rgba(220, 50, 70, 0.7);}
.status-suspended {background: rgba(220, 50, 70, 0.7);}
.status-changes-rejected {background: rgba(220, 50, 70, 0.7);}
.status-approved {background: rgb(145, 75, 255, 0.7);}
.status-restored {background: rgba(0, 255, 163, 0.6);}
.status-changes-approved {background: rgb(145, 75, 255, 0.7);}
.status-pending-changes {background: rgba(0, 0, 0, 0.5);}
.status-archived {background: rgba(0, 0, 0, 0.5);}

body.dark .status-pending {background: rgba(0, 0, 0, 0.7);}
body.dark .status-rejected {background: rgba(0, 0, 0, 0.7);}
body.dark .status-suspended {background: rgba(0, 0, 0, 0.7);}
body.dark .status-changes-rejected {background: rgba(0, 0, 0, 0.7);}
body.dark .status-approved {background: rgba(0, 0, 0, 0.7);}
body.dark .status-restored {background: rgba(0, 0, 0, 0.7);}
body.dark .status-changes-approved {background: rgba(0, 0, 0, 0.7);}
body.dark .status-pending-changes {background: rgba(0, 0, 0, 0.7);}
body.dark .status-archived {background: rgba(0, 0, 0, 0.7);}

.user-agent-dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

@media (max-width: 1366px) {
  .user-agent-dates {
    gap: 2px;
  }}

  @media (max-width: 768px) {
  .user-agent-dates {
    gap: 2px;
  }}

.user-agent-submitted-date {
    font-size: 13px;
    font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
    text-align: center;
}

@media (max-width: 1366px) {
    .user-agent-submitted-date {
        font-size: 10px;
    }}

    @media (max-width: 768px) {
        .user-agent-submitted-date {
            font-size: 9px;
        }}

.user-agent-last-update {
    font-size: 13px;
    font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
    text-align: center;
}

@media (max-width: 1366px) {
    .user-agent-last-update {
        font-size: 10px;
    }}


    .agents-filter-wrapper {
        background: transparent;
        border: 0px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
        padding: 0px 0px 0px 0px;
        margin: 0px 0 5px 0;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
      }
  

   @media (max-width: 768px) {
  .agents-filter-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0px;
    }}

    .agents-filter-splitter {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }

       @media (max-width: 768px) {
    .agents-filter-splitter {
              display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 5px;
        flex-wrap: wrap;
    }}


        .agents-filter-builder__control,
        .agents-filter-status__control,
        .agents-filter-sort__control,
        .agents-filter-perpage__control {
            font-size: 14px !important;
            height: 33px !important;
            min-height: 33px !important;
            padding: 0px 3px !important;
            border-radius: 6px !important;
            background: rgb(145, 75, 255, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: rgba(255, 255, 255, 0.9) !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            z-index: 999 !important;
            vertical-align: middle;
          }
          
          body.dark .agents-filter-builder__control,
          body.dark .agents-filter-status__control,
          body.dark .agents-filter-sort__control,
          body.dark .agents-filter-perpage__control {
            background: rgba(0,0,0,0.1) !important;
          }

          body.light .agents-filter-builder__control,
          body.light .agents-filter-status__control,
          body.light .agents-filter-sort__control,
          body.light .agents-filter-perpage__control {
            background: rgba(255,255,255,1) !important;
          }

          @media (max-width: 1366px) {
            .agents-filter-builder__control,
            .agents-filter-status__control,
            .agents-filter-sort__control,
            .agents-filter-perpage__control {
              font-size: 12px !important;
              height: 26px !important;
              min-height: 26px !important;
            }}
        
          @media (max-width: 768px) {
            .agents-filter-builder__control,
            .agents-filter-status__control,
            .agents-filter-sort__control,
            .agents-filter-perpage__control {
              font-size: 12px !important;
              height: 30px !important;
              min-height: 30px !important;
            }}

          .agents-filter-builder__control {
            min-width: 216px !important;
            max-width: 216px !important;
          }

          
          @media (max-width: 1366px) {
            .agents-filter-builder__control {
              min-width: 185px !important;
              max-width: 185px !important;
            }}

          @media (max-width: 768px) {
            .agents-filter-builder__control {
              min-width: 150px !important;
              max-width: 150px !important;
            }}


          .agents-filter-status__control {
            min-width: 200px !important;
            max-width: 200px !important;
          }

                    @media (max-width: 1366px) {
            .agents-filter-status__control {
              min-width: 175px !important;
              max-width: 175px !important;
            }}


          @media (max-width: 768px) {
            .agents-filter-status__control {
              min-width: 150px !important;
              max-width: 150px !important;
            }}


          .agents-filter-sort__control {
            min-width: 160px !important;
            max-width: 160px !important;
          }

                    @media (max-width: 1366px) {
            .agents-filter-sort__control {
              min-width: 136px !important;
              max-width: 136px !important;
            }}


          @media (max-width: 768px) {
            .agents-filter-sort__control {
              min-width: 150px !important;
              max-width: 150px !important;
            }}

          .agents-filter-perpage__control {
            min-width: 75px !important;
            max-width: 75px !important;
          }
          
          @media (max-width: 768px) {
            .agents-filter-perpage__control {
              min-width: 63px !important;
              max-width: 63px !important;
            }}
          
          .agents-filter-builder__single-value,
          .agents-filter-status__single-value,
          .agents-filter-sort__single-value,
          .agents-filter-perpage__single-value,
          .agents-filter-builder__input,
          .agents-filter-status__input,
          .agents-filter-sort__input,
          .agents-filter-perpage__input,
          .agents-filter-builder__placeholder,
          .agents-filter-status__placeholder,
          .agents-filter-sort__placeholder,
          .agents-filter-perpage__placeholder {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 300 !important;
            font-size: 13px !important;
            padding: 0px 0px !important;
            margin-top: -2px;
          }


          body.light .agents-filter-builder__single-value,
          body.light .agents-filter-status__single-value,
          body.light .agents-filter-sort__single-value,
          body.light .agents-filter-perpage__single-value,
          body.light .agents-filter-builder__input,
          body.light .agents-filter-status__input,
          body.light .agents-filter-sort__input,
          body.light .agents-filter-perpage__input,
          body.light .agents-filter-builder__placeholder,
          body.light .agents-filter-status__placeholder,
          body.light .agents-filter-sort__placeholder,
          body.light .agents-filter-perpage__placeholder {
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 1366px) {
            .agents-filter-builder__single-value,
            .agents-filter-status__single-value,
            .agents-filter-sort__single-value,
            .agents-filter-perpage__single-value {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 300;
            font-size: 12px !important;
          }}
        
                    @media (max-width: 768px) {
            .agents-filter-builder__single-value,
            .agents-filter-status__single-value,
            .agents-filter-sort__single-value,
            .agents-filter-perpage__single-value {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 300;
            font-size: 13px !important;
          }}

          .agents-filter-builder__indicator,
          .agents-filter-status__indicator,
          .agents-filter-sort__indicator,
          .agents-filter-perpage__indicator {
            color: rgba(255, 255, 255, 0.9) !important;
            padding-left: 5px !important;
            margin-top: -3px !important;
          }

          @media (max-width: 1366px) {
          .agents-filter-builder__indicator,
            .agents-filter-status__indicator,
            .agents-filter-sort__indicator,
            .agents-filter-perpage__indicator {
            margin-top: -5px !important;
          }}

          @media (max-width: 768px) {
          .agents-filter-builder__indicator,
            .agents-filter-status__indicator,
            .agents-filter-sort__indicator,
            .agents-filter-perpage__indicator {
              padding-left: 2px !important;
              margin-top: -3px !important;
            }}

          .agents-filter-builder__dropdown-indicator,
          .agents-filter-status__dropdown-indicator,
          .agents-filter-sort__dropdown-indicator,
          .agents-filter-perpage__dropdown-indicator {
            color: rgba(255, 255, 255, 0.9) !important;
            padding-left: 5px !important;
          }

          body.light .agents-filter-builder__dropdown-indicator,
          body.light .agents-filter-status__dropdown-indicator,
          body.light .agents-filter-sort__dropdown-indicator,
          body.light .agents-filter-perpage__dropdown-indicator {
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 768px) {
          .agents-filter-builder__dropdown-indicator,
            .agents-filter-status__dropdown-indicator,
            .agents-filter-sort__dropdown-indicator,
            .agents-filter-perpage__dropdown-indicator {
              padding-left: 2px !important;
              padding-right: 2px !important;
            }}
  
            .agents-filter-builder__indicator-separator,
            .agents-filter-status__indicator-separator,
            .agents-filter-sort__indicator-separator,
            .agents-filter-perpage__indicator-separator {
            margin-top: 6px !important;
            height: 16px !important;
            }

          @media (max-width: 1366px) {
          .agents-filter-builder__indicator-separator,
            .agents-filter-status__indicator-separator,
            .agents-filter-sort__indicator-separator,
            .agents-filter-perpage__indicator-separator {
            margin-top: 4px !important;
            height: 16px !important;
          }}

          @media (max-width: 768px) {
          .agents-filter-builder__indicator-separator,
            .agents-filter-status__indicator-separator,
            .agents-filter-sort__indicator-separator,
            .agents-filter-perpage__indicator-separator {
            margin-top: 6px !important;
            height: 16px !important;
          }}

          .agents-filter-builder__value-container,
          .agents-filter-status__value-container,
          .agents-filter-sort__value-container,
          .agents-filter-perpage__value-container {
            padding: 0 6px !important;
            display: flex;
            align-items: center;
            z-index: 9999999999 !important;
          }
          
          @media (max-width: 1366px) {
          .agents-filter-builder__value-container,
            .agents-filter-status__value-container,
            .agents-filter-sort__value-container,
            .agents-filter-perpage__value-container {
            margin-top: -6px !important;
          }}

          .agents-filter-builder__menu,       
          .agents-filter-status__menu,
          .agents-filter-sort__menu,
          .agents-filter-perpage__menu {
            background: #6d7bde !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            border-radius: 8px !important;
            margin-top: 6px;
            z-index: 9999999999 !important;
            cursor: pointer !important;
            font-size: 14px !important;
          }

          body.dark .agents-filter-builder__menu,
          body.dark .agents-filter-status__menu,
          body.dark .agents-filter-sort__menu,
          body.dark .agents-filter-perpage__menu {
            background: rgba(0, 0, 0, 1) !important;
          }

          body.light .agents-filter-builder__menu,
          body.light .agents-filter-status__menu,
          body.light .agents-filter-sort__menu,
          body.light .agents-filter-perpage__menu {
            background: rgba(255,255,255,1) !important;
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 1366px) {
            .agents-filter-builder__menu,
            .agents-filter-status__menu,
            .agents-filter-sort__menu,
            .agents-filter-perpage__menu {
              margin-top: 5px !important;
            }}
  
         .agents-filter-builder__option,
          .agents-filter-status__option,
          .agents-filter-sort__option,
          .agents-filter-perpage__option {
            font-size: 14px !important;
            font-weight: 300;
            padding: 4px 10px 4px 10px!important;
            cursor: pointer !important;
            background: #6d7bde !important;
            color: rgba(255, 255, 255, 0.9) !important;
            z-index: 9999999999 !important;
          }

          body.light .agents-filter-builder__option,
          body.light .agents-filter-status__option,
          body.light .agents-filter-sort__option,
          body.light .agents-filter-perpage__option {
            color: rgba(0, 0, 0, 0.9) !important;
          }

          @media (max-width: 1366px) {
         .agents-filter-builder__option,
            .agents-filter-status__option,
            .agents-filter-sort__option,
            .agents-filter-perpage__option {
              font-size: 12px !important;
              padding: 3px 10px 3px 10px!important;
            }}

                      @media (max-width: 768px) {
         .agents-filter-builder__option,
            .agents-filter-status__option,
            .agents-filter-sort__option,
            .agents-filter-perpage__option {
              font-size: 13px !important;
              padding: 4px 10px 4px 10px!important;
            }}


         .agents-filter-builder__option:last-child,
          .agents-filter-status__option:last-child,
          .agents-filter-sort__option:last-child,
          .agents-filter-perpage__option:last-child {
            padding-bottom: 6px !important;
          }
        
          @media (max-width: 1366px) {
         .agents-filter-builder__option:last-child,
            .agents-filter-status__option:last-child,
            .agents-filter-sort__option:last-child,
            .agents-filter-perpage__option:last-child {
              padding-bottom: 2px !important;
            }}

                      @media (max-width: 768px) {
         .agents-filter-builder__option:last-child,
            .agents-filter-status__option:last-child,
            .agents-filter-sort__option:last-child,
            .agents-filter-perpage__option:last-child {
              padding-bottom: 6px !important;
            }}


              body.dark .agents-filter-builder__option,
              body.dark .agents-filter-status__option,
              body.dark .agents-filter-sort__option,
              body.dark .agents-filter-perpage__option {
            background: rgba(0, 0, 0, 1) !important;
          }
          
              body.light .agents-filter-builder__option,
              body.light .agents-filter-status__option,
              body.light .agents-filter-sort__option,
              body.light .agents-filter-perpage__option {
            background: rgba(255, 255, 255, 1) !important;
          }

.user-agent-bottom-content {
  width: 100%;
  position: absolute;
  bottom: 0%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;
}

.user-agent-actions-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px;
    gap: 0px;
    width: 100%;
    z-index: 2;
}

.user-agent-actions-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0px;
    gap: 0px;
    width: 100%;
    z-index: 2;
}

.user-agent-knowledge-button,
.user-agent-integration-button,
.user-agent-analytics-button,
.user-agent-settings-button,
.user-agent-edit-button {
    background: rgba(145, 75, 255, 0.6);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
} 

body.dark .user-agent-knowledge-button,
body.dark .user-agent-integration-button,
body.dark .user-agent-analytics-button,
body.dark .user-agent-settings-button,
body.dark .user-agent-edit-button {
  background: rgba(0, 0, 0, 0.6);
}

body.light .user-agent-knowledge-button,
body.light .user-agent-integration-button,
body.light .user-agent-analytics-button,
body.light .user-agent-settings-button,
body.light .user-agent-edit-button {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
.user-agent-knowledge-button,
.user-agent-integration-button,
.user-agent-analytics-button,
.user-agent-settings-button,
.user-agent-edit-button {
    padding: 3px 5px;
}}

.user-agent-knowledge-button i,
.user-agent-integration-button i,
.user-agent-analytics-button i,
.user-agent-settings-button i,
.user-agent-edit-button i {
margin-right: 3px;
font-size: 12px;
line-height: 13px;
}

@media (max-width: 768px) {
  .user-agent-knowledge-button i,
.user-agent-integration-button i,
.user-agent-analytics-button i,
.user-agent-settings-button i,
.user-agent-edit-button i {
display: none;
}}

    .user-agent-knowledge-button[disabled],
    .user-agent-integration-button[disabled] 
    .user-agent-analytics-button[disabled],
    .user-agent-settings-button[disabled],
    .user-agent-edit-button[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }

    
    .user-agent-knowledge-button:hover,
    .user-agent-integration-button:hover,
    .user-agent-analytics-button:hover,
    .user-agent-settings-button:hover,
    .user-agent-edit-button:hover {
      background: rgba(145, 75, 255, 0.9);
        color: rgba(255, 255, 255, 1);
        font-weight: 300;
    }

     body.dark .user-agent-knowledge-button:hover,
    body.dark .user-agent-integration-button:hover,
    body.dark .user-agent-analytics-button:hover,
    body.dark .user-agent-settings-button:hover,
    body.dark .user-agent-edit-button:hover {
      background: rgba(255, 255, 255, 0.6);
        color: rgba(0, 0, 0, 0.7);
        font-weight: 300;
    }

     body.light .user-agent-knowledge-button:hover,
    body.light .user-agent-integration-button:hover,
    body.light .user-agent-analytics-button:hover,
    body.light .user-agent-settings-button:hover,
    body.light .user-agent-edit-button:hover {
      background: rgba(255, 255, 255, 0.9);
        color: rgba(0, 0, 0, 1);
        font-weight: 300;
    }

  .user-agent-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0px;
    gap: 0px;
    width: 100%;
}

.user-agent-stats-item {
    background: rgba(145, 75, 255, 0.6);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .user-agent-stats-item {
  background: rgba(0, 0, 0, 0.6);
}

body.light .user-agent-stats-item {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .user-agent-stats-item {
    font-size: 11px;
        padding: 3px 5px;
  }}

.user-agent-stats-item i {
  margin-right: 5px
}

body:has(.confirm-agent-archive-overlay) .user-header,
body:has(.confirm-agent-archive-overlay) .main-footer,
body:has(.confirm-agent-archive-overlay) .global-footer {
    z-index: 1;
}
  
      .confirm-agent-archive-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
          background: rgba(0, 0, 0, 0.1);
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999999999;
      }
      
      body.dark .confirm-agent-archive-overlay {
  background: rgba(0, 0, 0, 0.1);
}

      .confirm-agent-archive-modal {
        background: #7375e1; 
        padding: 20px;
        border-radius: 10px;
        width: 400px;
        max-width: 90%;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
      }

      body.dark .confirm-agent-archive-modal {
        background: rgba(0, 0, 0, 1);
        border: 1px solid rgba(255, 255, 255, 0.2); 
      }
      
      .confirm-agent-archive-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 20px;
        margin-bottom: 20px;
      }
      
      .confirm-agent-archive-modal-button {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
      }
      
      .confirm-agent-archive-button,
      .confirm-agent-archive-cancel-button {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        min-width: 100px;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }
      
      .confirm-agent-archive-button,
      .confirm-agent-archive-cancel-button {
        background-color: rgba(145, 75, 255,0.3);
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
      }

      body.dark .confirm-agent-archive-button,
      body.dark .confirm-agent-archive-cancel-button {
        background: rgba(0, 0, 0, 1);
    }

      .confirm-agent-archive-success-message {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #7375e1;
        border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
        color: rgba(255, 255, 255, 0.9);
        padding: 12px 20px;
        border-radius: 6px;
        font-size: 15px;
        z-index: 999;
        animation: fadeOut 3s forwards;
      }
      
      @keyframes fadeOut {
        0% { opacity: 1; }
        70% { opacity: 1; }
        100% { opacity: 0; }
      }
    


.user-agent-card.non-clickable {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.user-agent-card.non-clickable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
    pointer-events: none;
}

@media (max-width: 768px) {
  .agents-section {
    width: 100%;
    order: 2;
    padding: 0px 10px 10px 10px;
    margin: 0;
    margin-top: 10px;
  }

  .agents-header {
    margin-bottom: 15px;
  }

  .user-agents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
    margin-top: 15px;
  }

  .user-agent-card {
    height: 175px;
    min-height: 175px;
  }

  .user-agent-info {
    padding: 12px;
  }

  .user-agent-name {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .user-agent-stats {
    font-size: 12px;
  }

  .user-agent-status {
    font-size: 10px;
    padding: 2px 6px;
  }

  .user-agent-submitted-date,
  .user-agent-last-update {
    font-size: 9px;
  }

  .status-pending, 
  .status-approved,
  .status-rejected,
  .status-suspended,
  .status-restored,
  .status-pending-changes,
  .status-changes-approved,
  .status-changes-rejected {
    font-size: 11px;
    padding: 2px 6px;
  }

  .user-agent-dates {
    gap: 2px;
  }

}

.user-agents-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 0;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-right: 0px;
  padding: 0px 0px;
}

.user-agents-pagination button {
  font-size: 13px;
  padding: 5px 20px;
  border: none;
  border-radius: 4px;
  background: rgb(145, 75, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

@media (max-width: 1366px) {
  .user-agents-pagination button {
  font-size: 12px;
}}

@media (max-width: 768px) {
  .user-agents-pagination button {
  font-size: 12x;
}}

body.dark .user-agents-pagination button {
  background: rgba(0,0,0,0.1);
}

body.light .user-agents-pagination button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


.user-agents-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.user-agents-pagination button:hover:not(:disabled) {
  background: rgba(145, 75, 255, 0.7);
}

body.dark .user-agents-pagination button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 1);
}

.user-agents-pagination span {
font-size: 13px;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}

body.light .user-agents-pagination span {
  color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1366px) {
  .user-agents-pagination span {
  font-size: 11px;
}}

@media (max-width: 768px) {
  .user-agents-pagination span {
  font-size: 12px;
}}


.agents-name-filter {
  min-height: 40px;
  width: 290px;
  max-width: 290px;
  }

@media (max-width: 1366px) {
.agents-name-filter{
  height: 26px;
        max-width: 200px;
       }}

       @media (max-width: 768px) {
.agents-name-filter{
margin-top: 0px;
width: 100%;
max-width: 100%;
       }}


.agents-name-filter-input {
  width: 100%;
  height: 33px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  padding: 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
  }

  body.dark .agents-name-filter-input {
  background: rgba(0,0,0,1);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  }

  @media (max-width: 1366px) {
    .agents-name-filter-input {
      height: 26px;
    font-size: 11px;
    }
  }

  @media (max-width: 768px) {
    .agents-name-filter-input {
          height: 32px;
    font-size: 12px;
        }}


 .agents-name-filter-input:focus {
  background: rgba(255, 255, 255, 1);
  outline: none;
  }



.agents-name-filter-input::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  }

  body.dark .agents-name-filter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1366px) {
   .agents-name-filter-input::placeholder {
    font-size: 12px;
  }}














.watchlist-section {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 15px 15px 15px 15px;
  margin-top: 10px;
    height: auto;
    min-height: 86.5vh;
}

@media (max-width: 768px) {
  .watchlist-section {
    height: auto;
    min-height: auto;
  }}

body.dark .watchlist-section {
  background: rgba(0, 0, 0, 1);
}

body.light .watchlist-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .watchlist-section {
    height: auto; 
    max-height: auto;
    min-height: auto;
    padding: 10px 10px 10px 10px;
  margin-top: 10px;
  }}


.watchlist-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px;
}


.watchlist-empty {
  margin-top: 5px;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

body.light .watchlist-empty {
   color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .watchlist-grid .watchlist-empty {
      font-size: 11px;
      margin-left: 0px;
  }}

  @media (max-width: 768px) {
    .watchlist-grid .watchlist-empty {
      font-size: 13px;
      margin-left: 0px;
      margin-top: 0px;
    }}


.watchlist-title {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-transform: none;
  text-align: center;
  flex-grow: 1;
  margin-right: 10px;
  height: 0px;
}

body.dark .watchlist-title {
  background: rgba(0, 0, 0, 1);
}


@media (max-width: 1366px) {
  .watchlist-title {
    font-size: 13px;
    padding: 6px 10px;
    height: 30px;
  }}

  @media (max-width: 768px) {
    .watchlist-title {
      font-size: 15px;
      height: 35px;
      padding: 8px 10px;
    }}


.watchlist-refresh-button {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 6px !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.dark .watchlist-refresh-button {
  background: rgba(0, 0, 0, 1);
}

body.light .watchlist-refresh-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .watchlist-refresh-button {
      width: 26px;
      height: 26px;
  }}

  @media (max-width: 768px) {
    .watchlist-refresh-button {
        width: 30px;
        height: 30px;
    }}

.watchlist-refresh-button i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

body.light .watchlist-refresh-button i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .watchlist-refresh-button i {
      font-size: 13px;
  }}


.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  padding: 0px;
  padding-top: 0px;
  margin-top: 0px;
}

@media (max-width: 1366px) {
  .watchlist-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }}


  .watchlist-filter-and-button-wrapper {
    background: transparent;
    border: 0px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    padding: 0px 0px 0px 0px;
    margin: 0 0 0px 0;
    border-radius: 8px;
  }
  
  body.dark .watchlist-filter-and-button-wrapper {
    background: rgba(0, 0, 0, 1);
  }

  .watchlist-filter-and-button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    cursor: pointer !important; 
  }
  
  .watchlist-filter-perpage__control {
    font-size: 14px !important;
    min-height: 40px !important;
    padding: 0px 3px !important;
    border-radius: 6px !important;
    background: rgb(145, 75, 255, 0.6)!important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    min-width: 75px!important;
    max-width: 75px!important;
    cursor: pointer !important; 
  }
  
  body.dark .watchlist-filter-perpage__control {
    background: rgba(0, 0, 0, 1) !important;
  }
  

  @media (max-width: 1366px) {
    .watchlist-filter-perpage__control {
      font-size: 11px !important;
      height: 26px !important;
      min-height: 26px !important;
    }}

.watchlist-filter-perpage__single-value,
.watchlist-filter-perpage__input,
.watchlist-filter-perpage__placeholder
 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 300;
}


.watchlist-filter-perpage__indicator,
.watchlist-filter-perpage__dropdown-indicator {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-left: 5px !important;
}

@media (max-width: 1366px) {
  .watchlist-filter-perpage__indicator {
  margin-top: -5px !important;
}}

@media (max-width: 1366px) {
  .watchlist-filter-perpage__indicator-separator {
  margin-top: 4px !important;
  height: 16px !important;
}}

@media (max-width: 1366px) {
  .watchlist-filter-perpage__dropdown-indicator {
  margin-top: -5px !important;
}}

.watchlist-filter-perpage__value-container {
  padding: 0 6px !important;
  display: flex;
  align-items: center;
}

@media (max-width: 1366px) {
  .watchlist-filter-perpage__value-container {
  margin-top: -6px !important;
}}

.watchlist-filter-perpage__menu {
  background: #7580d2 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 6px;
  z-index: 9999999999 !important;
  cursor: pointer !important;
}

body.dark .watchlist-filter-perpage__menu {
  background: rgba(0, 0, 0, 1) !important;
}

@media (max-width: 1366px) {
.watchlist-filter-perpage__menu {
  margin-top: 5px !important;
}}

.watchlist-filter-perpage__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #7580d2 !important;
}

@media (max-width: 1366px) {
  .watchlist-filter-perpage__option {
    font-size: 11px !important;
    padding: 3px 10px 3px 10px!important;
  }}

.watchlist-filter-perpage__option:last-child {
  padding-bottom: 10px !important;
}


@media (max-width: 1366px) {
  .watchlist-filter-perpage__option:last-child {
    padding-bottom: 2px !important;
  }}

body.dark .watchlist-filter-perpage__option {
  background: rgba(0, 0, 0, 1) !important;
}



.analytics-date-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  margin-left: 12px;
}

.analytics-date-filters input[type="date"] {
  padding: 4px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #ccc;
}


  .watchlist-refresh-button,
  .watchlist-manage-button {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  body.dark .watchlist-refresh-button,
  body.dark .watchlist-manage-button {
    background: rgba(0, 0, 0, 1);
  }
  
    body.light .watchlist-refresh-button,
  body.light .watchlist-manage-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }
  


  @media (max-width: 1366px) {
    .watchlist-refresh-button,
    .watchlist-manage-button {
      width: 26px;
      height: 26px;
    }}

      @media (max-width: 1366px) {
    .watchlist-refresh-button,
    .watchlist-manage-button {
      width: 30px;
      height: 30px;
    }}

      .watchlist-manage-button i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
  }

  body.light .watchlist-manage-button i {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .watchlist-manage-button i {
      font-size: 9px;
    }}

    @media (max-width: 768px) {
      .watchlist-manage-button i {
        font-size: 10px;
      }}


  .watchlist-refresh-button i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
  }
  
    body.light .watchlist-refresh-button i {
      color: rgba(0, 0, 0, 0.9);
    }

  @media (max-width: 1366px) {
    .watchlist-refresh-button i {
      font-size: 9px;
    }}

    @media (max-width: 768px) {
      .watchlist-refresh-button i {
        font-size: 10px;
      }}


  .watchlist-manage-button.watchlist-manage-active {
  background: rgba(220, 50, 70, 0.8);
  color: rgba(255, 255, 255, 0.9) !important;
}


body.dark .watchlist-manage-button.watchlist-manage-active {
  background: rgba(220, 50, 70, 0.7);
}

body.light .watchlist-manage-button.watchlist-manage-active {
  background: rgba(220, 50, 70, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

  .watchlist-main-button {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

    @media (max-width:1366px) {
  .watchlist-main-button {
  gap: 8px;
  }}


    @media (max-width: 768px) {
  .watchlist-main-button {
  gap: 8px;
  }}

.watchlist-actions {
  display: flex;
  gap: 6px;
  margin-top: 0px;
  flex-wrap: wrap;
}

  @media (max-width: 768px) {
  .watchlist-actions {
  gap: 6px;
  }}

.watchlist-actions button {
background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
  min-width: 33px;
  height: 33px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 300;
    vertical-align: middle;
}

body.dark .watchlist-actions button {
  background: rgba(0, 0, 0, 1);
}

body.light .watchlist-actions button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width:1366px) {
  .watchlist-actions button {
      padding: 3px 10px;
      font-size: 11px;
  min-width: 26px;
  height: 26px;
      padding: 6px 10px;
  }}

  @media (max-width:768px) {
  .watchlist-actions button {
  min-width: 30px;
  height: 30px;
      padding: 5px 7px;
      font-size: 11px;
  }}

.watchlist-checkbox {
  -webkit-appearance: none;
          appearance: none;
    width: 15px;
    height: 15px;
  background-color: rgba(255,255,255,0.06);
  border: 2px solid rgba(255, 255, 255, 0.9); 
  box-shadow: none; 
    border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 7;
}

    body.dark .watchlist-checkbox {
  background: rgba(255, 255, 255, 1);
border: 2px solid rgba(0, 0, 0, 0.9);
  }


  body.light .watchlist-checkbox {
  background: rgba(255, 255, 255, 1);
border: 2px solid rgba(0, 0, 0, 0.9);
  }


@media (max-width:768px) {
  .watchlist-checkbox {
    top: 10px;
    left: 10px;
  }}

  .watchlist-checkbox:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }
  
  body.dark .watchlist-checkbox:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }

    body.light .watchlist-checkbox:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  }


.watchlist-card {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: none; 
    transition: transform 0.3s ease;
    border-radius: 8px;
    padding: 0px;
    color: white;
    overflow: hidden;
    height: 250px;
    min-height: 250px;
    cursor: pointer;
    z-index: 1;
}

body.light .watchlist-card {
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: none; 
}


@media (max-width: 1366px) {
  .watchlist-card {
      height: 150px;
      min-height: 150px;
  }}

.watchlist-card:hover {
    transform: scale(1.01);
    cursor: pointer;
}


.watchlist-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    z-index: 2;
}


.watchlist-card:hover::before {
  background: rgba(145, 75, 255, 0.1);
}

body.dark .watchlist-card:hover::before {
   background: rgba(255, 255, 255, 0.1);
}

body.light .watchlist-card:hover::before {
  background: rgba(145, 75, 255, 0.1);
}

  .watchlist-card-clickable {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
  }

.watchlist-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.watchlist-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watchlist-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.watchlist-placeholder i {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.5);
}

.watchlist-card-info-box {
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.watchlist-card-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
    z-index: 999;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.watchlist-card-info::before {
     content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    z-index: 3;
}

.watchlist-card:hover .watchlist-card-info::before {
    background: rgba(145, 75, 255, 0.1);
    width: 100%;
    height: 100%;
}


.watchlist-card-name {
    color:  rgba(255, 255, 255, 1);
    text-shadow:
    0 1px 1px #333,
    0 2px 2px #333,
    0 3px 3px #333,
    0 2px 4px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    width: 90%;
    z-index: 999;
}

@media (max-width: 1366px) {
  .watchlist-card-name {
        font-size: 12px;
  }}

.watchlist-card-specialization {
    color:  rgba(255, 255, 255, 1);
    text-shadow: 
    0 1px 1px #111,
    0 2px 2px #111,
    0 3px 3px #111;
    font-size: 14px;
    line-height: 18px;
    font-weight: 300;
    text-align: center;
    width: 90%;
    font-style: normal;
    z-index: 999;
}

@media (max-width: 1366px) {
  .watchlist-card-specialization {
        font-size: 10px;
        line-height: 13px;
  }}


.watchlist-card-pricing {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}

@media (max-width: 1366px) {
  .watchlist-card-pricing {
    font-size: 12px;
  }}

.watchlist-card:hover .watchlist-card-name,
.watchlist-card:hover .watchlist-card-specialization,
.watchlist-card:hover .watchlist-card-pricing {
    color: rgba(255, 255, 255, 1);
}

.watchlist-card.non-clickable {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.watchlist-card.non-clickable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
    pointer-events: none;
}



.watchlist-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.watchlist-pagination button {
  font-size: 13px;
  padding: 5px 20px;
  border: none;
  border-radius: 4px;
  background: rgba(111, 66, 193, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  min-width: 100px;
}

body.dark .watchlist-pagination button {
  background: rgba(0, 0, 0, 0.2);
}

body.light .watchlist-pagination button {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.watchlist-pagination button {
  font-size: 12px;
  }}

.watchlist-pagination button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.watchlist-pagination span {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1366px) {
.watchlist-pagination span {
  font-size: 11px;
  }}

.watchlist-remove-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.watchlist-card:hover .watchlist-remove-button {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}

.watchlist-remove-button i {
  font-size: 13px;
}




@media (max-width: 768px) {
  .watchlist-section {
    width: 100%;
    order: 2;
    padding: 10px;
    margin: 0;
    margin-top: 10px;
  }

  .watchlist-header {
    margin-bottom: 15px;
  }

  .watchlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
    margin-top: 0px;
  }

  .watchlist-card {
    height: 175px;
    min-height: 175px;
  }

  .watchlist-card-info {
    padding: 12px;
  }

  .watchlist-card-name {
    font-size: 14px;
    margin-bottom: 0px;
  }

}





.watchlist-agent-stats {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  width: 100%;
}

    @media (max-width: 1366px) {
  .watchlist-agent-stats {
  bottom: 4%;
  gap: 6px;
  font-size:9px;
}}

        @media (max-width: 768px) {
  .watchlist-agent-stats {
  bottom: 6%;
  gap: 4px;
  font-size: 9px;
    }}

.watchlist-stats-item {
  background: rgba(145, 75, 255,0.7);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 6px 6px;
  border-radius: 4px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}

body.dark .watchlist-stats-item {
  background: rgba(0, 0, 0, 0.7);
}

    @media (max-width: 1366px) {
  .watchlist-stats-item {
  padding: 3px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

    @media (max-width: 768px) {
  .watchlist-stats-item {
  padding: 4px 6px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  width: auto;
  min-width: 29%;
  max-width: 100%;
  text-align: center;
}}

.watchlist-stats-item i {
  margin-right: 4px
}
.dashboard-login-note {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-size: 35px;
    text-align: center;
    color: rgba(225, 255, 255, 0.9);
    text-shadow: none;
    width: 100%;
    max-width: 100%;
}

.dashboard-login-note p {
    font-size: 36px;
}



.defaultpage:has(.user-dashboard) .sidebar {
    display: none;
}

.defaultpage:has(.user-dashboard) .main-content {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

.user-dashboard {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0px 20px 0px;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .user-dashboard {
        padding: 10px 0px 30px 0px;
    }}

.dashboard-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 20px;
    gap: 20px;
    align-items: stretch;
}


@media (max-width: 1366px) {
    .dashboard-content {
        grid-template-columns: 250px 1fr;
    }}

.dashboard-right-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dashboard-tabs {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    overflow: hidden;
}

body.dark .dashboard-tabs {
    background: rgba(0, 0, 0, 1);
}

body.light .dashboard-tabs {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
    .dashboard-tabs {
        margin-bottom: 10px;
        gap: 8px;
    }}

@media (max-width: 768px) {
    .dashboard-tabs {
        margin-bottom: 10px;
        gap: 6px;
        padding: 8px 6px;
    }}


.dashboard-tab {
    background: transparent;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    padding: 6px 10px 8px 10px;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    text-transform: none;
    text-align: center;
    flex-grow: 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .dashboard-tab {
    background: rgba(0, 0, 0, 1);
}

body.light .dashboard-tab {
  background: rgba(255,255,255,1);
  border: none;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1366px) {
    .dashboard-tab {
        font-size: 12px;
        padding: 3px 10px;
    }}

    @media (max-width: 768px) {
    .dashboard-tab {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0px;
    padding: 0px;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    flex-grow: 1;
    cursor: pointer;
        }}


.dashboard-tab.active {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 0px 1px rgba(255,255,255, 1)
}

body.light .dashboard-tab.active {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 0px 0px 1px rgba(0,0,0, 1)
}


 @media (max-width: 768px) {
.dashboard-tab.active {
   background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 5px 0px;
    text-shadow: none;
 }}

.dashboard-tab i {
    margin-right: 5px;
    vertical-align: middle;
    align-items: center;
    margin-bottom: -2px;
}

    @media (max-width: 768px) {
.dashboard-tab i {
    display: none;
}}

.profile-section {
    background: transparent;
    border: 0px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.dark .profile-section {
    background: rgba(0, 0, 0, 1);
}

.profile-details {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 0px;
        position: relative;
}

body.dark .profile-details {
    background: rgba(0, 0, 0, 1);
}

body.light .profile-details {
    background: rgba(255,255,255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
.profile-details {
   padding: 10px;
    }}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}


@media (max-width: 1366px) {
    .profile-header {
        margin-bottom: 15px;
    }}

.profile-section-title {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

body.light .profile-section-title {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .profile-section-title {
        font-size: 16px;
        padding: 6px 10px;
    }}

    @media (max-width: 768px) {
        .profile-section-title {
            font-size: 22px;
        }}


.edit-profile-button {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
}

body.light .edit-profile-button {
    color: rgba(0, 0, 0, 0.9)
}

.trusty-refresh-button {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    padding: 7px 10px;
    text-align: center;
    width: 100%;
    margin-top: 10px;
}

body.dark .trusty-refresh-button {
    background: rgba(0, 0, 0, 1);
}

.trusty-refresh-button-style {
    font-family: 'Iceland', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 1366px) {
.trusty-refresh-button-style {
    font-size: 18px;
    }}

@media (max-width: 768px) {
.trusty-refresh-button-style {
    font-size: 18px;
    }}

.trusty-refresh-button i {
    margin-right: 3px;
}

.profile-picture {
    width: auto;
    max-width: 75%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1366px) {
    .profile-picture {
        width: auto;
        max-width: 100%;
        height: auto;
    }}

    @media (max-width: 768px) {
        .profile-picture {
            max-width: 50%;
            height: auto;
        }}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-info {
    margin-bottom: 0px;
}

.profile-info-item {
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 8px 0px 8px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .profile-info-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .profile-info-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.9);
}

.profile-info-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

body.light .profile-info-item a {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: underline;
}

.profile-info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 1366px) {
    .profile-info-item {
        margin: 3px 0px 3px 0px;
        padding: 6px 0px 8px 0px;
    }}

.user-joined,
.register-method,
.user-profile-url,
.user-name,
.user-username,
.user-bio,
.user-email,
.user-twitter,
.user-telegram,
.user-discord,
.user-youtube,
.user-linkedin,
.user-github,
.user-website {
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    margin-right: 15px;
    vertical-align: middle;
}



@media (max-width: 1366px) {
    .user-joined,
    .register-method,
    .user-profile-url,
    .user-name,
    .user-username,
    .user-bio,
    .user-email,
    .user-twitter,
    .user-telegram,
    .user-discord,
    .user-youtube,
    .user-linkedin,
    .user-github,
    .user-website {
        font-size: 12px;
        line-height: 12px;
    }}

    @media (max-width: 768px) {
        .user-joined,
        .register-method,
        .user-profile-url,
        .user-name,
        .user-username,
        .user-bio,
        .user-email,
        .user-twitter,
        .user-telegram,
        .user-discord,
        .user-youtube,
        .user-linkedin,
        .user-github,
        .user-website {
            font-size: 14px;
            line-height: 14px;
        }}
    

.user-joined-value,
.register-method-value,
.user-name-value,
.user-username-value,
.user-bio-value,
.user-email-value,
.user-twitter-value,
.user-telegram-value,
.user-discord-value,
.user-youtube-value,
.user-linkedin-value,
.user-github-value,
.user-website-value {
    font-size: 14px;
    line-height: 14px;
    text-align: right;
    word-break: break-all;
    vertical-align: middle;
}

.user-bio-value {
    font-size: 14px;
    line-height: 18px;
    white-space: pre-wrap;
}

@media (max-width: 1366px) {
    .user-joined-value,
    .register-method-value,
    .user-name-value,
    .user-username-value,
    .user-bio-value,
    .user-email-value,
    .user-twitter-value,
    .user-telegram-value,
    .user-discord-value,
    .user-youtube-value,
    .user-linkedin-value,
    .user-github-value,
    .user-website-value {
        font-size: 12px;
        line-height: 12px;
    }}

    @media (max-width: 768px) {
        .user-joined-value,
        .register-method-value,
        .user-name-value,
        .user-username-value,
        .user-bio-value,
        .user-email-value,
        .user-twitter-value,
        .user-telegram-value,
        .user-discord-value,
        .user-youtube-value,
        .user-linkedin-value,
        .user-github-value,
        .user-website-value {
            font-size: 14px;
            line-height: 14px;
        }}


.user-joined-value {
    font-size: 13px;
    line-height: 13px;
}

@media (max-width: 1366px) {
.user-joined-value {
    font-size: 10px;
    line-height: 10px;
}}


@media (max-width: 768px) {
.user-joined-value {
    font-size: 13px;
    line-height: 13px;
}}




.profile-info-item:has(.user-bio),
.profile-info-item:has(.user-profile-url) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
}

.profile-info-item:has(.user-bio) .user-bio-value,
.profile-info-item:has(.user-profile-url) .user-profile-url-value {
    text-align: left;
    width: 100%;
    margin-bottom: 0px;
}

@media (max-width: 1366px) {
    .profile-info-item:has(.user-bio) .user-bio-value,
    .profile-info-item:has(.user-profile-url) .user-profile-url-value {
        font-size: 12px;
        line-height: 15px;
    }}

    @media (max-width: 768px) {
        .profile-info-item:has(.user-bio) .user-bio-value,
        .profile-info-item:has(.user-profile-url) .user-profile-url-value {
            font-size: 13px;
            line-height: 18px;
        }}

.not-set-link {
  color: rgba(225, 255, 255, 0.9);
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}

@media (max-width: 1366px) {
.not-set-link {
  font-size: 12px;
}}

@media (max-width: 768px) {
.not-set-link {
  font-size: 13px;
}}

.not-set-link i {
    color: rgba(225, 255, 255, 0.8);
    font-size: 12px;
    line-height: 13px;
}

.copy-public-profile-url {
    margin-left: 6px;
    background: transparent;
    color: rgba(225, 255, 255, 0.8);
    border: none;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
}

.connected-accounts-box {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

body.dark .connected-accounts-box {
    background: rgba(0, 0, 0, 1);
}

body.light .connected-accounts-box {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
.connected-accounts-box {
        padding: 10px;
    }}

.connected-accounts {
    margin: 0 auto;
    margin-top: 0px;
    padding: 0;
    width: 100%;
}

.connected-accounts-title {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    text-align: center;
    flex-grow: 1;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.light .connected-accounts-title {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .connected-accounts-title {
        font-size: 13px;
    }}

    @media (max-width: 768px) {
        .connected-accounts-title {
            font-size: 16px;
        }}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-item {
    background: rgb(145, 75, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 10px;
}

body.dark .account-item {
    background: rgba(0, 0, 0, 1);
}

body.light .account-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
    .account-item {
    padding: 10px;
}}

.wallet-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-info-item:last-child {
    border-bottom: none;
}

body.dark .wallet-info-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.light .wallet-info-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.wallet-connected {
    font-size: 14px;
}

.wallet-name,
.wallet-address {
    font-size: 15px;
}

@media (max-width: 1366px) {
.wallet-name,
.wallet-address {
    font-size: 12px;
}

.wallet-connected {
    font-size: 11px;
}}


@media (max-width: 768px) {
    .wallet-name,
    .wallet-address {
        font-size: 14px;
    }
     .wallet-connected {
        font-size: 13px;
    }}


.solscan-logo {
    width: auto;
    height: 10px;
    cursor: pointer;
}

@media (max-width: 1366px) {
.solscan-logo {
    width: auto;
    height: 9px;
}}

@media (max-width: 768px) {
.solscan-logo {
    width: auto;
    height: 10px;
}}

.trusty-balance {
    font-family: 'Iceland', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 1366px) {
    .trusty-balance {
    font-size: 16px;
    }}

@media (max-width: 768px) {
    .trusty-balance {
    font-size: 20px;
    }}

    .wallet-logo-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
border-radius: 3px;
}

body.dark .wallet-logo-icon {
      border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.2); 
}

@media (max-width: 1366px) {
        .wallet-logo-icon {
              width: 18px;
  height: 18px;
        }}

.wallet-name-value {
    font-size: 14px;
      display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 1366px) {
    .wallet-name-value {
        font-size: 12px;
    }}

    @media (max-width: 768px) {
        .wallet-name-value {
            font-size: 13px;
        }}

.wallet-address-value {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}


.trusty-balance-value,
.wallet-connected-value {
    font-size: 13px;
}

@media (max-width: 1366px) {
    .wallet-address-value,
    .trusty-balance-value {
    font-size: 11px;
}}

@media (max-width: 768px) {
    .wallet-address-value,
    .trusty-balance-value {
    font-size: 13px;
}}

@media (max-width: 1366px) {
.wallet-connected-value {
    font-size: 10px;
}}

@media (max-width: 768px) {
    .wallet-connected-value {
        font-size: 12px;
    }}


body:has(.user-dashboard) .pagination {
    padding: 10px 0px;
}

@media (max-width: 768px) {
  .user-dashboard {
    width: 100%;
    margin: 0;
    padding: 5px 15px 15px 15px;
  }

  .dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    grid-template-columns: initial;
  }

  .profile-section {
    width: 100%;
    order: 1;
    gap: 15px;
  }

  .profile-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin: 0;
  }

  .profile-info-item > *:first-child {
    flex: 0 0 auto;
    margin-right: 10px;
  }

  .profile-info-item > *:last-child {
    flex: 0 1 auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .profile-info-item:has(.user-bio),
  .profile-info-item:has(.user-profile-url) {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-info-item:has(.user-bio) > *,
  .profile-info-item:has(.user-profile-url) > * {
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .connected-accounts {
    margin-top: 0px;
  }

  .accounts-list {
    gap: 10px;
  }

  .account-item {
    padding: 12px;
  }

  

body:has(.user-dashboard) .pagination {
    padding-top: 0px;
}

}

.dashboard-messaging-container {
    display: flex;
    height: 600px;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
  }
  
  .dm-inbox-panel {
    width: 320px;
    border-right: 1px solid #ccc;
  }
  
  .dm-chat-panel {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  .dm-placeholder {
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
  }
  




.trusty-balance-warning-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  z-index: 9999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trusty-balance-warning-modal {
background: #7375e1;
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
color: rgba(255, 255, 255, 0.9);
  padding: 25px 25px;
  border-radius: 8px;
  text-align: center;
  width: auto;
  min-width: 20%;
  max-width: 20%;
  white-space: pre-line !important;
}

body.dark .trusty-balance-warning-modal {
background: rgba(0, 0, 0, 1);
}

@media (max-width: 768px) {
.trusty-balance-warning-modal {
    width: 90%;
      max-width: 90%;
  }}


.trusty-balance-warning-header h3 {
  font-size: 22px;
  margin-bottom: 10px;
  white-space: pre-line !important;
  text-align: center;
}

.trusty-balance-warning-body p {
  font-size: 15px;
  line-height: 17px;
  margin-bottom: 10px;
  white-space: pre-line !important;
    text-align: center;
}

@media (max-width: 768px) {
.trusty-balance-warning-body p {
  font-size: 14px;
  line-height: 16px;
  }}

.trusty-balance-warning-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.trusty-balance-warning-button {
  width: auto;
  margin: 0 auto;
  margin-top: 5px;
  padding: 6px 20px;
  font-size: 13px;
  background: rgb(145, 75, 255, 0.6);
  color: rgba(255,255,255, 0.9);
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.faq-container {
  width: 100%;
  max-width: 100%;
    margin: 0 auto;
    padding: 20px 0px;
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Inter', sans-serif;
    line-height: 35px;
  }
  
  @media (max-width: 1366px) {
    .faq-container {
      padding: 20px 0px;
    }}

    @media (max-width: 768px) {
      .faq-container {
        padding: 10px 15px;
      }}
    
    
      .faq-opener {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 0px;
      }

      .faq-title {
    text-align: center;
    margin: 0 auto;
    margin-top: 0px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Oswald', sans-serif;
    text-transform: none;
    font-size: 66px;
    line-height: 76px;
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: none;
      }

      body.dark .faq-title {
        color: rgba(255, 255, 255, 0.9);
        }

              body.light .faq-title {
        color: rgba(0, 0, 0, 0.9);
        }
  
  @media (max-width: 1366px) {
    .faq-title {
      font-size: 40px;
          line-height: 45px;
    }}

  @media (max-width: 768px) {
    .faq-title {
      font-size: 28px;
      line-height: 32px;
    }}

  .faq-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-size: 16px;
    line-height: 20px;
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
  }

      body.light .faq-description {
        color: rgba(0, 0, 0, 0.9);
        }

  .faq-description a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
  }

        body.light .faq-description a {
        color: rgba(0, 0, 0, 0.9);
        }

  @media (max-width: 1366px) {
    .faq-description {
      font-size: 13px;
      line-height: 16px;
    }}

    @media (max-width: 768px) {
      .faq-description {
        font-size: 14px;
        line-height: 18px;
        width: 75%;
        margin-top: 5px;
      }}

.contact-link {
  color: rgba(255, 255, 255, 0.9); 
  text-decoration: underline;
  font-weight: 300;
  }

body.dark .faq-container .contact-link {
  color: rgba(255, 255, 255, 0.9);
  }

  body.light .faq-container .contact-link {
  color: rgba(0, 0, 0, 0.9);
  }

    .faq-description .treolink,
    .faq-description .treolink a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-decoration: underline;
    font-weight: 300;
}


  .faq-section {
    margin-bottom: 20px;
  }
  
  .faq-section-title {
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0px;
    padding-bottom: 5px;
    border-bottom: 0px solid rgba(255, 255, 255, 0.4);
  }

  @media (max-width: 1366px) {
    .faq-section-title {
      font-size: 16px;
    }}

     @media (max-width: 768px) {
    .faq-section-title {
      font-size: 18px;
    }}

  body.dark  .faq-section-title {
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light  .faq-section-title {
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 0px solid rgba(0, 0, 0, 0.2);
  }

  .faq-item {
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    overflow: hidden;
  }

  body.dark .faq-item {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .faq-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

  .faq-question {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    font-size: 17px;
    line-height: 20px;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

    body.dark .faq-question {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }

    
  body.light .faq-question {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  }
  
  body.dark .faq-question.active {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  
  body.light .faq-question.active {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  }
  
  @media (max-width: 1366px) {
    .faq-question {
      padding: 10px;
      font-size: 13px;
      line-height: 20px;
  }}

  @media (max-width: 768px) {
    .faq-question {
      font-size: 15px;
      line-height: 20px;
      padding: 10px;
  }}


  .faq-toggle {
    width: 25px;
    height: 25px;
    position: relative;
    transition: transform 0.3s ease;
  }

  @media (max-width: 1366px) {
    .faq-toggle {
      width: 16px;
      height: 16px;
    }}

    @media (max-width: 768px) {
      .faq-toggle {
        width: 14px;
        height: 14px;
      }}
    
  
  .faq-toggle::before,
  .faq-toggle::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  body.dark .faq-toggle::before,
  body.dark .faq-toggle::after {
    background-color: rgba(255, 255, 255, 0.6);
  }

    body.light .faq-toggle::before,
  body.light .faq-toggle::after {
    background-color: rgba(0, 0, 0, 0.9);
  }


  .faq-toggle::before {
    width: 2px;
    height: 17px;
    top: 4px;
    left: 11px;
  }

  @media (max-width: 1366px) {
    .faq-toggle::before {
      width: 2px;
      height: 14px;
      top: 1px;
      left: 11px;
    }}

    @media (max-width: 768px) {
      .faq-toggle::before {
        width: 2px;
        height: 14px;
        top: 0px;
        left: 6px;
      }}
  
  .faq-toggle::after {
    width: 16px;
    height: 2px;
    top: 11px;
    left: 4px;
  }

  @media (max-width: 1366px) {
    .faq-toggle::after {
      width: 14px;
      height: 2px;
      top: 7px;
      left: 5px;
    }}

    @media (max-width: 768px) {
      .faq-toggle::after {
        width: 14px;
        height: 2px;
        top: 5px;
        left: 0px;
      }}
  
  .faq-question.active .faq-toggle::before {
    transform: rotate(90deg);
    opacity: 0;
  }
  
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgb(145, 75, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 20px;
  }

  body.dark .faq-answer {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .faq-answer {
  background: rgba(255,255,255,1);
  color: rgba(0, 0, 0, 0.9);
  }


  @media (max-width: 1366px) {
    .faq-answer {
      font-size: 12px;
      line-height: 18px;
    }}

    @media (max-width: 768px) {
      .faq-answer {
        font-size: 13px;
        line-height: 18px;
      }}
  
  .faq-answer-content {
    padding: 0 20px 20px;
  }

  @media (max-width: 768px) {
    .faq-answer-content {
      padding: 0 10px 10px;
    }}

  
  .faq-answer.active {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
  }
  
  .faq-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  
  .faq-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
  }


  
.contact-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    padding-bottom: 0px;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
    .contact-container {
        margin-top: 50px;
    }}

    @media (max-width: 768px) {
        .contact-container {
            padding: 0px 15px;
            margin-top: 10px;
            margin-bottom: 20px;
        }}


.contact-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
}

@media (max-width: 1366px) {
.contact-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    gap: 15px;
    width: 100%;
}}
    
@media (max-width: 768px) {
    .contact-main-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }}


.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
}

@media (max-width: 1366px) {
    .contact-grid {
        gap: 20px;
    }}

    @media (max-width: 768px) {
        .contact-grid {
        grid-template-columns: 48% 48%;
        gap: 15px;
        }}


 .contact-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 0 !important;
    width: 100%;
}

    @media (max-width: 768px) {
       .contact-right {
    display: flex;
    flex-direction: column;
         }}

.contact-right-note {
    background: linear-gradient(100deg, rgba(145, 75, 255,0.3), rgba(145, 75, 255, 1));
    background-size: 200% 200%;
    animation: GradientMoveLeft 5s ease-in-out infinite;
    border: 0px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 15px;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    text-shadow: none;
    text-align: center;
    transition: all 0.3s ease;
}

body.dark .contact-right-note {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-right-note i {
    display: block;
    font-size: 32px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    color: rgba(240, 255, 0, 1);
     animation: softblink 2s ease-in-out infinite; 
    transition: all 0.3s ease;
}

@keyframes softblink {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.3;
  }
}

    @media (max-width: 768px) {
.contact-right-note {
    font-size: 15px;
    line-height: 18px;
    padding: 20px;
}}

.contact-profile-section {
    background: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255,255,255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 75px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

@media (max-width: 1366px) {
    .contact-profile-section {
         padding: 66px 20px;
    }}

    @media (max-width: 768px) {
        .contact-profile-section {
            padding: 20px 10px;
        }}

body.dark .contact-profile-section {
    background: rgba(0, 0, 0, 1);
}

body.light .contact-profile-section {
     background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.contact-profile-picture {
    width: 175px;
    height: 175px;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

body.dark .contact-profile-picture {
  border: none;
}

@media (max-width: 1366px) {
    .contact-profile-picture {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }}

@media (max-width: 768px) {
    .contact-profile-picture {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }}

.contact-profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-info {
    width: 100%;
    text-align: center;
}

.contact-info-item {
    margin-bottom: 20px;
}

.contact-name {
    font-family: 'Iceland', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 0px;
    vertical-align: middle;
    min-height: 30px;
}

body.light .contact-name {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .contact-name {
        font-size: 17px;
            min-height: 25px;
    }}


@media (max-width: 768px) {
    .contact-name {
        font-size: 20px;
        min-height: 25px;
    }}

.contact-bio {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 14px;
    margin: 0 auto;
    margin-top: 0px;
    font-style: italic;
    min-height: 14px;
}

body.light .contact-bio {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .contact-bio {
        font-size: 13px;
    }}

@media (max-width: 768px) {
    .contact-bio {
        font-size: 13px;
    margin-top: 0px;
    }}

    .position {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        line-height: 30px;
        margin-left: 0px;
        vertical-align: middle;
    }

    body.light .position {
  color: rgba(0, 0, 0, 0.9)
}
    
    @media (max-width: 1366px) {
        .position {
            font-size: 11px;
            line-height: 30px;
        }}

    .contact-container .social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    margin-top: -10px;
    padding: 0;
    background: transparent;
    border-radius: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1366px) {
    .contact-container .social-links {
    margin-top: -10px !important;
    gap: 7px;
    }}

@media (max-width: 768px) {
    .contact-container .social-links {
    margin-top: -10px !important;
    gap: 8px;
    }}


.contact-container .social-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-container .social-link i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    background: rgb(145, 75, 255, 0.6);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .contact-container .social-link i {
background: rgba(0, 0, 0, 1);
}

body.light .contact-container .social-link i {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .contact-container .social-links i {
    width: 30px;
    height: 30px;
    }}

@media (max-width: 768px) {
    .contact-container .social-links i {
    width: 30px;
    height: 30px;
    font-size: 13px;
    }}

    .contact-container .treolink a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none !important;
    font-weight: 300;
}


.contact-container .treolink i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
border-radius: 50%;
    background: rgb(145, 75, 255, 0.6);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark .contact-container .treolink i {
background: rgba(0, 0, 0, 1);
}

body.light .contact-container .treolink i {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .contact-container .treolink i {
    font-size: 16px;
    width: 30px;
    height: 30px;
    }}

@media (max-width: 768px) {
    .contact-container .treolink i {
    width: 30px;
    height: 30px;
    font-size: 13px;
    }}
    
.contact-form-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(145, 75, 255, 0.6);
    border: 1px solid rgba(255,255,255, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    padding: 20px;
    position: relative;
    width: 100%;
}

body.dark .contact-form-section {
    background: rgba(0,0,0,1);
    border: 1px solid rgba(255,255,255, 0.2);
}

body.light .contact-form-section {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 768px) {
.contact-form-section {
        padding: 15px;
}}


.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 1366px) {
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}}

@media (max-width: 768px) {
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}}

.contact-form-title {
    font-size: 26px;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    text-align: center;
    margin-bottom: 9px;
}

body.light .contact-form-title {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .contact-form-title {
    font-size: 20px;
    margin-bottom: 0px;
}}

@media (max-width: 768px) {
    .contact-form-title {
    margin-bottom: 10px;
}}

.contact-form-error, contact-form-success {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
}

@media (max-width: 1366px) {
.contact-form-error, contact-form-success {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
}}

@media (max-width: 768px) {
.contact-form-error, contact-form-success {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
}}

.contact-input-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

@media (max-width: 1366px) {
   .contact-input-group {
    display: flex;
    flex-direction: row;
    gap: 6px;
}}

@media (max-width: 768px) {
   .contact-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}}

.form-label-and-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.form-label-and-field label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: none;
    margin-left: 6px;
    display: none;
}

@media (max-width: 1366px) {
.form-label-and-field label {
    font-size: 12px;
}}

.contact-form .contact-input-group input,
.contact-form .contact-input-group select {
  width: 100%;
  padding: 10px;
  background-color: rgba(255,255,255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  font-size: 14px;
    height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

body.light .contact-form .contact-input-group input,
body.light .contact-form .contact-input-group select {
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.contact-form .contact-input-group input,
.contact-form .contact-input-group select {
  font-size: 11px;
    height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}}

@media (max-width: 768px) {
.contact-form .contact-input-group input,
.contact-form .contact-input-group select {
  font-size: 13px;
    height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}}

.contact-form .contact-input-group input:disabled,
.contact-form .contact-input-group select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
}

.custom-select-wrapper select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: 20px;
}

.custom-select-wrapper .select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(0, 0, 0, 0.9); 
  font-size: 13px;
}

@media (max-width: 1366px) {
.custom-select-wrapper .select-arrow {
      font-size: 11px;
}}

@media (max-width: 768px) {
.custom-select-wrapper .select-arrow {
      font-size: 11px;
}}

/* new select */

.contact-form select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
cursor: pointer;
}


.contact-form select:hover {
  cursor: pointer !important;
}

.contact-form .contact-select {
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.contact-form .contact-select:disabled,
.contact-select--is-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.contact-select__control {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0px !important;
  border-radius: 6px !important;
  color: rgba(0, 0, 0, 0.5) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
}

@media (max-width: 1366px) {
  .contact-select__control {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
    font-size: 11px !important;
  }}

  @media (max-width: 768px) {
  .contact-select__control {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
    font-size: 13px !important;
  }}

.contact-select__single-value,
.contact-select__placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
  text-shadow: none !important;
  display: flex;
  padding: 0px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin-top: 6px !important;
}

body.light .contact-select__single-value,
body.light .contact-select__placeholder {
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .contact-select__single-value,
.contact-select__placeholder {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin-top: 6px !important;
}}

@media (max-width: 768px) {
  .contact-select__single-value,
.contact-select__placeholder {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-top: 2px !important;
}}

.contact-select__indicator,
.contact-select__dropdown-indicator,
.contact-select__indicator-separator {
display: none !important;
}

.contact-select__menu {
  background: #8571f4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  margin-top: 5px !important;
  z-index: 100;
  cursor: pointer !important;
  padding: 3px 0px !important;
}

body.dark .contact-select__menu {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .contact-select__menu {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1366px) {
  .contact-select__menu {
      margin-top: 3px !important;
  }}

.contact-select__option {
  font-size: 14px !important;
  font-weight: 300;
  padding: 4px 10px 4px 10px!important;
  cursor: pointer !important;
  background: #8571f4 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

@media (max-width: 1366px) {
  .contact-select__option {
  font-size: 11px !important;
  font-weight: 300;
  padding: 3px 10px 3px 10px!important;
  }}

@media (max-width: 768px) {
  .contact-select__option {
  font-size: 13px !important;
  font-weight: 300;
  padding: 5px 10px 5px 10px!important;
  }}

.contact-select__option:last-child {
  padding-bottom: 6px !important;
}

body.dark .contact-select__option {
  background: rgba(0, 0, 0, 1) !important;
}

body.light .contact-select__option {
  background: rgba(255,255,255,1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact-select__control {
  border-color: transparent;
  outline: none;
}

.contact-form textarea {
  width: 100%;
  padding: 10px;
  background-color: rgba(255,255,255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);   
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
  font-size: 14px;
  resize: none;
  height: 166px;
  min-height: 166px;
  max-height: 166px;
}

body.light .contact-form textarea {
  border: 1px solid rgba(0, 0, 0, 0.2); 
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
.contact-form textarea {
  resize: none;
  height: 125px;
  min-height: 125px;
  max-height: 125px;
    font-size: 11px;
}}

@media (max-width: 768px) {
.contact-form textarea {
  resize: vertical;
  height: 200px;
  min-height: 200px;
  max-height: 400px;
      font-size: 13px;
}}

.contact-form textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: transparent;
  outline: none;
}

.category-description {
      font-size: 12px;
    display: none;
}


.contact-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.contact-modal.error {
    background: rgba(145, 75, 255, 0.3);
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
}

.contact-modal.success {
    background: rgb(145, 75, 255, 0.3);
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
}

body.dark .contact-modal {background: rgba(0, 0, 0, 0.9);}

body.dark .contact-modal {background: rgba(255,255,255,1);}

.contact-modal-content {
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  width: 75%;
  max-width: 75%;
  text-shadow: none;
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
}

.contact-modal-content.error {
    background: rgba(145, 75, 255, 0.6);
    color: rgba(225, 255, 255, 0.9);
}

.contact-modal-content.success {
    background: rgba(145, 75, 255, 0.6);
    color: rgba(225, 255, 255, 0.9);
}

body.dark .contact-modal-content.error {
background: rgba(0, 0, 0, 0.9);
color: rgba(225, 255, 255, 0.9);
border: 1px solid rgba(255,255,255, 0.2);
}

body.light .contact-modal-content.error {
background: rgba(255,255,255,1);
color: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(0,0,0, 0.2);
}


body.dark .contact-modal-content.success {
background: rgba(0, 0, 0, 0.9);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255,255,255, 0.2);
}

body.light .contact-modal-content.success {
background: rgba(255,255,255,1);
color: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(0,0,0, 0.2);
}


  @media (max-width: 768px) {
    .contact-modal-content {
          padding: 20px;
    }}

.contact-modal-content button {
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 20px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  min-width: 100px;
  max-width: auto;
  margin-top: 20px;
}

.contact-modal-content.error button,
.contact-modal-content.success button {
  background: rgba(145, 75, 255, 0.6);
}

body.dark .contact-modal-content button {
background: rgba(0, 0, 0, 0.9);
}

body.light .contact-modal-content button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

  @media (max-width: 1366px) {
.contact-modal-content button {
  font-size: 11px;
}}

.contact-form button {
    width: 100%;
    padding: 13px;
    font-size: 17px;
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 300;
}

body.dark .contact-form button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

body.light .contact-form button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}


  @media (max-width: 1366px) {
.contact-form button {
  font-size: 13px;
    padding: 13px;
}}

  @media (max-width: 1366px) {
.contact-form button {
  font-size: 16px;
    padding: 13px;
}}

.contact-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-form-loading .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}


.contact-mobile-title {
  text-align: center;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.9);
  font-family: 'Oswald', sans-serif;
  text-transform: none;
  font-size: 36px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: 2px;
  text-shadow: none;
}

/* team */

.trustyagentshub-team-title {
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.9);
  font-family: 'Oswald', sans-serif;
  text-transform: none;
  font-size: 66px;
  line-height: 66px;
  font-weight: 500;
  letter-spacing: 2px;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #9945FF,
    0 4px 4px #9945FF,
    0 5px 5px #14F195,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.dark .trustyagentshub-team-title {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #464646,
    0 4px 4px #6f6f6f,
    0 5px 5px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

  @media (max-width: 768px) {
    .trustyagentshub-team-title {
  font-size: 36px;
  line-height: 46px;
    margin-bottom: 0px;
  text-shadow:
    0 1px 1px #9945FF,
    0 2px 2px #9945FF,
    0 3px 3px #14F195,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

body.dark .trustyagentshub-team-title {
    text-shadow:
    0 1px 1px #464646,
    0 2px 2px #464646,
    0 3px 3px #6f6f6f,
    0 3px 6px rgba(255,255,255,0.6),
    1px 2px 3px rgba(255,255,255,0.6);
}

  }


.trustyagentshub-team-desc {
  margin: 0 auto;
  margin-top: 10px;
  font-size: 18px;
  line-height: 22px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  text-shadow: none;
  text-align: center;
}

  @media (max-width: 768px) {
    .trustyagentshub-team-desc {
    margin-top: 0px;
  font-size: 13.5px;
  line-height: 20px;
  max-width: 95%;
    }}

.trustyagentshub-team {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-top: 20px;
}

@media (max-width: 768px) {
  .trustyagentshub-team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
    width: 100%;
  }
}

/* FAQs adjustment */



    @media (max-width: 768px) {
      body:has(.contact-container) .faq-container {
        padding: 10px 0px;
      }}
    

body:has(.contact-container) .faq-title {
  font-size: 50px;
  line-height: 60px;
  margin-top: 20px;
  margin-bottom: 10px;
}

@media (max-width: 1366px) {
body:has(.contact-container) .faq-title {
    font-size: 30px;
      line-height: 40px;
    margin-top: 10px;
}}

@media (max-width: 768px) {
body:has(.contact-container) .faq-title {
    font-size: 28px;
    line-height: 30px;
    margin-top: 20px;
}}

@media (max-width: 768px) {
body:has(.contact-container) .faq-description {
    margin-top: 1px;
    width: 65%;
}}

  .changelog-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
  }
  
  @media (max-width: 1366px) {
    .changelog-container {
      padding: 20px 0px;
    }}
  
  .changelog-header {
    margin-bottom: 25px;
  }
  
  .changelog-title {
    font-size: 40px;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 0px;
    background: transparent;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
  }
  
  @media (max-width: 1366px) {
    .changelog-title {
      font-size: 25px;
      margin-bottom: 20px;
    }}
  
  
  body.dark  .changelog-title {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .milestone-summary {
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    text-align: left;
  }
  
  @media (max-width: 1366px) {
    .milestone-summary {
      margin-bottom: 30px;
      padding: 10px;
    }}

    @media (max-width: 768px) {
      .milestone-summary {
        width: 100%;
        max-width: 100%;
      }}
  
  body.dark .milestone-summary {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .milestone-header {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-size: 20px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
  }

  @media (max-width: 768px) {
    .milestone-header {
        font-size: 16px;
            margin-top: 6px;
    margin-bottom: 16px;
    }}

  
    body.dark .milestone-header {
      color: rgba(255, 255, 255, 0.9);
    }

    .milestone-columns {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    @media (max-width: 1366px) {
      .milestone-columns {
        gap: 15px;
    }}

    @media (max-width: 768px) {
      .milestone-columns {
        gap: 10px;
        margin-left: 0px;
    }}
  
  .milestone-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0px 12px;
    gap: 0px 12px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  .milestone-list:last-child {
    margin-bottom: -5px;
  }

  @media (max-width: 1366px) {
    .milestone-list {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: -15px;
    }

    .milestone-list:last-child {
      margin-bottom: -5px;
    }
  }

  @media (max-width: 768px) {
    .milestone-list {
      grid-template-columns: repeat(1, 1fr);
      gap: 0px;
      margin-bottom: -10px;
    }
  }

  @media (max-width: 768px) {
    .milestone-columns {
      flex-direction: column;
      align-items: center;
    }
  }
  
  .milestone-list li {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
    font-style: italic;
    padding: 10px;
    border-radius: 8px;
    align-items: stretch;
  }
  
  body.dark .milestone-list li {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  
  @media (max-width: 1366px) {
    .milestone-list li {
      font-size: 11px;
          line-height: 14px;
      margin-bottom: 10px;
    }}

    @media (max-width: 768px) {
        .milestone-list li {
            font-size: 11px;
                line-height: 15px;
        }}
  
  .changelog-timeline {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  
  .changelog-timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: rgb(145, 75, 255, 0.6);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  body.dark .changelog-timeline::before {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .changelog-timeline::before {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.2);
  }
  
  .changelog-entry {
    width: 50%;
    padding: 0px 40px 0px 40px;
    position: relative;
    margin-bottom: 30px;
  }
  
  
  .changelog-entry[position="left"] {
    left: 0;
    padding: 0px 40px 0px 0px;
  }
  
  .changelog-entry[position="right"] {
    left: 50%;
    padding: 0px 0px 0px 40px;
  }
  
  
  .changelog-entry::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgb(145, 75, 255, 0.6);
    border: 2px solid #fff;
    border-radius: 50%;
    top: 30px;
    transition: all 0.3s ease;
    z-index: 2;
    background-clip: padding-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  body.dark .changelog-entry::before {
    background: rgba(0, 0, 0, 1);
  }
  
    body.light .changelog-entry::before {
    background: rgba(255,255,255,1);
    border: 2px solid rgba(0, 0, 0, 0.2);
  }
  
  .changelog-entry[position="left"]::before {
    right: -7px;
  }
  
  @media (max-width: 1366px) {
    .changelog-entry[position="left"]::before {
      right: -7px;
    }}
  
  
  .changelog-entry[position="right"]::before {
    left: -7px;
  }
  
  @media (max-width: 1366px) {
    .changelog-entry[position="right"]::before {
      left: -7px;
    }}
  
  .changelog-entry::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background: rgb(145, 75, 255, 0.6);
    top: 36px;
    z-index: 0;
  }
  
  body.dark .changelog-entry::after {
    background: rgba(255, 255, 255, 0.2);
  }

    body.light .changelog-entry::after {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .changelog-entry[position="left"]::after {
    right: 0;
    z-index: 1;
  }
  
  .changelog-entry[position="right"]::after {
    left: 0;
    z-index: 1;
  }
  
  .changelog-date-left {
    font-size: 13px;
    font-weight: 500;
    color: rgba(40, 50, 100, 1);
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-align: left;
    margin-left: 5px;
  }
  
  @media (max-width: 1366px) {
    .changelog-date-left {
      font-size: 10px;
          margin-bottom: 3px;
    }}
  
  body.dark  .changelog-date-left {
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light  .changelog-date-left {
    color: rgba(0, 0, 0, 0.9);
  }
  

  .changelog-date-right {
    font-size: 13px;
    font-weight: 500;
    color: rgba(40, 50, 100, 1);
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-align: right;
    margin-right: 5px;
  }
  
  @media (max-width: 1366px) {
    .changelog-date-right {
      font-size: 10px;
                margin-bottom: 3px;
    }}
  
  body.dark  .changelog-date-right {
    color: rgba(255, 255, 255, 0.9);
  }

      body.light  .changelog-date-right {
    color: rgba(0, 0, 0, 0.9);
  }
  
  .changelog-content {
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 999999999;
    background-clip: padding-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
  }
  
  body.dark .changelog-content {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.9);
  }
  
  body.light .changelog-content {
   background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }
  
  .treolink a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-decoration: none;
    font-weight: 300;
    text-decoration: underline;
}

body.dark .treolink a{
    color: rgba(255, 255, 255, 0.9);
    text-shadow: underline;
}

body.light .treolink a{
    color: rgba(0, 0, 0, 0.9);
    text-shadow: underline;
}

  .changelog-note {
    font-size: 13px;
    line-height: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin: 15px 0px 15px 0px;
    font-style: italic;
    padding: 10px;
    border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); 
  }


  body.dark .changelog-note {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.1)
  }

    body.light .changelog-note {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

    @media (max-width: 1366px) {
  .changelog-note {
      font-size: 12px;
          line-height: 16px;
    }}

    @media (max-width: 768px) {
  .changelog-note {
        font-size: 13px;
        line-height: 17px;
      margin: 0px 0px 5px 0px;
      }}
  
  .changelog-version {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: inline-block;
    margin: 5px 7px 5px 0px;
  }
  
  body.dark .changelog-version {
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .changelog-version {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .changelog-version {
      font-size: 14px;
    }}

    @media (max-width: 768px) {
      .changelog-version {
        font-size: 15px;
      }}
  
  .changelog-badge {
    display: inline-block;
    padding: 0px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-style: italic;
    line-height: 15px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.2px;
    vertical-align: middle;
  }
  
  @media (max-width: 1366px) {
    .changelog-badge {
    font-size: 10px;
    padding: 2px 8px 2px 8px;
  }}

  .changelog-list {
    margin-top: 10px;
    padding-left: 30px;
  }
  
  @media (max-width: 1366px) {
    .changelog-list {
      margin-top: 5px;
    }}
  
  .changelog-list > li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 7px;
        max-width: 86%;
  }
  
  body.dark .changelog-list > li {
    color: rgba(255, 255, 255, 0.9);
  }

    body.light .changelog-list > li {
    color: rgba(0, 0, 0, 0.9);
  }
  
  @media (max-width: 1366px) {
    .changelog-list > li {
      font-size: 12px;
      margin-bottom: 4px;
    }}

    @media (max-width: 768px) {
      .changelog-list > li {
        font-size: 13px;
        margin-bottom: 3px;
        max-width: 100%;
      }}
  

      .changelog-list > li a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: underline;
      }

  .changelog-list .new-features {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
  }
  
  body.dark .changelog-list .new-features > li {
    color: rgba(255, 255, 255, 0.9);
  }
  
    body.light .changelog-list .new-features > li {
    color: rgba(0, 0, 0, 0.9);
  }
  

  .changelog-list .enhancement {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
  }
  
  body.dark .changelog-list .enhancement > li {
    color: rgba(255, 255, 255, 0.9);
  }
    
    body.light .changelog-list .enhancement > li {
    color: rgba(0, 0, 0, 0.9);
  }
  
  .changelog-list .security {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
  }
  
  body.dark .changelog-list .security > li {
    color: rgba(255, 255, 255, 0.9);
  }
  
      body.light .changelog-list .security > li {
    color: rgba(0, 0, 0, 0.9);
  }

  .changelog-sublist {
    margin: 6px 0px 0px 6px;
    padding-left: 10px;
    list-style: none;
  }
  
  .changelog-sublist li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 5px;
    position: relative;
  }

    @media (max-width: 1366px) {
  .changelog-sublist li {
      font-size: 12px;
    }}

    @media (max-width: 768px) {
  .changelog-sublist li {
        font-size: 13px;
      }}

    .changelog-sublist li:last-child {
      margin-bottom: 10px;
    }

   body.dark .changelog-sublist li {
    color: rgba(255, 255, 255, 0.9);
  }

   body.light .changelog-sublist li {
    color: rgba(0, 0, 0, 0.9);
  }

  .changelog-sublist li::before {
    content: '-';
    position: absolute;
    left: -10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
  }
  
  
  .changelog-entry:hover::before {
    transform: scale(1.2);
    background: rgb(145, 75, 255, 0.6);
  }
  
  .changelog-entry:hover::after {
    background: rgb(145, 75, 255, 0.6);
  }
  
  .changelog-content:hover {
    transform: translateY(-2px);
  }


  @media (max-width: 768px) {
    .changelog-container {
        padding: 10px 15px 0px 15px;
    }

    .milestone-summary {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        margin-bottom: 30px;
    }

    .changelog-timeline::before {
        display: none;
    }

    .changelog-entry {
        width: 100%;
        padding: 0px;
        left: 0 !important;
        margin-bottom: 20px;
    }

    .changelog-entry[position="left"],
    .changelog-entry[position="right"] {
        left: 0;
        padding: 0;
    }

    .changelog-entry::before {
        display: none;
    }

    .changelog-entry::after {
        display: none;
    }

    .changelog-date-left,
    .changelog-date-right {
        text-align: left;
        margin-left: 3px;
        padding-left: 3px;
        font-size: 12px;
    }

    .changelog-content {
        padding: 12px;
    }

    .changelog-badge {
        display: inline-block;
        margin-bottom: 10px;
    }

    .changelog-list {
        padding-left: 20px;
        margin-top: 8px;
    }

    
}

.trusty-style-on-changelog {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 0px;
  }

    @media (max-width: 1366px) {
    .trusty-style-on-changelog {
              font-size: 16px;
        }}

  @media (max-width: 768px) {
    .trusty-style-on-changelog {
              font-size: 16px;
        }}

  body.dark .trusty-style-on-changelog {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);  
    text-shadow: none;
  }

   body.light .trusty-style-on-changelog {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.9);  
    text-shadow: none;
  }

.trusty-airdrop-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  }
  
  .trusty-airdrop-modal {
    position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(100deg, #9945FF, #14F195);
    background-size: 250% 250%;
    animation: AirdropGradientMove 6s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0px 0px 26px rgba(145, 75, 255, 1);
    padding: 20px 20px 30px 20px;
    z-index: 9999999999 !important;
    width: auto;
    min-width: 666px;
    max-width: 666px;
    text-align: center;
  }

  body.dark .trusty-airdrop-modal {
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.6);
  }

  @keyframes AirdropGradientMove {
    0% { background-position: 0 0; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0 0; }
  }


  body.dark .trusty-airdrop-modal {
    background: rgba(44, 44, 44, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }


  @media (max-width: 768px) {
    .trusty-airdrop-modal {
    width: 95%;
    min-width: 95%;
    max-width: 95%;
    z-index: 9999999999 !important;
  }}

  .trusty-airdrop-modal-title {
    font-size: 46px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    margin-bottom: 30px;
  }

  body.dark .trusty-airdrop-modal-title {
    text-shadow: none;
  }

  .trusty-airdrop-modal-title .trusty-style {
    font-family: 'Iceland', sans-serif;
    font-size: 76px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    margin-right: 6px;
  }

  body.dark .trusty-airdrop-modal-title .trusty-style {
    text-shadow: none;
  }
  
  .checking-eligibility .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

  .modal-claim-successful {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-size: 126px;
    display: block;
    margin-bottom: 20px;
    animation: bounce 1s infinite;
}

body.dark .modal-claim-successful {
  text-shadow: none;
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


.trusty-airdrop-status .trusty-style {
  font-family: 'Iceland', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  margin-right: 0px;
}

body.dark .trusty-airdrop-status .trusty-style {
  font-weight: 500;
  text-shadow: none;
}

  .modal-abuse-detected {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-size: 66px;
    display: block;
    margin-bottom: 20px;
  }

  .trusty-airdrop-status {
    font-size: 19px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    width: 95%;
    margin: 0 auto;
  }
  
  
  .airdrop-not-whitelisted-icon {
    font-size: 86px !important;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    animation: lock-shake 0.6s infinite;
    margin-bottom: 20px;
  }
  
  @keyframes lock-shake {
    0%   { transform: translateX(0) rotate(0deg); }
    20%  { transform: translateX(-2px) rotate(-2deg); }
    40%  { transform: translateX(2px) rotate(2deg); }
    60%  { transform: translateX(-2px) rotate(-2deg); }
    80%  { transform: translateX(2px) rotate (2deg); }
    100% { transform: translateX(0) rotate(0deg); }
  }

  .whitelist-note {
    font-size: 17px;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .trusty-airdrop-close-button {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 10px 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
  }
  
  body.dark .trusty-airdrop-close-button {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.21);
  }




  .trusty-gift-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
  }
  
  .trusty-gift {
    font-size: 100px;
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  }
  
  body.dark .trusty-gift {
    text-shadow: none;
  }

  .trusty-gift.bounce {
    animation: gift-bounce 1s infinite;
  }
  
  @keyframes gift-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  
  

  .trusty-airdrop-modal a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration:underline;
  }

  body.dark .trusty-airdrop-modal a { 
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    text-decoration:underline;
  }


  body:has(.trusty-airdrop-modal-overlay)  .user-header,
  body:has(.trusty-airdrop-modal-overlay) .main-footer,
    body:has(.trusty-airdrop-modal-overlay) .global-footer,
  body:has(.trusty-airdrop-modal-overlay) .float-chat-button {
    display: none;
}


@media (max-width: 768px) {
  body:has(.trusty-airdrop-modal-overlay)  .user-header,
  body:has(.trusty-airdrop-modal-overlay) .main-footer,
      body:has(.trusty-airdrop-modal-overlay) .global-footer,
  body:has(.trusty-airdrop-modal-overlay) .float-chat-button {
    display: none;
}}

.trusty-coin-modal-rain {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.trusty-coin-modal {
  position: fixed;
  top: -66px;
  opacity: 0.6;
  animation: fall 1s linear infinite;
  object-fit: contain;
  display: inline-block;
}

.trusty-coin-modal-1 { left: 6.0%; animation-delay: 2.1s; animation-duration: 5.95s; width: 56px; }
.trusty-coin-modal-2 { left: 7.8%; animation-delay: 5.6s; animation-duration: 4.3s; width: 56px; }
.trusty-coin-modal-3 { left: 9.6%; animation-delay: 6.3s; animation-duration: 5.15s; width: 36px; }
.trusty-coin-modal-4 { left: 11.4%; animation-delay: 2.7s; animation-duration: 5.5s; width: 56px; }
.trusty-coin-modal-5 { left: 13.2%; animation-delay: 1.0s; animation-duration: 5.35s; width: 56px; }
.trusty-coin-modal-6 { left: 15.0%; animation-delay: 1.1s; animation-duration: 5.55s; width: 36px; }
.trusty-coin-modal-7 { left: 16.8%; animation-delay: 8.6s; animation-duration: 5.95s; width: 56px; }
.trusty-coin-modal-8 { left: 18.6%; animation-delay: 0.7s; animation-duration: 5.6s; width: 56px; }
.trusty-coin-modal-9 { left: 20.4%; animation-delay: 3.2s; animation-duration: 4.05s; width: 36px; }
.trusty-coin-modal-10 { left: 22.2%; animation-delay: 2.5s; animation-duration: 5.2s; width: 36px; }
.trusty-coin-modal-11 { left: 24.0%; animation-delay: 2.6s; animation-duration: 5.15s; width: 36px; }
.trusty-coin-modal-12 { left: 25.8%; animation-delay: 5.4s; animation-duration: 4.7s; width: 36px; }
.trusty-coin-modal-13 { left: 27.6%; animation-delay: 4.8s; animation-duration: 5.65s; width: 36px; }
.trusty-coin-modal-14 { left: 29.3%; animation-delay: 4.3s; animation-duration: 4.75s; width: 36px; }
.trusty-coin-modal-15 { left: 31.1%; animation-delay: 7.7s; animation-duration: 5.35s; width: 56px; }
.trusty-coin-modal-16 { left: 32.9%; animation-delay: 0.8s; animation-duration: 5.8s; width: 56px; }
.trusty-coin-modal-17 { left: 34.7%; animation-delay: 1.4s; animation-duration: 5.9s; width: 36px; }
.trusty-coin-modal-18 { left: 36.5%; animation-delay: 3.4s; animation-duration: 4.6s; width: 36px; }
.trusty-coin-modal-19 { left: 38.3%; animation-delay: 7.1s; animation-duration: 5.75s; width: 56px; }
.trusty-coin-modal-20 { left: 40.1%; animation-delay: 6.8s; animation-duration: 5.35s; width: 36px; }
.trusty-coin-modal-21 { left: 41.9%; animation-delay: 2.7s; animation-duration: 5.45s; width: 56px; }
.trusty-coin-modal-22 { left: 43.7%; animation-delay: 9.7s; animation-duration: 5.45s; width: 56px; }
.trusty-coin-modal-23 { left: 45.5%; animation-delay: 4.8s; animation-duration: 4.85s; width: 56px; }
.trusty-coin-modal-24 { left: 47.3%; animation-delay: 8.7s; animation-duration: 5.4s; width: 36px; }
.trusty-coin-modal-25 { left: 49.1%; animation-delay: 5.7s; animation-duration: 5.75s; width: 56px; }
.trusty-coin-modal-26 { left: 50.9%; animation-delay: 2.7s; animation-duration: 4.2s; width: 56px; }
.trusty-coin-modal-27 { left: 52.7%; animation-delay: 9.4s; animation-duration: 4.35s; width: 56px; }
.trusty-coin-modal-28 { left: 54.5%; animation-delay: 4.3s; animation-duration: 5.7s; width: 56px; }
.trusty-coin-modal-29 { left: 56.3%; animation-delay: 9.1s; animation-duration: 4.4s; width: 36px; }
.trusty-coin-modal-30 { left: 58.1%; animation-delay: 0.5s; animation-duration: 4.8s; width: 56px; }
.trusty-coin-modal-31 { left: 59.9%; animation-delay: 4.4s; animation-duration: 5.7s; width: 36px; }
.trusty-coin-modal-32 { left: 61.7%; animation-delay: 6.0s; animation-duration: 4.55s; width: 56px; }
.trusty-coin-modal-33 { left: 63.5%; animation-delay: 5.3s; animation-duration: 5.4s; width: 36px; }
.trusty-coin-modal-34 { left: 65.3%; animation-delay: 4.5s; animation-duration: 4.25s; width: 56px; }
.trusty-coin-modal-35 { left: 67.1%; animation-delay: 6.3s; animation-duration: 6.0s; width: 56px; }
.trusty-coin-modal-36 { left: 68.9%; animation-delay: 3.0s; animation-duration: 4.0s; width: 36px; }
.trusty-coin-modal-37 { left: 70.7%; animation-delay: 3.1s; animation-duration: 4.25s; width: 56px; }
.trusty-coin-modal-38 { left: 72.4%; animation-delay: 7.5s; animation-duration: 5.25s; width: 36px; }
.trusty-coin-modal-39 { left: 74.2%; animation-delay: 1.7s; animation-duration: 5.2s; width: 36px; }
.trusty-coin-modal-40 { left: 76.0%; animation-delay: 8.9s; animation-duration: 4.4s; width: 56px; }
.trusty-coin-modal-41 { left: 77.8%; animation-delay: 2.0s; animation-duration: 5.5s; width: 36px; }
.trusty-coin-modal-42 { left: 79.6%; animation-delay: 6.2s; animation-duration: 4.4s; width: 56px; }
.trusty-coin-modal-43 { left: 81.4%; animation-delay: 1.5s; animation-duration: 5.9s; width: 36px; }
.trusty-coin-modal-44 { left: 83.2%; animation-delay: 0.5s; animation-duration: 4.65s; width: 36px; }
.trusty-coin-modal-45 { left: 85.0%; animation-delay: 3.8s; animation-duration: 5.8s; width: 36px; }
.trusty-coin-modal-46 { left: 86.8%; animation-delay: 5.8s; animation-duration: 4.85s; width: 36px; }
.trusty-coin-modal-47 { left: 88.6%; animation-delay: 5.1s; animation-duration: 5.85s; width: 56px; }
.trusty-coin-modal-48 { left: 90.4%; animation-delay: 1.2s; animation-duration: 4.55s; width: 56px; }
.trusty-coin-modal-49 { left: 92.2%; animation-delay: 7.5s; animation-duration: 5.4s; width: 36px; }
.trusty-coin-modal-50 { left: 94.0%; animation-delay: 9.7s; animation-duration: 4.25s; width: 56px; }


@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

body.airdrop-modal .main-footer,
body.airdrop-modal .global-footer,
body.airdrop-modal .user-header,
body.airdrop-modal .float-chat-button {
  display: none !important;
}

.trusty-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0px 10px 0px;
  color: 1px solid rgba(255, 255, 255, 0.9);
}

@media (max-width: 1366px) {
  .trusty-page {
    margin-top: 10px;
    padding: 15px;
  }}

@media (max-width: 768px) {
.trusty-page {
  margin-top: 0px;
  padding: 10px 15px 20px 15px;
}}

.trusty-network-stats-dekstop {

  inset: 0;
  z-index: 1 !important;
  pointer-events: none;
}

.trusty-stats {
  background: rgb(145, 75, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 2 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

body.dark .trusty-stats {
  background: rgba(0.0.0,1);
}

body.light .trusty-stats {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}


@media (max-width: 1366px) {
  .trusty-stats {
    padding: 15px;
    margin-bottom: 15px;
  }}

  @media (max-width: 768px) {
    .trusty-stats {
      padding: 15px;
      margin-bottom: 15px;
    }}

    .trusty-stats-left {
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: center;
  align-items: center;
  margin-top: -15px;
    }

    .spinning-trusty {
      margin-bottom: -30px;
    }

    .spinning-trusty img {
      width: 125px;
      height: auto;
    }

    .trusty-stats-title {
      font-family: 'Iceland', sans-serif;
      font-size: 66px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
    }
  
    body.dark .trusty-stats-title {
      text-shadow: none;
    }

        body.light .trusty-stats-title {
     color: rgba(0, 0, 0, 0.9);
    }
  
    @media (max-width: 1366px) {
      .trusty-stats-title{
        font-size: 40px;
      }}
  
    @media (max-width: 768px) {
      .trusty-stats-title {
        font-size: 46px;
        margin: 0px 3px 0px 0px;
      }}

.trusty-stats-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-style: italic;
  margin-top: 6px;
}

        body.light .trusty-stats-desc {
     color: rgba(0, 0, 0, 0.9);
    }

@media (max-width: 1366px) {
  .trusty-stats-desc {
    font-size: 13px;
  }}

@media (max-width: 768px) {
  .trusty-stats-desc {
    font-size: 12px;
    line-height: 15px;
  }}

.getting-trusty-data,
.getting-trusty-data a {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      font-style: italic;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 1366px) {
      .getting-trusty-data {
        font-size: 12px;
      }}

.getting-trusty-data .tahload::after {
  content: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
  animation: flashdots 1s steps(10, end) infinite;
  font-family: monospace;
  white-space: pre;
  margin-left: 3px;
  }
  
@keyframes flashdots {
  0% { content: '⠋'; }
  10% { content: '⠙'; }
  20% { content: '⠹'; }
  30% { content: '⠸'; }
  40% { content: '⠼'; }
  50% { content: '⠴'; }
  60% { content: '⠦'; }
  70% { content: '⠧'; }
  80% { content: '⠇'; }
  90% { content: '⠏'; }
  100% { content: '⠋'; }
}

.trusty-stats-right {
  display: grid;
  grid-template-columns: repeat(1, auto);
  grid-gap: 15px;
  gap: 15px;
  width: 100%;
}

.trusty-stats-right-1 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 15px;
  gap: 15px;
}

    @media (max-width: 768px) {
      .trusty-stats-right-1 {
          grid-template-columns: repeat(1, auto);
        gap: 10px;
      }}

.trusty-stats-right-2 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 15px;
  gap: 15px;
}

    @media (max-width: 768px) {
      .trusty-stats-right-2 {
          grid-template-columns: repeat(1, auto);
        gap: 10px;
      }}

.trusty-stats-item {
  text-align: center;
  text-decoration: none;
  background: rgb(145, 75, 255, 0.6);
  border-radius: 8px;
  padding: 10px 50px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
.trusty-stats-item {
  padding: 10px 10px;
}}

body.dark .trusty-stats-item {
  background: rgba(0,0,0,0.1);
}


body.light .trusty-stats-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.trusty-stats-item h3 {
font-size: 16px;
}

@media (max-width: 1366px) {
  .trusty-stats-item h3 {
    font-size: 13px;
    }}

    @media (max-width: 768px) {
      .trusty-stats-item h3 {
        font-size: 15px;
      }}

.trusty-stats-item p {
  color: 1px solid rgba(255, 255, 255, 0.9);
  font-size: 15px;
  vertical-align: middle;
}

@media (max-width: 1366px) {
  .trusty-stats-item p {
    font-size: 12px;
    }}

    @media (max-width: 768px) {
      .trusty-stats-item p {
        font-size: 14px;
        }}

.trusty-stats-item .address {
  position: relative;
  font-family: monospace;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.trusty-stats-item p.address {
  position: relative;
  font-family: monospace;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
  font-size: 12px;
  line-height: 15px;
}

@media (max-width: 1366px) {
  .trusty-stats-item p.address {
      font-size: 11px;
  }}

.address-copy-tooltip {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(145, 75, 255, 1);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 9999999999;
  opacity: 1;
  transition: opacity 0.3s ease;
}

body.dark .address-copy-tooltip {
    background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.7);
}

body.light .address-copy-tooltip {
  background: rgba(0, 0, 0, 1);
  color: rgba(255,255,255,1);
}


.api-error {
  font-size: 13px;
}

.api-error a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

body.light .api-error a {
  color: rgba(0, 0, 0, 0.9);
}
    
.trusty-usecase {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px 20px 30px 20px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark .trusty-usecase {
  background: rgba(0,0,0, 1);
}

body.light .trusty-usecase {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .trusty-usecase {
    padding: 10px;
    margin-bottom: 15px;
  }}

  @media (max-width: 768px) {
    .trusty-usecase {
      padding: 15px;
      margin-bottom: 15px;
    }}


    .trusty-usecase-title .trusty-style-on-usecase {
      font-family: 'Iceland', sans-serif;
      font-size: 50px;
      font-weight: 500;
      margin: 0px 6px 0px 0px;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
      z-index: 666 !important;
      position: relative;
    }
  
    body.dark .trusty-usecase-title .trusty-style-on-usecase {
      color: rgba(0, 0, 0, 0.9);
            font-weight: 600;
    }

        body.kight .trusty-usecase-title .trusty-style-on-usecase {
      text-shadow: none;
    }
  
    @media (max-width: 1366px) {
      .trusty-usecase-title .trusty-style-on-usecase {
        font-size: 40px;
      }}
  
    @media (max-width: 768px) {
      .trusty-usecase-title .trusty-style-on-usecase {
        font-size: 33px;
        margin: 0px 3px 0px 0px;
      }}
      

.trusty-usecase-title {
    margin-bottom: 0px;
    font-size: 36px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500;
  }


  body.dark .trusty-usecase-title {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  }

  @media (max-width: 1366px) {
    .trusty-usecase-title {
      margin-bottom: 10px;
      font-size: 20px;
    }}

    @media (max-width: 768px) {
      .trusty-usecase-title {
        margin-bottom: 10px;
        font-size: 24px;
      }}


      .trusty-usecase .usecase-icon{
        margin-bottom: 10px;
        font-size: 26px;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
      }

      @media (max-width: 768px) {
        .trusty-usecase .usecase-icon{
          margin-top: 6px;
          margin-bottom: 6px;
          font-size: 26px;
        }}

      .trusty-usecase-desc {
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-style: italic;
      }

      
      @media (max-width: 1366px) {
        .trusty-usecase-desc {
          margin-top: 5px;
          font-size: 11.5px !important;
          line-height: 15px;
 
        }}

      @media (max-width: 768px) {
        .trusty-usecase-desc {
          margin: 0 auto;
          margin-top: 5px;
          margin-bottom: 15px;
          font-size: 12px !important;
          line-height: 15px;
          width: 95%;
        }}

.trusty-usecase-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

@media (max-width: 1366px) {
  .trusty-usecase-container {
    gap: 10px;
  }}

  @media (max-width: 768px) {
    .trusty-usecase-container {
      gap: 10px;
    }}

.trusty-usecase-item {
    text-align: center;
    text-decoration: none;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 20px 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark .trusty-usecase-item {
  background: rgba(0,0,0,0.1);
}

@media (max-width: 1366px) {
  .trusty-usecase-item {
    padding: 15px 10px 10px 10px;
  }}

  @media (max-width: 768px) {
    .trusty-usecase-item {
      padding: 10px;
    }}

.trusty-usecase-item h3 {
  color: 1px solid rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
  font-size:20px;
}

@media (max-width: 1366px) {
  .trusty-usecase-item h3 {
    font-size: 15px;
  }}

  @media (max-width: 768px) {
    .trusty-usecase-item h3 {
      font-size: 14px;
    }}

.trusty-usecase-item p {
    color: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 18px;
  }

  @media (max-width: 1366px) {
    .trusty-usecase-item p {
      font-size: 11px;
      line-height: 16px;
    }}

    @media (max-width: 768px) {
      .trusty-usecase-item p {
        font-size: 13px;
        line-height: 16px;
        max-width: 95%;
        margin: 0 auto;
      }}


      .trusty-usecase-item .trusty-style-ondesc {
        font-family: 'Iceland', sans-serif;
        font-size: 22px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        margin: 0px 2px;
        text-shadow: none;
      }

      @media (max-width: 1366px) {
        .trusty-usecase-item .trusty-style-ondesc {
          font-size: 18px;
        }}

      @media (max-width: 768px) {
        .trusty-usecase-item .trusty-style-ondesc {
          font-size: 17px;
          margin: 0px 2px;
        }}






  .trusty-secured {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px 20px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  body.dark .trusty-secured {
    background: rgba(0.0.0,1);
  }

    body.light .trusty-secured {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1366px) {
      .trusty-secured {
        padding: 10px;
        margin-bottom: 15px;
      }}

      @media (max-width: 768px) {
        .trusty-secured {
          padding: 15px;
          margin-bottom: 15px;
        }}
  

        .trusty-secured .secured-icon{
          margin-bottom: 10px;
          font-size: 26px;
          text-align: center;
          color: rgba(255, 255, 255, 0.9);
          text-shadow: none;
        }

        body.light .trusty-secured .secured-icon{
          color: rgba(0, 0, 0, 0.9)
        }

        @media (max-width: 1366px) {
          .trusty-secured .secured-icon{
            margin-top: 5px;
          }}

  .trusty-secured-title {
    margin-bottom: 0px;
    font-size: 36px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500;
  }
  

  body.dark .trusty-secured-title  {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  }

    body.light .trusty-secured-title  {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
  }

  @media (max-width: 1366px) {
    .trusty-secured-title  {
      margin-top: 10px;
      font-size: 20px;
    }}
  
    @media (max-width: 768px) {
      .trusty-secured-title  {
        margin: 0 auto;
        margin-top: 6px;
        font-size: 25px;
        width: 70%;
        text-align: center;
      }}

      .trusty-secured-desc {
        margin-top: 5px;
        margin-bottom: 15px;
        font-size: 16px;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        font-style: italic;
      }

          body.light .trusty-secured-desc  {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
  }

      @media (max-width: 1366px) {
        .trusty-secured-desc {
          margin-top: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        }}

      @media (max-width: 768px) {
        .trusty-secured-desc {
          margin: 0 auto;
          margin-top: 10px;
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 16px;
        width: 95%;
        }}

  .trusty-secured-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
  }

  @media (max-width: 1366px) {
    .trusty-secured-container {
      gap: 10px;
    }}

    @media (max-width: 768px) {
      .trusty-secured-container {
        grid-template-columns: repeat(minmax(100px, 1fr));
        gap: 10px;
      }}
  
  .trusty-secured-item {
    text-align: center;
    text-decoration: none;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 20px 15px 20px 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }

  body.dark .trusty-secured-item {
    background: rgba(0,0,0,0.1);
  }

    body.light .trusty-secured-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1366px) {
    .trusty-secured-item {
      padding: 10px 10px 15px 10px;
    }}

    @media (max-width: 768px) {
      .trusty-secured-item {
        padding: 15px 15px 15px 15px;
      }}
  


  .trusty-secured-date {
    font-size: 11px;
    text-align: center;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500;
    position: absolute;
    top: 3px;
    right: 3px;
    font-style: italic;
  }
  
      body.light .trusty-secured-date {
        color: rgba(0, 0, 0, 0.9);
      }

  @media (max-width: 1366px) {
        .trusty-secured-date {
    font-size: 10px;
        }}

          @media (max-width: 768px) {
        .trusty-secured-date {
    font-size: 11px;
        }}



  .trusty-secured-item h3 {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0px;
    font-size:20px;
  }

  body.light   .trusty-secured-item h3 {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .trusty-secured-item h3 {
      font-size: 15px;
    }}

    @media (max-width: 768px) {
      .trusty-secured-item h3 {
        margin-bottom: 0px;
        font-size: 15px;
        font-weight: 400;
      }}
  
  .trusty-secured-item p {
    color: 1px solid rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 18px;
    min-height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    body.light   .trusty-secured-item p {
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .trusty-secured-item p {
      font-size: 11px;
      line-height: 15px;
      margin-bottom: 10px;
    }}

    @media (max-width: 768px) {
      .trusty-secured-item p {
        font-size: 14px;
        line-height: 17px;
        margin: 0 auto;
        margin-bottom: 10px;
        max-width: 95%;
      }}

  .trusty-secured-item a {
    color: 1px solid rgba(255, 255, 255, 0.9) !important;
    font-size: 15px;
    text-decoration: none;
  }


  @media (max-width: 1366px) {
    .trusty-secured-item a {
      font-size: 12px;
    }}

    @media (max-width: 768px) {
      .trusty-secured-item a {
        font-size: 13px;
      }}
  


 

  .trusty-secured-summary {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
  }

  .trusty-secure-button {
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    width: 100%;
    max-width: 100%;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  body.dark .trusty-secure-button {
    background: rgba(0,0,0,0.1);
  }


  body.light .trusty-secure-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

  .secured-multi-button {
    display: flex; 
    justify-content: space-between;
    align-items:center;
    gap: 10px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }

      @media (max-width: 768px) {
  .secured-multi-button {
    margin-top: 20px;
  }}

  .airdrop-button,
  .campaign-button {
    display: inline-block;
    padding: 10px 10px;
    width: 100%;
    max-width: 100%;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  body.dark .airdrop-button,
  body.dark .campaign-button {
    background: rgba(0,0,0,0.1);
  }



    .trusty-wallet {
      background: rgb(145, 75, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      padding: 20px 20px;
      margin-bottom: 30px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
  
    body.dark .trusty-wallet {
      background: rgba(0.0.0,1);
    }

        body.light .trusty-wallet {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
    }
  
    @media (max-width: 1366px) {
        .trusty-wallet {
          padding: 10px;
          margin-bottom: 15px;
        }}
  
        @media (max-width: 768px) {
          .trusty-wallet {
            padding: 15px;
            margin-bottom: 15px;
          }}
    
  
      
  
    .trusty-wallet-title {
      margin-bottom: 0px;
      font-size: 36px;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
      font-weight: 500;
    }
    
  
    body.dark .trusty-wallet-title  {
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
    }

        body.light .trusty-wallet-title  {
      color: rgba(0, 0, 0, 0.9);
      text-shadow: none;
    }
  
    @media (max-width: 1366px) {
      .trusty-wallet-title  {
        margin-top: 10px;
        font-size: 20px;
      }}
    
      @media (max-width: 768px) {
        .trusty-wallet-title  {
          margin: 0 auto;
          margin-top: 6px;
          font-size: 25px;
          line-height: 29px;
          width: 100%;
          text-align: center;
        }}

        .trusty-wallet-desc {
          margin: 0 auto;
          margin-top: 5px;
          margin-bottom: 15px;
          font-size: 16px;
          text-align: center;
          color: rgba(255, 255, 255, 0.9);
          text-shadow: none;
          font-style: italic;
          width: 90%;
          max-width: 90%;
        }

    body.light .trusty-wallet-desc  {
      color: rgba(0, 0, 0, 0.9);
      text-shadow: none;
    }
  
        @media (max-width: 1366px) {
          .trusty-wallet-desc {
            margin-top: 10px;
          margin-bottom: 15px;
          font-size: 14px;
          }}
  
        @media (max-width: 768px) {
          .trusty-wallet-desc {
            margin: 0 auto;
            margin-top: 10px;
          margin-bottom: 15px;
          font-size: 13px;
          line-height: 16px;
          width: 100%;
          }}


    .trusty-wallet-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
      gap: 20px;
    }
  
    @media (max-width: 1366px) {
      .trusty-wallet-container {
        gap: 10px;
      }}
  
      @media (max-width: 768px) {
        .trusty-wallet-container {
          grid-template-columns: repeat(1, 1fr);
          gap: 10px;
        }}
    
    .trusty-wallet-item {
      text-align: center;
      text-decoration: none;
      background: rgb(145, 75, 255, 0.6);
      border-radius: 8px;
      padding: 20px 15px 20px 15px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0px;
    }
  
    body.dark .trusty-wallet-item {
      background: rgba(0,0,0,0.1);
    }

        body.light .trusty-wallet-item  {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
    }
  
    @media (max-width: 1366px) {
      .trusty-wallet-item {
        padding: 10px 10px 15px 10px;
      }}
  
      @media (max-width: 768px) {
        .trusty-wallet-item {
          padding: 15px;
        }}
    

    .trusty-wallet-item-title {
      color: 1px solid rgba(255, 255, 255, 0.9);
      margin-bottom: 0px;
      font-size: 20px;
      font-weight: 500;
    }

    body.light .trusty-wallet-item-title {
      color: rgba(0, 0, 0, 0.9)
    }
  
    @media (max-width: 1366px) {
      .trusty-wallet-item-title {
        font-size: 14px;
      }}
  
      @media (max-width: 768px) {
        .trusty-wallet-item-title {
          margin-bottom: 0px;
          font-size: 15px;
        }}
    

        .trusty-wallet-item-address {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.9);
          text-decoration: none;
          margin-top: 5px;
          word-break: break-all;
          overflow-wrap: anywhere;
        }
      
        body.dark .trusty-wallet-item-address {
          background: transparent;
        }
      
      body.light .trusty-wallet-item-address {
      background: transparent;
      color: rgba(0, 0, 0, 0.9)
    }

        .trusty-wallet-item-address i {
          margin-right: 5px;
        }


    .trusty-wallet-item-desc {
      color: rgba(255, 255, 255, 0.9);
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 15px;
      line-height: 19px;
      word-break: break-word;
      overflow-wrap: anywhere;
      min-height: 100px;
      align-items: center;
    }

        body.light .trusty-wallet-item-desc {
      color: rgba(0, 0, 0, 0.9)
    }

    .trusty-wallet-item-desc a {
      color: rgba(255, 255, 255, 0.9);
    }
  
    body.light .trusty-wallet-item-desc a {
      color: rgba(0, 0, 0, 0.9)
    }

    @media (max-width: 1366px) {
      .trusty-wallet-item-desc {
        font-size: 11px;
        line-height: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
      }}
  
      @media (max-width: 768px) {
        .trusty-wallet-item-desc {
          font-size: 13px;
          line-height: 17x;
          margin: 0 auto;
          margin-top: 10px;
          margin-bottom: 0px;
          max-width: 95%; 
        }}
  

  .trusty-wtb {
    background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  body.dark .trusty-wtb {
    background: rgba(0.0.0,1);
  }

    body.light .trusty-wtb {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }


    @media (max-width: 1366px) {
    .trusty-wtb {
      padding: 15px;
      margin-bottom: 15px;
    }}

  @media (max-width: 768px) {
    .trusty-wtb {
      padding: 15px;
      margin-bottom: 15px;
    }}
  
  .trusty-wtb-title {
    margin-bottom: 0px;
    font-size: 36px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500 !important;
  }

  body.dark .trusty-wtb-title {
  text-shadow: none;
  }


   body.light .trusty-wtb-title {
  color: rgba(0, 0, 0, 0.9)
  }

    @media (max-width: 1366px) {
    .trusty-wtb-title {
      font-size: 26px;
    }}

  @media (max-width: 768px) {
    .trusty-wtb-title {
      font-size: 26px;
    }}

  .trusty-wtb-desc {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-style: italic;
  }

     body.light .trusty-wtb-desc {
  color: rgb(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .trusty-wtb-desc {
      margin-top: 6px;
    margin-bottom: 15px;
    font-size: 13px;
    }}

  @media (max-width: 768px) {
    .trusty-wtb-desc {
      margin-top: 6px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 16px;
    width: 95%;
    max-width: 95%;
    }}

  .trusty-wtb-desc a {
    margin-left: 3px;
    color: rgba(255, 255, 255, 0.9);
  }
  
       body.light .trusty-wtb-desc a {
  color: rgb(0, 0, 0, 0.9);
  }


  .trusty-wtb-item-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    gap: 20px;
    justify-content: center;
    align-items: center;
  }


    @media (max-width: 768px) {
      .trusty-wtb-item-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 12px;
        gap: 12px;
      }}

  .trusty-wtb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 8px;
    padding: 15px 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  body.dark .trusty-wtb-item {
    background: rgba(0,0,0,0.1);
  }

    body.light .trusty-wtb-item {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  }


  @media (max-width: 768px) {
    .trusty-wtb-item {
      padding: 10px 3px;
    }}

  .trusty-wtb-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1); 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); 
  }
  
  @media (max-width: 768px) {
    .trusty-wtb-item img {
      width: 76px;
      height: 76px;
    }}

  .trusty-wtb-item span {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    text-align: center;
    vertical-align: middle;
  }

       body.light .trusty-wtb-item span {
  color: rgb(0, 0, 0, 0.9);
  }


    @media (max-width: 1366px) {
    .trusty-wtb-item span {
      font-size: 13px;
      line-height: 13px;
    }}

  @media (max-width: 768px) {
    .trusty-wtb-item span {
      font-size: 13px;
      line-height: 13px;
    }}

  .trusty-wtb-item i {
    margin-left: 5px;
    font-size: 12px;
    line-height: 12px;
  }

  @media (max-width: 1366px) {
    .trusty-wtb-item i {
      font-size: 9px;
      line-height: 12px;
    }}
     

  @media (max-width: 768px) {
    .trusty-wtb-item i {
      font-size: 10px;
      line-height: 13px;
    }}
     


.trusty-wtb-see-more {
    display: inline-block;
    padding: 10px 10px;
    width: auto;
    max-width: auto;
    background: rgb(145, 75, 255, 0.6);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
  }

  @media (max-width: 1366px) {
    .trusty-wtb-see-more {
      display: inline-block;
      padding: 6px 40px;
    }}

    @media (max-width: 7686px) {
      .trusty-wtb-see-more {
        display: inline-block;
        padding: 6px 10px;
      }}


  body.dark .trusty-wtb-see-more {
    background: rgba(0,0,0,0.1);
  }

  body.light .trusty-wtb-see-more {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  }

      .trusty-airdrop-box {
        background: rgb(145, 75, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        padding: 40px 20px;
        margin-bottom: 30px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: center;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      body.dark .trusty-airdrop-box {
        background: rgba(0.0.0,1);
      }

      @media (max-width: 768px) {
        .trusty-airdrop-box {
          padding: 20px 10px 15px 10px;
        }}
      
      .trusty-airdrop-title {
        font-size: 86px;
        font-weight: 500;
        color: rgba(255, 255, 255,1);
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        text-transform: none;
        z-index: 666 !important;
      }

      body.dark .trusty-airdrop-title {
        text-shadow: none;
      }

      @media (max-width: 1366px) {
        .trusty-airdrop-title {
          font-size: 56px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-title {
          font-size: 28px;
        }}


       
      .trusty-airdrop-box .opener-icon {
        font-size: 126px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        margin-bottom: 10px;
        animation: jingle 1.2s infinite ease-in-out;
        transform-origin: center;
      }

      body.dark .trusty-airdrop-box .opener-icon {
        text-shadow: none;
      }


      @media (max-width: 1366px) {
        .trusty-airdrop-box .opener-icon {
          font-size: 66px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-box .opener-icon {
          font-size: 86px;
        }}

      @keyframes jingle {
        0%   { transform: rotate(0deg); }
        10%  { transform: rotate(-10deg); }
        20%  { transform: rotate(10deg); }
        30%  { transform: rotate(-8deg); }
        40%  { transform: rotate(8deg); }
        50%  { transform: rotate(-4deg); }
        60%  { transform: rotate(4deg); }
        70%  { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
      }
    

      .trusty-airdrop-box .trusty-style-title {
        font-family: 'Iceland', sans-serif;
        font-size: 120px;
        font-weight: 500;
        margin: 0px 0px 0px 10px;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        z-index: 666 !important;
        position: relative;
      }

      body.dark .trusty-airdrop-box .trusty-style-title {
        text-shadow: none;
      }

      @media (max-width: 1366px) {
        .trusty-airdrop-box .trusty-style-title {
          font-size: 80px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-box .trusty-style-title {
          font-size: 38px;
          margin: 0px 0px 3px 5px;
        }}
      
      .trusty-airdrop-desc {
        margin-top: 10px;
        font-size: 23px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        z-index: 666 !important;
        position: relative;
      }

      @media (max-width: 1366px) {
        .trusty-airdrop-desc {
          margin-top: 6px;
          font-size: 18px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-desc {
          margin: 0 auto;
          margin-top: 6px;
          font-size: 14px;
          line-height: 16px;
          width: 95%;
          max-width: 95%;
        }}

      .trusty-airdrop-box .trusty-style-desc {
        font-family: 'Iceland', sans-serif;
        font-size: 35px;
        font-weight: 500;
        margin: 0px 4px;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        z-index: 666 !important;
        position: relative;
      }

      body.dark .trusty-airdrop-box .trusty-style-desc {
        text-shadow: none;
        font-weight: 500;
      }

      @media (max-width: 1366px) {
        .trusty-airdrop-box .trusty-style-desc {
          font-size: 28px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-box .trusty-style-desc {
          font-size: 22px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.9);
        }}
      
      .trusty-airdrop-claim-button {
        margin-top: 15px;
        font-size: 18px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: none;
        background: rgb(145, 75, 255, 0.6);
        border-radius: 8px;
        padding: 10px 25px;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        z-index: 666 !important;
        position: relative;
      }


      @media (max-width: 1366px) {
        .trusty-airdrop-claim-button {
          font-size: 13px;
          padding: 10px 25px;
        }}

      @media (max-width: 768px) {
        .trusty-airdrop-claim-button {
          font-size: 14px;
          padding: 10px 25px;
        }}


      body.dark .trusty-airdrop-claim-button {
        background: rgba(0,0,0,0.2);
      }
      
      
      .trusty-airdrop-claim-button[disabled] {
        cursor: not-allowed;
      }
      
      .trusty-airdrop-note {
        margin: 0 auto;
        margin-top: 15px;
        font-size: 17px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        vertical-align: middle;
        z-index: 2 !important;
        position: relative;
        width: 90%;
        max-width: 90%;
      }

      @media (max-width: 1366px) {
        .trusty-airdrop-note {
          font-size: 13px;
        }}



      .trusty-airdrop-note a {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: underline;
        font-weight: 500;
      }

      body.dark .trusty-airdrop-note a {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: underline;
        font-weight: 500;
      }

      .trusty-airdrop-note .airdrop-link {
        color: rgba(255, 255, 255, 0.9);
        margin-left: 3px;
        text-decoration: underline;
        font-weight: 500;
      }

      body.dark .trusty-airdrop-note .airdrop-link {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: underline;
        font-weight: 500;
      }

      .trusty-airdrop-note .airdrop-ontheway {
        margin-right: 6px;
      }

      .airdrop-claimed {
        color: rgba(0, 255, 163, 1);
        margin-right: 6px;
      }

      .abuse-detected {
        color: rgba(240, 255, 0, 0.9);
        margin-right: 6px;
      }
      
    

      .trusty-coin-rain {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0 !important;
      }

      .trusty-coin {
        position: absolute;
        top: -66px;
        opacity: 0.6;
        animation: fall 3s linear infinite;
        object-fit: contain;
        display: inline-block;
        z-index: 0 !important;
      }
      
      .trusty-coin-1 { left: 3.0%; animation-delay: 2.1s; animation-duration: 11.9s; width: 46px; }
      .trusty-coin-2 { left: 6.8%; animation-delay: 5.6s; animation-duration: 8.6s; width: 46px; }
      .trusty-coin-3 { left: 8.6%; animation-delay: 6.3s; animation-duration: 10.3s; width: 36px; }
      .trusty-coin-4 { left: 11.4%; animation-delay: 2.7s; animation-duration: 11.0s; width: 46px; }
      .trusty-coin-5 { left: 13.2%; animation-delay: 1.0s; animation-duration: 10.7s; width: 46px; }
      .trusty-coin-6 { left: 15.0%; animation-delay: 1.1s; animation-duration: 11.1s; width: 36px; }
      .trusty-coin-7 { left: 16.8%; animation-delay: 8.6s; animation-duration: 11.9s; width: 46px; }
      .trusty-coin-8 { left: 18.6%; animation-delay: 0.7s; animation-duration: 11.2s; width: 46px; }
      .trusty-coin-9 { left: 20.4%; animation-delay: 3.2s; animation-duration: 8.1s; width: 36px; }
      .trusty-coin-10 { left: 22.2%; animation-delay: 2.5s; animation-duration: 10.4s; width: 36px; }
      .trusty-coin-11 { left: 24.0%; animation-delay: 2.6s; animation-duration: 10.3s; width: 36px; }
      .trusty-coin-12 { left: 25.8%; animation-delay: 5.4s; animation-duration: 9.4s; width: 36px; }
      .trusty-coin-13 { left: 27.6%; animation-delay: 4.8s; animation-duration: 11.3s; width: 36px; }
      .trusty-coin-14 { left: 29.3%; animation-delay: 4.3s; animation-duration: 9.5s; width: 36px; }
      .trusty-coin-15 { left: 31.1%; animation-delay: 7.7s; animation-duration: 10.7s; width: 46px; }
      .trusty-coin-16 { left: 32.9%; animation-delay: 0.8s; animation-duration: 11.6s; width: 46px; }
      .trusty-coin-17 { left: 34.7%; animation-delay: 1.4s; animation-duration: 11.8s; width: 36px; }
      .trusty-coin-18 { left: 36.5%; animation-delay: 3.4s; animation-duration: 9.2s; width: 36px; }
      .trusty-coin-19 { left: 38.3%; animation-delay: 7.1s; animation-duration: 11.5s; width: 46px; }
      .trusty-coin-20 { left: 40.1%; animation-delay: 6.8s; animation-duration: 10.7s; width: 36px; }
      .trusty-coin-21 { left: 41.9%; animation-delay: 2.7s; animation-duration: 10.9s; width: 46px; }
      .trusty-coin-22 { left: 43.7%; animation-delay: 9.7s; animation-duration: 10.9s; width: 46px; }
      .trusty-coin-23 { left: 45.5%; animation-delay: 4.8s; animation-duration: 9.7s; width: 46px; }
      .trusty-coin-24 { left: 47.3%; animation-delay: 8.7s; animation-duration: 10.8s; width: 36px; }
      .trusty-coin-25 { left: 49.1%; animation-delay: 5.7s; animation-duration: 11.5s; width: 46px; }
      .trusty-coin-26 { left: 50.9%; animation-delay: 2.7s; animation-duration: 8.4s; width: 46px; }
      .trusty-coin-27 { left: 52.7%; animation-delay: 9.4s; animation-duration: 8.7s; width: 46px; }
      .trusty-coin-28 { left: 54.5%; animation-delay: 4.3s; animation-duration: 11.4s; width: 46px; }
      .trusty-coin-29 { left: 56.3%; animation-delay: 9.1s; animation-duration: 8.8s; width: 36px; }
      .trusty-coin-30 { left: 58.1%; animation-delay: 0.5s; animation-duration: 9.6s; width: 46px; }
      .trusty-coin-31 { left: 59.9%; animation-delay: 4.4s; animation-duration: 11.4s; width: 36px; }
      .trusty-coin-32 { left: 61.7%; animation-delay: 6.0s; animation-duration: 9.1s; width: 46px; }
      .trusty-coin-33 { left: 63.5%; animation-delay: 5.3s; animation-duration: 10.8s; width: 36px; }
      .trusty-coin-34 { left: 65.3%; animation-delay: 4.5s; animation-duration: 8.5s; width: 46px; }
      .trusty-coin-35 { left: 67.1%; animation-delay: 6.3s; animation-duration: 12.0s; width: 46px; }
      .trusty-coin-36 { left: 68.9%; animation-delay: 3.0s; animation-duration: 8.0s; width: 36px; }
      .trusty-coin-37 { left: 70.7%; animation-delay: 3.1s; animation-duration: 8.5s; width: 46px; }
      .trusty-coin-38 { left: 72.4%; animation-delay: 7.5s; animation-duration: 10.5s; width: 36px; }
      .trusty-coin-39 { left: 74.2%; animation-delay: 1.7s; animation-duration: 10.4s; width: 36px; }
      .trusty-coin-40 { left: 76.0%; animation-delay: 8.9s; animation-duration: 8.8s; width: 46px; }
      .trusty-coin-41 { left: 77.8%; animation-delay: 2.0s; animation-duration: 11.0s; width: 36px; }
      .trusty-coin-42 { left: 79.6%; animation-delay: 6.2s; animation-duration: 8.8s; width: 46px; }
      .trusty-coin-43 { left: 81.4%; animation-delay: 1.5s; animation-duration: 11.8s; width: 36px; }
      .trusty-coin-44 { left: 83.2%; animation-delay: 0.5s; animation-duration: 9.3s; width: 36px; }
      .trusty-coin-45 { left: 85.0%; animation-delay: 3.8s; animation-duration: 11.6s; width: 36px; }
      .trusty-coin-46 { left: 86.8%; animation-delay: 5.8s; animation-duration: 9.7s; width: 36px; }
      .trusty-coin-47 { left: 88.6%; animation-delay: 5.1s; animation-duration: 11.7s; width: 46px; }
      .trusty-coin-48 { left: 90.4%; animation-delay: 1.2s; animation-duration: 9.1s; width: 46px; }
      .trusty-coin-49 { left: 92.2%; animation-delay: 7.5s; animation-duration: 10.8s; width: 36px; }
      .trusty-coin-50 { left: 94.0%; animation-delay: 9.7s; animation-duration: 8.5s; width: 46px; }



      @media (max-width: 768px) {

      .trusty-coin-1 { left: 3.0%; animation-delay: 2.1s; animation-duration: 11.9s; width: 36px; }
      .trusty-coin-2 { left: 6.8%; animation-delay: 5.6s; animation-duration: 8.6s; width: 36px; }
      .trusty-coin-3 { left: 8.6%; animation-delay: 6.3s; animation-duration: 10.3s; width: 26px; }
      .trusty-coin-4 { left: 11.4%; animation-delay: 2.7s; animation-duration: 11.0s; width: 36px; }
      .trusty-coin-5 { left: 13.2%; animation-delay: 1.0s; animation-duration: 10.7s; width: 36px; }
      .trusty-coin-6 { left: 15.0%; animation-delay: 1.1s; animation-duration: 11.1s; width: 26px; }
      .trusty-coin-7 { left: 16.8%; animation-delay: 8.6s; animation-duration: 11.9s; width: 36px; }
      .trusty-coin-8 { left: 18.6%; animation-delay: 0.7s; animation-duration: 11.2s; width: 36px; }
      .trusty-coin-9 { left: 20.4%; animation-delay: 3.2s; animation-duration: 8.1s; width: 26px; }
      .trusty-coin-10 { left: 22.2%; animation-delay: 2.5s; animation-duration: 10.4s; width: 26px; }
      .trusty-coin-11 { left: 24.0%; animation-delay: 2.6s; animation-duration: 10.3s; width: 26px; }
      .trusty-coin-12 { left: 25.8%; animation-delay: 5.4s; animation-duration: 9.4s; width: 26px; }
      .trusty-coin-13 { left: 27.6%; animation-delay: 4.8s; animation-duration: 11.3s; width: 26px; }
      .trusty-coin-14 { left: 29.3%; animation-delay: 4.3s; animation-duration: 9.5s; width: 26px; }
      .trusty-coin-15 { left: 31.1%; animation-delay: 7.7s; animation-duration: 10.7s; width: 36px; }
      .trusty-coin-16 { left: 32.9%; animation-delay: 0.8s; animation-duration: 11.6s; width: 36px; }
      .trusty-coin-17 { left: 34.7%; animation-delay: 1.4s; animation-duration: 11.8s; width: 26px; }
      .trusty-coin-18 { left: 36.5%; animation-delay: 3.4s; animation-duration: 9.2s; width: 26px; }
      .trusty-coin-19 { left: 38.3%; animation-delay: 7.1s; animation-duration: 11.5s; width: 36px; }
      .trusty-coin-20 { left: 40.1%; animation-delay: 6.8s; animation-duration: 10.7s; width: 26px; }
      .trusty-coin-21 { left: 41.9%; animation-delay: 2.7s; animation-duration: 10.9s; width: 36px; }
      .trusty-coin-22 { left: 43.7%; animation-delay: 9.7s; animation-duration: 10.9s; width: 36px; }
      .trusty-coin-23 { left: 45.5%; animation-delay: 4.8s; animation-duration: 9.7s; width: 36px; }
      .trusty-coin-24 { left: 47.3%; animation-delay: 8.7s; animation-duration: 10.8s; width: 26px; }
      .trusty-coin-25 { left: 49.1%; animation-delay: 5.7s; animation-duration: 11.5s; width: 36px; }
      .trusty-coin-26 { left: 50.9%; animation-delay: 2.7s; animation-duration: 8.4s; width: 36px; }
      .trusty-coin-27 { left: 52.7%; animation-delay: 9.4s; animation-duration: 8.7s; width: 36px; }
      .trusty-coin-28 { left: 54.5%; animation-delay: 4.3s; animation-duration: 11.4s; width: 36px; }
      .trusty-coin-29 { left: 56.3%; animation-delay: 9.1s; animation-duration: 8.8s; width: 26px; }
      .trusty-coin-30 { left: 58.1%; animation-delay: 0.5s; animation-duration: 9.6s; width: 36px; }
      .trusty-coin-31 { left: 59.9%; animation-delay: 4.4s; animation-duration: 11.4s; width: 26px; }
      .trusty-coin-32 { left: 61.7%; animation-delay: 6.0s; animation-duration: 9.1s; width: 36px; }
      .trusty-coin-33 { left: 63.5%; animation-delay: 5.3s; animation-duration: 10.8s; width: 26px; }
      .trusty-coin-34 { left: 65.3%; animation-delay: 4.5s; animation-duration: 8.5s; width: 36px; }
      .trusty-coin-35 { left: 67.1%; animation-delay: 6.3s; animation-duration: 12.0s; width: 36px; }
      .trusty-coin-36 { left: 68.9%; animation-delay: 3.0s; animation-duration: 8.0s; width: 26px; }
      .trusty-coin-37 { left: 70.7%; animation-delay: 3.1s; animation-duration: 8.5s; width: 36px; }
      .trusty-coin-38 { left: 72.4%; animation-delay: 7.5s; animation-duration: 10.5s; width: 26px; }
      .trusty-coin-39 { left: 74.2%; animation-delay: 1.7s; animation-duration: 10.4s; width: 26px; }
      .trusty-coin-40 { left: 76.0%; animation-delay: 8.9s; animation-duration: 8.8s; width: 36px; }
      .trusty-coin-41 { left: 77.8%; animation-delay: 2.0s; animation-duration: 11.0s; width: 26px; }
      .trusty-coin-42 { left: 79.6%; animation-delay: 6.2s; animation-duration: 8.8s; width: 36px; }
      .trusty-coin-43 { left: 81.4%; animation-delay: 1.5s; animation-duration: 11.8s; width: 26px; }
      .trusty-coin-44 { left: 83.2%; animation-delay: 0.5s; animation-duration: 9.3s; width: 26px; }
      .trusty-coin-45 { left: 85.0%; animation-delay: 3.8s; animation-duration: 11.6s; width: 26px; }
      .trusty-coin-46 { left: 86.8%; animation-delay: 5.8s; animation-duration: 9.7s; width: 26px; }
      .trusty-coin-47 { left: 88.6%; animation-delay: 5.1s; animation-duration: 11.7s; width: 36px; }
      .trusty-coin-48 { left: 90.4%; animation-delay: 1.2s; animation-duration: 9.1s; width: 36px; }
      .trusty-coin-49 { left: 92.2%; animation-delay: 7.5s; animation-duration: 10.8s; width: 26px; }
      .trusty-coin-50 { left: 94.0%; animation-delay: 9.7s; animation-duration: 8.5s; width: 36px; }


      }

      @keyframes fall {
        0% {
          transform: translateY(0) rotate(0deg);
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        100% {
          transform: translateY(100vh) rotate(360deg);
          opacity: 0;
        }
      }



      
      
.trusty-chart-container {
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  margin-bottom: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgb(145, 75, 255, 0.1);
}
  

body.dark .trusty-chart-container {
    background: rgba(0.0.0,1);
}

body.light .trusty-chart-container {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

      @media (max-width: 1366px) {
      .trusty-chart-container {
  margin-bottom: 15px;
        }}

      @media (max-width: 768px) {
      .trusty-chart-container {
            padding-bottom: 105%;
        }}

.trusty-chart-title {
  position: relative;
  margin: 0;
  padding: 15px 0px 15px 0px;
  font-size: 26px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    font-weight: 500;
  z-index: 999;
}

body.dark .trusty-chart-title {
      color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
  }

  body.light .trusty-chart-title {
      color: rgba(0, 0, 0, 0.9);
      text-shadow: none;
  }

        @media (max-width: 1366px) {
      .trusty-chart-title {
  padding: 10px 0px 8px 0px;
  font-size: 24px;
        }}

      @media (max-width: 768px) {
      .trusty-chart-title {
  padding: 10px 0px 10px 0px;
  font-size: 22px;
        }}

.trusty-chart {
  position: relative;
  width: 97.5%;
  padding-bottom: 43%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

      @media (max-width: 768px) {
        .trusty-chart {
            width: 93%;
            padding-bottom: 88.8%;
        }}

.trusty-chart iframe {
  position: absolute;
  top: 0px; 
  left: 0;
  width: 100%;
  height: calc(100% - 0px);
  border: none;
  border-radius: 8px;
  padding: 0px;
  z-index: 99;
}

.trusty-refresh {
  background: rgb(145, 75, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  top: 10px;
  right: 10px;
}

body.dark .trusty-refresh {
  background: rgba(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .trusty-refresh {
      width: 23px;
      height: 23px;
        border-radius: 6px;
  }}

.trusty-refresh i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

@media (max-width: 1366px) {
  .trusty-refresh i {
      font-size: 10px;
  }}

.refreshing i {
  animation: spin 1s linear infinite;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.trusty-on-solana img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.guides-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  max-height: 89vh;
  margin: 0 auto;
  padding: 0px;
  color: rgba(0, 0, 0, 0.7);
  background: rgb(145, 75, 255, 0.6);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.dark .guides-container {
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

body.light .guides-container {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

@media (max-width: 1366px) {
  .guides-container {
    padding: 0px 0px;
  }
}

@media (max-width: 768px) {
  .guides-container {
    width: 95%;
    max-width: 95%;
    flex-direction: column;
  }
}


.guides-sidebar {
  width: 25%;
  height: calc(100vh - 200px);
  max-height: 89vh;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px 0px;
  position: -webkit-sticky;
  position: sticky;
  top: 20px; 
  overflow-y: auto;
}

body.light .guides-sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .guides-sidebar {
    top: 10px; 
    height: calc(100vh - 10px);
    padding: 10px 0px;
  }
}

@media (max-width: 768px) {
  .guides-sidebar {
    width: 100%;
    top: 0; 
    height: auto;
    max-height: 30vh;
    padding: 10px 0px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}


.guides-sidebar-header-title {
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  text-align: center;
}

body.light .guides-sidebar-header-title {
  color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
  .guides-sidebar-header-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .guides-sidebar-header-title {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

.guides-section {
  margin-bottom: 20px;
}

.guides-section-title {
  padding: 0px 15px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

body.light .guides-section-title {
  color: rgba(0, 0, 0, 0.9)
}

.guides-section-title.clickable {
  cursor: pointer;
}

.guides-item-label {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  transition: all 0.2s;
}

body.light .guides-item-label {
  color: rgba(0, 0, 0, 0.9)
}

body.light .guides-item-label i {
  color: rgba(0, 0, 0, 0.9)
}


.guides-label-text {
  text-align: left;
  line-height: 1;
}

.guides-item-label.active {
  background: rgba(255,255,255,0.2);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-weight: 300;
}

body.dark .guides-item-label.active {
  background: rgba(255,255,255,0.2);
}

body.light .guides-item-label.active {
  background: rgba(0,0,0,0.1);
  color: rgba(0, 0, 0, 0.9);
}


.guides-arrow {
  margin-left: auto;
  font-size: 14px; 
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.guides-arrow {
  transform: rotate(0deg);
}

.guides-arrow.open {
  transform: rotate(90deg);
}

.guides-sub-items {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  padding-left: 20px;
}

.guides-sub-items .guides-item-label.sub {
padding: 8px 15px;
  font-size: 15px;
  font-weight: 300;
  justify-content: flex-start;
}

.guides-sub-items .guides-item-label.sub.active {
  background: rgba(255,255,255,0.1);
}

body.dark .guides-sub-items .guides-item-label.sub.active {
  background: rgba(255,255,255,0.2);
}

.guides-content {
  flex-grow: 1;
  padding: 20px 20px;
  width: 75%;
  max-width: 75%; 
  color: rgba(255, 255, 255, 0.9);
}

body.light .guides-content {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
  .guides-content {
    padding: 10px 15px;
  }
}

@media (max-width: 768px) {
  .guides-content {
    width: 100%;
    max-width: 100%;
    padding: 10px 10px;
    overflow-y: auto;
  }
}

.guides-page-title {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 15px;
  text-align: center;
}

body.light .guides-page-title {
  color: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px) {
  .guides-page-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
}

@media (max-width: 768px) {
  .guides-page-title {
    font-size: 15px;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
}


.guides-article-body {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  max-width: 100%;
}

body.light .guides-article-body {
    color: rgba(0, 0, 0, 0.9);
}


@media (max-width: 1366px) {
  .guides-article-body {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
}

@media (max-width: 768px) {
  .guides-article-body {
    font-size: 11px;
    line-height: 15px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
  }
}

.guides-article-body h2 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 20px;
  padding-bottom: 5px;
}

@media (max-width: 1366px) {
  .guides-article-body h2 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 13px;
  }
}

.guides-article-body h3 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 18px;
}

@media (max-width: 1366px) {
  .guides-article-body h3 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 13px;
  }
}

.guides-article-body p {
  transform: scaleY(0.95);
  margin-bottom: 15px;
}

@media (max-width: 1366px) {
  .guides-article-body p {
    margin-bottom: 10px;
  }
}

.guides-article-body ul {
  margin-bottom: 15px;
  padding-left: 40px;
}

@media (max-width: 1366px) {
  .guides-article-body ul {
    margin-bottom: 10px;
    padding-left: 30px;
  }
}

.guides-article-body ol {
  margin-bottom: 15px;
  padding-left: 40px;
}

@media (max-width: 1366px) {
  .guides-article-body ol {
    margin-bottom: 10px;
    padding-left: 30px;
  }
}

.guides-article-body li {
  margin-bottom: 8px;
}

.guides-article-body hr {
  margin-bottom: 8px;
}


.guides-article-body code {
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
}

body.light .guides-article-body code {
    background: rgba(0, 0, 0, 0.9);
    color: rgba(255,255,255,1);
}

.guides-not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
}

.guides-sub-content {
  padding-left: 20px;
}

.guides-big {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
}

.guides-medium {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.guides-highlight {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
}
.treo-globalback {
  position: fixed;
  inset: 0;
  z-index: 9999 !important;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-position: var(--treo-bg-pos, center center);
  will-change: transform;
  transform: translateX(-100%);
  animation: TreoAppear 0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: saturate(1.02) contrast(1.05);
  min-height: 100vh;
  min-width: 100vw;
}

@keyframes TreoAppear {
  from {
    transform: translateX(-100%) scale(1.06);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 768px) {
  .treo-globalback {
    background-position: 10% 36% !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {
  .treo-globalback {
    transform: scale(1.02);
  }
}


.treo-globalback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 0; 
}


body.dark .treo-globalback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 0; 
}

body:has(.not-found-overlay) .user-header,
body:has(.not-found-overlay) .main-footer,
body:has(.not-found-overlay) .global-footer,
body:has(.not-found-overlay) .ask-treo,
body:has(.not-found-overlay) .agent-interaction-dock-button,
body:has(.not-found-overlay) .float-chat-button,
body:has(.not-found-overlay) .agent-interaction-dock,
body:has(.not-found-overlay) .float-chatbox  {
  display: none !important;
  z-index: 0 !important;
}

.not-found-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,1);
    z-index: 9999 !important;
}

.not-found-box {
    margin-top: -50px;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999999 !important;
}

.not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}



.not-found h1 {
    font-size: 150px;
     color: rgba(145, 75, 255, 0.6);
    text-shadow: none;
    text-align: center;
}

@media (max-width: 1366px) {
  .not-found h1 {
    font-size: 150px;
}}

@media (max-width: 768px) {
  .not-found h1 {
    font-size: 100px;
}}
  
.not-found p {
    font-size: 35px;
    color: rgba(225, 255, 255, 0.9);
    text-shadow: none;
    text-align: center;
}

@media (max-width: 1366px) {
  .not-found p {
    font-size: 25px;
}}

@media (max-width: 768px) {
  .not-found p {
    font-size: 25px;
    width: 75%;
    max-width: 75%;
}}

.not-found-button {
  margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (max-width: 768px) {
  .not-found-button {
       gap: 15px;
}}

.not-found-button a {
font-size: 18px;
font-weight: 500;
color: rgba(255,255,255,1);
text-shadow: none;
background: rgba(145, 75, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
padding: 15px 30px;
border-radius: 7px;
width: auto;
min-width: 150px;
text-align: center;
cursor: pointer;
text-decoration: none;
}

  @media (max-width: 1366px) {
 .not-found-button a {
font-size: 16px;
padding: 12px 30px;
min-width: 100px; 
}}

  @media (max-width: 768px) {
.not-found-button a {
font-size: 14px;
padding: 12px 15px;
min-width: 100px;
}}

.not-found-button-home.build {
    background: linear-gradient(66deg, rgba(145, 75, 255, 0.6), rgba(145, 75, 255, 0.5), rgba(145, 75, 255, 0.6));
    color: rgba(255, 255, 255, 0.9);
    background-size: 200% 200%;
    animation: GradientMove 3s ease-in-out infinite;
}

@keyframes GradientMove {
  0%   { background-position: 0 0; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}

.not-found-button-home.build i {
  display: inline-block;
  animation: shakeFlask 1s infinite ease-in-out;
}

@keyframes shakeFlask {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
  }

  html {
  scroll-padding-top: 150px;
  scroll-behavior: smooth;
  }

  html, body {
  height: 100%;
  margin: 0;
  position: relative;
  }

  body {
    -webkit-user-select: none;
    user-select: none;
}

@font-face {
  font-family: 'ABC Diatype';
  src: url(/static/media/ABCDiatype-Regular.6c547ad118b2bcd3a228.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

i.fas,
i.fa-solid {
    font-weight: 900 !important;
}

i.fab,
i.fa-brands {
    font-weight: 400 !important;
}

i.far,
i.fa-regular {
    font-weight: 400 !important;
}

.allow-select {
  -webkit-user-select: text; 
  user-select: text; 
}

  body.web3 {
  background: linear-gradient(66deg, rgba(153, 69, 255, 1), rgba(20, 241, 149, 1));
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
  }

  body.dark {
  background: rgba(0, 0, 0, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
  }
  
  .web3, .dark {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }

  .defaultpage {
    display: flex;
    padding-top: 0px;
    margin-top: 86px;
    flex: 1 0 auto;
    min-height: calc(100vh - 75px - 100px);
    position: relative;
    z-index: 1;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 1366px) {
    .defaultpage {
      margin-top: 66px;
    }}

  @media (max-width: 768px) {
    .defaultpage {
      width: 100%;
    }}

  .main-content {
    margin-left: 22.7%;  
    width: 82%; 
    padding: 0px 0px 10px 10px;
    min-height: calc(100vh - 75px);
    position: relative;
    overflow-y: auto;
    transition: margin-left 0.3s ease, opacity 0.3s ease;
  }

  @media (max-width: 1366px) {
    .main-content {
      margin-left: 24%;
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    .main-content {
      margin-left: 0;
      width: 100%;
    }

    body.sidebar-open .main-content {
      opacity: 0.7;
      pointer-events: none;
    }
  }

  .forcespace {
  display: block;
  margin-bottom: 0px;
  }
  
  @media (max-width: 768px) {
    .forcespace {
      display: block;
      margin-bottom: 0px;
      }
    }


  .forcespace + table {
  margin-top: 0px;
  }

   .homepage-search-input-container {
    position: relative;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 10px;
  width: 300px;
  z-index: 999;
  }

      @media (max-width: 1366px) {
       .homepage-search-input-container {
  margin-top: 10px;
       }}
  
    @media (max-width: 768px) {
       .homepage-search-input-container {
           width: 97.2%;
          margin-top: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
       }}



.homepage-search-input-container input[type="text"] {
  width: 100%;
  height: 33px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  padding: 0px 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 999;
  }

  body.dark .homepage-search-input-container input[type="text"] {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
  }

    body.light .homepage-search-input-container input[type="text"] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
  }

  @media (max-width: 1366px) {
    .homepage-search-input-container input[type="text"] {
      width: 100%;
      height: 26px;    }
  }

  @media (max-width: 768px) {
    .homepage-search-input-container input[type="text"] {
      width: 100%;
      height: 33px !important;
      padding: 10px;
        }
  }

    .homepage-search-input-container input[type="text"]:hover {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

    .homepage-search-input-container input[type="text"]:focus {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.7);
  font-weight: 300;
  padding: 0px 7px;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: none;
  }

  body.dark .homepage-search-input-container input[type="text"]:focus {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1366px) {
      .homepage-search-input-container input[type="text"]:focus {
    font-size: 12px;
  }}

    @media (max-width: 768px) {
      .homepage-search-input-container input[type="text"]:focus {
    font-size: 13px;
  }}

   .homepage-search-input-container input[type="text"]::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  }

    body.dark .homepage-search-input-container input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 1366px) {
      .homepage-search-input-container input[type="text"]::placeholder {
    font-size: 12px;
  }}

    @media (max-width: 768px) {
      .homepage-search-input-container input[type="text"]::placeholder {
    font-size: 13px;
  }}

  .homepage-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 529px;
  margin-top: 10px;
  margin-left: 0px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  z-index: 1003;
  max-height: 728px;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: dropdownFade 0.2s ease;
  }

  body.dark .homepage-search-dropdown {
    background: rgba(0, 0, 0, 0.8);
  }

  @media (max-width: 1366px) {
    .homepage-search-dropdown {
      width: 400px;
      max-height: 415px;
      margin-top: 5px;
  }}


  @media (max-width: 768px) {
    .homepage-search-dropdown {
      width: 100%;
      margin: 0px;
      top: 38px !important;
      height: auto;
      max-height: 580px;
      box-sizing: border-box;
      margin: 0 auto;
      margin: 0px;
  }}


  .homepage-search-results-message {
    position: absolute;
    top: 7px;
    right: 0;
    text-align: right;
    width: auto;
    margin-top: 0px;
    padding-right: 10px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: none;
    z-index: 1000;
    height: 30px;
    overflow-y: auto;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    animation: none;
    font-size: 11px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
    padding: none;
    font-style: italic;
                padding: 0px 20px 0px 0px;
}

@media (max-width: 1366px) {
  .homepage-search-results-message {
    top: 5px;
    font-size: 10px;
                padding: 0px 20px 0px 0px;
}}

@media (max-width: 768px) {
 .homepage-search-results-message {
    top: 7px;
    font-size: 10px;
    font-weight: 300;
    padding: 0px 10px 0px 0px;
}}

.homepage-search-results-message .search-loading {
      animation: floatUpDown 1.5s ease-in-out infinite;
    }
    
   @keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

  .homepage-search-dropdown:empty {
  display: none;
  }
  @keyframes dropdownFade {
  from {
  opacity: 0;
  transform: translateY(-10px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }

  .homepage-search-result-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
    padding: 10px !important;
  }

  body.dark .homepage-search-result-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
  }

  .homepage-search-result-item:last-child {
  border-bottom: none;
  }

  .homepage-search-result-item a {
  padding: 0px !important;
  text-decoration: none;
  color: rgb(0, 0, 0, 0.6);
  width: 100%;
  display: block;
  transition: background-color 0.2s;
  font-size: 13px;
  }


  .homepage-search-result-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  }

  .homepage-search-result-content img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin-right: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
  }

  body.dark .homepage-search-result-content img {
  background-color: rgba(255,255,255, 1);
}

  @media (max-width: 1366px) {
    .homepage-search-result-content img {
      width: 60px;
      height: 60px;
      margin-right: 8px;
  }}

  @media (max-width: 768px) {
    .homepage-search-result-content img {
      margin-right: 6px;
        width: 66px;
  height: 66px;
    margin-right: 6px;
  }}

  .homepage-search-result-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  }

  @media (max-width: 1366px) {
    .homepage-search-result-text {
      min-height: 50px !important;
  }}

    @media (max-width: 768px) {
    .homepage-search-result-text {
      min-height: 50px !important;
  }}

  .homepage-search-result-item .agentsearchname {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
  color: rgba(0, 0, 0, 0.7);
  }

  body.dark .homepage-search-result-item .agentsearchname {
      color: rgba(255, 255, 255, 0.8)
  }


  @media (max-width: 1366px) {
    .homepage-search-result-item .agentsearchname {
      font-size: 11.5px;
        margin-bottom: 2px;
  }}

  @media (max-width: 768px) {
    .homepage-search-result-item .agentsearchname {
        margin-bottom: 3px;
  }}

  .homepage-search-result-item .agentsearchspecialization {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
    font-weight: 300;
  margin-bottom: 0px;
  }

    body.dark .homepage-search-result-item .agentsearchspecialization {
      color: rgba(255, 255, 255, 0.8)
  }

  @media (max-width: 1366px) {
    .homepage-search-result-item .agentsearchspecialization {
      font-size: 11px;

  }}

    @media (max-width: 768px) {
    .homepage-search-result-item .agentsearchspecialization {
      font-size: 12px;
  }}

  .homepage-search-result-item .agentsearchpricing {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 300;
    }
  
        body.dark .homepage-search-result-item .agentsearchpricing {
      color: rgba(255, 255, 255, 0.6)
  }

    @media (max-width: 1366px) {
      .homepage-search-result-item .agentsearchpricing {
        font-size: 11px;
  
    }}


  .homepage-search-result-item:hover {
  background-color: rgba(145, 75, 255, 0.1);
  }

  body.dark .homepage-search-result-item:hover {
    background-color: rgb(255, 255, 255, 0.1)
    }

      body.light .homepage-search-result-item:hover {
    background-color: rgb(0, 0, 0, 0.1)
    }

.hidden {
  display: none !important;
}


.clickable {
    color: rgba(40, 50, 100, 1) !important;
    cursor: pointer;
  }

body.dark .clickable {
   color: rgba(145, 75, 255,0.7) !important;
}

.agent-builder-announcement-home {
  font-size: 15px;
  line-height: 20px;
  margin: 0 auto;
  margin-bottom: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  background: #e24055;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
border-radius: 8px;
padding: 15px;
width: 98%;
}

body.dark .agent-builder-announcement-home {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
.agent-builder-announcement-home {
  font-size: 11px;
    line-height: 13px;
    margin-bottom: 10px;
    padding: 10px;
}}

@media (max-width: 768px) {
.agent-builder-announcement-home {
  font-size: 12px;
  line-height: 16px;
    margin-bottom: 15px;
        margin-left: 0px;
    width: 97%;
}}

.agent-builder-announcement-home i {
  margin-right: 5px;
  animation: blink 1.2s infinite;
  transition: opacity 0.2s ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

.agent-builder-announcement-home a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-weight: 300;
}

.trusty-on-builder-home {
    display: inline-block;
    font-family: 'Iceland', sans-serif;
    font-size: 20px;
      line-height: 20px;
    font-weight: 300;
    color: rgba(40, 50, 100, 0.9);
    margin-left: 0px;
    top: -2px;
  }

  @media (max-width: 1366px) {
.trusty-on-builder-home {
    font-size: 14px;
      line-height: 14px;
}}

  @media (max-width: 768px) {
.trusty-on-builder-home {
    font-size: 16px;
      line-height: 16px;
}}

.announcement-on-x-home {
  display: block;
  margin: 0 auto;
  margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
background: rgb(145, 75, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 6px 12px;
width: auto;
max-width: 18%;
}

body.dark .announcement-on-x-home {
background: rgb(0, 0, 0, 1);
}

@media (max-width: 1366px) {
  .announcement-on-x-home {
    font-size: 11px;
padding: 3px 10px;
width: auto;
max-width: 25%;
  margin-top: 5px;
}}

@media (max-width: 1366px) {
  .announcement-on-x-home {
    font-size: 11px;
padding: 5px 10px;
width: auto;
max-width: 45%;
  margin-top: 7px;
}}



::-webkit-scrollbar{
width: 3px !important;
}

::-webkit-scrollbar-track {
background-color: rgba(145, 75, 255, 0.1) !important;
width: 3px !important;
}

body.dark ::-webkit-scrollbar-track {
  background-color: rgb(145, 75, 255, 0.1) !important;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 10px !important;
  width: 3px !important;
}

body.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6) !important;
}


::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}




.wallet-adapter-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
   background: rgba(0, 0, 0, 0.3) !important;
  -webkit-backdrop-filter: blur(3px) !important;
          backdrop-filter: blur(3px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* adapter conditioning */
body:has(.wallet-adapter-modal-overlay) .ask-treo,
body:has(.wallet-adapter-modal-overlay) .agent-interaction-dock-button,
body:has(.wallet-adapter-modal-overlay) .float-chat-button {
  display: none !important;
}

.wallet-adapter-modal {
    pointer-events: none !important;
    z-index: 9999 !important;
}

.wallet-adapter-modal-wrapper, 
.wallet-adapter-modal-content {
    pointer-events: auto !important;
}

.wallet-adapter-modal-title {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    margin-bottom: 20px !important;
    padding: 0px !important;
    visibility: hidden !important;
}

.wallet-adapter-modal-title::after {
    content: "Select Wallet"; 
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    margin: 0;
    margin-bottom: 0px;
    padding: 0px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    visibility: visible;
}

.wallet-adapter-modal-button-close {
 display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    padding: 0px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
}

.wallet-adapter-modal-button-close svg {
  background: transparent;
    fill: rgba(255, 255, 255, 0.8) !important;
    transition: fill 200ms ease 0s !important;
    width: auto !important;
    height: auto !important;
}

.wallet-adapter-modal-wrapper {
    background: linear-gradient(100deg, rgba(145, 75, 255, 1), rgba(20, 241, 149, 1)) !important;
    border-radius: 8px !important;
    height: auto !important;
    max-height: 75vh !important;
    width: 22% !important;
    min-width: 22% !important;
    max-width: 22% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    margin: auto !important;
    animation: modalAppear 0.3s ease-out !important;
    position: relative !important;
    z-index: 99999999999 !important;
    overflow: auto !important;
    padding: 25px 25px 25px 25px !important;
}

body.dark .wallet-adapter-modal-wrapper {
    background: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.user-login-options-method.wallet-list-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  gap: 10px;
  width: 100%;    
}

.wallet-adapter-modal-list {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    grid-gap: 10px !important;
    gap: 10px !important;
    width: 100% !important;   
}

.wallet-adapter-collapse .wallet-adapter-button {
  margin-bottom: 10px !important;
}

.wallet-adapter-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 20px 20px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 0px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-shadow: none;
    position: relative !important;
    overflow: hidden !important;
    height: 66px !important;
}

body.dark .wallet-adapter-button {
background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.wallet-adapter-button:hover {
    background: rgba(145, 75, 255, 0.1) !important;
    border: 0px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark .wallet-adapter-button:hover {
    background: rgb(145, 75, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}


.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
}

.wallet-adapter-button-start-icon {
    margin-right: 8px !important;
}

.wallet-adapter-modal-list .wallet-adapter-button span {
  position: absolute !important;
  right: 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-shadow: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.wallet-adapter-modal-list-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 20px 20px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.5);
    border: 0px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-shadow: none;
    position: relative !important;
    overflow: hidden !important;
    height: 50px !important;
}

.wallet-adapter-modal-wrapper::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
  }
  
.wallet-adapter-modal-wrapper::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.7) !important;
    width: 4px !important;
  }
  
.wallet-adapter-modal-wrapper::-webkit-scrollbar-thumb {
    background-color: rgb(149, 73, 252, 0.7) !important;
    width: 4px !important;
    border-radius: 4px !important;
  }
.sidebar {
    width: 17%;
    background: transparent;
    padding: 10px 10px 30px 8px;
    position: fixed;
    top: 86px;
    left: calc((100% - 75%) / 2);
    bottom: 0;
    overflow-y: auto;
    font-size: 13px;
    z-index: 999;
    height: calc(100vh - 75px);
    border-right: 1px solid rgba(255,225,255, 0.4);
    transition: transform 0.3s ease;
}

body.dark .sidebar {
    background: transparent;
    border-right: 1px solid rgba(255,225,255, 0.2);
}

body.light .sidebar {
    background: transparent;
    border-right: 1px solid rgba(0,0,0, 0.1);
}

@media (max-width: 1366px) {
    .sidebar {
        top: 66px;
        width: 18%;
    padding: 10px 10px 30px 8px;
    }}

@media (max-width: 768px) {
    .sidebar {
        width: 230px;
        padding: 10px 10px 50px 10px;
        top: 56px;
        left: 0;
        height: calc(100vh - 60px);
        background: transparent;
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
        transform: translateX(-100%);
        border-right: none;
        border-radius: 0px 0px 0px 0px;
    }}


    @media (max-width: 768px) { 
        
        body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        z-index: 998;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    body.sidebar-open .sidebar {
        z-index: 999;
    }

    body.sidebar-open .main-content {
        margin-left: 0;
    }}

.sidebar .select-pricing-box,
.sidebar .select-specialization-box,
.sidebar .select-processing-capabilities-box,
.sidebar .select-intelligence-and-adaptability-box,
.sidebar .select-channels-and-platforms-box {
    margin-bottom: 15px;
}

.sidebar .select-pricing-box,
.sidebar .select-specialization-box,
.sidebar .select-processing-capabilities-box,
.sidebar .select-channels-and-platforms-box {
    border-bottom: 0px solid rgba(255,225,255,0.2);
}

body.dark .sidebar .select-pricing-box,
body.dark .sidebar .select-specialization-box,
body.dark .sidebar .select-processing-capabilities-box,
body.dark .sidebar .select-channels-and-platforms-box {
    border-bottom: 1px solid rgba(255,225,255,0.2);
}

body.light .sidebar .select-pricing-box,
body.light .sidebar .select-specialization-box,
body.light .sidebar .select-processing-capabilities-box,
body.light .sidebar .select-channels-and-platforms-box {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.sidebar .select-pricing-box .home-sidebar-filter-options:last-child,
.sidebar .select-specialization-box .home-sidebar-filter-options:last-child,
.sidebar .select-processing-capabilities-box .home-sidebar-filter-options:last-child,
.sidebar .select-channels-and-platforms-box .home-sidebar-filter-options:last-child {
    margin-bottom: 10px;
}

.sidebar .select-pricing-box .home-sidebar-filter-title,
.sidebar .select-specialization-box .home-sidebar-filter-title,
.sidebar .select-processing-capabilities-box .home-sidebar-filter-title,
.sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-title,
.sidebar .select-channels-and-platforms-box .home-sidebar-filter-title {
    display: block;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    margin-bottom: 10px;
}

body.light .sidebar .select-pricing-box .home-sidebar-filter-title,
body.light .sidebar .select-specialization-box .home-sidebar-filter-title,
body.light .sidebar .select-processing-capabilities-box .home-sidebar-filter-title,
body.light .sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-title,
body.light .sidebar .select-channels-and-platforms-box .home-sidebar-filter-title {
    color: rgba(0, 0, 0, 0.9)
}

@media (max-width: 1366px) {
    .sidebar .select-pricing-box .home-sidebar-filter-title,
    .sidebar .select-specialization-box .home-sidebar-filter-title,
    .sidebar .select-processing-capabilities-box .home-sidebar-filter-title,
    .sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-title,
    .sidebar .select-channels-and-platforms-box .home-sidebar-filter-title {
        font-size: 12px;
    }}

    @media (max-width: 768px) {
        .sidebar .select-pricing-box .home-sidebar-filter-title,
        .sidebar .select-specialization-box .home-sidebar-filter-title,
        .sidebar .select-processing-capabilities-box .home-sidebar-filter-title,
        .sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-title,
        .sidebar .select-channels-and-platforms-box .home-sidebar-filter-title {
            font-size: 13px;
            margin-bottom: 5px;
            font-weight: 400;
        }}

.sidebar .select-pricing-box input[type="checkbox"],
.sidebar .select-specialization-box input[type="checkbox"],
.sidebar .select-processing-capabilities-box input[type="checkbox"],
.sidebar .select-intelligence-and-adaptability-box input[type="checkbox"],
.sidebar .select-channels-and-platforms-box input[type="checkbox"] {
    -webkit-appearance: none;
            appearance: none;
    width: 13px;
    height: 13px;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  box-shadow: none; 
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-right: 6px;
}

body.dark .sidebar .select-pricing-box input[type="checkbox"],
body.dark .sidebar .select-specialization-box input[type="checkbox"],
body.dark .sidebar .select-processing-capabilities-box input[type="checkbox"],
body.dark .sidebar .select-intelligence-and-adaptability-box input[type="checkbox"],
body.dark .sidebar .select-channels-and-platforms-box input[type="checkbox"] { 
  background-color: rgba(0.0.0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);  
}

body.light .sidebar .select-pricing-box input[type="checkbox"],
body.light .sidebar .select-specialization-box input[type="checkbox"],
body.light .sidebar .select-processing-capabilities-box input[type="checkbox"],
body.light .sidebar .select-intelligence-and-adaptability-box input[type="checkbox"],
body.light .sidebar .select-channels-and-platforms-box input[type="checkbox"] { 
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
}


@media (max-width: 1366px) {
    .sidebar .select-pricing-box input[type="checkbox"],
.sidebar .select-specialization-box input[type="checkbox"],
.sidebar .select-processing-capabilities-box input[type="checkbox"],
.sidebar .select-intelligence-and-adaptability-box input[type="checkbox"],
.sidebar .select-channels-and-platforms-box input[type="checkbox"] {
    -webkit-appearance: none;
            appearance: none;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    margin-right: 4px;
    margin-top: 2px;
}}

@media (max-width: 768px) {
    .sidebar .select-pricing-box input[type="checkbox"],
.sidebar .select-specialization-box input[type="checkbox"],
.sidebar .select-processing-capabilities-box input[type="checkbox"],
.sidebar .select-intelligence-and-adaptability-box input[type="checkbox"],
.sidebar .select-channels-and-platforms-box input[type="checkbox"] {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    margin-right: 4px;
    margin-top: 1.5px;
}}

.sidebar .select-pricing-box input[type="checkbox"]:checked,
.sidebar .select-specialization-box input[type="checkbox"]:checked,
.sidebar .select-processing-capabilities-box input[type="checkbox"]:checked,
.sidebar .select-intelligence-and-adaptability-box input[type="checkbox"]:checked,
.sidebar .select-channels-and-platforms-box input[type="checkbox"]:checked {
 background-color: rgba(145, 75, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body.dark .sidebar .select-pricing-box input[type="checkbox"]:checked,
body.dark .sidebar .select-specialization-box input[type="checkbox"]:checked,
body.dark .sidebar .select-processing-capabilities-box input[type="checkbox"]:checked,
body.dark .sidebar .select-intelligence-and-adaptability-box input[type="checkbox"]:checked,
body.dark .sidebar .select-channels-and-platforms-box input[type="checkbox"]:checked {
 background-color: rgba(0, 0, 0, 1);
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

body.light .sidebar .select-pricing-box input[type="checkbox"]:checked,
body.light .sidebar .select-specialization-box input[type="checkbox"]:checked,
body.light .sidebar .select-processing-capabilities-box input[type="checkbox"]:checked,
body.light .sidebar .select-intelligence-and-adaptability-box input[type="checkbox"]:checked,
body.light .sidebar .select-channels-and-platforms-box input[type="checkbox"]:checked {
background-color: rgba(255,255,255,1);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27black%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar .select-pricing-box .home-sidebar-filter-options,
.sidebar .select-specialization-box .home-sidebar-filter-options,
.sidebar .select-processing-capabilities-box .home-sidebar-filter-options,
.sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0px;
    font-size: 14px;
    line-height: 14px;
    padding: 4px 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
}

body.dark .sidebar .select-pricing-box .home-sidebar-filter-options,
body.dark .sidebar .select-specialization-box .home-sidebar-filter-options,
body.dark .sidebar .select-processing-capabilities-box .home-sidebar-filter-options,
body.dark .sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
    color: rgba(255, 255, 255, 0.9);
}

body.light .sidebar .select-pricing-box .home-sidebar-filter-options,
body.light .sidebar .select-specialization-box .home-sidebar-filter-options,
body.light .sidebar .select-processing-capabilities-box .home-sidebar-filter-options,
body.light .sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 1366px) {
    .sidebar .select-pricing-box .home-sidebar-filter-options,
    .sidebar .select-specialization-box .home-sidebar-filter-options,
    .sidebar .select-processing-capabilities-box .home-sidebar-filter-options,
    .sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-options,
    .sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
        font-size: 11px;
        padding: 0px 0px;
    }}

    
@media (max-width: 768px) {
    .sidebar .select-pricing-box .home-sidebar-filter-options,
    .sidebar .select-specialization-box .home-sidebar-filter-options,
    .sidebar .select-processing-capabilities-box .home-sidebar-filter-options,
    .sidebar .select-intelligence-and-adaptability-box .home-sidebar-filter-options,
    .sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
        font-size: 12px;
        padding: 3px 0px;
    }}

.sidebar label {
    flex: 1 1;
    margin: 0;
    line-height: 16px;
}

.sidebar .select-channels-and-platforms-box .home-sidebar-filter-options {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

.sidebar .select-channels-and-platforms-box .home-sidebar-filter-options > div:first-child {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 0px;
    margin-bottom: -5px;
    vertical-align: middle;
}


.sidebar .select-channels-and-platforms-box .sub-options {
    margin-left: 5px;
    margin-top: 14px;
    padding-left: 7px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 1366px) {
    .sidebar .select-channels-and-platforms-box .sub-options {
        margin-top: 6px;
    }}

.sidebar .select-channels-and-platforms-box .sub-options > div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0px;
    margin-bottom: 4px;
}

@media (max-width: 1366px) {
    .sidebar .select-channels-and-platforms-box .sub-options > div {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 2px 0px;
        margin-bottom: 0px;
        line-height: 11px;
    }}

    @media (max-width: 768px) {
    .sidebar .select-channels-and-platforms-box .sub-options > div {
        gap: 4px;
        margin-bottom: 5px;
    }}


        @media (max-width: 768px) {
    .sidebar .select-channels-and-platforms-box .sub-options > div:first-child {
        margin-top: 5px;
    }}


.sidebar .select-channels-and-platforms-box .sub-options input[type="checkbox"] {
    margin: 0;
}

.sidebar .select-channels-and-platforms-box .sub-options label {
    font-size: 15px;
    color: rgba(255,225,255, 0.9);
}

body.dark .sidebar .select-channels-and-platforms-box .sub-options label {
    color: rgba(255,225,255, 0.8);
}

body.light .sidebar .select-channels-and-platforms-box .sub-options label {
    color: rgba(0,0,0, 0.9);
}


@media (max-width: 1366px) {
    .sidebar .select-channels-and-platforms-box .sub-options label {
        font-size: 11px;
        line-height: 11px;
    }}

@media (max-width: 768px) {
    .sidebar .select-channels-and-platforms-box .sub-options label {
        font-size: 12px;
    }}

.sidebar .select-channels-and-platforms-box .sub-options-head {
    font-weight: 500;
    font-size: 15px;
    padding: 0;
    margin: 0;
}

@media (max-width: 1366px) {
    .sidebar .select-channels-and-platforms-box .sub-options-head {
        font-size: 11px;
        line-height: 11px;
    }}

@media (max-width: 768px) {
    .sidebar .select-channels-and-platforms-box .sub-options-head {
        font-size: 12px;
    }}


.home-sidebar-filter-options {
    -webkit-user-select: none;
            user-select: none;
}

.home-sidebar-filter-options input[type="checkbox"] {
    pointer-events: none;
}

.home-sidebar-filter-options label {
    pointer-events: none;
}

.reset-filter-button {
    background: rgba(145, 75, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    margin-top: 10px;
    width: 100%;
    min-width: 111px;
    max-width: 111px;
}

@media (max-width: 1366px) {
    .reset-filter-button {
        font-size: 11px;
        width: auto;
        min-width: 90px;
        max-width: 90px;
    }}

    @media (max-width: 768px) {
        .reset-filter-button {
            font-size: 12px;
            margin-top: 5px;
        }}

body.dark .reset-filter-button {
    background: rgba(0,0,0, 1);
    color: rgba(255, 255, 255, 0.9);
}

body.light .reset-filter-button {
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.9);
}

.sidebar::-webkit-scrollbar {
    display: block;
    width: 5px;
  }
  
  .sidebar::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.6);
    width: 5px;
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    width: 5px;
    border-radius: 4px;
  }

.wallet-adapter-button {
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    line-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
}

.wallet-adapter-button-trigger {
    background-color: #512da8;
}

.wallet-adapter-button:not([disabled]):focus-visible {
    outline-color: white;
}

.wallet-adapter-button:not([disabled]):hover {
    background-color: #1a1f2e;
}

.wallet-adapter-button[disabled] {
    background: #404144;
    color: #999;
    cursor: not-allowed;
}

.wallet-adapter-button-end-icon,
.wallet-adapter-button-start-icon,
.wallet-adapter-button-end-icon img,
.wallet-adapter-button-start-icon img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.wallet-adapter-button-end-icon {
    margin-left: 12px;
}

.wallet-adapter-button-start-icon {
    margin-right: 12px;
}

.wallet-adapter-collapse {
    width: 100%;
}

.wallet-adapter-dropdown {
    position: relative;
    display: inline-block;
}

.wallet-adapter-dropdown-list {
    position: absolute;
    z-index: 99;
    display: grid;
    grid-template-rows: 1fr;
    grid-row-gap: 10px;
    padding: 10px;
    top: 100%;
    right: 0;
    margin: 0;
    list-style: none;
    background: #2c2d30;
    border-radius: 10px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.wallet-adapter-dropdown-list-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.wallet-adapter-dropdown-list-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    color: #fff;
}

.wallet-adapter-dropdown-list-item:not([disabled]):hover {
    background-color: #1a1f2e;
}

.wallet-adapter-modal-collapse-button svg {
    align-self: center;
    fill: #999;
}

.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
    transform: rotate(180deg);
    transition: transform ease-in 150ms;
}

.wallet-adapter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity linear 150ms;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    overflow-y: auto;
}

.wallet-adapter-modal.wallet-adapter-modal-fade-in {
    opacity: 1;
}

.wallet-adapter-modal-button-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 12px;
    cursor: pointer;
    background: #1a1f2e;
    border: none;
    border-radius: 50%;
}

.wallet-adapter-modal-button-close:focus-visible {
    outline-color: white;
}

.wallet-adapter-modal-button-close svg {
    fill: #777;
    transition: fill 200ms ease 0s;
}

.wallet-adapter-modal-button-close:hover svg {
    fill: #fff;
}

.wallet-adapter-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.wallet-adapter-modal-container {
    display: flex;
    margin: 3rem;
    min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .wallet-adapter-modal-container {
        margin: 1rem;
        min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
    }
}

.wallet-adapter-modal-wrapper {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 1050;
    max-width: 400px;
    border-radius: 10px;
    background: #10141f;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    flex: 1 1;
}

.wallet-adapter-modal-wrapper .wallet-adapter-button {
    width: 100%;
}

.wallet-adapter-modal-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    margin: 0;
    padding: 64px 48px 48px 48px;
    text-align: center;
    color: #fff;
}

@media (max-width: 374px) {
    .wallet-adapter-modal-title {
        font-size: 18px;
    }
}

.wallet-adapter-modal-list {
    margin: 0 0 12px 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.wallet-adapter-modal-list .wallet-adapter-button {
    font-weight: 400;
    border-radius: 0;
    font-size: 18px;
}

.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
    width: 28px;
    height: 28px;
}

.wallet-adapter-modal-list .wallet-adapter-button span {
    margin-left: auto;
    font-size: 14px;
    opacity: .6;
}

.wallet-adapter-modal-list-more {
    cursor: pointer;
    border: none;
    padding: 12px 24px 24px 12px;
    align-self: flex-end;
    display: flex;
    align-items: center;
    background-color: transparent;
    color: #fff;
}

.wallet-adapter-modal-list-more svg {
    transition: all 0.1s ease;
    fill: rgba(255, 255, 255, 1);
    margin-left: 0.5rem;
}

.wallet-adapter-modal-list-more-icon-rotate {
    transform: rotate(180deg);
}

.wallet-adapter-modal-middle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
}

.wallet-adapter-modal-middle-button {
    display: block;
    cursor: pointer;
    margin-top: 48px;
    width: 100%;
    background-color: #512da8;
    padding: 12px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
}

/* iceland-latin-400-normal */
@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/iceland-latin-400-normal.f62f28eabc5f0578e8d7.woff2) format('woff2'), url(/static/media/iceland-latin-400-normal.bbfd926748ab0d1c5003.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* oswald-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/oswald-cyrillic-ext-400-normal.5f1855465a3816bf0edb.woff2) format('woff2'), url(/static/media/oswald-cyrillic-ext-400-normal.1395415fbd5ac70fc1d3.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* oswald-cyrillic-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/oswald-cyrillic-400-normal.25364a8234c0b9ccc833.woff2) format('woff2'), url(/static/media/oswald-cyrillic-400-normal.f935c063208669c2ea22.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* oswald-vietnamese-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/oswald-vietnamese-400-normal.c8282b4a116aa667f4e8.woff2) format('woff2'), url(/static/media/oswald-vietnamese-400-normal.e043fa939034c9e8a4a4.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* oswald-latin-ext-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/oswald-latin-ext-400-normal.7b663c6ce4f622215824.woff2) format('woff2'), url(/static/media/oswald-latin-ext-400-normal.8e67b4e90d8c652891a8.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* oswald-latin-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/oswald-latin-400-normal.af72b2bfcd857cf2de10.woff2) format('woff2'), url(/static/media/oswald-latin-400-normal.dcf09b81e77f8d946d17.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* oswald-cyrillic-ext-300-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/static/media/oswald-cyrillic-ext-300-normal.23b66e88f6f76579307b.woff2) format('woff2'), url(/static/media/oswald-cyrillic-ext-300-normal.d8d3ccfbe0a1d499dd6f.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* oswald-cyrillic-300-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/static/media/oswald-cyrillic-300-normal.b0d74199a16ec08ab8a9.woff2) format('woff2'), url(/static/media/oswald-cyrillic-300-normal.b94d70e71cf74a684389.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* oswald-vietnamese-300-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/static/media/oswald-vietnamese-300-normal.e361fb67968e26f5c74a.woff2) format('woff2'), url(/static/media/oswald-vietnamese-300-normal.856d2616118c12efabba.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* oswald-latin-ext-300-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/static/media/oswald-latin-ext-300-normal.54037215ae2a530d08fe.woff2) format('woff2'), url(/static/media/oswald-latin-ext-300-normal.5275db6eaf73c6681bf7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* oswald-latin-300-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/static/media/oswald-latin-300-normal.0b953751b02f9ce8478e.woff2) format('woff2'), url(/static/media/oswald-latin-300-normal.b235e384a6dbbc53fa07.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* roboto-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-cyrillic-ext-400-normal.31476620b88eec076438.woff2) format('woff2'), url(/static/media/roboto-cyrillic-ext-400-normal.7b8c7d5f57176d3e1c49.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-cyrillic-400-normal.86d5c52f4588f9f221d7.woff2) format('woff2'), url(/static/media/roboto-cyrillic-400-normal.534893d6b1240067604a.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-greek-ext-400-normal.2d5875b032a1cca91eb2.woff2) format('woff2'), url(/static/media/roboto-greek-ext-400-normal.72fe2e51b252205e4068.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-greek-400-normal.98a717d5a38e77c0f657.woff2) format('woff2'), url(/static/media/roboto-greek-400-normal.63d0493e790cb6f37908.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-math-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-math-400-normal.b60d9fba1e21da7497e6.woff2) format('woff2'), url(/static/media/roboto-math-400-normal.df046689c316e367a511.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* roboto-symbols-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-symbols-400-normal.bb5b5d1459beb07bd3d5.woff2) format('woff2'), url(/static/media/roboto-symbols-400-normal.84256f57baf5e150167a.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* roboto-vietnamese-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-vietnamese-400-normal.b1b8baa94fbcaa57d098.woff2) format('woff2'), url(/static/media/roboto-vietnamese-400-normal.2422af9ea58377139eb0.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-latin-ext-400-normal.0f86a30ca7e981fcfc99.woff2) format('woff2'), url(/static/media/roboto-latin-ext-400-normal.f6e7ebd0ea43b3ad3673.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/roboto-latin-400-normal.df1be0be92f6f19b8115.woff2) format('woff2'), url(/static/media/roboto-latin-400-normal.67ed4cbecfff1f7b41dd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* open-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-cyrillic-ext-400-normal.9b6355dc8d1fd24e44b4.woff2) format('woff2'), url(/static/media/open-sans-cyrillic-ext-400-normal.0f36429828b6581ab285.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* open-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-cyrillic-400-normal.625d541cd66f7e0ab808.woff2) format('woff2'), url(/static/media/open-sans-cyrillic-400-normal.c1caca2dd5fc5dd63078.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* open-sans-greek-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-greek-ext-400-normal.f8c9501b18e9934c4ed2.woff2) format('woff2'), url(/static/media/open-sans-greek-ext-400-normal.ab356a4aeff791f88882.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* open-sans-greek-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-greek-400-normal.20c1f08f4474113b0f50.woff2) format('woff2'), url(/static/media/open-sans-greek-400-normal.060889a5db4ab436aede.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* open-sans-hebrew-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-hebrew-400-normal.eddd08e8740ebbd78b64.woff2) format('woff2'), url(/static/media/open-sans-hebrew-400-normal.4e1539cf264ea94342cb.woff) format('woff');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* open-sans-math-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-math-400-normal.e067abc4a45bd68b2ac3.woff2) format('woff2'), url(/static/media/open-sans-math-400-normal.a00330f1650b5c09182c.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* open-sans-symbols-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-symbols-400-normal.81aab70ef6e3c88f32a3.woff2) format('woff2'), url(/static/media/open-sans-symbols-400-normal.a0a35bfa8551f5d3285d.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* open-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-vietnamese-400-normal.82861daf02bfd8c311d2.woff2) format('woff2'), url(/static/media/open-sans-vietnamese-400-normal.7c3b56a39decb65fa26f.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* open-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-latin-ext-400-normal.6fd6f861b82223b1fe88.woff2) format('woff2'), url(/static/media/open-sans-latin-ext-400-normal.9a552a0b4c2f7bb7af94.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* open-sans-latin-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/media/open-sans-latin-400-normal.4a40e7d3a1b2ee1687a1.woff2) format('woff2'), url(/static/media/open-sans-latin-400-normal.6966065686166619e277.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}