.wrapper {
    height: 100%;
}
.container {
    width: 1110px;
    margin: 0 auto;
}

/* ==================================================================== */
/*头部样式*/
.navbar {
    display: flex;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
}
.navbar .container {
    display: flex;
}
.navbar .container .logo {
    height: 50px;
}
.navbar-bg {
    background-color: #37496d;
}
.navbar-brand {
    display: inline-block;
    font-size: 0.18rem;
    color: #fff;
    margin-right: 0.15rem;
}
.navbar-collapse {
    display: flex;
    width: 100%;
}
.navbar-nav {
    display: flex;
    color: #9B9B9B;
}
.navbar-nav li {
    padding: 0 0.1rem;
}
.nav-link {
    color: #9B9B9B;
}
.nav-link:hover {
    color: #fff;
}
.nav-link.active {
    color: #fff;
}
/* 个人信息 */
.header .header-userinfo {
    padding: 0 0.37rem !important;
    background-color: #415478;
}
.header .header-userinfo .dropdown-toggle {
    color: #9B9B9B;
}
.header .header-userinfo .dropdown-menu {
    right: 0;
    padding: 20px;
}
.header .header-userinfo:hover {
    background-color: #FFFFFF;
}
.header .header-userinfo:hover .dropdown-toggle {
    color: #1890FF;
}
.header .header-userinfo .user-progress {
    padding: 0.05rem 0.1rem 0;
    box-sizing: border-box;
}
.header .header-userinfo .user-progress .progress {
    height: 0.06rem;
}
.header .header-userinfo .user-progress .detail {
    font-size: 0.12rem;
    text-align: left;
}
/* ==================================================================== */

/*主体样式*/
.container-fluid {
    width: 100%;
    display: flex;
}
.content-header {
    height: 0.8rem;
    display: flex;
    align-items: center;
}
.content-title {
    font-family: 'Tahoma-Bold';
    font-size: 0.24rem;
    color: #333333;
    margin: 0;
}
.content-list {
    display: flex;
}
.content-list li.content-search {
    width: 3rem;
}
.content-list li + li {
    margin-left: 0.12rem;
}
.content {
    background: #FFFFFF;
    box-shadow: 0px 0px 0px rgba(193,203,214,1);
}

/* ===================================================================== */
/* 个人信息样式:1 */
.content-profile {
    display: flex;
    flex-direction: wrap;
    margin-bottom: 0.1rem;
    align-items: center;
    padding-left: 1rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    color: #646464;
}
.content-profile > :not(:first-child) {
    padding-left: 0.25rem;
}
.content-profile .content-h {
    margin: 0;
    font-family: "Tahoma-Bold";
    font-size: 0.14rem;
}
.content-profile .content-p {
    margin: 0;
    margin-left: 0.09rem;
    color: #646464;
}
.content-profile-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.18rem;
}
.content-profile-list li {
    display: flex;
    padding: 0 0.12rem;
}
.content-profile-list li:not(:last-child) {
    border-right: 1px solid #DFE1E8;
}
.content-profile-list li:first-child {
    padding-left: 0;
}
.content-profile .img-profile {
    width: 0.7rem;
    height: 0.7rem;
}
/* 个人信息样式:2 */
.content-profile2 {
    display: flex;
    flex-direction: column;
    width: 1.83rem;
    /* height: 3.08rem; */
    box-sizing: border-box;
    padding: 0.23rem 0 0.32rem;
    background-color: #FFFFFF;
    border-radius: 0.04rem;
    box-shadow: 0px 0px 0px rgba(193,203,214,0.35);
}
.content-profile2 .profile-img {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 auto 0.3rem;
}
.content-profile2 .profile-detail {
    padding-left: 0.28rem;
}
.content-profile2 .profile-detail li {
    /*  */
}
.content-profile2 .profile-detail li+li {
    margin-top: 0.10rem;
}
.content-profile2 .profile-detail .profile-detail-title {
    font-family: "Tahoma-Bold";
    font-size: 0.14rem;
    font-weight: bold;
    color: #333333;
    margin: 0;
}
.content-profile2 .profile-detail .profile-detail-content {
    font-size: 0.14rem;
    color: #646464;
    margin: 0;
    word-break: break-all;
}
/* ==================================================================== */

.content-ass {
    display: flex;
    flex-direction: column;
    padding: 0.26rem 0.7rem;
}
.content-ass .table-none td, .content-ass .table-none th {
    padding: 0.15rem 0 0.15rem 0.1rem;
}
.content-ass .table-none h5 {
    font-weight: bold;
    font-family: 'Tahoma-Bold';
    font-size: 0.14rem;
    margin: 0;
}
.content-ass .table-none p {
    margin: 0;
    font-size: 0.14rem;
    margin-top: 0.08rem;
}
.content-ass .img-profile {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 auto 0.06rem;
}
.content-ass .table-none {
    margin-top: 0.2rem;
}
.content-ass .content-name {
    margin: 0;
}
.content-analysis {
    margin-top: 0.2rem;
}
.content-chart {
    margin-top: 0.15rem;
    display: flex;
    justify-content: center;
    padding: 0.22rem 0.38rem 0.34rem 1rem;
}
.content-chart-canvas {
    text-align: center;
    flex: 1;
}
.content-chart-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content-chart-img p {
    margin: 0;
    font-size: 0.16rem;
    color: #646464;
    margin-top: 0.2rem;
    text-align: center;
}
.content-chart-img .img-fluid {
    border: 1px solid #F1F5F9;
}
.content-chart-canvas .btn + .btn {
    margin-left: 0.05rem;
}
.content-review {
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
}

.table .content-h, .table-none .content-h {
    display: inline-block;
    min-width: 0.8rem;
    text-align: right;
}
.content-align {
    vertical-align: top;
}
.table .content-p, .table-none .content-p {
    display: inline-block;
    margin-top: 0 !important;
    margin-left: 0.06rem !important;
}
.divide {
    color: #DFE1E8;
}

.box-footer {
    padding: 0.2rem 0;
}


/*登录*/
.login {
    margin: auto;
    margin-top: 1rem;
    background-color: #FFF;
    color: #7A7A7A;
}
.login-A {
    width: 4rem;
    margin-bottom: 1rem;
}
.login-B {
    width: 8rem;
    margin-bottom: 1rem;
}
.login-A .login-container {
    padding: 0 0.5rem;
}
.login-B .login-container {
    padding: 0 2.15rem;
}
.login-header {
    padding: 0.5rem 0 0.35rem;
}
.login-footer {
    padding: 0.14rem 0 0.7rem;
    font-size: 0.16rem !important;
}
.login-title {
    font-family: 'Tahoma-Bold';
    font-size: 0.3rem;
    color: #303030;
    margin: 0;
}
.login-footer > .btn:not(:first-child) {
    margin-left: 0.2rem;
}
.login-footer p {
    margin: 0;
    margin-top: 0.2rem;
}
.register {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    text-align: center;
}
.register p {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    color: #646464;
}
.register a {
    color: #4DA1FF;
}
.empty {
    padding: 2rem 0;
    text-align: center;
}
.empty p {
    margin: 0;
    margin-top: 0.2rem;
    color: #AEBCD2;
}
.picture {
    border: 1px solid #E9F3F9;
    margin-left: 0.08rem;
    width: 3.2rem;
}
.empty-picture {
    padding: 0.86rem 0.48rem;
    background-color: #E9F3F9;
}
.td-offset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.td-offset .btn {
    width: 1.5rem;
    margin-top: 0.19rem;
}
.review {
    display: flex;
    padding: 0.4rem 0.2rem 0.1rem;
}
.review .review-canvas {
    /*border: 1px solid #1890FF;*/
    /* margin-right: 1rem; */
}
.review .review-error {
    display: flex;
    flex-direction: column;
    /* margin: auto; */
    flex: 1;
    justify-content: center;
    align-items: center;
}
.review .review-error p {
    margin: 0;
    color: #333333;
    font-size: 0.16rem;
    text-align: left;
    width: 100%;
    margin-left: 0.6rem;
}
.review .review-error p + p {
    margin-top: 0.2rem;
}
.review .review-error p:before {
    float: left;
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    /* margin-top: 0.05rem; */
    margin-right: 0.08rem;
    background-image: url('../img/icon/error_2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.review .review-box {
    position: relative;
}
.review .review-box .box-header {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0.04rem;
}
.animate-control {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.3rem 0.3rem;
}
.animate-control li + li {
    margin-left: 0.09rem;
}
.animate-control li:last-child {
    margin-left: 0.23rem;
}
.animate-control-left {
    justify-content: flex-start;
    padding-left: 0.5rem;
}
.remake {
    /* margin-top: 0.28rem; */
}
.remake-header {
    margin: 0.1rem 0 0.2rem;
}
.remake-title {
    margin: 0;
    font-size: 0.14rem;
    color: #646464;
    font-weight: normal;
}
.remake .left {
    padding-top: 0.15rem;
}
.remake .remake-body {
    display: flex;
    justify-content: space-between;
    min-height: 5.1rem;
}
.remake .center {
    display: flex;
    justify-content: center;
    min-height: 5.1rem;
}
.remake .title {
    margin: 0;
    font-size: 0.14rem;
    font-family: "Tahoma-Bold";
    color: #3D3D3D;
    font-weight: bold;
}
.remake .title small {
    font-size: 0.12rem;
    font-family: "Tahoma";
    color: #777777;
    font-weight: normal;
    margin-left: 0.05rem;
}
.remake .btn-box {
    margin: 0.18rem 0 0.16rem;
    display: flex;
    flex-wrap: wrap;
}
.remake .btn-box .btn {
    margin-right: 0.09rem;
    margin-bottom: 0.14rem;
    min-width: 0.72rem;
}
.remake-choose {
    background-color: rgba(255,77,77,0.4);
    position: absolute;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}
.remake-choose-i {
    width: 0.16rem;
    height: 0.16rem;
    background-color: #FF4D4D;
    border-radius: 50%;
    color: white;
    text-align: center;
    z-index: 1;
}
.canvas-container {
    position: relative;
}
.letters-out-container .btn {
    position: relative;
}
.letters-out-container .btn:after {
    content: "";
    display: block;
    background-color: #FF4D4D;
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    position: absolute;
    right: -0.08rem;
    top: -0.08rem;
}
.letters-out-container .btn:before {
    content: "";
    display: block;
    border-top: 2px solid #FFFFFF;
    width: 0.08rem;
    height: 0.01rem;
    position: absolute;
    right: -0.04rem;
    z-index: 1;
    top: -0.01rem;
}
.refresh {
    display: inline-block;
    position: relative;
    top: 0.02rem;
    width: 0.2rem;
    height: 0.2rem;
    margin-left: 0.06rem;
    background-image: url('../img/icon/remake-refresh.png');
    background-repeat: no-repeat;
    background-position: bottom;
    cursor: pointer;
}
.refresh-active {
    cursor: pointer;
    background-image: url('../img/icon/refresh_2x.png');
}
.banner {
    width: 100%;
    height: 100%;
    /* height: 5.6rem; */
    background-image: url('../img/banner/banner-logo.png');
    background-repeat: no-repeat;
    background-position: top center;
}
.banner-a {
    width: 100%;
    height: 100%;
    /* height: 5.6rem; */
    background-repeat: no-repeat;
    background-position: top center;
}
.content-profile-analysis {
    margin-top: 0.2rem;
    padding-left: 0.5rem;
}

.chart-table-section {
    margin: 0.2rem auto 1rem;
    max-width: 9rem;
}
.offset-canvas-container {
    display: inline-block;
    position: relative;
    text-align: center;
}
.modal-offset .modal-body {
    display: flex;
}
.modal-offset .modal-body .left {
    margin-top: 0.15rem;
}
.modal-offset .modal-body .left .title {
    font-family: "Tahoma-Bold";
    font-size: 0.14rem;
    font-color: FF3D3D3D;
}
.modal-offset .offset-control {
    margin-top: 0.23rem;
}
.modal-offset .offset-control .btn {
    margin-bottom: 0.2rem;
    width: 0.1rem;
    height: 0.34rem;
    text-align: left;
    line-height: 0.34rem;
}
.btn-offset-y-l {
    background-image: url('../img/icon/offset-y-l.png');
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
}
.btn-offset-y-s {
    background-image: url('../img/icon/offset-y-s.png');
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
}
.btn-offset-x-l {
    background-image: url('../img/icon/offset-x-l.png');
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
}
.btn-offset-x-s {
    background-image: url('../img/icon/offset-x-s.png');
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
}
.modal-offset .modal-body .right {
    flex: 1;
    text-align: center;
}
.modal-offset .modal-body .right .alert {
    font-size: 0.14rem;
    /* text-align: center; */
    margin: 0;
}
.modal-offset .canvas-bg {
    position: absolute;
    left: 0;
    top: 0;
}
.modal-offset .hidden {
    display: none !important;
}
.modal-offset .wait {
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal-offset .wait img {
    width: 0.44rem;
    height: 0.44rem;
}
.modal-offset .wait p {
    color: #FFA4A3A3;
    margin: 0.26rem 0 0 0;
}
.modal-offset .modal-footer .btn {
    z-index: 1000;
}

/* ==================================================================== */
/* analysis页面 */
.content-analysis {
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    display: flex;
}
.content-analysis > div+div {
    margin-left: 0.14rem;
}
.content-analysis .extend-operation {
    margin-top: 0.11rem;
}
.content-analysis .extend-operation .btn+.btn {
    margin-top: 0.1rem;
}
.icon {
    width: 0.25rem;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.18rem;
    margin-right: 0.26rem;
    min-height: 0.25rem;
}
.icon:after {
    content: '|';
    height: 100%;
    font-style: normal;
    color: rgba(108,162,220,0.56);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.37rem;
}
.icon-speed {
    background-image: url('/fontstage/img/icon/analysis-speed.png');
}
.icon-size {
    background-image: url('../img/icon/analysis-size.png');
}
.icon-download {
    background-image: url('../img/icon/analysis-download.png');
}
.icon-reallocate {
    background-image: url('../img/icon/analysis-reallocate.png');
}
.content-analysis .right {
    width: 100%;
}
.analysis-canvas {
    padding-top: 0.14rem;
    padding-bottom: 0.3rem;
}
.analysis-canvas .canvas-box {
    text-align: center;
    margin-top: 0.13rem;
}
.analysis-canvas .canvas-control {
    text-align: center;
}

.analysis-comparison {
    width: 100%;
    background-color: #F5F8FB;
    margin-bottom: 0.4rem;
}
.analysis-comparison .comparison-table {
    margin-top: 0.14rem;
    background-color: #FFFFFF;
    padding-bottom: 0.2rem;
}
.analysis-comparison .comparison-table .comparison-title {
    padding: 0.24rem 0 0.1rem 0.3rem;
    color: #333333;
    font-size: 0.2rem;
    font-weight: normal;
}
.analysis-description {
    padding: 0.1rem 0.2rem;
    line-height: 30px;
    font-size: 0.16rem;
    background: #fff7da;
}

.analysis-result {
    padding: 0.1rem 0.2rem;
    line-height: 30px;
    font-size: 0.16rem;
}

.analysis-result .title {
    font-weight: bold;
}

.analysis-result .resultContent {
    white-space: pre-wrap;
    margin-left: 2em;
}

.analysis-result textarea {
    width: calc(100% - 2em);
    line-height: 30px;
    font-size: 0.16rem;
    font-family: Tahoma;
    margin-left: 2em;
    display: none;
}

.analysis-assessor {
    padding: 0.1rem 0.2rem 0.5rem 0.2rem;
    line-height: 30px;
    font-size: 0.16rem;
}

.analysis-description .title {
    font-weight: bold;
}
.analysis-description .contents p {
    text-indent: 2em;
}

.analysis-description .contents ol {
    margin-left: 2em;
    margin-top: 0;
    margin-bottom: 0;
    list-style: disc;
}
.analysis-description .contents ol li {
    text-indent: 0;
}
/* ==================================================================== */

/* ==================================================================== */
/* export页面 */
.export-download {
    display: flex;
    justify-content: flex-end;
}
/* ==================================================================== */

/* ==================================================================== */
/* 图表样式 */
/* 1. 总样式 */
.chart {
    width: 100%;
    background-color: #F5F8FB;
    /* margin-bottom: 0.6rem; */
}
.chart .chart-container {
    background-color: #FFFFFF;
    box-shadow:0px 0px 0px rgba(193,203,214,0.35);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-bottom: 0.2rem;
    position: relative;
    min-height: 5.8rem;
}
.chart .chart-table {
    width: 98%;
    position: absolute;
    left: 0;
    top: 0.7rem;
}
.chart .chart-table-sample {
    width: 95%;
    left: 0.3rem;
}
.chart .chart-table-out {
    width: 98%;
    position: absolute;
    left: 0;
    top: 0.7rem;
}
/* 2. 表单样式 */
.table-chart {
    /*  */
}
.table-chart tbody {
    /* border: 1px solid #E0DEE2; */
}
.table-chart tr {
    background-color: transparent !important;
    height: auto;
}
.table-chart td {
    border: 1px dashed rgba(199,199,200,0.49);
    text-align: center;
    font-size: 0.12rem;
    padding-top: 0.09rem;
    padding-bottom: 0.1rem;
    min-width: 0.8rem;
}
.table-chart .table-title {
    color: #333333;
    font-family: "Tahoma-Bold";
    font-weight: bold;
}
.table-chart .table-border-none {
    border: none !important;
    border-right: 1px solid #E0DEE2;
    background-color: #FFFFFF!important;
    padding-left: 0.1rem;
    padding-right: 0.08rem;
    box-sizing: border-box;
}
.table-chart tbody td:last-child {
    border-right: 1px solid #E0DEE2;
}
.table-chart tbody td:first-child {
    border-left: 1px solid #E0DEE2;
}
.table-chart tbody tr:first-child td {
    border: 1px solid #E0DEE2;
    background-color: #FBFBFB;
    color: #333333;
    font-size: 0.14rem;
}
.table-chart tbody tr:last-child td {
    border-bottom: 1px solid #E0DEE2;
}
.table-chart .table-border-left {
    border-left: 1px solid #E0DEE2;
}
.table-chart td button {
    width: 30px;
}
/* 3. 提示语样式 */
.chart .chart-tip {
    display: flex;
    position: absolute;
    right: 0.26rem;
    top: 0.32rem;
    color: #728FAF;
    font-size: 0.12rem;
    cursor: pointer;
}
.chart .chart-tip .chart-tip-info {
    margin-left: 0.25rem;
    position: relative;
}
.chart .chart-tip .chart-tip-info:before {
    float: left;
    content: '';
    width: 0.18rem;
    height: 0.18rem;
    margin-right: 0.04rem;
    background-image: url('../img/icon/question-1.png');
    background-repeat: no-repeat;
}
.chart .chart-tip .chart-tip-info .tip {
    display: none;
    position: absolute;
    top: 0.3rem;
    left: -60%;
    border: 1px solid #C1CFDF;
    box-shadow:0px 0px 0px 0px rgba(193,203,214,0.24);
    border-radius: 0.04rem;
    padding: 0.05rem 0.1rem;
    width: 1.5rem;
    background-color: white;
    font-size: 0.12rem;
    font-style: normal;
    color: #616161;
}
.chart .chart-tip .chart-tip-info .tip:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 40%;
    top: -12px;
    border-width: 6px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #C1CFDF transparent;
    font-size: 0;
    line-height: 0;
}
.chart .chart-tip .chart-tip-info .tip:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 40%;
    top: -10px;
    border-width: 6px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #FFF transparent;
    font-size: 0;
    line-height: 0;
}
.chart .chart-tip .chart-tip-info:hover .tip {
    display: block;
}
.chart .chart-tip .chart-tip-label {
    display: flex;
}
.chart .chart-tip .chart-tip-label span {
    font-size: 0.12rem;
    color: #333333;
}
.chart .chart-tip .chart-tip-label span+span {
    margin-left: 0.17rem;
}
.chart .chart-tip .chart-tip-label span:before {
    content: '';
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    margin-right: 0.04rem;
}
.chart .chart-tip .chart-tip-label span.green:before {
    background-color: #16A741;
}
.chart .chart-tip .chart-tip-label span.orange:before {
    background-color: #ff8808;
}
.chart .chart-tip .chart-tip-label span.red:before {
    background-color: #FF3636;
}
/* ==================================================================== */