@charset "UTF-8";
/* CSS Document */

.voucher-shop {max-width:930px;width: 100%;}
.voucher-instructions {margin:0 10px; background:  #e7e7e7; padding:20px;}
img.voucher-preview {margin: 10px; border-radius: 6px;opacity:.4;max-width:100%;height:auto}
img.selected, img.voucher-preview:hover,.voucher-preview:hover, label.design-select > input:checked + img:hover {border: 4px solid #222;opacity:1;box-shadow: 3px 3px 2px #ccc; }
.select-value label {
    font-size: 1.3em;
    font-weight: bold;
    margin-right: 3%;
    padding: 10px 10px 10px 30px;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    margin-bottom: 10px;
}

h3.voucher-section span {display: inline-block; border-radius: 50%; border: 1px solid #ccc; height:1.4em; width: 1.4em; text-align: center;padding-top: .1em;}
.pay-btn {margin-bottom: 10px;}
.points-expiration {
    color: #999;
    font-size: .6em !important; display: block; font-weight: normal;}

.carousel-control {
    padding-top:10%;
    width:5%;
}
.carousel-control.left {
    background-image:none!important;
}

.carousel-control.right {
    background-image:none!important;
}

label.design-select > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
label.design-select > input + img{ /* IMAGE STYLES */
    cursor:pointer;
    border:2px solid transparent;
}
label.design-select > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
    border: 4px solid #222;opacity:1;box-shadow: 3px 3px 2px #777;
}

.points-description {
    font-size: 0.6em;
}

/* #155885575 - AG - make voucher shop more responsive */
.voucher-shop .container-fluid #payForm .voucher-details #templateCarousel .carousel-inner > .item {
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 768px) {
    .voucher-shop .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
    .voucher-shop .container-fluid #payForm .voucher-shop-title {
        text-align: center;
    }
    .voucher-shop .container-fluid #payForm .voucher-shop-description h3 {
        font-size: 1.2em;
    }
    .voucher-shop .container-fluid #payForm .voucher-shop-description #bundleSelect label.radio-inline {
        width: 100%;
    }
    .voucher-shop .container-fluid #payForm .voucher-shop-description #bundleSelect label.radio-inline+.radio-inline {
        margin-left: 0;
    }
}