.userName { display: flex; justify-content: space-between; }
    .userName .basicFormGroup { width: 48%; }

h3 { font-size: 24px; line-height: 32px; }

h1 { width: 90%; }

a { cursor: pointer; }

.tooltip-inner { max-width: 350px; font-size: 14px; text-align: left; padding: 10px 12px; }

.fontOswald { font-family: Oswald-Regular; font-weight: 400; }

.emailErrorAlert { display: block; margin: 0px auto 30px; width: 100%; max-width: 1000px; z-index: 99; animation: fadeIn forwards .3s ease-in-out; }
    .emailErrorAlert.off { display: none; animation: fadeOut forwards .3s ease-in-out; }
    .emailErrorAlert .ds-alert { margin-top: 0 }
        .emailErrorAlert .ds-alert.error p { margin-bottom: 0; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

/* input disable style */
/*input.disable:disabled { background-color: #9f9f9f; }
input.disable::placeholder { color: #cbcbcb; }
input::placeholder { color: #d1d1d1 }*/

/* check icon */
.checkIcon { display: none; position: absolute; right: 10px; top: 16px; color: #4a8630; font-size: 16px; }

.loginContent .loginOrRegister p.errorMsg { display: none; color: red; font-size: 14px; line-height: 18px; margin-top: 10px; }

.loginContent .loginOrRegister .errorMsgGroup p.errorMsg { margin: 0; color: #DF3838; }

.d-btn.border-btn { background: transparent; color: #fe8e14 !important; border: 3px solid #fe8e14; height: 50px; line-height: 44px; box-sizing: content-box; margin-top: 10px; font-size: 18px; padding: 0 70px; }

.loginOrRegister { position: relative; }
    .loginOrRegister .login { display: none; }

/*.loginOrRegister .register { display: none; }*/

.loginContent .loginOrRegister a.createBtn { font-size: 18px; height: 52px; line-height: 46px; }

.loginContent .leftPart .dbr { margin-top: 100px; }

.loginContent { min-height: calc(100vh - 158px); padding-bottom: 80px; }

    .loginContent p { margin-bottom: 10px; font-size: 18px; }

    .loginContent .description { font-size: 16px; }


    .loginContent .loginOrRegister.dbrPadding { padding: 28px 63px 17px 63px; }

    .loginContent .loginOrRegister { background: #FFFFFF; padding: 77px 69px 60px 76px; max-width: 536px; margin: 0 auto; }

        .loginContent .loginOrRegister h3 { color: #fe8e14; margin-bottom: 30px; }

h1.h3 { padding-right: 25px; }

.basicForm .basicFormGroup { margin-bottom: 15px; height: 55px; background-color: white; position: relative; overflow: hidden; }
.basicFormGroup.phoneNumberField { overflow: visible; }

.basicFormGroup .prefix { position: absolute; line-height: 55px; width: 80px; padding: 0 12px; height: 100%; font-size: 16px; color: #323234; background-color: #F5F5F5; }
.iti--separate-dial-code .iti__selected-flag { min-width: 80px; }

.basicForm .basicFormGroup .basicFormInput,
.basicForm .basicFormGroup .basicFormSelect,
.basicForm .basicFormGroup .basicFormTextArea { width: 100%; height: 100%; border-color: #999999; outline: none; font-size: 16px; padding: 0; padding-left: 20px; padding-top: 12px; }
    .basicForm .basicFormGroup .basicFormInput:placeholder-shown + .fieldLabel,
    .basicForm .basicFormGroup .basicFormSelect:invalid + .fieldLabel { font-size: 16px; top: 50%; transform: translateY(-50%); }
        .basicForm .basicFormGroup .basicFormInput:placeholder-shown + .fieldLabel::after { content: attr(placeholder) }

/* field label */
.fieldLabel { transition: ease-in-out all .3s; pointer-events: none; color: #AAAAAA; margin: 0; display: inline-block; position: absolute; left: 20px; }
    .fieldLabel.websiteLabel, .fieldLabel.phoneNumberLabel { left: 100px; }

.basicFormInput#RegisterWebsite { padding-left: 100px; }
.basicFormInput#RegisterPhoneNumber { padding-left: 100px !important; }

.basicForm .basicFormGroup .basicFormInput + .fieldLabel,
.basicForm .basicFormGroup .basicFormSelect + .fieldLabel,
.basicForm .basicFormGroup .basicFormSelect:focus + .fieldLabel,
.basicForm .basicFormGroup .basicFormInput:focus + .fieldLabel { font-size: 13px; top: 5px; transform: unset; }
    .basicForm .basicFormGroup .basicFormInput + .fieldLabel::after,
    .basicForm .basicFormGroup .basicFormSelect + .fieldLabel::after,
    .basicForm .basicFormGroup .basicFormSelect:focus + .fieldLabel::after,
    .basicForm .basicFormGroup .basicFormInput:focus + .fieldLabel::after { content: attr(value) }

.basicFormGroup#options, .basicFormGroup.errorMsgGroup, .basicFormGroup#nextStep, .basicFormGroup.CNSupportGroup, .basicFormGroup.ESSupportGroup, .basicFormGroup.login:nth-child(3) { height: auto; background-color: transparent; }

.footerTooltip { background-color: #323234; text-align: center; color: white; padding: 17px 40px; }

    .footerTooltip p { margin: 0 auto; position: relative; width: fit-content; }

.loginContent .loginOrRegister p { color: #FFFFFF; font-size: 16px; }

.loginContent .loginOrRegister .whitelink { color: #FFFFFF; font-size: 16px; text-decoration: underline !important; }

.loginContent .loginOrRegister .bluelink { color: #50a8e1; font-size: 14px; }

    .loginContent .loginOrRegister .bluelink:hover { color: #61c2ec !important; font-size: 14px; }

#cnSupport { display: none; }

.loginContent .modules { list-style: none; margin: 0; padding: 0; max-width: 864px; }

    .loginContent .modules .moduleItem { width: 260px; margin-bottom: 20px; display: inline-block; padding-right: 25px; }

.loginContent .dnt .modules .moduleItem .moduleBox { min-height: 135px; }

.loginContent .modules .moduleItem .moduleBox { position: relative; background: #F5F5F5; padding: 15px; display: flex; align-items: center; }

.loginContent .dnt .modules .moduleItem .moduleBox { position: relative; background: #F5F5F5; padding: 60px 24px 27px 39px; }

.loginContent .modules .moduleItem .moduleBox .icon { width: 60px; height: 60px; border: 1px solid #39393B; background: #FFFFFF; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }

.loginContent .modules .moduleItem.moduleLine .icon { left: -30px; top: 30px; }

.loginContent .modules .moduleItem .moduleBox .icon i { display: inline-block; width: 38px; height: 38px; background-size: contain !important; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-scanner { background: url('../../images/icons/scanner.svg') no-repeat center center; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-file-search { background: url('../../images/icons/common-file-text-search.svg') no-repeat center center; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-file-text { background: url('../../images/icons/office-file-text.svg') no-repeat center center; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-barcode-search { background: url('../../images/icons/barcode-search.svg') no-repeat center center; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-webcam { background: url('../../images/icons/webcam.svg') no-repeat center center; }

    .loginContent .modules .moduleItem .moduleBox .icon i.icon-mobile-capture { background: url('../../images/icons/mobile-web-capture.svg') no-repeat center center; }

.pass-eye-open-icon { display: none; width: 22px; height: 22px; background: url(../../images/icons/eye-open.svg) no-repeat center center; background-size: cover; top: 42px; position: absolute; right: 6px; cursor: pointer; }

.pass-eye-close-icon { display: inline-block; width: 24px; height: 24px; background: url(../../images/icons/eye-close.svg) no-repeat center center; background-size: cover; top: 50%; transform: translateY(-50%); position: absolute; right: 5px; cursor: pointer; }

.basicForm .basicFormGroup.hasEye { position: relative; }

    .basicForm .basicFormGroup.hasEye .basicFormInput { padding-right: 35px; }

.moduleBox p.title { display: inline-flex; font-size: 16px; margin: 0px; padding-left: 20px; }

.bottom-info { max-width: 536px; margin: 0 auto; height: auto; background: #000000; color: #FFFFFF; padding: 12px 55px 12px 55px; position: relative; }

    .bottom-info p { font-size: 14px; line-height: 19px; margin: 0 0; }

.tooltipIcon { display: inline-block; width: 23px; height: 23px; vertical-align: middle; background: url(../../images/icons/information-circle-large.png) right center no-repeat; background-size: 100%; margin-left: 5px; left: -40px; position: absolute; top: 50%; transform: translateY(-50%); }

.imgWrapper { min-height: 375px; }

.imgInfo { height: 80px; font-size: 24px; background: #000000; color: white; line-height: 80px; padding: 0px 30px; bottom: 40px; }


.d-checkbox { display: block; }

    .d-checkbox input[type=checkbox] { position: relative; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; outline: none; vertical-align: top; margin-top: 2px; }

        .d-checkbox input[type=checkbox]:active, input[type=checkbox]:focus { box-shadow: 0; border: 0; }

        .d-checkbox input[type=checkbox]:before { display: inline-block; border: 1px solid #323234; background: #fff; content: ""; color: #999999; font-size: 14px; width: 20px; height: 20px; line-height: 21px; text-align: center; border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

        .d-checkbox input[type=checkbox]:hover:before { border-color: #FE8E14; box-shadow: 0px 0px 4px 1px #FE8E14B8; }

        .d-checkbox input[type=checkbox]:checked:after { position: absolute; top: 10px; left: 5px; display: table; border: 2px solid #FE8E14; border-top: 0; border-left: 0; transform: rotate(45deg) scale(1) translate(-50%, -50%); opacity: 1; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; content: ' '; width: 6px; height: 11px; }

    .d-checkbox label { display: inline-block; width: calc(100% - 50px); margin-bottom: 0; line-height: 25px; font-size: 16px; vertical-align: middle; margin-left: 10px; padding: 0; color: #323234; }

@media (min-width: 992px) {
    .lg-mt200 { margin-top: 200px !important; }
}

.loginHead { width: 100%; height: 94px; display: flex; align-items: center; background: #F5F5F5; }

    .loginHead .dynamsoftLogo { display: inline-block; width: 176px; height: 43px; margin: 0 0; margin-top: 12px; background: url(../../images/dynamsoft-logos/logo-dynamsoft-black.svg) no-repeat 0; }

.loginFooter { height: 64px; line-height: 64px; background: #000; color: #aaa; font-size: 14px; }

    .loginFooter a, #productLogin .loginFooter a:visited, #productLogin .loginFooter a:active { color: #aaa; text-decoration: none !important; }

        .loginFooter a:hover { color: #999; }

.basicFormGroup .iti { width: 100% !important; height: 100%; font-size: 16px; }

.loginContent .loginOrRegister .signinDisc { margin-top: 20px; }
    .loginContent .loginOrRegister .signinDisc.forgot { margin-top: -5px; }

.loginContent.container .dbr .dbr-icons { margin: 10px 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; }

    .loginContent.container .dbr .dbr-icons > div { margin: 25px 0 0 0; height: 105px; background-color: #F5F5F5; display: table; }

        .loginContent.container .dbr .dbr-icons > div:first-child { width: 105px; }

        .loginContent.container .dbr .dbr-icons > div:nth-child(2) { width: 100%; }

        .loginContent.container .dbr .dbr-icons > div:last-child { width: 100%; }

        .loginContent.container .dbr .dbr-icons > div > div { display: table-cell; width: fit-content; vertical-align: middle; text-align: center; font-size: 14px; }

            .loginContent.container .dbr .dbr-icons > div > div i { background: url(../../images/icons/dbr_overview_package.png) no-repeat center center; display: inline-block; height: 43px; width: 50px; }

            .loginContent.container .dbr .dbr-icons > div > div > span { display: block; }

            .loginContent.container .dbr .dbr-icons > div > div.js i { background-position-y: 8px; }

            .loginContent.container .dbr .dbr-icons > div > div.android i { background-position-y: -247px; }

            .loginContent.container .dbr .dbr-icons > div > div.ios i { background-position-y: -289px; }

            .loginContent.container .dbr .dbr-icons > div > div.cordova i { background: url(../../images/icons/dbr/Cordova.svg) no-repeat center center; }

            .loginContent.container .dbr .dbr-icons > div > div.flutter i { background: url(../../images/icons/flutter.PNG) no-repeat center center; background-size: 85%; filter: opacity(0.7); }

            .loginContent.container .dbr .dbr-icons > div > div.react i { background: url(../../images/icons/react-native.PNG) no-repeat center center; filter: opacity(0.7); }

            .loginContent.container .dbr .dbr-icons > div > div.xamarin i { background: url(../../images/icons/xamarin.PNG) no-repeat center center; }

            .loginContent.container .dbr .dbr-icons > div > div.maui i { background: url(../../images/icons/maui.svg) no-repeat center center; background-size: contain; }

            .loginContent.container .dbr .dbr-icons > div > div.c i { background-position-y: -37px; }

            .loginContent.container .dbr .dbr-icons > div > div.cpp i { background-position-y: -80px; }

            .loginContent.container .dbr .dbr-icons > div > div.dotNet i { background-position-y: -122px; }


            .loginContent.container .dbr .dbr-icons > div > div.py i { background-position-y: -164px; }

            .loginContent.container .dbr .dbr-icons > div > div.java i { background-position-y: -208px; }

        .loginContent.container .dbr .dbr-icons > div > div { width: 104px; }

.basicForm .basicFormGroup.jobField { position: relative; overflow: visible; }
    .basicForm .basicFormGroup.jobField input { cursor: pointer; }
    .basicForm .basicFormGroup.jobField .selectIcon { display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; right: 0; height: 100%; width: 55px; background-color: #E3E3E3; top: 0; border: 2px solid #ddd; }
        .basicForm .basicFormGroup.jobField .selectIcon:after { transition: linear .2s; content: ""; border-color: #323234 transparent transparent transparent; border-style: solid; border-width: 10px 8px 0px 8px; }
        .basicForm .basicFormGroup.jobField .selectIcon.expand:after { transform: rotate(180deg); }
    .basicForm .basicFormGroup.jobField .jobOptions { display: none; overflow-y: scroll; height: 300px; position: absolute; background-color: white; width: 100%; z-index: 10; }
        .basicForm .basicFormGroup.jobField .jobOptions li { cursor: pointer; padding: 10px 15px; font-size: 16px; border-top: 1px solid #d5d5d5; }
            .basicForm .basicFormGroup.jobField .jobOptions li:hover { background-color: #c5c5c5; }

.logo .tag { font-size: 16px; vertical-align: middle; background-color: #306877; height: 30px; line-height: 30px; padding: 0 12px; color: white; margin-left: 30px; display: inline-block; }
    .logo .tag.dbr-tag { margin-left: 15px; }
.logo br { display: none; }

.dbr-mobile-npms > p { margin-top: 30px; font-size: 16px; line-height: 26px; }
.dbr-mobile-npms .npm { position: relative; margin-bottom: 15px; }
    .dbr-mobile-npms .npm span.npmBtn { display: block; border: 1px solid #d3d3d3; border-radius: 5px; font-size: 14px; padding: 15px 20px; }
    .dbr-mobile-npms .npm i { cursor: pointer; margin-left: 10px; color: #a1a1a1; }
    .dbr-mobile-npms .npm svg { width: 20px; height: 20px; fill: #a1a1a1 }
    .dbr-mobile-npms .npm .copied { display: none; z-index: 100; position: absolute; top: 15px; right: -60px; color: #fe8e14; font-family: 'Oswald-Regular'; font-size: 16px; background: #FFFFFF; }
    .dbr-mobile-npms .npm span.npmBtn { cursor: pointer; transition: ease-in-out .2s all; }
        .dbr-mobile-npms .npm span.npmBtn:hover { background: rgba(254, 142, 20, 0.1); }

.thirdPartyLogin { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: 100%; }
.thirdPartLoginBtn { display: block; font-size: 16px; height: 52px; line-height: 52px; width: 100%; text-align: center; background: #fe8e14; color: #FFFFFF !important; border-radius: 6px; }
    .thirdPartLoginBtn:hover { color: #ffffff !important; opacity: 0.8; }
    .thirdPartLoginBtn.githubLoginBtn { background: #1F2328; }
    .thirdPartLoginBtn.microsoftLoginBtn { background: #0078D4; }
    .thirdPartLoginBtn.linkedInLoginBtn { background: #2867B2; }
    .thirdPartLoginBtn.googleLoginBtn { background: #131314; }
    .thirdPartLoginBtn i { margin-right: 10px; font-size: 26px; vertical-align: top; margin-top: 12px; }
    .thirdPartLoginBtn .gsi-material-button-icon { display: inline-block; width: 26px; height: 26px; vertical-align: top; margin-top: 12px; margin-right: 10px; }
.devideLine { color: #707070; margin: 20px 0; position: relative; font-size: 16px; line-height: 20px; text-align: center; }
    .devideLine::after { content: ""; position: absolute; width: 30%; height: 1px; background: #AAAAAA; right: 0; top: 10px; }
    .devideLine::before { content: ""; position: absolute; width: 30%; height: 1px; background: #AAAAAA; left: 0; top: 10px; }

.loginContent .recommadation { background-color: #E5F5FF; text-align: center; padding: 20px 20px; border-radius: 5px; margin-bottom: 20px; }
    .loginContent .recommadation p { color: #4788b3; margin: 0; font-size: 16px; }
    .loginContent .recommadation a { color: inherit; }

.privacyStatement { width: 100%; max-width: 660px; text-align: center; margin: 25px auto; font-size: 12px; line-height: 18px; color: #323234; }

.dcv ul { padding-left: 20px; }
    .dcv ul li { list-style: disc; font-size: 16px; }
        .dcv ul li p { font-size: 16px; line-height: 24px; }

@media (min-width: 1680px) {
    .loginContent.container { max-width: 1272px; }
        .loginContent.container .dbr { width: 520px; }
}


@media (max-width: 1679px) {
    h1.h3 { padding: 0; }

    #registerButton .createBtn { height: 50px; line-height: 50px; font-size: 16px; }

    .loginContent .loginOrRegister p { font-size: 16px; }

    .loginContent .loginOrRegister .whitelink { font-size: 16px; }

    .loginContent .loginOrRegister.dbrPadding { padding: 35px 60px 10px 65px; }

    .imgWrapper { min-height: 285px; }

        .imgWrapper img { width: 100%; }

    .loginContent .modules { margin-right: -24px; }

        .loginContent .modules .moduleItem { width: 49.7%; }

    .basicForm .basicFormGroup .basicFormInput, .basicForm .basicFormGroup .basicFormTextArea { font-size: 14px; }

    .imgInfo { height: 60px; font-size: 20px; line-height: 60px; }

    .loginContent.container .dbr .dbr-icons > div > div.py { width: 126px; }
}

@media (max-width: 1199px) {
    .logo .tag { margin-left: 10px; }
        .logo .tag.dbr-tag { margin-left: 0px; font-size: 14px; padding: 0 10px; margin-top: 10px; }

    #registerButton .createBtn { height: 50px; line-height: 44px; font-size: 18px; }

    .loginContent .loginOrRegister p { font-size: 14px; }

    .loginContent .loginOrRegister .whitelink { font-size: 14px; }

    .loginContent .loginOrRegister.dbrPadding { padding: 55px 40px 17px 45px; }

    .d-btn.border-btn { padding: 0px 50px; box-sizing: border-box; }

    .moduleBox p.title { padding-left: 10px; }

    .loginContent .modules .moduleItem .moduleBox { padding: 15px 0px 15px 14px; }

    h1 { width: 100%; }

    .loginContent.container .dbr .dbr-icons > div > div.py { width: 97px; }
}

@media (max-width: 767px) {
    .loginFooter { line-height: 20px; font-size: 12px; padding-top: 12px; }

    .loginContent .logo img { height: 30px; }

    .loginContent p { font-size: 14px; }

    .loginContent .description { font-size: 14px; }

    .basicForm .basicFormGroup .basicFormInput, .basicForm .basicFormGroup .basicFormTextArea { font-size: 14px; }

    .loginContent .loginOrRegister.dbrPadding { padding: 35px 20px 30px 20px; }

    .loginHead .dynamsoftLogo { height: 35px; margin-top: 13px; }

    .bottom-info { height: 100px; height: auto; }

    .d-btn.border-btn { padding: 0px 8px; }

    .loginContent .modules .moduleItem { width: 100%; }
}

/*.loginContent.dwt .clearfix { margin: 0 -15px; }*/

.loginContent.dwt .inputTemplate { float: right; /*width: 42%;*/ padding: 0 15px; }

.loginContent.dwt .leftPart { float: left; /*width: 58%;*/ padding: 0 15px; }

@media (max-width: 991px) {
    .loginContent.dwt .clearfix { margin: 0 0px; }

    .loginContent.dwt .inputTemplate { float: none; width: 100%; padding: 0 0px; }

    .loginContent.dwt .leftPart { float: none; width: 536px; margin: 0 auto; }

    .loginContent.dwt .imgWrapper { display: none; }

    .loginContent.dwt .leftPart h2 { margin-top: 60px; }

    .loginContent.dwt .dwtLogoAndVersion { width: 536px; margin: 0 auto; }

    .loginContent.dwt .modules .moduleItem { padding-right: 10px; }

        .loginContent.dwt .modules .moduleItem:nth-child(2n) { padding-right: 0; }


    .d-checkbox { margin-right: 40px; }

        .d-checkbox input[type=checkbox]:before { width: 18px; height: 18px; line-height: 16px; }

        .d-checkbox input[type=checkbox]:checked:after { top: 8px; left: 4px; width: 7px; height: 12px; }

        .d-checkbox label { height: 18px; line-height: 18px; font-size: 14px; margin-left: 6px; }
    .ESSupportGroup .d-checkbox { margin-right: 0; }

        .ESSupportGroup .d-checkbox label { height: auto; }
}

@media (max-width: 767px) {
    .loginContent.dwt .leftPart { float: none; width: 100%; }

    .loginContent.dwt .dwtLogoAndVersion { width: 100%; }

    .loginContent.dwt .modules .moduleItem { padding-right: 0px; }

    .loginContent.dwt .logo img { height: 50px }
}

@media (max-width: 575px) {
    .logo .tag { margin: 10px 0 0 0; }
    .logo br { display: block; }
}