.s-site-logo-img {
  content: url(logo.png);
}
#OrganizationDetail{
  width:100%;
  height:95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#create-new-organization{
  width:100px;
  height:100px;
  border: 2px solid var(--bs-body-color);
  background-color: var(--s-card-bg);
  color: var(--bs-body-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 15px;
  border-radius: 10px;
}
#create-new-organization:hover{
  border: 2px solid var(--s-sidebar-icon-active);
  background-color: var(--bs-light);
  color: var(--s-sidebar-icon-active);
}
#organisation-name-div{
  width:300px;
  height:50px;
}
#organisation-name-div input{
  width:100%;
  height:36px;
  padding:10px;
  text-align: center;
}
#organisation-detail-div{
  width:60%;
  height:95%;
  padding:20px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 25px;
  margin: auto auto;
  background-color: var(--s-card-bg);
}
#organisation-detail-div .block1{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 25px;
}
#organisation-detail-div label{
  font-size: 14px;
  color:var(--s-category-title);
  font-weight: bold;
}
#organisation-detail-div input{
  width:500px;
  height:36px
}
#organisation-detail-div .users-header{
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  width:100%;
}
#organisation-detail-div .users-header .title {
  font-size: 14px;
  color:var(--s-category-title);
  font-weight: bold;
}
#organisation-detail-div .user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--s-card-border);
  width:100%;
  background-color: var(--s-cell-input-border);
}
#organization-member-list{
  width: 100%;
  flex:1;
  overflow-y: auto;
}
#organisation-detail-div .user-item:last-child {
  border-bottom: none;
}



#organisation-detail-div .user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

#organisation-detail-div .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-right: 12px;
}

#organisation-detail-div .user-details {
  flex: 1;
}

#organisation-detail-div .user-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

#organisation-detail-div .user-email {
  font-size: 13px;
  color: #a1a1a1;
}

#organisation-detail-div .user-role {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

/*#organisation-detail-div .role-badge {*/
/*  padding: 4px 8px;*/
/*  background-color: #404040;*/
/*  border-radius: 4px;*/
/*  font-size: 12px;*/
/*  color: #e5e5e5;*/
/*  border: 1px solid #565656;*/
/*}*/

#organisation-detail-div .role-badge.admin {
  background-color: #1e40af;
  border-color: #3b82f6;
  color: #dbeafe;
}

#organisation-detail-div .role-badge.member {
  background-color: #059669;
  border-color: #10b981;
  color: #d1fae5;
}

#organisation-detail-div .user-actions {
  display: flex;
  gap: 8px;
}
#organisation-detail-div .user-you{
  background-color: #1c3829;
  border-radius: 3px;
  width:40px;
  height:20px;
  text-align: center;
  line-height: 20px;
  margin-left: 15px;
  color:#01b354
}

.notification-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  width: 100%;
  max-width: 400px; /* Adjust as needed */
}

.notification-icon {
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.notification-icon svg {
  width: 24px;
  height: 24px;
}

.notification-message {
  margin: 0;
  flex-grow: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.notification-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.5rem;
  margin-left: 1rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.notification-close-btn:hover {
  opacity: 1;
}

.notification-card.success {
  background-color: #f0fdf4; /* Light green background */
  border-color: #4ade80;     /* Green border */
  color: #166534;           /* Dark green text */
}

.notification-card.error {
  background-color: #fef2f2; /* Light red background */
  border-color: #f87171;     /* Red border */
  color: #991b1b;           /* Dark red text */
}

.notification-card.success .notification-close-btn,
.notification-card.error .notification-close-btn {
  color: inherit;
}
#BillingPage{
  width:100%;
  height:95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:20px;
}
#BillingPageContainer{
  width:100%;
  height: 100%;
}
#BillingPageContainer .tab-content{
  width: 100%;
  height:100%
}
#BillingPageContainer #pane1{
  width:80%;
  height:700px !important;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  margin:auto;
}
#checkout{
  height:95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px;
  align-items: center;
}
#billing-history {
  width:100%;
  height:500px;
  overflow-y: auto;
}