/*
 * First Page
 * 
 */

body {
    background: #F6F6F6;
    font-family: proxima-nova, sans-serif !important;
    padding: 20px;
    /* padding-bottom: 35vh;
    background: #f6f6f6 url(../images/background-filler.png) 50% 100% no-repeat; */
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: none !important;
}

.container > div.row.mt-3 {
    position: relative;
    padding-top: 140px;
}

@media only screen and (max-width: 991px) {
    .container > div.row.mt-3 {
        padding-top: 110px;
    }
}

form.qrcdr-form > div.col-12.pb-2 > div.row > div.col-12:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

.nav-fill .nav-item, .nav-fill > .nav-link {
    flex: none;
    width: 20%;
}

.bg-primary, .nav-pills .nav-link.active, .nav-pills .show > .nav-link, label.custom-file-label:after {
    color: #427FE0;
    background-color: #E3EEFF !important;
}

@media only screen and (max-width: 991px) {
    a.nav-link.rounded-pill span {
        display: none !important;
    }
}

#dataTabs > .tab-pane {
    margin-top: -47px;
}

.accordion-item {
    background: transparent none !important;
}

.sp-original-input-container input {
    background: #ffffff !important;
    color: #00225D !important;
}

.option-heading-label {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
}

.tab-content .tab-pane input,
.form-select,
.form-control {
    border: 1px solid #C4C4C4 !important;
    border-radius: 5px;
}

.sp-colorize-container {
    background: none !important;
}

.sp-colorize-container .form-control {
    border-radius: 0 5px 5px 0 !important;
}

.tab-content .tab-pane input,
.form-control {
    background: #FFFFFF;
}

.btn-group-toggle label.btn,
.styleselecta label.btn {
    width: 46px;
    height: 46px;
    background: none !important;
    margin-right: 4px !important;
    padding: 6px 0 !important;
    border-radius: 10px !important;
}

.styleselecta:not(.btn-group-toggle) label.btn {
    width: 52px;
    height: 52px;
}

label.btn[for^="marker_in"] { padding: 8px 0 !important; }
label.btn[for^="marker_out"] { padding: 6px 0 !important; }
label.btn[for^="pattern_"] { padding: 6px !important; }

.checked-option {
    width: 46px;
    height: 46px;
    padding: 6px 0;
    background: #ededed !important;
    border: 1px solid #c4c4c4 !important;
}

.btn-group-toggle label.btn.custom-watermark {
    padding: 0px !important;
    text-indent: -6px;
    position: relative;
}

.btn-group-toggle label.btn.custom-watermark::after {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 0px;
    width: 100%;
    height: 100%;
    line-height: 39px;
    content: "Logo";
    font-size: 80%;
    display: block;
    border-radius: 10px;
    color: #427fe0;
    border: 3px solid #e3eeff;
}

.btn-group-toggle label.btn.custom-watermark.has-logo::after {
    display: none;
}

.image-editor {
    margin-top: 24px;
}

@media only screen and (max-width: 991px) {
    .image-editor {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
}

.mb-0 { margin-bottom: 0 !important; }

button.btn.btn-lg.btn-block.btn-primary.ellipsis.generate_qrcode.rounded-pill {
    position: absolute;
    width: 100%;
    height: 80px;
    border-radius: 0px 0px 10px 10px !important;
    background: #FF5254;
    left: 0;
    bottom: 0;
    box-shadow: 0 0 0 1px #ff5254;
    border: none;
    z-index: 2;
    opacity: 1;
}

button.btn.btn-lg.btn-block.btn-primary.ellipsis.generate_qrcode.rounded-pill.btn:disabled {
    background: #fda3a4;
    box-shadow: 0 0 0 1px #fda3a4;
}

.placeresult {
    background: #ffffff !important;
    border: 1px solid #C4C4C4;
    padding-bottom: 94px;
    box-shadow: none !important;
    border-radius: 0px 0px 10px 10px;
}

.text-center.mt-2.linksholder {
    margin: 0 !important;
}

.svgtopng, .serve-svg {
    font-style: normal;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 24px;
    color: #000000;
}

.svgtopng svg, .serve-svg svg {
    transform: scale(0.6) translateY(-2px);
}

.preload-png {
    transform: scale(0.5);
}

.resultholder {
    padding: 38px;
}

@media only screen and (max-width: 991px) {
    .resultholder {
        padding: 20px;
    }
}