/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap);*/

:root {
    --main_blue: #179BAC; /*主色*/
    --middle_blue: #b6dce2; /*灰主色*/
    --light_blue: #ECF5F7; /*淺主色*/
    --main_orange: #FB8D25;
    --main_green: #68B83A;
    --size_12: 0.75rem;
    --size_13: 0.8125rem;
    --size_14: 0.875rem;
    --size_15: 0.9375rem;
    --size_16: 1rem;
    --size_17: 1.0625rem;
    --size_18: 1.125rem;
    --size_19: 1.1875rem;
    --size_20: 1.25rem;
    --size_21: 1.3125rem;
    --size_22: 1.375rem;
    --size_23: 1.4375em;
    --size_24: 1.5rem;
    --size_25: 1.5625rem;
}

/*--基本頁面設定--*/
body {
    font-family: 'noto Sans TC',微軟正黑體, Arial, Helvetica, sans-serif;
    color: #1F293C;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-weight: 300;
}

a,
a:hover,
a:focus,
a:active {
    transition: all 350ms;
}

/*------btn-------*/

.btn {
    border-radius: 0;
    font-size: var(--size_15);
    padding: 0.55rem 2rem;
    transition: all 350ms;
}

.btn-sm {
    font-size: var(--size_14);
    padding: 0.35rem 1rem;
}

.btn:hover {
    opacity: 0.7;
}

.btn-info {
    color: #fff;
    background-color: #179BAC;
    border-color: #5B979F;
}

.btn-white {
    color: #797979;
    background-color: #EAEAEA;
    border-color: #E0E0E0;
}

.btn-black {
    color: #fff !important;
    background-color: #797979;
    border-color: #797979;
}

.btn-link {
    color: var(--main_blue);
    font-weight: 300;
}

    .btn-link:hover:hover {
        color: var(--main_blue);
        opacity: 0.7;
        text-decoration: none;
    }

    .btn-link i {
        font-size: var(--size_16);
        width: 22px;
    }

    .btn-link:disabled, .btn-link.disabled {
        color: #97a8b8;
    }

.table > tbody > tr.warning > td {
    border-color: inherit;
}

.btn-group > .btn:not(.dropdown-toggle) {
    font-size: var(--size_13);
}

.badge {
    font-size: var(--size_14);
    font-weight: 400;
    padding: 0.5rem 0.88rem;
}

.badge-main {
    background-color: #ECF5F7;
    color: #4E7A81;
}

.badge-blue {
    background-color: #84C5CF;
    color: #fff;
}

.badge-red {
    color: #BA7474;
    background-color: #F4DCE4;
}

.badge-green {
    color: #479c51;
    background-color: #e3f4dc;
}

#mainTable .badge {
    min-width: 84px;
}

/*-----form-group------*/
.form-group > label[class*="col-"] {
    display: block;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    margin-bottom: 8px;
    font-size: var(--size_15);
    color: #525252;
}

.form-horizontal .control-label {
    text-align: left;
}

.form-group {
    margin-bottom: 0.6rem;
}

    .form-group small {
        font-size: var(--size_13);
        color: #7A989D;
        margin-top: 0.2rem;
        margin-left: 1rem;
    }

@media (min-width: 992px) {
    .form-horizontal .control-label {
        text-align: right;
    }
}

.form-group-button {
    margin-top: 2rem;
    text-align: center;
}

/*view*/
#editView .viewtable h4 {
    margin-left: 22px;
}

.viewtable {
    padding-top: 8px;
}

    .viewtable .form-group {
        border-bottom: 1px dashed #dddddd;
        /*max-width: 800px;*/
        margin: 0 20px 15px 20px;
    }

        .viewtable .form-group > label {
            font-weight: 700;
        }

        .viewtable .form-group > .col-md-10,
        .viewtable .form-group > .col-md-2 {
            padding-top: 4px;
            margin-bottom: 4px;
        }

a.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #dedede !important;
}

figure.media {
    clear: both;
    display: block;
}

.form-horizontal .bg-gray {
    background: #F5F5F5;
    margin-top: 1rem;
    padding: 14px 20px;
}

    .form-horizontal .bg-gray h5 {
        font-size: var(--size_18);
        font-weight: 400;
        color: var(--main_blue);
        margin-bottom: 0.8rem;
        margin-left: 0.2rem;
    }

/*----login----*/
.container-login {
    width: 100%;
    min-width: 1280px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    margin: 0;
}

    .container-login .wrap-bg {
        background-image: url('../../../../Images/bg-login.png');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        color: #fff;
        padding: 10% 7%;
    }

        .container-login .wrap-bg h1 {
            font-size: 47px;
            font-weight: 600;
            display: inline-block;
            border-bottom: 5px solid #239BAB;
            margin-bottom: 0.7rem;
            padding-bottom: 0.9rem;
            letter-spacing: 1px;
        }

        .container-login .wrap-bg h2 {
            font-size: 37px;
            font-family: Arial, Helvetica, sans-serif;
            margin-bottom: 2.5rem;
        }

        .container-login .wrap-bg h6 {
            font-size: var(--size_23);
            font-family: Arial, Helvetica, sans-serif;
            width: 400px;
        }

    .container-login .wrap-login {
        background: #fff;
        padding: 10% 50px;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        min-width: 520px;
    }

    .container-login .login-subject {
        padding: 10px;
        text-align: center;
    }

    .container-login h3 {
        font-size: var(--size_24);
        font-weight: 500;
        max-width: 400px;
        margin: 0 auto 0.7rem auto;
    }

.login-form {
    width: 100%;
    max-width: 400px;
    padding: 33px 0;
    margin: 0 auto;
}

    .login-form .form-control {
        margin-bottom: 1.2rem;
        font-size: 1.3rem;
    }

        .login-form .form-control::placeholder {
            font-size: 1rem;
        }

    .login-form label {
        margin-bottom: 0.3rem;
    }

    .login-form .btn {
        width: 100%;
        font-size: var(--size_20);
        margin-top: 30px;
        background: #179BAC;
        color: #fff;
        border: none;
        border-radius: 30px;
        padding: 12px;
    }

.container-login .text-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #848484;
    text-decoration: none;
}

.container-login #editView .text-danger {
    font-size: 1rem;
}

/*------------mask------------*/
#LoadingMask {
    display: none;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0005;
    transition: opacity .15s linear;
}

.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -30px;
    text-align: center;
    padding: 0;
    color: #fff;
}

/*------------message------------*/

#confirm_box.modal {
    background-color: rgba(0, 0, 0, 0.4);
}

    #confirm_box.modal .modal-dialog {
        width: 300px;
    }

    #confirm_box.modal .modal-content {
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    #confirm_box.modal .modal-body {
        font-size: var(--size_16);
        padding: 1.2rem 1rem;
    }

    #confirm_box.modal .close {
        margin-top: -10px;
    }

    #confirm_box.modal .modal-footer {
        padding: 0.2rem;
    }

/*------------list------------*/
#masterView {
    padding-right: 15px;
    padding-left: 15px;
}

    #masterView td .btn:not(.dropdown-toggle),
    .tableAutoRow .btn-rowbox .btn,
    .fileuploader .columns .column-actions a {
        background: #ECF5F7;
        color: #86C5CE;
        border-color: #ECF5F7;
        border-radius: 50%;
        padding: 0;
        width: 37px;
        height: 37px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: var(--size_18);
        box-shadow: none !important;
        cursor: pointer;
    }


#SurveyBlockArea .tableAutoRow .btn-rowbox .btn {
    width: 20px;
    font-size: var(--size_22);
}

.tableAutoRow + .rowAddbox {
    border-top: 0.5rem solid #f5f5f5;
    border: 1px dashed #86C5CE;
    padding: 6px 0 16px 0;
}

    .tableAutoRow + .rowAddbox .btn-create {
        width: 125px;
        float: none;
        margin: 0 auto;
        padding: 12px 0 0 52px;
    }

.toolbar {
    padding: 12px 0;
    border-bottom: 1px dashed #DDDDDD;
    margin: 0 0 0.7rem 0;
    display: flow-root;
}

    .toolbar > div:not(.input-group) {
        padding: 1px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
    }

    .toolbar.row > div {
        float: left;
    }

    .toolbar .btn-search {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        padding: 0;
        font-size: var(--size_25);
        background: var(--main_blue);
        color: #fff;
    }

.btn-sort {
    box-shadow: none !important;
    display: block;
    position: relative;
    padding: 4px 0 0 25px;
    color: #525252;
    font-size: var(--size_16);
    float: right;
}

    .btn-sort i {
        background: #79b5bd;
        width: 40px;
        height: 40px;
        color: #fff;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.2);
        margin-right: 7px;
    }

.btn-create {
    box-shadow: none !important;
    display: block;
    position: relative;
    padding: 12px 0 0 56px;
    color: #525252;
    font-size: var(--size_16);
    float: right;
}

    .btn-create:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 85px;
        height: 50px;
        display: inline-block;
        background-image: url('../../Images/creat-new.svg');
        background-repeat: no-repeat;
        background-size: 100%;
    }

.btn-upload:before {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url('../../Images/icon-UpAndDownArrows.svg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.btn-online:before {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url('../../Images/icon-online-sample.svg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.page-area {
    display: flex;
    align-items: center;
    position: relative;
    text-align: right;
    font-size: var(--size_14);
    color: #606266;
}

.page-left {
    display: inline-flex;
    padding-top: 1rem;
    min-height: 46px;
}

    .page-left .bootstrap-select {
        width: 70px !important;
    }

    .page-left .btn.dropdown-toggle {
        padding: 3px 10px;
        font-size: var(--size_14);
        height: 30px;
    }

    .page-left .bootstrap-select .dropdown-menu > li > a {
        font-size: var(--size_13);
    }

.page-center {
    display: inline-flex;
    /*margin: 0 auto;*/
}

.page-right {
    display: inline-flex;
    margin-left: auto;
}

.page-info {
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
}

.pagination {
    margin: 0;
    padding-left: 5px;
}

    .pagination > li > a, .pager > li > a, .pagination > li > span, .pager > li > span {
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        border: none;
        border-radius: 50% !important;
        color: #606266;
        line-height: initial;
        box-shadow: none !important;
        margin: 0 3px;
    }

.page-item.active .page-link {
    color: #fff;
    background-color: #84C5CF;
}

.page-right .page-goto {
    padding-left: 15px;
    display: inline-flex;
    align-items: center;
}

    .page-right .page-goto #page-text {
        display: inline-flex;
        width: 50px;
        padding: 5px 10px;
        margin: 0 2px;
        height: auto;
        font-size: var(--size_13);
    }

    .page-right .page-goto #topageBtn {
        margin: 0 2px;
    }


/*.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    line-break: anywhere;
}*/

#mainTable .table th, #mainTable .table td,
.tableAutoRow.table th, .tableAutoRow.table td {
    font-size: var(--size_15);
    padding: 0.65rem 0.8rem;
    vertical-align: middle;
    border-left: none;
    border-right: none;
}

#mainTable .table th, #mainTable .table thead th,
.tableAutoRow.table thead th {
    background: #EAEAEA;
    color: #5B7579;
    font-size: var(--size_17);
    border-bottom: 2px solid #86C5CE;
}

#mainTable .table td, .tableAutoRow.table td {
    background: #fff;
}

#mainTable {
    padding-right: 0px;
    padding-left: 0px;
}

    #mainTable .table {
        margin: 1rem 0;
    }

    #mainTable tr.warning {
        background-color: #fff9e5;
    }

    #mainTable .table + .h5 {
        color: #606266;
        font-weight: 400;
    }

    #mainTable .icon-eye {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
    }

        #mainTable .icon-eye:before {
            content: '';
            background-image: url('../../Images/icon-eye.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            display: block;
            height: 19px;
            width: 23px;
        }

/*------------Edit------------*/
::placeholder {
    color: #a4a4a4 !important;
    font-weight: 300 !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #a4a4a4 !important;
}

::-ms-input-placeholder {
    color: #a4a4a4 !important;
}

.form-control {
    height: 45px;
    font-size: var(--size_15);
    color: #797979;
    border-radius: 2px;
    border: 1px solid #D8D8E4;
    padding: 0.5rem 1rem;
}

    .form-control:focus {
        color: #797979;
        border-color: #80bdff;
        box-shadow: none;
    }

    .form-control.text-number {
        font-weight: 600;
        color: #179BAC;
        font-size: var(--size_18);
    }

.form-control-string { /*custom string*/
    display: block;
    width: 100%;
    height: 45px;
    padding: 0.6rem 1rem;
    background: #f1f1f1;
    line-height: 1.5;
    border: 1px solid #cccccc;
    color: #555555;
}

.gray-block {
    background: #f2f5f6;
    padding-top: 15px;
    margin-top: -15px;
}

.form-control.single-line.w-500 {
    max-width: 500px;
}

.input-group-l {
    max-width: 350px !important;
}

/*date*/
.toolbar .input-daterange, .input-daterange {
    display: inline-flex;
    flex-wrap: nowrap;
}

    .input-daterange .input-group-addon {
        border-left: none;
        border-right: none;
        padding: 7px 12px;
        background: #86C5CE;
        color: #F5F5F5;
        font-size: var(--size_21);
        height: 45px;
    }

.date-icon {
    position: relative;
}

    .date-icon input {
        text-align: left;
        padding-left: 34px;
        position: relative;
    }

    .date-icon:before {
        content: '';
        position: absolute;
        top: 13px;
        left: 10px;
        background-image: url('../../Images/calendar.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        display: inline;
        height: 19px;
        width: 18px;
        z-index: 10;
    }

#editView {
    display: flow-root;
}

    #editView .input-group {
        display: flex;
    }

    /*#editView .input-group .input-group-addon {
            width: 40px;
            display: flex;
            align-items: center;
        }*/

    #editView form h4 {
        margin: 1.8rem 0 1.2rem 0;
        font-size: 1.4rem;
    }

    #editView form > .nav-tabs {
        padding-left: 20%;
        border-color: #c5d0dc;
        margin-bottom: 0;
        margin-left: 0;
        position: relative;
        top: 1px;
        border-bottom: 1px solid #ddd;
    }

        #editView form > .nav-tabs .nav-link {
            font-weight: normal;
        }

    #editView .nav-tabs .nav-link.disabled {
        color: #b4b5b6;
        background-color: transparent;
        border-color: transparent;
    }

    #editView form > .nav-tabs > li > a {
        padding: 10px 30px;
        font-size: var(--size_14);
        line-height: 16px;
        border-bottom: none;
        background-color: #f4f4f4;
        color: #576373;
        border: 1px solid #c5d0dc;
        border-bottom: none;
        /*margin-top: -1px;*/
    }

        #editView form > .nav-tabs > li > a.active,
        #editView form > .nav-tabs > li > a.active:hover,
        #editView form > .nav-tabs > li > a.active:focus {
            border-top: 3px solid #5bc0de;
            background-color: #FFF;
        }


    #editView form > .tab-content {
        padding: 25px 15px;
    }

    #editView .col-md-10 > span {
        line-height: 1.8;
    }

    #editView .text-danger {
        font-size: 0.85rem;
    }

    #editView img {
        max-width: 100%;
    }

.mark-required {
    color: var(--main_blue);
    padding-right: 0;
}

#roleTable tr th {
    font-size: var(--size_14);
    font-weight: normal;
}

/*分隔線*/
.form-group.form-group-border {
    border-top: 1px solid #ffffff;
}

.language-subject {
    margin: 10px 10px 10px 5px;
    border-bottom: 1px dashed #939393;
}

    .language-subject span {
        background: #939393;
        color: #fff;
        padding: 5px 10px;
        border-radius: 3px;
    }

.help-button-parent .form-control {
    display: inline-block;
}

.help-button {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 19px !important;
    text-align: center;
    padding: 0;
    background-color: #a4c4cf;
    color: #FFF;
    font-size: var(--size_14);
    font-weight: bold;
    cursor: default;
    margin-left: 4px;
    border-radius: 100%;
    border-color: #FFF;
    border: 1.5px solid #FFF;
    -webkit-box-shadow: 0 1px 0 1px rgba(0,0, 0,0.2);
    box-shadow: 0 1px 0 1px rgba(0,0,0,0.2);
}

.popover {
    border-radius: 0;
    padding: 0;
    border-color: #ccc;
    border-width: 1px;
    -webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px 0px rgba(0,0,0,0.1);
    color: #4d6883;
}

.popover-body {
    padding: 0.7rem 0.8rem;
    color: #4b758b;
}
/*------------template------------*/
.template-block {
    background: #ededed;
    width: 500px;
    padding: 5px 15px;
    border-radius: 4px;
}

    .template-block [contenteditable=true] {
        border: 1px dashed #AAA;
        background-color: #fff;
        color: #666;
        border-radius: 1px;
        padding: 6px;
    }

        .template-block [contenteditable=true]:empty:before {
            content: attr(placeholder);
            display: block; /* For Firefox */
        }

/*------------bootstrap-select------------*/
.form-group .bootstrap-select {
    display: block;
    width: 100% !important;
    max-width: 400px;
}

.btn.dropdown-toggle {
    border-radius: 1px !important;
    padding: 11px 16px;
    height: 45px;
    font-size: var(--size_15);
    color: #797979;
    border-radius: 2px;
    border: 1px solid #D8D8E4;
}

    .btn.dropdown-toggle.btn-light {
        background-color: #fff;
        color: #797979;
        border-color: #D8D8E4;
    }

    .btn.dropdown-toggle:hover,
    .open .btn.dropdown-toggle {
        border-color: #66afe9;
    }

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

.bootstrap-select .dropdown-toggle:active {
    -webkit-transform: none !important;
    transform: none !important;
}

.bootstrap-select .dropdown-menu > .inner {
    min-height: initial !important;
}

.bootstrap-select .dropdown-menu {
    min-width: 100% !important;
    min-height: initial !important;
}

    .bootstrap-select .dropdown-menu > li > a,
    .dropdown-multi .dropdown-menu li a {
        font-size: var(--size_15);
        padding-left: 8px;
        padding-right: 8px;
    }

.bootstrap-select.disabled, .bootstrap-select > .disabled {
    background: #e7e7e7;
    opacity: 1;
    color: #909090;
}

.btn.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 2px;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    color: #84C5CF;
    border-top: .45em solid;
    border-right: .35em solid transparent;
    border-bottom: 0;
    border-left: .35em solid transparent;
}

.dropdown-menu {
    padding-left: 0;
    padding-right: 0;
}

.dropdown-item {
    line-height: 1.7rem;
    margin: 0;
}

    .dropdown-item:not(.btn).active, .dropdown-item:not(.btn):active {
        background-color: #4f99c6;
        color: #fff;
    }

    .dropdown-item:not(.btn):focus, .dropdown-item:not(.btn):hover {
        background-color: #4f99c6;
        color: #fff;
    }

/*multi*/
.bootstrap-select.show-tick .dropdown-menu > li.selected > a:not(:hover) {
    color: #179BAC;
}

/*------------floating labels------------*/
.ffl-wrapper {
    position: relative;
    display: block;
    /*padding-top: 1rem;*/
}

    .ffl-wrapper .ffl-label {
        transition-property: all;
        transition-duration: 200ms;
        transition-timing-function: ease;
        transition-delay: 0s;
        position: absolute;
        white-space: nowrap;
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        pointer-events: none;
        top: .8rem;
        color: #b3b3b3;
        line-height: 1.2;
        margin-left: 10px;
    }

    .ffl-wrapper input,
    .ffl-wrapper-height button.dropdown-toggle { /*自訂-讓select高與ffl-wrapper相同*/
        /*height: 38px;*/
    }

        .ffl-wrapper input:focus + label {
            color: #0289f3;
        }

    .ffl-wrapper.ffl-floated .ffl-label {
        top: -5px;
        font-size: 0.75rem;
        background: #fff;
    }

    .ffl-wrapper.ffl-floated input {
        padding-bottom: 2px;
    }


/*------------checkbox、radio------------*/

input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border: 1px solid #79B5BD;
    background-color: #fff;
    vertical-align: text-bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
}

    input[type=checkbox].input-sm, input[type=radio].input-sm {
        width: 16px;
        height: 16px;
        font-size: var(--size_12);
    }

input[type=radio] {
    border-radius: 100%;
}

input[type=checkbox] {
    border-radius: 3px;
}

    input[type=checkbox]:active, input[type=checkbox]:hover,
    input[type=radio]:active, input[type=radio]:hover {
        border-color: #84C5CF;
    }

input[type=radio]:checked:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid #fff;
    /*width: 14px;
    height: 14px;*/
    display: block;
    border-radius: 50%;
    background: #179BAC;
}

input[type=checkbox]:checked {
    border: none;
}

    input[type=checkbox]:checked:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        border: 2px solid #84C5CF;
        display: block;
        background: #84C5CF;
        /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3e%3cpath fill='%23fff' d='M 7.5,1.75 l -3.5,4 -2,-1.5 L 1,5.5 4,8.5 9,2.5 z'/%3e%3c/svg%3e");
        background-size: 100%;*/
    }

    input[type=checkbox]:checked:after {
        content: "\f00c"; /*'far fa-check'*/
        font-family: "Font Awesome 5 Pro";
        font-weight: 500;
        position: absolute;
        top: 0.5px;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/*---checkbox group---*/
.radio label, .checkbox label {
    margin-bottom: 0;
    cursor: pointer;
}

.checkbox-block {
    padding: 8px 0 4px 0;
}

    .checkbox-block .block-title {
        font-size: var(--size_13);
        color: #6b6b6b;
    }

        .checkbox-block .block-title ~ .checkbox {
            margin-right: 10px;
        }


#treeView .col-md-12 .checkbox-block .checkbox, #treeView .col-md-12 .checkbox-block .radio {
    display: inline-block;
    float: left;
}

.checkbox-block .checkbox, .checkbox-block .radio {
    padding: 2px 6px;
    display: inline-block;
}

    .checkbox-block .checkbox label, .checkbox-block .radio label {
        cursor: pointer;
        font-size: var(--size_15);
        color: #525252;
    }

/*垂直checkbox*/
.vertical-checks .checkbox-block .checkbox, .itemTree .checkbox-block .radio {
    display: block;
    float: none;
}

.vertical-checks .checkbox-block .block-title {
    font-size: var(--size_13);
    margin-bottom: 5px;
    font-weight: 500;
    padding-left: 3px;
}

.vertical-checks .form-horizontal .form-group {
    clear: both;
    padding: 5px 0;
    margin-bottom: 0 !important;
}

.vertical-checks input[type=checkbox].ace + .lbl, #editView input[type=radio].ace + .lbl {
    min-width: 80px;
}


/*custom*/
.custom-radio,
.custom-check {
    display: inline-block;
    position: relative;
    margin-right: 3px;
    margin-bottom: 3px;
}

    .custom-radio label,
    .custom-check label {
        margin-bottom: 0;
    }

    .custom-radio input,
    .custom-check input {
        position: absolute;
        opacity: 0;
    }

    .custom-radio label span.btn,
    .custom-check label span.btn {
        display: block;
        background: #fff;
        border-color: #EAEAEA;
        color: #797979;
        padding: 0.65rem 1.5rem;
    }

    .custom-radio input:checked + span.btn,
    .custom-check input:checked + span.btn {
        background: #ECF5F7;
        border-color: #239BAB;
        color: #239BAB;
    }

    .custom-radio input:checked + span.btn,
    .custom-check input:checked + span.btn {
        padding-left: 2.5rem;
    }

    .custom-radio input:checked + span:before,
    .custom-check input:checked + span:before {
        content: "\f00c"; /*'far fa-check'*/
        font-family: "Font Awesome 5 Pro";
        font-weight: 600;
        color: #179BAC;
        font-size: var(--size_17);
        position: absolute;
        top: 10px;
        left: 20px;
    }

/*------------switch------------*/
.switch-block {
    display: flex;
    align-items: center;
    height: 34px;
    font-size: var(--size_14);
}

    .switch-block .block-title {
        font-size: var(--size_14);
        color: #6b6b6b;
        display: inline-block;
        min-width: 60px;
        padding-left: 3px;
    }

    .switch-block > label {
        /*font-size: var(--size_12);*/
        color: #6b6b6b;
        display: inline-block;
        cursor: pointer;
        margin: 4px 0 0 0;
        position: relative;
    }

.control-label .switch-block {
    display: inline-flex;
}

#editTable th .switch-block {
    display: inline;
}

.switch-block .block-bottom {
    font-size: var(--size_15);
    padding-left: 4px;
}

input[type=checkbox].ace-switch {
    background-color: #eaeaea;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 88%;
    border: none;
    margin: 0;
    border-radius: 1.5rem;
    width: 2.75rem;
    height: 1.5rem;
}

    input[type=checkbox].ace-switch::before {
        content: none;
    }

    input[type=checkbox].ace-switch::after {
        content: "";
        position: absolute;
        background-color: #969696;
        border-radius: inherit;
        transition: -webkit-transform 80ms;
        transition: transform 80ms;
        transition: transform 80ms,-webkit-transform 80ms;
        top: 0.1875rem;
        left: 0.1875rem;
        width: 1.125rem;
        height: 1.125rem;
    }

    input[type=checkbox].ace-switch:checked {
        background-image: none;
        background-color: #dcf2eb;
    }

        input[type=checkbox].ace-switch:checked::after {
            background-color: #84c5cf;
            -webkit-transform: translateX(1.25rem);
            transform: translateX(1.25rem);
        }

.switch-block .inner {
    padding: 0;
    position: absolute;
    top: 2px;
    left: 8px;
    font-size: var(--size_13);
    font-weight: 400;
}

input[type=checkbox].ace-switch + .inner .on {
    display: none;
    color: var(--main_blue);
}

input[type=checkbox].ace-switch + .inner .off {
    display: block;
    color: #969696;
    margin-left: 1rem;
}

input[type=checkbox].ace-switch:checked + .inner .on {
    display: block;
}

input[type=checkbox].ace-switch:checked + .inner .off {
    display: none;
}

.SurveyBlockArea input[type=checkbox].ace-switch {
    width: 3.6rem;
}

    .SurveyBlockArea input[type=checkbox].ace-switch:checked::after {
        -webkit-transform: translateX(2.1rem);
        transform: translateX(2.1rem);
    }

/*--------------button---------------*/
.btn-dark {
    color: #ffffff;
    background-color: #abbac3;
    border-color: #90a7b5;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {
        color: #ffffff;
        background-color: #9fafb9;
        border-color: #6a808d;
    }

/*------------fileupload------------*/
.itemFile .fileuploader {
    margin: 0 auto;
    max-width: 600px;
}

#editTable .fileuploader {
    background: none;
}

.col-md-10 > .fileuploader {
    margin-left: -15px;
}

.fileuploader {
    background: #fafbfd;
    min-width: 300px;
    max-width: 700px;
    padding: 15px;
    border-top-left-radius: 4px;
}

    .fileuploader .nav-tabs .nav-link {
        font-weight: normal;
        font-size: var(--size_13);
        color: #576373 !important;
        padding: 0.4rem 1rem;
    }

    .fileuploader .tab-content {
        border: none;
        padding-bottom: 0;
        font-size: var(--size_13);
        margin-top: 1px;
    }

    /*fileupload input*/
    .fileuploader .fileuploader-input {
        cursor: pointer;
        display: flex;
        overflow: hidden;
        margin-bottom: 3px;
    }

    .fileuploader .fileDes_L {
        color: #999;
        float: left;
    }

    .fileuploader .fileDes_R {
        color: #999;
        float: right;
    }

    .fileuploader .fileuploader-input .fileText {
        display: inline-block;
        color: #959595;
        border: 1px solid #cccccc;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: #ffffff;
        padding: 9px 12px;
        font-size: var(--size_14);
        /*margin-right: 10px;*/
        width: 100%;
        height: auto;
    }

    .fileuploader .fileuploader-input .fileBtn {
        display: inline-block;
        float: right;
        color: #ffffff;
        background-color: #428bca;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 6px 8px;
        min-width: 80px;
        width: 20%;
        display: flex;
        align-items: center;
    }

        .fileuploader .fileuploader-input .fileBtn:hover {
            background-color: #2d79ba;
        }

        .fileuploader .fileuploader-input .fileBtn span {
            margin: 0 auto;
        }

    /*youtube input*/
    .fileuploader .youtube-input {
        cursor: pointer;
        display: flex;
        overflow: hidden;
        margin-bottom: 3px;
    }

        .fileuploader .youtube-input .input-group {
            width: 100%;
            max-width: 100%;
        }

        .fileuploader .youtube-input .youtubeText {
            display: inline-block;
            color: #959595;
            border: 1px solid #cccccc;
            background-color: #ffffff;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            padding: 9px 12px;
            font-size: var(--size_14);
            /*width: 100%;*/
            height: auto;
        }

        .fileuploader .youtube-input .youtubeBtn {
            display: inline-block;
            float: right;
            color: #ffffff;
            background-color: #8e5bde;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            padding: 6px 8px;
            min-width: 80px;
            width: 20%;
            display: inline-block;
            border: none;
            text-align: center;
        }

            .fileuploader .youtube-input .youtubeBtn:hover {
                background-color: #7e39d7;
            }

    /*dragging*/
    .fileuploader .fileuploader-input.fileuploader-dragging .fileText {
        border: 2px dashed #2b7dbc;
        border-radius: 4px;
    }

    .fileuploader .fileuploader-input.fileuploader-dragging .fileBtn {
        display: none;
    }

    /*item list*/
    .fileuploader ul.fileuploader-items-list {
        list-style-type: none;
        margin: 0;
        margin-top: 10px;
        background: #eee;
        padding: 0;
    }

        .fileuploader ul.fileuploader-items-list li.fileuploader-item {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            background: #fafbfd;
        }

    .fileuploader .columns {
        display: flex;
        position: relative;
        width: 100%;
        min-width: 300px;
    }

        .fileuploader .columns .column-thumbnail {
            display: inline-block;
            width: 80px;
        }

            .fileuploader .columns .column-thumbnail img,
            .fileuploader .columns .column-thumbnail .fileuploader-item-icon {
                display: inline-block;
                border-radius: 6px;
                height: 48px;
                max-width: 80px;
                display: flex;
                align-items: center;
                background-color: #9ea8b2;
                margin: 0 auto;
            }

            .fileuploader .columns .column-thumbnail .fileuploader-item-icon {
                width: 48px;
            }

                .fileuploader .columns .column-thumbnail .fileuploader-item-icon span {
                    margin: 0 auto;
                    font-weight: 500;
                    font-size: var(--size_13);
                    color: #fff;
                }

            .fileuploader .columns .column-thumbnail a {
                text-decoration: none;
            }

        .fileuploader .columns .column-title {
            display: inline-block;
            padding: 4px 15px;
        }

            .fileuploader .columns .column-title .column-title-filename {
                font-size: var(--size_14);
                font-weight: 600;
            }

        .fileuploader .columns .column-edit {
            padding-right: 100px;
        }

        .fileuploader .columns .column-actions {
            display: inline-flex;
            align-items: center;
            position: absolute;
            right: 10px;
            /*background: #fafbfd;*/
        }

            .fileuploader .columns .column-actions .fileuploader-action-sort {
                cursor: pointer;
                color: #84afd5;
                font-size: var(--size_18);
                margin-right: 15px;
            }

                .fileuploader .columns .column-actions .fileuploader-action-sort:hover {
                    color: #428bca;
                }

            /*.fileuploader .columns .column-actions .fileuploader-action-remove {
                cursor: pointer;
               color: #f6a698;
                font-size: var(--size_24);
                margin-right: 30px;
            }

                .fileuploader .columns .column-actions .fileuploader-action-remove:hover {
                    color: #f2725c;
                }*/

            .fileuploader .columns .column-actions .fileuploader-action-new {
                position: absolute;
                right: -5px;
                font-size: var(--size_20);
                color: #36ae35;
                display: none;
            }

    /*---fileupload area---*/
    .fileuploader.area {
        padding: 0;
        background: none;
    }

        .fileuploader.area .fileuploader-input {
            background: #FAFDFD;
            border: 1px dashed #86C5CE;
            text-align: center;
            padding: 25px;
            border-radius: 5px;
            margin-bottom: 0;
        }

            .fileuploader.area .fileuploader-input.fileuploader-dragging {
                border-width: 2px;
            }

            .fileuploader.area .fileuploader-input .fileText {
                color: var(--main_blue);
                font-size: var(--size_14);
                background-color: transparent;
                border: none;
            }

        .fileuploader.area .fileText i {
            color: #84C5CF;
            display: block;
            font-size: 100px;
        }

        .fileuploader.area ul.fileuploader-items-list li.fileuploader-item {
            background: #fff;
        }

            .fileuploader.area ul.fileuploader-items-list li.fileuploader-item.isnew {
                color: #4E7A81;
            }

        .fileuploader.area .columns .column-thumbnail,
        .fileuploader.area .columns .column-title-filesize {
            display: none;
        }

        .fileuploader.area .columns .column-title {
            padding: 4px 0;
            margin-right: 40px;
        }

            .fileuploader.area .columns .column-title .column-title-filename {
                font-size: var(--size_15);
                font-weight: 600;
                line-height: 1.8;
            }

        .fileuploader.area .columns .column-actions {
            right: 0;
            position: relative;
        }

            .fileuploader.area .columns .column-actions a {
                margin-left: 5px;
            }

            .fileuploader.area .columns .column-actions .fileuploader-action-sort {
                display: none;
            }

/*------------tag------------*/
.bootstrap-tagsinput {
    border-radius: 1px !important;
    width: 500px;
    padding: 6px 12px;
}

    .bootstrap-tagsinput .tag {
        font-size: var(--size_13);
        line-height: 1.5;
        border-radius: 2.5px;
        padding: 3px 7px;
        height: auto;
        /*background-color: #3d95c1 !important;*/
    }

        .bootstrap-tagsinput .tag [data-role="remove"] {
            font-size: var(--size_15);
            font-weight: 700;
            line-height: initial !important;
        }

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}

.twitter-typeahead .tt-hint {
    display: none;
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: var(--size_14);
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

    .tt-suggestion:hover,
    .tt-suggestion:focus {
        color: #ffffff;
        text-decoration: none;
        outline: 0;
        background-color: #428bca;
    }

/*------------sort------------*/

.sort-container {
    display: flex;
    /*background: #fafbfd;*/
}

.sort-list {
    /*display: flex;*/
    list-style: none;
    margin: 20px 0;
    padding: 0;
    /*background: #eee;*/
}

    .sort-list li {
        float: left;
        border: 1px solid #ddd;
        background: #fff;
        padding: 15px 10px;
        text-align: center;
        border-radius: 4px;
        cursor: move;
    }

        .sort-list li.highlight {
            border: 2px dashed lightblue;
            background-color: #fafbfd;
        }

#treeSort li.highlight {
    border: 2px dashed lightblue;
    background-color: #fff;
}

.sort-list .sort-subject {
    padding-top: 10px;
    font-size: var(--size_14);
    width: 180px;
}

#treeSort .sort-tree li {
    list-style: none;
    min-height: 30px;
}

#treeSort .sort-tree .timeline-label {
    cursor: move;
}

#treeSort .sort-tree li.highlight {
    border: 2px dashed lightblue;
}

/*------------editTable------------*/
#editTable {
    margin: 0 auto;
    max-width: 800px;
    font-size: var(--size_14);
}

    #editTable tr th {
        background: #eceded;
    }

    #editTable tr td {
        vertical-align: middle;
    }

    #editTable .edit-row {
        background-color: #fff7df;
    }

    #editTable .new-row {
        background-color: #f9f9fa;
    }

    #editTable .edittable-action-sort,
    #editTable .edittable-action-edit,
    #editTable #edittable-action-create,
    #editTable .edittable-action-remove,
    #editTable .edittable-action-save,
    #editTable .edittable-action-cancel {
        cursor: pointer;
        font-size: var(--size_20);
        margin-right: 5px;
    }

    #editTable .edittable-action-sort {
        color: #98b5f6;
        font-size: var(--size_18);
    }

        #editTable .edittable-action-sort:hover {
            color: #428bca;
        }

    #editTable .edittable-action-remove {
        color: #f6a698;
    }

        #editTable .edittable-action-remove:hover {
            color: #f2725c;
        }

    #editTable .edittable-action-edit,
    #editTable .edittable-action-save {
        color: #5abe5f;
    }

        #editTable .edittable-action-edit:hover,
        #editTable .edittable-action-save:hover {
            color: #25952a;
        }

    #editTable .edittable-action-cancel {
        color: #bbd3e4;
    }

        #editTable .edittable-action-cancel:hover {
            color: #a9c6da;
        }

    #editTable.sort-table tr.highlight {
        border: 2px dashed lightblue;
        background-color: #fff;
    }

/*------------tab------------*/
.content-tab {
    margin: 0;
}

.nav-pills > li {
    width: 100%;
}

    .nav-pills > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
        border-radius: 4px;
    }

        .nav-pills > li > a.active, .nav-pills > li > a.active:hover, .nav-pills > li > a.active:focus {
            color: #fff;
            background-color: #337ab7;
        }

        .nav-pills > li > a:hover, .nav-pills > li > a:focus {
            text-decoration: none;
            background-color: #eee;
        }

.tab-content {
    padding: 0;
    border: none;
}

/*-------------*/
.ui-autocomplete {
    list-style: none;
}

    .ui-autocomplete li {
        padding: 3px;
        font-size: var(--size_14);
    }

/*------------nav------------*/

.navbar .navbar-menu.navbar-collapse {
    height: 100%;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.navbar .navbar-nav {
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
}

    .navbar .navbar-nav > .nav {
        height: 100%;
    }

.navbar-inner.container .navbar-nav .nav > .nav-item:last-of-type, .navbar-inner.container .navbar-nav .nav > .nav-item:last-of-type::after {
    border-right-width: 0;
}

.navbar .navbar-nav > .nav > .nav-item {
    height: 100%;
}

    .navbar .navbar-nav > .nav > .nav-item > .btn, .navbar .navbar-nav > .nav > .nav-item > .nav-link {
        height: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
    }

        .navbar .navbar-nav > .nav > .nav-item > .btn > .caret, .navbar .navbar-nav > .nav > .nav-item > .nav-link > .caret {
            margin: 0 0 0 .5rem !important;
        }

    .navbar .navbar-nav > .nav > .nav-item > .nav-link {
        padding-left: 1rem !important;
        padding-right: .9rem !important;
    }

.navbar-blue .navbar-nav > .nav > .nav-item:last-of-type {
    border: 0 solid rgba(0,0,0,.1);
    border-width: 0 1px;
}

.navbar .navbar-nav .dropdown-menu {
    /*overflow: hidden auto !important;*/
    border-width: 1px !important;
}

.navbar .navbar-menu .navbar-nav > .nav .dropdown-menu {
    margin: 0 !important;
}


.navbar .dropdown-caret.dropdown-menu::after, .navbar .dropdown-caret.dropdown-menu::before, .navbar .dropdown-caret:not(.dropdown-menu) {
    display: block !important;
}

.btn:active {
    -webkit-transform: none !important;
    transform: none !important;
}

/*date*/
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
    border: none;
}

    .bootstrap-datetimepicker-widget table td.day {
        font-size: var(--size_14);
    }

.bootstrap-datetimepicker-widget > .row {
    margin-right: 0;
    margin-left: 0;
    align-items: center;
}

.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 28rem;
}

.bootstrap-datetimepicker-widget > .row > .col-md-6.datepicker {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}

.bootstrap-datetimepicker-widget > .row > .col-md-6.timepicker {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

/*fancybox*/
.fancybox-skin {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: none;
}

.fancybox-close {
    top: -12px;
    right: -12px;
}

.youtube-box {
    position: relative;
    display: inline-block;
}

    .youtube-box img {
        display: block;
    }

    .youtube-box .icon {
        position: absolute;
        left: calc(50% - 23px);
        top: calc(50% - 23px);
        height: 46px;
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 4px;
    }

        .youtube-box .icon i {
            color: #e7e7e7f0;
            font-size: 36px;
        }

.userAvatar {
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

    .userAvatar img {
        width: 100%;
        height: auto;
    }

/*dropdown*/
.dropdown-multi {
    display: flex;
}

    .dropdown-multi .btn {
        width: 100%;
        text-align: left;
        color: #999;
    }

        .dropdown-multi .btn span {
            display: inline-block;
            width: calc(100% - 15px);
        }

            .dropdown-multi .btn span.text-normal {
                color: #5d6069;
            }

    .dropdown-multi .dropdown-menu {
        width: 100%;
    }

        .dropdown-multi .dropdown-menu li {
            position: relative;
        }

            .dropdown-multi .dropdown-menu li .hasChild::after {
                display: inline-block;
                width: 0;
                height: 0;
                margin-left: 0.255em;
                vertical-align: 0.255em;
                content: "";
                border-top: 0.3em solid transparent;
                border-right: 0;
                border-bottom: 0.3em solid transparent;
                border-left: 0.3em solid;
                position: absolute;
                top: 15px;
                right: 12px;
            }

        .dropdown-multi .dropdown-menu .dropdown-submenu {
            display: none;
            position: absolute;
            left: 100%;
            top: -7px;
        }

        .dropdown-multi .dropdown-menu .dropdown-submenu-left {
            right: 100%;
            left: auto;
        }

        .dropdown-multi .dropdown-menu > li:hover > .dropdown-submenu {
            display: block;
        }

/*------------menu-----------*/

.navbar.navbar-blue {
    background: transparent linear-gradient(96deg, #445262 0%, #243045 100%) 0% 0% no-repeat padding-box;
}

.navbar .navbar-menu {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

    .navbar .navbar-menu .nav > .nav-item > .nav-link {
        color: #fff;
        font-size: var(--size_17);
    }

        .navbar .navbar-menu .nav > .nav-item > .nav-link.dropdown-toggle::after {
            content: none;
        }

        .navbar .navbar-menu .nav > .nav-item > .nav-link span {
            padding-right: 5px;
        }

        .navbar .navbar-menu .nav > .nav-item > .nav-link i {
            font-size: 28px;
            font-weight: 300;
            padding-left: 3px;
        }

.btn-burger-box {
    position: absolute;
    left: 14rem;
    top: 0;
    width: 1.55rem;
    height: 100%;
    z-index: 1020;
    transition: all 350ms;
}

    .sidebar.collapsing + .btn-burger-box,
    .btn-burger-box.collapsed {
        left: 0rem;
    }

    .btn-burger-box .btn-burger {
        position: absolute;
        left: 0;
        top: 3rem;
        cursor: pointer;
        width: 3rem;
        height: 3rem;
        background: transparent;
        padding: 0.375rem 0.75rem;
        box-shadow: none !important;
        z-index: 1020;
        transition: all 350ms;
        opacity: 1 !important;
    }

        .btn-burger-box .btn-burger .bars {
            display: block;
            height: 1px;
            width: 90%;
            border-bottom: 1px solid #fff;
            position: relative;
            margin: 0.35rem 0 0.35rem -1.3rem;
        }

        .btn-burger-box .btn-burger:after {
            content: '';
            position: absolute;
            left: 0.65rem;
            top: 0;
            width: 1.5rem;
            height: 3rem;
            background: radial-gradient(circle 1.25rem at -0.5rem,#0000 100%, #f5f5f5);
            background-size: 100%;
            background-repeat: no-repeat;
        }

.btn-burger.collapsed + .btn-burger-box .btn-burger:after {
    content: none;
}

.btn-burger-box .btn-burger:before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: 4px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.btn-burger-box .btn-burger:hover:before {
    background: #445262b0;
}

.sidebar.collapsing + .btn-burger-box .btn-burger:before,
.btn-burger-box.collapsed .btn-burger:before {
    background: #445262;
}

.btn-burger-box .btn-burger-mask:before {
    content: '';
    position: absolute;
    top: 0;
    left: 11px;
    width: 1.5rem;
    height: 3.2rem;
    z-index: 1020;
    background: #f5f5f5;
}

.btn-burger-box .btn-burger-mask:after {
    content: '';
    position: absolute;
    top: 5.8rem;
    left: 11px;
    width: 1.5rem;
    bottom: 0;
    z-index: 1020;
    background: #f5f5f5;
}

.sidebar {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16rem;
    position: relative;
    z-index: 1020;
    visibility: hidden;
    transition: width 0.35s ease;
}

    .sidebar.collapsing {
        height: auto;
        width: 0;
    }

    .sidebar .sidebar-inner {
        width: inherit;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: inherit;
        visibility: visible;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .sidebar .sidebar-section {
        width: 16rem;
        height: 100%;
        padding: 2rem 0 0 0.8rem;
        white-space: nowrap;
        background: #445262;
        background-image: url('../../Images/side-menu-bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }

        .sidebar .sidebar-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            z-index: 0;
            background: #252A31;
        }

    .sidebar .nav {
        z-index: 1;
        position: relative;
    }

        .sidebar .nav > .nav-item {
            display: block;
            margin-bottom: 2rem;
        }

            .sidebar .nav > .nav-item > .nav-link {
                color: #fff;
                font-size: var(--size_17);
                display: flex;
                align-items: flex-start;
            }

                .sidebar .nav > .nav-item > .nav-link:hover {
                    cursor: default;
                }

                .sidebar .nav > .nav-item > .nav-link .nav-icon:before {
                    content: '';
                    display: inline-block;
                    width: 28px;
                    height: 28px;
                    margin-right: 5px;
                    background-image: url('../../Images/icon-menu-survey.svg');
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                .sidebar .nav > .nav-item > .nav-link .nav-icon.icon-2:before {
                    background-image: url('../../Images/icon-menu-export.svg');
                }

                .sidebar .nav > .nav-item > .nav-link .nav-icon.icon-3:before {
                    background-image: url('../../Images/icon-menu-statistics.svg');
                }

                .sidebar .nav > .nav-item > .nav-link .nav-icon.icon-4:before {
                    background-image: url('../../Images/icon-menu-layer.svg');
                }

            .sidebar .nav > .nav-item .submenu ul {
                margin-top: -5px;
                padding-left: 13px;
                list-style: none;
            }

                .sidebar .nav > .nav-item .submenu ul .nav-item .nav-link {
                    font-size: var(--size_15);
                    color: #84C5CF;
                    padding: 0.4rem 2.3rem;
                    display: inline-block;
                    margin-bottom: 1px;
                    border-radius: 20px;
                }

                    .sidebar .nav > .nav-item .submenu ul .nav-item.active .nav-link,
                    .sidebar .nav > .nav-item .submenu ul .nav-item .nav-link:hover {
                        background: #179BAC;
                        color: #fff;
                    }

.submenu .unread {
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    padding: 0 0.4rem;
    display: inline-block;
    font-size: 95%;
    font-weight: 400;
}

/*------------contain-----------*/
.body-container {
    min-width: 1200px;
}

.main-container {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    min-height: calc(100vh - 60px);
    background-color: #f5f5f5;
}

.main-content {
    position: relative;
    width: calc(100% - 16rem);
    padding: 30px 40px 30px 30px;
}

.sidebar.collapsing + .btn-burger-box + .main-content,
.btn-burger-box.collapsed + .main-content {
    width: 100%;
}

.main-content .page-title {
    font-size: var(--size_24);
    color: #525252;
    font-weight: 400;
}

.main-content .notice-box {
    font-size: var(--size_14);
    color: #525252;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e3e3;
    display: inline-block;
}

/*title*/
.page-header {
    border-bottom: 1px dotted #e2e2e2;
    padding: .3rem 0;
    margin-bottom: 1.2rem;
}

    .page-header h1 small label {
        font-weight: bolder;
    }

/*---------tooltip-box-------*/
.tooltip-area {
    position: relative;
    transition: all 350ms;
}

    .tooltip-area .tooltip-box {
        /*display: none;*/
        position: absolute;
        top: calc(100% + 12px);
        left: -125px;
        width: 380px;
        z-index: 1080;
        box-shadow: -5px 5px 18px #00000029;
        transition: all 350ms;
        visibility: hidden;
    }

        .tooltip-area .tooltip-box:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            margin-right: -11px;
            top: -11px;
            right: 50%;
            border: 8px solid #000;
            border-color: #179BAC transparent transparent #179BAC;
            transform-origin: 0 0;
            transform: scaleX(.8) rotate(45deg);
        }

    .tooltip-area.right .tooltip-box {
        left: -250px;
    }

        .tooltip-area.right .tooltip-box:before {
            right: 18%;
        }

    .tooltip-area:hover .tooltip-box {
        visibility: visible;
    }

    .tooltip-area .tooltip-box .tooltip-title {
        background: #179BAC;
        color: #fff;
        text-align: center;
        font-size: var(--size_18);
        padding: 9px;
        border-radius: 3px 3px 0 0;
    }

    .tooltip-area .tooltip-box .tooltip-contain {
        background: #ECF5F7;
        color: #525252;
        font-size: var(--size_14);
        padding: 16px 26px;
        border-radius: 0 0 3px 3px;
    }

        .tooltip-area .tooltip-box .tooltip-contain p {
            margin-bottom: 0.6rem;
            display: flex;
        }

            .tooltip-area .tooltip-box .tooltip-contain p label {
                white-space: nowrap;
            }

/*--素養搜尋--*/
.ItemSearchArea {
    display: inline-flex;
}

    .ItemSearchArea > div:not(:last-child) {
        padding-right: 5px;
    }

/*----題庫區塊----*/
.SurveyBlockArea {
    background: #fff;
    border: 1px dashed #86C5CE;
    padding: 33px 36px;
    min-height: calc(100vh + 118px);
}

    .SurveyBlockArea #QuestionAllArea {
        width: 44%;
        display: inline-block;
        float: left;
        position: sticky;
        top: 25px;
        z-index: 1;
    }

    .SurveyBlockArea .exchange-icon {
        width: 5.5%;
        display: inline-block;
        color: #84C5CF;
        font-size: 32px;
        text-align: center;
        position: absolute;
        top: 350px;
    }

    .SurveyBlockArea #BlockEditArea {
        width: 50%;
        margin-left: 6%;
        display: inline-block;
        /*position: absolute;
        top: 40px;
        right: 42px;*/
    }

    /*title*/
    .SurveyBlockArea h4 {
        margin: 0 0 0.7rem 0 !important;
        font-size: 20px !important;
        font-weight: 500;
        color: #179BAC;
        position: relative;
    }

    .SurveyBlockArea .sort-info {
        font-size: 13px !important;
        color: #819AB2;
        margin-bottom: 2px;
    }

        .SurveyBlockArea .sort-info .btn.sort-up0,
        .SurveyBlockArea .sort-info .btn.sort-down0 {
            background: #84C5CF;
            color: #fff;
            font-size: var(--size_12);
            border-radius: 3px;
            width: 17px;
            height: 17px;
            padding: 0;
            margin: 0 3px;
            line-height: 0;
        }

            .SurveyBlockArea .sort-info .btn.sort-up0 i,
            .SurveyBlockArea .sort-info .btn.sort-down0 i {
                line-height: 1.3;
            }

        .SurveyBlockArea .sort-info .btn.sort-down0 {
            margin-left: 0;
        }

    /*toolbar*/
    .SurveyBlockArea .toolbar {
        border-bottom: none;
    }

        .SurveyBlockArea .toolbar > .group {
            padding: 1px;
            display: flex;
            align-items: center;
            justify-content: initial;
            margin-bottom: 5px;
        }

            .SurveyBlockArea .toolbar > .group > label {
                width: 80px;
                white-space: nowrap;
                font-size: var(--size_15);
            }

            .SurveyBlockArea .toolbar > .group > div {
                width: calc(100% - 80px);
                display: inline-flex;
                align-items: center;
            }

        .SurveyBlockArea .toolbar .btn-search {
            width: 36px;
            height: 36px;
            min-width: 36px;
            font-size: var(--size_19);
            margin-left: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    /*QuestionBox*/
    .SurveyBlockArea .QuestionBox {
        list-style: none;
        padding: 0 10px 0 0;
        margin: 0;
        /*max-height: 600px;*/
        overflow-y: scroll;
    }

        .SurveyBlockArea .QuestionBox#QuestionList {
            max-height: calc(100vh - 250px);
        }

        /*custom bar*/
        .SurveyBlockArea .QuestionBox::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

        .SurveyBlockArea .QuestionBox::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0px 1px #ededed;
            border-radius: 5px;
            background: #fafafa;
        }

        .SurveyBlockArea .QuestionBox::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #B7C6D5;
            border: 2px solid #E8E8E8;
        }

        .SurveyBlockArea .QuestionBox li {
            margin-bottom: 6px;
        }

            .SurveyBlockArea .QuestionBox li > .inner {
                background: #EAEAEA;
                border-radius: 5px;
                display: none;
                align-items: center;
                cursor: pointer;
                position: relative;
                padding: 17px;
            }

    .SurveyBlockArea #OptionTableBody .QuestionBox li > .inner {
        background: #fff;
        flex-wrap: wrap;
    }

    .SurveyBlockArea #OptionTableBody .QuestionBox li.on-skip > .inner {
        background: #179BAC;
    }

    .SurveyBlockArea .QuestionBox li.on-skip div.number,
    .SurveyBlockArea #OptionTableBody .QuestionBox li.on-skip .que_subject {
        color: #fff;
    }

    .SurveyBlockArea .QuestionBox .highlight {
        border: 2px dashed lightblue;
    }

    .SurveyBlockArea .QuestionBox.no-category li > .inner,
    .SurveyBlockArea .QuestionBox li.in > .inner {
        display: flex;
    }

    .SurveyBlockArea .QuestionBox li .que_option {
        width: 100%;
        margin: 2px 0 0 0;
        font-size: var(--size_14);
        background: #fff;
        border-radius: 5px;
        padding: 0 17px;
    }

        .SurveyBlockArea .QuestionBox li .que_option .row {
            border-bottom: 1px solid #e3e3e3e3;
            margin: 0;
            align-items: center;
            margin-right: -5px;
            margin-left: -5px;
        }

            .SurveyBlockArea .QuestionBox li .que_option .row:last-child {
                border-bottom: none;
            }

            .SurveyBlockArea .QuestionBox li .que_option .row > div {
                padding: 8px 5px;
            }

        .SurveyBlockArea .QuestionBox li .que_option .col-skip .form-control {
            width: calc(100% - 65px);
            height: auto;
            display: inline-block;
            margin-left: 10px;
        }

    .SurveyBlockArea .QuestionBox.empty {
        min-height: 80px;
    }

    .SurveyBlockArea #OptionTableBody .QuestionBox + .default {
        background: transparent;
        text-align: center;
        font-size: var(--size_14);
        color: #819AB2;
        display: none;
        margin-top: -60px;
        margin-bottom: 30px;
    }

    .SurveyBlockArea #OptionTableBody .QuestionBox.empty + .default {
        display: block;
    }

        .SurveyBlockArea #OptionTableBody .QuestionBox.empty + .default + .btn-collapse span {
            visibility: hidden;
        }

    .SurveyBlockArea .QuestionBox li div.number {
        font-size: var(--size_14);
        color: var(--main_blue);
        border-right: 1px solid #D8D8D8;
        margin: 0 5px 0 0;
        padding: 0 7px 0 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .SurveyBlockArea .QuestionBox li .que_subject {
        font-size: var(--size_14);
        color: #525252;
        margin: 0;
    }

    .SurveyBlockArea #OptionTableBody .QuestionBox li .que_subject {
        width: calc(100% - 198px);
    }

    .SurveyBlockArea .QuestionBox li .que_subject.short {
        display: none;
    }

    /*
    .SurveyBlockArea .QuestionBox li label span {
        padding: 0 5px;
    }*/

    .SurveyBlockArea .tableAutoRow + .rowAddbox .btn-create {
        transform: scale(0.95);
    }

    .SurveyBlockArea .tableAutoRow .data-row {
        background: #ECF5F7;
        padding: 18px 25px 7px 25px;
        border-radius: 3px;
        margin-bottom: 6px;
    }

    .SurveyBlockArea .tableAutoRow .btn-rowbox {
        position: absolute;
        top: -7px;
        right: -2px;
    }
        .SurveyBlockArea .tableAutoRow .btn-rowbox .switch-block {
            display: inline-flex;
        }
    .SurveyBlockArea .QuestionBox#QuestionList .tool,
    .SurveyBlockArea .QuestionBox .tool .block-bottom {
        display: none;
    }

    .SurveyBlockArea .QuestionBox .tool {
        margin-left: auto;
    }

        .SurveyBlockArea .QuestionBox .tool .switch-block {
            height: auto;
            display: inline-flex;
        }

    .SurveyBlockArea .switch-block > label {
        margin: 4px 0 0 0;
    }

.tableAutoRow .btn-rowbox .btn.sort-up,
.tableAutoRow .btn-rowbox .btn.sort-down {
    background: #84C5CF;
    color: #fff;
    font-size: var(--size_16);
    border-radius: 3px;
    width: 22px;
    height: 23px;
}

.SurveyBlockArea .btn-collapse {
    color: #819AB2;
    font-size: var(--size_14);
    box-shadow: none !important;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 0;
}

    .SurveyBlockArea .btn-collapse .in {
        display: block;
    }

    .SurveyBlockArea .btn-collapse .out {
        display: none;
    }

    .SurveyBlockArea .btn-collapse.collapsed .in {
        display: none;
    }

    .SurveyBlockArea .btn-collapse.collapsed .out {
        display: block;
    }


.SurveyBlockArea .QuestionBox.is-group {
    background: #F5F5F5;
    overflow: initial;
    padding: 0;
    border-radius: 5px;
    height: 55px;
}

.SurveyBlockArea .groupBox {
    background: #EAEAEA;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    padding: 17px;
    font-size: var(--size_14);
    color: #525252;
    text-align: center;
}

.SurveyBlockArea .QuestionBox.is-group .subject-area,
.SurveyBlockArea .QuestionBox.is-group .default,
.SurveyBlockArea .QuestionBox.is-group .QuestionBox,
.SurveyBlockArea #OptionTableBody .groupBox .new {
    display: none;
}

.SurveyBlockArea #OptionTableBody .groupBox {
    background: #fff;
    margin-bottom: 6px;
}

.groupBox .form-group {
    display: flex;
    align-items: center;
    width: calc(100% - 30px);
}

.tableAutoRow .groupBox .btn-rowbox {
    top: 0;
}

    .tableAutoRow .groupBox .btn-rowbox .btn {
        background: none;
    }

.groupBox .form-group label {
    white-space: nowrap;
    text-align: right;
    width: 68px;
    margin-right: 10px;
}

.groupBox .QuestionBox li > .inner {
    padding: 9px 5px;
    border-bottom: 1px solid #e3e3e3e3;
}

.groupBox .QuestionBox li:last-child > .inner {
    border: none;
    padding-bottom: 0;
}

.groupBox .QuestionBox li .que_subject {
    width: calc(100% - 78px) !important;
    text-align: left;
}

.SurveyBlockArea #OptionTableBody .groupBox .QuestionBox li .que_subject {
    display: none;
}

    .SurveyBlockArea #OptionTableBody .groupBox .QuestionBox li .que_subject.short {
        display: block;
    }

.groupBox .QuestionBox li .tool,
.groupBox .QuestionBox li .que_option {
    display: none;
}


/*-----題庫預覽-----*/
.print-container {
    /*width: 210mm;
    min-height: 297mm;*/
    max-width: 1280px;
    padding: 5mm;
    margin: 0 auto;
}

.survey-document {
    padding: 20px 0;
}

    .survey-document .page-title {
        font-size: var(--size_24);
        font-weight: 400;
        text-align: center;
        line-height: 1.3;
        margin-bottom: 25px;
    }

    .survey-document hr {
        border-top: 1px dashed #BFBFBF;
    }

    .survey-document h4 {
        color: var(--main_blue);
        font-size: var(--size_17);
        font-weight: 400;
        background: #ECF5F7;
        border-radius: 5px;
        padding: 18px 20px;
    }

    .survey-document .que_box {
        background: #FAFAFA;
        padding: 20px 28px 13px 28px;
        margin-bottom: 6px;
    }

        .survey-document .que_box .number {
            color: var(--main_blue);
            padding-right: 4px;
        }

        .survey-document .que_box .que_subject,
        .survey-document .que_box .que_subject .sort {
            font-size: var(--size_16);
            font-weight: 400;
            padding-bottom: 2px;
            color: #525252;
        }

        .survey-document .que_box .que_option {
            padding-left: 35px;
        }

            .survey-document .que_box .que_option > div.radio,
            .survey-document .que_box .que_option > div.checkbox {
                display: inline-block;
                width: 280px;
                padding: 0 7px 7px 0;
            }

            .survey-document .que_box .que_option .lbl {
                width: 252px;
                padding-left: 6px;
            }

            .survey-document .que_box .que_option .radio label,
            .survey-document .que_box .que_option .checkbox label {
                display: inline-flex;
            }

/*--------chart--------*/
#mainChart {
    text-align: center;
}

.chart-area {
    background: #fff;
    border-radius: 10px;
    padding: 40px 80px;
    position: relative;
    min-height: 200px;
    width: auto;
    max-width: 100%;
    display: inline-block;
}

    .chart-area .chart-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
        /*custom bar*/
        .chart-area .chart-scroll::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

        .chart-area .chart-scroll::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0px 1px #ededed;
            border-radius: 5px;
            background: #fafafa;
        }

        .chart-area .chart-scroll::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #dadada;
            border: 2px solid #E8E8E8;
        }

    /*--chart-title--*/
    .chart-area .chart-title {
        text-align: left;
        margin-left: -20px;
    }

        .chart-area .chart-title h2 {
            margin-top: -2px;
            font-size: var(--size_24);
            color: #324153;
            font-weight: 400;
            margin-bottom: 7px;
        }

        .chart-area .chart-title .info {
            font-size: var(--size_14);
            color: #797979;
        }

    /*--chart-labelbox--*/
    .chart-area .chart-labelbox {
        position: absolute;
        top: 40px;
        right: 30px;
        /*width: calc(100% - 400px);
        min-width: 55px;*/
        text-align: right;
    }

        .chart-area .chart-labelbox ul {
            font-size: var(--size_14);
            list-style: none;
            padding: 0;
        }

            .chart-area .chart-labelbox ul li {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #EAEAEA;
                margin-left: 3px;
                margin-bottom: 5px;
                padding: 4px 10px;
                border-radius: 5px;
                cursor: pointer;
            }

                .chart-area .chart-labelbox ul li.active {
                    background: #EAEAEA;
                }

                .chart-area .chart-labelbox ul li:before {
                    content: '';
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-right: 4px;
                }

                .chart-area .chart-labelbox ul li:nth-child(1):before,
                .chart-area .bar-chart .bar-scope .bar-group .bar:nth-child(1) {
                    background: #447EC4; /*1.blue*/
                }

                .chart-area .chart-labelbox ul li:nth-child(2):before,
                .chart-area .bar-chart .bar-scope .bar-group .bar:nth-child(2) {
                    background: #F1CF35; /*2.yellow*/
                }

                .chart-area .chart-labelbox ul li:nth-child(3):before,
                .chart-area .bar-chart .bar-scope .bar-group .bar:nth-child(3) {
                    background: #FAA2B6; /*3.pink*/
                }

                .chart-area .chart-labelbox ul li:nth-child(4):before,
                .chart-area .bar-chart .bar-scope .bar-group .bar:nth-child(4) {
                    background: #806DAF; /*4.purple*/
                }

        .chart-area .chart-labelbox.no-color ul li:before {
            content: none;
        }

    .chart-area .bar-chart .bar-scope .bar-group.bar-blue .bar,
    .chart-area .bar-chart .bar-scope .bar-group.bar-blue > label:before {
        background: #179BAC; /*blue*/
    }

    .chart-area.active .bar-chart .bar-scope .bar-group.bar-blue .bar:not(.on) {
        background: #8FDCE5;
    }

    .chart-area .bar-chart .bar-scope .bar-group.bar-blue.bringt:nth-child(2n) > label:before {
        background: #2cc6da;
    }

    .chart-area .bar-chart .bar-scope .bar-group.bar-orange .bar,
    .chart-area .bar-chart .bar-scope .bar-group.bar-orange > label:before {
        background: #F98D35; /*orange*/
    }

    .chart-area.active .bar-chart .bar-scope .bar-group.bar-orange .bar:not(.on) {
        background: #FED5AC;
    }

    .chart-area .bar-chart .bar-scope .bar-group.bar-orange.bringt:nth-child(2n) > label:before {
        background: #FEB13F;
    }

    .chart-area .bar-chart .bar-scope .bar-group.bar-green .bar,
    .chart-area .bar-chart .bar-scope .bar-group.bar-green > label:before {
        background: #6BB643; /*green*/
    }

    .chart-area.active .bar-chart .bar-scope .bar-group.bar-green .bar:not(.on) {
        background: #D3ECB4;
    }

    .chart-area .bar-chart .bar-scope .bar-group.bar-green.bringt:nth-child(2n) > label:before {
        background: #93c854;
    }

    /*--chart number-scope--*/
    .chart-area .number-scope {
        position: absolute;
        top: 4px;
        left: 0;
        width: 100%;
    }

        .chart-area .number-scope span {
            display: block;
            color: #BFBFBF;
            font-size: var(--size_15);
            line-height: 1;
            margin-bottom: 34px;
            position: relative;
            text-align: left;
            height: 15px
        }

            .chart-area .number-scope span:after {
                content: '';
                position: absolute;
                top: 10px;
                left: 35px;
                display: block;
                width: calc(100% - 35px);
            }

            .chart-area .number-scope span:after {
                border-bottom: 1px dashed #D5D5D5;
            }


    /*--bar-chart--*/
    .chart-area .bar-chart {
        position: relative;
        margin-top: 90px;
        text-align: center;
    }

        .chart-area .bar-chart .number-scope span:first-child:after,
        .chart-area .bar-chart .number-scope span:last-child:after {
            border-bottom: none;
        }

        .chart-area .bar-chart .bar-scope {
            position: relative;
            margin-left: 50px;
            margin-bottom: 50px;
            padding-top: 15px;
        }

            .chart-area .bar-chart .bar-scope .bar-group {
                display: inline-block;
                margin: 0 40px;
                height: 100%;
                position: relative;
                /*max-width: calc(32% - 73px);*/
            }

                .chart-area .bar-chart .bar-scope .bar-group > label {
                    position: absolute;
                    bottom: -50px;
                    left: calc(50% - 30px);
                    color: #525252;
                    font-size: var(--size_15);
                    font-weight: normal;
                    white-space: nowrap;
                    margin-bottom: 0;
                }

                .chart-area .bar-chart .bar-scope .bar-group .bar {
                    position: absolute;
                    bottom: 0;
                    width: 40px;
                    background: #ccc;
                    border-radius: 30px 30px 0px 0px;
                    transition: all 350ms;
                }

                    .chart-area .bar-chart .bar-scope .bar-group .bar span {
                        position: absolute;
                        top: -28px;
                        left: 0;
                        right: 0;
                        width: 100%;
                        text-align: center;
                        color: #969696;
                        font-size: var(--size_18);
                    }

    .chart-area.active .bar-chart:not(.single-color) .bar-scope .bar-group .bar:not(.on) {
        /*filter: grayscale(1) opacity(0.4);*/
        background: #acacac;
    }

    /*--bar-chart style2--*/
    .chart-area .bar-chart.style2 {
        margin-top: 50px;
    }

    .chart-area .bar-chart .bar-panel {
        display: inline-block;
        border-radius: 10px;
        padding: 30px 25px 30px 35px;
        margin: 7px;
    }

        .chart-area .bar-chart .bar-panel:nth-child(1) {
            background: #ECF5F7;
        }

        .chart-area .bar-chart .bar-panel:nth-child(2) {
            background: #FEF7E6;
        }

        .chart-area .bar-chart .bar-panel:nth-child(3) {
            background: #F3F7DE;
        }

        .chart-area .bar-chart .bar-panel .title {
            font-size: var(--size_21);
            font-weight: normal;
            line-height: 1;
            margin-bottom: 26px;
        }

        .chart-area .bar-chart .bar-panel:nth-child(1) .title {
            color: #179BAC;
        }

        .chart-area .bar-chart .bar-panel:nth-child(2) .title {
            color: #FEB13F;
        }

        .chart-area .bar-chart .bar-panel:nth-child(3) .title {
            color: #68B83A;
        }

        .chart-area .bar-chart .bar-panel .bar-panel-inner {
            position: relative;
        }

    /*.chart-area .bar-chart.style2 {
        min-width: 1126px;
    }*/

    .chart-area .bar-chart.style2 .bar-scope {
        margin-bottom: 40px;
        margin-left: 20px;
        margin-right: 10px;
    }

    .chart-area .bar-chart.style2.single-color .bar-scope {
        margin-bottom: 0;
        margin-left: 0;
    }

    .chart-area .bar-chart.style2 .number-scope span:not(:first-child):after {
        border-bottom: none;
    }

    .chart-area .bar-chart.style2 .number-scope span:last-child:after {
        left: 16px;
        border-bottom: 1px solid #BFBFBF;
    }

    .chart-area .bar-chart.style2 .bar-scope .bar-group > label {
        bottom: -40px;
    }

    .chart-area .bar-chart.style2.single-color .bar-scope .bar-group > label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        bottom: -154px;
        left: calc(50% - 40px);
        color: #fff;
        z-index: 2;
    }

        .chart-area .bar-chart.style2.single-color .bar-scope .bar-group > label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: -1;
        }

    .chart-area .bar-chart.style2 .bar-scope .bar-group {
        margin: 0px 20px;
        max-width: initial;
        min-width: 22px;
    }

    .chart-area .bar-chart.style2.single-color .bar-scope .bar-group {
        margin: 0px 35px 150px 35px;
    }

    .chart-area .bar-chart.style2 .bar-scope .bar-group .bar {
        width: 9px;
        border-radius: 5px 5px 0px 0px;
    }

        .chart-area .bar-chart.style2 .bar-scope .bar-group .bar span {
            font-size: var(--size_15);
            left: -6px;
            width: 20px;
        }

        .chart-area .bar-chart.style2 .bar-scope .bar-group .bar label {
            position: absolute;
            left: -2px;
            top: calc(100% + 3px);
            color: #797979;
            font-size: var(--size_12);
            line-height: 1.15;
            margin: 0;
        }

    /*-----line chart------*/
    .chart-area .chart-labelbox.circle ul li:before {
        border-radius: 50%;
    }

    .chart-area .chart-labelbox.circle ul li:nth-child(1):before,
    .chart-area .line-chart .dot-scope .dot-group .dot.color-0 {
        background: #447EC4; /*1.blue*/
        color: #447EC4;
    }

    .chart-area .line-chart .dot-scope .dot-group .line.color-0 svg line {
        stroke: #447EC4;
    }

    .chart-area .chart-labelbox.circle ul li:nth-child(2):before,
    .chart-area .line-chart .dot-scope .dot-group .dot.color-1 {
        background: #FB8D25; /*2.orange*/
        color: #FB8D25;
    }

    .chart-area .line-chart .dot-scope .dot-group .line.color-1 svg line {
        stroke: #FB8D25;
    }

    .chart-area .chart-labelbox.circle ul li:nth-child(3):before,
    .chart-area .line-chart .dot-scope .dot-group .dot.color-2 {
        background: #7ACC1A; /*3.green*/
        color: #7ACC1A;
    }

    .chart-area .line-chart .dot-scope .dot-group .line.color-2 svg line {
        stroke: #7ACC1A;
    }

    .chart-area .line-chart {
        position: relative;
        margin-top: 15px;
        text-align: center;
    }

        .chart-area .line-chart .number-scope span {
            margin-bottom: 26px;
        }

            .chart-area .line-chart .number-scope span:nth-child(2n+1) {
                color: #898989;
            }

        .chart-area .line-chart .dot-scope {
            position: relative;
            margin-bottom: 50px;
            margin-left: 50px;
            padding-top: 15px;
        }

            .chart-area .line-chart .dot-scope .dot-group {
                display: inline-block;
                height: 100%;
                position: relative;
                width: 180px;
            }

                .chart-area .line-chart .dot-scope .dot-group > label {
                    position: absolute;
                    bottom: -50px;
                    width: 70px;
                    left: calc(50% - 30px);
                    color: #525252;
                    font-size: var(--size_15);
                    font-weight: normal;
                    white-space: nowrap;
                    margin-bottom: 0;
                }

                .chart-area .line-chart .dot-scope .dot-group .dot {
                    position: absolute;
                    left: 50%;
                    width: 10px;
                    height: 10px;
                    background: #ccc;
                    border-radius: 50%;
                    transition: all 350ms;
                }

                    .chart-area .line-chart .dot-scope .dot-group .dot span {
                        position: absolute;
                        top: -21px;
                        left: -20px;
                        width: 50px;
                        display: block;
                        text-align: center;
                        /*color: #969696;*/
                        font-size: var(--size_15);
                    }

                .chart-area .line-chart .dot-scope .dot-group .line {
                    position: absolute;
                    width: calc(100% + 5px);
                    left: calc(50% + 5px);
                }

                    .chart-area .line-chart .dot-scope .dot-group .line.reverse {
                        transform: scaleX(-1) translateY(100%);
                    }

                    .chart-area .line-chart .dot-scope .dot-group .line svg {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

    /*note*/
    .chart-area .note {
        text-align: left;
        font-size: var(--size_14);
        color: #939393;
        padding-top: 15px;
        padding-bottom: 5px;
    }

/*--empty--*/
.empty-chart {
    text-align: center;
    padding: 50px;
}

    .empty-chart img {
        width: 320px;
    }

    .empty-chart h5 {
        margin-top: 30px;
        color: #525252;
        font-size: var(--size_24);
        font-weight: 400;
    }

    .empty-chart p {
        color: #797979;
        font-size: var(--size_15);
        font-weight: 400;
    }

/*-----問卷結果------*/
.question-area .title-row {
    height: 48px;
    font-size: var(--size_16);
    line-height: 1;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 9px;
}

.question-area .que-row + .title-row {
    margin-top: 25px;
}

.question-area .title-row h6 {
    color: #fff;
    border-radius: 8px 0 0 8px;
    display: inline-block;
    margin: 0;
    font-weight: 500;
    height: 48px;
    padding: 16px 20px;
    position: relative;
}

    .question-area .title-row h6:before {
        content: '';
        position: absolute;
        top: 22.5px;
        right: -26px;
        width: 26px;
        border-bottom: 1px solid;
    }

    .question-area .title-row h6:after {
        content: '';
        position: absolute;
        top: 20px;
        right: -26px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

.question-area .title-row span {
    font-weight: 500;
    padding-left: 40px;
}

.question-area .que-row {
    background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 9px;
    padding: 34px 50px;
    display: flex;
}

    .question-area .que-row .txt-box {
        flex: 0 0 80%;
        width: 80%;
        padding-right: 30px;
    }

    .question-area .que-row .score-box {
        flex: 0 0 20%;
        width: 20%;
        border-left: 1px solid #EBEBEB;
        padding-left: 20px;
    }

        .question-area .que-row .score-box label {
            display: block;
            font-size: var(--size_16);
            color: #525252;
            font-weight: 400;
            margin: 0.5rem 0;
        }

        .question-area .que-row .score-box .score {
            color: #969696;
            font-size: 74px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            line-height: 1.3;
            white-space: nowrap;
        }

        .question-area .que-row .score-box span {
            font-size: 50px;
            color: #BEBEBE;
            font-weight: 400;
            font-family: 'Poppins', sans-serif;
        }

            .question-area .que-row .score-box span.small {
                font-size: 40px;
            }

    .question-area .que-row h5 {
        color: #525252;
        font-size: var(--size_18);
        font-weight: 500;
        margin-bottom: 15px;
    }

    .question-area .que-row ul {
        margin-bottom: -12px;
        list-style: none;
        width: 58%;
    }

        .question-area .que-row ul li {
            font-size: var(--size_15);
            color: #525252;
            margin-bottom: 12px;
            position: relative;
        }

            .question-area .que-row ul li.check:before {
                content: '✔';
                position: absolute;
                left: -20px;
                top: -2px;
                transform: rotate(14deg);
                font-weight: 600;
                font-size: var(--size_19);
            }

    .question-area .que-row .bar {
        position: absolute;
        top: 0;
        left: 110%;
        width: 60%;
    }

        .question-area .que-row .bar span {
            background: #ccc;
            border-radius: 0 10px 10px 0px;
            display: inline-block;
            height: 25px;
        }

        .question-area .que-row .bar label {
            margin-left: calc(100% + 3px);
        }

/*--blue--*/
.question-area.color-blue .title-row {
    background-color: #E2EDF1;
    color: var(--main_blue);
}

    .question-area.color-blue .title-row h6 {
        background: transparent linear-gradient(257deg, #1AABB5 0%, #32BD9E 100%) 0% 0% no-repeat padding-box;
    }

        .question-area.color-blue .title-row h6:before {
            border-bottom-color: var(--main_blue);
        }

        .question-area.color-blue .title-row h6:after {
            background-color: var(--main_blue);
        }

.question-area.color-blue .que-row ul li.check {
    color: var(--main_blue);
}

.question-area.color-blue .que-row .bar span {
    background: #65C8CD;
}

.question-area.color-blue .que-row li.check .bar span {
    background: var(--main_blue);
}

/*--orange--*/
.question-area.color-orange .title-row {
    background-color: #FEF7E6;
    color: var(--main_orange);
}

    .question-area.color-orange .title-row h6 {
        background: transparent linear-gradient(255deg, #F5804B 0%, #F99425 100%) 0% 0% no-repeat padding-box;
    }

        .question-area.color-orange .title-row h6:before {
            border-bottom-color: var(--main_orange)
        }

        .question-area.color-orange .title-row h6:after {
            background-color: var(--main_orange)
        }

.question-area.color-orange .que-row ul li.check {
    color: var(--main_orange);
}

.question-area.color-orange .que-row .bar span {
    background: #FFE4D5;
}

.question-area.color-orange .que-row li.check .bar span {
    background: var(--main_orange);
}

/*--green--*/
.question-area.color-green .title-row {
    background-color: #E5EDDC;
    color: var(--main_green);
}

    .question-area.color-green .title-row h6 {
        background: transparent linear-gradient(128deg, #7CCA2F 0%, #6BB643 100%) 0% 0% no-repeat padding-box;
    }

        .question-area.color-green .title-row h6:before {
            border-bottom-color: var(--main_green)
        }

        .question-area.color-green .title-row h6:after {
            background-color: var(--main_green)
        }

.question-area.color-green .que-row ul li.check {
    color: var(--main_green);
}

.question-area.color-green .que-row .bar span {
    background: #D2EDB2;
}

.question-area.color-green .que-row li.check .bar span {
    background: var(--main_green);
}

/*------------modal------------*/
.modal-btn-close.close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--main_blue);
    padding: 2px 7px;
    color: #DCF2EB;
    text-shadow: none;
    opacity: 1;
    z-index: 1;
}

.modal-content {
    border: none;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0;
}

.modal .page-header {
    border-bottom: none;
}

.modal-body {
    padding: 2rem 3.2rem 1.8rem 3.2rem;
}

.modal .form-group .col-md-1 {
    -ms-flex: 0 0 12%;
    flex: 0 0 12%;
    max-width: 12%;
}

.modal .form-group .col-md-11 {
    -ms-flex: 0 0 88%;
    flex: 0 0 88%;
    max-width: 88%;
}