/* 基础样式配置 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: break-all;
}

body {
    font-size: 14px;
    margin: 0;
    padding: 0;
    min-width: 1300px;
    color: #333;
    font-family: "Microsoft YaHei";
}

a {
    color: #333;
    text-decoration: none;
}

input, textarea {
    background: none;
    outline: none;
    border: none;
    resize: none;
    border-radius: 0;
    font-family: "Microsoft YaHei";
}

    input:focus {
        border: none;
    }

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    border-spacing: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.flow {
    overflow: hidden;
}

.f-auto {
    margin: 0 auto;
}

.inline {
    display: inline-block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.shadow {
    box-shadow: 0 0 10px var(--border-color);
}

.bgBox {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.f-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-line2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.f-line3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.f-line4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.f-pointer {
    cursor: pointer;
}

.Transition {
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.imgTrim {
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.mt-20 {
    margin-top: 20px;
}
/* 基础样式配置 */
.zg_container {
    width: 1200px;
    margin: 0 auto;
}

.whiteContainer {
    background-color: #FFFFFF;
}

.Header_ {
    position: fixed;
    width: 100%;
    height: 180px;
    left: 0;
    top: 0;
    z-index: 21;
    background-color: var(--white-color);
    box-shadow: 0 0 10px var(--border-color);
}

.Header_main {
    height: 120px;
    line-height: 120px;
    background-color: var(--blue-color);
    color: var(--white-color);
}

.Header_logo {
    width: 56px;
    height: 56px;
    margin-top: 32px;
    margin-right: 15px;
}

.Header_title {
    position: relative;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5px;
    margin-right: 40px;
}

    .Header_title::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 40px;
        background-color: var(--white-color);
        position: absolute;
        right: -20px;
        top: 42px;
    }

.Header_sub {
    font-size: 22px;
    /* font-weight: bold; */
}

.Header_menu a {
    color: var(--white-color);
    font-size: 16px;
    margin-left: 20px;
}

    .Header_menu a.Menu_last {
        margin-left: 40px;
    }

.Header_menu img {
    margin-right: 5px;
}

.Header_tabs {
    padding: 0 24px;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}

    .Header_tabs a {
        position: relative;
        font-size: 20px;
        color: var(--grey-color);
    }

        .Header_tabs a::after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 4px;
            border-radius: 4px;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .Header_tabs a.cur {
            color: var(--blue-color);
            font-weight: bold;
        }

            .Header_tabs a.cur::after {
                background-color: var(--blue-color);
            }

        .Header_tabs a:hover {
            color: var(--blue-color);
            font-weight: bold;
        }

.Header_empty {
    width: 100%;
    height: 180px;
}

.Footer_ {
    height: 80px;
    line-height: 80px;
    background-color: #454f60;
    color: #FFFFFF;
    font-size: 18px;
    margin-top: 50px;
}

.Footer_main {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}

.Title_ {
    height: 50px;
    line-height: 50px;
    padding: 0 17px;
}

.Title_limit {
    height: 40px;
    line-height: 40px;
    padding: 0 13px;
    border-bottom: 1px solid var(--border-color);
    font-size: 18px;
    font-weight: bold;
}

.Title_main {
    font-size: 24px;
    font-weight: bold;
}

    .Title_main::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 22px;
        border-radius: 4px;
        background-color: var(--main-color);
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 10px;
    }

.Title_tabs span {
    position: relative;
    font-size: 18px;
    margin-left: 40px;
    cursor: pointer;
}

    .Title_tabs span::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: -5px;
    }

    .Title_tabs span.cur {
        color: var(--main-color);
        font-weight: bold;
    }

        .Title_tabs span.cur::after {
            background-color: var(--main-color);
        }

    .Title_tabs span:hover {
        color: var(--main-color);
        font-weight: bold;
    }

.Title_more {
    color: var(--grey-color);
}

    .Title_more:hover {
        color: var(--main-color);
    }

.MS_empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 5px;
}

.Mslist_hot {
    width: 890px;
    height: 573px;
    background-color: var(--white-color);
}

.Hot_list {
    padding: 13px 13px 0 13px;
}

.Hot_item {
    padding: 10px 13px;
    width: 33.3%;
}

    .Hot_item a {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 144px;
        border: 1px solid var(--border-color);
        top: 0;
        overflow: hidden;
    }

        .Hot_item a:hover {
            box-shadow: 0 0 10px var(--border-color);
            top: -5px;
        }

.Hot_subject {
    width: 100px;
    height: 100px;
    background-color: var(--blue-color);
    padding-left: 23px;
    color: var(--white-color);
    line-height: 170px;
    transform: rotate(45deg);
    position: absolute;
    right: -50px;
    top: -50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Hot_user {
    padding: 20px 24px;
}

.Hot_userhead {
    width: 64px;
    height: 64px;
    border-radius: 64px;
    margin-right: 15px;
}

.Hot_username {
    font-size: 18px;
    font-weight: bold;
    padding-right: 20px;
    margin-top: 7px;
}

.Hot_msname {
    font-size: 15px;
    margin-top: 6px;
}

.Hot_data {
    line-height: 37px;
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    border-top: 1px solid var(--border-color);
}

    .Hot_data img {
        margin-right: 3px;
        top: -1px;
    }

.Mslist_me {
    width: 290px;
    height: 233px;
    background-color: var(--white-color);
}

.Me_tabs {
    height: 43px;
    line-height: 41px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 19px;
    font-size: 18px;
}

    .Me_tabs span {
        cursor: pointer;
    }

        .Me_tabs span.cur {
            color: var(--main-color);
            border-bottom: 2px solid var(--main-color);
            font-weight: bold;
        }

        .Me_tabs span:hover {
            color: var(--main-color);
            font-weight: bold;
        }

.Mslist_ {
    height: 190px;
    padding: 10px 18px 0 18px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .Mslist_ .Hot_user {
        padding: 10px 6px;
    }

        .Mslist_ .Hot_user:hover {
            background-color: var(--main-color);
            border-radius: 8px;
            color: var(--white-color);
        }

.Mslist_Msnews {
    width: 290px;
    /*height: 320px;*/
    background-color: var(--white-color);
}

.Msnews_item {
    position: relative;
    left: 0;
    padding: 20px 0 15px 0;
    border-bottom: 1px dashed var(--border-color);
}

    .Msnews_item:hover {
        /*left: -5px;*/
    }

.Msnews_userhead {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 7px;
}

.Msnews_username {
    width: 75px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
}

.Msnews_msname {
    width: 130px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}

.Msnews_memo {
    color: var(--grey-color);
    font-size: 12px;
    margin-top: 10px;
}

    .Msnews_memo span {
        color: var(--main-color);
    }

.Build_list {
    padding: 11px;
}

.Build_item {
    width: 25%;
    padding: 11px;
}

.Build_item_a {
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    height: 252px;
    padding: 11px;
    border: 1px solid var(--border-color);
}

.Build_respic {
    position: relative;
    width: 100%;
    height: 146px;
    border-radius: 8px;
    overflow: hidden;
}

    .Build_respic img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

.Build_resname {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.Build_resmemo {
    color: var(--grey-color);
    margin-top: 5px;
}

.Build_msname {
    max-width: 60%;
    color: var(--grey-color);
    font-weight: bold;
    margin-top: 5px;
}

.Build_username {
    max-width: 40%;
    color: var(--grey-color);
    font-weight: bold;
    margin-top: 5px;
}

.Build_item_a:hover {
    top: -5px;
    box-shadow: 0 0 10px var(--border-color);
}

    .Build_item_a:hover .Build_respic img {
        transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
    }

.News_list {
    padding: 20px 0 30px 30px;
}

.News_first {
    position: relative;
    width: 50%;
    height: 334px;
    overflow: hidden;
}

    .News_first img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

    .News_first:hover img {
        transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
    }

    .News_first .News_firsttitle {
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        background-color: rgba(0, 0, 0, 0.5);
        color: var(--white-color);
        left: 0;
        bottom: 0;
        z-index: 3;
    }

.News_more {
    width: 50%;
    padding: 0 15px;
}

.News_item {
    display: block;
    padding: 0 15px;
    height: 48px;
    line-height: 48px;
    border-radius: 8px;
}

.News_itemtitle {
    width: 360px;
    font-size: 18px;
}

.News_itemdate {
    color: var(--grey-color);
}

.News_item:hover {
    background-color: var(--main-color);
    color: var(--white-color);
}

    .News_item:hover .News_itemdate {
        color: var(--white-color);
    }

.Fine_list {
    padding: 11px;
}

    .Fine_list .Build_username {
        font-size: 18px;
        line-height: 30px;
    }

    .Fine_list .Build_msname {
        line-height: 30px;
        margin-top: 7px;
    }

    .Fine_list .Build_item_a {
        height: 210px;
    }

.Mssort_ {
    width: 386px;
    height: 345px;
    margin-right: 20px;
}

.Mssort_list {
    padding: 10px;
}

.Mssort_item {
    display: block;
    width: 100%;
    line-height: 54px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 8px;
    text-align:left;
}

.Sort_idx {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 2px;
    text-align: center;
    margin-top: 13px;
    font-size: 18px;
}

.Mssort_item:nth-child(1) .Sort_idx {
    color: var(--white-color);
    background-color: var(--sort1-color);
}

.Mssort_item:nth-child(2) .Sort_idx {
    color: var(--white-color);
    background-color: var(--sort2-color);
}

.Mssort_item:nth-child(3) .Sort_idx {
    color: var(--white-color);
    background-color: var(--sort3-color);
}

.Sort_name {
    width: 230px;
    font-size: 18px;
    padding-left:15px;
}

.Sort_data {
    width: 130px;
    font-size: 18px;
    text-align: right;
}

.Mssort_item:hover {
    background-color: var(--main-color);
    color: var(--white-color);
}

.Mstotal_ {
    width: 388px;
    height: 345px;
}

.Toral_list {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 15px;
}

.Toral_item {
    width: 46%;
}

    .Toral_item img {
        margin-right: 5px;
    }

.Toral_data {
    color: var(--main-color);
    font-size: 18px;
    text-align: center;
}

.Toral_name {
    font-size: 18px;
    text-align: center;
}


.User_ {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
}

.User_head {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    border: 7px solid #c6d6ff;
}

.User_name {
    font-size: 40px;
    color: var(--white-color);
    margin-top: 15px;
}

.User_sub {
    font-size: 18px;
    color: var(--white-color);
    margin-top: 15px;
}

.Index_tabs {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    display: flex;
    justify-content: space-around;
}

    .Index_tabs a.cur, .Index_tabs a:hover {
        color: var(--main-color);
        font-weight: bold;
    }

.Index_newslist .News_itemtitle {
    width: 240px;
}

.Index_newslist .News_first {
    height: 240px;
}

.Index_buildlist .Build_item {
    width: 33.3%;
}

.Index_buildlist .Build_username {
    font-size: 12px;
    font-weight: normal;
    margin-top: 7px;
}

.Index_topiclist {
    padding-bottom: 20px;
}

.Topic_item {
    padding: 0 30px;
    height: 48px;
    line-height: 48px;
}

.Topic_title {
    width: 430px;
    margin-right: 30px;
    font-size: 18px;
}

.Topic_uname {
    font-size: 18px;
}

.Topic_cdate {
    color: var(--grey-color)
}

.Topic_item:hover .Topic_title {
    color: var(--main-color);
}

.Index_teachlist .Build_item {
    width: 33.3%;
}

.Index_teachlist .Build_item_a {
    height: 230px;
}

.Message_Container {
    padding: 0 36px;
}

.Message_title {
    line-height: 54px;
    font-size: 18px;
    font-weight: bold;
}

.Message_box {
    width: 100%;
    border: 1px solid var(--border-color);
}

    .Message_box textarea {
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        padding: 10px 20px;
        font-family: "Microsoft YaHei";
        font-size: 15px;
        line-height: 24px;
    }

.Message_nums {
    padding: 0 20px;
    text-align: right;
    color: var(--grey-color);
    line-height: 30px;
}

.Message_btn {
    padding: 20px 0 0 0;
    text-align: right;
}

    .Message_btn span {
        display: inline-block;
        width: 116px;
        height: 46px;
        line-height: 46px;
        background-color: var(--main-color);
        text-align: center;
        border-radius: 8px;
        color: var(--white-color);
        cursor: pointer;
        font-size: 18px;
    }

        .Message_btn span:active {
            opacity: 0.9;
        }

.Message_list {
    padding-bottom: 20px;
}

.Message_item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.Message_list .Message_item:last-child {
    border-bottom: none;
}

.Message_left {
    width: 110px;
    text-align: center;
}

    .Message_left .Message_head {
        width: 64px;
        height: 64px;
        border-radius: 64px;
    }

    .Message_left .Message_name {
        font-size: 16px;
        margin-top: 7px;
    }

.Message_right {
    width: 688px;
}

.Message_desc {
    line-height: 25px;
    min-height: 80px;
}

.Message_time {
    font-size: 12px;
    color: var(--grey-color);
    text-align: right;
}

.Msintro_user {
    padding: 15px 18px;
}

.Intro_head {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin-right: 15px;
}

.Intro_name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 25px;
}

.Intro_sub {
    color: var(--grey-color);
    margin-top: 5px;
}

.Intro_desc {
    padding: 0 18px 10px 18px;
    color: var(--grey-color);
    line-height: 25px;
    border-bottom: 1px dashed var(--border-color);
}

.Intro_data {
    padding: 10px 18px 15px 18px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.Intro_num {
    font-size: 18px;
    font-weight: bold;
}

.Intro_tip {
    color: var(--grey-color);
}

.Trend_head {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
}

.Mstrend_list {
    padding: 0 18px;
    max-height: 460px;
    overflow-x: hidden;
    overflow-y: auto;
}

.Mstrend_item {
    display: block;
    padding: 15px 0;
    border-bottom: 1px dashed var(--border-color);
}

.Mstrend_list .Mstrend_item:last-child {
    border-bottom: none;
}

.Mstrend_item:hover {
    color: var(--main-color);
}

.Trend_name {
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    max-width: 72px;
}

.Trend_msname {
    font-size: 16px;
    max-width: 120px;
    line-height: 30px;
}

.Trend_memo {
    font-size: 12px;
    color: var(--grey-color);
    margin-top: 10px;
}

    .Trend_memo span {
        color: var(--main-color);
    }

.Msmember_item {
    width: 50%;
    padding: 10px 5px;
    text-align: center;
}

.Member_head {
    width: 64px;
    height: 64px;
    border-radius: 64px;
}

.Member_name {
    font-size: 16px;
    margin-top: 5px;
}

.Msvisit_list {
    padding: 0 18px;
}

.Visit_btn {
    line-height: 40px;
    color: var(--grey-color);
    text-align: center;
}

.Visit_more {
    cursor: pointer;
}

    .Visit_more::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 1px solid var(--grey-color);
        border-bottom: 1px solid var(--grey-color);
        transform: rotate(45deg);
        vertical-align: middle;
        position: relative;
        top: -4px;
        margin-left: 5px;
    }

    .Visit_more:hover {
        color: var(--main-color);
    }

        .Visit_more:hover::after {
            border-right: 1px solid var(--main-color);
            border-bottom: 1px solid var(--main-color);
        }

.Mswm_tab_list {
    text-align: center;
    font-size: 16px;
    color: var(--grey-color);
    line-height: 60px;
    padding: 10px 0;
}

.Mswm_tab_item {
    cursor: pointer;
    margin-top: 10px;
}

    .Mswm_tab_item:hover {
        color: var(--main-color);
    }

    .Mswm_tab_item span {
        padding: 0 20px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }

    .Mswm_tab_item.cur {
        background-color: var(--main-color);
        color: var(--white-color);
    }

        .Mswm_tab_item.cur span {
            border-left: 4px solid var(--white-color);
        }

.Upload_btn {
    display: block;
    line-height: 62px;
    height: 62px;
    background-color: var(--white-color);
    color: var(--main-color);
    text-align: center;
    font-size: 16px;
    border-radius: 8px;
}

    .Upload_btn i {
        position: relative;
        display: inline-block;
        width: 14px;
        height: 7px;
        border: 2px solid var(--main-color);
        border-top: none;
        top: 2px;
        margin-right: 15px;
    }

        .Upload_btn i::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 4px;
            height: 4px;
            border-left: 2px solid var(--main-color);
            border-top: 2px solid var(--main-color);
            transform: rotate(45deg);
            left: 50%;
            margin-left: -3px;
            top: -6px;
        }

        .Upload_btn i::after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 2px;
            height: 8px;
            background-color: var(--main-color);
            left: 50%;
            margin-left: -1px;
            top: -6px;
        }

.Mswm_res_list {
    min-height: 592px;
}

.Mswm_res_item {
    padding: 0 22px;
}

.Mswm_res_inner {
    padding: 30px 0;
    border-bottom: 1px solid #e5ebf3;
}

.Mswm_res_item:last-child .Mswm_res_inner {
    border-bottom: none;
}

.Mswm_res_info {
    width: 600px;
}

.Mswm_res_pic {
    position: relative;
    width: 168px;
    height: 98px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 20px;
}

    .Mswm_res_pic img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

.Mswm_res_title {
    font-size: 20px;
    font-weight: bold;
}

.Mswm_res_memo {
    font-size: 16px;
    color: var(--grey-color);
    margin-top: 5px;
}

.Mswm_res_intro {
    font-size: 16px;
    color: var(--grey-color);
    margin-top: 24px;
}

.Mswm_res_btns {
    display: none;
}

    .Mswm_res_btns a {
        color: var(--main-color);
        display: inline-block;
        line-height: 28px;
        margin-top: 35px;
        margin-right: 30px;
    }

.Mswm_res_item:hover {
    background-color: #e5ebf3;
}

    .Mswm_res_item:hover .Mswm_res_btns {
        display: inline-block;
    }

    .Mswm_res_item:hover .Mswm_res_pic img {
        transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
    }

.Msrm_tab_item {
    width: 106px;
    text-align: center;
    height: 37px;
    line-height: 37px;
    background-color: #c7d7fd;
    color: var(--grey-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-right: 2px;
    cursor: pointer;
    font-size: 16px;
}

    .Msrm_tab_item:hover {
        color: var(--main-color);
        font-weight: bold;
    }

    .Msrm_tab_item.cur {
        background-color: var(--white-color);
        color: var(--main-color);
        font-weight: bold;
    }

    .Msrm_tab_item img {
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 5px;
    }

.Msrm_box {
    padding: 0 24px;
}

.Msrm_screen_search {
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
    line-height: 48px;
}

.Search_all input[type='checkbox'] {
    vertical-align: middle;
    position: relative;
    top: -2px;
    cursor: pointer;
}

.Search_all label {
    padding-left: 5px;
    cursor: pointer;
}

.Search_right {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    padding-right: 30px;
}

    .Search_right select {
        height: 34px;
        border: none;
        border-right: 1px solid var(--border-color);
        outline: none;
    }

.Search_input {
    width: 180px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
}

.Search_right img {
    position: absolute;
    right: 7px;
    top: 7px;
}

.Search_btn {
    background-color: var(--main-color);
    color: var(--white-color);
    padding: 0 15px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    line-height: 34px;
    border: 1px solid var(--main-color);
    margin-top: 6px;
}

.Search_btn_hollow {
    padding: 0 15px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    line-height: 34px;
    border: 1px solid var(--border-color);
}

.Search_all select {
    height: 36px;
    border: none;
    border: 1px solid var(--border-color);
    outline: none;
    border-radius: 4px;
    margin-left: 10px;
    padding: 0 10px;
}
.Msrm_screen_list {
    padding-top: 15px;
    border-bottom: 1px solid var(--border-color);
}

.Msrm_screen_item {
    height: 48px;
    line-height: 48px;
    color: var(--grey-color);
    font-size: 16px;
    padding: 0 10px;
    cursor: pointer;
    /*margin-right: 15px;*/
}

    .Msrm_screen_item.cur {
        color: var(--main-color);
        border-bottom: 2px solid var(--main-color);
    }

.Msrm_screen_btn {
    color: var(--white-color);
    background-color: var(--main-color);
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    border-radius: 6px;
    margin-top: 5px;
    margin-left: 15px;
    cursor: pointer;
}

    .Msrm_screen_btn.hollow {
        color: var(--main-color);
        background-color: transparent;
        line-height: 36px;
        border: 1px solid var(--main-color);
    }

.Msrm_list {
    min-height: 500px;
}

.Msrm_item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    line-height: 66px;
}

.Msrm_item_pic {
    position: relative;
    width: 112px;
    height: 66px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 20px;
}

    .Msrm_item_pic img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.Msrm_item_title {
    font-size: 14px;
    font-weight: bold;
    width: 260px;
    margin-right: 10px;
}

.Msrm_item_memo {
    color: var(--grey-color);
    width: 300px;
    margin-right: 10px;
}

    .Msrm_item_memo span /*:first-child*/ {
        margin-right: 8px;
    }

.Msrm_item_data {
    color: var(--grey-color);
}

    .Msrm_item_data span::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 5px;
        background-size: 100% 100%;
    }

    .Msrm_item_data span:nth-child(1)::before {
        background-image: url(../../img/FTStudioSystem/icon/lookicon.png);
    }

    .Msrm_item_data span:nth-child(2)::before {
        background-image: url(../../img/FTStudioSystem/icon/downicon.png);
    }

    .Msrm_item_data span:first-child {
        margin-right: 15px;
    }

.Msrm_item_btn {
    color: var(--main-color);
    padding: 0 15px;
    cursor: pointer;
}

.Mspm_list {
    padding: 12px;
    min-height: 500px;
}

.Mspm_item {
    width: 25%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

    .Mspm_item.cur {
        border: 1px solid var(--main-color);
    }

.Mspm_item_head {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin-right: 10px;
}

.Mspm_item_name {
    margin-top: 16px;
    font-weight: bold;
    font-size: 16px;
}

.Mspm_item_sub {
    color: var(--grey-color);
    margin-top: 10px;
}

.Mspm_item_school {
    color: var(--grey-color);
}

.Msset_con {
    min-height: 660px;
    padding: 30px;
}

.Msset_form_item {
    padding: 15px 0;
}

.Msset_form_tip {
    width: 266px;
    text-align: right;
    padding-right: 25px;
    color: var(--grey-color);
    line-height: 38px;
}

.Msset_form_item input[type='text'] {
    width: 487px;
    height: 38px;
    border: 1px solid var(--border-color);
    padding: 0 15px;
    border-radius: 6px;
}

.Msset_form_item textarea {
    width: 487px;
    height: 188px;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 6px;
}

.Msset_form_item .Msset_form_radios {
    width: 587px;
    line-height: 38px;
}

.Msset_form_item input[type='radio'] {
    position: relative;
    top: 1px;
}

.Msset_form_item label {
    margin-right: 20px;
}

.Msset_form_submit {
    width: 134px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background-color: var(--main-color);
    border-radius: 6px;
    color: var(--white-color);
    cursor: pointer;
    margin: 90px auto 0;
}

    .Msset_form_submit:active {
        opacity: 0.9;
    }

.Msset_form_head {
    width: 136px;
    height: 136px;
    border-radius: 136px;
    margin: 100px auto 0;
}

    .Msset_form_head img {
        width: 100%;
        height: 100%;
    }

.Msset_skin {
    width: 224px;
    margin-right: 25px;
    margin-bottom: 30px;
    cursor: pointer;
}

.Msset_skin_pic {
    position: relative;
    width: 224px;
    height: 132px;
    border-radius: 8px;
    overflow: hidden;
}

    .Msset_skin_pic img {
        width: 100%;
        height: 100%;
    }

.Msset_skin_name {
    margin-top: 10px;
}

.Msset_skin.cur .Msset_skin_pic {
    border: 2px solid var(--main-color);
}

    .Msset_skin.cur .Msset_skin_pic::after {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        position: absolute;
        background-color: var(--main-color);
        right: -1px;
        top: -1px;
        border-bottom-left-radius: 8px;
        background-image: url(../../img/FTStudioSystem/icon/checkIcon.png);
        background-repeat: no-repeat;
        background-position: center center;
    }

.Album_list {
    padding: 10px;
    min-height: 660px;
}

.Album_item_outer {
    width: 25%;
    padding: 10px;
}

.Album_item {
    width: 100%;
    height: 252px;
    border: 1px solid var(--border-color);
    padding: 10px;
}

.Album_item_pic {
    position: relative;
    width: 100%;
    height: 188px;
}

    .Album_item_pic img.Album_item_cover {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

.Album_item_name {
    font-weight: bold;
    font-size: 18px;
    max-width: 80%;
    line-height: 50px;
}

.Album_item_num {
    color: var(--grey-color);
    line-height: 50px;
}

.Album_drop {
    display: none;
    position: absolute;
    width: 26px;
    height: 31px;
    right: 7px;
    top: 7px;
    cursor: pointer;
}

    .Album_drop span {
        display: inline-block;
        width: 26px;
        height: 26px;
        line-height: 26px;
        background-color: #cac8c8;
        border-radius: 4px;
        text-align: center;
    }

    .Album_drop ul {
        display: none;
        position: absolute;
        width: 56px;
        right: 0;
        top: 100%;
        background-color: #cac8c8;
        color: #666666;
        line-height: 31px;
        text-align: center;
        border-radius: 4px;
        overflow: hidden;
    }

        .Album_drop ul li:hover {
            background-color: var(--main-color);
            color: var(--white-color)
        }

.Album_item:hover .Album_drop {
    display: inline-block;
}

.Album_drop:hover ul {
    display: inline-block;
}

.Ms_Crumbs {
    font-size: 16px;
    color: var(--grey-color);
}

    .Ms_Crumbs a {
        color: var(--grey-color);
    }

        .Ms_Crumbs a:hover {
            color: var(--main-color);
        }

.Msdetail_title {
    line-height: 36px;
    font-size: 28px;
    font-weight: bold;
    margin-top: 20px;
}

.Msdetail_info {
    font-size: 16px;
    color: var(--grey-color);
    margin-top: 10px;
}

    .Msdetail_info img {
        vertical-align: middle;
        position: relative;
        top: -1px;
    }

    .Msdetail_info .fl span {
        margin-right: 15px;
    }

    .Msdetail_info .fr span {
        margin-left: 15px;
    }

.Msdetail_content {
    margin-top: 20px;
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 20px;
    line-height: 36px;
    color: var(--grey-color);
}

    .Msdetail_content video {
        width: 100%;
        height: 646px;
        border-radius: 8px;
        background-color: #333;
    }

.Msdetail_other {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}

    .Msdetail_other a {
        font-weight: normal;
        color: var(--main-color);
        margin-right: 50px;
        border-bottom: 1px solid var(--main-color);
        margin-top: 10px;
        line-height: 40px;
    }

.Msdetail_msg {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

    .Msdetail_msg img {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        margin-right: 16px;
    }

    .Msdetail_msg textarea {
        width: 1036px;
        height: 157px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

.MsdMsg_btns {
    text-align: right;
    margin-top: 15px;
}

.MsdMsg_btn {
    display: inline-block;
    width: 98px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: var(--main-color);
    color: var(--white-color);
    border-radius: 6px;
    cursor: pointer;
}

    .MsdMsg_btn:active {
        opacity: 0.9;
    }

.MsdMsg_item {
    border-top: 1px solid var(--border-color);
    margin-top: 25px;
    padding-top: 25px;
}

.MsdMsg_head {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    margin-right: 16px;
}

.MsdMsg_name {
    font-size: 16px;
    font-weight: bold;
    line-height: 60px;
}

.MsdMsg_content {
    width: 60%;
    font-size: 16px;
    line-height: 30px;
    margin-top: 15px;
}

.MsdMsg_time {
    color: var(--grey-color);
    line-height: 60px;
}


/* 找回密码 */
.findP_title {
    padding-top: 36px;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
}

.findP_step {
    margin-top: 30px;
}

.findP_step_item {
    position: relative;
    text-align: center;
    width: 25%;
    z-index: 1;
}

    .findP_step_item::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 12px;
        background-color: #e5e5e5;
        position: absolute;
        left: 0;
        top: 21px;
    }

    .findP_step_item .num {
        position: relative;
        width: 54px;
        height: 54px;
        border-radius: 54px;
        background-color: #bfbfbf;
        border: 5px solid #FFFFFF;
        color: #FFFFFF;
        z-index: 1;
        line-height: 42px;
        font-size: 30px;
        font-weight: bold;
        margin: 0 auto;
    }

    .findP_step_item .text {
        font-size: 20px;
        margin-top: 10px;
    }

    .findP_step_item.cur::after {
        background-color: #246af1;
    }

    .findP_step_item.cur .num {
        background-color: #246af1;
    }

    .findP_step_item.cur .text {
        color: #246af1;
    }

.findP_btns {
    text-align: center;
}

    .findP_btns span {
        display: inline-block;
        width: 200px;
        height: 60px;
        line-height: 58px;
        background-color: #246af1;
        border: 1px solid #246af1;
        color: #FFFFFF;
        border-radius: 6px;
        margin: 0 10px;
        font-size: 20px;
        cursor: pointer;
        margin-top: 10px;
    }

        .findP_btns span.hollow {
            background-color: #FFFFFF;
            border: 1px solid #666666;
            color: #666666;
        }

.findP_pics img {
    width: 100%;
    display: none;
}

    .findP_pics img:first-child {
        display: block;
    }


/***相册新增***/
.Album_Edit {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 19;
    display: none;
}

.Album_Edit_area {
    position: absolute;
    width: 468px;
    height: 330px;
    left: 50%;
    margin-left: -234px;
    top: 200px;
    background: #FFFFFF;
}

.Album_Edit_title {
    line-height: 42px;
    padding-left: 16px;
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
}

.Album_Edit_input {
    padding-left: 50px;
    margin-top: 70px;
    font-size: 16px;
}

    .Album_Edit_input input {
        width: 295px;
        height: 50px;
        border: 1px solid #b1b0b0;
        border-radius: 6px;
        padding: 0 10px;
    }

.Album_Edit_btns {
    text-align: center;
    margin-top: 70px;
}

    .Album_Edit_btns span {
        display: inline-block;
        width: 100px;
        height: 48px;
        line-height: 48px;
        border: 1px solid var(--main-color);
        color: var(--white-color);
        background-color: var(--main-color);
        border-radius: 6px;
        cursor: pointer;
        margin: 0 3px;
    }

        .Album_Edit_btns span.hollow {
            border: 1px solid var(--border-color);
            color: var(--grey-color);
            background-color: var(--white-color);
        }

        .Album_Edit_btns span:active {
            opacity: 0.9;
        }

.Msrm_screen_item select {
    min-width: 177px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--grey-color);
    font-size: 16px;
    outline: none;
}

.Album_uploadItem {
    position: relative;
    width: 214px;
    height: 155px;
    margin-top: 18px;
    margin-left: 18px;
}

    .Album_uploadItem img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.Album_uploadItemBtns {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    color: var(--white-color);
    padding-top: 20px;
}

    .Album_uploadItemBtns span {
        display: block;
        width: 70px;
        margin: 24px auto 0;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
    }

.Album_uploadItem_add {
    border: 1px solid var(--border-color);
}

    .Album_uploadItem_add input {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
    }

.Album_upload_add input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
}

.add_nameline {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 25px auto;
}

    .add_nameline::before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: #999999;
        position: absolute;
        top: 50%;
        margin-top: -1px;
        left: 0;
    }

    .add_nameline::after {
        content: '';
        display: inline-block;
        height: 100%;
        width: 2px;
        background-color: #999999;
        position: absolute;
        left: 50%;
        margin-left: -1px;
        top: 0;
    }

.add_nametext {
    text-align: center;
    font-size: 16px;
}

.MsUP_form {
    padding: 30px 0 50px 0;
}

.MsUP_form_item {
    padding: 15px 0;
}

.MsUP_label {
    width: 264px;
    height: 50px;
    line-height: 50px;
    padding-right: 26px;
    text-align: right;
    color: var(--grey-color);
    font-size: 16px;
}

.MsUP_form_btn {
    position: relative;
    width: 186px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--main-color);
    color: #FFFFFF;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

    .MsUP_form_btn input[type='file'] {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: pointer;
        opacity: 0;
    }

.MsUP_form_input {
    width: 360px;
    height: 50px;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 16px;
}

.MsUP_form_select {
    width: 360px;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 16px;
    outline: none;
}

.MsUP_form_richtext {
    width: 740px;
    height: 186px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
}

.MsUP_form_inputmini {
    width: 265px;
    height: 50px;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 16px;
}

.MsUP_form_btns {
    margin-top: 40px;
    text-align: center;
}

    .MsUP_form_btns span {
        display: inline-block;
        width: 140px;
        height: 50px;
        line-height: 48px;
        font-size: 16px;
        border-radius: 6px;
        border: 1px solid var(--main-color);
        background-color: var(--main-color);
        color: #FFFFFF;
        cursor: pointer;
        margin: 0 5px;
    }

        .MsUP_form_btns span:active {
            opacity: 0.9;
        }

        .MsUP_form_btns span.hollow {
            border: 1px solid var(--border-color);
            background-color: #FFFFFF;
            color: var(--grey-color);
        }

.AItem_item {
    position: relative;
    width: 100%;
    height: 252px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

    .AItem_item img.AItem_cover {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.AItem_name {
    position: absolute;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 10px;
}

.AItem_setting {
    position: absolute;
    width: 110px;
    height: 150px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 2;
    padding: 16px 16px 0;
    line-height: 30px;
    display: none;
}

.AItem_item:hover .AItem_setting {
    display: inline-block;
}

.AItem_setting span {
    cursor: pointer;
}

.AItem_setting img {
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 5px;
}

.Album_Pic_Preview {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 22;
    display: none;
}

.APreview_box {
    position: absolute;
    width: 80%;
    height: 90%;
    background-color: #FFFFFF;
    left: 10%;
    top: 5%;
    padding: 60px 120px;
}

.APreview_inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .APreview_inner img {
        max-width: 100%;
        max-height: 100%;
    }

.APreview_prev {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 1px solid var(--grey-color);
    left: 30px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
}

.APreview_next {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 1px solid var(--grey-color);
    right: 30px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
}

.APreview_prev::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 1px solid var(--grey-color);
    border-bottom: 1px solid var(--grey-color);
    left: 50%;
    top: 50%;
    margin-left: -6px;
    margin-top: -10px;
    transform: rotate(45deg);
}

.APreview_next::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-right: 1px solid var(--grey-color);
    border-top: 1px solid var(--grey-color);
    left: 50%;
    top: 50%;
    margin-left: -14px;
    margin-top: -10px;
    transform: rotate(45deg);
}

.APreview_prev:hover {
    border: 1px solid var(--main-color);
}

    .APreview_prev:hover::before {
        border-left: 1px solid var(--main-color);
        border-bottom: 1px solid var(--main-color);
    }

.APreview_next:hover {
    border: 1px solid var(--main-color);
}

    .APreview_next:hover::before {
        border-right: 1px solid var(--main-color);
        border-top: 1px solid var(--main-color);
    }
/***市级资源认证***/
.resScreen_item {
    position: relative;
    padding: 7px 20px 7px 100px;
    min-height: 42px;
}

    .resScreen_item span.resScreen_label {
        position: absolute;
        width: 100px;
        height: 42px;
        line-height: 42px;
        padding-left: 20px;
        font-size: 16px;
        color: #999999;
        left: 0;
        top: 7px;
    }

    .resScreen_item li {
        /*width: 100px;*/
        height: 42px;
        font-size: 16px;
        color: #666666;
    }

        .resScreen_item li span {
            display: flex;
            max-width: 100%;
            height: 42px;
            padding: 1px 7px;
            justify-content: center;
            align-items: center;
            line-height: 20px;
            overflow: hidden;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
        }

            .resScreen_item li span:hover {
                color: var(--main-color);
            }

        .resScreen_item li.cur span {
            color: var(--white-color);
            background-color: var(--main-color);
        }
/***邀请人员***/
.mesk_ {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.cSchool_dialog {
    position: absolute;
    width: 640px;
    height: 520px;
    left: 50%;
    top: 50%;
    margin-left: -320px;
    margin-top: -245px;
    background-color: var(--white-color);
}

.cSchool_inner {
    padding: 20px;
}

.cSchool_list {
    width: 100%;
    height: 320px;
    background-color: #f6f6f6;
    padding: 10px 0;
    overflow-y: auto;
}

.cSchool_item {
    width: 33.3%;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
}
    .cSchool_item:hover {
        color: var(--main-color);
    }

.cSchool_btn {
    cursor: pointer;
    width: 144px;
    height: 50px;
    line-height: 50px;
    color: var(--white-color);
    background-color: var(--main-color);
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
}

    .cSchool_btn:active {
        opacity: 0.9;
    }

.Role_dialog {
    position: absolute;
    width: 500px;
    height: 360px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -180px;
    background-color: var(--white-color);
}

.Role_title {
    line-height: 50px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
}

.Role_radios {
    padding: 88px 0;
    text-align: center;
}

    .Role_radios input[type='radio'] {
        vertical-align: middle;
        position: relative;
        top: -1px;
        cursor: pointer;
        margin-left: 20px;
    }

    .Role_radios label {
        cursor: pointer;
    }

.Role_btns {
    text-align: center;
}

    .Role_btns span {
        display: inline-block;
        width: 140px;
        height: 50px;
        line-height: 48px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        margin: 0 5px;
    }

        .Role_btns span:active {
            opacity: 0.9;
        }

        .Role_btns span.Role_btn_yes {
            background-color: var(--main-color);
            color: var(--white-color);
            border: 1px solid var(--main-color);
        }

        .Role_btns span.Role_btn_no {
            color: var(--grey-color);
            border: 1px solid var(--border-color);
        }