@charset "UTF-8";

@font-face {
    font-family: 'myFontFamilyBold';
    src: url("https://www.oppo.com/content/dam/oppo/event-page-asset/imagine-if/upload-entry/v2/ArabicSansBeta0223-Bold.otf")
}

@font-face {
    font-family: 'myFontMedium';
    src: url("https://www.oppo.com/content/dam/oppo/event-page-asset/imagine-if/upload-entry/v2/ArabicSansBeta0223-Medium.otf")
}

@font-face {
    font-family: 'myFontRegular';
    src: url("https://www.oppo.com/content/dam/oppo/event-page-asset/imagine-if/upload-entry/v2/ArabicSansBeta0223-Regular.otf")
}

* {
    font-family: myFontRegular;
}

.el-select-dropdown__item.selected {
    font-family: myFontFamilyBold
}

.center-main {
    font-family: myFontRegular !important;
}

.zn--wrapper .font-b {
    font-family: myFontRegular;
}

.el-form-item__error {
    right: 0
}

.dialog-main .close-icon {
    left: 0.4em;
    right: initial;
}

.img-dialog .img-info-description {
    margin-right: 2em;
    margin-left: initial;
}

.center-main .container .container-personal .personal-info-item:nth-of-type(1) {
    margin-left: 8px;
    margin-right: initial;
}

.center-main .container .container-personal .label-text {
    text-align: right;
}

.mask-dialog .dialog-equity-qr .equity-qr-exit {
    font-family: myFontFamilyBold;
}

.center-main .container .container-personal .operate-btn {
    font-family: myFontFamilyBold;
}

.center-main .container .container-user .message-user {
    font-family: myFontFamilyBold;
}

.center-main .container .container-user .edit-btn {
    font-family: myFontMedium;
}

.center-main .container .container-user .exit-btn {
    margin-right: 12px;
    margin-left: initial;
    font-family: myFontMedium;
}

.center-main .container .container-content .work-select {
    font-family: myFontMedium;
}

.center-main .container .container-content .work-select .work-status {
    margin-left: 20px;
}

@media (min-width: 1440px) {
    .center-main .container .container-content .work-select .work-status {
        margin-left: 20px;
    }
}

.center-main .container .container-content .work-select .year-theme-text {
    direction: initial;
}


.center-main .container .container-content .icon-arrow {
    left: -24px;
    right: initial;
}

.center-main .container .container-content .icon-search {
    left: 0px;
    right: initial;
}

.center-main .container .container-content .icon-check {
    left: 24px;
    right: initial;
}

.center-main .container .container-content .activity-year-select {
    right: 0;
    border-radius: 0 12px 12px 0;
    border-left: none;
    box-shadow: 0px 3px 3px 0px #00000014;
}

.center-main .container .container-content .activity-year-select-item {
    text-align: right;
}

.center-main .container .container-content .activity-code-select {
    border-radius: 12px 0 0 12px;
    box-shadow: -3px 3px 3px 0 #00000014;
    border-right: none;
}

@media (min-width: 1440px) {
    .center-main .container .container-content .activity-code-select {
        right: 150px;
        left: initial;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    .center-main .container .container-content .activity-code-select {
        right: 150px;
        left: initial;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    .center-main .container .container-content .activity-code-select {
        right: 103px;
        left: initial;
    }
}

@media (max-width: 650px) {
    .center-main .container .container-content .activity-code-select {
        right: 103px;
        left: initial;
    }
}

.center-main .container .container-content .activity-code-select-item {
    padding: 10px 16px 10px 52px;
}

.center-main .container .container-content .activity-state-select {
    left: 20px;
    right: initial;
}

.center-main .container .container-content .activity-state-select-item {
    padding: 10px 16px 10px 52px;
    text-align: right;
}

@media (orientation: landscape) and (min-width: 650px) and (max-width: 1024px) {

    .center-main .container .container-content .activty-info:nth-of-type(2n-1) {
        margin-left: 1%;
        margin-right: initial;
    }
}

@media (orientation: portrait) and (min-width: 650px) and (max-width: 1024px) {
    .center-main .container .container-content .activty-info:nth-of-type(2n-1) {
        margin-left: 1%;
        margin-right: initial;
    }

    .center-main .container .container-content .activty-info:nth-of-type(2n) {
        margin-right: 1%;
        margin-left: initial;
    }
}

.center-main .container .container-content .activty-info .show-month {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 4px 12px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin: 20px;
    border-radius: 30px;
    background: #fff;
}

.center-main .container .container-content .activty-info .show-tag {
    left: 0px;
    right: initial;
}

.center-main .container .container-content .activty-info .show-month {
    right: 0px;
    left: initial;
    padding: 4px 12px;
    line-height: 20px;
    text-align: center;
    width: initial;
    height: initial;
}

.center-main .container .container-content .activty-info .show-tag {
    left: 0px;
    right: initial;
}

.center-main .container .container-content .activty-info .title {
    font-family: myFontFamilyBold;
    text-align: right;
}

.center-main .container .container-rewards .rewards-title {
    font-family: myFontFamilyBold;
}

.center-main .container .container-no-equity .container-no-equity-title {
    direction: ltr;
}

.center-main .no-works-upload .no-works-upload-file {
    font-family: myFontFamilyBold;
}

.center-main .no-login {
    direction: ltr;
}

.center-main .no-login .no-login-btn {
    font-family: myFontFamilyBold;
}
.center-main .container .no-works-upload .no-works-upload-file {
    line-height: 22px;
}

@media (min-width: 651px) and (max-width: 1024px) {
    .zn--wrapper header #zn-header-mo .switch-panel {
        left: 22px;
        right: initial !important;
    }
}

#center-main-rtl {
    direction: rtl;
    text-align: right;
}

#center-main-rtl .container-user .message-user,
.phone {
    direction: ltr;
}

.zn--wrapper header #zn-header-pc .switch-panel {
    left: 15px;
    right: initial !important;
}

.zn--wrapper header .logo-btn {
    padding: 15px 0 15px 40px !important;
}

.mr-4px {
    margin-left: 4px;
    margin-right: initial !important;
}