/* pass css */

.pass {
    width: 320px;
    height: 510px;
    margin: auto;
}

.pass-front, .pass-back {
    width: 100%;
    height: 100%;
    margin: auto;
}

.pass-front {
}

.pass-strip {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 320px;
    max-width: 320px;
    max-height: 120px;
}

.pass-logo img {
    max-width: 125px;
    max-height: 50px;
}

.pass-back {
    padding: 45px 10px 10px 10px;
}

    .pass-front > div, .pass-back > div {
    }

.storecard > .pass-front, .storecard > .pass-back {
    border-radius: 5px;
}

.coupon {
}

.pass-header {
    height: 65px;
}

    .pass-header img {
        max-height: 50px;
        max-width: 160px;
    }

.pass-header, .pass-footer {
    padding: 4px 10px;
}

.pass-header {
    padding: 7px 10px 7px 10px;
}

.pass-content {
    height: 120px;
    padding: 0;
    /*margin-bottom: 10px;*/
}

    .pass-content .pass-fields {
        padding: 0 10px;
    }

.pass-footer {
    height: 305px;
}

.pass-logo {
    float: left;
}

.pass-logo-text {
    float: left;
}

.pass-fields {
    width: 100%;
}

.pass-content {
    background-repeat: no-repeat;
    background-size: 100%;
}

.pass-header-fields {
    float: right;
    text-align: right;
    width: auto !important;
}

.pass-primary-fields {
    height: 120px;
    z-index: 1;
    position: absolute;
}

    .pass-primary-fields .pass-field {
        height: 100%;
    }

.pass-secondary-fields, .pass-auxiliary-fields {
    height: 40px;
}

    .pass-secondary-fields > .pass-field:last-child,
    .pass-auxiliary-fields > .pass-field:last-child {
        float: right;
        /*text-align: right;*/
    }

    .pass-secondary-fields > .pass-field:first-child,
    .pass-auxiliary-fields > .pass-field:first-child {
        float: left;
        /*text-align: left;*/
    }

.pass-auxiliary-fields {
    margin-top: 15px;
}

.pass-barcode-field {
    width: 100%;
    height: 210px;
}

.pass-barcode {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: auto;
    width: 92%;
}

.pass-barcode-label {
    margin-top: -20px;
    font-size: 16px;
    margin-bottom: 15px;
}

.pass-barcode.qr-code {
    width: 110px;
    height: 110px;
}

.pass-back-fields {
    height: 100%;
    width: 100%;
    background-color: #E6E6E6;
    border-radius: 5px;
    overflow-y: auto;
}

    .pass-back-fields .pass-field {
        width: 100%;
        height: auto;
        color: #5F5F5F;
        background-color: #F7F7F7;
        padding: 5px 10px 0px 10px;
    }

    .pass-back-fields .pass-value {
        padding-bottom: 10px;
        border-bottom: 1px solid #CECECE;
    }

    .pass-back-fields .pass-field:first-child {
        border-radius: 5px 5px 0 0;
    }

.pass-field {
    color: white;
    height: 40px;
    display: inline-block;
    max-width: 340px;
}

.pass-label, .pass-value {
    font-weight: 300;
}

.pass-back .pass-label {
    font-weight: 400;
}

.pass-front .pass-value {
    font-size: 115%;
}

.pass-front .pass-label {
    text-transform: uppercase;
    font-size: 70%;
}

.pass-primary-fields .pass-value {
    font-size: 45px;
    margin-top: 0px;
    margin-bottom: 20px;
    font-weight: 200;
}

.pass-primary-fields .pass-label {
    text-transform: none;
    font-size: 16px;
    margin-top: -20px;
}

.zigzag_bottom {
    background: #dddccf;
}

    .zigzag_bottom:after {
        background: linear-gradient(-45deg, #dddccf 6px, transparent 0), linear-gradient(45deg, #dddccf 6px, transparent 0);
        background-position: left-bottom;
        background-repeat: repeat-x;
        background-size: 12px 12px;
        content: " ";
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 10px;
    }

.zigzag_top {
    background: #dddccf;
}

    .zigzag_top:after {
        background: linear-gradient(-135deg, #dddccf 6px, transparent 0), linear-gradient(135deg, #dddccf 6px, transparent 0);
        background-position: left-bottom;
        background-repeat: repeat-x;
        background-size: 12px 12px;
        content: " ";
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 10px;
    }

.pass-front .ticket_top {
    background-color: rgb(221, 220, 207);
    border-radius: 90%;
    width: 70px;
    margin-top: -20px;
    left: 125px;
    z-index: 5;
    position: absolute;
    height: 35px;
}

.pass-back .ticket_top {
    display: none;
}


@font-face {
    font-family: 'Code128';
    src: url('fonts/code128.woff') format('woff');
    src: url('fonts/code128.ttf') format('truetype');
}

.barcode {
    /* Use the name of the face that is installed, or the one you defined above */
    font-family: 'Code128';
    font-size: 50px;
}


/* Card view css*/

@media screen {
    .print_version {
        display: none;
    }

    .screen_version {
        display: inline;
    }
}

@media print {
    * {
        margin: 0px;
        padding: 0px;
    }

    html:not([lang*=""]) * {
        overflow: visible !important;
    }

    .print_version {
        display: inline;
        overflow: visible;
    }

    .screen_version, .pull-right {
        display: none;
    }

    .pass-front666 {
        float: left;
        width: 48%;
        border: 1px solid #000000;
        border-radius: 10px;
        overflow: visible;
    }

    .pass-back666 {
        float: right;
        width: 48%;
        border: 1px solid #000000;
        border-radius: 10px;
        overflow: visible;
    }

    .barcode_print {
        float: left;
        margin-left: -47.7%;
        margin-top: 8%;
        width: 47.5%;
    }
}

/*.card__back {
            z-index: -1;
        }*/

.text-black {
    color: #545454 !important;
}

.card-navbar a {
    color: #333333;
}