:root{
  --tools-menu-height: 200px;
  --checkIn-client-profile-modal-height: 80%;
  --checkIn-client-profile-modal-width: 85%;
  --highlight-color: #ffff82;
  --selected-hightlight-color: #00ffe5;

  --checkIn-listBtn-height: 120px;
}

.sortable-ghost {
  background: var(--highlight-color);
  border: 2px solid var(--selected-hightlight-color);
}


.ui-selectable {
  background: var(--highlight-color);
}

.ui-selectable:hover {
  background: yellow;
}

.ui-selectable.ui-selected {
  background: var(--selected-hightlight-color);
}



#trainer-new-client-page{
height: 100%;
}

#new-client-form-container{
height: calc(100% - var(--search-bar-height));
padding: 1rem;
background:  white;
}

#new-client-form-container form{
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 1rem;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-70%);
}


.profile-banner{
display: flex;
flex-direction: row;
gap: var(--border-padding);
  /*margin: 1rem 0;*/
  /*border: 1px solid black;*/
  padding: var(--border-padding);
  border-radius: 0.5rem;
}

.change-profile-picture .profile-banner{
  flex-direction: column;
  place-items: center;
}

.change-profile-picture .profile-banner .profile-picture img{
  width: 200px;
  height: 200px;
  box-shadow: var(--box-shadow-inner-card)
}

.my-account-MainAreacontainer .profile-banner .profile-picture img:hover {
  box-shadow: var(--box-shadow-button);
}

.my-account-MainAreacontainer .profile-banner .profile-picture img{
  cursor: pointer;
}

.profile-banner .profile-picture img{
/*border-radius: 0.5rem;*/
border-radius: 50%;
object-fit: cover;
height: 100px;
/*width: 90px;*/
width: 100px;
}

.profile-banner .metadata{
display: flex;
flex-direction: column;
place-content: center;
}

.profile-banner .metadata .username{
  /*font-size: 1.5rem;*/
  /*font-weight: 500;*/
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 50px;
  margin-bottom: var(--border-padding);
}




#checkIn-client-profile-modal,
#checkIn-client-files-modal,
#client-trainer-certs-modal, 
#checkIn-client-notes-modal{
    background: var(--bg);
  height: var(--checkIn-client-profile-modal-height);
  overflow: auto;
  width: var(--checkIn-client-profile-modal-width);
  border-radius: var(--border-radius-box);
/*  padding: var(--border-padding);*/
}

#checkIn-client-profile-modal .modal-close,
#checkIn-client-files-modal .modal-close,
#client-trainer-certs-modal .modal-close{
text-align: right;
font-size: 1rem;
padding: calc(var(--border-padding) / 2) calc(var(--border-padding) / 2) 0 0;
  }


  #checkIn-client-profile-modal .modal-close .modal-close-btn,
#checkIn-client-files-modal .modal-close .modal-close-btn,
#client-trainer-certs-modal .modal-close .modal-close-btn{
font-size: 1rem;
  }

  #checkIn-client-profile-modal .modal-close .modal-close-btn::before,
#checkIn-client-files-modal .modal-close .modal-close-btn::before,
#client-trainer-certs-modal .modal-close .modal-close-btn::before, 
#checkIn-client-notes-modal .modal-close .modal-close-btn::before{
margin: 0;
  }

/*#checkIn-client-profile-modal .client-myProfile,
#checkIn-client-files-modal .client-myFiles,*/
#checkIn-client-profile-modal .myProfile,
#checkIn-client-files-modal .myFiles,
#client-trainer-certs-modal .myFiles{
  height: calc(100% - 2rem); /* 2rem - height of close icon */
  padding: 0 0 var(--border-padding) 0;
}


#checkIn-client-notes-modal .minc-modal{
  height: 100%;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--border-padding);
}

#checkIn-client-notes-modal .minc-modal .modal-body{
  overflow: auto;
}


#checkInPageMainDataContainer{
  display: grid;
/*  grid-template-columns: max(25%, 250px) auto;*/
  gap: var(--border-padding);
padding: var(--border-padding) calc(2 * var(--border-padding));
grid-template-columns: 1fr;
}

#checkInPageMainDataContainer #editProgramDataContainer {
/*grid-template-columns: 100%;*/
padding: 0;
display: flex;
flex-direction: column;
row-gap: calc(2 * var(--border-padding));
max-height: unset;
}

#checkInPageMainDataContainer #editProgramDataContainer .days{
  max-height: unset;
transition: none;
}

#checkInPageMainDataContainer #editProgramDataContainer .days .exerciseContainer .add_exercise{
  height: var(--checkIn-listBtn-height);
}

#checkInStatsDataContainer,
.client-today-training-stats-history{
  /*border: 1px solid;*/
  display: grid;
row-gap: calc(var(--border-padding) / 2);
align-content: flex-start;
overflow: auto;
}

#check-in-box{
  z-index: -9999;
  position: absolute;
}

#checkInStatsDataContainer .days,
.client-today-training-stats-history .days{
  transition: none;
  height: auto;
/*column-gap: var(--border-padding);*/
display: grid;
grid-auto-columns: max(20%, 200px);
grid-auto-flow: column;
gap: 0;
}


#checkInStatsDataContainer .days .column,
.client-today-training-stats-history .days .column{
width: 100%;
/*width: 200px;*/
/*margin: 0 0.5rem;*/
overflow: auto;
border-radius: var(--border-radius-box);
border: 0.5px solid var(--body2);
}

#checkInStatsDataContainer .days .column.inactive{
  background: lightgray;
  pointer-events: none;
  cursor: not-allowed;
  min-height: 100px;
}

#checkInStatsDataContainer .days .column.inactive::before{
  content: 'No data here';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-transform: none;
}

#checkInStatsDataContainer .days .column.inactive .dateHeader{
  display: none !important;
}

#checkInStatsDataContainer .days .column .dateHeader,
.client-today-training-stats-history .days .column .dateHeader{
/*color: black;
padding: 0.5rem;
display: flex;
place-content: center;
background: powderblue;
font-size: 1rem;
text-transform: uppercase;
overflow-x: auto;
flex-wrap: nowrap;
width: 100%;
border-radius: var(--border-radius-button);
box-shadow: var(--box-shadow-titlebar);
*/
  padding: 0.35rem;
background: var(--btncolor);
display: flex;
align-items: center;
place-content: center;
gap: 1rem;
position: sticky;
top: 0;
/*z-index: 99;*/
border-radius: var(--border-radius-box) var(--border-radius-box) 0 0;
box-shadow: var(--box-shadow-titlebar);
color: var(--bg);
font-family: var(--font-apple-system);
font-size: var(--font-size-body-regular);
text-transform: none;

}

/*#checkInStatsDataContainer .days .column .dateHeader .weekBadge,
#checkInStatsDataContainer .days .column .dateHeader .dayBadge{
font-size: var(--font-size-body-regular);
text-transform: none;
}*/

/*#checkInStatsDataContainer .days .column .weekHeader, 
#checkInStatsDataContainer .days .column .dayHeader{
  padding: 0.5rem;
  display: flex;
  place-content: center;
  background: powderblue;
}

#checkInStatsDataContainer .days .column .weekHeader .weekBadge, 
#checkInStatsDataContainer .days .column .dayHeader .dayBadge{
  text-transform: uppercase;
  font-size: 1.25rem;
  color: black;
}*/

#checkInStatsDataContainer .days .column .day-stats,
.client-today-training-stats-history .days .column .day-stats{
  display: grid;
/*  row-gap: 0.25rem;
  margin-top: 0.5rem;*/
}

#checkInStatsDataContainer .days .column .day-stats .listBtn,
.client-today-training-stats-history .days .column .day-stats .listBtn{
  height: var(--checkIn-listBtn-height);
  flex-wrap: wrap;
  overflow: auto;
  border-radius: 0.625rem;
}

#checkInStatsDataContainer .days .column .day-stats .listBtn.label-area.exercise-skipped,
.client-today-training-stats-history .days .column .day-stats .listBtn.label-area.exercise-skipped {
  background: var(--border-color-default);
  color: #7b7b7b;
font-size: var(--font-size-body-regular);
font-weight: 450;
font-family: var(--font-apple-system);
}

/*#checkInStatsDataContainer .days .column .day-stats .listBtn p{
  width: 100%;
  font-weight: bold;
  text-transform: capitalize;
  text-decoration: underline;
  font-size: 1.1rem;
}*/


.stats-notes .client{
  text-align: left;
}

.stats-notes .trainer{
  text-align: right;
}

.stats-notes .client, 
.stats-notes .trainer{
  margin-bottom: var(--border-padding);
}

.stats-notes p{
font-size: 1.2rem;
font-weight: bold;
text-transform: capitalize;
/*text-decoration: underline;*/
}

.stats-notes .note-box{
  max-width: 95%;
  border-radius: var(--border-radius-box);
  background: var(--body);
  text-align: left;
  display: inline-block;
  border: 0;
  padding: calc(var(--border-padding) / 2);
}

.stats-notes .note-box .note, 
.stats-notes .note-box .note-timestamp{
display: block;
padding: 0;
border: 0;
}

.stats-notes .note-box .note-timestamp{
  font-size: 0.6rem;
}

.stats-notes textarea{
  width: 95%;
  border: 1px solid lightgray;
  border-radius: var(--border-radius-box);
  text-align: left;
}

.stats-notes textarea:disabled{
  background: var(--body);
}

.stats-notes .stat-update-time-trainer{
  font-size: 0.85rem;
}


#checkInPageMainDataContainer #editProgramDataContainer.more-controls .deleteBtn,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .deleteIcon,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .duplicateIcon,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .handle,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .bucketName,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .bucketHeader,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .ssBucketHeader{
  display: none !important;
}

#checkInPageMainDataContainer #editProgramDataContainer.more-controls .bucketContainer,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .bucketContainer .new-program-bucket,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .exerciseContainer,
#checkInPageMainDataContainer #editProgramDataContainer.more-controls .exerciseContainer .new-program-ss-bucket{
  padding: 0;
  min-height: 0;
  gap: 0;
    margin: 0;
/*  border: none;*/
  box-shadow: none;
}


/*#checkInPageMainDataContainer #editProgramDataContainer.more-controls .bucketContainer .new-program-bucket .actionBtnContainer{
  display: none;
}*/

#client_detials_container{
  padding: calc(2 * var(--border-padding));
  background: var(--bg);
  /*background: #ededed;*/
}

/*#view-client-profile-btn{
  margin-left: 1rem;
}*/


#client_detials_container .section{
margin: calc(2 * var(--border-padding)) 0;
/*border: 1px solid;*/
border-radius: var(--border-radius-box);
padding: calc(2 * var(--border-padding));
/*background: white;*/
box-shadow: var(--box-shadow-inner-card);
}

#client_detials_container .client-banner{
  margin-top: 0;
}

#client_detials_container .section-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(2 * var(--border-padding));
  margin-bottom: calc(2 * var(--border-padding));
}

#client_detials_container .section-row .section{
  margin: 0;
}

#client_detials_container .editBtn{
  position: absolute;
  right: 1rem;
  top: 1rem;
}


#client_detials_container .section pre{
  font-size: var(--font-size-main-heading);
/*  margin-left: 1rem;*/
  font-family: var(--font-apple-system);
  font-weight: 450;
  letter-spacing: 0.5px;
}

#client_detials_container #client-detail-program-data button, #client_detials_container #client-detail-files button{
/*  margin-left: 1rem;*/
}




.client-assigned-program-list.active #client-remove-program-access{
display: none;
}

.program-client-assigned-program-name-list-item.active [data-client-assigned-program-set-current]{
  display: none;
}




#stats-page, #trainer-client-checkin-page{
  height: calc(100% - calc(2 * var(--border-padding)));
}
#todolist-page, #notes-app-page{
  height: 100%;
}
#stats-page, #trainer-client-checkin-page, #todolist-page, #notes-app-page{
width: calc(100% - calc(2 * var(--border-padding)));
background: var(--bg);
position: absolute;
left: 200%;
transition-duration: 0.5s;
z-index: 9999999;
border-radius: var(--border-radius-dock);
overflow: hidden;
bottom: 0;
}

#trainer-client-checkin-page{
  overflow: auto;
}

#stats-page.active, #trainer-client-checkin-page.active, #todolist-page.active, #notes-app-page.active{
  left: var(--border-padding);
}

/*#stats-primary-data-container*/
#stats-primary-data-form{
  padding: 1rem;
position: sticky;
top: var(--search-bar-height);
margin: 0;
display: flex;
background: white;
justify-content: space-evenly;
align-items: center;
height: var(--search-bar-height);
gap: 1rem;
flex-wrap: wrap;
justify-content: space-evenly;
}

#stats-primary-data-form .deleteIcon{
  top: 1.5rem;
}






.program-client-name-list-select-container{
  margin-bottom: 0.5rem;
}

.program-client-name-list, .client-assigned-program-list{
  padding: 0;
min-height: 100px;
max-height: 150px;
overflow: hidden auto;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
padding: 0.25rem;
}

.program-client-name-list-item, .program-client-assigned-program-name-list-item {
  justify-content: space-between !important;
  border: 1px solid transparent;
border-radius: 0.25rem;
padding: 0.25rem 0.25rem 0.25rem 0.5rem !important;
margin-bottom: 0.25rem;
word-break: break-word;
}

.program-client-name-list-item.active, .program-client-assigned-program-name-list-item.active{
  border: 1px solid var(--btncolor);
}

.program-client-name-list-item.radio-container label{
  margin: 0;
}

#programAssignerForm .form-group{
  margin-bottom: 0.5rem;
}






.exerciseTypeContainer{
  display: flex;
border: 1px solid var(--btncolor);
justify-content: center;
align-content: center;
align-items: center;
padding: 0.25rem 0.5rem !important;
width: 195px;
position: absolute;
top: calc(1.25rem - 5px);
left: 54px;
border-radius: 0.25rem;
}

.exerciseTypeContainer label{
  margin: 0;
  z-index: 9;
  cursor: pointer;
  border-radius: 0.225rem;
  padding: 0;
}

.exerciseTypeContainer.radio-container > label:nth-child(2){
  margin: 0 !important;
}

/*.exerciseTypeContainer label:hover {
  background: #f2f2f2;
}*/

.radio-container{
  display: flex;
padding: 0.25rem 0.5rem;
justify-content: center;
align-content: center;
align-items: center;

border: 1px solid var(--border-color-default);
padding: calc(var(--border-padding) / 2) !important;
border-radius: var(--border-radius-button);
}

.radio-container label:not(:last-child){
  margin: 0;
  margin-right: 0.5rem;
}

.radio-input{
  display: none;
}

.radio-input + span{
padding: 0.35rem 0.625rem;
border-radius: var(--border-radius-button);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background: transparent;
cursor: pointer;
font-size: var(--font-size-body-regular);
}

.radio-input + span:hover {
  background: var(--border-color-default);
}

.radio-input:checked + span, .radio-input:checked + span:hover{
  /*background: #e5e5e5;*/
  background: var(--btncolor);
  color: white;

}

.radio-input:disabled + span, .radio-input:disabled + span:hover {
  background: gray;
  color: white;
}

/*.exerciseTypeContainer .highlighter {
  position: absolute;
  width: calc(50% - 0.5rem);
  background: #e5e5e5;
  height: 1.75rem;
  left: 0.5rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  right: 5px;
  border-radius: 0.25rem;
}

.exerciseTypeContainer input[value="endurance"]:checked ~ .highlighter {
  left: calc(50%);
}

.exerciseTypeContainer .highlighter.right {
  left: calc(50%);
}*/

.strengthContainer, .enduranceContainer{
  margin-top: 1rem;
}





:root{
    --dockHeight:  0rem;
    --titleColor:  white;
}


.dock-container {
  height: var(--dockHeight);
  background: var(--bg);
  /*background: red;*/
  position: absolute;
/*  position: fixed;
  left: 0;*/
  width: 100%;
  bottom: 0;
  display: flex;
  place-items: center;
  z-index: 99;
  /*box-shadow: 0px -2px 20px #d7d7d763;*/
border-radius: var(--border-radius-dock);
/*box-shadow: var(--box-shadow-outer-card);*/
box-shadow: var(--box-shadow-dock);
border-top: 1px solid var(--border-color);
}


.trainer-containers, .client-containers{
  overflow: auto;
  height: 100%;
  height: 100%;
  border-radius: var(--border-radius-box);
  /*height: calc(var(--innerHeight) - calc(var(--search-bar-height) + var(--dockHeight)));*/
background: var(--bg);
}

/*.trainer-containers.dock-active{
  height: calc(100% - var(--dockHeight)) !important;
}*/


.trainer-containers.with-dock, 
.client-containers.with-dock{
  height: calc(100% - var(--dockHeight));
}

#page-container{
  height: 100%;
  border-radius: var(--border-radius-dock);
/*box-shadow:var(--btncolor-nogradient-op80) 0 1px 5px;*/
box-shadow:var(--box-shadow-outer-card);
background: var(--bg);
border: 1px solid var(--border-color);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}


#exercise_details_container {
  /*padding: 1rem;*/
/*padding-top: 0;*/
padding: 0 var(--border-padding) var(--border-padding);
}

#exercise_details_scrollable_container {
  position: relative;
  display: block;
  padding: 0 1rem;
}


#exercise_data_name {
padding: var(--border-padding);
/*padding-top: 0;*/
  text-align: left;
  position: sticky;
top: calc(var(--search-bar-height) + 0.5rem); /* title bar height + top padding */
z-index: 999;
/*background: var(--titleColor);*/
background: var(--bg);
display: inline-block;
padding: 0.5rem 0.825rem;
margin-bottom: var(--border-padding);
border-radius: var(--border-radius-button);
}


.exercise_video_container{
  width: 100%;
border-radius: 0.76rem;
background: black;
overflow: hidden;
margin-bottom: 1rem;
position: relative;
/*height: 25vh;
height: calc(50 * var(--vh));*/
height: 0px;
padding-top: min(56.25%, calc(56.25 * var(--vh)));
box-shadow: rgba(0, 0, 0, 1) 0 1px 3px;
}

#exercise_video_player, #exercise_embedded_video_player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#exercise_data_title {
  display: inline;
}

.exercise_data {
  margin-bottom: 1rem;
  text-align: left;
}

#exercise_description {
  text-align: left;
  margin-top: -1rem;
}


#stats-form-container{
  height: calc(100% - calc(calc(2 * var(--search-bar-height)) + 4rem));
  overflow: hidden;
  gap: 1rem;
display: flex;
flex-direction: row;
}

#new-exercise-form-container, #stats-form-container{
  /*padding: 1rem;*/
/*  display: grid;
grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
column-gap: 1rem;*/
padding: calc(1 * var(--border-padding)) calc(2 * var(--border-padding));
}

#new-exercise-form-container{
    display: grid;
grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
gap: 1rem;
}

#stats-form-container{
display: grid;
grid-auto-columns: 100%;
grid-auto-flow: column;
  }

  #stats-form-container.page2 #stats-form-container-page1,
  #stats-form-container #stats-form-container-page2{
    display: none !important;
  }

#stats-form-container #stats-form-container-page1, 
#stats-form-container.page2 #stats-form-container-page2{
  /*position: absolute;*/
  padding: calc(var(--border-padding) * 2);
  width: 100%;
  height: 100%;
  overflow-y: auto;
gap: var(--border-padding);
}

#stats-form-container-page1, 
#stats-form-container-page2 form,
#stats-form-container-page2 form > div:nth-child(2){
  /*left: 0%;*/
  /*transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);*/
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: calc(2 * var(--border-padding));
}

#stats-form-container.page2 #stats-form-container-page2{
/*left: 110%;*/
/*transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);*/
padding-top: calc(var(--border-padding) * 1);
display: flex !important;
  flex-direction: column;
}

/*#stats-form-container.page2 #stats-form-container-page1{
  left: -110%;
}

#stats-form-container.page2 #stats-form-container-page2{
  left: 0%;
}*/

#stats-form-container-page1 form,
#stats-form-container-page2 form > div:first-child,
#stats-form-container-page2 form > div:nth-child(2) > div{
  border-radius: var(--border-radius-box);
box-shadow: var(--box-shadow-inner-card);
margin: 0;
}

#stats-form-container-page2 form{
/*padding: var(--border-padding);*/
}

#stats-form-container-page2 form > div:first-child,
#stats-form-container-page2 form > div:nth-child(2) > div{
  /*margin-bottom: 1rem;*/
  padding: var(--border-padding);
}

#stats-form-container-page2 form > div > h5{
  margin-bottom: 0.25rem;
}

#stats-form-container-page2 .range-input{
  width: 100%;
}



#new-exercise-form-container form{
/*margin-bottom: calc(2 * var(--border-padding));*/
border-radius: var(--border-radius-box);
box-shadow: var(--box-shadow-inner-card);
margin: 0;
}

#new-exercise-form-container form .row:last-child{
  row-gap: 1rem;
text-align: center;
}

#new-exercise-form-container form, .create-program-single-exercise-form, .notes-modal-form{
/*border: 1px solid var(--dark);*/
padding: calc(2rem + 24px) 1rem 1rem 1rem;
/*margin-bottom: 20px;*/
}

#new-exercise-form-container form .deleteBtn, 
.create-program-single-exercise-form .deleteBtn,
#new-exercise-form-container form .deleteIcon, 
.create-program-single-exercise-form .deleteIcon{
top: 1.25rem;
right: 1rem;
position: absolute;
}

.create-program-single-exercise-form .notesIconSVG,
.create-program-single-exercise-form .notesIcon-mui
 {
    top: 1.25rem;
    left: 1rem;
}



#new-exercise-form-container form input[type="text"],
#new-exercise-form-container form textarea, 
#create-program-form-container form input[type="text"],
#create-program-form-container form input[type="number"],
#create-program-form-container form textarea,
#edit-program-form-container form input[type="text"],
#edit-program-form-container form input[type="number"],
#edit-program-form-container form textarea{
    border: none;
    border-bottom: 1px solid var(--btncolor);
    /*border-bottom: 1px solid var(--dark);*/
    /*color: var(--dark);*/
    color: var(--btncolor);
    border-radius: 0;
}

#new-exercise-form-container form .row:last-child .form-group{
    margin-bottom: 0;
}

#new-exercise-form-container form .secondaryBtn, #new-exercise-form-container form .btn.primary{
padding: 0.5rem 1rem;
}

#new-exercise-form-container form .secondaryBtn span, #new-exercise-form-container form .primary.btn span{
    /*font-size: 16px;*/
}


.scaleDownFadeOut{
  opacity: 0 !important;
  /*transform: translateY(-50px);*/
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
overflow: auto;
height: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
}

#create-program-form-container, #edit-program-form-container {
  padding: var(--border-padding) calc(2 * var(--border-padding));
}

#create-program-form, #edit-program-form {
/*  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;*/
  padding: var(--border-padding);
  /*padding-top: 2rem;*/
  overflow: auto;
/*  margin: 1rem 0;
    margin-top: 1rem;*/
    margin: 0;
  border-radius: var(--border-radius-box);
  border: 1px solid var(--inner-box-border-color);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  /*height: 20rem;*/
  /*grid-template-rows: 1fr 2fr;*/
}

#create-program-form.minimise, #edit-program-form.minimise {
  height: 6rem;
}

#create-program-form-container .down-arrow, #edit-program-form-container .down-arrow{
  position: absolute;
  right: 2rem;
  top: 3rem;
  transform: rotate(-90deg);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

#create-program-form-container .down-arrow.up-arrow, #edit-program-form-container .down-arrow.up-arrow{
  transform: rotate(90deg);
}

#create-program-form:first-child, #edit-program-form:first-child{
/*margin-top: 1rem;*/
}

#create-program-form .radio-container, #edit-program-form .radio-container{
  display: flex;
padding: 0.75rem 0.5rem 0.5rem;
  /*border: 1px solid;*/
  background: white;
justify-content: space-evenly;
gap: 0.5rem;
/*width: 100%;*/
margin-bottom: 1rem;
border: 1px solid black;
border-radius: 0.625rem;
}


#create-program-form .radio-container span, #edit-program-form .radio-container span{
    position: absolute;
  top: -1rem;
  left: 1rem;
  font-size: 1rem;
background: white;
padding: 0 0.5rem;
border-radius: 0.625rem;
}

#create-program-form .radio-container .radio-input{
  display: none;
}

#create-program-form .radio-container .radio-input:checked + .radio-label{
  background: var(--btncolor);
  /*background: #ededed;*/
  color: white;
}

#create-program-form .radio-container .radio-label{
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  margin: 0;
  place-content:  center;
  /*padding: 0;*/
}


#create-program-form #new-program-description{
/*grid-column-start: 1;
grid-column-end: 5;
height: 100px;*/
}


.program-creator-selector-label{
display: grid;
margin: 0;
place-items: center;
grid-template-columns: 50% 50%;
overflow: hidden;
}

.program-creator-selector-label span{
display: inline;
}


#newProgramDataContainer,
#editProgramDataContainer{
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
/*overflow-x: auto;*/
gap: calc(1 * var(--border-padding));
padding: var(--border-padding) calc(2 * var(--border-padding));
z-index: 9;
max-height: 1000px;
overflow: auto;
}

/*#newProgramDataContainer .invalid,
#editProgramDataContainer .invalid{
border: 3px solid red !important;
}*/

/*#editProgramDataContainer{
  display: flex;
  flex-direction: column;
}*/

#newProgramDataContainer .days,
#editProgramDataContainer .days{
  /*border: 1px solid;*/
  min-height: 200px;
  max-height: 700px;
  border-radius: var(--border-radius-box);
overflow: hidden;
overflow-y: auto;
background: var(--bg);
padding: 0;
width: 100%;
/*  border: 1px solid var(--inner-box-border-color);*/

}


#newProgramDataContainer .days.blurred,
#editProgramDataContainer .days.blurred{
/*background: #2e2e2e45;*/
}


#trainer-new-program-page #createProgramActionBtnBox, 
#trainer-program-details #editProgramActionBtnBox, 
#trainer-client-checkin-page #editProgramActionBtnBox{
display: flex;
width: 100%;
padding: 0 var(--border-padding);
/*margin: 1rem 0;*/
justify-content: end;
/*justify-content: space-between;*/
position: sticky;
top: 0;
/*top: var(--search-bar-height);*/
background: var(--bg);
z-index: 99;
flex-wrap: wrap;
}

#createProgramActionBtnBox .actionBtnContainer,
#editProgramActionBtnBox .actionBtnContainer,
#editProgramActionBtnBox .loadStatus{
display: inline-flex;
gap: var(--border-padding);
position: relative;
padding: var(--border-padding);
/*background: green;*/
/*border-radius: 0.625rem;*/
/*border: 1px solid;*/
}

#editProgramActionBtnBox .loadStatus{
padding: 0;
align-items: center;
margin-right: auto;
padding-left: var(--border-padding);
}

/*#createProgramActionBtnContainer1,
#editProgramActionBtnContainer1{
margin-right: 1rem;
}

#createProgramActionBtnContainer2,
#editProgramActionBtnContainer2{
margin-left: 1rem;
}*/


.days .dayHeader > .notesIconSVG,
.days .dayHeader > .notesIcon-mui {
top: 50%;
left: 2rem;
z-index: 99;
transform: translateY(-50%);
}


/*.dayBadge{
  color: white;
  display: inline;
  font-size: 1.25rem;
align-self: center;
}*/

/*.dayHeader .date{
  display: grid;
  text-align: left;
  font-size: .75rem;
}*/

.days.date-exist{
  padding-top: 25px !important;
}

.days.date-exist .dayHeader{
border-radius: var(--border-radius-box) 0 0 0 !important;
}


.days .dayHeader .dayBadge::after {
  content: '';
  position: absolute;
  background: var(--bg);
  height: 2px;
  width: 7px;
  top: 50%;
  transform: translateY(-50%);
  right: -11px;
}


.days .dayHeader .date-data{
display: none;
}

.days.date-exist .dayHeader .date-data{
  display: flex;
  position: absolute;
  top: -25px;
  right: 0;
  background: white;
  height: 25px;
  width: 100%;
justify-content: end;
}

.days.date-exist .dayHeader .date-data .date{
  right: 0;
background: var(--btncolor);
padding: 0.5rem 0.75rem;
display: flex;
height: 25px;
place-items: center;
border-radius: 0.5rem 0.5rem 0 0;
font-size: var(--font-size-button-primary) !important;
}

#newProgramDataContainer .bucketContainer.active, #editProgramDataContainer .bucketContainer.active{
  /*min-height: 200px;*/
background: var(--bg);
overflow-y: auto;
/*padding: var(--border-padding);*/
padding: calc(var(--border-padding) / 2);
margin: 0;
min-height: 300px;
  display: grid;
  gap: var(--border-padding);
  width: 100%;
overflow-x: hidden;
  /*gap: calc(var(--border-padding) / 2);*/
}

#newProgramDataContainer .bucketContainer.active .new-program-bucket, 
#editProgramDataContainer .bucketContainer.active .new-program-bucket{
  /*margin-bottom: 1rem;*/
  /*background-color: white;*/
border-radius: var(--border-radius-box);
/*box-shadow: var(--box-shadow-inner-card);*/
box-shadow: 0 0 15px 5px rgba(62, 60, 98, 0.15);
overflow: hidden;
}

#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader,
#newProgramDataContainer .bucketContainer.active .new-program-bucket .ssBucketHeader,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .ssBucketHeader{
  /*margin-top: calc(var(--border-padding) / 2);*/
  padding: calc(var(--border-padding) / 2) calc(4.5 * var(--border-padding)) calc(var(--border-padding) / 2) calc(2 * var(--border-padding));
}

/*#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketName,*/
/*#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketName*/
#newProgramDataContainer .bucketName,
#editProgramDataContainer .bucketName{
border-radius: var(--border-radius-box);
width: 100%;
background: transparent;
/*left: 50%;*/
/*transform: translateX(-50%);*/
border: 2px solid transparent;
font-weight: 600;
}


/*
#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .bucketName:focus,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .bucketName:focus{
border: 2px solid var(--btncolor-nogradient-op80) !important;
  }
*/

  #newProgramDataContainer .days .dayHeader .bucketName::placeholder,
#editProgramDataContainer .days .dayHeader .bucketName::placeholder
{
color: var(--bg);
  }

  #newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketName::placeholder,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketName::placeholder
{
color: black;
  }

.days .dayHeader .bucketName:focus{
border: 2px solid var(--bg) !important;;
}
.days .dayHeader .bucketName {
  color: var(--bg);
  margin-right: 0.5rem;
}

.ssBucketHeader .bucketName:focus{
border: 2px solid var(--border-color-default) !important;;
}

#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .deleteBtn,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .deleteBtn{
top: calc(var(--border-padding) / 2);
  }

#newProgramDataContainer .bucketContainer.active .new-program-bucket .exerciseContainer,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .exerciseContainer {
  margin: 0;
padding: calc(var(--border-padding) / 2);
display: flex;
place-content: center;
place-items: center;
flex-direction: column;
  /*min-height: 150px;*/
  min-height: 185px;
  /*row-gap: 0.25rem;*/
}


/*#newProgramDataContainer .bucketContainer.active .new-program-bucket .exerciseContainer .sortable-list-item{
  margin:  calc(0.625rem / 2.5) 0;
}*/

#newProgramDataContainer .bucketContainer.active .new-program-bucket .new-program-ss-bucket,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .new-program-ss-bucket,
#client-todays-training-page .group {
/*  border: 2px dashed #b8b8b8;*/
  border: var(--groupset-border);
  border-radius: var(--border-radius-box);
  width: 100%;
  margin: 0.25rem 0;
}

/*#newProgramDataContainer .bucketContainer.active .new-program-bucket .new-program-ss-bucket .exerciseContainer,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .new-program-ss-bucket .exerciseContainer{
  padding-top: 3rem;
}*/

.exerciseContainer { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.exerciseContainer .add_exercise { 
  background: var(--body); 
position:relative; 
/*padding: calc(var(--border-padding) / 2) calc(3 * var(--border-padding)); */
padding: calc(var(--border-padding) / 2) calc(4.5 * var(--border-padding)) calc(var(--border-padding) / 2) calc(2 * var(--border-padding));
list-style: none; 
/*padding-left: 3.5rem; */
border-radius: var(--border-radius-box);
/*padding-right: calc(2rem + 18px);*/
height: auto;
border: 0;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: 0px;
/*border-bottom: 1px solid lightgray;*/
}

.ss-bucket-exerciseContainer .add_exercise,
#client-todays-training-page .group .exerciseContainer .exercise {
  border-radius: 0;
  border: 0;
  background: var(--body2);
}

.ss-bucket-exerciseContainer .add_exercise:first-child,
#client-todays-training-page .group .exerciseContainer .exercise:first-child {
  border-radius: var(--border-radius-box) var(--border-radius-box) 0 0;
}

.ss-bucket-exerciseContainer .add_exercise:last-child,
#client-todays-training-page .group .exerciseContainer .exercise:last-child {
  border-radius: 0 0 var(--border-radius-box) var(--border-radius-box);
}


.ss-bucket-exerciseContainer .add_exercise::before, 
.ss-bucket-exerciseContainer .add_exercise::after,
#client-todays-training-page .group .exerciseContainer .exercise::before,
#client-todays-training-page .group .exerciseContainer .exercise::after {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: url('../assets/images/link8.png');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  left: 0.35rem;
  object-fit: cover;
  background-repeat: no-repeat;
  transform: rotate(135deg);
  background-position: center;
  background-size: 20px;
}

.ss-bucket-exerciseContainer .add_exercise::before,
#client-todays-training-page .group .exerciseContainer .exercise::before {
  top: -10px;
}

.ss-bucket-exerciseContainer .add_exercise::after,
#client-todays-training-page .group .exerciseContainer .exercise::after {
  bottom: -10px;
}

.ss-bucket-exerciseContainer .add_exercise:first-child::before,
.ss-bucket-exerciseContainer .add_exercise:last-child::after,
#client-todays-training-page .group .exerciseContainer .exercise:first-child::before,
#client-todays-training-page .group .exerciseContainer .exercise:last-child::after {
  background: none;
}

/*.add_exercise .label-area::before,*/
/*.new-program-bucket .label-area::before,*/
.bucket-exerciseContainer .label-area::before
 {
content: attr(data-exercise-label);
position: absolute;
left: -1.65rem;
font-size: 10px;
top: 50%;
text-transform: uppercase;
font-weight: 600;
transform: translateY(-50%);
background: var(--body2);
padding: 1px 2px;
border-radius: var(--border-radius-button);
border: 1px solid var(--border-color-default);
}

.label-area{
  display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}

.label-area p,
#client-todays-training-page .exercise .exercise-data .exercise-name {
  font-size: var(--font-size-body-regular);
  font-weight: 400;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
display: block;
width: 100%;
}

/*#client-todays-training-page .exercise .exercise-data div:last-child span,*/
.label-area span {
  font-size: var(--font-size-button-primary);
      font-family: 'Manrope-Variable' !important;
}

.label-area strong{
  font-weight: 600 !important;
}

.ssBucketHeader::before {
/*  content: attr(data-exercise-label);*/
  position: absolute;
  left: 8px;
  font-size: 12px;
  top: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.exerciseContainer .add_exercise .exercise-name { 
width: calc(100% - calc(1.5rem + 18px));
}

#newProgramDataContainer .dayHeader .handle, 
#editProgramDataContainer .dayHeader .handle, 
.exerciseContainer .add_exercise .handle, 
.exerciseContainer .new-program-ss-bucket .handle, 
.bucketContainer .new-program-bucket .handle { 
  background: transparent; 
position: absolute; 
left: 0; 
top: 0; 
bottom: 0; 
padding: calc(var(--border-padding) / 2); 
/*border-right: 1px solid lightgray;*/
cursor: grab;
visibility: hidden;
  z-index: 9;
}

.exerciseContainer .add_exercise .duplicateIcon, 
.exerciseContainer .new-program-ss-bucket .duplicateIcon, 
.bucketContainer .new-program-bucket .duplicateIcon{
/*    position: absolute;
right: 2rem;
top: 0;
padding: calc(var(--border-padding) / 2);
width: 2rem;
height: 100%;*/
visibility: hidden;
}

/*.exerciseContainer .add_exercise .duplicateIcon::before, 
.exerciseContainer .new-program-ss-bucket .duplicateIcon::before, 
.bucketContainer .new-program-bucket .duplicateIcon::before{
   font-size: var(--font-size);
  }*/

.exerciseContainer .add_exercise .deleteIcon, 
.exerciseContainer .new-program-ss-bucket .deleteIcon, 
.bucketContainer .new-program-bucket .deleteIcon{
  visibility: hidden;
/*      position: absolute;
right: 0;
padding: calc(var(--border-padding) / 2);
width: 2rem;
height: 100%;*/
}

/*.exerciseContainer .add_exercise .deleteIcon::before, 
.exerciseContainer .new-program-ss-bucket .deleteIcon::before, 
.bucketContainer .new-program-bucket .deleteIcon::before{
     font-size: var(--font-size);
width: var(--font-size);
}*/

.exerciseContainer:hover .add_exercise .handle, 
.exerciseContainer:hover .new-program-ss-bucket .handle, 
.bucketContainer .new-program-bucket:hover .handle,
.exerciseContainer:hover .add_exercise .duplicateIcon, 
.exerciseContainer:hover .new-program-ss-bucket .duplicateIcon, 
.bucketContainer .new-program-bucket:hover .duplicateIcon,
.exerciseContainer:hover .add_exercise .deleteIcon, 
.exerciseContainer:hover .new-program-ss-bucket .deleteIcon, 
.bucketContainer .new-program-bucket:hover .deleteIcon{
  visibility: visible;
}

#newProgramDataContainer .dayHeader .handle,
#editProgramDataContainer .dayHeader .handle{
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
/*padding: 0;*/
/*padding-right: 0.5rem;*/
z-index: 99;
  place-content: center;
  place-items: center;
  visibility: visible;
  padding: calc(var(--border-padding) / 2);
left: 0;
height: 100%;
}

#newProgramDataContainer .dayHeader,
#editProgramDataContainer .dayHeader{
  padding: 0.5rem 4rem;
background: var(--btncolor);
display: flex;
align-items: center;
place-content: center;
gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 99;
  border-radius: var(--border-radius-box) var(--border-radius-box) 0 0;
box-shadow: var(--box-shadow-titlebar);
color: var(--bg);
}

#newProgramDataContainer .dayHeader .date, #newProgramDataContainer .dayHeader .dayBadge,
#editProgramDataContainer .dayHeader .date, #editProgramDataContainer .dayHeader .dayBadge{
  text-transform: uppercase;
  cursor: default;
  font-size: var(--font-size-body-regular);
}

#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .handle,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .handle{
  border: 0;
}

.exerciseContainer .add_exercise .handle i, .exerciseContainer .new-program-ss-bucket .handle i, .bucketContainer .new-program-bucket .handle i{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
width: 25px;
padding: 0;
padding-right: 0.5rem;
}


ul.sortable_list li header span{
background: yellow;
}

ul.sortable_list li header span.active{
  background: red;
}


/*#newProgramDataContainer .actionBtnContainer{
  display: inline-grid;
  gap: 0.5rem;
  padding: 1rem;
}*/

#newProgramDataContainer .actionBtnContainer,
#editProgramDataContainer .actionBtnContainer{
display: flex;
/*gap: var(--border-padding);*/
gap: calc(var(--border-padding) / 2);
/*padding: var(--border-padding);*/
padding: calc(var(--border-padding) / 2);
place-content: center;
box-shadow: var(--box-shadow-dock);
position: sticky;
bottom: 0;
background: var(--bg);
z-index: 9;
border-radius: var(--border-radius-box);
border: 3px solid var(--body2);
border-top: 0;
}


#newProgramDataContainer .actionBtnContainer *,
#editProgramDataContainer .actionBtnContainer *
{
  /*display: inline;*/
  margin-bottom: 0;
}


.programBucketColorOptions{
  display: inline-block;
border-radius: var(--border-radius-button);
position: absolute;
height: auto;
width: 140px;
background: var(--bg);
bottom: 100%;
left: 40%;
transform: translateX(-75%);
transition: all 1s ease;
padding: 0.5rem;
box-shadow: var(--box-shadow-inner-card);
max-height: 170px;
overflow-y: auto;
}

.programBucketColorOptions .option{
  margin: 0.25rem 0;
background: white;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
display: flex !important;
place-items: center;
gap: 0.5rem;
  cursor: pointer;
}

.programBucketColorOptions .option:hover{
background: var(--body2);
color: black;
}


.programBucketColorOptions .option .color{
  height: 1rem;
width: 1rem;
display: inline-block;
border-radius: 0.25rem;
}


@media only screen and (max-width: 767px) {



#new-exercise-form-container{
grid-template-columns: 100%
}

#exercise_data_name {
/*width: 100%;*/
}



#create-program-form {
  display: grid;
  grid-template-columns: 100%;
}

#create-program-form #new-program-description{
grid-column-start: 1;
grid-column-end: 2;
}

#create-program-form-container, 
#edit-program-form-container {
  padding: var(--border-padding) calc(1 * var(--border-padding));
}

#newProgramDataContainer, 
#editProgramDataContainer{
padding: var(--border-padding) calc(1 * var(--border-padding));
}

#trainer-new-program-page #createProgramActionBtnBox, 
#trainer-program-details #editProgramActionBtnBox, 
#trainer-client-checkin-page #editProgramActionBtnBox{
  padding: 0;
justify-content: space-between;
}

#createProgramActionBtnBox .actionBtnContainer, #editProgramActionBtnBox .actionBtnContainer, #editProgramActionBtnBox .loadStatus{
  gap: calc(var(--border-padding) / 2);
}

.dayb{
grid-template-columns: 1fr !important;
height: auto;
overflow: unset;
}

#client-todays-training-top-container {
  position: sticky;
/*  top: var(--search-bar-height);*/
}

.exercise_video_container{
height: calc(25 * var(--vh));
}

.profile-banner{
  flex-direction: column;
text-align: center;
}

#client_detials_container .section-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(1 * var(--border-padding));
    margin-bottom: calc(1 * var(--border-padding));
}

#client_detials_container .section{
  margin: calc(1 * var(--border-padding)) 0;
  padding: calc(1 * var(--border-padding));
}

#client_detials_container {
  padding: calc(1 * var(--border-padding));
}

  }