/* Move down content because we have a fixed navbar that is 50px tall */

body {
    background-color: #D1D2D4 !important;
}

content > div, header > div{
    background-color:#ffffff ;
    padding-bottom: 16px;
}

input[disabled], label[disabled] {
    cursor: not-allowed !important;
}

.withdraw-message{
    margin-top: 10px;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat');

@font-face {
    /*font-family:"Gotham Light Regular";*/
    src: url("/fonts/Gotham_Light_Regular.otf") format('opentype');
    }
.hide {
    display:none;
}

.txtPin {
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal-body {
    padding-bottom: 1px !important;
}

/*COLOURS Background*/
.bg-dark-purple { background-color: #763c8d;}
.bg-light-blue {background-color:#edf5fc;}
.bg-light-purple {background-color:#edcef9;}
.bg-white {background-color:#fff;}
.bg-form-blue {background-color:#CEE6F7; border:2px solid #0090CE; border-radius:5px; padding:3px 5px; outline:none; margin:2px 0;}
    .bg-form-blue:active, 
    .bg-form-blue:focus {background-color:#dfe5f4; border:2px solid #1882c3; border-radius:5px; }


/*Checkboxes*/

.margin-checkbox {margin:0 30px 0 0!important;}

/*COLOURS Fonts*/
.font-dark-orange {color:#0090CE;}
.font-dark-blue {color:#2b2b2b;}
.font-white {color:#fff;}
.font-dark-purple {color:#763c8d;}
.font-grey {color:#424447;}
.font-red {color:#e40000;}

.font-dark {color:#002F6D;}


.divider {border-color:#0090CE;}
.move-up {position:relative; bottom:30px;}
   

.boldy {font-weight:600!important;}

.borderless td, .borderless th {
    border: none!important;
    max-width:150px;
}
.no-padding,
.no-padding tr,
.no-padding td {
    padding: 0 !important;
}
.padding-top-left-20 {padding:20px 0 0 20px;}
.padding-left-2 {padding-left:2px;}
.padding-left-20 {padding-left:20px;}
.padding-top-10 {padding-top:10px;}
.padding-top-20 {padding-top:20px;}
.padding-bottom-20 {padding-bottom:20px;}
.offer-top-30 {padding-top:30px;}

.vertical-middle{vertical-align:middle!important;}

.no-decoration,
.no-decoration a,
.no-decoration a:hover {
    text-decoration:none;
    color:#fff!important;
}

.no-margin {margin-left:0!important; margin-right:0!important;}
.margin-top-10 {margin-top:10px;}
.margin-top-20 {margin-top:20px;}
.margin-left-28 {margin-left:28px;}
.margin-bottom-20 {margin:0 0 20px 0;}
.margin-top-bottom-20 {margin:20px 0!important;}
.margin-top-bottom-5 {margin:5px 0!important;}

.spacer {margin-top:20px; height:20px;}

.div-spacer {margin-bottom:15px;}

.smaller-font {font-size:0.85em;}
.visbile-mobile {display:none;}

.float-left {
    float:left;
}
.float-right {
    float:right;
}

.v-align {
    vertical-align:text-bottom;
}
body, 
h1, 
h2, 
h3 {        
    font-family:'Gotham Light Regular', sans-serif, Arial !important;
}

h2,
h3 {color:#0090CE;

}

b {cursor:pointer;}

.heading-tiny {
    font-size:14px;
    color:#144391;
}

.hundred {max-width:100%;}
.display-inline {max-width:100%; display:inline-block;}

.note-text {
    font-size:0.8em;
    vertical-align:initial;
}

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

/*GENERAL CLASSES*/
.font-15 {
    font-size:1.5em;
}
.font-20 {
    font-size:2em;
}
.padding-bottom-2 {
    padding-bottom:2em;
}

.margin-top-13 {
    margin:13px 0 0 0;
}



/*Header */
.header-img {
    padding: 15px 0 10px 0;
 /*   z-index:-2; */
}

.header-img img {
    margin:auto;
    display:grid;
    width:100%;
}

.header-instructions {
    position:absolute;
    bottom:2em;
    top:28em;
    max-width:25%;
    z-index:-1;
}


.form-width {width:350px;}
.form-width-smaller {width:313px;}
.form-width-small {max-width:150px;}

.code-field-width-half {width:20%}
.code-field-width {width:66%;}


/*BUTTONS*/
.competitionButton {    
    background-image: url('../img/Enter-Competition.png');
    background-repeat: no-repeat;
    width:219px;
    height:38px;
    border-radius:10px;
    background-color:#fff;
    outline:none;
    margin-left:8em;
}
.orderButton {
    background-image: url('../img/Order-Product.png');
    background-repeat: no-repeat;
    width:181px;
    height:38px;
    border-radius:10px;
    background-color:#fff;
    outline:none;
    margin-left:25px;
}

.btn-general {
    background-repeat:no-repeat;
    background-color:#fff;
    border:none;
}

.btn-green {
    background-color: #60A231;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: none;
}
    .btn-green:hover, .btn-green:focus{
        color: white !important;
    }
    
.btn-header {
    background-image: url('../img/Go.png');    
    width:55px;
    height:40px;   
    position:relative;    
    top:9px;
    left:5px;

}
.btn-confirmOrder {
    background-image: url('../img/Confirm-Order.png');
    min-width:193px;
    height:40px;    
    position:relative;
    top:1.4rem;
    left:1rem;
   
}

input[type="file"] {
    position: relative;       
    cursor: pointer;
    opacity:0;
    width: 65px;     
    height:38px;
    z-index:5;
    cursor:pointer;
}

.fakeClass {
    background-image: url('../img/Upload.png');
    width: 65px;     
    height:23px;
    position:absolute;    
    overflow:hidden;
    background-repeat:no-repeat;
    background-color:#fff;
    border:none;
    cursor:pointer; 
    top:158px;
    z-index:1;
}


.btn-submit{    
    background-image: url('../img/Submit.png');
    width: 88px;     
    height:32px;
    position:relative;
    top:-1em;
    right:3em;
    float:right;
     -moz-opacity:1;
    filter:alpha(opacity: 1);
    opacity: 1;
    z-index:3;   
    border-radius:7px;
}



/*IMAGES*/
.your-pharmacy-image {
    display:flex;
    align-items:center;
    justify-content:center;
}
.your-pharmacy-image img {
  float:right;
  height:auto;
 /*   max-width:100%; */
}
.img-spa {width:100%;}
.img-pos {vertical-align:top;}
.img-pack {width:48%;}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 400px;
}

/*TABLE STYLING*/
.th-orange {background-color:#E87D0A;color:#fff;}
.header-turq {background-color:#3C8285!important;color:#fff;}

th,
td,
tr {
    padding:0 5px;
    text-align:left;
}

.table-padding th,
.table-padding td,
.table-padding tr {padding:10px; text-align:center!important; vertical-align:initial;}

.th-width {
    min-width:100px;
}

.table-bordered .no-border,
.no-border th,
.no-border td,
.no-border tr{
    border-bottom-color:#fff;
    border-right-color:#fff;
}

.please-select{
    margin: 10px 0 10px 0
}


label {
    margin-top: 5px;
    margin-bottom: 0px !important;
    vertical-align: middle;
    font-weight: normal !important;
    cursor: pointer;
}

.bg-checkbox {
 /*   background-image:url(../img/check-unchecked.png);
 background-repeat:no-repeat;*/
}

input[type=radio],
input[type=checkbox] {
    background-color: #fff;
    border: 1px solid #E41B13;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: checkbox;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/*input[type=radio] + label {
    background-color:#fff; 
    border:1px solid #0090CE;
    -webkit-appearance:none;
    -moz-appearance: none;
     width:15px;
     height:15px;     
     background-image: url(../img/check-unchecked.png);
}*/
    select:active,
    input[type=select]:active,
    input[type=submit]:active,
    input[type=radio]:active,
    input[type=button]:active,
    input[type=checkbox]:active {outline:none;}

    select:focus,
    input[type=select]:focus,
    input[type=submit]:focus,
    input[type=radio]:focus,
    input[type=button]:focus,
    input[type=checkbox]:focus {outline:none;}

    select:checked,    
    input[type=submit]:checked,
    input[type=radio]:checked,
    input[type=button]:checked,
    input[type=checkbox]:checked {outline:none;}


    input[type=radio]:after,
    input[type=checkbox]:after {
        content: "\00A0";
        position: relative;
        bottom: 1px;
        left: 3px;
        border: none;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    input[type=radio]:checked:after,
    input[type=checkbox]:checked:after {
        content: "\2714";
        position: relative;
        bottom: 1px;
        left: 3px;
        border: none;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

.dropdown {
    width:59px;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:0 16px;
    color:#144391;
    font-weight:600;    
    background-image: url('../img/Order-Box.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-color:#edf5fc;
    border:none;
}



/*ERROR MESSAGE*/
.error-message {
    color:red;
}


/* SURVEY */

.survey{
    padding: 15px;
}

.survey-message {
    font-weight: bold;
    color: #1C93D1;
    padding-bottom:10px;
}

.survey .question .number{
    width: 15px;
    display: inline-block;
}

.survey .answer{
    padding-left: 15px;
    margin-bottom: 5px;
}

    .survey .answer > * {
        white-space: nowrap;
    }

.ginger-image {
    height: 100%;
    margin: auto;
    display: block;
    padding-top: 70px;
}

/*Ts&Cs*/
.no-formatting,
.no-formatting:hover {
    color:#fff;
    text-decoration:none;
}
.bg-blue {
    background-color:#1978B0;
}

footer {
    
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
      
    }
    .body-content {padding: 0;}
}

@media screen and (max-width:1435px) {
    .header-instructions h1 {
        font-size:30px;
    }
}
@media screen and (max-width:1350px) {
    .header-form {bottom: 40px;}
  
}

@media screen and (max-width:1200px) {
    .header-instructions h1 {font-size:24px;}
    .header-instructions  {top:21em;}
    
    .col-lg-12 img {height:115%;}
    .fotter-top-text {bottom:10px;}
    .btn-header {
        float:none;
        margin-left:10px;
    }
    .offer-top-30 {
        padding-top:0;
    }

}

@media screen and (max-width:992px) {
    .header-instructions  {top:16em;}
    .header-instructions h1 {font-size:18px;}

    .form-width {width:300px;}

    .img-spa {width:65%;}
    .img-pack {float:right; width:40%;}
    .img-pos {position:relative; left:33%; top:70px;}

    .fakeClass { }
 

}

@media screen and (max-width:770px) {
    .img-tv img {width:70%;}
    .header-instructions h1 {font-size:14px;}
    .heading-tiny {display:block;}
}

@media screen and (max-width:740px) {    
    .header-instructions  {top:13em;}
    .header-instructions h1 {font-size:14px;}
    .img-pos {left:20%;}
    .visbile-mobile {display:block;}
}

@media screen and (max-width:650px) {
    .header-instructions  {top:12em;}

    .header-instructions h1 {font-size:14px;}

    .img-pos {top:10px;}
}

@media screen and (max-width:580px) {
    .header-instructions  {top:10em;}
    .header-instructions h1 {font-size:10px;}

    .img-pos {width:30%;}
    .form-width {
        width:100%!important;
    }
}
@media screen and (max-width:552px) {
    .btn-header {
        left:-9px;
    }
}

@media screen and (max-width:480px) {
    .header-instructions {
        top: 8em;
    }

        .header-instructions h1 {
            font-size: 9px;
        }

    .clear-both-mobile {
        clear: both;
        display: block;
        width: 100%;
    }

    .mobile-space > td {
        padding-bottom: 20px !important;
    }
}

@media screen and (max-width:420px) {
    .header-instructions  {top:6em;}
    .header-instructions h1 {font-size:9px;}

    .form-width {width:250px;}
}

.validation-error{
    float:left;
    color:red;
    width:100%;
}

.uploaded-image{
    max-width:185px;
    max-height:143px;
}



.question-9 {
    border: 2px solid #0089C8;
    padding: 5px !important;
    min-height: 110px;
    min-width: 500px;
    max-height: 1000px;
    max-width: 800px;
}

.col-center {
    float: none !important;
    margin: 0 auto !important;
}

.btn-yes {    
    margin:auto;
    display:table;
}

.btn-yes > *{
    width:100%;
    padding-bottom:20px;
}

.text-center {
    text-align:center;
}

.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
    padding:4px!important;
}

.txtBoxWidth input{
    min-width:100%;
}
.mobile-space label,
.mobile-space input{
    width: 90%;
}
.chkBoxWidth {
    width: 30px!important;
}

.table input, .table label {
    border-radius: 5px;
    /*width: 50%;*/
    margin: auto;
    display:block;
    float: none;
}