body {
    background-color: #F5F5F5;
}

.warn-login {
    border: 1px solid #D6D6D6;
    background-color: #FFF;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
}

.introduction-block {
    background-color: #fff;
    padding: 20px 12px;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.introduction-title {
    margin: 0px 0px 0px 12px;
    padding-left: 10px;
    font-weight: 700;
    font-size: 24px;
    line-height: 34.29px;
    letter-spacing: 0em;
    color: #1E96C8;
    border-left: 12px solid #1E96C8;
}

.introduction-content {
    margin-top: 8px;
    padding: 8px 20px 8px 35px;
    border-radius: 12px;
    background-color: #F3FCFF;
}

.introduction-text {
    margin: 0px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0em;
    color: #333333;
}

    .introduction-text.highlight {
        color: #00B4FF;
    }

.guide-block {
    background-color: #1E96C8;
    padding: 20px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.guide-title {
    margin: 0px 0px 0px 12px;
    padding-left: 10px;
    font-weight: 700;
    font-size: 24px;
    line-height: 34.29px;
    letter-spacing: 0em;
    color: #fff;
    border-left: 12px solid #FFFFFF;
}

.guide-content {
    margin-top: 8px;
}

.guide-text {
    margin: 0px;
    font-size: 18px;
    line-height: 22.86px;
    letter-spacing: 0em;
    color: #fff;
}

.assessment-block {
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.titlebox {
    text-align: center;
    margin: 0px 0px 10px 0px;
}

.titletext {
    font-weight: 700;
    font-size: 24px;
    line-height: 34.29px;
    letter-spacing: 0em;
    color: #262626;
}

/*八大領域圈圈*/
.eightArea {
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    position: relative;
    width: 370px;
}

@media (min-width: 145px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.35);
        height: 220px;
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(-7em, -4em) !important;
    }
}

@media (min-width: 285px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.4);
        height: 260px;
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(-5em, -4em) !important;
    }
}

@media (min-width: 325px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.4);
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(-3em, -4em) !important;
    }
}

@media (min-width: 380px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.5);
        height: 300px;
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(-2em,-4em) !important;
    }
}

@media (min-width: 410px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.55);
        height: 350px;
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(0em, -1em) !important;
    }
}

@media (min-width: 500px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.6);
        height: 350px;
        margin: 0% auto !important;
    }

    .eightArea {
        transform: translate(0em, -1em) !important;
    }
}

@media (min-width: 590px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.65);
        height: 400px;
        margin: -5% 0% 0% -15% !important;
    }

    .eightArea {
        transform: translate(5em, 2em) !important;
    }
}

@media (min-width: 650px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.7);
        height: 450px;
        margin: -5% 0% 0% -10% !important;
    }

    .eightArea {
        transform: translate(4em, 4em) !important;
    }
}

@media (min-width: 725px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.7);
        height: 450px;
        margin: -5% 0% 0% -10% !important;
    }

    .eightArea {
        transform: translate(4em, 4em) !important;
    }
}

@media (min-width: 760px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.75);
        height: 470px;
        margin: -5% 0% 0% -10% !important;
    }

    .eightArea {
        transform: translate(4em, 4em) !important;
    }
}

@media (min-width: 1000px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.8);
        height: 500px;
    }

    .eightArea {
        transform: translate(4.5em, 6em) !important;
    }
}

@media (min-width: 1200px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(0.8);
        height: 430px;
        margin: 0px 0px 5% 0px !important;
    }

    .eightArea {
        transform: translate(0em, 5em) !important;
    }
}

@media (min-width: 1400px) {
    /*八大領域圈圈*/
    .shrinkarea {
        transform: scale(1);
        height: 500px;
        margin: 5% 0px 5% 0px !important;
    }

    .eightArea {
        transform: translate(0.5em, 5em) !important;
    }
}

.iconHeight {
    height: 40px;
}

.btn3d {
    position: relative;
    border: 0;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
    -moz-outline-style: none;
    outline: medium none;
}

.btn3d.btn-white {
    color: #666666;
    background-color: #fff;
}

.btn3d.btn-white:active, .btn3d.btn-white.active {
    color: #666666;
    background-color: #fff;
}

.material-button.btn3d {
    position: relative;
    top: 0;
    z-index: 1;
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 25em;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
    outline: none;
}

/*第二圈(領域)屬性*/
#assessment_progress {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.15em;
    text-align: center;
}

#finished_count, #total_count {
    font-size: 36px;
    color: #1E96C8;
}

#progress_title {
    font-size: 14px;
    line-height: 29px;
    letter-spacing: 0em;
    text-indent: -4px;
    text-align: center;
    color: #3B3B3B;
}

.scale-on .option2 {
    -webkit-transform: translate(0px, -90px);
    transform: translate(0px, -90px);
}

.scale-on .option4 {
    -webkit-transform: translate(-90px, 0px);
    transform: translate(-90px, 0px);
}

.scale-on .option5 {
    -webkit-transform: translate(90px, 0px);
    transform: translate(90px, 0px);
}

.scale-on .option7 {
    -webkit-transform: translate(0px, 90px);
    transform: translate(0px, 90px);
}

.scale-on .btn-sum {
    -webkit-transform: translate(-5px, 0px);
    transform: translate(-5px, 0px);
    cursor: default;
}

.btn-sum.assessment-finish {
    border: 8px solid;
    border-image-source: linear-gradient(0deg, #FAFAFA, #FAFAFA), linear-gradient(0deg, #3BCB17, #3BCB17);
}

.btn3d.btn-option1 {
    background-color: #DFF0E6;
}

.btn3d.btn-option1:active, .btn3d.btn-option1.active {
    background-color: #DFF0E6;
}

.btn3d.btn-option2 {
    background-color: #6CD1D9;
}

.btn3d.btn-option2:active, .btn3d.btn-option2.active {
    background-color: #6CD1D9;
}

.btn3d.btn-option3 {
    background-color: #0AA8B4;
}

.btn3d.btn-option3:active, .btn3d.btn-option3.active {
    background-color: #0AA8B4;
}

.btn3d.btn-option4 {
    background-color: #FEC14E;
}

.btn3d.btn-option4:active, .btn3d.btn-option4.active {
    background-color: #FEC14E;
}

.btn3d.btn-option5 {
    background-color: #0ACAA6;
}

.btn3d.btn-option5:active, .btn3d.btn-option5.active {
    background-color: #0ACAA6;
}

.btn3d.btn-option6 {
    background-color: #FEEED5;
}

.btn3d.btn-option6:active, .btn3d.btn-option6.active {
    background-color: #FEEED5;
}

.btn3d.btn-option7 {
    background-color: #FFAA96;
}

.btn3d.btn-option7:active, .btn3d.btn-option7.active {
    background-color: #FFAA96;
}

.btn3d.btn-option8 {
    background-color: #E76D27;
}

.btn3d.btn-option8:active, .btn3d.btn-option8.active {
    background-color: #E76D27;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.material-button.btn3d.assessment-finish {
    border: 8px solid #3BCB17;
}

.glyphicon.glyphicon-ok-circle {
    font-size: 24px;
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(10px, -5px);
    background-color: #3BCB17;
    color: #fff;
    border: 5px solid #3BCB17;
    border-radius: 50px;
    z-index: 10;
}

.note {
    font-size: 12px;
    line-height: 22.86px;
    letter-spacing: 0em;
    text-align: center;
    color: #333333;
}

.flow-chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 12px 0px;
}

.btn-flow, .btn-flow:hover, .btn-flow:focus, .btn-flow.focus {
    margin: 5px;
    padding: 0px 12px;
    border-radius: 20px;
    background-color: #3BCB17;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0em;
    color: #ffffff;
}

.btn-flow.denied, .btn-flow.denied:hover, .btn-flow.denied:focus, .btn-flow.denied.focus {
    cursor: default;
    background-color: #B8B8B8;
}

.fa.fa-arrow-right {
    margin: 0px 5px;
}

.goNext {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#unfinished_state {
    font-weight: 290;
    font-size: 15px;
    line-height: 34.29px;
    letter-spacing: 0em;
    margin-bottom: 4px;
    text-align: center;
}

#unfinished_count {
    color: #1E96C8;
}

.btn-next, .btn-next:hover, .btn-next:focus, .btn-next.focus {
    cursor: pointer;
    width: 120px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: #3BCB17;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 24px;
    line-height: 34.29px;
    letter-spacing: 0em;
}

.btn-next.denied, .btn-next.denied:hover, .btn-next.denied:focus, .btn-next.denied.focus {
    cursor: not-allowed;
    background-color: #B8B8B8;
}

.assessment-modal-header {
    padding: 10px 40px;
}

.modalTitleIcon {
    height: 20px;
    margin-right: 5px;
}

.assessmentModalLabel {
    margin-top: 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0em;
    color: #4B4B4B;
    display: flex;
    align-items: center;
}

.modal-header1 {
    background-color: #DFF0E6;
    border-radius: 6px 6px 0px 0px;
}

.modal-header2 {
    background-color: #6CD1D9;
    border-radius: 6px 6px 0px 0px;
}

.modal-header3 {
    background-color: #0AA8B4;
    border-radius: 6px 6px 0px 0px;
}

.modal-header4 {
    background-color: #FEC14E;
    border-radius: 6px 6px 0px 0px;
}

.modal-header5 {
    background-color: #0ACAA6;
    border-radius: 6px 6px 0px 0px;
}

.modal-header6 {
    background-color: #FEEED5;
    border-radius: 6px 6px 0px 0px;
}

.modal-header7 {
    background-color: #FFAA96;
    border-radius: 6px 6px 0px 0px;
}

.modal-header8 {
    background-color: #E76D27;
    border-radius: 6px 6px 0px 0px;
}

.assessment-modal-body {
    padding: 20px 40px;
}

.instruction {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0em;
    color: #000;
    margin-bottom: 15px;
}

.input-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-label {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0em;
}

.domain-performance {
    border-radius: 12px;
    width: fit-content;
    padding: 4px 24px;
    margin-top: 8px;
}

.domain-performance.no-value {
    background-color: #969696;
    border: 1px solid #969696;
}

.domain-performance.good {
    background-color: #ECFDF5;
    border: 1px solid #10B981;
}

.domain-performance.fine {
    background-color: #FFF7E9;
    border: 1px solid #F59E0B;
}

.domain-performance.poor {
    background-color: #FFEDE4;
    border: 1px solid #EA580C;
}

.domain-score {
    border-radius: 20px;
    padding: 0px 8px;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0em;
}

.no-value .domain-score {
    background-color: #DFDFDF;
    color: #4B4B4B;
}

.good .domain-score {
    background-color: #10B981;
    color: #FFFFFF;
}

.fine .domain-score {
    background-color: #F59E0B;
    color: #FFFFFF;
}

.poor .domain-score {
    background-color: #EA580C;
    color: #FFFFFF;
}

.score_meaning {
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0em;
    display: inline-block;
}

.no-value .score_meaning {
    color: #4B4B4B;
}

.good .score_meaning {
    color: #10B981;
}

.fine .score_meaning {
    color: #F59E0B;
}

.poor .score_meaning {
    color: #EA580C;
}

.score {
    -webkit-appearance: none;
    outline: none; /* 避免點選會有藍線或虛線 */
    background-color: #E4E4E4;
    border-radius: 20px;
    max-width: none;
    height: 10px;
    margin-top: 20px;
}

.score::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    background-color: #238CD8;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 50%;
    cursor: grab;
}

.score::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.score::-moz-range-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    background-color: #238CD8;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 50%;
    cursor: grab;
}

.score::-moz-range-thumb:active {
    cursor: grabbing;
}

.score::-moz-focus-outer {
    border: none; /* 去除 focus 時候的外框虛線 */
}

.score.no-value::-webkit-slider-thumb {
    background-color: #BBBBBB;
}

.markerList {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin-top: 20px;
    padding: 0px 15px;
}

.assessment-modal-footer {
    text-align: center;
    padding: 10px 30px;
    background-color: #EFEFEF;
    border-radius: 0px 0px 6px 6px;
}

.btn-update {
    padding: 8px 40px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0em;
    color: #4B4B4B;
}

.btn-update.update-denied {
    background-color: #959595;
    color: #4B4B4B;
    cursor: not-allowed;
}

.btn-update1 {
    background-color: #DFF0E6;
}

.btn-update2 {
    background-color: #6CD1D9;
}

.btn-update3 {
    background-color: #0AA8B4;
}

.btn-update4 {
    background-color: #FEC14E;
}

.btn-update5 {
    background-color: #0ACAA6;
}

.btn-update6 {
    background-color: #FEEED5;
}

.btn-update7 {
    background-color: #FFAA96;
}

.btn-update8 {
    background-color: #E76D27;
}

@media (min-width: 768px) {
    .titlebox {
        margin: 0px 0px 15px 0px;
    }

    .titletext {
        font-size: 28px;
    }

    #progress_title {
        font-size: 20px;
    }

    .instruction {
        line-height: 22px;
    }

    .domain-performance {
        margin-top: 0px;
        margin-left: 8px;
    }

    .btn-flow, .btn-flow:hover, .btn-flow:focus, .btn-flow.focus {
        line-height: 34.29px;
    }

    .flow-chart {
        margin: 18px 0px;
    }

    .fa.fa-arrow-right {
        margin: 0px 15px;
    }

    .goNext {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }

    #unfinished_state {
        margin-right: 16px;
        margin-bottom: 0px;
    }

    .btn-next, .btn-next:hover, .btn-next:focus, .btn-next.focus {
        min-width: 130px;
        font-size: 22px;
        line-height: 34.29px;
    }

    .modalTitleIcon {
        height: 40px;
    }

    .assessmentModalLabel {
        font-size: 26px;
        margin-top: 0px;
    }

    .input-header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .titlebox {
        margin: 0px 0px 20px 0px;
    }

    .titletext {
        font-size: 32px;
    }

    .flow-chart {
        margin: 24px 0px;
    }

    .fa.fa-arrow-right {
        margin: 0px 20px;
    }

    .goNext {
        margin-bottom: 24px;
    }

    .btn-next, .btn-next:hover, .btn-next:focus, .btn-next.focus {
        min-width: 192px;
        font-size: 24px;
    }

    .assessment-modal-header {
        padding: 20px 40px;
    }

    .modalTitleIcon {
        height: 50px;
    }

    .assessmentModalLabel {
        font-size: 32px;
    }

    .assessment-modal-body {
        padding: 34px 60px;
    }

    .instruction {
        line-height: 26px;
    }

    .input-header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .input-label {
        font-size: 24px;
    }

    .score {
        height: 15px;
    }

    .assessment-modal-footer {
        padding: 20px 30px;
    }

    .btn-update {
        padding: 20px 100px;
        font-size: 24px;
        line-height: 26px;
        letter-spacing: 0em;
    }
}