/* Global Color Vars */
:root {
    --white: #FFFFFF;
    --black: #000000;
    --light-grey: #ebebeb;
    --dark-blue: #254061;
    --orange: #e09832;
    --light-orange: #fca62c;
    --link-blue: #0b7cac;
    --light-blue: #bed8dc;
    --blue: #2983a6;
    --disabled: #6e6e6e;
}

/* Changes made inside "@media print" will only happen to the printable version of the page. Everything inside of here is for styling the PDF */
/* If you want to see those results without the PDF, open the page in chrome, open the print window, and change the "scale" to "60" */

@media print {
    body {
        zoom: 100%;
        margin-top: 5px;
    }

    .share-button-area {
        display: none;
    }

    .agent-area {
        margin-bottom: 40px;
        padding: 0px !important;
    }

    .agent-image {
        width: 150px;
    }

    .img-of-agent {
        padding-right: 20px;
    }

    .print-text-left {
        text-align: left !important;
    }

    .print-margins {
        margin: 10px auto !important;
        padding: 10px 0px !important;
    }

    .print-margin-bottom {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }

    .print-margin-bottom-less {
        margin-bottom: -15px !important;
        padding-bottom: 0 !important;
    }

    .print-col-8 {
        flex-grow: 6 !important;
    }

    .page-footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 0px 0 0px 0 !important;
    }

    .qrcode img {
        max-height: 400px !important;
        width: 100%;
        padding: 0 20px;
    }
    
    .qrcode {
        text-align: center;
        display: block !important;
    }
    
    .qrcode::before {
        content: 'Website';
        display: block;
        padding-bottom: 5px;
        color: var(--dark-blue);
        font-weight: 700;
    }

    .remove-before::before {
        content: "";
    }
    
    /* .qrcode::after {
        content: attr(data-phone);
        display: block;
        padding-top: 10px;
        font-weight: 600;
        font-size: 0.9em;
        color: var(--dark-blue);
    } */

    .qrcode ~ .btn-blue {
        display: none;
    }

    .qrcode ~ .btn-orange {
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px !important;
        font-size: 0.65em;
    }

    .providers-area .qrcode ~ .btn-orange {
        font-size: 0.6em !important;
        margin-top: 10px !important;
    }

    .promo-text-small {
        font-size: 1.10em !important;
    }

    .print-margin-top {
        margin-top: 0 !important;
    }

    .print-margin-top-less {
        margin-top: -30px !important;
    }

    .text-print-center {
        text-align: center !important;
    }

    .flex-print-name {
        width: 25%;
        text-align: center !important;
    }

    .flex-print-speed {
        width: 57%;
    }

    .providers-area img {
        max-width: 200px;
        max-height: 125px;
        object-position: center;
    }

    .isp-name-smaller {
        font-size: 1.25em !important;
    }

    .print-padding {
        padding: 0 20px;
    }

    .print-padding img {
        max-width: 200px;
        max-height: 125px;
        margin-right: 0 !important;
    }

    .print-padding .qrcode {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
    }

    .show-on-print {
        display: inline !important;
    }
}

.show-on-print {
    display: none;
}

/* Modal and modal element styling */

.copy-success {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.copy-success-show {
    opacity: 1;
}

#shareModalTitle {
    display: none;
}

#shareModalTitleMobile {
    margin-top: -45%;
    margin-bottom: 45%;
    font-size: 5em;
}

#shareModalTitleMobile h5 {
    font-size: 0.34em;
}

.pdf-download-btn-container {
    position: absolute;
    bottom: 4%;
    transform: translateX(5%);
}

.modal input {
    background-color: var(--dark-blue);
    color: var(--white);
}

.modal p {
    font-size: small;
    padding-top: 5px;
}

.modal-button-mobile-trans {
    transform: translate(10%);
}

/* QR Code styling */

.qr-code-container {
    min-width: 240px;
    border-radius: 15px;
}

.qrcode {
    display: none;
}

.qr-code-container .qrcode {
    display: block;
    width: fit-content;
    border-radius: 15px;
}

/* Agent area (blue section) */

.agent-area img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

.agent-area h2 {
    font-size: 2.3em;
}

.agent-area p {
    font-size: 1.3em;
}

.agent-area h4 {
    font-size: 1.35em;
}

.agent-area a {
    font-size: 1.3em;
    color: var(--white);
    text-decoration: none;
}

.agent-area a:hover {
    text-decoration: underline;
}

/* Providers at Address Section */
.providers-at-address-section h2 {
    font-size: 2.2em;
}

.providers-at-address-section h3 {
    font-size: 1.5em;
}

.providers-at-address-section h5 {
    font-size: 1.25em;
}

.providers-at-address-section .speed-cards h3 {
    font-size: 1.8em;
}

.providers-at-address-section p {
    font-size: 1.5em;
}

.provider-speed h2 {
    font-size: 1.8em;
}

.provider-speed p {
    font-size: 1.2em;
    font-style: italic;
    margin-bottom: 0;
}

.providers-area img {
    max-height: 80px;
    object-fit: contain;
    object-position: center;
}

.providers-area .border-bottom:last-child {
    border-bottom-width: 0px !important;
}

/* Footer section */

.page-footer img {
    max-height: 85px;
}

.page-footer h5 {
    margin-bottom: 0 !important;
    font-size: 1em !important;
    padding: 10px 0px;
}

.footer-logo-container {
    min-width: 60px;
}

/* Button Presets */

/* Colors */
.btn-blue {
    background-color: var(--blue);
    color: var(--white) !important;
    border-color: var(--blue);
    font-size: 0.8em;
    padding: .7em 1.5em .7em 1.5em;
}

.btn-blue:hover {
    background-color: var(--link-blue);
    border-color: var(--link-blue);
}

.btn-blue:focus {
    background-color: var(--link-blue);
    border-color: var(--link-blue);
}

.btn-orange {
    background-color: var(--orange);
    border: var(--orange);
    font-size: 0.8em;
    padding: .7em 1.5em .7em 1.5em;
}

.btn-orange:hover {
    background-color: var(--light-orange);
    border: var(--light-orange);
}

.btn-orange:focus {
    background-color: var(--light-orange);
    border: var(--light-orange);
}

.btn-orange:disabled, .btn-blue:disabled {
    background-color: var(--disabled);
}

/* Sizes */

.btn-big {
    font-size: 1.1em;
    padding: 7px 15px;
}

/* Background Presets */

/* Colors */
.bg-white {
    background-color: var(--white);
}

.bg-blue {
    background-color: var(--blue);
    color: var(--white) !important;
    border-color: var(--blue);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
    color: var(--white);
}

.bg-grey {
    background-color: var(--light-grey);
}

/* Text Presets */

/* Colors */
.txt-light-blue, .txt-light-blue a:hover {
    color: var(--light-blue) !important;
}

.txt-white, .txt-white a:hover {
    color: var(--white) !important;
}

.txt-white-muted {
    opacity: 0.5;
}

.txt-dark-blue, .txt-dark-blue a:hover {
    color: var(--dark-blue) !important;
}

.txt-blue, .txt-blue a:hover{
    color: var(--blue) !important;
}

.txt-black, .txt-black a:hover {
    color: var(--black) !important;
}

.txt-orange {
    color: var(--orange);
}

/* Weights */

.txt-super-thin {
    font-weight: 100;
}

.txt-thin {
    font-weight: 300;
}

.txt-thick {
    font-weight: 700;
}

.txt-fat {
    font-weight: 900;
}

/* Break Points */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .pdf-download-btn-container {
        position:initial;
        transform: translateX(0%);
    }

    #shareModalTitle {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    #shareModalTitle {
        display: inline;
    }

    .modal-button-mobile-trans {
        transform: translate(0%);
    }

    .btn-big {
        font-size: 1.4em;
        padding: 8px 17px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .page-footer h5 {
        padding: 0px 0px;
    }

    .border-sm-0 {
        border-width: 0px !important;
    }

    .providers-area img {
        max-height: 80px;
        object-fit: contain;
        object-position: left;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .footer-logo {
        padding: 10px 0px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}