﻿/*Generic*/
body {
}
.title{font-weight: bold; font-size:16px;}
label.title { display: block; margin-bottom: 0; }
label.title-sub, label.specificamount-sub { font-weight: 400; margin-bottom: 10px; }
.ChooseCardDesignTitleArea .title { margin: 0; }
.row
{
    padding-bottom: 10px;
}
.form-horizontal .control-label{text-align: left; font-weight: normal;}
.form-group .info-popup-link { margin-left: 14px; }
div.form-group label.control-label.text-left{text-align: left; font-weight: normal;}
.error{color: #ff0000;}

.form-control{
     -webkit-box-shadow: none;/*inset 0 1px 1px rgba(0,0,0,.075); */
     box-shadow:  none;/*inset 0 1px 1px rgba(0,0,0,.075); */
     -webkit-transition:  none;/*border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; */
     border-radius: 3px;
}
.esteeRule{margin-top: -2px;margin-bottom: 5px; }
.sub{ color: #575756}
.small { font-size: 12px;}
.smaller { font-size: 11px;}
.tiny { font-size: 9px;}

a.btn{text-decoration: none;}
.btn-default{background-color: #f3f3f3;}
.btn-default{border-color: #dcddde;}

.cbHolder input[type=checkbox]{ vertical-align: middle; margin-top: 0px; }

.field-validation-error{ font-size: 12px; color: #ff0000;}
.input-validation-error{border-color: #ff0000;}

input.rbx{width: 16px; height: 16px; vertical-align: middle;margin-top: 0; }

input.rbx{border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    color: #333; }
label.rbx{ margin-bottom: 0px; margin-left: 10px; font-weight: normal; }



input.cbx{ width: 30px; height: 30px; }

input.cbx {
    border: 1px solid #ccc;
    -webkit-box-shadow: none;/*inset 0 1px 1px rgba(0, 0, 0, .075);*/
    box-shadow: none;/*inset 0 1px 1px rgba(0, 0, 0, .075);*/
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    color: #333;
}

input.cbx:hover, .cbx:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: none;/*inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);*/
    box-shadow: none;/*inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);*/
}

.ui_tpicker_minute_slider{margin: 5px 10px;}
.ui_tpicker_hour_slider{margin: 5px 10px;}

/*Header + Footer*/
.header{ height:278px; margin-bottom: 40px;}
.headerInformation{ text-align: right;}

.pageNumbers{ display: block;}
.pageNumbersMobile{ display: none;}

.pageNumbers div
{
    background-color: #969696;color: #ffffff;
    float: left;
    width: 32%;
    margin-right: 1%;
    padding:8px;
    text-align:center;
}
.pageNumbers div.selected
{
    background-color: #000000;
}

.footer{ color: #ffffff; background-color: #969696; padding-top: 20px; }
.footerBalanceEnq{font-size: 16px; font-weight: bold;}
.footerLinks{ font-size: 12px;}
.smallprint{ font-size: 9px;}


/*Choose Product*/
.productPriceAndDelivery
{
    padding-top: 30px;
}
.chooseProductPaymentButton{padding-top: 250px;}
.chooseEVoucherProductPaymentButton{padding-top: 100px;}
.deliveryChargeLeft{float: left; width: 100%;}
/*.deliveryChargeRight{float:left; clear: right; width: 50%;}*/

.owl-wrapper { touch-action: none; }

.owlNavLeft,
.owlNavRight {
    cursor: pointer;
    height: 150px;
}
.owlNavLeftEmail,
.owlNavRightEmail {
    cursor: pointer;
    height: 230px;
}
@media (max-width: 500px) { .owlNavLeftEmail, .owlNavRightEmail, .owlNavLeft, .owlNavRight { height: 220px !important; } }
@media (max-width: 450px) { .owlNavLeftEmail, .owlNavRightEmail, .owlNavLeft, .owlNavRight { height: 190px !important; } }
@media (max-width: 350px) { .owlNavLeftEmail, .owlNavRightEmail, .owlNavLeft, .owlNavRight { height: 160px !important; } }
@media (max-width: 300px) { .owlNavLeftEmail, .owlNavRightEmail, .owlNavLeft, .owlNavRight { height: 140px !important; } }
@media (max-width: 275px) { .owlNavLeftEmail, .owlNavRightEmail, .owlNavLeft, .owlNavRight { height: 120px !important; } }

.owl-item{text-align: center;}
div.owl-item .card.item{text-align: center; margin: 0 auto; float:none; }
div.owl-item .wallet.item{text-align: center; margin: 0 auto; float:none; }
div.owl-item button.item { display: block; background: transparent; border: none; }
.owl-controls{ width: 100%;}
div.owl-controls div.owl-pagination{ margin: 0 auto; width: 100px; overflow: visible; text-align: center; float: none;  }

.deliveryLeft{float:left; padding-right: 8px;}
.deliveryRight{float:left; cursor: pointer;}

#address-extra-fields{display: none;}
#reset-address{ display: none; }
#enter-address-manually-button, #reset-address-button{text-decoration: underline;}
#enter-address-manually-button:hover, #reset-address-button:hover{text-decoration: none; cursor: pointer;}

#deliveryHolder{display: none;}

#datepicker, #standard-datepicker, #named-datepicker {
    width: 80%;
    clear: none;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

#datepicker:read-only, #standard-datepicker:read-only, #named-datepicker:read-only {
    background-color: unset;
    cursor: pointer;
}

.namedDel{
    padding-top: 4px;
}
/*DatePicker*/
#ui-datepicker-div
{
    background: #f3f3f3;
    -moz-border-radius: 0px/*{cornerRadius}*/;
    -webkit-border-radius: 0px/*{cornerRadius}*/;
    border-radius: 0px;
    border: 1px solid #bfbfbf;
}

#ui-datepicker-div .ui-datepicker-header{
    -moz-border-radius: 0px/*{cornerRadius}*/;
    -webkit-border-radius: 0px/*{cornerRadius}*/;
    border-radius: 0px;
    background: none;
    border: none;
}
#ui-datepicker-div tbody{ background: #f3f3f3;}
#ui-datepicker-div .ui-datepicker-title{background-color: transparent;}
#ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-state-active{ background: #ffffff; color: #454545}
#ui-datepicker-div table th{ background: #d4d4d4; border: 3px solid #f3f3f3;
padding-top: 3px;
padding-bottom: 3px;}
#ui-datepicker-div .ui-state-active{ border: 1px solid #000;}

#ui-datepicker-div.ui-widget-content .ui-state-disabled { opacity: 1; }
#ui-datepicker-div.ui-widget-content .ui-state-disabled .ui-state-default { background: transparent; border-color: transparent; text-decoration: line-through; }

/*Payment*/
div.basketLines thead tr th{border-right: 1px solid #dcddde; border-bottom: none;}
div.basketLines thead tr th:last-child{border-right: none;}
div.basketLines thead tr {border-bottom: 1px solid #dcddde;}

div.basketLines tbody tr td{border-right: 1px solid #dcddde; border-top: none;}
div.basketLines tbody tr td:last-child{border-right: none;}
div.basketLines tbody tr {border-bottom: 1px solid #dcddde;}
div.basketLines tbody tr.noLine {border-bottom: none;}
div.basketLines tbody tr.noLine td {border-bottom: none;}
div.basketLines tbody tr .btn{margin-bottom:10px;}

div.basketLines div.totals{border-bottom: 1px solid #dcddde;}
div.basketLines .totalsDelivery, div.basketLines .totalsTotal{text-align:right;padding-right: 16%;}
div.basketLines{padding-bottom: 40px;}

div.basketLines.hidden-sm.hidden-md.hidden-lg .row{ border-bottom: 1px solid #ccc; margin-bottom: 10px;}
div.basketLines.hidden-sm.hidden-md.hidden-lg .row.last{ border-bottom: 2px solid #ccc;}
div.basketLines.hidden-sm.hidden-md.hidden-lg .row.totals{ border-bottom: 1px solid #ccc; margin-bottom: 0px; padding-bottom: 20px; padding-top: 20px;}
div.basketLines.hidden-sm.hidden-md.hidden-lg .row.totals.final{ border-bottom: none;}
div.basketLines.hidden-sm.hidden-md.hidden-lg .h3{margin: 0px;}
div.basketLines.hidden-sm.hidden-md.hidden-lg .h4{margin: 0px;}

.TnC, .TnC label {font-weight: normal;}

.paymentCompleteButton{ margin-top: 20px;}

#previewPopup{border: 1px solid #dcddde;
    display: none;
    background-color: white;
    position: absolute;
    margin: 0 auto;
    z-index: 101;
    line-height: initial;
    -webkit-box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
    box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#previewPopup td{line-height: initial;}
#previewPopup p{padding: initial; margin: 10px 0; color: #000000;}

#previewPopupClose
{
    position: absolute;
    right: -24px;
    top: -24px;
    width: 49px;
    height: 48px;
    cursor: pointer;
}

#SecurityPopupLink{ cursor: pointer;}

.MessagePopup {
    display: none;
    position:absolute;
    z-index: 101;
    margin: 0 auto;
    width: 400px;
    padding: 10px;
    z-index: 10000001;
    border: 1px solid #ccc;
    background: #ffffff;
    left: 285px;
    top: 50px;
     -webkit-box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
    box-shadow: 10px 10px 10px 1px rgba(0,0,0,0.1);
}

.activation-email-form .RedeemBody {
  padding: 10px;
}

/*Large desktop*/
@media (min-width: 1200px) {
   /*We really don't want the desktop experience to be THAT wide*/
  .container {
    width: 970px;
  }
}

@media (min-width: 768px) and (max-width: 992px)
{
    .MessagePopup{ left:168px; }
}

/*xs (mobile)*/
@media (max-width: 767px)
{
    .pageNumbers{ display: none;}
    .pageNumbersMobile{ display: block;}
    .pageNumbersMobile div{ width: 100%;}
    
    .chooseProductPaymentButton{padding-top: 0px;}
    .chooseEVoucherProductPaymentButton{padding-top: 0px;}
    button.btn.primary{font-size: 18px;}

    .MessagePopup{ left:5%; width: 90%; top: 25%; position: fixed; }
    .MessagePopup #previewPopupClose{ right: 0;}
}

@media (max-width: 400px)
{
    .btn.primary.toolongbutton
    {
        font-size: 18px;
    }
}

#previewPopup_BackgroundOverlay { position: absolute; width: 100%;height: 200%; left: 0; top: 0; z-index: 100; background-color: #000; opacity: .5; filter: alpha(opacity=60); }

.image-checkbox {
    float: left;
    cursor: pointer;
}

.image-checkbox-label {
    margin-left: 15px;
    cursor: pointer;
    font-weight: normal;
        display: block;
    padding-left: 10px;

}

.bannerContainer { padding-bottom: 15px; }
.bannerContainer div.col-xs-12 { padding-left: 0; padding-right: 20px; }

@media print {
    .hidden-on-print { display: none !important; }
    .visible-on-print { display: initial !important; }
}

input[type="checkbox"].cbx {
    display: none;
}

input[type="checkbox"].cbx ~ img {
    pointer-events: none;
}

input[type="checkbox"].cbx ~ .image-checkbox-off {
    display: inline-block;
    cursor: pointer;
}

input[type="checkbox"].cbx ~ .image-checkbox-on {
    display: none;
}

input[type="checkbox"].cbx:checked ~ .image-checkbox-off {
    display: none;
}

input[type="checkbox"].cbx:checked ~ .image-checkbox-on {
    display: inline-block;
    cursor: pointer;
}

.realex-iframe {
    border: medium none;
    height: 800px;
}

#realex-preview {
    padding-top: 15px;
}

.tab-left, .tab-right {
    width: 50%;
    float: left;
}

    .tab-left a, .tab-right a {
        width: 100%;
    }

    .tab-right a {
        margin-right: 0 !important;
    }

/* IE10+ CSS styles go here */  
.form-control::-ms-clear {display: none; width:0; height:0;}
.form-control.valid::-ms-clear{display: none; width:0; height:0;}
.form-control.valid:focus::-ms-clear{display: none; width:0; height:0;}

.language-selection-container .title { display: block; padding: 15px 0 10px 0; }

.col-md-1.checkbox-image-container {
    padding-right: 0;
}

.payment-confirm-form .buttons {
    text-align: center;
    margin: 30px 0 30px 0;
}

    .payment-confirm-form .buttons .btn {
        width: 30%;
        margin: 0 5% 10px 5%;
        max-width: 300px;
    }

@media (max-width: 768px) {
    .payment-confirm-form .buttons .btn {
        width: 85%;
    }
}

.personal-message-container label, .personal-message-container-egift label {
    display: revert;
    margin-bottom: revert;
    max-width: revert;
    font-weight: revert;
}

.skip-to-content a {
    z-index: 100;
    position: absolute;
    top: -100px;
    left: 0px;
    background-color: white;
    border: 1px solid #dcddde;
    padding: 6px;
    margin: 6px;
}

.skip-to-content a:focus {
    top: 0px;
}