/* Styling for the form controls demo page */
#container {
    max-width: 90%;
    height: 100%;
    background-color: #2CB3ED;
    background-image: url('../images/pattern.svg');
    background-size: 120px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
}

#container h1 {
    color: #353E59;
    margin-bottom: 20px;
}

/* Form styling */
form.wissel-form {
    text-align: center;
    color: #fff;
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
    min-height: 200px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 20px 0;
}

form.wissel-form p a {
    color: #F99D0B;
    font-weight: 600;
}

form.wissel-form p a:hover,
form.wissel-form p a:active,
form.wissel-form p a:focus {
    color: #1B3D5E;
    transition: all 0.2s ease;
}

form.wissel-form > *,
form.wissel-form .screen > * {
    display: block;
    margin-bottom: 15px;
}

/* Style class used for styling blocks in the form */
.block-styling {
    background-color: rgba(255,255,255,0.7);
    padding: 15px;
    color: #353E59;
    border-radius: 15px;
}

/* General input styling - specified further for each component */
button {
    display: inline-block;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-align: center;
    padding: 9px 17px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 15px;
    background-color: #F99D0B;
    color: #fff;
    border: none;
    box-sizing: border-box;
}

button:after {
    background: rgba(0,0,0,0.08);
    content: "";
    height: 200px;
    left: -50px;
    position: absolute;
    top: -75px;
    transform: rotate(25deg);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: -10;
}

button:not(:disabled):hover:after {
    width: 140%;
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

button:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform-style: flat;
    transform: translate3d(-50%,-50%,0);
    background: rgba(255,255,255,0.2);
    border-radius: 100%;
    transition: width .3s ease, height .3s ease;
}

button:active,
button:focus {
    outline: none;
}

button:not(:disabled):active:before {
    width: 100px;
    height: 100px;
}

input[type="text"],
input[type="email"],
select {
    font-size: inherit;
    font-family: inherit;
    color: #353E59;
    background-color: #fff;
    border: 2px solid #F99D0B;
    border-radius: 15px;
    padding: 10px 17px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
input[type="text"]:active,
input[type="email"]:active,
select:active {
    border-color: #36CE4F;
    transition: border-color 0.2s ease;
    outline: none;
}

.gift-card {
    color: #fff;
    width: 200px;
    height: auto;
    background: #bbb;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 500;
    font-size: 1.2rem;
}

/* Component - Form steps */
.form-steps ul {
    counter-reset: step-counter;
}

.form-steps ul li {
    display: inline-block;
    list-style: none;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #fff;
    margin-right: 60px;
    color: #BBBBBB;
    counter-increment: step-counter;
    font-weight: bold;
    line-height: 50px;
    font-size: 1.7rem;
    text-align: center;
}

.form-steps ul li:before {
    content: counter(step-counter);
    display: inline-block;
    margin-left: 5px;
}

.form-steps ul li.completed-step {
    background-color: #36CE4F;
    color: #fff;
}

.form-steps ul li.active-step {
    background-color: #F99D0B;
    color: #fff;
}

.form-steps ul li:after {
    content: "";
    line-height: 0;
    display: inline-block;
    width: 50px;
    height: 4px;
    border-radius: 30px;
    background: #fff;
    vertical-align: middle;
    margin-top: -28px;
    margin-left: 57px;
    float: left;
    font-size: 0;
}

.form-steps ul li:last-child {
    margin-right:0;
}

.form-steps ul li:last-child:after{
    visibility: hidden;
}

/* Component - Form  step title */
.form-step-title h3 {
    font-size: 1.8rem;
    line-height:2.1rem;
}

/* Component - Question (label/value pair) */
.form-question {
    width: 100%;
}

.form-question .label,
.form-question .value {
    width: 100%;
}

.form-question .label {
    margin-bottom: 10px;
}

.form-question .label span {
    font-size: 1.1rem;
}

/* Component - form row */
.form-row {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 10px;
    border: 2px solid #2CB3ED;
    margin-bottom: 10px;
    border-radius: 15px;
    font-size: 1.1rem;
}

.form-row :last-child {
    margin-bottom: 0;
}

.form-row .cell {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.form-row .cell > * {
    flex-direction: column;
    justify-content: center;
    display: flex;
}

.form-row .cell .gift-card {
    font-size: 0.8rem;
    width: 100px;
    height: 60px;
}

/* Component - text input */
.form-control-text input {
    width: 100%;
    text-align: center;
    max-width: 800px;
}

/* Component - currency input (a text input with currency symbol in front */
.form-control-currency input[type="text"] {
    border-radius: 0 15px 15px 0;
    max-width: 100px;
}

.form-control-currency div.currency-symbol {
    display: inline-block;
    border-radius: 15px 0 0 15px;
    background-color: #F99D0B;
    color: #fff;
    width: auto;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-weight: 600;
}

/* Component - info toggle */
a.infotoggle {
    display: inline-block;
    background-color: #fff;
    color: #F99D0B;
    font-weight: 600;
    padding: 0 5px;
    width: 1.4rem;
    text-align: center;
    border-radius: 50px;
    margin-left: 5px;
    cursor: pointer;
}

a.infotoggle:hover,
a.infotoggle.active {
    display: inline-block;
    background-color: #F99D0B;
    color: #fff!important;
    font-weight: 600;
    padding: 0 5px;
    width: 1.4rem;
    text-align: center;
    border-radius: 50px;
    margin-left: 5px;
    cursor: pointer;
}

/* Component - info toggle content */
.info-toggle-content {
    text-align: left;
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    font-size: 1.1rem;
    line-height: 1.4rem;
    color: #353E59;
    min-width: 300px;
    max-width: 400px;
    position: absolute;
    left: 40%;
    display: none;
    -webkit-box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.15);
    z-index: 100;
    font-weight: normal;
}

.info-toggle-content a.close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    padding: 0;
    margin: 0;
    line-height: 35px;
    font-size: 1.6rem;
    transition: opacity 0.2s ease;
}

.info-toggle-content a.close:hover {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Component - info text */
.info-text h4 {
    font-size: 1.3rem;
    line-height: 1.7rem;
}

.info-text p {
    font-size: 1.1rem;
    line-height: 1.3rem;
}

/* Component - card value list (for entering value of cards) */
.card-value-list  {
    font-size: 1.3rem;
}

.card-value-list .form-row .cell.card-value {
    justify-content: flex-end;
}

/* Component - card number list (for entering the number/pincode of cards) */
.card-number-list .form-row  {
    font-size: 1.1rem;
}

.card-number-list .form-row .cell.card-name,
.card-number-list .form-row .cell.card-value {
    flex: 1;
}

.card-number-list .form-row .cell.card-numbers {
    flex: 4;
}

.card-number-list .form-row .cell.card-value span {
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0 15px;
}

.card-number-list .form-row .cell.card-numbers {
    flex-direction: row;
    justify-content: flex-end;
}

.card-number-list .form-row .cell.card-numbers  > * {
    flex-direction: column;
    justify-content: center;
    display: flex;
}

.card-number-list .form-row .cell.card-numbers .form-control-text.pin-number {
    margin-left: 15px;
    max-width: 150px;
}

/* Component - Mail instruction block (block with information about gift cards to be handed in by mail) */
.mail-instruction-block .cell.cards-amount,
 .mail-instruction-block .cell.sum-total {
    font-weight: 600;
    font-size: 1.3rem;
}

.mail-instruction-block .cell.card-name,
.mail-instruction-block .cell.cards-amount {
    flex: 1;
}

.mail-instruction-block .cell.cards-amount span {
    margin: 0 15px;
}

.mail-instruction-block .cell.sum-total {
    flex: 5;
    justify-content: flex-end;
}

.mail-instruction-block .address {
    padding: 10px;
    border: 2px solid #2CB3ED;
    border-radius: 15px;
    text-align: left;
}

.mail-instruction-block .address span {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1.3rem;
    width: 100%;
}

/* Component - Card selection */
.card-selection > p,
.card-selection .carousel,
.card-selection input[type="text"] {
    max-width: 85%;
    margin: 0 auto;
    position: relative;
}

.card-selection > p {
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0 auto 15px auto;
}


.card-selection input[type="text"] {
    font-size: 1.1rem;
    border: none;
    padding: 10px 12px;
    text-align: left;
    margin-bottom: 5px;
}

.card-selection .carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.card-selection .carousel div.item {
    flex-grow: 0;
    padding: 8px;
    box-sizing: border-box;
    width: 25%;
    position: relative;
}

.card-selection .carousel div.item img.gift-card {
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 10;
    width: 100%;
}

.card-selection .carousel div.item img.gift-card:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.card-selection .carousel div.item.selected img.gift-card {
    -webkit-box-shadow: 0px 0px 10px 3px rgba(54,206,79,0.8);
    -moz-box-shadow: 0px 0px 10px 3px rgba(54,206,79,0.8);
    box-shadow: 0px 0px 10px 3px rgba(54,206,79,0.8);
}

.card-selection .carousel div.item.selected:after {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    top: -5px;
    right: -5px;
    background-color: #36CE4F;
    content: "";
    display: block;
    z-index: 20;
    background-image: url('../images/tick-mark.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.card-selection .carousel span.navigation {
    position: absolute;
    top: calc(50% - 20px);
    cursor: pointer;
}

.card-selection .carousel span.navigation:not(.disabled):hover {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.card-selection .carousel span.navigation svg {
    width: 25px;
    height: 40px;
    fill: #2CB3ED;
}

.card-selection .carousel span.navigation.disabled svg {
    fill: #bbb;
}

.card-selection .carousel span.navigation.previous-page {
    left: -40px;
}

.card-selection .carousel span.navigation.next-page {
    right: -40px;
}

.card-selection-list {
    margin-top: 15px;
}

.card-selection-list .cell.card-amount,
.card-selection-list .cell.delete {
    flex: 1;
}

.card-selection-list .cell.card-amount {
    padding-right: 8px;
}

.card-selection-list .cell.info,
.card-selection-list .cell.change-amount {
    flex: 2;
}

.card-selection-list .cell.delete {
    justify-content: flex-end;
}

.card-selection-list .cell.info {
    font-weight: 600;
    text-align: left;
}

.card-selection-list button.plus,
.card-selection-list button.minus {
    padding: 0;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 13px 0 0 0;
    flex-direction: row;
}

.card-selection-list button.plus {
    margin-right: 8px;
}

.card-selection-list .gift-card {
    margin: 0 15px;
}

.card-selection-list button.plus:before,
.card-selection-list button.minus:before,
.card-selection-list button.delete:before,
.card-selection-list button.plus:after,
.card-selection-list button.minus:after,
 .card-selection-list button.delete:after {
    display: none;
}

.card-selection-list button.delete {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 5px 0 0 0;
}

.card-selection-list button.delete svg {
    fill: #fff;
    width: 30px;
    height: 30px;
    margin: 10px;
}

.card-selection-list button.plus,
.card-selection-list button.minus,
.card-selection-list button.delete {
    transition: opacity 0.2s ease;
}

.card-selection-list button.plus:not(:disabled):hover,
.card-selection-list button.minus:not(:disabled):hover,
.card-selection-list button.delete:hover {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}


/* Component - Form buttons */
.form-buttons {
    overflow: auto;
}

.form-buttons button {
    margin-top: 0;
}

.form-buttons button svg {
    fill: #fff;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
}

.form-buttons button.previous {
    float: left;
}

.form-buttons button.next,
.form-buttons button.send {
    float: right;
}

button:disabled {
    background-color: #bbb;
}

/* Component - Thank you screen */
.thank-you-screen img {
    background-color: #fff;
    width: 150px;
    height: 150px;
    padding: 15px;
    border-radius: 150px;
    -webkit-box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.25);
    box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.25);
}

.thank-you-screen h3 {
    font-size: 1.8em;
    line-height:2.1rem;
    margin: 10px 0;
}

.thank-you-screen p {
    font-size: 1.3rem;
    line-height: 1.6rem;
    max-width: 80%;
    margin: 0 auto 15px auto;
}

.thank-you-screen a.button {
    font-size: 1.3rem;
    padding: 8px 22px;
    margin-top: 0;
}

.thank-you-screen a.button:hover:after {
    width: 160%;
    left: -130px;
}

/* Form validation */
.value.invalid input[type="text"],
.value.invalid input[type="email"],
.value.invalid select {
    border-color: #F73939;
    background-color: #FCEDED;
}

.notification.error {
    border: 2px solid #F73939;
    background-color: #FCEDED;
    text-align: left;
    font-size: 1rem;
    border-radius: 15px;
    color: #300505;
    padding: 15px;
}

.notification.error ul {
    padding-left: 30px;
}

.value .field-validation {
    background-color:#F73939;
    text-align: left;
    color: #fff;
    border-radius: 0 0 15px 15px;
    font-size: 0.9rem;
    padding: 5px 8px;
    width: auto;
    display: inline;
}

/* MOBILE STYLING */
@media only screen and (min-width: 801px) {
   .card-selection .carousel div.item {
       width: 25%;
    }
}

@media only screen and (max-width: 980px) {
    .card-selection .carousel div.item {
           width: calc(100% / 3);
    }
}

@media only screen and (max-width: 780px) {
    .card-selection .carousel div.item {
       width: 50%;
    }
}

@media only screen and (max-device-width: 500px) and (orientation: portrait) {
    form.wissel-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 1.2rem;
    }

    form.wissel-form > *, form.wissel-form .screen > * {
        margin-bottom: 10px;
    }

    .form-steps ul li {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .form-steps ul li:after {
        margin-top: -20px;
        margin-left: 47px;
    }

    button {
        margin-top: 8px;
    }

    input[type="text"],
    input[type="email"],
    select {
        padding: 7px 12px;
    }

    .card-selection .carousel, .card-selection input[type="text"]  {
        max-width: 100%;
    }

    .card-selection .carousel div.item .gift-card {
        height: 75px;
    }

    .card-selection .carousel div.item {
        padding: 5px;
    }

    .card-selection input[type="text"] {
        margin-bottom: 10px;
    }

    .form-row {
        flex-wrap: wrap;
    }

    .card-selection-list button.delete {
        width: 40px;
        height: 40px;
    }

    .card-selection-list button.delete svg {
        width: 25px;
        height: 25px;
        margin: 5px 8px;
    }

    .card-selection-list button.plus, .card-selection-list button.minus {
        margin-top: 9px;
    }

    .card-selection-list .cell.info,
    .card-selection-list .cell.change-amount {
        flex: 3;
    }

    a.infotoggle {
        width: 1.1rem;
    }

    .form-row .cell .gift-card {
        width: 80px;
        height: 50px;
        font-size: 0.8rem;
    }

    .card-value-list .form-row .cell.card-value {
        flex: 2;
    }

    .card-number-list .form-row {
        display: inline-block;
    }

    .card-number-list .form-row .cell.card-name,
    .card-number-list .form-row .cell.card-value {
        width: 40%;
        display: inline-block;
        vertical-align: middle;
    }

    .card-number-list .form-row .cell.card-numbers > * {
        margin-top: 10px;
    }

    .info-toggle-content {
        max-width: 90%;
        left: 0;
        margin: 0 5%;
    }

    .card-number-list .form-row .cell.card-value span,
    .mail-instruction-block .cell.cards-amount,
    .mail-instruction-block .cell.sum-total {
        font-size: 1.3rem;
    }

    .thank-you-screen img {
        width: 120px;
        height: 120px;
    }

    .thank-you-screen p {
        max-width: 100%;
        font-size: 1.3rem;
    }

    .thank-you-screen a.button {
        margin-top: 0;
        font-size: 1.5rem;
    }
}