:root{
  --tools-menu-height: 200px;
  --checkIn-client-profile-modal-height: 80%;
  --checkIn-client-profile-modal-width: 85%;
}

#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: 1rem;
  /*margin: 1rem 0;*/
  /*border: 1px solid black;*/
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

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

.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;
}




#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: hidden;
  width: var(--checkIn-client-profile-modal-width);
  border-radius: var(--border-radius-box);
}

/*#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 */
}


#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: 25% 3fr;
  gap: 1rem;
  padding: 1rem;
}

#checkInPageMainDataContainer #editProgramDataContainer {
grid-template-columns: 100%;
padding: 0;
}

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

#checkInPageMainDataContainer #editProgramDataContainer .days .exerciseContainer .add_exercise{
  height: 120px;
}

#checkInStatsDataContainer{
  border: 1px solid;
  display: grid;
gap: 1rem;
align-content: flex-start;
overflow: auto;
}

#checkInStatsDataContainer .days{
  border: 1px solid purple;
  transition: none;
  height: auto;
display: flex;
}


#checkInStatsDataContainer .days .column{
width: 200px;
margin: 0 0.5rem;
}

#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{
  display: grid;
  row-gap: 0.25rem;
  margin-top: 0.5rem;
}

#checkInStatsDataContainer .days .column .day-stats .listBtn{
  height: 120px;
  flex-wrap: wrap;
  overflow: auto;
  border-radius: 0.625rem;
}

#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: 1rem;
}

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

.stats-notes textarea{
  width: 95%;
  border: 1px solid lightgray;
  border-radius: 0.625rem;
}

.stats-notes textarea:disabled{
  background: #f0f0f0;
}

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






#client_detials_container{
  padding: calc(2 * var(--border-padding));
  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: 0px 2px 20px #d7d7d763;
}

#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));
}

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

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


#client_detials_container .section pre{
  font-size: 1.5rem;
  margin-left: 1rem;
}

#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, #todolist-page, #notes-app-page{
  height: 100%;
width: 100%;
/*background: red;*/
position: absolute;
top: 0;
left: 200%;
transition-duration: 0.5s;
z-index: 9999;
}

#stats-page.active, #trainer-client-checkin-page.active, #todolist-page.active, #notes-app-page.active{
  left: 0;
}

/*#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;
}








.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;
}




#client-todays-training-top-container{
/*  position: sticky;
  top: var(--search-bar-height);*/
  padding: 1rem 1rem;
z-index: 9;
background: white;
box-shadow: 0px 2px 20px #d7d7d763;
border-radius: 0.625rem;
overflow: hidden;
}



.dayb .bucketContainer{
  overflow: auto;
  padding: 1rem;
}

#client_training_menu{
  display: flex;
  justify-content: space-between;
  /*margin-bottom: 1rem;*/
padding: 0 0.5rem;
}

#client_training_menu .form-group{
  margin: 0;
}

.dayb{
border: 2px solid red;
/*margin-bottom: 20px;*/
padding: 0;
display: grid;
grid-template-columns: 1.5fr 1fr;
height: calc(var(--innerHeight) - calc(var(--navbar-height) + var(--search-bar-height)));
overflow: hidden;
}

.bucket{
/*border: 2px solid powderblue;*/
padding: 1rem;
margin-bottom: 10px;
background: white;
/*box-shadow: inset 2px 2px 10px 3px lightgreen, inset -2px -2px 10px 3px lightgreen;*/
border-radius: 0.625rem;
}

.bucketBadgeWrapper{
  margin-bottom: 0.5rem;
}

.group{
margin-bottom: 5px;
border: 2px dashed #b8b8b8;
border-radius: 0.5rem;
padding: 0.5rem;

}

.bucket .exercise{
margin: 0;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
margin-bottom: 0.5rem;
display: grid;
grid-template-columns: auto calc(1.5rem + 32px);
cursor: pointer;
/*border-bottom: 1px solid;*/
}

.bucket .exercise:hover {
  background: #ededed;
box-shadow: 0px 2px 20px #d7d7d763;

}

.exercise .exercise-data{
  display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
}

.exercise .exercise-data .exercise-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exercise .exercise-data-icons{
  display: grid;
grid-template-rows: 1fr 1fr;
justify-content: end;
}

.minc-modal.exercise-details .description{
  max-height: 250px;
overflow-y: auto;
display: inline-block;
box-shadow: 0px -2px 20px #d7d7d763;
}






.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;
}

.radio-container label{
  margin: 0;
  margin-right: 0.5rem;
}

.radio-input{
  display: none;
}

.radio-input + span{
padding: 0.35rem 0.825rem;
border-radius: 0.25rem;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background: transparent;
cursor: pointer;
}

.radio-input + span:hover {
  background: #ededed;
}

.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-box);
/*box-shadow: var(--box-shadow-outer-card);*/
box-shadow: var(--box-shadow-dock);
}

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

}

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

#page-container{
  height: 100%;
  border-radius: var(--border-radius-box);
box-shadow: var(--box-shadow-outer-card);
}


#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;
  text-transform: capitalize;
  position: sticky;
top: var(--search-bar-height); /* title bar height  */
z-index: 999;
background: var(--titleColor);
}


.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(2 * var(--border-padding));
padding-top: calc(1 * var(--border-padding));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: calc(2 * var(--border-padding));
}

#stats-form-container-page1, #stats-form-container-page2{
  position: absolute;
  padding: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  flex-direction: column;
gap: 1rem;
display: flex;
}

#stats-form-container-page1{
  left: 0%;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#stats-form-container-page2{
left: 110%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

#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{
top: 1rem;
right: 1rem;
}

.create-program-single-exercise-form .notesIconSVG {
    top: 1.25rem;
    left: 15px;
}



#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(370px, 1fr));
/*overflow-x: auto;*/
gap: calc(2 * var(--border-padding));
padding: var(--border-padding) calc(2 * var(--border-padding));
z-index: 9;
}

#newProgramDataContainer .days,
#editProgramDataContainer .days{
  /*border: 1px solid;*/
  min-height: 200px;
  max-height: 700px;
  border-radius: var(--border-radius-box);
overflow: hidden;
overflow-y: auto;
  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: space-between;
position: sticky;
top: var(--search-bar-height);
background: var(--bg);
z-index: 99;
flex-wrap: wrap;
}

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

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

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


.days .dayHeader > .notesIconSVG {
top: 50%;
left: 2.5rem;
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;
}

#newProgramDataContainer .bucketContainer.active, #editProgramDataContainer .bucketContainer.active{
  /*min-height: 200px;*/
background: lightblue;
overflow-y: auto;
padding: var(--border-padding);
margin: 0;
min-height: 300px;
  display: grid;
  gap: var(--border-padding);
}

#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);

}

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

#newProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .bucketName,
#editProgramDataContainer .bucketContainer.active .new-program-bucket .bucketHeader .bucketName{
border: 1px solid var(--inner-box-border-color);
border-radius: var(--border-radius-box);
width: calc(100% - calc(calc(2 * var(--border-padding)) + 58px));
background: transparent;
left: 50%;
transform: translateX(-50%);
}

#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: var(--border-padding);
display: flex;
place-content: center;
place-items: center;
flex-direction: column;
  min-height: 150px;
  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 {
  border: 2px dashed #b8b8b8;
  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: white; */
position:relative; 
padding: var(--border-padding) calc(3 * var(--border-padding)); 
list-style: none; 
/*padding-left: 3.5rem; */
border-radius: var(--border-radius-button);
/*padding-right: calc(2rem + 18px);*/
height: auto;
}



.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: var(--border-padding); 
/*border-right: 1px solid lightgray;*/
cursor: grab;
visibility: hidden;
}


.exerciseContainer:hover .add_exercise .handle, 
.exerciseContainer:hover .new-program-ss-bucket .handle, 
.bucketContainer .new-program-bucket:hover .handle{
  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;
}

#newProgramDataContainer .dayHeader,
#editProgramDataContainer .dayHeader{
  padding: 0.5rem;
background: green;
display: flex;
align-items: center;
place-content: center;
gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 99;
}

#newProgramDataContainer .dayHeader .date, #newProgramDataContainer .dayHeader .dayBadge,
#editProgramDataContainer .dayHeader .date, #editProgramDataContainer .dayHeader .dayBadge{
  text-transform: uppercase;
}

#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);
padding: var(--border-padding);
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);
}


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


.programBucketColorOptions{
  display: inline-block;
border-radius: 0.625rem;
position: absolute;
height: auto;
width: 140px;
background: lightblue;
bottom: calc(100% - 0.5rem);
left: 3rem;
transition: all 1s ease;
padding: 0.5rem;
}

.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: #ededed;
}


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

.color.red{
  background: red;
}

.color.magenta{
  background: magenta;
}

.color.green{
  background: green;
}

.color.yellow{
  background: yellow;
}


@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;
}


.dayb{
grid-template-columns: 1fr;
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;
}

  }