html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    --primary-color: #e60000;
    --primary-color-hover: #990000;

    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.333;
    font-family: "VodafoneRegular";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box
}

@font-face {
    font-family: "VodafoneRegular";
    font-style: normal;
    font-weight: 400;
    src: url(/gifting_template/assets/fonts/vodafone-regular.eot);
    src: url(/gifting_template/assets/fonts/vodafone-regular.eot?#ie-fix) format("embedded-opentype"), url(/gifting_template/assets/fonts/vodafone-regular.woff) format("woff");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, 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+2212, U+2215
}

@font-face {
    font-family: "VodafoneRegularBold";
    font-style: normal;
    font-weight: 400;
    src: url(/gifting_template/assets/fonts/vodafone-bold.eot);
    src: url(/gifting_template/assets/fonts/vodafone-bold.eot?#ie-fix) format("embedded-opentype"), url(/gifting_template/assets/fonts/vodafone-bold.woff) format("woff");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, 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+2212, U+2215
}


.body--fixed {
    position: fixed;
    width: 100%
}

.button {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    border-radius: 6px;
    padding: 8px 37px;
    text-align: center;
}

.button--primary {
    color: #FFF;
    background-color: var(--primary-color);
}

.button--primary:hover {
    background-color: var(--primary-color-hover);
}

.button--secondary {
    color: #FFF;
    background-color: #666
}

.button--secondary:hover {
    background-color: #333
}

.button--tertiary {
    background-color: #FFF;
    border-color: #999;
    color: #333;
}

.button--tertiary:hover {
    background-color: #F4F4F4;
    border-color: #333;
    color: #333
}

.button--full-width {
    display: block;
    width: 100%;
    text-align: center
}

.button--disabled,
.button--disabled:hover,
.button--disabled:focus {
    background-color: #CCC;
    border-color: #CCC;
    color: #FFF;
    cursor: default
}

@media only screen and (max-width: 639px) {
    .button {
        padding: 8px;
        font-size: 16px;
    }
}

.terms-of-use {
    text-align: left;
}

.terms-of-use ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.terms-of-use ul li {
    position: relative;
    padding: 10px 15px 0;
}

.terms-of-use ul li::before {
    position: absolute;
    content: " ";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    left: 0;
    top: 18px;
}

.terms-of-use ol {
    padding: 0 0 0 15px;
}

.terms-of-use ol li {
    list-style: decimal;
}

.terms-of-use ol li::marker {
    padding-right: 5px;
}

.terms-of-use>span:first-child {
    font-size: 18px;
    font-family: "VodafoneRegularBold";
    margin-bottom: 16px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

ul li {
    position: relative;
    padding: 10px 15px 0;
}

ul li::before {
    position: absolute;
    content: " ";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    left: 0;
    top: 18px;
}

.gifting {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: scroll;
}

.gifting .header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 156px;
    min-height: 156px;
    max-height: 156px;
    background: gray;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.gifting .content {
    background-color: #fff;
    padding: 0 16px 32px 16px;
    margin-top: 32px;
}

.gifting .content .title {
    display: block;
    font-size: 14px;
}

.gifting .footer {
    position: fixed;
    display: flex;
    flex-direction: column-reverse;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 32px 16px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
    z-index: 1;
}

.gifting .footer .button-wrapper {
    display: flex;
}

.gifting .footer .button-wrapper.sb {
    justify-content: space-between;
}

.gifting .footer .button-wrapper.sb .button:first-child {
    margin-right: 16px;
}

.campaign {}

.campaign.less {
    max-height: 130px;
    overflow: hidden;
}

.campaign .name {
    font-family: "VodafoneRegularBold";
    font-size: 20px;
    letter-spacing: normal;
    color: #333;
    margin: 8px 0;
}

.campaign .end-date {
    font-size: 14px;
    color: #666;
}

.campaign-code {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 6px;
    border: solid 1px #666;
    font-size: 18px;
    color: #666666;
    overflow: auto;
    min-width: 270px;
}

.campaign-qr-code {
    display: flex;
    max-width: 180px;
    margin: 0 auto 16px;
}

.campaign-qr-code-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--primary-color);
}

.campaign-tray-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: unset;
    flex-direction: row;
}

.campaign-tray-code-wrapper .campaign-code {
    margin-bottom: 0;
    margin-right: 16px;
}

.less-more {
    font-size: 16px;
    line-height: 22px;
    color: var(--primary-color);
    margin: 16px 0;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.less-more::before {
    content: '';
    display: block;
    position: relative;
    background: url('/gifting_template/assets/icons/chevron-down.svg') no-repeat;
    width: 18px;
    height: 10px;
    background-position: center;
    background-size: 100% 100%;
    right: 0;
    order: 2;
    margin-left: 12px;
}

.campaign+.less-more::before {
    transform: rotate(-180deg);
}

.campaign.less+.less-more::before {
    transform: rotate(0);
}

.tray {
    background-color: rgba(0, 0, 0, .7);
    bottom: 125%;
    color: #FFF;
    left: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    overflow-x: hidden;
    position: fixed;
    right: 0;
    top: -125%;
    z-index: 9999;
    overflow-y: auto;
    -webkit-transition: unset;
    -o-transition: unset;
    -moz-transition: unset;
    transition: unset;
}

.tray.tray--display {
    bottom: 0;
    top: 0;
}

.tray .tray--content {
    display: inline-block;
    height: auto;
    transition-delay: .15s;
    transition: top .35s, bottom .35s;
    background-color: #fff;
    color: #333;
    position: absolute;
    -webkit-box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 16%);
    -moz-box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .16);
    box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 16%);
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    padding: 24px 16px 16px;
    width: 100%;
    max-width: unset;
    min-width: unset;
}

.tray.tray--display .tray--content {
    top: auto;
    bottom: 0;
    left: 0 !important;
    max-height: 80%;
    overflow: auto;
}

.tray .tray--content .tray--content__header {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0s linear .35s, opacity .3s;
    -o-transition: visibility 0s linear .35s, opacity .3s;
    -moz-transition: visibility 0s linear .35s, opacity .3s;
    transition: visibility 0s linear .35s, opacity .3s;
    position: fixed;
    left: 0;
    background-color: #fff;
    padding: 16px;
    z-index: 2;
    margin-top: -25px;
    margin-bottom: 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    min-height: 53px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.tray .tray--content .tray--content__wrapper {
    padding: 32px 0;
    z-index: -1;
}

.tray .tray--content .tray--content__header img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Gifting */

.gifting--animation {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    background: linear-gradient(25deg, #fff, #f4f4f4 100%);
    z-index: 9;
}

.gifting--animation__header {
    display: flex;
    height: 56px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.gifting--animation__header h6 {
    font-size: 18px;
    line-height: 24px;
    color: #333;
    margin: 0;
    font-weight: 400;
    display: block;
}

.gifting--animation__header a {
    background: url('/gifting_template/assets/icons/close.svg') no-repeat;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 17px;
    cursor: pointer;
}

.gifting--animation__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: calc(100vh - 56px);
}

.gifting--animation__content h4 {
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    display: block;
    text-align: center;
    padding: 0 40px;
    margin: 0;
}

.gifting--animation__content p {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    margin: 16px 0 0;
}

.gifting--animation__content .animation {
    position: relative;
}

.gifting--animation__content .animation a {
    position: absolute;
    left: 0;
    right: 09;
    text-align: center;
    display: block;
    right: 0;
    top: 108px;
    color: #007c92;
    font-size: 16px;
    line-height: 22px;
    text-decoration: none;
}

.start,
#lottie {
    width: 380px;
    height: 380px;
    display: block;
    position: relative;
}

.start .bypass-to-lottie{
    position: absolute;
    width: 40%;
    max-width: 153px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Expired */
.expired {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 16px;
}

.expired .images {
    width: 156px;
    height: 156px;
    display: block;
}

.expired .images img {
    max-width: 100%;
}

.expired h4 {
    font-size: 20px;
    line-height: 28px;
    font-family: 'VodafoneRegularBold';
    display: block;
    color: #333;
    margin: 36px 0 16px 0;
}

.expired p {
    font-size: 16px;
    line-height: 22px;
    color: #333;
    display: block;
    font-family: 'VodafoneRegular';
    text-align: center;
    margin: 0;
}

.expired .button {
    width: 100%;
    color: #fff;
    background-color: var(--primary-color);
    font-size: 18px;
    font-family: 'VodafoneRegular';
    text-align: center;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    text-decoration: none;
    margin: 36px 0 0;
}

.app-banner {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    left: 0;
    top: -100%;
    background: #262626;
    padding: 8px 16px;
    color: #fff;
    z-index: 10;
}

.app-banner.visible {
    top: 0;
    animation-name: fadeInTop;
    animation-duration: 1s;
}

.app-banner .app-banner--detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
}

.app-banner .app-banner--detail svg:first-child {
    margin-right: 16px;
    /* min-width: 20px; */
}

.app-banner .app-banner--detail svg+svg {
    margin-right: 8px;
    min-width: 52px;

}

.app-banner .app-banner--detail span {
    word-break: break-word;
}

.app-banner a.button {
    text-decoration: unset;
    padding-left: 32px;
    padding-right: 32px;
}

@media only screen and (max-width: 375px) {
    .app-banner .app-banner--detail svg:first-child {
        margin-right: 5px;
        min-width: 15px;
    }

    .app-banner a.button {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
        display: none;
    }

    to {
        opacity: 1;
        display: flex;
    }
}