@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;
}

.upload-wrapper {
    font-family: myFontRegular !important;
}
#upload-page .upload-wrapper .form-part .form-item-container .form-item .item-name>span {
    font-family: myFontRegular !important;
}
.upload-page-rtl .el-form-item__error {
    right: 0;
    left: initial
}
.upload-page-rtl .el-textarea .el-input__count {
    left: 10px;
    right: initial;
}
.upload-page-rtl .el-select-dropdown__item.selected {
    font-family: myFontFamilyBold
}
.upload-page-rtl #id-rewards-list .title {
    font-family: myFontRegular;
}
.upload-page-rtl #id-rewards-list .code {
    font-family: myFontRegular;
}
.upload-page-rtl #id-rewards-list .link-btn {
    font-family: myFontFamilyBold;
}
.upload-page-rtl #id-edit-img .title {
    font-family: myFontRegular;
}
.upload-page-rtl #id-edit-img .content {
    font-family: myFontRegular;
}
.upload-page-rtl .container .message-container .right-container div .name {
    font-family: myFontMedium;
}
.upload-page-rtl #id-profile .container .message-container .right-container div .phone {
    font-family: myFontRegular;
}
.upload-page-rtl #id-profile .container .message-container .right-container div .mail {
    font-family: myFontRegular;
}
.upload-page-rtl #id-profile .container .message-container .right-container .edit {
    font-family: myFontMedium;
}
.upload-page-rtl #id-profile .container .middle {
    font-family: myFontMedium;
}
.upload-page-rtl .font-medium {
    font-family: myFontMedium
}
.upload-page-rtl .font-normal {
    font-family: myFontRegular;
}
.upload-page-rtl #upload-page .upload-wrapper .main-title {
    font-family: myFontFamilyBold;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .form-title {
    font-family: myFontRegular;
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .form-title {
       font-family: myFontRegular;
    }
}

@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .form-title {
       font-family: myFontRegular;
    }
}
#upload-page .upload-wrapper .form-part .mo-upload-wrapper .upload-item-wrapper .item-name>span {
    height: 26px;

    font-size: 18px;
    font-family: myFontRegular;
    line-height: 26px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #0000008C;
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .form-item-container .form-item .item-name>span {
       font-family: myFontRegular;
    }
}

@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .form-item-container .form-item .item-name>span {
       font-family: myFontRegular;
    }

    #upload-page .upload-wrapper .form-part .mo-upload-wrapper .upload-item-wrapper .item-name>span {
       font-family: myFontRegular;
    }
}
@media (min-width: 1440px) {
    #upload-page .upload-wrapper .form-part .rules-container .rule {
       font-family: myFontRegular;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    #upload-page .upload-wrapper .form-part .rules-container .rule {
       font-family: myFontRegular;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .rules-container .rule {
       font-family: myFontRegular;

    }
}

@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .rules-container .rule {
       font-family: myFontRegular;
    }
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .form-item-container .form-item .el-textarea .el-input__count {
    direction: ltr;
}
@media (min-width: 1440px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container {
        padding-left: 8px;
        padding-right: initial;
    }
}
@media (min-width: 1025px) and (max-width: 1439px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container {
        padding-left: 8px;
        padding-right: initial;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container {
        padding-left: 16px;
        padding-right: initial;
    }
}
@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container:nth-of-type(2n-1) {
        margin-left: 14px;
        margin-right: initial;
    }
}
.upload-page-rtl .pick-img .pick-icon p {
    font-family: myFontRegular;
}

@media (max-width: 650px) {
    .pick-img .pick-icon p {
       font-family: myFontRegular;
    }
}
@media (min-width: 1440px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .img-element-sort {
       font-family: myFontRegular;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .img-element-sort {
       font-family: myFontRegular;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .img-element-sort {
       font-family: myFontRegular;
    }
}
@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .img-element-sort {
       font-family: myFontRegular;
    }
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .works-cover {
    right: 0;
    left: initial;
}
@media (min-width: 1440px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .delete-work {
        left: 23px;
        right: initial;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .delete-work {
        left: 23px;
        right: initial;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .delete-work {
        left: 30px;
        right: initial;
    }
}
@media (max-width: 650px) {
    #upload-page .upload-wrapper .form-part .upload-item-wrapper .upload-img-container .delete-work {
        left: 12px;
        right: initial;
    }
}
.upload-page-rtl #upload-page .upload-wrapper .groups-tips {
    font-family: myFontRegular;
    text-align: right;
    direction: initial;
}
.upload-page-rtl #upload-page .upload-wrapper .bottom-tips {
    font-family: myFontRegular;
}
#upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-file-title {
    font-family: myFontRegular;
    text-align: right;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-is-edit {
    direction: ltr;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-file-name {
    font-family: myFontFamilyBold;
    text-align: right;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-is-group {
    left: 20px;
    right: initial;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-btn-box {
    font-family: myFontMedium;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .draft-btn-box #draft-edit-btn {
    margin-right: 0;
}
.upload-page-rtl #upload-page .upload-wrapper .form-part .draft-list .draft-box .add-draft-btn .add-more-draft {
    font-family: myFontRegular;
}
.upload-page-rtl #upload-page #uploadBox .upload-checkbox-wrapper {
    font-family: myFontRegular;
}
.upload-page-rtl #upload-page .no-login .no-login-title {
    direction: ltr;
}
@media (min-width: 1440px) {
    #upload-page .no-login .no-login-title {
       font-family: myFontRegular;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    #upload-page .no-login .no-login-title {
       font-family: myFontRegular;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #upload-page .no-login .no-login-title {
       font-family: myFontRegular;
    }
}
@media (max-width: 650px) {
    #upload-page .no-login .no-login-title {
       font-family: myFontRegular;
    }
}
.upload-page-rtl #upload-page .no-login .no-login-btn {
    font-family: myFontFamilyBold;
}
.delete-dialog .delete-content .delete-title,
.cancel-dialog .cancel-content .cancel-title,
.submit-dialog .submit-content .submit-title {
    font-family: myFontFamilyBold;
}
@media (orientation: portrait) and (min-width: 721px) and (max-width: 1024px) {

    .delete-dialog .delete-content .delete-title,
    .cancel-dialog .cancel-content .cancel-title,
    .submit-dialog .submit-content .submit-title {
        font-family: myFontFamilyBold;
    }
}
@media (orientation: landscape) and (min-width: 400px) and (max-width: 1024px) {

    .delete-dialog .delete-content .delete-title,
    .cancel-dialog .cancel-content .cancel-title,
    .submit-dialog .submit-content .submit-title {
        font-family: myFontFamilyBold;
    }
}
@media (orientation: portrait) and (max-width: 720px) {

    .delete-dialog .delete-content .delete-title,
    .cancel-dialog .cancel-content .cancel-title,
    .submit-dialog .submit-content .submit-title {
        font-family: myFontFamilyBold;
    }
}
.delete-dialog .delete-content .delete-tips,
.cancel-dialog .cancel-content .cancel-tips,
.submit-dialog .submit-content .submit-tips {
    font-family: myFontRegular;
}
@media (orientation: portrait) and (min-width: 721px) and (max-width: 1024px) {

    .delete-dialog .delete-content .delete-tips,
    .cancel-dialog .cancel-content .cancel-tips,
    .submit-dialog .submit-content .submit-tips {
       font-family: myFontRegular;
    }
}
@media (orientation: landscape) and (min-width: 400px) and (max-width: 1024px) {

    .delete-dialog .delete-content .delete-tips,
    .cancel-dialog .cancel-content .cancel-tips,
    .submit-dialog .submit-content .submit-tips {
       font-family: myFontRegular;
    }
}
@media (orientation: portrait) and (max-width: 720px) {

    .delete-dialog .delete-content .delete-tips,
    .cancel-dialog .cancel-content .cancel-tips,
    .submit-dialog .submit-content .submit-tips {
       font-family: myFontRegular;
    }
}
.delete-dialog .delete-content .btn-register,
.cancel-dialog .cancel-content .btn-register,
.submit-dialog .submit-content .btn-register {
    font-family: myFontFamilyBold;
}
@media (orientation: portrait) and (min-width: 721px) and (max-width: 1024px) {

    .delete-dialog .delete-content .btn-register,
    .cancel-dialog .cancel-content .btn-register,
    .submit-dialog .submit-content .btn-register {
        font-family: myFontFamilyBold;
    }
}
@media (orientation: landscape) and (min-width: 400px) and (max-width: 1024px) {

    .delete-dialog .delete-content .btn-register,
    .cancel-dialog .cancel-content .btn-register,
    .submit-dialog .submit-content .btn-register {
        font-family: myFontFamilyBold;
    }
}

@media (orientation: portrait) and (max-width: 720px) {

    .delete-dialog .delete-content .btn-register,
    .cancel-dialog .cancel-content .btn-register,
    .submit-dialog .submit-content .btn-register {
        font-family: myFontFamilyBold;
    }
}
.delete-dialog .delete-content .btn-primary,
.cancel-dialog .cancel-content .btn-primary,
.submit-dialog .submit-content .btn-primary {
    font-family: myFontFamilyBold;
}

@media (orientation: portrait) and (min-width: 721px) and (max-width: 1024px) {

    .delete-dialog .delete-content .btn-primary,
    .cancel-dialog .cancel-content .btn-primary,
    .submit-dialog .submit-content .btn-primary {
        font-family: myFontFamilyBold;
    }
}
@media (orientation: landscape) and (min-width: 400px) and (max-width: 1024px) {

    .delete-dialog .delete-content .btn-primary,
    .cancel-dialog .cancel-content .btn-primary,
    .submit-dialog .submit-content .btn-primary {
        font-family: myFontFamilyBold;
    }
}

@media (orientation: portrait) and (max-width: 720px) {

    .delete-dialog .delete-content .btn-primary,
    .cancel-dialog .cancel-content .btn-primary,
    .submit-dialog .submit-content .btn-primary {
        font-family: myFontFamilyBold;
    }
}
.succee-dialog .succee-content .succee-title {
    font-family: myFontFamilyBold;
}
@media (min-width: 1440px) {
    .succee-dialog .succee-content .succee-tips {
       font-family: myFontRegular;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    .succee-dialog .succee-content .succee-tips {
       font-family: myFontRegular;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    .succee-dialog .succee-content .succee-tips {
       font-family: myFontRegular;
    }
}
@media (max-width: 650px) {
    .succee-dialog .succee-content .succee-tips {
       font-family: myFontRegular;
    }
}
.mask-dialog .dialog-equity-qr .equity-qr-exit {
    font-family: myFontFamilyBold;
}
.mask-dialog .dialog-equity-qr .equity-qr-text {
    font-family: myFontRegular;
}
.el-input__inner::placeholder {
    height: 64px;
    line-height: 64px;
}
@media (min-width: 651px) and (max-width: 1024px) {
    .el-input__inner::placeholder {
        height: 52px;
        line-height: 52px;
    }
}

@media (max-width: 650px) {
    .el-input__inner::placeholder {
        height: 52px;
        line-height: 52px;
    }
}
.mask-dialog .dialog-equity-qr .equity-qr-exit {
    font-family: myFontFamilyBold;
}
.mask-dialog .dialog-equity-qr .equity-qr-text {
    font-family: myFontRegular;
}
@media (min-width: 651px) and (max-width: 1024px) {
    .zn--wrapper header #zn-header-mo .switch-panel {
        left: 22px;
        right: initial !important;
    }
}
.conceal {
    display: none !important;
}

.upload-page-rtl {
    direction: rtl;
    text-align: right;
}

.upload-page-rtl .item-name {
    display: flex;
}

.upload-page-rtl .form-part .form-title {
    display: flex;
    justify-content: flex-start;
}

.upload-page-rtl .el-select-dropdown__item,
.countryRegion,
.phoneModel,
.selectRace {
    text-align: right;
}

.upload-page-rtl .cancel-btns {
    direction: rtl;
}

.upload-page-rtl #btn-cancel-edit {
    margin-right: 12px;
}

.upload-page-rtl .rules-container {
    direction: ltr;
    text-align: right;
}

.upload-page-rtl .rule {
    text-align: right !important;
}

.upload-page-rtl .draft-btn-box {
    display: flex;
}

.delete-btns,
.submit-btns,
.cancel-btns {
    direction: rtl;
}
.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;
}
    
#btn-cancel-delete,
#btn-submit,
#btn-cancel-edit {
    margin-right: 12px;
}
.upload-page-rtl .delete-content {
    direction: initial;
}
.upload-page-rtl .cancel-content {
    direction: initial;
}
.upload-page-rtl .submit-content {
    direction: initial;
}
.upload-page-rtl .loader {
    direction: initial;
}