/* field label style */
#downloadCenter #download-form label.fieldLabel { color: #606060; margin: 0; display: inline-block; margin-bottom: 8px; }
#downloadCenter #download-form .userName { width: 400px; display: flex; justify-content: space-between; }
    #downloadCenter #download-form .userName > div { width: 190px; }
        #downloadCenter #download-form .userName > div .basic-input { width: 100%; }

/* input disable style */
#downloadCenter input.disable:disabled { background-color: #EEEEEE; }
input.disable::placeholder { color: #AAAAAA; }
input::placeholder { color: #cbcbcb }

/* website url */
.basicFormGroup .prefix { position: relative; }
    .basicFormGroup .prefix input#website { padding-left: 90px; }
    .basicFormGroup .prefix div { position: absolute; background-color: #f5f5f5; height: 42px; line-height: 42px; font-size: 16px; top: 2px; left: 2px; padding: 0 10px; }

/* check icon */
.checkIcon { display: none; position: absolute; right: 10px; top: 22px; color: #4a8630; font-size: 16px; }
.errorMsg { display: none; color: red; font-size: 14px; margin-top: -15px; line-height: 18px; }

/* title */
#downloadCenter .header { }
#fullLayoutMain { min-height: calc(100vh - 70px); }
#downloadCenter .header h1 { text-transform: capitalize; display: block; width: 100%; text-align: center; font-size: 40px; line-height: 60px; margin: 60px 0px 20px 0; font-weight: normal; }
#downloadCenter .header p { margin: 0 auto; margin-bottom: 80px; font-size: 20px; padding: 0 15px; }
#downloadCenter h2 { font-size: 30px; line-height: 40px; font-weight: normal; margin-bottom: 51px; }
#downloadCenter .right-container h2 { margin-bottom: 40px; }
#downloadCenter h3 { font-size: 24px; line-height: 40px; margin-bottom: 28px; font-weight: normal; }
/* left half */
#downloadCenter .left-container { width: 65%; border-right: 1px solid #707070; }
::-webkit-scrollbar { width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ }
#downloadCenter .item { display: inline-block; width: 495px; height: 233px; background: #F5F5F5; margin-right: 20px; margin-bottom: 30px; vertical-align: bottom; padding: 26px 23px 30px 26px; position: relative; }
    #downloadCenter .item.saw { height: 255px; }
    #downloadCenter .item .overlay { display: block; height: 100%; position: absolute; width: 100%; top: 0px; left: 0px; cursor: pointer; }
    #downloadCenter .item .text p:last-child { display: none; }
    #downloadCenter .item .fa-circle { font-size: 46px; color: #CCCCCC; float: right; }
    #downloadCenter .item .fa-check-circle { display: none; font-size: 46px; color: #FE8E14; float: right; }
    #downloadCenter .item .overlay.checked + .fa-circle { display: none; }
        #downloadCenter .item .overlay.checked + .fa-circle + .fa-check-circle { display: inline-block; }
    #downloadCenter .item .version { display: block; width: 100%; text-align: left; font-size: 18px; line-height: 30px; margin-bottom: 15px; margin-top: 24px; }
    #downloadCenter .item p { font-size: 24px; line-height: 34px; padding-left: 7px; }
/* right half */
#downloadCenter .right-container { padding-left: 49px; width: 35%; position: absolute; /*    background: white;*/ z-index: 20; /*    height: calc(100vh - 473px);*/ right: 0px; }

/* other */
#downloadCenter i.dbr-logo { display: inline-block; width: 328px; height: 45px; background: url(../../images/icons/DBR_Horizontal_Pos.png) no-repeat left; background-size: contain; }
#downloadCenter i.dnt-logo { display: inline-block; width: 266px; height: 45px; background: url(../../images/icons/DNT_Horizontal_Pos.png) no-repeat left; background-size: contain; }
#downloadCenter i.dwt-logo { display: inline-block; width: 265px; height: 45px; background: url(../../images/icons/DWT_Horizontal_Pos.png) no-repeat left; background-size: contain; }
#downloadCenter i.dlr-logo { display: inline-block; width: 352px; height: 45px; background: url(../../images/icons/DLR_Horizontal_Pos.png) no-repeat left; background-size: contain; }
#downloadCenter i.saw-logo { display: inline-block; width: 198px; height: 39px; background: url(../../images/icons/logo-saw-171x25.svg) no-repeat; background-size: contain; }
#downloadCenter i.sawh-logo { display: inline-block; width: 252px; height: 38px; background: url(../../images/icons/logo-sawh-225x25.svg) no-repeat; background-size: contain; }
#downloadCenter i.dce-logo { display: inline-block; width: 343px; height: 46px; background: url(../../images/dynamsoft-logos/dce_logo_color.png) no-repeat left; background-size: contain; }
#downloadCenter i.dps-logo { display: inline-block; width: 343px; height: 45px; background: url(../../images/dynamsoft-logos/DPS_Horizontal.png) no-repeat left; background-size: contain; }
#downloadCenter i.ddn-logo { display: inline-block; width: 360px; height: 45px; background: url(../../images/dynamsoft-logos/logo-ddn.svg) no-repeat left; background-size: contain; }
#downloadCenter i.ddv-logo { display: inline-block; width: 360px; height: 45px; background: url(../../images/dynamsoft-logos/ddv-logo.svg) no-repeat left; background-size: contain; }

#footerTop { display: none; }

#downloadCenter .product-retired { padding-top: 50px; }
#downloadCenter i.icon-retired { display: inline-block; width: 140px; height: 40px; text-align: center; font-style: normal; line-height: 40px; background: #306877; color: #FFFFFF; font-size: 20px; position: absolute; right: 0; top: 0; }
    #downloadCenter i.icon-retired:before { content: 'Retired'; }

#downloadCenter .iso-logo { width: 100px; height: 100px; background: url(../../images/icons/ISO.webp) no-repeat center; margin-top: 40px; background-size: contain; }

.loginContent .logos { max-width: 536px; margin: 20px auto; }
    .loginContent .logos img { object-fit: contain; }

#downloadCenter .downloadContainer { width: 100%; }
    #downloadCenter .downloadContainer.visitor { position: relative; display: flex; max-width: 100%; width: 1200px; margin-left: auto; margin-right: auto; }
        #downloadCenter .downloadContainer.visitor h4:not(:first-child), #downloadCenter .downloadContainer.visitor .product-logo, #downloadCenter .downloadContainer.visitor .product-desc { display: none; }
        #downloadCenter .downloadContainer.visitor h4:first-child { display: block; margin-bottom: 30px; }
        #downloadCenter .downloadContainer.visitor .logos { display: block; }
        #downloadCenter .downloadContainer.visitor .left-container { width: 670px; padding: 20px; border: 1px solid #CCC; background: #F5F5F5; }
#downloadCenter .downloadContainer.visitor .right-container { flex: 1; width: auto; padding: 0; position: static; background-color: #323234; border: 1px solid #CCC; border-left: 0; }
            #downloadCenter .downloadContainer.visitor .right-container .loginContent { padding: 0; }
                #downloadCenter .downloadContainer.visitor .right-container .loginContent .loginOrRegister { max-width: 100%; }
        #downloadCenter .downloadContainer.visitor .ds-products { grid-gap: 20px; }
            #downloadCenter .downloadContainer.visitor .ds-products .ds-product { color: #212529; padding: 20px; flex-direction: row; align-items: center; justify-content: space-between; }
                #downloadCenter .downloadContainer.visitor .ds-products .ds-product .product-name { display: block; font-size: 16px; margin: 0; line-height: 20px; height: auto; font-family: 'OpenSans-Regular'; }
        #downloadCenter .downloadContainer.visitor .loginContent { min-height: 0; }
            #downloadCenter .downloadContainer.visitor .loginContent .loginOrRegister.dbrPadding { padding: 26px 45px 55px 45px; }
                #downloadCenter .downloadContainer.visitor .loginContent .loginOrRegister.dbrPadding h1 { visibility: hidden; font-size: 24px; padding: 0; font-size: 0; margin-bottom: 15px !important; }
                #downloadCenter .downloadContainer.visitor .loginContent .loginOrRegister.dbrPadding .basicForm .basicFormGroup { margin-bottom: 20px; }
        #downloadCenter .downloadContainer.visitor .bottom-info { background-color: #323234; padding: 12px 45px; max-width: 2000px; }
        #downloadCenter .downloadContainer.visitor .emailErrorAlert { max-width: unset; position: absolute; top: 0; left: 0; transform: translateY(-100%); }


    #downloadCenter .downloadContainer .left-container.loginUser .col-12 > h4:first-child, #downloadCenter .downloadContainer .left-container.loginUser .logos { display: none; }
/*    #downloadCenter .downloadContainer .ds-products .ds-product .product-name { display: none; }*/
#downloadCenter .left-container:not(.loginUser) .ds-products { grid-template-columns: 1fr 1fr; }
#downloadCenter .ds-products .ds-product .radio::after { display: block; content: ""; border-radius: 50%; border: 1px solid #707070; width: 20px; height: 20px; background-color: white; }
#downloadCenter .ds-products .ds-product .radio.checked::after { content: "\f058"; font-family: "Font Awesome 5 Free"; font-size: 20px; line-height: 20px; border: none; background-color: transparent; font-weight: 900; color: #fe8e14; }
#downloadCenter .ds-products .ds-product .download-link { margin: auto 0 0 0; text-align: right; color: #fe8e14; }
    #downloadCenter .ds-products .ds-product .download-link::after { content: ""; display: inline-block; margin-left: 3px; width: 13px; height: 30px; vertical-align: bottom; background: url(../../images/icons/right-arrow-orange.svg) no-repeat center; background-size: contain; }
#downloadCenter .left-container:not(.loginUser) .download-link { display: none; }

#downloadCenter .downloadContainer .left-container.loginUser .productSelection { display: none; }
#downloadCenter .downloadContainer.visitor .left-container .allProducts { display: none; }
#downloadCenter .downloadContainer.visitor .left-container .productSelection.ds-products { margin-bottom: 0; }
#downloadCenter .downloadContainer.visitor .left-container .productSelection .ds-product { display: block; height: auto; cursor: pointer; background: #FFFFFF; border: 1px solid #FFFFFF; }
#downloadCenter .downloadContainer.visitor .left-container .productSelection .ds-product.checked { border: 1px solid #888888; }
#downloadCenter .downloadContainer.visitor .left-container .productSelection .ds-product > p { font-size: 14px; line-height: 20px; margin: 15px 0 0 0; }

#downloadCenter .downloadContainer.visitor .left-container.warning { animation: warning 1s forwards linear; }
    #downloadCenter .downloadContainer.visitor .left-container.warning h4 { color: #B37D47; }
#downloadCenter .downloadContainer .left-container h4 img { display: none; }
#downloadCenter .downloadContainer.visitor .left-container.warning h4 img { display: inline; margin-left: 5px; vertical-align: initial; }

@keyframes warning {
    0% { border-color: #fe8e14; box-shadow: inset 0px 0px 10px #EB412D8C; }
    25% { border-color: #CCC; box-shadow: none; }
    50% { border-color: #fe8e14; box-shadow: inset 0px 0px 10px #EB412D8C; }
    75% { border-color: #CCC; box-shadow: none; }
    100% { border-color: #fe8e14; box-shadow: inset 0px 0px 10px #EB412D8C; }
}

/* media query */
@media (max-width: 1679px) {
    #downloadCenter #download-form .userName { width: 100%; }
        #downloadCenter #download-form .userName > div { width: 49%; }
    .basicFormGroup .prefix div { height: 26px; line-height: 26px; font-size: 16px; }

    /* check icon */
    .checkIcon { top: 7px; }

    #downloadCenter .right-container { padding-left: 35px; width: 45%; }
    #downloadCenter .left-container { width: 55%; }
    #downloadCenter .downloadContainer.visitor .left-container { width: 640px; }

    #downloadCenter .header h1 { font-size: 36px; line-height: 40px; margin: 30px 0px 20px 0; font-weight: normal; }
    #downloadCenter h2 { font-size: 24px; line-height: 30px; font-weight: normal; margin-bottom: 30px; }
    #downloadCenter h3 { font-size: 18px; line-height: 25px; margin-bottom: 18px; font-weight: normal; }
    #downloadCenter .item { width: 100%; height: auto; margin-right: 20px; margin-bottom: 20px; padding: 18.5px 16px 25px 23px; }
        #downloadCenter .item.saw { height: 178px; }
            #downloadCenter .item.saw:last-child p { margin-top: 15px !important; }
        #downloadCenter .item .fa-circle { font-size: 32px; }
        #downloadCenter .item .fa-check-circle { font-size: 32px; }
        #downloadCenter .item p { font-size: 16px; line-height: 26px; padding-left: 4px; }
        #downloadCenter .item .version { display: block; width: 100%; text-align: left; font-size: 14px; line-height: 30px; margin-bottom: 5px; margin-top: 0px; }

    #downloadCenter i.dbr-logo { display: inline-block; width: 230px; height: 32px; background: url(../../images/icons/small-logo/DBR_Horizontal_Pos.png) no-repeat left; background-size: contain; }
    #downloadCenter i.dnt-logo { display: inline-block; width: 186px; height: 32px; background: url(../../images/icons/small-logo/DNT_Horizontal_Pos.png) no-repeat left; background-size: contain; }
    #downloadCenter i.dwt-logo { display: inline-block; width: 186px; height: 32px; background: url(../../images/icons/small-logo/DWT_Horizontal_Pos.png) no-repeat left; background-size: contain; }
    #downloadCenter i.dlr-logo { display: inline-block; width: 251px; height: 32px; background: url(../../images/icons/small-logo/dlr.png) no-repeat left; background-size: contain; }
    #downloadCenter i.saw-logo { display: inline-block; width: 139px; height: 28px; background: url(../../images/icons/small-logo/saw.png) no-repeat; background-size: contain; }
    #downloadCenter i.sawh-logo { display: inline-block; width: 177px; height: 27px; background: url(../../images/icons/small-logo/sawh.png) no-repeat; background-size: contain; }
    #downloadCenter i.dce-logo { display: inline-block; width: 246px; height: 32px; background: url(../../images/icons/small-logo/dce.png) no-repeat left; background-size: contain; }
    #downloadCenter i.dps-logo { display: inline-block; width: 246px; height: 32px; background: url(../../images/icons/small-logo/dps.png) no-repeat left; background-size: contain; }
    #downloadCenter i.ddn-logo { display: inline-block; width: 246px; height: 32px; background: url(../../images/dynamsoft-logos/logo-ddn.svg) no-repeat left; background-size: contain; }
    #downloadCenter i.ddv-logo { display: inline-block; width: 246px; height: 32px; background: url(../../images/dynamsoft-logos/ddv-logo.svg) no-repeat left; background-size: contain; }

    #downloadCenter .normal-layout { top: 120px; }
    #downloadCenter i.icon-retired { width: 110px; height: 30px; line-height: 30px; font-size: 16px; }
}

@media (max-width: 1199.98px) {
    #downloadCenter .item { display: inline-block; width: 435px; background: #F5F5F5; margin-right: 30px; margin-bottom: 30px; vertical-align: bottom; padding: 26px 23px 30px 26px; position: relative; }
    #downloadCenter .left-container { width: 50%; }
    #downloadCenter .right-container { width: 50%; }

    #downloadCenter .downloadContainer.visitor .left-container { width: 540px; }
    .thirdPartLoginBtn { font-size: 14px; }
    .d-checkbox label { font-size: 14px; }
}

@media (max-width: 991.98px) {
    #downloadCenter .header p { margin: 0 auto; margin-bottom: 40px; font-size: 18px; }

    #downloadCenter .left-container { border: none; height: auto; width: 100%; }
    #downloadCenter .item { width: 100%; }
    #downloadCenter .right-container { width: 100%; height: auto; padding: 0; }
    #downloadCenter .item .fa-circle { font-size: 25px; }
    #downloadCenter .item .fa-check-circle { font-size: 25px; }
    #downloadCenter i.dbr-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.dnt-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.dwt-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.dlr-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.saw-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.sawh-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.dce-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.dps-logo { height: 25px; max-width: calc(100% - 30px); }
    #downloadCenter i.ddn-logo { height: 25px; max-width: calc(100% - 30px); }

    #downloadCenter .downloadContainer.visitor .right-container { border: 1px solid #CCC; border-top: 0; }
}

@media (max-width: 767.98px) {
    #downloadCenter .right-container { width: 100%; }
    #downloadCenter .left-container { width: 100%; }
    #downloadCenter h2 { font-size: 26px; line-height: 33px; font-weight: normal; margin-bottom: 15px; text-align: center; }
    #downloadCenter h3 { font-size: 20px; line-height: 30px; margin-bottom: 18px; font-weight: normal; text-align: center; }
    #downloadCenter .header h1 { font-size: 28px; width: 290px; line-height: 40px; margin: 30px auto; }
}

@media (max-width: 575.98px) {
    #downloadCenter .right-container { width: 100%; }
    #downloadCenter .item .version { display: block; width: 100%; text-align: left; font-size: 14px; line-height: 10px; margin-bottom: 9px; margin-top: 12px; }
}



#downloadCenter .loginUser { width: 100%; margin: 0 auto; }
    #downloadCenter .loginUser .typeName { font-size: 24px; line-height: 40px; margin-bottom: 25px; }
    #downloadCenter .loginUser .item { position: relative; display: inline-block; width: 507px; height: auto; background: #f5f5f5; padding-top: 45px; padding-left: 32px; margin-right: 30px; margin-bottom: 58px; vertical-align: top; }
        #downloadCenter .loginUser .item a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
        #downloadCenter .loginUser .item:nth-child(3n+3) { margin-right: 0px; margin-left: 0px; }
        #downloadCenter .loginUser .item .version { display: block; font-size: 18px; line-height: 30px; margin-top: 20px; margin-bottom: 10px; color: #323234; }
        #downloadCenter .loginUser .item .text { display: flex; color: #323234; align-items: flex-end; }
            #downloadCenter .loginUser .item .text i { display: inline-block; width: 13px; height: 10px; background: url(../../images/icons/right-arrow-orange.svg) center no-repeat; background-size: cover; }
            #downloadCenter .loginUser .item .text p { margin: 0; padding: 0; }
                #downloadCenter .loginUser .item .text p:first-child { font-size: 18px; line-height: 28px; flex: 1; }
                #downloadCenter .loginUser .item .text p:last-child { display: block; color: #fe8e14; font-size: 16px; width: 93px; margin-left: 36px; white-space: nowrap; }
                    #downloadCenter .loginUser .item .text p:last-child:hover { color: #fea543; }
#downloadCenter .item.loginCart { display: none; }
#downloadCenter .loginUser .item.loginCart { display: inline-block; }

@media (max-width: 1679px) {
    #downloadCenter .loginUser .item .text { flex-direction: column; align-items: flex-start; }
        #downloadCenter .loginUser .item .text p:first-child { font-size: 16px; }
        #downloadCenter .loginUser .item .text p:last-child { margin: 0; }

    #downloadCenter .loginUser { width: 100%; margin: 0 auto; }
        #downloadCenter .loginUser .typeName { font-size: 20px; line-height: 36px; margin-bottom: 25px; }
        #downloadCenter .loginUser .item { display: inline-block; width: 347px; background: #f5f5f5; padding-top: 40px; padding-left: 32px; margin-right: 20px; margin-bottom: 50px; }
            #downloadCenter .loginUser .item .version { display: block; width: 100%; text-align: left; font-size: 14px; line-height: 30px; margin-bottom: 5px; margin-top: 0px; }
}

@media (max-width: 1199px) {
    #downloadCenter .downloadContainer.visitor .ds-products { grid-gap: 20px; }
    #downloadCenter .downloadContainer.visitor .loginContent .loginOrRegister.dbrPadding { padding-left: 30px; padding-right: 30px; }
    #downloadCenter .downloadContainer.visitor .bottom-info { padding: 15px 30px; }

    #downloadCenter .loginUser { width: 100%; margin: 0 auto; }
        #downloadCenter .loginUser .typeName { font-size: 18px; line-height: 30px; margin-bottom: 20px; margin-left: 50px; }
        #downloadCenter .loginUser .productList { text-align: center }
        #downloadCenter .loginUser .item { text-align: left; display: inline-block; width: 395px; background: #f5f5f5; padding-top: 32px; padding-left: 25px; margin-right: 20px; margin-bottom: 40px; }
            #downloadCenter .loginUser .item:nth-child(3n+3) { margin-right: 20px; }
            #downloadCenter .loginUser .item:nth-child(2n+2) { margin-right: 0px; margin-left: 20px; }
            #downloadCenter .loginUser .item .version { font-size: 14px; line-height: 24px; margin-top: 16px; margin-bottom: 8px; }
}

@media (max-width: 992px) {
    #downloadCenter .downloadContainer.visitor { flex-direction: column; }
        #downloadCenter .downloadContainer.visitor .left-container { width: 100%; }
        #downloadCenter .downloadContainer.visitor .right-container { width: 100%; position: relative; }

    #downloadCenter .loginUser { width: 100%; margin: 0 auto; }
        #downloadCenter .loginUser .typeName { font-size: 18px; line-height: 30px; margin-bottom: 20px; margin-left: 9px; }
        #downloadCenter .loginUser .item { display: inline-block; width: 325px; background: #f5f5f5; padding-top: 32px; padding-left: 25px; margin-right: 15px; margin-bottom: 40px; }
            #downloadCenter .loginUser .item:nth-child(3n+3) { margin-right: 15px; }
            #downloadCenter .loginUser .item:nth-child(2n+2) { margin-right: 0px; margin-left: 15px; }
            #downloadCenter .loginUser .item .version { font-size: 14px; line-height: 15px; margin-top: 16px; margin-bottom: 8px; }
}

@media (max-width: 768px) {
    #downloadCenter .downloadContainer.visitor .ds-products { grid-template-columns: 1fr; }

    #downloadCenter .loginUser { width: 100%; margin: 0 auto; }
        #downloadCenter .loginUser .typeName { font-size: 18px; line-height: 30px; margin-bottom: 20px; }
        #downloadCenter .loginUser .item { display: inline-block; width: 100%; background: #f5f5f5; padding-top: 32px; padding-left: 25px; margin-right: 0; margin-bottom: 40px; }
            #downloadCenter .loginUser .item:nth-child(2n+2) { margin-right: 0px; margin-left: 0; }
            #downloadCenter .loginUser .item .version { font-size: 14px; line-height: 15px; margin-top: 16px; margin-bottom: 8px; }
}

@media (max-width: 575px) {
    #downloadCenter .loginUser { width: 100%; margin: 0 auto; }
        #downloadCenter .loginUser .typeName { padding-left: 15px; font-size: 16px; }
        #downloadCenter .loginUser .item { padding-left: 15px; padding-right: 15px; }
}