@font-face {
    font-family: 'Comfortaa';   
    src: url('../fonts/Comfortaa-Light-3.ttf');
}
@font-face {
    font-family: 'NotoSerifSC';   
    src: url('../fonts/NotoSerifSC-Light.otf');
}
@font-face {
    font-family: 'HP simplified hans light';   
    src: url('../fonts/HPSimplifiedHansLight.ttf');
}
@font-face {
    font-family: "Speak Pro";   
    src: url('../fonts/SpeakPro.ttf');
}
@font-face {font-family: "Daytona Light";
    src: url("../fonts/79a8e1bc16f1c88fe653585925532284.eot"); /* IE9*/
    src: url("../fonts/79a8e1bc16f1c88fe653585925532284.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/79a8e1bc16f1c88fe653585925532284.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/79a8e1bc16f1c88fe653585925532284.woff") format("woff"), /* chrome、firefox */
    url("../fonts/79a8e1bc16f1c88fe653585925532284.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/79a8e1bc16f1c88fe653585925532284.svg#Daytona W01 Light") format("svg"); /* iOS 4.1- */
}
@font-face {font-family: "Grandview";
    src: url("../fonts/19b0aa5ed817d809d39005be2a36f235.eot"); /* IE9*/
    src: url("../fonts/19b0aa5ed817d809d39005be2a36f235.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/19b0aa5ed817d809d39005be2a36f235.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/19b0aa5ed817d809d39005be2a36f235.woff") format("woff"), /* chrome、firefox */
    url("../fonts/19b0aa5ed817d809d39005be2a36f235.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/19b0aa5ed817d809d39005be2a36f235.svg#Grandview") format("svg"); /* iOS 4.1- */
}
@font-face {font-family: "Grandview Bold";
    src: url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.eot"); /* IE9*/
    src: url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.woff") format("woff"), /* chrome、firefox */
    url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/67609fc22c2b5a7fc13a4e4e82ef5679.svg#Grandview Bold") format("svg"); /* iOS 4.1- */
}
@font-face {font-family: "Sitka Display";
    src: url("9eb5b7e8afb18f98b00594b9e758b378.eot"); /* IE9*/
    src: url("9eb5b7e8afb18f98b00594b9e758b378.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("9eb5b7e8afb18f98b00594b9e758b378.woff2") format("woff2"), /* chrome、firefox */
    url("9eb5b7e8afb18f98b00594b9e758b378.woff") format("woff"), /* chrome、firefox */
    url("9eb5b7e8afb18f98b00594b9e758b378.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("9eb5b7e8afb18f98b00594b9e758b378.svg#Sitka Display") format("svg"); /* iOS 4.1- */
}
@font-face {font-family: "Comfortaa Bold";
    src: url("1e774fab62bd6acf2ac7a7079b3fc57f.eot"); /* IE9*/
    src: url("1e774fab62bd6acf2ac7a7079b3fc57f.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("1e774fab62bd6acf2ac7a7079b3fc57f.woff2") format("woff2"), /* chrome、firefox */
    url("1e774fab62bd6acf2ac7a7079b3fc57f.woff") format("woff"), /* chrome、firefox */
    url("1e774fab62bd6acf2ac7a7079b3fc57f.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("1e774fab62bd6acf2ac7a7079b3fc57f.svg#Comfortaa Bold") format("svg"); /* iOS 4.1- */
  }
body{
    color: #000;
    font-size: 14px;
    font-family: "Daytona Light", "HP simplified hans light", "Helvetica", sans-serif;
    min-height: 100vh;

}
body{
    min-width: 1200px;
}
body.user-com_assign{
	min-width:450px;
}

.font-grandview{
    font-family: "Grandview", "Microsoft YaHei", "Helvetica", sans-serif;
}
.font-sitka{
    font-family: "Sitka Display", "HP simplified hans light", "Helvetica", sans-serif;
}
.font-daytona{
    font-family: "Daytona Light", "HP simplified hans light", "Helvetica", sans-serif;
}
.font-speak{
    font-family: "Speak Pro", "Helvetica", sans-serif;
}

.nav-menu li a{
    font-family: "Daytona Light", "HP simplified hans", "Helvetica", sans-serif;
}
button, .btn{
    font-family: "Daytona Light", "HP simplified hans", "Helvetica", sans-serif;
}

@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }
}
h1, h2, h3 {
    font-weight: bold;
}
p {
    font-size: 18px;
    line-height: 25px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size: 12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 12px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 12px;
}
.login-main{
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    width: 920px;
    margin: 50px auto;
    position: relative;
    z-index: 3;
}
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    max-width: 800px;
    margin: 25px auto;
}
#progressbar li {
    list-style-type: none;
    width: 33.33%;
    float: left;
    position: relative;
    letter-spacing: 1px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #BDCBD6;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #BDCBD6;
    background: #fff;
    border: 2px solid #BDCBD6;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}
#progressbar li:after {
    content: '';
    width: 86%;
    height: 2px;
    background: #BDCBD6;
    position: absolute;
    left: -43%;
    top: 14px;
    z-index: 1;
}
#progressbar li.active{
    color: #30C4AB;
}
#progressbar li.active:before, #progressbar li.active:after {
    background: #30C4AB;
    border-color: #30C4AB;
    color: #fff;
}
#progressbar li:first-child:after {
    content: none;
}
.form-panel{
    max-width: 840px;
    margin: 0 auto;
}
label {
    /* font-weight: bold; */
}
.form-group {
    margin-bottom: 4px;
}
.btn-danger{
    border-radius: 30px;
}
.form-control{
    height: 30px;
    border-color: #999;
    padding: 2px 8px;
    font-size: 14px;
}
.form-control:focus{
    border-color:#17A6CA;

}
.btn-primary{
    background: #17A6CA;
    font-size: 16px;
    min-width: 150px;
    height: 40px;
    border-color: #17A6CA;
    border-radius: 30px;
    font-family: "Daytona Light";
}
#register-form .step2, #register-form .step3{
    display: none;
    max-width: 550px;
    margin: 15px auto;
}
.radio label,
.radio label{
    margin-right: 15px;
}
.help-block{
    font-size: 12px;
    color: #C80000;
    margin-top: 5px;
    display: none;
    font-style: italic;
}

.login2-main{
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    width: 1000px;
    margin: 40px auto;
    padding-top: 0;
    padding-bottom: 0;
}
.login-bg{
    height: 600px;    
    background: url(../img/loginbg.png) no-repeat;
    background-size: cover;
}

.login2-main h2{
    font-size: 30px;
    margin-top: 60px;
    color: #2D5D80;
}
.login2-main #login-form{
    padding-left: 40px;
}

.user-header{
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 50px;
}
.user-header::before{
    content: "";
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 100%;    
}
.brand-logo{
    padding-top: 15px;
}
.brand-logo img{
    max-width: 100px;
    max-height: 100px;
}
.brand-card{
    width: 290px;
    position: absolute;
    background: #406B8A;
    height: 135px;
    top: 75px;
    z-index: 1;
    padding-left: 20px;
    padding-top: 60px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    border-radius: 5px;
}

main.content{
    padding-top: 1px;
    margin-top: -1px;
}
.header-menu{
    position: fixed;
    height: 50px;
    background: #fff;
    z-index: 999;
}
.nav-menu{
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    right: 0;
}
.nav-menu li{
    display:inline-block;
    list-style: none;
    padding: 10px 10px;
}

.nav-menu li a{
    color: #000;
    font-size: 16px;
}
.nav-menu li a:hover{
    text-decoration: underline;
}
.nav-menu li.active{
    /* background: #fff; */
}
.nav-menu li.active a{
    color: #2D5D80;
}
.menu{
    position: relative;
}
.com-info{
    background: #fff;
    border: 1px solid #eee;
    border-top: 0;
    border-radius: 0px 0px 5px 5px;
    margin-bottom: 50px;
}
.com-info p{
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 23px;
    text-overflow: ellipsis;
}
.user-detail .com-info{
    margin-bottom: 20px; 
}
.no-margin{
    margin: 0;
}
.btn-invite{
    width: 160px;
    position: relative;
    height: 50px;
    background: #17A6CA;
    border-radius: 35px;
    border: 0;
    margin-bottom: 20px;
}
.inv-icon{
    display: inline-block;
    width: 45px;
    height: 42px;
    color: #fff;
    font-size: 25px;
    line-height: 45px;
    position: absolute;
    left: 0;
    background: #285372;
    border-radius: 5px 0 0 5px;
}
.btn-invite div{
    display: inline-block;
    color: #fff;
    font-size: 22px;
    line-height: 18px;
    text-align: center;
}
.btn-invite div span{
    font-size: 14px;
}
.btn-disconnect{
    margin-left: 15px;
    background: #17A6CA;
    color: #fff;
    border: 0;
    font-size: 22px;
    height: 50px;
    width: 160px;
    border-radius: 35px;
}

.dash-cards {
    /* margin-top: 20px; */
    margin-left: 0;
    margin-right: 0;
    /* background: #eee; */
}
.dash-cards.card-cos{
    background: #fff;
}
.dash-cards.cards-header{
    background: #fff;
}
.dash-content{
    /* min-height: 540px; */
}
.dash-cards .col{
    padding: 0;    
    border-top: 0;
    border-bottom: 0;
}
.dash-cards .col.card-me,
.dash-cards-bottom .col.card-me{
    
}
.dash-cards .dash-card{    
    border-bottom: 2px solid #333;
}
.dash-cards .dash-card .dash-header{
    height: 80px;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 60px;
    color: #239CBD;
    text-align: center;
}
.dash-cards .dash-card .dash-content{
    border: 1px solid #DFE2E7;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 5px 0 #DFE2E7; 
    padding: 15px 0;
    background: #fff;
}
.card-me .dash-card .dash-content{
    border-color: #BFBFBF;
}

.dash-cards .col.card-me{
    position: relative;
    border-width: 0 2px 0 2px;
    border-color: #ccc;
    border-style: solid;
    border-radius: 0;
}
.dash-cards.cards-header .col{
    position: relative;
    border-width: 2px 0 0 0;
    border-color: #fff;
    border-style: solid;
    border-radius: 30px 30px 0 0;
}
.dash-cards.cards-header .col.card-me{
    border-width: 2px 2px 0 2px;
    border-color: #ccc;
}

.dash-header .com-score{
    position: absolute;
    top: 0;
    right: 50px;
}
.dash-header .com-score span{
    border-color: #fff;
    color: #fff;
}
.com-item{
    position: relative;
}
.dash-cards-bottom{
    margin-left: 0;
    margin-right: 0;
    min-width: 1170px;
    margin-bottom: 50px;
}
.dash-cards-bottom .col{
    min-height: 15px;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: #fff;
    min-height: 30px;
}
.dash-cards-bottom .col.card-me{
    border-width: 0 2px 2px 2px;
    border-color: #ccc;
    border-style: solid;
    border-radius: 0 0 30px 30px;
}
.dash-cards-assigned.card-cos{
    /* border-bottom: 1px solid #333; */
    /* margin-bottom: 20px; */
}
/* .dash-cards-assigned.card-cos::after{
    content: "";
    display: block;
    height: 1px;
    width: 80%;
    margin: 2px auto 0 auto;
    border-bottom: 1px solid #333;
    position: absolute;
    margin-left: 10%;
    bottom: -4px;
    z-index: 999;
}
.dash-cards-assigned.card-cos::before{
    content: "";
    display: block;
    height: 1px;
    width: 50%;
    margin: 2px auto 0 auto;
    border-bottom: 1px solid #333;
    position: absolute;
    margin-left: 25%;
    bottom: -8px;
    z-index: 999;
} */
.com-score span{
    display: inline-block;
    border: 1px solid #2D5D80;
    width: 30px;
    height: 25px;
    line-height: 23px;
    text-align: center;
    font-size: 13px;
    color: #2D5D80;
    position: relative;
}
.com-score .score1{
    border-radius: 3px 0 0 3px;
    border-right: 0;
}
.com-score .score2{
    margin-left: -4px;
}
.com-score .score3{
    border-radius: 0 3px 3px 0;
    border-left: 0;
    margin-left: -4px;
}
.com-score span sup{
    display: block;
    position: absolute;
    color: #fff;
    background: #2D5D80;
    width: 15px;
    height: 15px;
    line-height: 16px;
    border-radius: 8px;
    right: 0;
    top: -10px;
}
.notice{
    margin-top: 5px;
    color: #333;
    font-size: 12px;
}
.com-name{
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    display: inline-block;
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
}
.com-btn{
    position: absolute;
    right: 0;
    top: 17px;
}
.com-btn .btn{
    color: #2D5D80;
    font-weight: bold;
    padding: 7px 6px;
}
.auto-complate{
    position: relative;
}
.search-list{
    position: absolute;
    width: 440px;
    background: #fff;
    z-index: 99;
    top: 34px;
    border: 1px solid #ccc;
    padding: 10px;
    display: none;
}
.auto-item{
    cursor: pointer;    
}
input::input-placeholder{color:  #ccc !important;} 
::-webkit-input-placeholder { /* WebKit browsers */ 
color: #ccc !important; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #ccc !important; 
} 
::-moz-placeholder { /* Mozilla Firefox 19  */ 
color: #ccc !important; 
} 
:-ms-input-placeholder { /* Internet Explorer 10  */ 
color: #ccc !important; 
}
.footer{
    background-color: #153C58;
    color: #fff;
    height: 100px;
    z-index: 3;
    position: relative;
}
.last-step1{
    display: none;
}
#q-other{
    display: none;
}
.radio label{
    font-weight: normal;
}
.message-box{
    margin-left: -50%;
}
.message-box.show{
    margin-left: 0;
    animation: showmsg 2s;
}
.message-box.hide{
    margin-left: -50%;
    animation: hidemsg 2s;
}
@keyframes showmsg
{
    from {margin-left: -50%;}
    to {margin-left: 0;}
}
@keyframes hidemsg
{
    from {margin-left: 0;}
    to {margin-left: -50%;}
}

.message-box{
    width: 50%;
    position: fixed;
    bottom: 0;
    height: 600px;
    background: #fff;
    z-index: 10001;
    box-shadow: 3px 0 3px 0 #ccc;
}
.message-icon{
    position: absolute;
    right: -90px;
    width: 90px;
    height: 60px;
    top: 0;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    background: #17A6CA;
    color: #fff;
    cursor: pointer;
    font-size: 50px;
}
.msg-header{
    background: #17A6CA;
    color: #fff;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    padding-left: 15px;
    font-weight: bold;
}
.msg-header span{
    font-size: 13px;
    font-weight: normal;
}
.msg-header span.msg-icon{
    font-size: 30px;
    float: right;
    margin-right: 20px;
}
.msg-content > .row{
    padding-right: 15px;
}
.msg-list ul{
    margin-left: 15px;
    padding: 0;
    margin-top: 15px;
}
.msg-list ul li{
    list-style: none;
    color: #656565;
    font-size: 13px;
    cursor: pointer;
}
.msg-list ul li span{
    float: right;
}

.msg-list ul li.unread{
    color: #656565;
    font-weight: bold;
}
.msg-list ul li.active{
    background: #17A6CA;
}
.msg-list ul li.unread i{
    color: #17A6CA;
}
.msg-list ul li button{
    background: none;
    border: 0;
    padding: 2px;
    font-size: 13px;
}
.msg-detail{
    padding-top: 15px;
    border-left: 1px solid #DFE2E7;
    height: calc(70vh - 60px);
    overflow-y: auto;
}
.msg-title{
    font-size: 16px;
    font-weight: bolder;
    line-height: 30px;
}
.msg-date{
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
}
.msg-info{
    font-size: 13px; 
}
.msg-info p{
    margin-bottom: 10px;
    font-size: 13px;
}
.msg-time{
    margin-bottom: 10px;
}

.msg-detail::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	background-color: #fff;
}

.msg-detail::-webkit-scrollbar
{
	width: 2px;
	background-color: #fff;
}

.msg-detail::-webkit-scrollbar-thumb
{
	background-color: #ccc;
}
.sidebar-menu{
    padding-right: 0;
}

.list-group-item{
    border: 0;
}
.sidenav{
    border: 1px solid #DFE2E7;
    border-radius: 5px;
    box-shadow: 0 0 3px 0 #DFE2E7;
}
.sidenav ul li {
    font-size: 16px;
    color: #545454;
    font-weight: bold;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
}
.sidenav ul li a{
    font-size: 16px;
    color: #545454;
    display: inline-block;
    margin-left: 10px;
    line-height: 50px;
}
.list-group-item.active{
    background: none;
    color: #17A6CA;   
}
.list-group-item.active a{
    color: #17A6CA;
    /* width: 205px; */
}
.list-group-item {
    padding: .35rem 1.25rem;
}

.nav-menu li.lng{
    padding: 10px 40px;
}
.zh-cn .nav-menu li.lng a.lng-cn{
    color: #17A6CA;
}
.en .nav-menu li.lng a.lng-en{
    color: #17A6CA;
}
#invite .modal-dialog, #request .modal-dialog{
    max-width: 1000px;
}
.modal-body{
    padding: 30px 70px 30px 45px;
}
.modal-body .normal-footer{
    margin-top: 50px;
}
.fade:not(.show) {
    opacity: 0;
    z-index: -200;
    display: none;
}
.modal-body .form-group{
    margin-bottom: 3px;
}
.modal-body label{
    font-family: "Daytona Light";
    font-size: 16px;
    color: #000;
    font-weight: normal;
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}
.user-com_assign{
    background: none;
    min-height: auto;
}

#shuttle_box{
    width:870px;
    zoom: 1;
    margin: 100px auto;
}
#shuttle_box:after{
   content: ".";
   clear: both;
   display: block;
   height: 0;
   overflow: hidden;
   visibility: hidden;
}
.shuttle_box_li{
    height: 430px;
    float: left;
}
.shuttle_box_near{
    width:360px;
    background-color:#ffffff;
    overflow-y: auto;
    overflow-x:hidden;
    border: 1px solid #555;
    border-radius: 0;
}
.shuttle_box_li_act{
    color:#ffffff !important;
    background-color: #17A6CA !important;
    border-bottom: 1px solid #ffffff;
    transition: all .01s;
}
.shuttle_box_near::-webkit-scrollbar {/*滚动条整体样式*/
       width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
       height: 1px;
   }
.shuttle_box_near::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
       border-radius: 20px;
       background-color: rgba(0,0,0,0.5);
   }
.shuttle_box_near::-webkit-scrollbar-track {/*滚动条里面轨道*/
       background-color: rgba(0,0,0,0.2);
       border-radius: 20px;
   }
.shuttle_box_near li{
   padding:8px;
   border-bottom: 1px solid #ffffff;
   background-color: #f4f4f4;
   cursor: pointer;
   transition: all .5s;
}
.shuttle_box_li_act:hover{opacity: 0.7;transition: all .01s;}
#shuttle_box_mid{width:150px;text-align: center;list-style: none;}
#shuttle_box_mid button{
    width: 130px;
    height:30px;
    display: block;
    margin:20px auto;
    line-height: 30px;
    color:white;
    cursor: pointer;
    background-color: #17A6CA;
    border-radius: 25px;
    transition: all .5s;
    border:none;
}
#shuttle_box_mid button:hover{opacity: 0.7;transition: all .5s;}
#shuttle_box_toRight{margin-top: 30px !important;}
#shuttle_box{
    margin: 0;
    padding: 0;
    margin-bottom: 50px;
}
.shuttle_box_li>ul{
    padding: 0;
}
.shuttle_box_li>ul>li{    
    list-style: none;
}
.message-box{
    /* display: none; */
}
.user-index .message-box{
    display: block;
}
.filelabel{
    display: inline-block;
    width: 78px;
    height: 24px;
    line-height: 24px;    
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border: 1px solid #136C81;
}
.cemalabel{
    background: #A7DAEB;
    border-color: #A7DAEB;
}
.cema-graylabel{
    border-color: #A7DAEB;
    background: #fff;
    color: #A7DAEB;
}
.detoxlabel{
    background: #136C81;
}
.detox-graylabel{
    border-color: #136C81;
    background: #fff;
    color: #136C81;
}
.cepalabel{
    background: #003399;
}
.cepa-blacklabel{
    background: #080808;
}
.com-score{
    display: inline-block;
    vertical-align: top;
}
.btn-info {
    color: #fff;
    background-color: #17A6CA;
    border-color: #17A6CA;
}
.com-item{
    margin: 5px 0;
    min-height: 79px;
    padding: 5px 5px 5px 25px;
}
.com-item-fa{    
    position: relative;
    height: 79px;
    padding: 5px 5px 5px 25px;
    margin: 5px 0;
}

.col3 .com-item:not(:last-child), .col4 .com-item:not(:last-child){
    
}
.dash-cards-unassigned .com-item-fa{
    min-height: 39px;
}
.com-item-fa .com-btn{
    
}
.col4 .com-item{
    padding: 0;
    margin: 0;
}
.dash-cards{
    position: relative;
    min-width: 1170px;    
    border-bottom: 1px solid #CCD;
}
.dash-cards.dash-cards-assigned:hover, .dash-cards.dash-cards-unassigned:hover{
    background: #eee;
}
.barup{
    position: absolute;
    left: 1px;
    z-index: 9;
    background: none;
    border: 0;
    top: 32px;
    font-size: 16px;
}
.down .bi-dash-square::before{
    content: "\F4FD";
}

.detailbarup{
    position: absolute;
    left: -20px;
    z-index: 9;
    background: none;
    border: 0;
    bottom: 12px;
    font-size: 16px;
}

.com-item-uns{
    border-bottom: 0;
}
.card-me hr, .card-hide hr{
    display: none;
}
.com-detail{
    padding: 15px 0;
}
.com-detail div{
    font-size: 16px;
}
.com-detail div.com-title{
    font-size: 16px;
    font-weight: bold;
}
.path-page{
    width: 100%;
    background: #fff;
    padding: 10px 0;
}
.path-container{
    width: 1150px;
    max-width: 1150px;
}
.path-head{
    font-size: 24px;
    font-weight: bold;
    color: #2D5D80;
    text-align: center;
    height: 48px;
    line-height: 48px;
}
.path-title{
    border-right: 5px solid #fff;
    border-color: var(--pathcolor);
    color: var(--pathcolor);
    height: 335px;
    text-align:right;
    font-size: 14px;
}
.path-title span{
    font-size: 28px;
    font-weight: bold;
}
.path-title span.path-title-cn{
    font-size: 14px;
}
.path-title5, .path-title6{
    height: 175px;
}
.path-card{
    color: var(--pathcolor);
    padding: 8px;
    border-radius: 4px 4px 4px 0px;
    border: 2px dashed #ccc;
    border-color: var(--pathcolor);
    font-weight: bold;
    height: 108px;
    background: #fff;
}
.path-card.services-line{
    border-style: solid;
}
.path-card.services-full{
    border-style: solid;
    background-color: var(--pathcolor);
    color: #fff;
}
.path-sc{
    font-size: 16px;
    font-weight: bold;
}
.path-sn{
    font-size: 12px;
}
.path-sncn{
    font-size: 11px;
}
body.en .path-sncn,
body.en .head-cn,
body.en .path-title .path-title-cn{
    display: none;
}
.path-number{
    margin-bottom: 20px;
    padding-top: 3px;
    border-radius: 0px 0px 14px 14px;
    border: 2px dashed var(--pathcolor);
    height: 30px;
    padding-left: 10px;
    width: 160px;
    background: #fff;
    border-top: 0;
}
.path-number span{
    width: 20px;
    height: 20px;
    margin-right: 5px;
    line-height: 18px;
    border: 2px dotted #ccc;
    border-color: var(--pathcolor);
    color: var(--pathcolor);
    border-radius: 15px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}
.path-number span.num-class0{
    cursor: pointer;
}
.path-number span.num-class1{
    border-style: solid;
    cursor: pointer;
}
.path-number span.num-class2{
    border-style: solid;
    background-color: var(--pathcolor);
    color: #fff;
}
.path-card-cell{
    padding: 5px 10px;
}
.path-cont1, .path-cont2, .path-cont3, .path-cont4{
    height: 335px;
}
.path-cont5, .path-cont6{
    height: 175px;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}
.delUser{
    background: none;
    border: none;
    font-size: 18px;
    color: #ff0000;
}
.about {
    background: #F4F5F8;
}
.about .header-box{
    background-color: #153C58;
    background-image: url(../img/Bitmap.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.about .menu-line{
    padding-top: 120px;
}
.about .menu-line h1{
    color: #fff;
}
.about .nav-menu li a{
    color: #fff;
}
.content-card{
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px 140px 40px;
    min-height: 95vh;
}
/* .container-fluid{
    padding: 0;
} */
.content-card p{
    font-family: "Daytona Light";
    font-size: 18px;
    line-height: 25px;
}
.content-card .title{
    font-family: "Grandview Bold";
    font-size: 36px;
    font-weight: bold;
    color: #153C58;
    line-height: 33px;
    margin-top: 70px;
    margin-bottom: 20px;

}
.content-card .content-text{
    font-size: 14px;
    font-weight: 400;
    color: #153C58;
    line-height: 20px;
}
.content-card p i, .content-card p strong{
    display: block;
    padding-top: 40px;
}
.custom-file-label::after{
    display: none;
}
.custom-file label{
    color: #999;
}
.bd-menu-toggle{
    position: absolute;
    right: 15px;
    top: 10px;
}
.dashbord-cols{
    /* overflow-x: auto; */
}
.search-btn{
    padding: 4px 12px;
    cursor: pointer;
}
.about ol {
    counter-reset: section;
    list-style-type: none;

}
.about ol li {
    margin-bottom: 10px;
}
.about ol li:before {
    counter-increment: section;
    content: counters(section,".") ". Link " counters(section,".") " ";
}
.about ol {
    counter-reset: section;
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
    margin-bottom: 30px;
}
.about ol li:before {
    counter-increment: section;
    content: counters(section,".") ". ";
    font-weight: bold;
    margin-right: 5px;
}
.about ol li ol li{
    padding-left: 20px;
}
.about ol li ol li:before{
    font-weight: normal;
}
.about main{
    min-height: 615px;
}

.navmenu{
    width: 100%;
    margin: 0;
    background: #000;
    height: 60px;
    padding-top: 2px;
    opacity: 1;
    position: fixed;
    top: 0;
    z-index: 999;
}
.menu > ul > li:nth-child(4) {
    margin-right: 50px;
}
.menu  ul.nav-menu > li:nth-child(4) {
    margin-right: 0;
}
.navmenu .logo img{
    height: 55px;
}
.navmenu .menu {
    text-align: right;
}
.navmenu .menu ul{
    margin-top: 15px;
    margin-bottom: 0;
}
.navmenu .menu ul li{
    list-style: none;
    display: inline-block;
    padding: 5px 10px;
}
.navmenu .menu ul li a{
    color: #fff;
    font-size: 18px;
    font-family: "Daytona Light", "HP simplified hans light", "Helvetica", sans-serif;
}
footer {
    font-size: 12px;
}
footer a{
    color: #fff;
    font-size: 12px;
}

.bullet{
    height: 70px;
    width: 260px;
    border-radius: 15px;
    display: flex;
    background-color: #fff;
    border: 1px solid #ccc;
}
.bullet .com-infos{
    width: 106px;
    padding-top: 10px;
    color: #080808;
}
.bullet .com-infos .com-name{
    margin-bottom: 0;
    margin-left: 5px;
    margin-top: 15px;
}
.bullet .com-infos .com-name a{
    color: #080808;
    font-weight: bold;
    font-size: 14px;
}
.bullet .com-infos .com-since{
    color: #080808;
    font-size: 11px;
    margin-left: 5px;
}
.bullet:hover{
    box-shadow: 5px 5px 5px #aaa;;
}
.score{
    width: 118px;
}
.score span.score-title{
    background-color: #fff;
    color: #000;
    min-width: 23px;
    line-height: 20px;
    font-weight: bold;
}
.score-row1{
    height: 28px;
}
.score-row2{
    height: 28px;
}
.score span{
    display: inline-block;
    background-color: #B0CEE3;
    line-height: 22px;
    text-align: center;
    min-width: 25px;
    margin: 8px 1px;
    border-radius: 3px;
    color: #fff;
    font-family: "Speak Pro";
    font-size: 16px;
}
.score-row2 span{    
}
.bullet .right-btn{
    width: 26px;
}
.blue-lg{
    color: #000;
    font-size: 20px; 
    font-weight: bold;
    font-family: "Grandview Bold";    
}
.blue-lg32{
    color: #000;
    font-size: 36px; 
    font-weight: bold;
    font-family: "Grandview Bold";
}
.gray-sm{
    color: #333;
    font-size: 15px;
}
.file-link{
    color: #2E2E2E;
    font-size: 14px;
}
.file-link i{
    color: #FA281B;
}

.col2 .dash-content > .com-item:first-child:before,
.col3 .dash-content > .com-item:first-child:before,
.col4 .dash-content > .com-item .com-item-fa:first-child:before {
    border-style: none none solid none;
    width: 33px;
    left: -7px;
    border-radius: 0;
}
.col2 .dash-content .com-item:before,
.col3 .dash-content .com-item:before,
.col4 .dash-content .com-item .com-item-fa:before {
    position: absolute;
    content: '';
    top: -5px;
    left: 4px;
    width: 20px;
    height: 43px;
    border-style: none none solid solid;
    border-width: 4px;
    border-color: #239CBD;
    border-radius: 0 0 0 5px;
}
.col2 .dash-content > .com-item:not(:last-child):after,
.col3 .dash-content > .com-item:not(:last-child):after,
.col4 .dash-content > .com-item .com-item-fa:not(:last-child):after {
    position: absolute;
    content: '';
    top: 36px;
    left: 4px;
    bottom: 0;
    border-style: none none none solid;
    border-width: 4px;
    border-color: #239CBD;
}
.col3 .dash-content .com-item.first:before,
.col4 .dash-content .com-item .com-item-fa.first:before{
    border-style: none none solid none ;
    width: 35px;
    left: -9px;
    border-radius: 0;
}
.col3 .dash-content .com-item.first:after,
.col4 .dash-content .com-item .com-item-fa.last:not(:last-child):after{
    border-style: none none none none;
}
.col2 .dash-content .com-item.istop:before,
.col3 .dash-content .com-item.istop:before,
.col4 .dash-content .com-item .com-item-fa.istop:before,
.col2 .dash-content .com-item.istop:after,
.col3 .dash-content .com-item.istop:after,
.col4 .dash-content .com-item .com-item-fa.istop:after {
    width: 0;
    height: 0;
    border-color: #fff;
}

.menu-line img{
    height: 50px;
}
.user-login nav img, 
.user-forgotpwd nav img,
.user-register nav img{
    height: 60px;
}
.table td{
    padding: 5px;
}
.table th{
    padding: 15px 5px;
}
.datespan{
    width: 80px;
    font-size: 14px;
    display: block;
}
.detail-toolbar{
    vertical-align: middle;
}
.detail-toolbar .btn-primary{
    width: 150px;
    position: relative;
    height: 50px;
    background: #17A6CA;
    border-radius: 35px;
    border: 0;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 18px;
    margin-left: 10px;
    padding-left: 20px;
    text-align: left;
}
.detail-toolbar .btn-primary span{
    font-size: 12px;
}
.list-com-name{
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}
a .file-name{
    color: #333;
    width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-sm{
    font-size: 12px;
    padding: 5px;
}
.detail-panel{
    background: #fff;
    margin-top: 15px;
}
.border-panel{
    padding: 10px 30px;
    margin-top: 10px;
}
.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: #fff;
    width: 315px;
    /* height: 40px; */
    border-bottom: 0;
    font-size: 16px;
    font-weight: bold;
    background: #A6A5A6;
    color: #fff;
    text-align: left;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fefefe;
    border-color: #A9A8A9;
    border-width: 2px;
}
.nav-tabs .nav-link1.active{
    border-color: #136C81;
}
.nav-tabs .nav-link2.active{
    border-color: #A7DAEB;
}
.nav-tabs .nav-link3.active{
    border-color: #003399;
}
.com-btn .btn-assign{
    background-image: url(../img/assign-h.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0;
    width: 25px;
    height: 25px;
    margin-right: 6px;
    margin-top: 10px;
}
.com-btn .btn-assign:hover{
    background-image: url(../img/assign-l.png);
}
.btn-assign img{
    width: 25px;
    display: none;
}
.btn-views-open img, .btn-views-close img{
    display: none;
}
.com-btn .btn-views{
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0;
    width: 25px;
    height: 25px;
    margin-right: 6px;
    margin-top: 10px;
}
.com-btn .btn-views-open{
    background-image: url(../img/eye-oh.png);
}
.com-btn .btn-views-open:hover{
    background-image: url(../img/eye-ol.png);
}
.com-btn .btn-views-close{
    background-image: url(../img/eye-ch.png);
}
.com-btn .btn-views-close:hover{
    background-image: url(../img/eye-cl.png);
}
.detailbarup.down .bi-question-lg::before{
    content: '\F50A';
}

.unread .bi-envelope-open::before{
    content: "\f32f";
}
.font-red{
    color: #FF0000;
}
.btn-cell{
    width: 90px;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.btn-cell button{
    height: 25px;
    line-height: 25px;
    padding: 0;
    width: 80px;
    border-radius: 20px;
}
.msg-list{
    height: 540px;
    overflow: auto;
}
.msg-info a{
    color: #007bff;
}
.warning-row{
    background-color: brown;
    color: #fff;
    padding: 5px 15px;
}
.menu-line .col-md-4 img{
    cursor: pointer;
}
.nav-menu li:nth-last-child(1) a{
    background: #BFBFBF;
    display: inline-block;
    padding: 2px 5px;
}
.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default{
    background: #339ADC;
    color: #fff;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{
    background: #339ADC;
    color: #fff;
}

.com-infos{
    border-radius: 13px 0 0 13px;
    height: 70px;
}
.copper{
    background-image: linear-gradient(45deg , #A6715A,#E3C5B7, #A6715A);   
}
.silver{
    background-image: linear-gradient(45deg , #CFD1D2, #E4E5E6, #F9F9F9, #E4E5E6, #CFD1D2); 
}
.gold{
    background-image: linear-gradient(45deg , #FFCA01,#FFDA50, #FFEA9F, #FFDA50, #FFCA01); 
}
.com-info.copper,
.com-info.silver,
.com-info.gold{
    background-image: none;
    background-color: #fff;
}

.score>div>span:nth-child(2){
    background: #136C81;
}
.score>div>span:nth-child(3){
    background: #A7DAEB;
}
.score>div>span:nth-child(4){
    background: #003399;
}
.com-scores{
    display: inline-block;
    margin-left: 30px;
    border: 1px solid #b0cee3;
    width: 123px;
    height: 70px;
}
.right-side{
    width: 250px;
    position: fixed;
    top: 140px;
    right: -250px;
}

.right-side.show{
    right: 0;
    animation: showside 1s;
}
.right-side.hide{
    right: -250px;
    animation: hideside 1s;
}
@keyframes showside
{
    from {right: -250px;}
    to {right: 0;}
}
@keyframes hideside
{
    from {right: 0;}
    to {right: -250px;}
}
.hascover{
    height: 100vh;
    overflow: hidden;
}
.right-side.show .btn-qa{
    display: none;
}
.right-side .btn-qa{
    position: absolute;
    left: -20px;
    width: 20px;
    background: #F2F2F2;
    text-align: center;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    height: calc(100vh - 140px);
}
.btn-tutor{
    position: fixed;
    top: 0;
    right: 0;
    background: #F2F2F2;
    text-align: left;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    width: 20px;
    height: 140px;
    z-index: 9999;
    padding-top: 40px;
}
.btn-tutor p{
    transform: rotate(-90deg);
}
.right-side .btn-qa p{
    transform: rotate(-90deg);
}
.right-side .tip{
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 1px;
    font-size: 13px;
    position: relative;
    background-color: #eee;
}
.btn-tip-close{
    cursor: pointer;
}
.tip-title{
    font-weight: bold;
}
.tip-close{
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 10px;
    cursor: pointer;
}
.navmenu .menu ul li.active a{
    color: #17A6CA;
}
.right-tool{
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 109px;
    left: 0;
    background: #fff;
    padding: 5px 0;
    border-radius: 0 5px 5px 0;
    font-size: 12px;
    z-index: 8;
}
.right-tool img{
    width: 90px;
    height: 90px; 
}
.right-mail{
    position: fixed;
    width: 100px;
    height: 80px;
    bottom: 208px;
    left: 0;
    background: #17A6CA;
    padding: 5px 15px;
    border-radius: 0 5px 5px 0;
    color: #fff;
    font-size: 70px;
    line-height: 50px;
    cursor: pointer;
    z-index: 2;
}
.input-group-text{
    padding: 2px .75rem;
}
.btn-tip-search{
    cursor: pointer;
}
.tip-title span{
    color: #0070C0;
}
.order-search select{
    margin-right: 15px;
}
.order-item{
    border: 2px solid #17A6CA;
    padding: 20px 30px ;
    border-radius: 20px;
    margin: 20px 0;
    font-size: 16px;
}
.white-bg{
    background-color: #fff;
}
.cover-bg{
    background-color: #17A6CA;
    width: 100%;
    height: 100vh;
    position: fixed;
    bottom: 0;
    opacity: 0.2;
    z-index: 1;
}
.slogan{
    height: 100vh;
    position: relative;
}
.slogan h1{
    font-size: 60px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 45vh;
    z-index: 10;
    width: 100%;
    font-family: "Grandview", "Helvetica", "NotoSerifSC", sans-serif;
}
.content-card li{
    font-family: "Daytona Light";
    font-size: 18px;
    line-height: 25px;
}
.footerrow {
    background: #000;
    color: #fff;
    padding: 10px;
}
#section-footer a {
    color: #fff;
    font-size: 18px;
}

.pc-h2{
    font-family: "Grandview", "Helvetica", "NotoSerifSC", sans-serif;
    font-size: 24px;
    color: #000;
}
.pc-h2 span{
    display: inline-block;
    width: 120px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    margin-left: 20px;
}
.performance-card{
    margin-top: 30px;
    border-radius: 10px;
    padding: 5px 30px;
}
.performance-card .col1{
    position: relative;
    width: 100%;
    flex: 0 0 120px;
    max-width: 120px;
    color: #fff;
    padding-top: 88px;
}
.performance-card .col1 h3{
    font-size: 18px;
    font-weight: bold;
}
.performance-card .col1 p{
    font-size: 14px;
}
.performance-card .col2{
    position: relative;
    width: 100%;
    flex: 0 0 110px;
    max-width: 110px;
    padding-top: 40px;
}
.pc-title{
    height: 60px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 15px;
    display: flex;
    padding-left: 30px;
    position: relative;
}
.pc-title::before{
    content: "C";
    font-size: 20px;
    position: absolute;
    top: 18px;
    left: 10px;
    font-weight: bold;
}
.pc-title-p::before{
    content: "P";
}
.pc-title p{
    font-size: 12px;
    line-height: 16px;
    font-family: "Speak Pro", "Helvetica", sans-serif;
    align-self: center;
}
.performance-card .col3{
    position: relative;
    width: 100%;
    flex: 0 0 165px;
    max-width: 165px;
}
.performance-card .col-card h3,
.performance-card .col-card span{
    text-align: center;
    color: #239CBD;
}
.performance-card .col-card h3{
    font-size: 16px;
    font-weight: bold;
}
.performance-card .col-card span{
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}
.performance-card .col-card .pc-card{
    height: 60px;
    background-color: #136C81;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 15px;
    display: flex;
    padding-left: 30px;
    position: relative;
    color: #fff;
    margin-left: 3px;
}
.performance-card .col-card .pc-card p{
    font-size: 12px;
    line-height: 16px;
    font-family: "Speak Pro", "Helvetica", sans-serif;
    align-self: center;
}
.performance-card .col-card h5{
    font-size: 20px;
    position: absolute;
    top: 18px;
    left: 10px;
    font-weight: bold;
}
.performance-card .col4{
    position: relative;
    width: 100%;
    flex: 0 0 165px;
    max-width: 165px;
}
.performance-card .col4 .pc-card{
    background-color: #A7DAEB;
}
.performance-card .col5{
    position: relative;
    width: 100%;
    flex: 0 0 165px;
    max-width: 165px;
}
.performance-card .col5 .pc-card{
    background-color: #003399;
}
.pc-card-foot{
    padding-left: 350px;
    color: #239CBD;
    font-size: 13px;
}
.pc-card-foot img{
    width: 60px;
}
.reg-section h1{
    font-size: 35px;
    margin-bottom: 30px;
}
.reg-section h1 span{
    float: right;
    font-size: 16px;
}
.reg-section h1 span a{
    font-size: 16px;
}
.reg-section h2{
    font-size: 20px;
    margin-bottom: 30px;    
}
.modal-header{
    border: none;
}
.modal-title{
    font-family: "Grandview";
    font-size: 30px;
    padding-bottom: 5px;
    border-bottom: 3px solid #BFBFBF;
    margin-left: 30px;
    padding-left: 5px;
    width: 100%;
}
.modal-title p{
    font-family: "Daytona Light";
    font-size: 12px;
    color: #BFBFBF;
    line-height: 20px; 
    margin-top: 10px;
    margin-bottom: 10px;
}

.step{
    display: none;
    background-position: top center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-color: #fff;
    z-index: 99999;
}
.step1{
    /* display: block; */
    background-image: url(../img/step1.png);
    background-size: 1170px 935px;    
}
.zh-cn .step1{
    background-image: url(../img/step1cn.png);
}
.step2{
    background-image: url(../img/step1.png);
    background-size: 1170px 935px; 
    background-position-y: -200px;  
}
.zh-cn .step2{
    background-image: url(../img/step1cn.png);
}
.step3{
    background-image: url(../img/step2.png);
    background-size: 1173px 1107px;
    background-position-y: -200px; 
}
.zh-cn .step3{
    background-image: url(../img/step2cn.png);
    background-position-y: -249px;
}
.step4{
    background-image: url(../img/step2.png);
    background-size: 1173px 1107px;   
    background-position-y: -200px; 
}
.zh-cn .step4{
    background-image: url(../img/step2cn.png);
}
.step5{
    background-image: url(../img/step5.png);
    background-size: 1173px 1107px;
    background-position: 50% -291px;  
}
.zh-cn .step5{
    background-image: url(../img/step5cn.png);
}
.step6{
    background-image: url(../img/step6.png);
    background-size: 1173px 1107px;     
}
.zh-cn .step6{
    background-image: url(../img/step6cn.png);
    background-position-y: -54px;
}
.cover-step{
    position: absolute;
    z-index: 999998;
    border-radius: 100px;
    box-shadow: rgb(0 0 0 / 60%) 0px 0px 1px 10000px;
}
.cover-text-step{
    position: absolute;
    z-index: 999999;
    color: #fff;
}
.btn-step{
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    background-color: transparent;
    line-height: 30px;
    border-radius: 15px;
    min-width: 120px;
}
h4.step{
    margin-bottom: 10px;
    font-size: 18px;
}

.cover-step1{
    height: 200px;
    width: 200px;
    top: 393px;
    left: calc(50% + 205px);
}
.zh-cn .cover-step1{
    top: 357px;
}
.cover-text-step1{
    height: 200px;
    width: 300px;
    top: 380px;
    left: calc(50% - 120px);
}

.cover-step2{
    height: 100px;
    width: 100px;
    top: 460px;
    left: calc(50% - 385px);
}
.zh-cn .cover-step2{
    top: 419px;
}
.cover-text-step2{
    height: 200px;
    width: 300px;
    top: 480px;
    left: calc(50% - 220px);
}
.cover-step3{
    height: 68px;
    width: 314px;
    top: 295px;
    left: calc(50% + 220px);
}
.cover-text-step3{
    height: 200px;
    width: 300px;
    top: 385px;
    left: calc(50% + 220px);
}
.cover-step4{
    height: 265px;
    width: 100px;
    top: 430px;
    left: calc(50% - 5px);
}
.cover-text-step4{
    height: 200px;
    width: 300px;
    top: 450px;
    left: calc(50% - 343px);
}
.cover-step5{    
    height: 400px;
    width: 1086px;
    top: 330px;
    left: calc(50% - 552px);
    border-radius: 0;
}
.cover-text-step5{
    height: 200px;
    width: 500px;
    top: 160px;
    left: calc(50% - 220px);
}
.cover-step6{
    height: 130px;
    width: 1170px;
    top: 360px;
    left: calc(50% - 583px);
    border-radius: 0;
}
.cover-text-step6{
    height: 200px;
    width: 500px;
    top: 250px;
    left: calc(50% - 300px);
}

.nav-tabs{
    border-bottom: 0;
    justify-content: flex-end;
}
#cover-Close{
    position: fixed;
    top: 65px;
    right: 25px;
    z-index: 1000000;
    color: #ffffff;
    text-align: center;
    display: block;
    font-size: 30px;
    cursor: pointer;
}
.user-detail .tab-content, .echart-zone{
    background: #fefefe;
    border: 2px solid #A9A8A9;
    padding: 10px;
    margin-top: -1px;
    padding-bottom: 0;
}
.echart-zone{
    margin-top: 30px;
    margin-bottom: 30px;
}
.btn-assign{
    padding: 5px;
}
.table td, .table th {
    border-top: 0;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #121212;
}
.detail-toolbar .btn-skill-tree{
    background-image: url(../img/Skill-Tree-9.png);
    background-size: 40px 40px;
    background-position: 60px center;
    background-repeat: no-repeat;
    min-width: 100px;
    width: 105px;
}
.detail-toolbar .btn-skill-tree div{
    font-size: 18px;
    width: 60px;
}
.detail-toolbar .btn-mdetox-upload{
    background-image: url(../img/Upload9.png);
    background-size: 40px 40px;
    background-position: 95px center;
    background-repeat: no-repeat;
    min-width: 100px;
    width: 140px;
}
.detail-toolbar  .btn-mdetox-upload>div{
    width: 75px;
    text-align: center;
}
.detail-toolbar .btn-mrequest{
    background-image: url(../img/Request-Service-Offer-9.png);
    background-size: 40px 40px;
    background-position: 90px center;
    background-repeat: no-repeat;
    min-width: 100px;
    width: 140px;
}
.detail-toolbar .btn-mrequest>div{
    width: 70px;
    text-align: center;
}
.bi-caret-up-fill::before{
    font-size: 25px;
}

.collapsed .bi-dash-square::before{
    content: "\F4FD";
}
.btn-normal{
    /* display: none; */
}
.btn-mover{
    display: none;
}
.checks-col{
    width: 150px;
    padding-top: 17px;
    display: none;
}
.checks-col hr{
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #333!important;
    width: 123px;
}
.btn-mydata{
    background: transparent;
    border: 1px solid #aaa;
    color: #aaa;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 120px;
}
.btn-mydata.act{
    border: 1px solid #495057;
    color: #495057;
}
.btn-mover .tabs-name{
    font-size: 18px;
    width: 230px;
    font-family: "Grandview Bold";
    padding-top: 10px;
}
.btn-mover .tabs-name span{
    font-size: 12px;
    font-family: "Grandview";
    line-height: 15px;
    font-weight: normal;
    display: block;
}
.tabs-score{
    font-size: 15px;
    font-family: "Speak Pro";
    font-weight: normal;
}
.tabs-score>div{
    padding-left: 30px;
    position: relative;
}
.tabs-score>div span{
    display: block;
    position: absolute;
    background: #136C81;
    border-radius: 3px;
    color: #fff;
    line-height: 25px;
    text-align: center;
    left: 0;
    top: 5px;
    width: 25px;
}
.tabs-score>div.score-c{
    border-bottom: 1px solid;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
#nav-cema-tab .tabs-score>div span{
    background: #A7DAEB;
}
#nav-cepac-tab .tabs-score>div span{
    background: #003399;
}
.file-nav{
    height: 120px;
    position: relative;
}
.file-nav .nav-tabs{
    position: absolute;
    right: 0;
    bottom: 0;
}
.leve-line{
    width: 340px;
    text-align: center;
    margin-left: 478px;
    display: none;
}
.leve-line .leftside{
    float: left;
}
.leve-line .rightside{
    float: right;
}
.text-gray{
    color: darkgray;
}
.tabs-panel{
    height: 300px;
    overflow-y: scroll;
    margin-bottom: 20px;
    overflow-x: hidden;
}
.text-black{
    color: darkgray;
}
.border-panel-chart{
    padding: 10px;
}
.bi-envelope{
    margin-right: 12px;
}
.msg-count{
    font-size: 12px;
    position: absolute;
    top: 2px;
    line-height: 12px;
    right: 3px;
    background: #ff0000;
    padding: 2px;
    border-radius: 2px;
}
#content-container{
    padding-bottom: 40px;
    min-height: 80vh;
}
.header-preview{
    display: none;
}
.user-register label{
    margin-top: 10px;
}
.zh-cn .tabs-score{
    font-size: 12px;
}
.medal{
    width: 20px;
    color: #ff0000;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    font-weight: bold;
    margin-left: 2px;
}
.medal span{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-top: -7px;
}
@keyframes hidemenu {
    from {top: 0;}
    to {top: -50px;}
}
@keyframes showmenu {
    from {top: -50px;}
    to {top: 0;}
}
.btn-invite{
    width: 210px;
    background-image: url(../img/Invite9.png);
    background-position: 130px 0;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    text-align: left;
    padding-left: 20px;
}
.btn-disconnect{
    width: 200px;
    background-image: url(../img/Disconnect9.png);
    background-position: 120px 0;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
}
.col4 .dash-content .com-item{
    margin-bottom: 10px;
}
.medal-tip{
    display: none;
    background: #fff;
    padding: 3px;
    border: 1px solid #ccc;
    margin-top: 5px;
    z-index: 9999;
    position: relative;
    font-size: 12px;
}
.del-file{
    background: none;
    border: 0;
    color: #ff0000;
    font-size: 18px;
    width: 25px;
    height: 25px;
    display: inline-block;
}
.file-list span{
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
form .form-value{
    padding-top: 7px;
    display: block;
    padding-bottom: 7px;
}
.td-submit{
    width: 100px;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}
.gray-sm2{
    color: #aaa;
    margin: 10px;
    font-size: 14px;
}
.pager{
    margin-bottom: 10px;
}
.tabs-panel{
    position: relative;
}
.table-tip{
    position: absolute;
    bottom: 10px;
}
.highlight, .list-group-item.highlight{
    background-color: brown;    
}
.list-group-item.highlight.active, .list-group-item.highlight.active a, .nav-menu .highlight a{
    color: #fff !important;
}
.user-account .nav-menu li.highlight a{
    color: #fff;
}
.list-group-item.active.highlight {
    border-color: #ccc;
}
.list-group-item+.list-group-item.active {
    margin-top: 0px;
    border-top-width: 1px;
}
.preload{
    width: 50px;    
}

.profile-right .form-value{
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.islogin .user-header::after{
    /* content: '\F2DD';
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    font-size: 30px;
    background: #00b200;
    padding: 10px 20px;
    color: #fff; */
}
.profile-building-img-content{
    background: url(../img/upload-icon.png) no-repeat;
    background-size: 50px 50px;
    height: 50px;
}
@media (min-width: 576px){
    /* .container, .container-sm {
        max-width: 100%;
    } */
    .modal-dialog{
        max-width: 1000px;
    }
}

@media (min-width: 768px){
    .col-sm-offset-3 {
        /* margin-left: 25%; */
    }
    /* .container, .container-md, .container-sm {
        max-width: 100%;
    }     */
}

@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1200px;
    }
    .col-md-offset-4 {
        /* margin-left: 33.33333333%; */
    }    
}
@media (max-width: 1200px){
    .nav-menu li {
        display: inline-block;
        list-style: none;
        padding: 10px 10px;
    }
    .header-menu{
        position: relative;
    }    
}
@media (min-width: 576px){
    .container, .container-sm {
        max-width: 1200px;
    }
}

@media (max-width: 992px){
    /* .nav-menu{
        bottom: auto;
        top: 49px;
        background: #eee;
        padding: 10px 30px;
        display: none;
    }
    .nav-menu li {
        display: block;
    } */
    /* .right-side, .right-tool, .right-mail{
        display: none;
    } */
    .col-sm-9{
        width: 75%!important;
    }
    .col-sm-3{
        width: 25%!important;
    }
    .col-sm-6{
        width: 50%!important;
    }
}

#detox-upload .modal-dialog {
    max-width: 1000px;
}
.modal-content{
    border-radius: 15px;
}
.modal-header{
    font-size: 30px;
    font-weight: normal;
    font-family: "Grandview bold", "Helvetica", "NotoSerifSC", sans-serif;
}
.btn-export{
    background: none;
    border: 0;
    width: 50px;
    font-size: 30px;
    height: 40px;
    margin-bottom: 10px;
}
.btn-export svg{
    width: 25px;
    height: auto;
}
.about .row{
    margin: 0;
}
.list-group-item.active{
    border-color: #17A6CA;
}
.user-index .nav-menu li:nth-child(1) a,
.user-detail .nav-menu li:nth-child(2) a,
.user-suswallet .nav-menu li:nth-child(4) a,
.user-orders .nav-menu li:nth-child(3) a,
.user-profile .nav-menu li:nth-child(4) a,
.user-account .nav-menu li:nth-child(4) a,
.user-policy .nav-menu li:nth-child(4) a,
.user-team .nav-menu li:nth-child(4) a,
.user-closure .nav-menu li:nth-child(4) a,
.user-changepwd .nav-menu li:nth-child(4) a{
    color: #17A6CA;
    font-weight: bold;
}
ol{
    margin: 15px;
}
ol li{
    list-style: decimal;
    margin-left: 15px;
}
.com-name a{
    text-decoration: none;
}
.bullet{
    cursor: pointer;
}
.btn-success{
    background-color: #17A6CA;
    border-color: #17A6CA;
    color: #fff;
    height: 50px;
    border-radius: 25px;
    font-family: "Daytona Light";
    font-size: 16px;
    width: 150px;
}
.btn-secondary{
    background-color: #fff;
    border-color: #17A6CA;
    color: #17A6CA;
    border-radius: 25px;
    font-family: "Daytona Light";
    font-size: 16px;
    margin-left: 40px;
    width: 180px;
    border-width: 2px;
}
label p{
    font-size: 12px;
    line-height: 15px;
    color: #ccc;
}
.form-check-input{
    zoom: 150%;
    margin-left: -2px;
    margin-top: 5px;
    -moz-transform:scale(1.5);
}
.form-check label{
    line-height: 30px;
    height: 25px;
    margin-left: 23px;
    margin-top: 2px;
    font-weight: normal;
}
.account-edit{
    font-size: 30px;
    padding-left: 20px;
    cursor: pointer;
}

.gray-12{
    color: #aaa;
    font-size: 14px;
}
.boarding{
    margin-bottom: 50px;
    margin-top: 50px;
}
.col-form-label .btn-secondary{
    width: 90px;
    margin-left: 0;
    height: 30px;
    line-height: 12px;
    margin-top: 10px;
}
.user-profile .panel, .user-account .panel{
    padding: 15;
    margin-bottom: 40px;
}
.h1, h1 {
    font-size: 2rem;
}
.user-account .form-group {
    margin-bottom: 10px;
}
.user-profile h2, .user-account h1{
    margin-bottom: 20px;
}
.user-profile h2 span{
    color: #aaa;
    font-size: 16px;
    padding-left: 15px;
}
.font-size-16{
    font-size: 16px;
}
.color-blue{
    color: #17A6CA !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue {
    background-color: #17A6CA;
    border-radius: 20px;
    text-transform: capitalize;
}
@-moz-document url-prefix() { 
    .form-check-input { 
        margin-top: 10px;
    } 
} 
.layui-btn{
    background-color: #fff;
    border-color: #17A6CA;
    color: #17A6CA;
    border-radius: 25px;
    font-family: "Daytona Light";
    font-size: 16px;
    border-width: 2px;
    width: 90px;
    height: 30px;
    line-height: 30px;
}
.layui-btn:hover{
    background-color: #17A6CA;
    border-color: #17A6CA;
    color: #fff;
}
.profile-right .form-group {
    margin-bottom: 7px;
}
.form-row{
    margin-bottom: 20px;
}
label{
    margin-bottom: 0;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 10px;
    padding-left: 10px;
}
.open-gtc{
    color: #17A6CA;
}
.el-hide{
    display: none !important;
}
.user-profile h2 span.profile-edit{
    color: #000;
    font-size: 24px;
    cursor: pointer;
}
.gtc ol li ol li{
    padding-left: 0;
}
.about .container-fluid{
    padding: 0;
}

.path-card-cell:before{
    position: absolute;
    content: '';
    top: 26px;
    left: -10px;
    width: 20px;
    height: 43px;
    border-style: none none solid none;
    border-width: 3px;
    border-color: var(--pathcolor);
    border-radius: 0;
}

.path-container .row .path-cont1:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}
.path-container .row .path-cont2:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}
.path-container .row .path-cont3:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}
.path-container .row .path-cont4:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}
.path-container .row .path-cont5:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}
.path-container .row .path-cont6:nth-child(2) .path-card-cell:first-child:before{
    border: 0;
}

.path-cont1.col2 .row2 .path-card-cell:first-child:before,
.path-cont1.col2 .row2 .path-card-cell:nth-child(2):before{
    border-style: none none solid solid;
    height: 171px;
    top: -100px;
    width: 15px;
    left: -4px;
    border-radius: 3px;
}
.path-cont2.col2 .row2 .path-card-cell:first-child:before{
    border-style: none none solid solid;
    height: 171px;
    top: -100px;
    width: 15px;
    left: -4px;
    border-radius: 3px;
}
.path-cont3.col2 .row2 .path-card-cell:first-child:before{
    border: 0;
}
.path-cont3.col2 .row2 .path-card-cell:last-child:after,
.path-cont4.col2 .row2 .path-card-cell:last-child:after{
    position: absolute;
    content: '';
    border-width: 3px;
    border-color: var(--pathcolor);
    border-style: none solid solid none;
    height: 171px;
    top: -100px;
    width: 15px;
    right: -3px;
    border-radius: 3px;
    z-index: 9;
}
.path-cont4.col1 .row2 .path-card-cell{
    margin-left: 192px;
}
.card-cos .col .dash-content{
    height: 89px;
    transition: all 0.5s;
}
.card-cos .col4 .dash-content .com-item .com-item-fa{
    display: none;
}
.card-cos .col4 .dash-content .com-item .com-item-fa:first-child{
    display: block;
}
.com-name a{
    text-decoration: none;
}
.bgcover{
    width: 100%;
    height: 200vh;
    background-color: #000;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10000;
    display: none;
}

.tooltip-inner {
    max-width: 260px;
    padding: 3px 5px;
    color: #000;
    text-align: center;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #333;
    text-align: left;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    bottom: 0;
    border-width: 0;
    border-bottom-color: #000;
}
.bs-tooltip-auto[x-placement^=bottom], .bs-tooltip-bottom{
    padding: 0;
}
.tooltip.show {
    opacity: 1;
    max-width: 260px;
}
.form-check-input{
    width: 13px;
    height: 13px;
}