/* color change plguin sudhanshu */
/*
 * --------------------------------------------------------------
 * Divders or borders
 * --------------------------------------------------------------
*/
.card-divider,.profile-dashboard-card .inner-card-container::-webkit-scrollbar-thumb{
  background: var(--profile-card-border) !important;
}
.profile-dashboard-video-sec .video-block , .video-thumbnail-carousel .carousel__btn , .video-thumbnail-carousel .carousel__slide.active ,.colored-divider{
  border: 1px solid var(--profile-card-border) !important;
}
/*
 * --------------------------------------------------------------
 * Divders or borders end
 * --------------------------------------------------------------
*/
.profile-dashboard-page {
    background: var(--profile-dashboard-bg) !important;
  }
  .profile-dashboard-card,.personal-statement-sec{
    background: var(--profile-card-bg) !important;
    border: 1px solid var(--profile-card-border) !important;
  }

  .profile-card-heading {
    color: var(--profile-heading-color) !important;
    border-bottom: 1px solid var(--profile-card-border) !important;
  }
  .profile-bnr-info-block h1{
    color: var(--athlete-name-color) !important;
  }
  .profile-bnr-info-block h2{
    color: var(--athlete-info-color) !important;
  }
  .profile-page-subtitle {
    color: var(--profile-subtitle-color) !important;
  }
  .profile-info-link {
    color: var(--profile-link-color) !important;
  }
  
  .profile-info , .profile-dashboard-card .profile-card-list ol, .profile-dashboard-card .profile-card-list ul {
    color: var(--profile-info-color) !important;
  }
.profile-dashboard-card table tr{
   border-bottom: 1px solid var(--profile-card-border) !important;
}
.recommendation-gradiant-box {
  background-image: linear-gradient(180deg, #42E397 0%, #3BB4B6 100%);
}
.profile-dashboard-page .profile-dashboard-card:hover{
  box-shadow: none !important;
}
#color-customizer-offcanvas{
    position: fixed;
    top: 150px;
    background: #fff;
    padding: 20px 15px;
    z-index: 9999;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    right: -290px;
    transition: right .6s linear;
    border-radius: 5px 0px 0px 5px;
}  
.color-input-row label {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 15px;
}
.offcanvas-active{
  right: 0 !important;
}
button#open-offcanvas {
    border-radius: 4px 0px 0px 4px;
    position: absolute;
    left: -48px;
    border: 0;
    background: #fff;
    color: #4bcd90;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
span.toggle-text{
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-weight: 700;
  margin-top: 10px;
}
.solor-offcanvas-heading-color {
    font-size: 22px;
    background: var(--gradiant-secondary) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 700;
    margin-top: 0;
}
.color-input-row{
    display: flex;
    gap: 8px;
    flex-direction: column;
    margin-bottom: 20px;
}
.color-form-btn-div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}



/* Accordian */
.color-accordion{
  max-height: calc(60vh - 95px);
  overflow-y: auto;
}

.color-accordion::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}
.color-accordion::-webkit-scrollbar-thumb {
  background-color: #40d79f;
  outline: 1px solid #40d79f;
  border-radius: 10px;
}
.color-accordion-item {
  border: 1px solid #40d79f;
  margin-bottom: 10px;
 
}

.color-accordion-header {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  margin: 0;
  gap: 15px;
  padding: 12px 30px;
  background: #40d79f0f;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

.color-accordion-icon {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.color-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 10px;
  background: #fff;
}

.color-accordion-content.active {
  max-height: 200px; /* Adjust based on content */
  padding: 10px;
}

.color-accordion-header.active .color-accordion-icon {
  transform: rotate(0deg); /* Change icon to minus */
}