﻿.document-scanner .main { position: relative; min-height: 900px; width: 930px; margin-left: auto; margin-right: auto; max-width: 98%; }
    .document-scanner .main .application > p { width: 83%; margin-left: auto; margin-right: auto; }
    .document-scanner .main .application .request { padding: 45px 0; background-color: #F5F5F5; display: flex; flex-direction: column; align-items: center; }
        .document-scanner .main .application .request .requestForm { width: 550px; max-width: 100%; display: flex; align-items: center; max-width: 80%; }
            .document-scanner .main .application .request .requestForm label { font-size: 18px; margin-right: 7px; }
            .document-scanner .main .application .request .requestForm input { flex: 1; height: 39px; outline: none; font-size: 16px; border: 1px solid #707070; padding: 0 10px; }
    .document-scanner .main .application .g-btn { text-transform: uppercase; font-size: 18px; height: 52px; line-height: 52px; width: 200px; text-align: center; padding: 0 15px; background-color: #fe8e14; display: inline-block; color: white; font-family: Oswald-Regular; }
        .document-scanner .main .application .g-btn.generate { transition: all .2s; cursor: pointer; }
        .document-scanner .main .application .g-btn.generating { cursor: not-allowed; display: none; }
        .document-scanner .main .application .g-btn.generate:hover { transform: translate(8px, -8px); box-shadow: -8px 8px 0 0 black; }
    .document-scanner .main .application .license { height: auto; min-height: 180px; background-color: #EEEEEE; padding: 19px 55px; display: none; }
        .document-scanner .main .application .license p { margin: 0; line-height: 24px; }
        .document-scanner .main .application .license .key-container { margin-top: 16px; height: auto; background-color: white; display: flex; padding: 10px 15px; align-items: center; justify-content: space-between; }
            .document-scanner .main .application .license .key-container .key { max-width: 80%; word-break: break-all; }
        .document-scanner .main .application .license a { cursor: pointer; color: #fe8e14; font-family: OpenSans-SemiBold; font-size: 18px; }
        .document-scanner .main .application .license > a { margin-top: 18px; display: inline-block; }

    .document-scanner .main .guide { margin-top: 38px; }
        .document-scanner .main .guide .title { display: flex; align-items: center; }
            .document-scanner .main .guide .title .company { font-size: 18px; font-family: OpenSans-SemiBold; }
        .document-scanner .main .guide .screenshot { margin-top: 7px; background-origin: content-box; padding: 0 21px; border: 1px solid #DDDDDD; background-color: #F5F5F5; height: 250px; background-size: contain; background-position: left center; background-repeat: no-repeat; }
        .document-scanner .main .guide .title .icon { display: inline-block; width: 50px; height: 30px; background-size: contain; background-position: left center; background-repeat: no-repeat; }
        .document-scanner .main .guide.salesforce .icon { background-image: url("../../images/products/salesforce-logo.png"); }
        .document-scanner .main .guide.salesforce .screenshot { background-image: url("../../images/products/salesforce-extension.png"); }
        .document-scanner .main .guide.outlook .icon { background-image: url("../../images/products/outlook-logo.png"); }
        .document-scanner .main .guide.outlook .screenshot { background-image: url("../../images/products/outlook-extension.png"); }
        .document-scanner .main .guide.gmail .icon { background-image: url("../../images/products/gmail-logo.png"); }
        .document-scanner .main .guide.gmail .screenshot { background-image: url("../../images/products/gmail-extension.png"); }

    .document-scanner .main .faq { margin-bottom: 120px; }
        .document-scanner .main .faq .q { margin-top: 30px; font-family: OpenSans-SemiBold; }

.loader { margin-left: 10px; width: 20px; height: 20px; vertical-align: -2px; border: 2px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.document-scanner .mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 1000000; }
    .document-scanner .mask .dialog { background: white; border: 1px solid #f5f5f5; width: 450px; max-width: 100%; padding: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .document-scanner .mask .dialog p { margin: 0; }
        .document-scanner .mask .dialog .close-btn { background-color: #fe8e14; color: white; padding: 5px 20px; margin: 15px auto; margin-bottom: 0; font-size: 16px; cursor: pointer; float: right; }

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1399px) {
}

@media screen and (max-width: 1199px) {
}

@media screen and (max-width: 991px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 575px) {
}
