.gc__tab-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.btn-regular {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--verdana-regular);
    font-size: 14px;
    border-radius: 3px;
    white-space: nowrap;
    transition: background var(--transition-duration) ease-in-out;
    color: var(--logo-color);
    border: 1px solid var(--ele-bgr-color);
    margin-right: 20px;
}
.btn-regular:hover {
    background-color: var(--ele-bgr-hover-color);
}
.btn-regular--active {
    color: var(--sub-btn-text);
    background-color: var(--sub-btn-bgr);
    border: 0;
}
.btn-regular--active:hover {
    color: var(--sub-btn-text);
    background-color: var(--sub-btn-hover-bgr);
}
.flex {
    display: flex;
}

/**********************************************
* font family
***********************************************/
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('//imgrabo.com/css/fonts/bebasneue/bebasneue-webfont.eot');
    src: url('//imgrabo.com/css/fonts/bebasneue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
    url('//imgrabo.com/css/fonts/bebasneue/bebasneue-webfont.woff') format('woff'),
    url('//imgrabo.com/css/fonts/bebasneue/bebasneue-webfont.ttf') format('truetype'),
    url('//imgrabo.com/css/fonts/bebasneue/bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.page_giftcards {

    /**********************************************
    * transitions
    ***********************************************/
    --transition-duration: 0.2s;

    /**********************************************
    * colors
    ***********************************************/
    --success-color: #01ad46;
    --inactive-color-darker: #B1B1B1;
    --waiting-color-darker: #E4EFF6;
    --text-color: #000000;
    --main-background: #ffffff;
    --site-free-space-color: #FBFBFB;
    --logo-color: #005B98;
    --take-btn-color: #FF7A00;
    --take-btn-hover-color: #ea6d00;
    --ele-bgr-color: #DBF0FF;
    --ele-bgr-hover-color: #97D4FF;
    --sub-text-color: #666666;
    --sub-btn-bgr: #d2ffe2;
    --sub-btn-hover-bgr: #a1f5bf;
    --sub-btn-text: #578871;

    /**********************************************
    * font families
    ***********************************************/
    --bebas-regular: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    --verdana-regular: Verdana, Arial, Helvetica, sans-serif;
}

.gc {
    display: flex;
    background-color: var(--site-free-space-color);
    text-align: left;
    justify-content: center;
}
.gc__content {
    width: 100%;
    padding: 0 15px;
    max-width: 1200px;
    background-color: var(--main-background);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.16);
}
.gc__title {
    margin: 35px auto 20px;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    font-size: 17px;
    color: var(--logo-color);
}

/* Page Header */
.gc__hdr {
    padding-top: 30px;
}
.gc__hdr-content-wrapper {
    font-family: var(--verdana-regular);
    color: var(--logo-color);
}
.gc__hdr-logo {
    max-width: 110px;
}
.gc__hdr-img img {
    max-width: 100%;
}
.gc__hdr-img-mob {
    float: right;
    margin: 10px 0 10px;
}
.mobile .gc__hdr-img-desk,
.desktop .gc__hdr-img-mob {
    display: none;
}
.gc__hdr-title {
    margin: 5px 0 20px;
    font-size: 17px;
    font-weight: normal;
    text-transform: uppercase;
}
.gc__hdr-text {
    line-height: 1.7;
}
.gc__hdr-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.gc__hdr-btn-link {
    display: block;
    padding: 10px 20px;
    margin: 30px 0 5px;
    font-family: var(--verdana-regular);
    font-size: 14px;
    border-radius: 3px;
    white-space: nowrap;
    color: var(--main-background);
    transition: background var(--transition-duration) ease-in-out;
}
.gc__hdr-btn--take {
    margin-right: 20px;
}
.gc__hdr-btn--take .gc__hdr-btn-link {
    background-color: var(--take-btn-color);
}
.gc__hdr-btn--take .gc__hdr-btn-link:hover {
    color: var(--main-background);
    background-color: var(--take-btn-hover-color);
}
.gc__hdr-btn--take .gc__hdr-btn-subtext {
    font-size: 13px;
    color: var(--take-btn-color);
}
.gc__hdr-btn--activate .gc__hdr-btn-link {
    color: var(--sub-btn-text);
    background-color: var(--sub-btn-bgr);
}
.gc__hdr-btn--activate .gc__hdr-btn-link:hover {
    background-color: var(--sub-btn-hover-bgr);
}
.gc__hdr-btn--activate .gc__hdr-btn-subtext {
    font-size: 13px;
    color: var(--sub-btn-text);
}

@media only screen and (min-width: 414px) {
    .gc__title {
        margin: 50px auto 30px;
    }
}

@media only screen and (min-width: 812px) {
    .gc__content {
        padding: 0 24px;
    }
    .gc__hdr-content-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 50%;
    }
}

/* FAQ */
.gc__faq-item {
    margin-bottom: 15px;
}
.gc__faq-item-ttl {
    position: relative;
    display:block;
    background: var(--ele-bgr-color);
    color: var(--logo-color);
    padding: 14px 40px 14px 14px;
    font-size: 14px;
    cursor:pointer;
}
.gc__faq-item-ttl.activated {
    background: var(--ele-bgr-color);
}
.gc__faq-item-ttl::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    /*font-size: 15px;*/
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 6px;
    border-top-width: 6px;
    border-left: 8px solid var(--logo-color);
}
.gc__faq-item.gc__faq-item--open .gc__faq-item-ttl::after {
    transform: rotate(90deg) translateX(-50%);
}
.gc__faq-item-cnt {
    display:none;
    padding: 14px;
    font-size: 13px;
    color: var(--logo-color);
    border: 1px solid var(--ele-bgr-color);
    background-color: var(--main-background);
}
.gc__faq-item-cnt-text {
    margin-bottom: 16px;
}

.gc__faq-item-cnt-text:last-child {
    margin-bottom: 0;
}
.gc_faq-item-cnt b { color:#2f5e37; }
.gc_faq-item-cnt table.prices { border-collapse:collapse; width:100%; margin:0 0 10px; font-size:inherit; }
.gc_faq-item-cnt table.prices th { border:1px solid #a4bda9; padding:4px; text-align:center; font-size:inherit; color:#2f5e37; }
.gc_faq-item-cnt table.prices td { border:1px solid #a4bda9; padding:4px; text-align:center; font-size:inherit; }
.gc_faq-item-cnt table.prices th:first-child { text-align:left; }
.gc_faq-item-cnt table.prices td:first-child { text-align:left; }

@media only screen and (min-width: 812px) {
    .gc__faq {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: -24px;
    }
    .gc__faq-column {
        width: calc(50% - 24px);
        margin-left: 24px;
    }
}

/* Friends section */
.gc__friends {
    box-sizing: border-box;
    overflow: visible;
}
.gc__friend {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid var(--ele-bgr-color);
}
.gc__friend-img img {
    height: 100%;
    max-height: 130px;
}
.gc__friend-info {
    padding: 15px 13px 12px 15px;
}
.gc__friend-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
    font-size: 16px;
    font-weight: normal;
}
.gc__friend-info p {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px 0 20px;
    color: var(--sub-text-color);
}
.gc__friend .btn-regular {
    padding: 7px 15px;

}
.gc__tab {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 20px;
    border-radius: 3px;
    white-space: nowrap;
    font-family: var(--verdana-regular);
    font-size: 14px;
    color: var(--logo-color);
    background-color: var(--main-background);
    border: 1px solid transparent;
    transition: border var(--transition-duration) ease-in-out;
}
.gc__tab.activated {
    background-color: transparent;
}
.gc__tab:hover {
    color: var(--logo-color);
    border: 1px solid var(--logo-color);
}
.gc__tab.activated {
    background-color: transparent;
}
.gc__tab.gc__tab--active {
    color: var(--main-background);
    background-color: var(--logo-color);
}

@media only screen and (min-width: 414px) {

    .gc__title {
        font-size: 20px;
    }
    .gc__hdr {
        display: flex;
        padding-top: 30px;
    }
    .gc__hdr-logo {
        max-width: none;
    }
    .gc__hdr-title {
        margin: 10px 0 20px;
        font-size: 20px;
    }
    .gc__friends {
        display: block;
    }
    .gc__friend-container {
        margin: 20px 0;
    }
}

@media only screen and (min-width: 812px) {
    .gc__friends {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        margin-left: -17px;
    }
    .gc__friend {
        display: flex;
        width: calc(50% - 17px);
        margin: 0 0 20px 15px;
    }
    .gc__hdr-content {
        max-width: 330px;
    }

}

@media only screen and (min-width: 1024px) {
    .gc__friend {
        width: calc(33.3% - 17px);
    }
}

/* My cards tabs */
.gc__tab-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

/* My cards */
.my-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 3px;
    font-family: var(--verdana-regular);
    font-size: 13px;
    box-sizing: border-box;
    background-color: var(--main-background);
}
.my-card:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    min-height: 100%;
    border-radius: 3px 0 0 3px;
}
.my-card--waiting:after {
    background-color: var(--logo-color);
}
.my-card--waiting {
    border: 1px solid var(--logo-color);
}
.my-card--inactive:after {
    background-color: var(--inactive-color-darker);
}
.my-card--inactive {
    border: 1px solid var(--inactive-color-darker);
}
.my-card--success:after {
    background-color: var(--success-color);
}
.my-card--success {
    border: 1px solid var(--success-color);
}
.my-card--sent:after {
    background-color: var(--take-btn-hover-color);
}
.my-card--sent {
    border: 1px solid var(--take-btn-hover-color);
}
.my-card__wrapper {
    width: 100%;
}

.my-card__label {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    border-bottom-left-radius: 3px;
    background-color: var(--main-background);
    border-bottom: 1px solid var(--waiting-color-darker);
    border-left: 1px solid var(--waiting-color-darker);
}
.my-card__amount-container {
    float: right;
    margin: 15px 0 10px 10px;

}
.my-card__title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-card__title span {
    font-size: 15px;
    color: var(--sub-text-color);
}
.my-card__greeting {
    --max-lines: 3;
    --lh: 16px;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    margin-bottom: 15px;
    overflow: hidden;
    /*padding-right: 1rem; !* space for ellipsis *!*/
    color: var(--sub-text-color);
}
.my-card__greeting::before {
    position: absolute;
    content: "";
    /* tempting... but shows when lines == content */
    top: calc(var(--lh) * (var(--max-lines) - 1));

    inset-block-end: 0;
    inset-inline-end: 0;

    bottom: 0;
    right: 0;
    width: 120px;
    font-size: 14px;
    color: var(--text-color);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+21,ffffff+40,ffffff+100&0+1,0.81+22,1+41,1+100 */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.77) 21%, rgba(255,255,255,0.81) 22%, rgba(255,255,255,0.99) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.77) 21%,rgba(255,255,255,0.81) 22%,rgba(255,255,255,0.99) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.77) 21%,rgba(255,255,255,0.81) 22%,rgba(255,255,255,0.99) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}
.my-card__greeting.my-card__greeting--opened {
    max-height: none;
    overflow: visible;
}
.my-card__greeting.my-card__greeting--opened:before {
    content: "";
    display: none;
}
.my-card__amount {
    display: block;
    float: left;
    font-family: var(--bebas-regular);
    font-size: 48px;
    line-height: 44px;
    font-weight: normal;
    color: var(--sub-text-color);
}
.my-card__currency-wrapper {
    font-family: var(--bebas-regular);
    font-size: 20px;
}

.my-card__cents {
    display: block;
    height: 19px;
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: normal;
    font-style: normal;
    color: var(--sub-text-color);
}
.my-card__currency {
    color: var(--inactive-color-darker);
}
.my-card__btn-container {
    display: flex;
}
.my-card__status {
    display: inline;
    color: var(--sub-text-color);
    line-height: 1.5;
}
.my-card__status-title {
    display: inline-block;
    font-weight: normal;
    font-family: var(--verdana-regular);
    font-size: 13px;
    color: var(--text-color);
}
.my-card .btn-regular {
    margin-top: 15px;
    padding: 6px 10px;
    border: 1px solid var(--inactive-color-darker);
    color: var(--sub-text-color);
}
.my-card .btn-regular:hover {
    color: var(--main-background);
    background-color: var(--inactive-color-darker);
}
.my-card .btn-regular.btn-regular--pdf {
    overflow: visible;
    text-overflow: "";
}

.gc__empty-tab {
    display: flex;
    justify-content: center;
    font-family: var(--verdana-regular);
    padding: 20px 0 40px;
    text-align: center;
    font-size: 14px;
    color: var(--logo-color);
}

@media only screen and (min-width: 812px) {
    .my-cards {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-left: -17px;
    }

    .my-card {
        display: flex;
        justify-content: center;
        width: calc(50% - 15px);
        margin: 0 0 20px 15px;
    }
    .gc__empty-tab {
        padding: 50px 0 100px;
        width: 100%;
    }
}

@media only screen and (min-width: 1024px) {
    .my-card {
        width: calc(33.3% - 15px);
    }
}

/*
* Condition regarding IE10 and IE11 fixes
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .btn-regular {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        transition: background 0.2s ease-in-out;
        color: #005B98;
        border: 1px solid #DBF0FF;
    }
    .btn-regular:hover {
        background-color: #97D4FF;
    }
    .btn-regular--active {
        color: #578871;
        background-color: #d2ffe2;
        border: 0;
    }
    .btn-regular--active:hover {
        color: #578871;
        background-color: #a1f5bf;
    }

    .gc {
        background-color: #FBFBFB;
    }
    .gc__content {
        background-color: #ffffff;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.16);
    }
    .gc__title {
        color: #005B98;
    }

    /* Page Header */
    .gc__hdr-content-wrapper {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #005B98;
    }

    .gc__hdr-btn-link {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #ffffff;
        transition: background 0.2s ease-in-out;
    }

    .gc__hdr-btn--take .gc__hdr-btn-link {
        background-color: #FF7A00;
    }
    .gc__hdr-btn--take .gc__hdr-btn-link:hover {
        color: #ffffff;
        background-color: #ea6d00;
    }
    .gc__hdr-btn--take .gc__hdr-btn-subtext {
        color: #FF7A00;
    }
    .gc__hdr-btn--activate .gc__hdr-btn-link {
        color: #578871;
        background-color: #d2ffe2;
        border: 0;
    }
    .gc__hdr-btn--activate .gc__hdr-btn-link:hover {
        background-color: #a1f5bf;
    }
    .gc__hdr-btn--activate .gc__hdr-btn-subtext {
        color: #578871;
    }

    /* FAQ */
    .gc__faq-item-ttl {
        background: #DBF0FF;
        color: #005B98;
    }
    .gc__faq-item-ttl:after {
        border-left: 8px solid #005B98;
    }
    .gc__faq-item-ttl.activated {
        background: #DBF0FF;
    }
    .gc__faq-item-cnt {
        color: #005B98;
        border: 1px solid #DBF0FF;
        background-color: #ffffff;
    }

    /* Friends section */
    .gc__friend {
        border: 1px solid #DBF0FF;
    }
    .gc__friend-name {
        color: #000000;
    }
    .gc__friend-info p {
        color: #666666;
    }
    .gc__tab {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #005B98;
        background-color: #ffffff;
        transition: border 0.2s ease-in-out;
    }
    .gc__tab:hover {
        color: #005B98;
        border: 1px solid #005B98;
    }
    .gc__tab.gc__tab--active {
        color: #ffffff;
        background-color: #005B98;
    }

    /* My cards */
    .my-card {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #ffffff;
    }
    .my-card--waiting:after {
        background-color: #005B98;
    }
    .my-card--waiting {
        border: 1px solid #005B98;
    }
    .my-card--inactive:after {
        background-color: #B1B1B1;
    }
    .my-card--inactive {
        border: 1px solid #B1B1B1;
    }
    .my-card--success:after {
        background-color: #01ad46;
    }
    .my-card--success {
        border: 1px solid #01ad46;
    }
    .my-card--sent:after {
        background-color: #ea6d00;
    }
    .my-card--sent {
        border: 1px solid #ea6d00;
    }
    .my-card__label {
        background-color: #ffffff;
        border-bottom: 1px solid #E4EFF6;
        border-left: 1px solid #E4EFF6;
    }

    .my-card__title span {
        color: #666666;
    }
    .my-card__greeting {
        max-height: calc(16px * 3);
        color: #666666;
    }
    .my-card__greeting::before {
        top: calc(16px * (3 - 1));
        color: #000000;
    }
    .my-card__amount {
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
        color: #666666;
    }
    .my-card__currency-wrapper {
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    }
    .my-card__cents {
        color: #666666;
    }
    .my-card__currency {
        color: #B1B1B1;
    }
    .my-card__status {
        color: #666666;
    }
    .my-card__status-title {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #000000;
    }
    .my-card .btn-regular {
        border: 1px solid #B1B1B1;
        color: #666666;
    }
    .my-card .btn-regular:hover {
        color: #ffffff;
        background-color: #B1B1B1;
    }
    .gc__empty-tab {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #005B98;
    }

}

.page_giftcards .paging {
    background: #fff;
}
.mobile #load_more_giftcards {
    visibility: hidden;
}