passbook.less

/* Dimensions mixin */
.passbook-size () {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  height: 450px;
  min-height: 450px;
  max-height: 450px;
}

/* Border, inherit dimensions */
.passbook-layout () {
  .passbook-size;
  border-style: none;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========================================================================== */
/* LAYOUT OF THE PASS                                                         */
/* ========================================================================== */
div.passbook-container {
  .passbook-size;
  position: relative;
  perspective: 1000;
  -webkit-perspective: 1000;

  /* Default font */
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif ;
  
  /* Tables default alignments and weights */
  table td,
  table th {
    text-align: center;
    vertical-align: top;
  }

  table td:last-child,
  table th:last-child {
    font-weight: 400;
    text-align: right;
  }

  table td:first-child,
  table th:first-child {
    font-weight: 400;
    text-align: left;
  }


  /* ======================================================================== */
  /* CLASS FOR COLORS (altered by JS)                                         */
  /* ======================================================================== */
  color: rgba(0,0,0,1);

  .passbook-color {
    background-color: rgb(50,91,185);
  }
  
  .passbook-shading {
    opacity: 1.0;
  }
  
  &.passbook-white {
    color: rgba(255,255,255,1);
    .passbook-shading {
      filter: invert(100%);
      -webkit-filter: invert(100%);
    }
  }



  /* ======================================================================== */
  /* FLIPPER (FRONT/BACK)                                                     */
  /* ======================================================================== */
  div.passbook-flipper {
    .passbook-size;
    position: relative;
  }


  /* ======================================================================== */
  /* FRONT LAYOUT                                                             */
  /* ======================================================================== */
  div.passbook-front {
    .passbook-layout;
    z-index: 2;

    /* Positioning */
    position: absolute;
    left: 0px;
    top: 0px;

    /* Decorations (customized below per pass type) */
    &:before,
    &:after{
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAalpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNdZNdb4IwFIbv/RUNu4YCajYb7MUguzMzbkv0skJ13YCStkb892v5mKSpXNFz3ue8pyc9SYvaqqmoIqCtylqidu2Rgh8p0v8mDD3QSdTv2ttvtiDlgoJlsAhCD88AAIkoTmiXvQ24Pq29b6UaBOH1eg2u84CLM4xWqxUMYxjHvlb48lYr0vq1fOqLjHUyKnPBGsV4DcyZHPlFrT1v0PRfb6TY6e5Uy6BrOsh5BU0GRkEIXRht2QPMZB5iRf4PNRdRdncqckhLWtFaSc1FTk4Pzu3WkqY3w3cqMZ2jHZW8vJgRfNVM4SiBrrBNpbxqBJVS5/FyQKYxW7+/18PP8QBMgzbwLpi+KelyY0/TmK0/uAwObgMzerRlLS33GdMD7Tp+CRPoTNhgyksuPhqSU9OYHXLaHB7ZHJw2RY7k5fhD8+ncxzf7Ss5wKoZOdaJfAtrwgp1uGVEUx2G08MPIj+efUYzCCIW6D0tj0amgRHHxyXmJu2YrcwTzYCCn+XGpoLVV/crCYWfxTJPj/uPZH/jYOdNSxPPgAAAC4klEQVR42u2dQU7iYBiGS2LUxBtoQtG9Lh0uYQxbuAKz9hCEWQxk2DGLCVsxHgA34wH0AJoYHI07XGDUmGcW/Dg6Fmn/FtrS90ncGJDypK1/v37fW8eJESAHFIAvQAVoAifAGdAHhuanb353Yl5TMe8pADknSwBbQAn4BpwCf4AXgvNi3ntq/lYJ2FpUaRtmr+kCt8yOW/MZFWBjEcTtAN+BK+bPlfnsnTSKKwK/gAHxMzDbUkyDOBf4YU78SWNots1NorgV4Kv5b5l0+mZbV5IibxM4In0cAZtxy9sHLkgvF8B+XAvgA+CR9PNovktuXvKWgRqLRw1YnrW8NaDN4tIG1ma55/1k8WlHvieac16N7FCL9JxoTrJZ4yAqeXvAUwYFPgF7YeUVgEuyyyVQsJW3ChwjjoFVG4FVuXulGlRePiWFgXkWIPJBBLbk7AOtIMXQoXx51hOLfgR25GoinWnytklGGT6pDIDtzwQ25WgqzUny1oFr+ZnKNbDuJbAsN74pewnsyotvul7XvHfy4pu7d9fIjPpKRDBKbwXW5SMw9bG8JUYdTiIYv4GlcTvGjXwE5gZwHWAXeJaPwDwDuw6jXjphR8UBGvJgTcMBevJgTc9h1Lwt7DhzUOk+DH0HeJAHax4kMAKBOoRDHsLn8mDNuZYxESxjtJAOuZDWpVzISzkVE0IWE1xUzrLhtZylgqodo4KqSvrW1HVTKRwl3da05/1tTd1YD0xXrR3hKKu5yB7v5iK1t/mmOa3B8l6OJnLPZw2WavGdSkdN5vb4azLXmMNEWhq0sSfYoI1GvT5Q1bChPXbDhhp3BcKMu2rgOoKBa438K3TClmhDJ97EnrQzIC/62BMF7yj6ye9hO9voJ4WPKf7uf+KJv1MAoyJAkxMB6lHFSXoIbd5JOigGWUHcSYyCLwOHzD4K/tB8Vvqj4CfI1MMIIl6Qu/x7HEaDUc/2pMdh9Mxrxo/DcIn5cRh/AY9LJb2h3Y5pAAAAAElFTkSuQmCC');
      position: absolute;
      background-repeat: repeat;
      background-size: 8px 8px;
    }

    .passbook-moreinfo {
      &:before { content: '\00f05a'; }
      position: absolute;
      right: 15px;
      top: 410px;
      font-family: FontAwesome;
      text-align: right;
      font-size: 20px;
      display: block;
      cursor: pointer;
      opacity: 0.5;
    }

    .passbook-editsave {
      &:before { content: '\00f044'; }
      position: absolute;
      left: 15px;
      top: 410px;
      font-family: FontAwesome;
      text-align: left;
      font-size: 20px;
      display: block;
      cursor: pointer;
      opacity: 0.5;
    }

    /* -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - */
    /* PASS HEADER                                                            */
    /* -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - */
    table.passbook-header {
      position: relative;
      top: 5px;
      width: 305px;
      height: 50px;
      margin: 0px 5px;

      .passbook-logo {
        position: relative;
        background-color: rgba(0,0,0,0.4);
        width: 50px;
        height: 50px;
        margin: 5px 5px 0px 5px;
        display: none;
        
        &.passbook-has-image { display: table-cell; }
      }

      .passbook-title {
        text-align: left;
        font-size: 19px;
        padding: 12px 3px 0px 8px;
        font-weight: 300;
      }

      .passbook-header-label {
        padding-top: 3px;
        text-align: right;
        font-size: 12px;
        line-height: 12px;
      }

      .passbook-header-value {
        text-align: right;
        font-size: 22px;
        line-height: 22px;
        padding-top: 4px;
      }
    } /* .passbook-header */

    /* -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - */
    /* PASS THUMBNAIL & PRIMARY FIELDS                                        */
    /* -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - */

    /* Thumbnail */
    div.passbook-thumbnail {
      position: relative;
      background-color: rgba(0,0,0,0.4);
      width: 90px;
      height: 90px;
      float: right;
      margin: 20px 15px 0px 5px;
      display: none;
    }

    div.passbook-thumbnail.passbook-has-image {
      display: block;
    }
    
    /* Transport (hidden unless boarding pass) */
    div.passbook-transport {
      display: none;
      z-index: 999;
    }
    

    /* Primary fields */
    table.passbook-primary {
      position: relative;
      top: 12px;
      margin: 0px 15px;
      height: 90px;
      max-width: 290px;
      margin-bottom: 20px;
      clear: left;

      /* Hide second primary field by default */
      .passbook-primary-label-2,
      .passbook-primary-value-2 {
        display: none;
      }

      /* Sizes */
      td {
        font-size: 30px;
        line-height: 35px;
      }
    } /* .passbook-primary */
  } /* .passbook-front */


  /* ======================================================================== */
  /* FRONT FIELD CUSTOMIZATION                                                */
  /* ======================================================================== */

  &.passbook-edit table.passbook-header td.passbook-logo {
    display: table-cell;
  }

  &.passbook-edit div.passbook-front div.passbook-thumbnail {
    display: block;
  }
  
  &.passbook-edit .passbook-editsave:before {
    content: '\00f046' !important;
  }

  /* Boarding passes */
  &.passbook-boarding-pass div.passbook-front {

    /* Hide thumbnail and show transport */
    div.passbook-thumbnail {
      display: none;
    }

    .passbook-transport {
      position: absolute;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAgZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNfZTBjpswEIbveQpEz2BgiapYgNoN6qqHVaPtVkpOlQMOcWtsZBuFvH1tIA1ynXLCM/83/3iMyQY4tF2LFfKGljIJh9xHNT9iqN9NGPjeKFG/c3//uvO2XGBvHaZh5Bcrz/MyUZ/gW/llxvUq989KdRCAy+USXp5CLhoQbzYbECUgSQKtCOSVKTQETH6YitzqlFhWgnSKcOaZNTryXuW+P2umZzJS5HR3YjIcmw4r3gKTAXEYAReGB/IAM5mHWF39hbpe0HFPdQUwxS1mSmoudnJ6cG63AXWTWXGnMtM5fMOS096M4Acjqogz4Arb1Ja3ncBS6nyxnpFlzNbv7/WKOE1nYhm1iW+C6K2iiZj1y5itPzgdDv9x2J254vqbE6T6yhQWuvm5djLTjxWLWuYg4Y4MmO5Loo9n3H+qSzgTNrjllIvvHaqw2aUdctocHtkcnDZ1BWV//IWr5SnebsAzasBSDJxqU6O+3xVHnc/Uqn5LUGI+TUgRa3J/CGp8Qj1VfvHMkagJa3ZIyp8vmGE94xd67c6fkiHsWJOBiba8wL9mY8/u7jJ9H+Arr8npWiKFiySK0yCKgyR5j9cwiuFHPXNLY9FbgZHi4p1zWoxDbs3SewqjiVzmV8smS6ujKar/XMVKk7e/YLH6A0/8iKVnGzG4AAABIElEQVRYw+3YvWrCUBjGcT8GK2jauZv34FqsihQkovjR2xCdvJDOgh+dalR6Iy5eg9jqYByk0EGfQCbJeQMO8YmeF/5j4MdJTk5IJKJHjx49dzOxMCCjqIuWaOFRH6VZsAay0FHRFxM2iT4F7IQJ+4DGPliDaWUlrMWGHflgH5keg6GAnbJhBwJ2FjbsE9PB8IH+L8VmUCeA2qiH1sLKziVsVbjwGimxJhnU6Rs9hwF6QG/n0AoZco/evW59Cf0G1Ar9+SBbqs0UR6kASqCyC1Yhmwzv0Bd3RamROeH96SAbDMhX9KNA2izIvIB0VrLOgCwIG8dmQm7YkUUfZI0B6RweWwVyx4I0hVPHdr/SKP6U5NwzuulRVv/x0qNHz43NCcUhXd/DIOmHAAAAAElFTkSuQmCC');
      width: 42px;
      height: 42px;
      left: 134px;
      top: 70px;
      background-color: transparent;
      opacity: 0.4;
      display: block;
    }

    /* Main primary table */
    .passbook-primary {

      /* Width and height */
      width: 290px;
      height: 70px;

      /* Show second primary fields */
      .passbook-primary-label-2,
      .passbook-primary-value-2 {
        display: table-cell;
      }

      /* Header and data styles */
      th {
        font-size: 11px;
        font-weight: 400px;
      }

      td {
        font-weight: 100;
        font-size: 40px;
        line-height: 42px;
      }
    } /* .passbook-primary */
  } /* .passbook-boarding-pass div.passbook-front */

  /* Boarding pass transport icons */
  &.passbook-boarding-pass {
    &.passbook-transport-air     div.passbook-transport { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAgNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNfZTNjpswFIX3eQpE12BgyCIWoOkEtepi1Gg6lZJV5YBD3Bob2UYhb18bSINcZ1jhe893z/VvNsCh7VqskDe0lEk45D6q+RFD/W/CwPdGifqT+/vXnbflAnvrMA0jv1h5npeJ+gTfyi8zrke5f1aqgwBcLpfw8hRy0YB4s9mAKAFJEmhFIK9MoSFg8tNU5FanxLISpFOEM8+M0ZH3Kvf9WTN9k5Eip7sTk+HYdFjxFpgMiMMIuDA8kAeYyTzE6uof1PWCjnOqK4ApbjFTUnOxk9ML53YbUDeZFXcqM53DNyw57c0S/GREFXEGXGGb2vK2E1hKnS/WM7KM2fr9vV4Rp+lMLKM28V0QPVU0EbN+GbP1B6fD4QOH3Zkrrs+cINU3prDQzc+1k5l+rFjUMhsJd2TAdF8SvT3j/FNdwpmwwS2nXPzoUIXNLO2Q0+bwyObgtKkrKPvjb1wtd/F2A15QA5Zi4FSbGvX9rjjqfKZW9VuCEnM0IUWsyf0hqPEJ9VT5xQtHoias2SEpf+10Gn+l1+78nAxhx5oMTKzlBP63Gjt295bp2wBfeU1O1xIpXCRRnAZRHCTJe7yGUQxjfXItjUVvBUaKi3fOaTEucWuG3lMYTeQyv1o2WVodTVH9bhUrTd7ewGL1Fwf8h9ZX0ysBAAACg0lEQVRYw+3YS6jOeRzH8ZfLcdwWrmPOYpJjyKVYKMNkkEmRLCamho2DLBApUiiMBYvJNKesbHTKYTWhEEVsxk5CCYlxG5OZGhyXcTuPzVf9+/c8x3me+ctv6nzqu/x+/+/nd/l8v7+HLnWpag3AaAxPHXQmHuIPbEW3VEH74jxKaMeSlFd1ZYCW8CcmpAo6FLczsGfREKtdlxrsTxnQEu7gasSmlEDHoy0H24bTWJUSaDf8mgO9j1EpntX5eJuDPZTiOe2HiznQUrhCctpcBvQRjuAA9mBSCqBj8bgMbAnP8Du+L+pjS7EI42rI7Y4TFUCPYXCRq/JLFH6Ar2vI31AB9C1WFwk6Gf9G8csYVmX+NLypAPsIU4sc3a5lih+s0mJGBFCpQlyKtluI9ueKb+yE4ddhENbidQegJbSiEZ9jIPrU6rfLcoWfR89ejOVYh+1oRkvYz2/R40udjCf4C3dxBeeiuzVjTRyhnh1BNmBvFR/8WNEeP76i+mNLmcSXsbKvyrTKouNN7E7zh7Z+bS7xHr6JKWkKZmNBeO567IxdONWB4WfjNS7Edp+MC7snnjNNmNHZC3c4V/S7Kgx/XsbeKsWP6BVnsHutN/6zaHXvi+6qMv/LMrNpNo6jvghr+jYO8vuifarMn53Jz8et8NlC1IKncX4aa8jfUQGyDXOKbKGzMBG9a8itD0spB3o0/qyol4C+6sRFWpYC6O4yYDewLaaqJnzxqSGH4GYO8hXmpvYMaSqzmrtTg6zDmRzkTYz5L4b+MTQttjnfr+/i55RA9+WmnjMxsrXih1QgR+LvDGgLeqT4lt+WgbwSU3tyGojrAfkPpktUCwPyBVbo0v9M7wCFmE0EOE2LvwAAAABJRU5ErkJggg=='); }
    &.passbook-transport-boat    div.passbook-transport { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAgFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNfZTNjpswFIX3eQpE12BgyCIWoOkEtepi1Gg6lZJV5YBD3Bob2UYhb18bSINcZ1jhe893z/VvNsCh7VqskDe0lEk45D6q+RFD/W/CwPdGifqT+/vXnbflAnvrMA0jv1h5npeJ+gTfyi8zrke5f1aqgwBcLpfw8hRy0YB4s9mAKAFJEmhFIK9MoSFg8tNU5FanxLISpFOEM8+M0ZH3Kvf9WTN9k5Eip7sTk+HYdFjxFpgMiMMIuDA8kAeYyTzE6uof1PWCjnOqK4ApbjFTUnOxk9ML53YbUDeZFXcqM53DNyw57c0S/GREFXEGXGGb2vK2E1hKnS/WM7KM2fr9vV4Rp+lMLKM28V0QPVU0EbN+GbP1B6fD4QOH3Zkrrs+cINU3prDQzc+1k5l+rFjUMhsJd2TAdF8SvT3j/FNdwpmwwS2nXPzoUIXNLO2Q0+bwyObgtKkrKPvjb1wtd/F2A15QA5Zi4FSbGvX9rjjqfKZW9VuCEnM0IUWsyf0hqPEJ9VT5xQtHoias2SEpf+mB+kqv3fk5GcKONRmYUMsI/O80NuxuLdOXAb7ympyuJVK4SKI4DaI4SJL3eA2jGG6iDFgai94KjBQX75zTYlzh1gy9p3Aml/nVssnS6miK6merWGny9gQWq79jDYdvtjX8cAAAAuFJREFUWMPtmFuITlEUxz8zrlPD1LhMER7klhmU4oWEKEIa+sjbuDRIROTBwySUN1GkKZ48DJoxUUpkEHn70vBAo9zqwzDJ5zpjjP+qv9od5+xz2WvOvHyrfjXfvqz1n73PPmvtk8kUrWixbQi4DO6Cesu43RxzCQweCKGloBP0gROWcSc55l3aAmVVloD14BNFXAGrArjKMR9BLeeWpiF0FIP2JeQ9GJGG0JHgjYPQl2kJLVcQOrw/BZ4B7eAp6HEQ2k0f4uuUtsgS8MQT8A/xa7P1mW2PwSBNoZXgNZ2vA9MMFoAfoMnTLrSwb76nPUtfr0CFptCZ4DOdT/TpL/B96fe4FHzap9JXF4Wr2WLQS+dHwBaDveAXuMffW4n8/YB9ezxzjtGXPOuLNIVucjg8YWzQFHooYtD7YBt5GHHOfk2hZ0OCPQN1ntQoqXY7+2xzT2sKvREQRAqNBuPkTqBYYTzbKvhcdwb4uK5ZhLR7nMsr5zyYwjGTQSPLuaFgGA+X7MQkjpHTfQH89HmXlmgIrfKkTFndhUY6PQjy7HvOPF4GXrAtzzHlnCNzbxr+5P08RkPoXK5CjqXdP8tyNczVyVOQFC4ffFYu65mf4+7UaAidA3YahcRybqvf8/YFjOYuFALGtIGl9CU+d4HZmgdqFtPkb8sJ/s7ndjpXylaYXAQzNAVW8arRFbEymsf83x1hvNwQjjNGYpNt2QE6YmSZXm7rCp9KyUYHY8WqU6XsWgseJUyJtUZ1FBeJuTqKSHm2Wh1zdx0zUtL5shPNrLAC7ZpCkbEPHFDw02IT2qoQ4CgPiKufZpvQzQoBpFg+p+Bno03oOOPKkZQmfupx8SE31bFhB6rRMcgtcEdhV0JtWUj2CSPnUwPEoYdXn1ArcwwkldZbx3808peUBodA30LyfBiH41ZMX/vxQheEVFzVcb99tg2A0NtJPkmuSXlVpZZdmbSCquFbIA2qM0Ur2v/2F0RI8nsDEGpaAAAAAElFTkSuQmCC'); }
    &.passbook-transport-bus     div.passbook-transport { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAgNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNfZTNjpswFIX3eQpE12AgRGosgtoEtepi1GhmKiWrygGHuDU2so1C3r42kAa5Tlnhe893z/Vv1sO+aRuskNc3lEnYb3xU8ROG+t+Ege8NEvV74x9e9t6OC+ytwjSM/HzheV4mqjN8Lb5MuB5t/ItSLQTger2G12XIRQ3i9XoNogQkSaAVgbwxhfqAyQ9jkXudAstSkFYRzjwzRifeqY3vT5rxG40UOT+cmAyHpsOSN8BkQBxGwIXhnjzBTOYpVpV/obYTdJhTVQJMcYOZkpqLnZxeOLdbj9rRLH9QmekcvmLJaWeW4AcjKo8z4Arb1I43rcBS6ny+mpB5zNYfHvXyOE0nYh61ie+C6KmikZj085itPzodjv9x2F+44vrMCVJ+YwoL3fxUO5no54pZLbORcE96TA8F0dszzD/VJZwJG9xxysVbi0psZmmHnDbHZzZHp01VQtmdfuFyvov3G7BFNZiLgVNtalSPu+Ko85la1e8JSszRhBSxeuP3QYXPqKPKz7cciYqweo+k/Lnt5Fd6ay+fkj5sWZ2BkbR8wL9GQ7/uzjJ9F+ALr8j5ViCF8ySK0yCKgyR5j1cwiuHHZQYsjUXvBEaKi3fOaT4scGOG3jKMRnKeX8ybLKyOxqh+tfKFJu8vYL74A8uqhxVz+K9rAAACBUlEQVRYw+2ZSyhEURjHJyXklbCwpZlQKIyNkiSUZGNtKwuLSRZSRlJmTI2FPEeSBYuJKVnZSGZj4RHJZjaMGCWN8srk8T91pqbTvcPc812P3K9+m5n6z68z537ncU0mo4z6chWDdtAPFoAXbIHtOGyAZeAEnaAGZOghl8l/gAndgndJIuAEjIBCKsk6sEsgp8Y1GACpMpJt4E4IfgTzYBAMJYidj+KpgvASSNMiaQaXCoFHIFnyX+pRGV27lrBhlbB9AtEulewLUJBo2KZK2BVoAVWgWgNWsBhnztYnKur/5CF4BW8aiZfbnKjojhBwBmaBA7gkYf3UzXusKNokIxrgDxd1sbk+Ryk6oeNKVylMBynRMZ2X5AiVqEtH0RJD1BAlEHXqKGqhFF3RUbSVso++8B26gxg3X/HIRL8TQ/TXiYZBiFAozPe2pKI+UASy+THiWVJyne/GskA3eKIQvVE40q5KjqRFyPNSiJ6DXOG7SQlRNn3yhLwpClG2V7TFfF7G5bWKsiNMX0xeqdBLpRv+GpjmJ0WKmxIfzwv+m/bk/yuioz8gGdJyacZ6podPfvHu6QDsSRBUkAxoGc1olYMHIfBQ62VWTNkURGdkj7LiKnQM0iVFexVEPTKBOQoP1ThIkhS18nvRaOY96JDdgeeDBtAIakEK0c7ezDMZFcYbB6NU6gPw+3VYJ4miuQAAAABJRU5ErkJggg=='); }
    &.passbook-transport-train   div.passbook-transport { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAgNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAQAAADiNfZTNjpswFIX3eQpE12BgmEUsQNMJatXFqNE0lZJV5YBD3Bob2UYhb18bSINcZ1jhe893z/VvNsCh7VqskDe0lEk45D6q+RFD/W/CwPdGifqT+/u3rbfhAnvPYRpGfrHyPC8T9Qm+l19mXI9y/6xUBwG4XC7h5SnkogHxer0GUQKSJNCKQF6ZQkPA5KepyK1OiWUlSKcIZ54ZoyPvVe77s2b6JiNFTncnJsOx6bDiLTAZEIcRcGF4IA8wk3mI1dU/qOsFHedUVwBT3GKmpOZiJ6cXzu02oG4yK+5UZjqH71hy2psl+MmIKuIMuMI2teFtJ7CUOl88z8gyZuv393pFnKYzsYzaxHdB9FTRRMz6ZczWH5wOhw8ctmeuuD5zglTfmMJCNz/XTmb6sWJRy2wk3JIB031J9PaM8091CWfCBjeccvGjQxU2s7RDTpvDI5uD06auoOyPv3G13MXbDXhFDViKgVNtatT3u+Ko85la1W8JSszRhBSxJveHoMYn1FPlF68ciZqwZouk/LUTiLCv9NqdX5Ih7FiTgYm1nMD/VmPH7t4yfRvgG6/J6VoihYskitMgioMk2cUpjGJoTomlseiNwEhxseOcFuMSt2boPYXRRC7zq2WTpdXRFNXvVrHS5O0NLFZ/ARYMh+UC2mzrAAACVElEQVRYw+2Y2ytlURzHz4NLJA0eRKZEYRoRJlFEeSPyIt6MjAdPyiVKyj8wklve50HUefCiEOPBPZeUmvIwqampyaXjyP0231W/U6vV2Sx7XZ72rz4Pe+/1+65va6/9W2ttn88LL6SjFKyAFwWWQIlJk60gKHT6ByxK8FfIC5Ke9igEl2FG55tkfmeYXKb3RbfREYfX2CiZ3+aQP6nb6E+Hjtol83sd8ld1G91w6OgK/JLgxiF/U7fRdaGDLTAD/GBWAj+1F3XWTRr9AWJc6kSBCVtGKxS18sCzDaNFilo54MGGUdXa98kz6hk1bLRQUSvbltF6Ra1KW3X0CAyALhf0g0NbRnVi1Og1XR+90xQbyW1ufho1GgDVtGYn0rr/lkG2XA6BOBANmsEdPVszZdQv3C+gEX7N6Dn4KOSt0bMV3UbnSHhBuM82KPdvGA3S+s7voPbp2axuoz0kfAv6QDIV/g3J+TlHhT4FfOd2Tx26jSaBPa7jADfPZLmmvND1Ds1z7ZFFR997xZJ0R1Mo0+TZPhKU05fbxNFCR2eRFqEdyysjHSuRQUfoUTBG8y9cfAbj1G4YpNv8rcNGY557lQfgg0PbRGHJZB9VhC2jrdxXG5DYTRWDC2r/BL7aMJkGjrkROgFTEpxxOb9Bqmmjk5o2I+MmTVa5qJ1O3NK+VHvE0d+RUEesnta5YFn4nROr22ifsCrlutTJF1anbp0mWY085cQHFPUGOa1/dIZSjija2oWEd0G8omYCt3tiTOtYqWqp9oVEGzS9pSZO8xHU+LywGP8B93C0ZJBcREsAAAAASUVORK5CYII='); }
  } /* &.passbook-boarding-pass */

  /* Highlight when hovering in edit mode */
  &.passbook-edit.passbook-boarding-pass .passbook-transport:hover {
    opacity: 1.0;
  }

  /* ------------------------------------------------------------------------ */

  /* Coupons */
  &.passbook-coupon div.passbook-front .passbook-primary {

    /* Swap header/data */
    thead {
      display: table-footer-group;
    }
    
    /* Header and data styles */
    td {
      font-weight: 100;
      font-size: 54px;
      line-height: 54px;
    }

    th {
      font-size: 18px;
      line-height: 18px;
    }
  } /* &.passbook-coupon div.passbook-front .passbook-primary */

  /* ------------------------------------------------------------------------ */

  /* Event */
  &.passbook-event div.passbook-front .passbook-primary {
    th {
      font-size: 12px;
      line-height: 12px;
    }

    td {
      font-size: 18px;
      line-height: 20px;
    }
  } /* &.passbook-event div.passbook-front .passbook-primary */

  /* ------------------------------------------------------------------------ */

  /* Store card */
  &.passbook-store-card div.passbook-front {
    /* No thumbnail */
    div.passbook-thumbnail {
      display: none;
    }

    .passbook-primary {
      /* Swap header/data */
      thead {
        display: table-footer-group;
      }
    
      /* Header and data styles */
      td {
        font-weight: 100;
        font-size: 54px;
        line-height: 54px;
      }

      th {
        font-size: 18px;
        line-height: 18px;
      }
    } /* .passbook-primary */
  } /* &.passbook-store-card div.passbook-front */


  /* ======================================================================== */
  /* FRONT DECORATIONS                                                        */
  /* ======================================================================== */

  /* Boarding passes */
  &.passbook-boarding-pass div.passbook-front {
    &:before {
      position: absolute;
      content: '';
      background-position: -4px 0px;
      width: 4px;
      height: 8px;
      top: 58px;
    }
    &:after {
      position: absolute;
      content: '';
      width: 4px;
      height: 8px;
      top: 58px;
      left: 316px;
    }
  }

  /* Coupons */
  &.passbook-coupon div.passbook-front {
    border-radius: 0px; /* Remove rounded corners */
    padding-top: 5px;

    &:before {
      position: absolute;
      content: '';
      background-position: 0px -4px;
      top: 0px;
      width: 320px;
      height: 4px;
    }
    &:after {
      position: absolute;
      content: '';
      background-repeat: repeat-x;
      width: 320px;
      height: 4px;
      bottom: 0px;
    }
  }

  /* Events */
  &.passbook-event div.passbook-front {
    &:before {
      position: absolute;
      content: '';
      background-position: 0px -65px;
      background-size: 80px 80px;
      width: 80px;
      height: 15px;
      left: 120px;
    }
  }


  /* ======================================================================== */
  /* SECONDARY AND AUXILIARY FIELDS                                           */
  /* ======================================================================== */

  /* Styling */
  table.passbook-extra-fields {
    position: relative;
    clear: both;
    width: 290px;
    margin: 8px 15px;

    /* Hide secondary fields */
    &.passbook-secondary {
      display: none;
    }    

    th {
      font-size: 11px;
      line-height: 11px;
      font-weight: 400;
    }

    td {
      font-size: 16px;
      font-weight: 400;
    }
  }

  /* Secondary fields available in boarding passes */
  &.passbook-boarding-pass table.passbook-secondary {
    display: table;
  }


  /* ======================================================================== */
  /* BARCODES                                                                 */
  /* ======================================================================== */

  .popover {
    color: black;
  }

  .passbook-barcode {
    position: absolute;
    left: 23px;
    top: 330px;
    background: url('data:image/gif;base64,R0lGODdhAgE5AIAAAAAAAP///ywAAAAAAgE5AAAC/4SPqRfNblp4sipJaYVo+59F3EdiYmktgLmO3IWC6hy2sq299H7WbAmb9E6eYCyFG9qOP6Zw0XyyjE7eLFpUZq28qI8U/N5yTDH5eAarvEpqmRsmbsRT+NolxW+7+PTTHwelQwPUtsO2NJdQaEenmJT41xiIyMiXh7knh1QTeLlVR9i3GWrZiPWIKjnZMQppKooJuKjWutp5WBt65QoLC6da+chKK6tVa2YYi3aHpLnsmhy52/wMrJeKfUssnDl8bGzltB1Jdu082G1d/W0X3NtO/Ao/Bo4LjcKLzpm7T6lNTVA9dwDpBZzUbVYsc8rclNJVRdkzRPrOHeynUJW8f//hfhVjCEnfRIhvQm7ieMnioHMZtW38aI/USpjlGhYbeWPcPZz3PPW7uFBmx3jc6CmU5jBbvpvRMLJbRZFpzhjy3g3ltzGhUJRPQVGV2rOZyHRNbTFixsqqI3IIjW6lGRAtWpBAw9a0ZVfu17QFr9blonXaTIF596p1Oq9kRZtmSVbtu/Yl3piC2cIdrNcbVq6V1002KfDs4JRvE/8V57YyS8aZj4oFN/c16KT+impWN/pUal8uu+aeXZonYo2yaXsmrRr279WJXZvGjKy4VOKfFz8nFzci39sGlwPeHf362M00aYO0K81zdsW6ufv1jvqqc4642X/2ePe8bK/u8SP/F62ZZOlBNpxSfuB3WGhkkXefgUL5V+BUAQrYnHIMRmZhbA0OpF9++znYWXjMAdjhY/IF11t1PzkmEXw6WWjedxdGyF+Jtg0oYYentdaiZY0tJd50LhIVX0sTChgYiSeVt2KOPaoEJHXzPWWikTZuh2ONpbkxXoJKhuhkcj8+BGRb7mGIJHhhIkgkgPxpCSacvA2k4YgsepiVmnKKuKSC+7wJ4jj1kYkThEGJKeVLSYaX6Jh9kTmlimKiGSOYVaJ4pGSL0plipRomaJ1zjRppqHVfHtdelu2Miumcke7EaKdC9gcffYESaaaqWHmJK1i+EtanpwRK2mWtl63ZK0En/06aoaz4cPkhg6fG6uOrNN46o7K6QtrqkLu26ayVWzJWaa6YXmluhcxuyKOf4+mY7KCr7oXutbXheam6bNJ6L7TuBgswsNcVSu1ptt6LqraU7XsgiP76S7CP8n5bZsB2IpvtxWsBxauECa8HclkHd5ywqXeWLOO2v5Gs1MfQSetwtID+mazJGBsc4cYrD+tmvC+HHI7NM4Oa6rkW37gwn+wqrTLMHi+oM6fVkmtvfRTqO6zQTCddsaOZcv2pt/lOm3HKYPvM73+P/twy1M1KzVy6ZON86MTvPtkkoc6qp/SeHI6rMKLhIo3133dxi4/eX+MLOF1Zzzr2yTWbXTjf/btSve7MD0NO5dvFTi3w3MbW3R3CW8eZmk+Mk35m3nfKLXnZRZ5tuuEN1x7q0axbi3rQRQu+eOTv1e5ySVFJivKGvL8I3OzA1xu43e0dDyt2o5MNJXp4Y2n06rAPTzecqq9npt/ZY474937TbXPU5Yu8veqfYHt+89ULv/7o7Xsu3cDzPg3Aza1rfIMbIOVEBzq1ge9lI/vf0NoGFQei7WCfwx+22Bct9/XPKorj4N4kmC3EWS55DRzeAQoAADs=');
    background-repeat: no-repeat;
    border: 8px solid white;
    border-radius: 5px;
    opacity: 0.5;
    width: 274px;
    height: 73px;
    text-align: center;
    color: black;
    display: none;
    
    &:after {
      position: relative;
      top: 18px;
      content: 'No barcode';
      background: white;
      border: 4px solid white;
      border-radius: 4px;
      padding: 5px;
    }

    &.passbook-barcode-pdf417 {
      &:after { content: none}
      background: white;
      width: 274px;
      height: 73px;
      left: 23px;
      top: 330px;
      opacity: 1;
      display: block;
    }

    &.passbook-barcode-qrcode {
      &:after { content: none}
      background: white;
      width: 139px;
      height: 139px;
      left: 90px;
      top: 290px;
      opacity: 1;
      display: block;
    }
    
  }
  
  &.passbook-edit .passbook-barcode {
    display: block;
  }


  /* ======================================================================== */
  /* BACK LAYOUT                                                              */
  /* ======================================================================== */
  div.passbook-back {
    .passbook-layout; 

    /* Positioning */
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    
    /* Pad the inner data */
    padding: 10px 5px 5px 5px;

    /* "Done" button (for flipping) */
    div.passbook-done {

      &:before {
        content: '\00f0e2';
        font-family: FontAwesome;
      }

      &:after {
        content: '\0000a0Done'
      }

      text-align: right;
      margin: 0px 10px 10px 0px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      opacity: 0.7;
    }

    /* Back fields */
    div.passbook-back-fields {
      background-color: rgb(255,255,255);
      padding: 0px 10px;
      margin-top: 10px;
      border-radius: 4px;
      height: 403px;
      overflow: scroll;
     
      table {
        border-collapse: collapse;
        border-style: none;
        width: 100%;

        th {
          border-top: 1px solid rgb(204,204,204);
          padding: 10px 0px 0px 0px;
          color: rgb(170,170,170);
          font-size: 12px;
        }

        td {
          border-bottom: 1px solid rgb(204,204,204);
          padding: 0px 0px 10px 0px;
          color: rgb(170,170,170);
          font-size: 14px;
          font-weight: 200;
        }

        tr:first-child,
        tr:last-child {
          th,
          td {
            border: none;
          }
        }
      }
    }
  }

  /* ======================================================================== */
  /* CONTENT EDITING                                                          */
  /* ======================================================================== */

  [contenteditable] {
    /* Style when hovering/editing */
    &:hover,
    &:focus {
      color: rgb(0,0,0) !important;
      outline: none;
    }

    /* Light ellipsis when empty */
    &:empty:after {
      content: '\002026';
      opacity: 0.4;
    }

    /* Highlight when hovering */
    &:hover:empty:after {
      opacity: 1.0 !important;
    }

    /* Remove auto-content when editing */
    &:focus:empty:after {
      content: none !important;
    }
  }
  
  /* Default content (on empty) per pass type */
  table.passbook-header [contenteditable].passbook-title:empty:after { content: 'Toy Town'; }
  table.passbook-primary {
    [contenteditable].passbook-primary-label-1:empty:after { content: 'Member'; }
    [contenteditable].passbook-primary-value-1:empty:after { content: 'Johnny Appleseed'; }
  }

  &.passbook-boarding-pass {
    table.passbook-header [contenteditable].passbook-title:empty:after { content: 'Skyport Airways'; }
    table.passbook-primary {
      [contenteditable].passbook-primary-label-1:empty:after { content: 'SAN FRANCISCO'; }
      [contenteditable].passbook-primary-value-1:empty:after { content: 'SFO'; }
      [contenteditable].passbook-primary-label-2:empty:after { content: 'NEW YORK'; }
      [contenteditable].passbook-primary-value-2:empty:after { content: 'JFK'; }
    }
  }

  &.passbook-coupon {
    table.passbook-header [contenteditable].passbook-title:empty:after { content: 'Paw Planet'; }
    table.passbook-primary {
      [contenteditable].passbook-primary-label-1:empty:after { content: 'Any premium dog food'; }
      [contenteditable].passbook-primary-value-1:empty:after { content: '20% off'; }
    }
  }

  &.passbook-event {
    table.passbook-header [contenteditable].passbook-title:empty:after { content: 'Lollapalooza'; }
    table.passbook-primary {
      [contenteditable].passbook-primary-label-1:empty:after { content: 'EVENT'; }
      [contenteditable].passbook-primary-value-1:empty:after { content: 'The Beat Goes On'; }
    }
  }

  &.passbook-store-card {
    table.passbook-header [contenteditable].passbook-title:empty:after { content: 'Organic Produce'; }
    table.passbook-primary {
      [contenteditable].passbook-primary-label-1:empty:after { content: 'remaining balance'; }
      [contenteditable].passbook-primary-value-1:empty:after { content: '$21.75'; }
    }
  }

  /* Different color for back */
  .passbook-back [contenteditable] {
    &:hover,
    &:focus {
      color: rgb(102,102,102) !important;
    }
  }

  /* White font on white editing */
  &.passbook-white .passbook-front [contenteditable] {
    &:hover,
    &:focus {
      color: rgb(255,255,255) !important;
    }
  }


  /* ======================================================================== */
  /* EDITING TEMPLATES                                                        */
  /* ======================================================================== */

  div.passbook-picker {
    .passbook-layout;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px !important; 
    z-index: 1000;
    display: none;

    div.passbook-picker-contents {
      position: absolute;
      left: 50px;
      top: 100px;
      width: 220px;
      border: 1px solid rgba(0,0,0,0.2);
      background: rgba(255,255,255,1);
      border-radius: 6px;
      opacity: 1;
      padding: 10px;
      text-align: center;
    
      & input.passbook-slider { width: 200px; }

      & .slider-r .slider-handle { z-index: 999999 !important; background: rgba(192,0,0,1); }
      & .slider-g .slider-handle { z-index: 999999 !important; background: rgba(0,192,0,1); }
      & .slider-b .slider-handle { z-index: 999999 !important; background: rgba(0,0,192,1); }
      & .slider-k .slider-handle { z-index: 999999 !important; background: rgba(128,128,128,1); }
      & .slider-r .slider-selection { background: rgba(255,0,0,0.5); }
      & .slider-g .slider-selection { background: rgba(0,255,0,0.5); }
      & .slider-b .slider-selection { background: rgba(0,0,255,0.5); }
      & .slider-k .slider-selection { background: rgba(128,128,128,0.5); }
    
      button {
        width: 40px;
        &[name='generic'] {
          color: #fff;
          background-color: rgb(66, 139, 202);
        }
      }
    }
  }
  
  &.passbook-boarding-pass div.passbook-picker button {
    &[name='generic']       { color: #333 !important; background-color: transparent !important; }
    &[name='boarding-pass'] { color: #fff; background-color: rgb(66, 139, 202); }
  }

  &.passbook-coupon div.passbook-picker button {
    &[name='generic']       { color: #333 !important; background-color: transparent !important; }
    &[name='coupon']        { color: #fff; background-color: rgb(66, 139, 202); }
  }

  &.passbook-event div.passbook-picker button {
    &[name='generic']       { color: #333 !important; background-color: transparent !important; }
    &[name='event']         { color: #fff; background-color: rgb(66, 139, 202); }
  }

  &.passbook-store-card div.passbook-picker button {
    &[name='generic']       { color: #333 !important; background-color: transparent !important; }
    &[name='store-card']    { color: #fff; background-color: rgb(66, 139, 202); }
  }

  div.passbook-clear {
    &:before {
      content: '\00f00d';
      position: relative; 
      top: -3px;
    }

    font-size: 13px;
    font-family: FontAwesome;
    position: absolute;
    width: 13px;
    height: 13px;
    background: white;
    background: rgba(255,255,255,1);
    border-width: 1px;
    border-style: solid;
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.2);
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: none;
  }

  .passbook-logo div.passbook-clear {
    right: -5px;
    bottom: -5px;
  }

  .passbook-thumbnail div.passbook-clear {
    left: -5px;
    top: -5px;
  }
  
  &.passbook-edit .passbook-has-image div.passbook-clear {
    display: block;
  }

  &.passbook-edit .passbook-logo {
    display: table-cell;
  }

  div.passbook-add {
    &:before {
      content: '\00f060';
      position: relative; 
      top: -1px;
      left: 1px;
    }

    font-size: 13px;
    font-family: FontAwesome;
    position: absolute;
    width: 16px;
    height: 17px;
    background: white;
    background: rgba(255,255,255,1);
    border-width: 1px;
    border-style: solid;
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.2);
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: none;
  }

  .passbook-front div.passbook-add {
    position: absolute;
    left: 275px;
    top: 10px;
  }

  .passbook-back div.passbook-add {
    &:before {
      content: '\00f062';
    }
    position: absolute;
    left: 290px;
    top: 418px;
  }

  &.passbook-edit div.passbook-add {
    display: block !important;
    z-index: 100;
  }
  
  &.passbook-edit .passbook-extra-fields {
    width: 265px;
  }


  /* ======================================================================== */
  /* FLIPPING THE PASS                                                        */
  /* ======================================================================== */
  .passbook-flipper {
    position: relative;
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
  }

  &.passbook-flipped .passbook-flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
}