html.noscroll {
    overflow-y: hidden;
}

body {
    /*padding-top: 50px;*/
    padding-bottom: 20px;
    overflow-y: scroll;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center;
    max-width: 500px;
    min-width: 99%;
    /*float: left;*/
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.container {
    max-width: 530px !important;
}

.wholeBody
{
    padding-left: 15px;
    padding-right: 15px;
    max-width: 540px !important;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3px;
}

.top-menu {
    text-align: center;
}
.top-menu ul {
    display: inline;
    padding: 0;
}
.top-menu li {
    display: inline;
}

.conversion-heading {
    font-size: 30px;
}

#saysItsFree {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 7pt;
    margin: 3px;
    text-decoration: none;
}

#other-products-box {
    position: relative;
}

#other-products-content {
    border: 2px solid #747474;
    border-left: none;
    border-right: none;
    margin: 20px auto 10px auto;
    padding: 10px 0;
    text-align: center;
    max-width: 90%;
}

    #other-products-content li.other-product {
        max-width: 225px;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-left: 0px;
        padding-left: 0px;
        list-style: none outside none;
        display: inline-block /*list-item*/;
        vertical-align: middle;
    }


.other-products-title {
    color: #999 !important;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    text-transform: uppercase;
    font-size: 7pt;
    font-weight: normal;
    font-family: sans-serif;
}

.other-products-separator {
    visibility: hidden;
}

    @media screen and (min-width: 1081px) {
        /* make the ads appear on the right */
        #other-products-box {
            display: block;
        }

        #other-products-content {
            position: absolute;
            top: 40px;
            left: 540px;
            width: 225px;
            margin: 30px auto 10px auto;
            padding: 0 0 10px 0;
            text-align: left;
            border-width: 2px;
        }

            #other-products-content li.other-product {
                margin-top: 15px;
            }

        .other-products-separator {
            visibility: visible;
            border-top: 2px;
            border-style: solid;
            color: #747474;
            margin: 11px -3px 5px 0px;
        }

        .body-content {
            float: left;
        }
    }

    .option-info {
    float: right;
    margin-left: 5px;
}

#file-box {
    padding: 4px;
}

#file-field {
    display: block;
    max-width: 70% !important;
    min-width: 300px !important;
}

html.js #upload-area{
    white-space: nowrap;
}

html.js #file-field {
    opacity: 0;
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    z-index: -1;
    top: 0;
    left: 0;
}

html.js #file-field + label {
    padding: 15px 30px;
    border: 2px dashed gray;
    border-radius: 10px;
    color: gray;
    text-align: center;
    min-width: 400px;
    max-width: 400px;
    font-size: medium;
    font-weight: 700;
    display: inline-block;
    cursor: pointer;

    text-overflow: ellipsis;
    overflow-x: hidden;
    vertical-align: top;
}
html.js #convertButton {
    vertical-align: top;
}

.menu-button {
    padding: 1px 6px !important;
    border-width: 2px !important;
    border-style: outset !important;
}
.menu-button:active {
    border-style: inset !important;
}

.js-button {
    display: none;
}
.btn-group.js-button, .btn-group-vertical.js-button {
    display: none;
}

html.js .js-button {
    display: inline-block;
}

html.js .more-options {
    display: none;
}

html.js .show-more-button, html.js .show-less-button {
    clear: both;
    margin-bottom: 1.5em;
}

html.show-more-options .more-options {
    display: inline-block;
}

html.show-more-options div.more-options {
    display: block;
}


html.show-more-options .less-options {
    display: none;
}

.clear-control:after {
    clear: both;
    margin-bottom: 1em;
}
.clear-control:before, .clear-control:after {
    display: table;
    content: " ";
}

.clear-control.no-margin:after {
    margin-bottom: 0;
}

@media screen and (max-width: 560px) {
    /* Make images smaller, make ads single column and wrap the links at the preferred point */
    html.js #file-field + label {
        overflow-wrap: break-word;
        padding: 15px 20px;
        min-width: 90%;
        max-width: 90%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
        border-bottom-width: 0;
    }
    html.js #convertButton {
        min-width: 90% !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 5px 0 !important;
    }

    html.js #upload-area{
        white-space: normal;
    }

    .wrap-point {
        display: block;
        margin-top: 2px;
    }
    

    #mode-box img {
        max-width: 90px !important;
    }

    #other-products-content {
        max-width: 260px;
    }
}

@media screen and (max-width: 510px) {
    /* Make all inputs full width */
    input, select, textarea {
        max-width: 100%;
    }
    .control input,.control select, .control textarea {
        min-width: 90%;
    }

    .lbl-left {
        float: none !important;
    }
    
    .option-info {
        float: none;
        margin-left: 5px;
    }

    div .control.align-rt {
        display: block !important;
        float: none;
    }
    
    #file-password, #ThousandsSeparator, #DecimalSymbol {
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 420px) {
    /* Make images smaller, make page padding smaller, avoid shrinking too far */
    #mode-box img {
        max-width: 60px !important;
    }
    .body-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #other-products-box {
        min-width: 255px;
    }
    .wholeBody {
        padding-left: 5px;
        padding-right: 5px;
    }
}

html.js #file-field:focus + label,
html.js #file-field + label:hover {
    border-color: #0072ff;
    color: #0072ff;
}

html.js #file-field:focus + label {
    /*outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;*/
    border-color: #0072ff;
    color: #0072ff;
}


html.js #file-field + label.has-file {
    border-style: solid;
    border-color: #0072ff;
    color: #0072ff;
}


#drop-target {
    display: none;
    z-index: 2000;
}

html.dragging #drop-target {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 5px solid #138cff;
    background-color: rgba(180, 180, 180, 0.30);
    z-index: 2000;
    text-align: center;
    color: #138cff;
}

#drop-target span {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: xx-large;
    background: rgba(19, 140, 255, 0.80);
    border-radius: 20px;
    padding: 10px;
    color: white;
}


#mode-box .converter-option {
    padding: 7px;
    border-radius: 10px;
    display: inline-block;
}

#mode-box .converter-option:hover {
    border: 2px dashed #0072ff;
    padding: 5px;
}

#mode-box .converter-option img {
    max-width: 120px;
}

#mode-box .active {
    border: 2px solid #0072ff !important;
    padding: 5px;
}

.mode-specific-options {
    display: none;
}

form .mode-specific-options {
    display: block;
}

html.noscroll #status-box, body.modal-open #status-box {
    overflow-y: scroll;
}

#status-box {
    display: block;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(150, 150, 150, 0.50);
    z-index: 3000;
    text-align: center;
    padding: 0 30px;
    color: #333;
}

#status-box > #status-box2 {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#status-box2 > #status-content {
    position: absolute;
    max-width: 95%;
    width: 600px;
    max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 30px;
    margin: 0px auto;
    top: 50%;
    left: 0;
    right: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 3px solid #333;
    border-radius: 20px;
    background: white;
    padding: 10px;
    padding-top: 15px;
    text-align: center;
}

#recent-conversions {
    padding: 5px;
}
#recent-conversions.recent-conversions-empty {
    display: none;
}

.check-status-button {
    padding: 1px 6px !important;
    border-width: 2px !important;
    border-style: outset !important;
    margin: 1px;
}

#status-content span {
    font-size: large;
}

#status-content .error {
    font-size: large;
    color: red;
}

/*#status-content .conversion-error {
    color: red;
}*/
#status-content .conversion-error p {
    font-size: large;
}

#status-content hr {
    margin-top: 15px;
    margin-bottom: 5px;
}

#excelDetectionOpts {
    display: block;
    background-color: #ffffcc;
    border: 1px solid;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 1em;
}

.button {
    border-radius: 5px;
}

.lbl-left {
    text-align: left;
    float: left;
}

div .align-rt {
    display: inline;
    float: right;
}

div .align-lt {
    display: inline;
    float: left;
}

.main {
    width: 410px;
}

input.btn-close {
    float: right;
}

#convertButton {
    text-align: center;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
    min-width: 90%;
    color: white;
    background-color:#eaaf1a;
    border-color: #b38b25;
    /*background-image:url(Images/Pdf-convert.png);
     background-repeat: no-repeat;*/
}
#convertButton:hover
{
     background-color:#e0a204;
     background-color:#dc9e00;
     border-color: #886608;
}
html.js #convertButton,html.js #btn-donate {
    margin-top: 0;
    min-width: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}
#clearFloat {
    clear: both;
}

#file-field-label {
    display: none;
}
html.js #file-field-label {
    display: inline;
}

#file-password, #ThousandsSeparator, #DecimalSymbol {
    margin-right: 19px;
}


a.btn-donate, a.btn-donate:active, a.btn-donate:visited, a.btn-donate:link {
    background-color: #fdc04f;
    color: #222222;
    border-radius: 8px;
    padding: 4px;
    border-color: #b38b25;
    border-width:2px;
    border-style:outset;
}

a.btn-donate:hover
{
     background-color:#dc9e00;
     border-color: #886608;
}
#donate-block
{
    text-align: center;
}

.smalltext
{
    font-size: 8px;
}

div#donate-box {
    padding-top: 5px;
}

.cookie-disclaimer {
    text-align: center;
    font-size: 8pt;
}

.donate-options {
    display: flex;
    justify-content: center;
}

.donate-option {
    margin: 0 15px;
}

@media screen and (max-width: 420px) {
    .donate-options {
        display: block;
    }
}