/*portal container */
.grid-container.portal {
    max-width: 65rem;
}

.grid-container.portal.full-area{
    max-width: 75rem;
}

/* portal side-menu */

    /* Sidebar container */
    .sidebar-wrapper {
      position: fixed;
      top: 90px;
      left: -210px; /* hide sidebar except for tab */
      height: 80%;
      width: 200px;
      background-color: #123a5d;
      transition: left 0.3s;
      z-index: 1000;
     
    }

    /* Hover to reveal */
    .sidebar-wrapper:hover {
      left: 0;
    }

    /* Menu content */
    .sidebar-content {
      padding: 1rem;
      color: #fff;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
    
    .sidebar-content::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
     }

    .sidebar-content::-webkit-scrollbar-track {
        background: #123a5d; /* Light grey */
     }

    .sidebar-content::-webkit-scrollbar-thumb {
        background: #555; /* Dark grey */
        border-radius: 6px;
     }

      div::-webkit-scrollbar-thumb:hover {
        background: #33ccff; /* Darker grey on hover */
    }

    .sidebar-content ul {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0 0;
    }

    .sidebar-content ul li a {
      color: #ccc;
      text-decoration: none;
      display: block;
      padding: 0.5rem 0;
      transition: color 0.3s;
    }

    .sidebar-content ul li a:hover {
      color: #fff;
    }
    
    .sidebar-content .pb20 {
        padding-bottom: 20px;
    }

    /* The visible "Menu" tab */
    .menu-tab {
      position: absolute;
      top: 20%;
      right: -50px;
      width: 50px;
      height: 160px;
      background-color: #a73a43;;
      color: #fff;
      writing-mode: vertical-rl;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      cursor: pointer;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    
/* portal home */

.portal-home .card-divider{
    background-color: #123a5d;
    color: #fff;
}
.portal-wishlist h4 {
    font-size: .95rem;
}
.remove-wsi {
    font-size: .75rem;
}

.inbox-count {
  width: 20px;
  height: 20px;
  background-color: #9bc1f9; /* Choose any color */
  color: #123a5d;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%; /* Makes it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  text-transform: uppercase;
}

.inbox-display {
    display: flex;
}
.inbox-display p{
    padding-left: 5px;
}

/* tabs */

.tabs-panel {
    padding-left:20px;
    padding-right:30px;
}

.disabled-tab {
    pointer-events: none;
    color: gray;
    cursor: not-allowed;
}

.tabs-title a {
    font-size: 16px;
}

.tabs{
    background-color: #9bc1f9;
    color: #7d7d7d;
}



.tabs-title > a {
    color: #7d7d7d;
}
.tabs-title > a[aria-selected=true], li.is-active  {
    background-color: #123a5d;
    color: #fff;
}


.tabs li:first-child {
  border-left: none; /* Remove the line from the first item */
}

.tabs li {
  position: relative;
  padding: 10px;
}

.tabs li::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  height: 80%;
  width: 2px;
  background-color: #123a5d;
}

.tabs li:first-child::before {
  display: none; /* Remove the line from the first item */
}
.is-active + li::before {
    display: none;
}

#display-wks1 {
    margin-top: -120px;
    font-weight: 700px;
}    

.v-divider {
    border-right: 1px solid black;
    height: 100%;
    padding-right: 30px;
}

.btnSaveFirst {
    background-color: #fff;
    color: blue;
    border: none;
    border-bottom: #000 solid 1px;
    cursor: pointer;
}

.callout.success {
    background-color: rgba(155,193,249,.40);
}
.drop-area {
    width: 500px;
    height: 300px;
    padding: 30px;
    background: #fff;
    text-align: center;
    border-radius: 20px;
}

.img-view {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px dashed #bbb5ff;
    background: #f7f8ff;
    background-postion:center;
    background-size: cover;
}

.img-view img {
    width: 100px;
    margin-top: 25px;
 }
 
 .drop-text-small{
    display:block;
    font-size: 12px;
    color: #777;
    margin-top: 15px;
 }

 .remove-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff5c5c;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
}
.img-view {
    position: relative; /* important for positioning the button */
}

.clickopen {
    text-decoration:underline;
    cursor: pointer;
}


.circular-image {
    width: 100px;         /* or any fixed size */
    height: 100px;
    border-radius: 50%;   /* makes it a circle */
    border: 1px solid #000;  /* 1px solid black border */
    object-fit: cover;    /* ensures the image fills the circle properly */
}

.product-portal-image {
    padding-bottom: 10px;
}

.profile-image {
    width: 100px;         /* or any fixed size */
    height: 100px;
    border-radius: 50%;   /* makes it a circle */
    border: 1px solid #000;  /* 1px solid black border */
    object-fit: cover;    /* ensures the image fills the circle properly */
}

.profile-image-sm {
    width: 60px;         /* or any fixed size */
    height: 60px;
    border-radius: 50%;   /* makes it a circle */
    border: 1px solid #000;  /* 1px solid black border */
    object-fit: cover;    /* ensures the image fills the circle properly */ 
}

label {
    font-weight: 700;
}

/*portal white container */
.portal-area-container {
    background-color: #fff;
    padding: 20px;
}

.area-transparent {
    background-color:none;
}

/* purchases */

.product-download-container {
    background-color: #fff;
    padding: 20px;
}

.download-product-title {
    color: #a73a43;
    font-family: roboto;
    font-weight: 700;
    font-size: 1.6rem;
}

.download-product-last-updated {
    color: #999999;
    font-size: .8rem;
}

/* coach purchase view */
.coach-purchas-view td{
    vertical-align: top;
    text-align: center;
}

/* memberships */
.card.display.memberships {
    position: relative;
}

.memberships .card-info {
    position: absolute;
    bottom: 0px;
    left: 0; right: 0; margin: auto;
}

.member-card-highlight {
    background-color: #123a5d;
    color: #fff;
}

.member-card-highlight-yellow {
    background-color: #faf4b7;
}

.member-card-title-highlight {
    background-color: #123a5d;
    color: #fff;
}

/* coach portal steps */





ul.profile-progress li.active {
  background-color: #a73a43;
}

ul.profile-progress li {
  background-color: #123a5d;
}

ul.profile-progress {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.profile-progress li {
  float: left;
  line-height: 60px;
  height: 60px;
  min-width: 240px;
  position: relative;
}

ul.profile-progress li:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 4px;
  border-style: solid;
  border-width: 30px 0 30px 30px;
  border-color: transparent transparent transparent #123a5d;
}

ul.profile-progress li:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 0px;
  border-style: solid;
  border-width: 30px 0 30px 30px;
  border-color: transparent transparent transparent #fff;
}

ul.profile-progress li.beforeactive:before {
  background-color: #a73a43;
}

ul.profile-progress li.active:before {
  background-color: #123a5d;
}

ul.profile-progress li.active:after {
  border-color: transparent transparent transparent #a73a43;
}

ul.profile-progress li:last-child:after,
ul.profile-progress li:last-child:before {
  border: 0;
}

ul.profile-progress li a {
  padding: 0px 0px 0px 6px;
  color: #FFF;
  text-decoration: none;
}

.progress-coach, .progress-plays {
    padding-left: 30px;
}