@charset "UTF-8";
/***** Geashill NS | Custom HPP. (c) 2020 eCOMM Merchant Solutions Ltd. | Rev.2020.08.05 WW | ecomm-pay.com *****/
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*---- CORE STYLES ---------------------*/
:root {
    --main-bg-color: #fff;
    --p-color: #404040;
    --prime-color: #02e2ae;
    --secondary-color: #202020;
    --button-bg-color: #02e2ae;
    --button-fore-color: #202020;
}

body {
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    background-color: #fff;
    color: var(--p-color);
    padding-bottom: 20px
}

.body-content {
    padding-left: 15px;
    padding-right: 15px
}

.dl-horizontal dt {
    white-space: normal
}

.wmx200 {
    max-width: 200px !important;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Overrides */
.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
}
.dl-horizontal dt {white-space: normal;}
.wmx200 {max-width:200px !important}
.wmx250 {max-width: 250px !important}
.wmx300 {max-width: 300px !important}
.text-centered {text-align: center !important;}
.inline{display:inline-block;}
/* Link and heading colors */
a, a:active, a:hover, a:visited {color: var(--secondary-color);}
h1, h2, h3 {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
#clientBrand h3 {color: var(--prime-color);}
.control-label {color: #5b5b5b !important;}
/* Allow the LHS logo/img to be centered on small screens. */
@media screen and (max-width:767px) {
    .small-inline {
        display: inline;
    }
}

/* Set width on the form input elements since they're 100% wide by default */
@media screen and (min-width:768px) {
    input, select, textarea {
        max-width: 330px;
    }
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
/* ------ Customisations ----------------*/
.navbar.navbar-inverse.navbar-fixed-top {
    background-color: var(--secondary-color);
    color: var(--prime-color);
    padding: 4px 4px 8px 4px;
    word-break: break-word;
}
.navbar-inverse {
    border: none;
}

/*--- Media queries ---------------*/

@media screen and (max-width:639px) {
    body {
        padding-top: 50px;
    }

    .navbar-header h1, h2, h3 {
        font-size: 18px;
        text-align: center;
    }
    #clientBrand {
        margin-top: -20px;
    }
    #crest {
        display:none;
    }
    /* Reduce padding on smartphones here: */
    .form-control {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    .control-label {
        margin-left: -14px;
    }
    #amountdisplay {
        padding: 0;
        position: relative;
        top: 14px;
        width: calc(100% + 30px);
        text-align: center;
    }
}

@media screen and (min-width:640px) and (max-width:767px) {
    body {
        padding-top: 70px;
    }

    .navbar-header h1, h2, h3 {
        font-size: 24px;
        text-align: center;
    }
}

    @media screen and (min-width:768px) {
        body {
            padding-top: 100px;
        }
        .photo-background {
            /*background-image: url(../images/cashel-ns-bg.jpg);*/
            background-position: center top;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .navbar-header h1 {
            font-size: 34px;
            text-align: center;
        }

        .navbar-header h2 {
            font-size: 28px;
            text-align: center;
        }

        .navbar-header h3 {
            font-size: 24px;
            text-align: center;
        }
    }


@media screen and (min-width:991px) {
    #quantity-label {
        text-align: left !important;
        margin-left: -7px !important;
    }
    #quantity-field {
        margin-left: -56% !important;
        cursor: pointer;
    }
    #quantity-field ~ .text-danger {
        margin-left: -56%;
        display: inline-block;
    }
}

footer, .navbar-header {
    text-align: center;
    font-size: 12px;
    float: none !important;
}

footer {
    width: 96%;
    margin: 40px auto 10px auto;
}

.btn-action, .btn-action:focus, .btn-action:active, .btn-action:visited {
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--button-fore-color);
    background-color: var(--button-bg-color);
    width: 100%;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    height: 48px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
    filter: brightness(100%);
    transition: .6s filter ease-in-out;
    border-radius: 0;
    border: none;
    transition: 0.6s opacity ease-in-out;
}

    .btn-action:hover {
        filter: brightness(115%);
        transition: 0.6s filter ease-in-out;
    }

    textarea.form-control {
        height: 100px;
        resize: none;
    }

    textarea#tooltip {
        background: none;
        color: red;
        height: 70px;
        font-size: 11.5px;
        cursor: default;
        border: none;
        vertical-align: middle;
        box-shadow: none;
        padding: 12px 3px;
        margin: -10px 0 -40px 0;
    }

#quantityDropdown {
    cursor: pointer;
}