* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,body {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    width:0;
    height:0;
}

ul,li {
    list-style: none;
}

:root { 
  --unit: 1;
  --px-divider-2: .07vw;
  --px-divider: .14vw;
  --px1: calc(var(--unit) * 0.28vw);
  --px2: calc(var(--unit) * 0.56vw);
  --px3: calc(var(--unit) * 0.9vw);
  --px4: calc(var(--unit) * 1.11vw);
  --px5: calc(var(--unit) * 1.39vw);
  --px6: calc(var(--unit) * 1.67vw);
  --px8: calc(var(--unit) * 2.22vw);
  --px-8: calc(var(--unit) * -2.22vw);
  --px9: calc(var(--unit) * 2.5vw);
  --px10: calc(var(--unit) * 2.78vw);
  --px12: calc(var(--unit) * 3.33vw);
  --px14: calc(var(--unit) * 3.89vw);
  --px16: calc(var(--unit) * 4.44vw);
  --px18: calc(var(--unit) * 5vw);
  --px20: calc(var(--unit) * 5.56vw);
  --px24: calc(var(--unit) * 6.67vw);
  --px28: calc(var(--unit) * 7.78vw);
  --px32: calc(var(--unit) * 8.89vw);
  --px34: calc(var(--unit) * 9.44vw);
  --px35: calc(var(--unit) * 9.72vw);
  --px36: calc(var(--unit) * 10vw);
  --px-36: calc(var(--unit) * -10vw);
  --px38: calc(var(--unit) * 10.56vw);
  --px40: calc(var(--unit) * 11.11vw);
  --px44: calc(var(--unit) * 12.22vw);
  --px48: calc(var(--unit) * 13.33vw);
  --px50: calc(var(--unit) * 13.89vw);
  --px52: calc(var(--unit) * 14.44vw);
  --px56: calc(var(--unit) * 15.56vw);
  --px60: calc(var(--unit) * 16.67vw);
  --px64: calc(var(--unit) * 17.78vw);
  --px68: calc(var(--unit) * 18.89vw);
  --px-68: calc(var(--unit) * -18.89vw);
  --px70: calc(var(--unit) * 19.44vw);
  --px72: calc(var(--unit) * 20vw);
  --px80: calc(var(--unit) * 22.22vw);
  --px88: calc(var(--unit) * 24.44vw);
  --px-88: calc(var(--unit) * -24.44vw);
  --px96: calc(var(--unit) * 26.67vw);
  --px108: calc(var(--unit) * 30vw);
  --px160: calc(var(--unit) * 44.44vw);
  --px252: calc(var(--unit) * 70vw);
  --px288: calc(var(--unit) * 80vw);
  --px300: calc(var(--unit) * 83.33vw);

  
  --text: #000; 
  --text-reverse: #fff;
  --color-1: rgba(0, 0, 0, 0.9);
  --color-2: rgba(0, 0, 0, .6);
  --color-3: rgba(0, 0, 0, .38);
  /* 功能按钮卡片高度 */
  --button-card-height: calc(var(--unit) * var(--px64));

  /* 高亮色 */
  --high-light: #0A59F7;
  /* 多彩色 */
  --green-1: #64BB5C;
  --green-2: #A5D61D;
  --organge-1: #F7CE00; /* 灯光类 ｜ 深浅通用 */
  --organge-2: #F9A01E; /* 制热/提示性 ｜ 深浅通用 */
  --organge-3: #ED6F21; /* 警示色 */
  --red-1: #E84026; /* 警告色 */
  --pink-1: #E55392;
  --purple-1: #A12DF7;
  --blue-1: #4B48F1;
  --blue-2: #46B1E3; /* 制冷/无倾向 ｜ 深浅通用 */
  --blue-3: #61CFBE; /* 有益/正向 ｜ 深浅通用 */
  --pink-2: #E64566; /* 娱乐/美妆 ｜ 深浅通用  */
  /* 未启用态 */
  --mask: rgba(255,255,255,.2); /* 深浅通用 */
  --unabled: rgba(0,0,0,.4); /* 深浅通用 */
  /* 一级文本 */
  --text-color-1: rgba(0, 0, 0, .9);
  /* 二级文本 */
  --text-color-2: rgba(0, 0, 0, .6);
  /* 三级文本 */
  --text-color-3: rgba(0, 0, 0, .4);
  /* 分割线 */
  --divider-color: rgba(0,0,0,.2);
  --divider-border: solid var(--px-divider) rgba(0,0,0,.2);
  --divider-border-2: solid var(--px-divider-2) rgba(0,0,0,.2);
  --divider-width: var(--px-divider);
  --divider-height: var(--px24);

  --seperate-1: rgba(0,0,0,.05);
  --seperate-2: rgba(0,0,0,.1);
  --seperate-3: rgba(0,0,0,.2);
  --blue: #007DFF;
  --blue-1: #0A59F7;
  --blue-btn: #317AF7;
  --orange: #ED6F21;
  --background-grey: rgba(0,0,0,.05);
  --background-orange: #FDEADE;
  /* 弹出框背景 */
  --background: #fff; 
  /* 背景色 */
  --background-1: #F1F3F5;

  --background-dialog: #fff;
  --background-mask: rgba(0,0,0,.2);  
  --background-tip: #4D4D4D;
  --progress-start: #254FF7;
  --progress-end: #86C1FF;
  --progress-grey: rgba(0,0,0,.03);
} 



:root .dark { 
    --text: #fff;
    --color-1: rgba(255, 255, 255, .86);
    --color-2: rgba(255, 255, 255, .6);
    --color-3: rgba(255, 255, 255, .38);

    /* 高亮色 */
    --high-light: #5291FF;
    /* 多彩色 */
    --green-1: #64BB5C;
    --green-2: #A5D61D;
    --organge-3: #ED6F21; /* 警示色 */
    --red-1: #E84026; /* 警告色 */
    --pink-1: #E55392;
    --purple-1: #A12DF7;
    --blue-1: #4B48F1;
    /* 文本色 */
    --text-color-1: rgba(255, 255, 255, .9);
    --text-color-2: rgba(255, 255, 255, .6);
    --text-color-3: rgba(255, 255, 255, .4);

    /* 分割线 */
    --divider-color: rgba(255,255,255,.2);
    --divider-border: solid var(--px-divider) rgba(255,255,255,.2);
    --divider-border-2: solid var(--px-divider-2) rgba(255,255,255,.2);

    --seperate-1: rgba(255,255,255,.05);
    --seperate-2: rgba(255,255,255,.1);
    --seperate-3: rgba(255,255,255,.2);
    --blue: #3F97E9; 
    --blue-1: #5291FF;
    --orange: #DB6B42;
    --background-grey: rgba(255,255,255,.05);
    --background-orange: #2C150D;

    --mask: rgba(0,0,0,.2);
    --background: #303030;
    /* 背景色 */
    --background-1: rgba(0,0,0,1);

    --background-dialog: #363636;
    --background-black: #000;
    --background-mask: rgba(0,0,0,.4);
    --progress-start: #3B61F7;
    --progress-end: #72A4D9;
    --progress-grey: rgba(255,255,255,.1);
} 

.my-grid {
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--px12);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: var(--px80) auto;
    column-gap: var(--px12);
}

.my-grid-head {
    grid-column: 1 / span 8;
    grid-row: 1 / 2;
    place-self: stretch stretch;
}

.my-grid-body,
.my-grid-modal,
.my-grid-dialog {
    grid-column: 1 / span 8;
    grid-row: 2 / 3;
    place-self: stretch stretch;
}

.sleepChart {
    margin: 0 auto;
    width: 88vw;
    height: 30vw;
} 

.hi-progress {
  position: relative;
  margin: 0 auto 0;
  width: 77.78vw;
  height: 77.78vw;
}

.instImg {
    width: calc(96vw - var(--px24));
    height: calc((96vw - var(--px24)) * 0.77);
    margin: var(--px16) auto 0;
}

@media only screen and (min-width: 320px) {
    html { font-size:14.22px;}
}

@media only screen and (min-width: 360px) {
    html { font-size:16px;}
}

@media only screen and (min-width: 375px) {
    html {font-size:16.67px;}
}

@media only screen and (min-width: 400px) {
    html {font-size:17.78px;}
}

@media only screen and (min-width: 414px) {
    html {font-size:18.4px;}
}

@media only screen and (min-width: 480px) {
    html {font-size:21.33px;}
}

@media only screen and (min-width: 540px) {
    html {font-size:16px;}
    :root { 
        --px-divider-2: .035vw;
        --px-divider: .07vw;
        --px1: 0.14vw;
        --px2: 0.28vw;
        --px3: 0.45vw;
        --px4: 0.56vw;
        --px5: 0.7vw;
        --px6: 0.88vw;
        --px8: 1.11vw;
        --px-8: -1.11vw;
        --px9: 1.25vw;
        --px10: 1.39vw;
        --px12: 1.67vw;
        --px14: 1.94vw;
        --px16: 2.22vw;
        --px18: 2.5vw;
        --px20: 2.78vw;
        --px24: 3.33vw;
        --px28: 3.89vw;
        --px32: 4.44vw;
        --px34: 4.72vw;
        --px35: 4.86vw;
        --px36: 5vw;
        --px-36: -5vw;
        --px38: 5.28vw;
        --px40: 5.56vw;
        --px44: 6.11vw;
        --px48: 6.67vw;
        --px50: 6.95vw;
        --px52: 7.22vw;
        --px56: 7.78vw;
        --px60: 8.33vw;
        --px64: 8.89vw;
        --px68: 9.44vw;
        --px-68: -9.44vw;
        --px70: 9.72vw;
        --px72: 10vw;
        --px80: 11.11vw;
        --px88: 12.22vw;
        --px-88: -12.22vw;
        --px96: 13.33vw;
        --px108: 15vw;
        --px160: 22.22vw;
        --px252: 35vw;
        --px288: 40vw;
        --px300: 46.67vw;
    }
    .my-grid-modal {
        grid-column: 2 / span 6;
        grid-row: 2 / 3;
        place-self: stretch stretch;
    }
    .my-grid-dialog {
        grid-column: 3 / span 4;
        grid-row: 2 / 3;
        place-self: stretch stretch;
    }
    .sleepChart {
        margin: 0 auto;
        width: 68vw;
        height: 20vw;
    } 
    .hi-progress {
      position: relative;
      margin: 0 auto 0;
      width: 58.33vw;
      height: 58.33vw;
    }

    .instImg {
        width: calc(70vw - var(--px24));
        height: calc((70vw - var(--px24)) * 0.77);
        margin: var(--px16) auto 0;
    }
}

@media only screen and (min-width: 640px) {
    html { font-size:28.44px; }
}

@media only screen and (min-width: 720px) {
    html { font-size:32px;}
}

@media only screen and (min-width: 750px) {
    html { font-size:33.34px; }
}

@media only screen and (min-width: 800px) {
    html { font-size:35.56px; }
}

@media only screen and (min-width: 828px) {
    html { font-size:36.8px; }
}

@media only screen and (min-width: 960px) {
    html { font-size:42.66px; }
}

@media only screen and (min-width: 1080px) {
    html { font-size:48px; }
}

@media (min-width: 1200px) {
    html { font-size:53.33px; }
}


@media (max-width: 1600px) and (orientation: landscape) {
    html { font-size: 13.82px; }
    :root { 
        --px-divider-2: .03vw;
        --px-divider: .06vw;
        --px1: 0.12vw;
        --px2: 0.24vw;
        --px3: 0.36vw;
        --px4: 0.48vw;
        --px5: 0.6vw;
        --px6: 0.72vw;
        --px8: 0.96vw;
        --px-8: -0.96vw;
        --px9: 1.08vw;
        --px10: 1.2vw;
        --px12: 1.44vw;
        --px14: 1.68vw;
        --px16: 1.92vw;
        --px18: 2.16vw;
        --px20: 2.4vw;
        --px24: 2.88vw;
        --px28: 3.36vw;
        --px32: 3.84vw;
        --px34: 4.08vw;
        --px35: 4.2vw;
        --px36: 4.32vw;
        --px-36: -4.32vw;
        --px38: 4.56vw;
        --px40: 4.8vw;
        --px44: 5.28vw;
        --px48: 5.76vw;
        --px50: 6vw;
        --px52: 6.24vw;
        --px56: 6.72vw;
        --px60: 7.2vw;
        --px64: 7.68vw;
        --px68: 8.16vw;
        --px-68: -8.16vw;
        --px70: 8.4vw;
        --px72: 8.64vw;
        --px80: 9.6vw;
        --px88: 10.56vw;
        --px-88: -10.56vw;
        --px108: 12.96vw;
        --px160: 19.2vw;
        --px252: 30.24vw;
        --px288: 34.56vw;
        --px300: 36vw;
    }
    .my-grid-modal {
        grid-column: 2 / span 6;
        grid-row: 2 / 3;
        place-self: stretch stretch;
    }
    .my-grid-dialog {
        grid-column: 3 / span 4;
        grid-row: 2 / 3;
        place-self: stretch stretch;
    }
    .sleepChart {
        margin: 0 auto;
        width: 68vw;
        height: 20vw;
    } 
    .hi-progress {
      position: relative;
      margin: 0 auto 0;
      width: 58.33vw;
      height: 58.33vw;
    }

    .instImg {
        width: calc(70vw - var(--px24));
        height: calc((70vw - var(--px24)) * 0.77);
        margin: var(--px16) auto 0;
    }
}