#client-stats-calendar-container > .infoBox{
padding: 1rem;
}

#client-stats-calendar-container > .infoBox > div{
font-size: 1.2rem;
font-weight: 400;
}

#client-stats-calendar-container > .infoBox > div > span{
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600;
}

#client-stats-calendar-and-chart-container{
  padding: 0rem 1rem 1rem 1rem;
}

#sleepInputContainer{
  margin-bottom: 1rem;
padding: 1rem;
display: flex;
place-content: center;
}


.range-container{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
padding: 1rem;
border-radius: 0.5rem;
}

.range-container .range-input{
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 80%;
    height: 8px;
    background-color: #d5d5d5;
    border-radius: 8px;
    outline: none;
}
.range-container .range-input::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 8px;
}
.range-container .range-input::-moz-track{
    -moz-appearance: none;
    height: 8px;
}
.range-container .range-input::-ms-track{
    appearance: none;
    height: 8px;
}
.range-container .range-input::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #3264fe;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    border: none;
}
.range-container .range-input::-moz-range-thumb{
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #3264fe;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    border: none;
}
.range-container .range-input::-ms-thumb{
    appearance: none;
    height: 20px;
    width: 20px;
    background-color: #3264fe;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    border: none;
}
.range-container .range-input:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}
.range-container .slider-value{
    position: relative;
    background-color: #3264fe;
    color: #ffffff;
    text-align: center;
    font-family: "Roboto Mono",monospace;
    padding: 0.35rem 1rem;
border-radius: 0.5rem;
margin-left: 1rem;
min-width: 90px;
}








/*#client-my-account-container, */
.my-account-container{
  display: grid;
grid-template-columns: 30% 70%;
padding: var(--border-padding);
}

/*#client-my-account-ActionBtncontainer, */
.my-account-ActionBtncontainer{
  height: 100%;
background: white;
overflow: hidden;
}

/*#client-my-account-Secondary-ActionBtncontainer, */
.my-account-Secondary-ActionBtncontainer{
  padding: 1rem;
  z-index: 99;
}

/*#client-my-account-MainAreacontainer, */
.my-account-MainAreacontainer{
  height: 100%;
background: white;
overflow: hidden;
}

/*#client-my-account-ActionBtncontainer .profile-banner, */
.my-account-ActionBtncontainer .profile-banner{
  flex-direction: column;
  place-content: center;
}

/*#client-my-account-ActionBtncontainer .profile-banner .profile-picture,
#client-my-account-ActionBtncontainer .profile-banner .metadata,*/
.my-account-ActionBtncontainer .profile-banner .profile-picture,
.my-account-ActionBtncontainer .profile-banner .metadata{
display: flex;
flex-direction: row;
justify-content: center;
}


/*#client-my-account-ActionBtncontainer .btnContainer, */
.my-account-ActionBtncontainer .btnContainer{
  display: grid;
  padding: 1rem;
  gap: 0.5rem;
}


/*#client-my-account-ActionBtncontainer .btnContainer span, */
.my-account-ActionBtncontainer .btnContainer span {
  /*font-size: 1rem;*/
  /*background: white;*/
  /*border: 1px solid;*/
  /*padding: 0.5rem;*/
  cursor: pointer;
}


.my-account-ActionBtncontainer .btnContainer span::before {
  content: '';
  height: 0%;
  width: 4px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  background: var(--btncolor);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.my-account-ActionBtncontainer .btnContainer span:hover::before, .my-account-ActionBtncontainer .btnContainer span.active::before {
  height: 70%;
}

/*#client-my-account-MainAreacontainer #client-my-account-MainArea-MyProfile,
#client-my-account-MainAreacontainer #client-my-account-MainArea-MyFiles,
#client-my-account-MainAreacontainer #client-my-account-MainArea-Billing,
#client-my-account-MainAreacontainer #client-my-account-MainArea-PaymentHistory,*/
.my-account-MainAreacontainer .my-account-MainArea-MyProfile,
.my-account-MainAreacontainer .my-account-MainArea-MyFiles,
.my-account-MainAreacontainer .my-account-MainArea-MyTrainer,
.my-account-MainAreacontainer .my-account-MainArea-MyCertificates,
.my-account-MainAreacontainer .my-account-MainArea-Billing,
.my-account-MainAreacontainer .my-account-MainArea-PaymentHistory{
  height: 100%;
}


/*.client-myProfile, */
.myProfile{
  height: 100%;
  overflow: auto;
}


/*.client-myProfile .profile-banner, */
.myProfile .profile-banner{
/*position: sticky;
top: 0;
z-index: 9;*/
/*background: white;*/
}

/*.client-myProfile .account-metadata, */
.myProfile .account-metadata{
  padding: 1rem;
  gap: 1rem;
display: grid;
}


/*.account-metadata #client-account-metadata-primary-form, */
.account-metadata .account-metadata-primary-form, .account-metadata .account-metadata-secondary-form {
  border: 1px solid var(--inner-box-border-color);
  padding: var(--border-padding);
  border-radius: var(--border-radius-box);
}

/*.account-metadata #client-account-metadata-secondary-form, */
/*.account-metadata .account-metadata-secondary-form {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid;
}*/

.account-metadata .editBtn{
  position: absolute;
  right: var(--border-padding);
}


/*.client-myFiles, */
.myFiles{
  height: 100%;
  overflow: auto;
  display: grid;
grid-template-rows: calc(75% - calc(var(--border-padding) / 2)) calc(25% - calc(var(--border-padding) / 2));
padding: var(--border-padding);;
gap: var(--border-padding);;
background: white;
}

.myFiles.read-only {
  grid-template-rows: 100%;
}

/*.client-myFiles .fileList, */
.myFiles .fileList{
border-radius: var(--border-radius-box);
/*border: 1px solid black;*/
height: 100%;
overflow: hidden;
box-shadow: var(--box-shadow-inner-card);
}

/*.client-myFiles .fileList .btnContainer,*/
.myFiles .fileList .btnContainer{
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  padding: var(--border-padding);
  box-shadow: var(--inner-box-border-color);
  background: white;
}

/*.client-myFiles .fileList .btnContainer .listBtn,*/
.myFiles .fileList .btnContainer .listBtn{
  border-radius: var(--border-radius-button);
}

/*.client-myFiles .fileList .btnContainer .listBtn:not(:last-child),*/
.myFiles .fileList .btnContainer .listBtn:not(:last-child){
  margin-bottom: calc(var(--border-padding) / 2);
}

/*.client-myFiles .fileList .btnContainer .listBtn a,*/
.myFiles .fileList .btnContainer .listBtn a{
width: calc(100% - calc(var(--border-padding) * 3));
color: black;
}

/*.client-myFiles .fileList .btnContainer .listBtn a:hover,*/
.myFiles .fileList .btnContainer .listBtn a:hover{
  text-decoration: none;
  color: black;
}


/*.client-myFiles .fileList .btnContainer .listBtn div p,*/
.myFiles .fileList .btnContainer .listBtn div p{
  font-size: 1.1rem;
  font-weight: 400;
}

/*.client-myFiles .fileList .btnContainer .listBtn div span,*/
.myFiles .fileList .btnContainer .listBtn div span{
  font-size: 0.85rem;
  font-weight: 300;
}

/*.client-myFiles .newFiles,*/
.myFiles .newFiles{
/*padding: 1rem;*/
border-radius: var(--border-radius-box);
/*border: 1px solid black;*/
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

.filesDropzone{
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-box);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  background: rgba(209, 209, 214, 0.22);
border: 1px solid var(--inner-box-border-color);
display: flex;
flex-direction: column;
place-content: center;
text-align: center;
cursor: pointer;
}

.filesDropzone span{
  pointer-events: none;
}




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

/*#client-my-account-container,*/
.my-account-container{
grid-template-columns: 100%;
grid-template-rows: 76px auto;
}

#client-stats-calendar-and-chart-container{
  padding: 0rem 0rem 1rem 0rem;
}

}