#appMask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}

#appMask > img {
    width: 9vw;
    height: 9vw;
}


.indexCard {
    margin-top: 2.78vw;
    width: 91.11vw;
    box-sizing: border-box;
    padding: 9.17vw 6.67vw 2.78vw;
    background-color: white;
    border-radius: 2.08vw;
}

.indexCardItem {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.indexCardItemLeft {
    position: relative;
    flex: 0 0 50%;
    height: 2.5rem;
    font-size: 1.125rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    vertical-align: bottom;
}

.indexCardItemRight {
    flex: 0 0 50%;
    height: 2.5rem;
    font-size: .75rem;
    color:rgba(0, 0, 0, .6);
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

.indexCardItemRightValue {
    margin: 0 .5rem;
    /* height: 2.5rem; */
    font-size: 1.5rem;
    color: #47CC47;
}

.napCardItemRightValue {
    margin: 0 .5rem;
    height: 2.5rem;
    font-size: 1.75rem;
    color: #5D4AFB;
    vertical-align: bottom;
}


.chartCard {
    margin: var(--px12) auto 0;
    width: 100%;
    height: auto;
    /* box-shadow: 0 0.83vw 1.11vw 0 rgba(0, 0, 0, 0.03); */
    border-radius: var(--px16);
    overflow: hidden;
}

.chartHeader,
.my-chart-head {
    width: 100%;
    height: var(--px52);
    box-sizing: border-box;
    /* padding: var(--px14) var(--px24) 0; */
    padding: 0 var(--px24);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background);
    border-bottom: var(--divider-border-2);
}


.chartHeaderLeft, 
.my-chart-head-left {
    position: relative;
    width: 60%;
    height: var(--px24);
    font-size: 1rem;
    vertical-align: bottom;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-color-1);
}

.indexCardItemLeft > img, 
.chartHeaderLeft > img, 
.my-chart-head-left > img {
    margin-left: var(--px8);
    width: 1rem;
    height: 1rem;
}

.chartHeaderRight,
.my-chart-head-right {
    width: 40%;
    /* height: var(--px24); */
    font-size: .625rem;
    color: var(--text-color-2);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.chartHeaderRightValue, 
.chartHeaderRightValueHr, 
.chartHeaderRightValueRr, 
.chartHeaderRightValueMove, 
.chartHeaderRightValueStress {
    margin: 0 var(--px4);
    font-size: 1.125rem;
    color: #5D4AFB;
}

.chartHeaderRightValueHr {
    color: #17D292;
}

.chartHeaderRightValueRr {
    color: #29B6F4;
}

.chartHeaderRightValueMove {
    color: #007DFF; 
}

.chartHeaderRightValueStress {
    color: #88BE24;
}

.chartCardMental {
    margin-bottom: 3rem;
}

.chartBody,
.my-chart-body {
    width: 100%;
    height: auto;
    background: var(--background);
}

.sleepInfo,
.my-sleep-info {
    width: 100%;
    box-sizing: border-box;
    padding: var(--px20) var(--px32) var(--px10);
}

.sleepInfoSub,
.my-sleep-info-sub {
    width: 100%;
    display: flex;
}

.sleepInfoSubAlt,
.my-sleep-info-sub-alt {
    width: 100%;
    margin-top: var(--px20);
    display: flex;
}

.sleepInfoItem {
    flex: 0 0 50%;
    height: 100%;
    display: flex;
}

.sleepInfoItemLeft1, 
.sleepInfoItemLeft2, 
.sleepInfoItemLeft3, 
.sleepInfoItemLeft4 {
    margin-top: var(--px6);
    margin-right: var(--px3);
    width: var(--px10);
    height: var(--px10);
    background: #E1E3E8;
    border-radius: var(--px5);
}

.sleepInfoItemLeft2 {
    margin-left: var(--px20);
    background: #D9D4FF;
}

.sleepInfoItemLeft3 {
    background: #5D4AFB;
}

.sleepInfoItemLeft4 {
    margin-left: var(--px20);
    background: #9185F6;
}

.sleepInfoItemRight {
    width: 33.33vw;
    height: 100%;
}

.sleepInfoItemPercent, .sleepInfoItemTime {
    width: 100%;
    height: var(--px24);
    display: flex;
    align-items: center;
    font-size: .6rem;
    color:rgba(0, 0, 0, .6);
}

.sleepInfoItemTime {
    margin-top: 1.39vw;
    font-size: .625rem;
}

.sleepInfoItemPercentValue {
    margin: 0 1.67vw;
    font-size: .875rem;
    color: black;
}

.sleepInfoItemTimeValue {
    margin: 0 1.67vw;
    font-size: 1rem;
    color: #5D4AFB;
}

#positionChart {
    height: 21.11vw;
    margin: var(--px20) auto 3.61vw;
}

.my-hr-info {
    width: 100%;
    /* height: 52.71vw; */
    box-sizing: border-box;
    padding: var(--px6);
}

.my-hr-info-sub {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-info-seperate {
    height: var(--divider-height);
    border-left: var(--divider-border-2);
}

.my-rr-info {
    width: 100%;
    /* height: 35.07vw; */
    box-sizing: border-box;
    padding: var(--px8) var(--px8) var(--px8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}