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

a { cursor: pointer; }

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

.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 #fff; 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: #fff; }

.d-btn.border-btn { background: transparent; color: #fe8e14 !important; border: 3px solid #fe8e14; line-height: 6.4rem; }

.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: 70px; }

.loginContent { min-height: calc(100vh - 128px); }

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

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


    .loginContent .loginOrRegister.dbrPadding { padding: 77px 60px 50px 65px; }

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

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

.basicForm .basicFormGroup { margin-bottom: 20px; }

    .basicForm .basicFormGroup .basicFormInput { height: 40px; }

    .basicForm .basicFormGroup .basicFormInput, .basicForm .basicFormGroup .basicFormTextArea { border: 1px solid #999; width: 100%; padding: 5px 20px; font-size: 16px; }

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

.loginContent .loginOrRegister .whitelink { color: #FFFFFF; font-size: 18px; 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; }

    .loginContent .modules .moduleItem.moduleLine { width: 100%; margin-top: 32px; padding-left: 69px; }

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

    .loginContent .modules .moduleItem { width: 44.6%; float: right; padding-right: 36px; margin-bottom: 64px; }

        .loginContent .modules .moduleItem.moduleLine .moduleBox { padding-top: 30px; padding-left: 76px; }

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

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

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

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

.loginContent .modules .moduleItem .moduleBox .icon { position: absolute; width: 60px; height: 60px; border: 1px solid #39393B; left: 39px; top: -30px; background: #FFFFFF; text-align: center; display: flex; justify-content: center; align-items: center; }

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

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

.loginHead { width: 100%; height: 64px; background: #F5F5F5; }

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

.loginFooter { height: 64px; line-height: 64px; background: #323234; 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; font-size: 16px; }

.loginContent .loginOrRegister .signinDisc { margin-top: 10px; }
.moduleBox p.title { display: inline-flex; margin: 0px; padding-left: 20px; }

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

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

.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: 30px; position: absolute; top: 26px; }

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

.loginContent .loginOrRegister.dbrPadding { padding: 60px 130px 50px 65px; height: 80%; }
.bottom-info { height: 20%; }

.intro { margin-top: 30px; padding: 0 15px; display: flex; width: 100%; }
    .intro .h3 { line-height: 46px; }
    .intro .left { width: 522px; margin-right: 35px; display: grid; gap: 25px 23px; grid-template-columns: 250px 250px; grid-template-rows: 283px 90px; }
    .intro .right { flex: 1; height: 100%; }
    .intro .left .box { background: #F5F5F5; display: flex; justify-content: center; align-items: center; padding: 0 25px; }
        .intro .left .box:first-child { align-items: flex-start; padding-top: 30px; }
            .intro .left .box:first-child i { margin-right: 40px; }
            .intro .left .box:first-child .title { margin-bottom: 17px; }
        .intro .left .box div { flex: 1; }
        .intro .left .box .title { font-family: Oswald-Regular; margin: 0; }
        .intro .left .box:first-child { grid-column: 1 / span 2; }
        .intro .left .box .icon { background-repeat: no-repeat; background-position: center; background-size: 60%; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border: 1px solid #323233; background-color: white; margin-right: 20px; display: block; }
        .intro .left .box .icon-scan { background-image: url(../../images/icons/dnt/icon-scanner.svg); }
        .intro .left .box .icon-pdf { background-image: url(../../images/icons/dnt/icon-pdf.svg); }
        .intro .left .box .icon-barcode { background-image: url(../../images/icons/dnt/icon-barcode-reader.svg); }

.table { display: table; width: 100%; margin-bottom: 60px; border-collapse: collapse; }
    .table .tr { display: table-row; }
    .table .td { display: table-cell; }

.compareTable .tr { height: 77px; }
    .compareTable .tr:first-child .td p { font-size: 24px; font-family: Oswald-Regular; }
    .compareTable .tr:last-child { height: 154px; }
.compareTable .td { border: 1px solid white; text-align: center; width: 37%; vertical-align: middle; background-color: #F5F5F5; padding: 0 15px; }
    .compareTable .td p { margin: 0; }
    .compareTable .td a { margin-top: 13px; width: 224px; height: 54px; line-height: 50px; font-size: 18px; padding: 0 26px; border-width: 2px; }
        .compareTable .td a:last-child { padding: 0 22px; }
    .compareTable .td:first-child { width: 26%; background-color: #DFDFDF; text-align: left; padding-left: 27px; }
a.d-btn { transition: ease-in-out .3s; }
    a.d-btn:hover { transform: translate(8px, -8px); box-shadow: -8px 8px 0 0 white; }
.compareTable a.d-btn:hover { box-shadow: -8px 8px 0 0 #DFDFDF; }

.downloadTable { display: table; }
    .downloadTable .tr:nth-child(odd) { background-color: #f0f0f0; }
    .downloadTable .tr:nth-child(7) { background-color: white; }
    .downloadTable .tr:nth-child(8) { background-color: #f0f0f0; }
    .downloadTable .tr:nth-child(4), .downloadTable .tr:nth-child(6) { background-color: #f0f0f0; }
    .downloadTable .td { text-align: left; padding: 10px 15px; }
        .downloadTable .td p { margin: 0; }


@media (max-width: 1679px) {
    #registerButton .createBtn { height: 56px; line-height: 50px; font-size: 20px; }

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

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

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

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

    h1 { width: 100%; }
    .intro .h3 { line-height: 40px; }
}

@media (max-width: 1199px) {
    #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 130px 40px 45px; height: 75%; }
    .bottom-info { height: 25%; }

    .intro .left { width: 45%; grid-template-columns: repeat(auto-fill, 49%); }
        .intro .left .box .title { font-size: 16px; }
        .intro .left .box .desc { font-size: 16px; }
        .intro .left .box { padding: 20px; }
            .intro .left .box .icon { width: 50px; height: 50px; }
}

@media (max-width: 991px) {
    .loginContent .loginOrRegister.dbrPadding, .bottom-info { width: 100%; max-width: unset; height: auto; }
    .intro { flex-direction: column-reverse; }
        .intro .left, .intro .right { width: 100%; }
        .intro .left { margin: 30px 0 0 0; grid-template-rows: auto; }

    .compareTable .td p { margin: 0; font-size: 16px; }
    .compareTable .tr:first-child .td p { font-size: 20px; }
    .compareTable .td a { font-size: 16px; width: auto; height: 40px; line-height: 36px; }
}

@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 { margin-bottom: 20px; }

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

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


    .compareTable .td a { height: auto; line-height: 28px; }
}

@media (max-width: 575px) {
    .intro .left { grid-template-columns: 100%; }
        .intro .left .box:first-child { grid-column: unset; }
            .intro .left .box:first-child i { margin-right: 20px; }

    .compareTable .td { height: auto; padding: 15px; }
        .compareTable .td p, .compareTable .td a { white-space: pre-wrap; word-break: break-all; }
}