:root {
    --simplekids-color: #417fd0;
}

html {
    font-size: 20px;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    color: #333;
    background-color: #666;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
}

.page {
    margin: auto;
}
.page-container {
    overflow-y: scroll;
}

@media screen and (max-width:3200px) {
    body {
        font-size: 0.7em;
    }
    .page {
        width: 500px;
        height: calc(100% - 4em);
        transform: translateY(2em);
    }
    .page-container {
        padding: 1em 3em;
        width: calc(100% - 6em);
        height: calc(100% - 2em);
    }
}

@media screen and (max-width:500px) {
    body {
        font-size: 0.8em;
    }
    .page {
        width: 100%;
        height: 100%;
        transform: none;
    }
    .page-container {
        padding: 1em 1.5em;
        width: calc(100% - 3em);
        height: 100%;
    }
}



html, button, input, option, select, textarea {
    font-family: Microsoft Yahei UI, 微软雅黑, Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, kbd, pre {
    font-family: PT Mono, consolas, Courier New, monospace, Microsoft Yahei UI, 微软雅黑;
}

a, a:visited {
    color: inherit;
    text-decoration: none;
}

p, li {
    margin: 1em 0;
    line-height: 2em;
}

input[type=button], button, .button, .text-button {
    display: inline-block;
    cursor: pointer;
    color: var(--simplekids-color);
    /* font-size: 0.875em; */
    text-align: center;
    line-height: 2em;
    height: 2em;
    min-width: 8em;
    border: solid 0.05em var(--simplekids-color);
    border-radius: 3000em;
    background-color: hsla(0, 0%, 100%, .79);
    box-sizing: border-box;
    box-shadow: 0 .1em .15em rgba(0, 0, 0, 0.15);
}

.button:hover, button:hover {
    background-color: #eff;
}

.text-button {
    border: 0;
    box-shadow: none;
    margin: 0 1em;
}

@-moz-keyframes fade-in {
    0% { opacity: 0 }
    to { opacity: 1 }
}
@-webkit-keyframes fade-in {
    0% { opacity: 0 }
    to { opacity: 1 }
}
@keyframes fade-in {
    0% { opacity: 0 }
    to { opacity: 1 }
}

@-moz-keyframes fade-out {
    0% { opacity: 1 }
    to { opacity: 0 }
}
@-webkit-keyframes fade-out {
    0% { opacity: 1 }
    to { opacity: 0 }
}
@keyframes fade-out {
    0% { opacity: 1 }
    to { opacity: 0 }
}



.page-header {
    /* background-color: rgba(63, 143, 228, 0.19); */
    height: 4em;
}    

.page-footer {
    margin-top: 8em;
    margin-bottom: 4em;
}    

.page-header .brand,
.page-header .portal {
    color: #fff;
    text-shadow: 0 0 .15em rgba(0, 0, 0, 0.79);
}

.page-header .brand {
    margin-left: 1em;
    flex: 1;
}

.page-footer .copyright {
    color: #999;
    line-height: 3em;
}

.page-header .logo {
    /* background-image: url(https://qiniu.simplekids.cn/images/logo/simplekids-logo-128.png); */
    background-size: cover;
    border-radius: 50%;
    border: solid 1px #fff;
    width: 2em;
    height: 2em;
}

.page-footer .logo {
    /* background-image: url(https://qiniu.simplekids.cn/images/logo/simplekids-logo-128.png); */
    background-size: cover;
    border-radius: 50%;
    width: 3em;
    height: 3em;
    filter: grayscale();
    opacity: 0.3;
}

.page-footer .qrcode {
    /* background-image: url(https://qiniu.simplekids.cn/images/logo/simplekids-qrcode.png); */
    background-size: cover;
    width: 8em;
    height: 8em;
    margin-bottom: 4em;
}



.content-block,
.content-list,
.action-list {
    margin: 1em 0 2em 0;
    padding: 1em;
    color: var(--simplekids-color);
    background-color: #fff;
    border-radius: 0.5em;
    box-shadow: 0 2px .25em rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
.content-block .content-head {
    font-size: 1.125em;
    font-weight: 400;
    padding: 0.5em 0;
}
.content-block .content-body {
    /* font-size: 0.875em; */
    color: #333;
    margin: 0.5em 0;
    line-height: 1.5em;
}
.content-block .content-foot {
    margin: 0.5em 0;
}



.content-list .content-head {
    font-size: 1.125em;
    font-weight: 400;
    padding: 0.5em 0;
    color: #333;   
}
.content-list .content-item {
    /* margin: 0.5em 0 1em 1em; */
    margin: 0.5em 0;
}


.content-item .content-text {
    /* font-size: 0.875em; */
    color: #333;
    margin-left: 0.5em;
}
.content-item .content-text a,
.content-item .content-text a:visited {
    color: #333;
}
.content-item .content-text a:active,
.content-item .content-text a:hover {
    color: var(--simplekids-color);
    text-decoration: none;
}

.content-chart {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.content-cover {
    width: 3em;
    height: 3em;
    /* margin: 0 1em; */
    overflow: hidden;
    border-radius: 0.4em;
}
.cover-image {
    width: 100%;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.content-poster {
    width: 100%;
    overflow: hidden;
}
.poster-image {
    width: 100%;
    height: auto;
}
.content-rating {
    width: 12em;
    height: 12em;
    margin: 1em auto;
    overflow: hidden;
    border-radius: 0.4em;
}
.rating-image {
    width: 100%;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}



.action-item {
    margin: 1em;
}
.action-cover {
    width: 24px;
    height: 24px;
    overflow: hidden;
}
.action-image {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.action-text {
    color: #333;
    margin-top: 0.5em;
    text-align: center;
}



.popup-text {
    position: fixed;
    top: 60px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    display: none;
    color: #fff;
    font-size: 18px;
    text-align: center;
}
.popup-overlay {
    display: none;
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
}


.case-title { color: #fff; font-size: 1.25em; font-weight: 400; letter-spacing: 0.1em; margin: 2em 0 1em 0; }
.case-memo  { color: #fff; margin-bottom: 1em; }
.case-info { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0.5em 0 0.5em 2em; }
.case-info .label { color: #999; min-width: 8em; white-space: nowrap; }
.case-info .value { color: #000; }

.question-text { color: #333; padding-top: 1em; }
.question-answer { display: flex; }
.option-bar  { display: flex; align-items: center; }
.option-text { color: #393; margin: 2px; }
.option-item { background-color: #eee; width: 20px; height: 20px; margin: 2px; }
.option-item-selected { background-color: #ada; width: 20px; height: 20px; margin: 2px; }

.scale-score {
    color: #fff;
    text-align: center;
    background-color: var(--simplekids-color);
    width: 6em;
    padding: 0 0.5em;
}

.scale-score .label {
   padding: 0 0.25em;
   line-height: 1.5em;
}

.scale-score .value {
    font-size: 1.25em;
    font-weight: 500;
    padding: 0 0.25em;
    line-height: 1.5em;
}

.scale-stacks {
    padding: .25em 0;
    width: calc(100% - 1em);
}
.scale-stacks .stack {
    padding: 0 0.5em;
    margin: 0.5em 0;
    height: 2em;
    line-height: 2em;
    border: solid 1px #ddd;
    color: #999;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, .032);
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .075) 1%, transparent 99%);
}
.scale-stacks .highlight {
    font-weight: 500;
    color: #fff;
    background-color: rgba(65, 127, 208, .85);
}