/*------------------------------ globals ----------------------------- */

  html{
    -webkit-font-smoothing: antialiased;
  }
  
  ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, 
  fieldset, input {
      margin: 0;
      padding: 0;
      font-family: 'modern';
  }

  ol{
    list-style-position: inside;
  }
  
  h2{
      font-size: 34px;
      font-family: 'modern';
  }
  
  *{
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  select{
      border: none;
      background-color: #fff;
      font-weight: bold;
      color: #2e3a62;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      font-size: 20px;
      cursor: pointer;
      border-radius: 2px;
      outline: none;
      font-family: 'modern';
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 12px;
      padding-right: 12px;
  }
  
  .width-30-percent{
      min-width:30%;
      max-width:30%;
      width:30%;
  }
  
  .width-40-percent{
      min-width:40%;
      max-width:40%;
      width:40%;
  }
  
  .width-50-percent{
      min-width:50%;
      max-width:50%;
      width:50%;
  }
  
  .width-60-percent{
      min-width:60%;
      max-width:60%;
      width:60%;
  }
  
  .width-70-percent{
      min-width:70%;
      max-width:70%;
      width:70%;
  }
  
  .width-60{
      width: 60px;
      min-width: 60px;
      max-width: 60px;
  }
  
  .width-90{
      width: 90px;
      min-width: 90px;
      max-width: 90px;
  }
  
  .width-100{
      width: 100px;
      min-width: 100px;
      max-width: 100px;
  }
  
  .width-120{
      width: 120px;
      min-width: 120px;
      max-width: 120px;
  }
  
  .width-150{
      width: 150px;
      min-width: 150px;
      max-width: 150px;
  }
  
  .width-175{
      width: 175px;
      min-width: 175px;
      max-width: 175px;
  }
  
  .width-200{
      width: 200px;
      min-width: 200px;
      max-width: 200px;
  }
  
  .burgee-halo{
      margin-left: auto;
      margin-right: auto;
      height: 60px;
      width: 60px;
      margin-top: 20px;
      margin-bottom: -65px;
      position: relative;
      border: 5px solid #fff;
      border-radius: 100%;
      background-color: #fff;
      background-size: 90%;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  .mce-notification.mce-notification-error{
      display: none !important;
  }
  
  .selectWrap select{
      padding-right: 32px;
      z-index: 100;
      position: relative;
      background-color: rgba(255,255,255,0);
  }
  
  .selectWrap select:hover{
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
  }
  
  .selectWrap{
      cursor: pointer;
  }
  
  .selectWrap:hover .selectArrow{
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
  }
  
  .selectWrap:hover{
      -webkit-transform: translateY(-1px);
      -moz-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
      -o-transform: translateY(-1px);
      transform: translateY(-1px);
  }
  
  .selectArrow {
     position: absolute;
      right: 8px;
      top: 8px;
      width: 18px;
      height: 18px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-size: 15px;
      background-repeat: no-repeat;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
  }
  
  select.bigger{
      font-size: 22px;
      padding-top: 12px;
      padding-bottom: 12px;
  }
  
  ul{
         text-align: left;
      padding-left: 30px;
  }
  
  sup{
      font-family: 'modern';
      font-size: 11px;
      font-weight: bold;
      padding-left: 6px;
      padding-right: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
      border-radius: 2px;
      white-space: nowrap;
  }
  
  sup.active{
      color: #fff;
      background-color: #f96b4b;
  }
  
  /*------------------------------ fonts ---------------------------- */
  
  @font-face {
      font-family: 'ourSerif';
      src: url('../fonts/BookmanOldStyle.eot'), url('../fonts/BookmanOldStyle.ttf') format('truetype'), url('../fonts/BookmanOldStyle.svg') format('svg'), url('../fonts/BookmanOldStyle.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'modern';
      src: url('../fonts/ProximaNovaA-Light.eot'), url('../fonts/ProximaNovaA-Light.ttf') format('truetype'), url('../fonts/ProximaNovaA-Light.svg') format('svg'), url('../fonts/ProximaNovaA-Light.woff') format('woff');
      font-style: normal;
      font-weight: normal;
  }
  
  @font-face {
      font-family: 'modern';
      src: url('../fonts/ProximaNovaA-Regular.eot'), url('../fonts/ProximaNovaA-Regular.ttf') format('truetype'), url('../fonts/ProximaNovaA-Regular.svg') format('svg'), url('../fonts/ProximaNovaA-Regular.woff') format('woff');
      font-style: normal;
      font-weight: 700;
  }
  
  .capitalize{
      text-transform: capitalize;
  }
  
  .blockLetters{
      font-weight: 400;
      text-transform: uppercase;
      font-size: 15px;
      line-height: 24px;
      font-family: 'Roboto';
      color: #292e4a;
  }
  
  .blockLetters.moreLineHeight{
      line-height: 41px;
  }
  
  .smallBlockLetters {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      text-transform: uppercase;
      font-family: 'Roboto';
      color: #292e4a;
  }
  
  #overlay_universal-edit .section-header{
      border-bottom: 1px solid #b7c1d0;
      display: inline-block;
  }
  
  .mediumBlockLetters{
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'Roboto';
      color: #292e4a;
  }
  
  .uppercase{
      text-transform: uppercase;
  }
  
  .successText{
      font-size: 18px;
      line-height: 28px;
  }
  
  .fine-print{
      font-size: 10px;
      line-height: 18px;
      color: #647282;
  }
  
  .explain-large{
      font-size: 26px;
      line-height: 32px;
      font-weight: bold;
      color: #647282;
  }
  
  .ourSerif{
      font-family: 'ourSerif', 'serif';
      font-weight: normal;
  }
  
  .modern{
    font-family: 'modern', 'sans-serif';
    -webkit-font-smoothing: antialiased;
  }
  
  .interject{
      line-height: 54px;
  }
  
  .sectionHeader{
      /*
         border-bottom: 2px solid #758b98;
         margin-bottom: 20px;
         padding-bottom: 20px;
         */
      padding-bottom: 10px;
      display: inline-block;
      text-transform: uppercase;
      font-size: 30px;
      color: #273665;
      letter-spacing: .125em;
      line-height: 40px;
  }
  
  .highlighted{
      background-color: #f1f5f9;
      padding-left: 8px;
      margin-right: 4px;
      margin-left: 4px;
      padding-right: 8px;
      padding-top: 2px;
      padding-bottom: 2px;
      font-weight: bold;
      color: #5377de;
      border-radius: 2px;
  }
  
  .highlighted.white{
      background-color: #fff;
  }
  
  .highlighted.dark{
      background-color: #3f548e;
      color: #fff;
  }
  
  .darkBlueCopy{
      color: #2a375f;
  }
  
  .fontTwenty{
      font-size: 20px;
  }
  
  .leftText, .textLeft{
      text-align: left;
  }
  
  .rightText{
      text-align: right;
  }
  
  .accordionBody p, .noObjectsMSG, .table-view p.noObjectsMSG{
      font-size: 18px;
      line-height: 26px;
      font-weight: bold;
      color: #626f7d;
  }

  .noObjectsMSG, .table-view p.noObjectsMSG{
    color: #778798;
    font-family: 'roboto';
    font-weight: 400;
  }

  .noObjectsMSG a{
    font-weight: 400;
    letter-spacing: 0px;
  }
  
  .subtext{
      font-size: 20px;
      line-height: 28px;
      font-weight: bold;
      color: #525e6b;
  }
  
  .noObjectsMSG{
      max-width: 600px;
  }
  
  .noObjectsMSG.withMargin{
      margin-top: 40px;
      margin-bottom: 40px;
      margin-left: 20px;
      margin-right: 20px;
  }
  
  .noObjectsMSG.withPadding, .subtext.withPadding{
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .accordionBody {
      color: #4a5867;
  }
  
  .subtext .dark{
      color: #333;
      font-family: 'montserrat';
      font-size: 18px;
  }
  
  .subtext.smaller, .cardBodyText{
      font-size: 18px;
      line-height: 26px;
      color: #4a5867;
      font-weight: bold;
  }
  
  .subtext.evenSmaller{
      color: #798a98;
      font-size: 16px;
  }
  
  .note p{
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 15px;
      color: #4a5867;
      font-family: 'Montserrat';
  }
  
  .greenFont, .statusText.green, .tableTapCell.green, .tableNonTapCell.green, .tableNonTapCell.greenFont, .pageStatus.greenFont, .cart-body .price.green, .product-explain.green{
      color: #05ab05 !important;
  }

  .price .greenFont, .price.greenFont, .price.green, .bulkDiscountInsert, .product-explain.green, .memberDiscountInsert{
    font-weight: 500 !important;
    font-family: 'roboto' !important;
    font-size: 14px !important;
    text-transform: uppercase;
  }
  
  .lightGreen{
      color: #46addd;
  }
  
  .lavenderFont{
      /*
      color: #7c8cb9;
      */
      color: #9da5b9;
  }
  
  .clubPurple{
      color: #4c58a7;
      font-weight: bold;
  }

  .paddingWhenActive.active{
      padding-top: 139px !important;
  }
  
  /* -------------------- tables ----------------------------- */
  
  th, .mock-table-header-item{
       text-align: left;
      padding-left: 30px;
      padding-right: 30px;
      line-height: 30px;
      text-transform: uppercase;
      font-size: 13px;
      padding-top: 6px;
      color: #575d6f;
      font-weight: 500;
      white-space: nowrap;
      font-family: 'roboto';
  }
  
  th a, .mock-table-header-item a{
      font-weight: 500 !important;
      letter-spacing: 0px !important;
      color: #5377de !important;
  }
  
  th.sortable:hover, .mock-table-header-item.sortable:hover{
      color: #141927;
  }
  
  th.sortable, .mock-table-header-item.sortable{
      position: relative;
      cursor: pointer;
  }
  
  th.narrower{
      max-width: 150px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  td, .mock-td{
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 8px;
      padding-bottom: 8px;
      vertical-align: top;
  }
  
  td.lessPadding, .mock-td.lessPadding{
      padding-left: 10px;
      padding-right: 10px;
  }

  td.extraPaddingTop{
    padding-top: 25px;
  }

  td.extraPaddingBottom{
    padding-bottom: 25px;
  }
  
  .campClassTableRow td{
      white-space: nowrap;
  }
  
  table{
      border-collapse: collapse;
  }
  
  .tableHeaderRow{
      background-color: #f1f5fa;
      border-bottom: 1px solid #e2e8e8;
  }
  
  .mock-table-header-row{
      padding-left: 30px;
      padding-right: 30px;
      background-color: #f1f5fa;
      border-top: 1px solid #e2e8e8;
  }
  
  .tableRow{
      text-align: left;
      border-bottom: 1px solid #e8edf1;
      font-size: 15px;
      line-height: 22px;
  }
  
  .tableRow.clubMemberRow.reciprocal, .tableRow.callout{
      border-left: 10px solid #cacedc;
  }

  td.vertical-merge{
    vertical-align: middle;
    border-right: 1px solid #e8edf1;
    background-color: #fff;
    border-bottom: 1px solid #e8edf1;
  }

  td.vertical-merge.darker{
    background-color: #f9fbfd;
  }

  td.sum{
    border-top: 1px solid #646b7c;
  }

  td.sum p, td.sum p.bold{
    font-size: 16px;
  }

  td.accounting, th.accounting{
    /*
    padding-right: 0px;
    */
    text-align: right;
  }

  .accounting-header{
    color: #5063b1;
    text-transform: uppercase;
    font-size: 14px !important;
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .tableRow p.bold, tr p.bold{
    font-family: 'roboto';
    font-weight: 500;
    font-size: 15px;
  }

  .tableRow td.vertical-merge p{
    font-family: 'roboto';
    font-weight: 500;
    font-size: 14px;
    white-space: initial;
  }
  
  .campClassTableCell.incompatible{
      background-color: #eff2f5;
      border-top: none;
      border-right: none;
      border-left: none;
      border-bottom: 1px solid #eff2f5;
  }
  
  .tableTapCell{
      border: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 4px;
      padding-bottom: 4px;
      font-weight: bold;
      /* color: #262d61; */
      cursor: pointer;
      color: #3d4752;
  }
  
  tr p, .table-view.tighter .table-view-row p{
      border: none;
      white-space: nowrap;
      /*
      color: #262d61;
      overflow: hidden;
      text-overflow: ellipsis;
      */
      padding-top: 4px;
      padding-bottom: 4px;
      font-weight: bold;
      color: #3d4752;
      font-size: 16px;
  }

   tr p a, .table-view.tighter .table-view-row p a{
      font-size: 15px;
      color: #2d59d6;
      font-family: 'roboto';
      font-weight: 300;
      letter-spacing: 0px;
  }
  
  .contentBody{
      background-color: #f1f5f9;
      margin-left: -30px;
      margin-right: -30px;
      margin-bottom: -25px;
      margin-top: 10px;
      cursor: default;
      padding-top: 8px;
      padding-bottom: 15px;
      padding-right: 0px;
      padding-left: 0px;
      cursor: initial;
  }
  
  .content-body-inner{
      padding-top: 10px;
      padding-bottom: 25px;
      padding-left: 5px;
      padding-right: 5px;
      background: #fff;
      margin-top: 0px;
      margin-bottom: 10px;
      border-bottom: 1px solid #e8edf1;
  }
  
  td.first-cell{
      width: 10px;
      padding-right: 0px;
  }
  
  .table-view-row p{
      text-align: left !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
  }
  
  .table-view-row p.centeredText{
      text-align: center !important;
  }

  .tag-table-data{
      display: flex;
      width: 200px;
      flex-wrap: wrap;
  }
  
  /*-- dropdown arrows ----*/
  .tableRow .standardBackButton{
      width: 18px;
      min-width: 18px;
      opacity: 0.5;
      max-width: 18px;
      height: 18px;
      background-position: center;
      background-size: 14px;
      transform: rotate(-180deg);
      margin-top: 5px;
      margin-left: 0px;
      padding: 0px;
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      -transform: rotate(-180deg);
      -webkit-transition: all 0.15s ease-in-out;
      -moz-transition: all 0.15s ease-in-out;
      -ms-transition: all 0.15s ease-in-out;
      -o-transition: all 0.15s ease-in-out;
  }
  
  .tableRow.active .standardBackButton{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -transform: rotate(-90deg);
  }
  
  .tableTapCell.sessionsInsert_entryList{
      max-width: 250px;
  }
  
  .sessionsInsert_entryList p{
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  .tableNonTapCell{
      border: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 4px;
      padding-bottom: 4px;
      font-weight: bold;
      color: #333;
  }
  
  .tableTapCell.warning, .warningFont, .standardTapCell.warning, .tapCellCompanion.warning, .warning, .statusText.warning, .primaryButton.white.warning, .cardFooterButton.white.warning, tr .tableRowDropdownOption.warning p{
      color: #c34e4e !important;
  }
  
  .tableTapCell.incomplete, .tableNonTapCell.incomplete, .subtext.incomplete, p.incomplete, .table-row.incomplete p, tr.incomplete p, p.incomplete, span.incomplete, .inline-value.incomplete{
      color: #9ca4b7 !important;
  }
  
  .inline-value.incomplete.missingField{
      color: #c34e4e !important;
  }
  
  .inputWrap.inputWrapFull.show-invalid{
      border: 1px solid #c34e4e !important;
  }
  
  .inputWrap.inputWrapFull.show-invalid .inputLabel{
      color: #a04a4a !important;
  }
  
  /*
  
  .tableTapCell:hover{
      color: #555c9a;
  }
  
  .tableTapCell.incomplete:hover, .tableNonTapCell.incomplete:hover{
      color: #6f7584;
  }
  
  .tableTapCell.warning:hover, .standardTapCell.warning:hover, .warning:hover{
      color: #e27070;
  }
  
  .tableTapCell.green:hover{
      color: #119e11;
  }
  
  */
  
  #campEntryListTableInsert{
      min-width: 100%;
  }
  
  .tableCellSubtext{
      font-family: 'Montserrat';
      line-height: 18px;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 11px;
  }
  
  /*-------------------- override styles for email editor ---------------------- */
  
  .mce-statusbar.mce-container.mce-panel.mce-stack-layout-item.mce-last{
      display: none !important;
  }
  
  .mce-tinymce.mce-container.mce-panel, .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item{
      border: none !important;
  }

  .mce-edit-area.mce-container.mce-panel iframe{
    min-height: 55vh !important;
  }
  
  .mce-modal-block{
      background: #000 !important;
  }
  
  .mce-notification-error *, .mce-notification-error .mce-progress .mce-text{
      display: none !important;
  }

  .email-content-container {
      display: flex;
      border-bottom: 1px solid #e8edf1;
  }

  .sms-content-container {
    display: flex;
    border-bottom: 1px solid #e8edf1;
  }

  .sms_header_field {
    display: flex;
    padding-left: 20px;
    font-size: 16px;
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    align-items: center;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    color: #273665;
    cursor: pointer;
  }
  
  .email_header_field {
      display: flex;
      padding-left: 20px;
      font-size: 16px;
      line-height: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      font-weight: bold;
      align-items: center;
      width: 100px;
      min-width: 100px;
      max-width: 100px;
      color: #273665;
      cursor: pointer;
  }

  .emailContentHeader {
      display: flex;
      font-size: 16px;
      line-height: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      cursor: pointer;
      font-weight: bold;
      width: 100%;
  }

  .smsContentHeader {
    display: flex;
    font-size: 16px;
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

  .recipientContentHeader {
    overflow: hidden;
    height: 28px;
    cursor: inherit;
  }

  .recipientContentHeader_sms {
    overflow: hidden;
    height: 28px;
    cursor: inherit;
  }

  .recipientBubble{
      /* cursor: pointer; */
  }

  .unicodeX{
      cursor: pointer;
  }

  .recipientContentHeader.expanded{
    overflow: hidden;
    height: 100%;
  }

  .recipientContentHeader_sms.expanded{
    overflow: hidden;
    height: 100%;
  }

  .recipientOverflowContainer{
    width: 100%;
    overflow: hidden;
    height: 100%;
    padding: 0px;
  }

  .recipientOverflowContainer_sms{
    width: 100%;
    overflow: hidden;
    height: 100%;
    padding: 0px;
  }

  .emailOverflowCount {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100px !important;
    border: 1px solid black;
    padding: 3px;
    align-items: center;
    flex-flow: wrap;
    cursor: pointer;
    margin-right: 40px;
  }

  .recipientBubble_sms.tap-circle{
      margin-right: 3px;
      margin-top: 5px;
  }

  .recipientBubble.tap-circle{
      margin-right: 3px;
      margin-top: 5px;
  }

  .smsOverflowCount {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100px !important;
    border: 1px solid black;
    padding: 3px;
    align-items: center;
    flex-flow: wrap;
    cursor: pointer;
    margin-right: 40px;
  }

  /* -------------------- inputs ----------------------------- */
  
  input:focus::-webkit-input-placeholder, .incompatible.editableTableCell input::-webkit-input-placeholder { color:transparent; }
  input:focus:-moz-placeholder, .incompatible.editableTableCell input:-moz-placeholder { color:transparent; } /* FF 4-18 */
  input:focus::-moz-placeholder, .incompatible.editableTableCell input::-moz-placeholder { color:transparent; } /* FF 19+ */
  input:focus:-ms-input-placeholder, .incompatible.editableTableCell input:-ms-input-placeholder { color:transparent; } /* IE 10+ */
  
  input:-webkit-autofill, textarea:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 100px white inset !important;
  }
  
  input::-webkit-input-placeholder {
     color: #9ca4b7;
     font-size: 16px;
     font-weight: 300;
     font-family: 'modern';
  }

  input.contact-me-input::-webkit-input-placeholder, input.bigger-placeholder::-webkit-input-placeholder {
     font-size: 20px !important;
  }

  input.contact-me-input::-moz-placeholder, input.bigger-placeholder::-webkit-input-placeholder {
     font-size: 20px !important;
  }

  input.contact-me-input:-ms-input-placeholder, input.bigger-placeholder::-webkit-input-placeholder {
     font-size: 20px !important;
  }

  input.medium-placeholder::-webkit-input-placeholder {
     font-size: 18px !important;
  }

  input.medium-placeholder::-moz-placeholder {
     font-size: 18px !important;
  }

  input.medium-placeholder:-ms-input-placeholder {
     font-size: 18px !important;
  }

  input.medium-placeholder {
     font-size: 18px !important;
  }
  
  .editableTableCell input::-webkit-input-placeholder {
      font-size: 16px;
  }
  
  .editableTableCell input{
      font-size: 16px;
      padding-top: 0px;
      padding-bottom: 0px;
      position: absolute;
      left: 0px;
      width: 97%;
      bottom: 0px;
      top: 0px;
      font-weight: bold;
      background-color: rgba(255,255,255,0);
      color: #2a375e;
      padding-left: 10px;
  }
  
  .editableTableCell{
      border-left: 1px solid #e8edf2;
      position: relative;
      overflow: hidden;
      cursor: text;
      min-width: 100px;
  }
  
  input::-moz-placeholder {  /* Firefox 19+ */
     color: #9ca4b7;
     font-size: 16px;
     font-weight: 300;
     font-family: 'modern';
  }
  
  input:-ms-input-placeholder {  
     color: #9ca4b7;
     font-size: 16px;
     font-weight: 300;
     font-family: 'modern';
  }
  
  @-webkit-keyframes shake {
      0% {-webkit-transform: translateX(10px);
      -moz-transform: translateX(10px);
      -ms-transform: translateX(10px);
      -o-transform: translateX(10px);
      transform: translateX(10px);}
      20% {-webkit-transform: translateX(-12px);
      -moz-transform: translateX(-12px);
      -ms-transform: translateX(-12px);
      -o-transform: translateX(-12px);
      transform: translateX(-12px);}
      40% {-webkit-transform: translateX(15px);
      -moz-transform: translateX(15px);
      -ms-transform: translateX(15px);
      -o-transform: translateX(15px);
      transform: translateX(15px);}
      60% {-webkit-transform: translateX(-8px);
      -moz-transform: translateX(-8px);
      -ms-transform: translateX(-8px);
      -o-transform: translateX(-8px);
      transform: translateX(-8px);}
      80% {-webkit-transform: translateX(3px);
      -moz-transform: translateX(3px);
      -ms-transform: translateX(3px);
      -o-transform: translateX(3px);
      transform: translateX(3px);}
      100% {-webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px);}
  }
  
  p a{
      overflow-wrap: break-word;
  }
  
  textarea{
      border: none;
      padding: 15px;
      border-radius: 2px;
      font-size: 16px;
      line-height: 24px;
      font-family: 'modern';
      outline: none;
      resize: none;
  }
  
  .checkboxText{
      display: inline-block;
    padding-left: 8px;
    line-height: 25px;
    color: #52606e;
    font-family: 'roboto';
    font-size: 15px;
    font-weight: 200;
  }

  .checkboxText a{
    font-weight: normal !important;
  }
  
  .standardCheckbox{
      margin-top: 5px;
  }
  
  .textareaWrap{
      border-radius: 2px;
      padding-top: 12px;
      padding-bottom: 12px;
      min-width: 100px;
      position: relative;
      background-color: #fff;
      height: 100px;
  }
  
  .shake{
      -webkit-animation: shake 0.5s linear;
  }
  
  .standardCardBody .inputWrap, .standardCardBody .textareaWrap{
      border: 1px solid #e2e8e8;
  }
  
  .inputWrap{
      border-radius: 2px;
      padding-top: 12px;
      padding-bottom: 12px;
      height: 35px;
      min-width: 100px;
      position: relative;
      background-color: #fff;
  }
  
  .inputWrap.onWhite{
      border: 1px solid #bdcad6;
  }
  
  /*--------- searchbar inputs ----- */
  
  .inputWrap.searchBar{
      height: 28px;
      padding-top: 4px;
      padding-bottom: 4px;
      min-width: 240px;
  }

  .inputWrap.searchBar_web::after{
      content: none !important;
  }

  .inputWrap.searchBar::after {
      content: "";
    position: absolute;
    left: 30px;
    top: 28px;
    width: 17px;
    height: 17px;
    min-width: 17px;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/search-bar-icon-b.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px;
  }

  .help-center-icon{
    /*
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/help-center-icon.png);
    */
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/help-center-icon-on-white.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    width: 35px;
    height: 35px;
    max-width: 35px;
    min-width: 35px;
    max-height: 35px;
    min-height: 35px;
  }

  .contentZoneHeader .inputWrap.searchBar::after{
    top: 18px;
  }
  
  .inputWrap.searchBar input {
      font-size: 16px;
      top: 0px;
      left: 25px;
      padding-left: 30px;
      bottom: 0px;
      right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
      font-weight: bold;
      color: #626f7d;
  }

  .inputWrap.searchBar input::-webkit-input-placeholder {
    font-size: 16px;
    font-weight: bold;
    color: #7c8590;
  }
  
  /*-- and taller version for easy tapping on kiosks like pos --*/
  
  .inputWrap.searchBar.bigger{
      height:44px;
  }
  
  .inputWrap.searchBar.bigger input, .inputWrap.searchBar.bigger input::-webkit-input-placeholder {
      font-size: 20px;
  }
  
  /*--------- end searchbar inputs ----- */
  
  .inputWrap.secondary{
      height: 28px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 75px;
  }
  
  .inputCurrencySymbol.secondary{
      line-height: 40px;
      font-weight: bold;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 20px;
  }
  
  .inputWrap.missingField{
      -webkit-animation: shake 0.5s linear;
  }
  
  .inputWrap.checkoutInputWrap{
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
  }
  
  .inputWrap select{
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      padding-left: 15px;
      width: 95%;
      font-size: 22px;
      font-weight: bold;
      /* font-weight: 100; */
      padding-top: 0px;
      padding-bottom: 0px;
      color: #2a3135;
      background-color: rgba(0,0,0,0.0);
      box-shadow: none !important;
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
  }
  
  .inputWrap select:hover{
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
  }
  
  .inputWrap select{
      z-index: 5;
  }
  
  .inputWrap input, .textareaWrap textarea{
      position: absolute;
      top: 0px;
      height: 100%;
      left: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      bottom: 0px;
      padding-left: 15px;
      width: 90%;
      font-size: 22px;
      /* font-weight: 100; */
      font-weight: bold;
      color: #2a3135;
      background-color: rgba(0,0,0,0.0);
  }
  
  .inputWrap.secondary input{
      padding-top: 0px;
      padding-bottom: 0px;
      top: 0px;
      font-size: 20px;
      padding-left: 10px;
      width: 85%;
  }
  
  .successfulFileUploadWrap{
      position: absolute;
      background-color: #fff;
      top: 0px;
      bottom: 0px;
      left: 0px;
      padding-top: 17px;
      font-size: 22px;
      line-height: 28px;
      opacity: 0;
  }
  
  .inputWrapFull .successfulFileUploadWrap{
      opacity: 1;
  }
  
  .textareaWrap textarea{
      font-size: 18px !important;
    line-height: 26px !important;
    z-index: 1;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
  }
  
  input{
    outline: none;
    padding: 5px;
    border: none;
    z-index: 2;
  }
  
  .inputLabel{
          top: 16px;
      color: #8493a0;
      font-size: 16px;
      text-transform: uppercase;
      left: 10px;
      background-color: #fff;
      position: absolute;
      letter-spacing: 1px;
      padding-left: 5px;
      padding-right: 8px;
      padding-top: 2px;
      padding-bottom: 2px;
      font-weight: bold;
      height: 20px;
      line-height: 20px;
      z-index: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
  }
  
  .inputWrapFull .inputLabel, .textareaWrapFull .inputLabel{
      top: -10px;
      font-size: 11px;
      padding-left: 8px;
      z-index: 10;
  }
  
  .inputLabel.fa{
      background-color: #fafafa;
  }

  .recipient_email_search_input {
      border: 1px solid #b0b7bf;
      width: 300px;
      font-size: 16px;
      padding-top: 8px;
      padding-bottom: 8px;
      margin-left: 30px;
  }

  .recipient_email_search_input::placeholder {
      font-size: 16px;
  }

  .recipient-search-hint {
      margin-left: 30px;
      font-size: 14px;
      color:#636970;
      margin-bottom: 25px;
  }

  .recipient_email_search_btn {
      padding-left: 16px;
      padding-right: 16px;
      padding-top: 12px;
      padding-bottom: 10px;
  }
  
  /*------------------------ easy auto-complete --------------------- */
  
  .easy-autocomplete{
    width: 100% !important;
  }
  
  .easy-autocomplete-container{
        text-align: left;
      position: absolute;
      top: 60px;
      left: -1px;
      border-radius: 3px;
      width: 100%;
      box-shadow: 0px 1px 4px #afacac;
      -moz-box-shadow: 0px 1px 4px #afacac;
      -webkit-box-shadow: 0px 1px 4px #afacac;
      background: rgba(250, 250, 250, 0.95);
      z-index: 20;
      overflow: hidden;
  }
  
  .searchBar .easy-autocomplete-container{
      top: 38px;
  }
  
  .easy-autocomplete-container ul{
    overflow: hidden;
    padding-left: 0px;
    cursor: pointer;
  }
  
  .easy-autocomplete-container li{
    padding: 15px;
      font-size: 18px;
      cursor: pointer;
      color: #333;
      font-family: 'modern';
  }
  
  .easy-autocomplete-container li{
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  /*------------------------ positioning --------------------- */
  
  .relative{
      position: relative;
  }
  
  .outerContentWrap{
      height: 100%;
      width: 100%;
      min-height: 100vh;
      max-height: 100vh;
      max-width: 1450px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .outerContentWrap.narrower{
      max-width: 1150px;
  }
  
  .inlineBlock{
      display: inline-block;
  }
  
  .block{
      display: block;
  }
  
  .skewed{
      transform: skewY(-10deg);
      -moz-transform: skewY(-10deg);
      -ms-transform: skewY(-10deg);
      -o-transform: skewY(-10deg);
      transform-origin: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
  }
  
  .skewed-overlay{
      transform: skewY(-10deg);
      -moz-transform: skewY(-10deg);
      -ms-transform: skewY(-10deg);
      -o-transform: skewY(-10deg);
      transform-origin: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background-color: rgba(10, 10, 20, 0.25);
  }
  
  .skewed.shorter{
      bottom: 25%;
  }
  
  .skewed .innerBlock{
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 50%;
      left: 60%;
      right: 0px;
      /*
      background-color: #40538e;
      */
      transform: rotate(-10deg) skewY(10deg);
      -moz-transform: rotate(-10deg) skewY(10deg);
      -ms-transform: rotate(-10deg) skewY(10deg);
      -o-transform: rotate(-10deg) skewY(10deg);
  }
  
  .smallMarginLeftRight{
      margin-left: 12px;
      margin-right: 12px;
  }
  
  .marginLeftRightFifteen{
      margin-left: 15px;
      margin-right: 15px;
  }
  
  .smallMarginLeft{
      margin-left: 11px;
  }
  
  .marginTen{
      margin: 10px;
  }
  
  .marginTwenty{
      margin: 20px;
  }
  
  .maxOneHundo{
      max-width: 100px;
  }
  
  .maxTwoHundo{
      max-width: 200px;
  }
  
  .maxTwoFifty{
      max-width: 200px;
  }

  .maxTwoFiftyTrue{
      max-width: 250px;
  }

  .minTwoSeventyFive{
      min-width: 275px;
  }
  
  .maxTwoSeventyFive{
      max-width: 275px;
  }
  
  .maxThreeHundo{
      max-width: 300px;
  }
  
  .noMaxWidth{
      max-width: initial !important;
  }
  
  .noMinWidth{
      min-width: initial !important;
  }
  
  .maxThreeFifty, .maxThreeFiftyThenFourFifty{
      max-width: 350px;
  }
  
  .maxHeightThreeHundo{
      max-height: 300px;
  }
  
  .maxFourHundo{
      max-width: 400px;
  }
  
  .maxFourFifty{
      max-width: 450px;
  }
  
  .maxFourEighty{
      max-width: 480px;
  }
  
  .maxFiveHundo{
      max-width: 500px;
  }
  
  .maxFiveTwenty{
      max-width: 520px;
  }
  
  .maxFiveFifty{
      max-width: 550px;
  }
  
  .maxSixHundo{
      max-width: 600px;
  }
  
  .maxSixFifty{
      max-width: 650px;
  }
  
  .maxSevenHundo{
      max-width: 700px;
  }
  
  .maxSevenFifteen{
      max-width: 715px;
  }
  
  .maxSevenFifty{
      max-width: 750px;
  }
  
  .maxEightHundo{
      max-width: 800px;
  }
  
  .maxEightFifty{
      max-width: 850px;
  }
  
  .maxNineHundoTrue{
      max-width: 900px;
  }
  
  .maxTenFifty{
      max-width: 1050px;
  }
  
  .maxNineHundo{
      /*-- inentionally switched to 1150px ---*/
      max-width: 1100px;
  }
  
  .maxNineFifty{
      max-width: 950px;
  }
  
  .maxOneK{
      max-width: 1000px;
  }
  
  .noMaxWidth{
      max-width: initial !important;
  }
  
  .noMinWidth{
      min-width: initial !important;
  }
  
  .eightyPercent{
      width: 80%;
  }
  
  .eightyPercentThenHundo{
      width: 80%;
      max-width: 850px;
  }
  
  .eightyThenNinety, .eightyThenNinetyTrue{
      width: 80%;
  }
  
  .ninetyPercent{
      width: 95%;
  }
  
  .realNinety{
      width: 90%;
  }
  
  .hundop{
      width: 100%;
  }
  
  .minWidthOneHundo{
      min-width: 100%;
  }
  
  .minWidthForty{
      min-width: 40px;
  }
  
  .minFifty{
      min-width: 50px !important;
  }
  
  .minOneTwenty{
      min-width: 120px;
  }
  
  .minOneFifty{
      min-width: 150px;
  }
  
  .minTwoHundo{
      min-width: 200px;
  }
  
  .minTwoFifty{
      min-width: 250px;
  }
  
  .minTwoEighty{
      min-width: 280px;
  }
  
  .minThreeHundo, .minThreeHundoThenNone{
      min-width: 300px;
  }
  
  .minThreeFifty{
      min-width: 350px;
  }
  
  .minFiveFifty{
      min-width: 550px;
  }
  
  .borderBottom{
      border-bottom: 2px solid #eef3f3;
  }
  
  .borderTop{
      border-top: 2px solid #eef3f3;
  }
  
  .borderLeft{
      border-left: 1px solid #d7dee4;
  }
  
  .lightBorderTop{
      border-top: 1px solid #e2e8e8;
  }
  
  .lightBorderAllAround{
      border: 1px solid #dadfe4;
  }
  
  .marginTop{
      margin-top: 35px;
  }
  
  .marginTopBottom{
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  .marginLeft{
      margin-left: 20px;
  }
  
  .marginLeft-25{
      margin-left: 25px;
  }
  
  .marginRight{
      margin-right: 20px;
  }
  
  .marginRightOneTen{
      margin-right: 110px;
  }
  
  .noMargin{
      margin: 0px !important;
  }
  
  .noMarginTop{
      margin-top: 0px !important;
  }
  
  .noMarginLeft{
      margin-left: 0px !important;
  }

  .noMarginLeftRight{
      margin-left: 0px !important;
      margin-right: 0px !important;
  }
  
  .noPaddingRight{
      padding-right: 0px !important;
  }
  
  .noMaxWidth{
      max-width: auto !important;
  }
  
  .noPadding{
      padding: 0px !important;
  }

  .noPaddingTop{
      padding-top: 0px !important;
  }

  .noPaddingBottom{
      padding-bottom: 0px !important;
  }

  .noPaddingTopBottom{
      padding-top: 0px !important;
      padding-bottom: 0px !important;
  }
  
  .noPaddingLeftRight{
      padding-left: 0px !important;
      padding-right: 0px !important;
  }
  
  .paddingLeftTwenty{
      padding-left: 20px;
  }
  
  .noMarginLeftRight{
      margin-left: 0px !important;
      margin-right: 0px !important;
  }
  
  .noBorder{
      border: 0px !important;
  }
  
  .noBorderBottom{
      border-bottom: 0px !important;
  }
  
  .noBorderTop{
      border-top: 0px !important;
  }
  
  .noBoxShadow{
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .noBackground{
      background:rgba(255,255,255,0) !important;
  }
  
  .bigMarginTop{
      margin-top: 45px;
  }
  
  .biggerMarginTop{
      margin-top: 65px;
  }
  
  .marginTop15vh{
      margin-top: 15vh;
  }
  
  .bigMarginBottom{
      margin-bottom: 45px;
  }
  
  .smallMarginBottom{
      margin-bottom: 20px;
  }
  
  .smallerMarginTop, .tooltipDot.smallerMarginTop{
      margin-top: 10px;
  }
  
  .smallerMarginBottom{
      margin-bottom: 10px;
  }
  
  .smallerMarginLeft{
      margin-left: 10px;
  }
  
  .smallerMarginRight{
      margin-right: 10px;
  }
  
  .smallMarginTop{
      margin-top: 20px;
  }
  
  .tinyMarginTop{
      margin-top: 8px;
  }
  
  .tinyMarginRight{
      margin-right: 8px;
  }
  
  .marginRightFive{
      margin-right: 5px;
  }
  
  .tinyMarginBottom{
      margin-bottom: 8px;
  }
  
  .marginBottom{
      margin-bottom: 35px;
  }
  
  .tinyMarginLeft{
      margin-left: 8px;
  }
  
  .tinyMarginLeftRight{
      margin-left: 8px;
      margin-right: 8px;
  }
  
  .tinyPaddingLeftRight{
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .tinyPaddingLeft{
      padding-left: 8px;
  }
  
  .tinierPaddingTop{
      padding-top: 5px;
  }
  
  .tinyPaddingAllAround{
      padding: 8px;
  }
  
  .padding-top-1-px{
      padding-top: 1px;
  }
  
  .tinyPaddingTop{
      padding-top: 8px;
  }
  
  .tiniestPaddingTop{
      padding-top: 5px;
  }
  
  .tinyPaddingBottom{
      padding-bottom: 8px;
  }
  
  .smallPaddingTop{
      padding-top: 20px;
  }
  
  .smallerPaddingTop{
      padding-top: 12px;
  }
  
  .smallerPaddingBottom{
      padding-bottom: 12px;
  }
  
  .paddingTop{
      padding-top: 35px;
  }
  
  .noPaddingLeft{
      padding-left: 0px !important;
  }
  
  .pointer{
      cursor: pointer;
  }
  
  .noPointer{
      cursor: initial !important;
  }
  
  .borderRadiusThree{
      border-radius: 3px !important;
  }
  
  .borderRadiusFive{
      border-radius: 5px !important;
  }
  
  .paddingLeftRight{
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .paddingLeftRightTen{
      padding-left: 10px;
      padding-right: 10px;
  }
  
  .paddingLeftFifteen{
      padding-left: 15px !important;
  }
  
  .morePaddingLeftRight{
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .paddingLeftRightTwenty{
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .paddingLeftRightFifty{
      padding-left: 50px;
      padding-right: 50px;
  }
  
  .paddingTopBottomThirty{
      padding-top: 30px;
      padding-bottom: 30px;
  }
  
  .bigPaddingLeftRight{
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .hugePaddingLeftRight{
      padding-left: 60px;
      padding-right: 60px;
  }
  
  .smallPaddingLeft{
      padding-left: 15px;
  }
  
  .paddingFifteen{
      padding: 15px;
  }
  
  .bigPaddingLeft{
      padding-left: 30px;
  }
  
  .paddingAllAround{
      padding: 30px;
  }
  
  .smallPaddingAllAround{
      padding: 15px;
  }
  
  .bigPaddingTop{
      padding-top: 45px;
  }
  
  .bigPaddingBottom{
      padding-bottom: 45px;
  }
  
  .bigPaddingTopPlus{
      padding-top: 60px;
  }
  
  .paddingBottom, .secondaryCard.paddingBottom{
      padding-bottom: 35px;
  }
  
  .smallPaddingBottom{
      padding-bottom: 18px;
  }
  
  .paddingTopBottomEighty{
      padding-top: 80px;
      padding-bottom: 80px;
  }
  
  .hugePaddingTop{
      padding-top: 100px;
  }
  
  .hugeMarginBottom{
      margin-bottom: 80px;
  }
  
  .hugeMarginTop{
      margin-top: 80px;
  }
  
  .hugePaddingBottom{
      padding-bottom: 100px;
  }
  
  .hugerPaddingBottom{
      padding-bottom: 150px;
  }
  
  .bigPaddingTopBottom{
      padding-top: 40px;
      padding-bottom: 70px;
  }
  
  .centeredBlock{
      margin-left: auto;
      margin-right: auto;
      display: block;
  }
  
  .marginBottom{
      margin-bottom: 35px;
  }
  
  /*------------------------ links --------------------- */
  
  a{
      cursor: pointer;
      text-decoration: none;
      color: #2d59d6;
      font-weight: bold;
      letter-spacing: 1px;
  }
  
  button > a{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
  }
  
  .coolLink{
      color: #2d59d6;
      font-weight: bold;
      cursor: pointer;
  }
  
  .coolLink:hover, a:hover {
      color: #080852;
  }

  a.cardFooterLink:hover{
    border: 1px solid #7581bd;
  }
  
  .cardFooterLink, .cardFooterText{
      font-size: 16px;
      line-height: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
  }

  /*-- special style for cancel buttons in overlays --*/
  .standardOverlay .cardFooterLink{
    border: none;
    font-size: 16px;
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: initial;
    padding-right: initial;
    color: #2d59d6;
    font-family: 'modern';
    text-transform: capitalize;
    border-radius: none;
  }

  .standardOverlay .cardFooterLink:hover{
    border: none;
    color: #080852;
  }

  .cardFooterLink, .cardFooterLink.unclickable:hover{
      background-color: rgba(255,255,255,0);
    border: 1px solid #5280fe;
    box-shadow: none;
    font-size: 10.5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 6px;
    min-width: 0px;
    color: #436de2;
    text-align: center;
    position: relative;
    font-family: 'Montserrat';
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 3px;
  }
  
  .cardFooterText{
      color: #3d4752;
      font-weight: bold;
  }
  
  .strikethrough, .statusText.strikethrough{
      text-decoration: line-through;
      color: #9ca4b7;
      font-size: 15px;
  }
  
  .topLink{
      font-size: 20px;
      font-weight: bold;
      line-height: 32px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 5px;
      color: #666;
      cursor: pointer;
  }
  
  .topLink.active, .topLink.active:hover{
      color: #2d59d6;
  }
  
  .topLink:hover{
      color: #081333;
  }
  
  /*------------------------ easing  -------------------- */
  
  .easeSlow {
      -webkit-transition: all 0.70s ease-in-out;
      -moz-transition: all 0.70s ease-in-out;
      -ms-transition: all 0.70s ease-in-out;
      -o-transition: all 0.70s ease-in-out;
  }
  
  .ease {
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
  }
  
  .easeFast {
      -webkit-transition: all 0.15s ease-in-out;
      -moz-transition: all 0.15s ease-in-out;
      -ms-transition: all 0.15s ease-in-out;
      -o-transition: all 0.15s ease-in-out;
  }
  
  .easeSuperFast {
      -webkit-transition: all 0.1s ease-in-out;
      -moz-transition: all 0.1s ease-in-out;
      -ms-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
  }

  .no-ease{
    -webkit-transition: all none !important;
    -moz-transition: all none !important;
    -ms-transition: all none !important;
    -o-transition: all none !important;
  }
  
  /*------------------------ colors --------------------- */
  
  .purpleBackground{
      background-color: #464754;
  }
  
  .fe{
      background-color: #fefefe;
  }
  
  .blueBackground{
      background: #cde2fb;
  }
  
  .fives{
      color: #515c67;
  }
  
  .purpleText{
      color: #283664;
  }
  
  .purpleText.lighter{
      color: #3f548e;
  }
  
  .fff, .standardCardBody.fff{
      background-color: #fff;
  }
  
  .fa, .triangleWrap .triangle.fa{
      background-color: #fcfefc;
  }
  
  .f1, .triangleWrap .triangle.f1{
      /*
      background-color: #f1f5f5;
      */
      background-color: #f2f4f7;
  }
  
  .gradient.purple{
      background: linear-gradient(150deg,#eeeff7 12%,#c0c6e2 80%,#e7edf3 90%);
  }
  
  /*---- purple version --- */
  
  .skewed.gradient.purple .skewed.gradient{
      background: linear-gradient(140deg,#f4f5fb 12%,#c0c6e2 80%,#e7edf3 90%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.purple .skewedTwo.gradient{
      background: linear-gradient(150deg,#f4f5fb 12%,#c0c6e2 80%,#e7edf3 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }
  
  /*------- jsa version ----- */
  
  .skewed.gradient.jsa .skewed.gradient{
      background: linear-gradient(140deg,#2e94f1 1%,#d5e6f1 80%,#dbe9f5 90%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.jsa .skewedTwo.gradient{
      background: linear-gradient(150deg,#f4f7fb 12%,#bdd4e6 80%,#e7edf3 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }
  
  /*----- blue version ------ */
  
  .gradient.blue{
      background: linear-gradient(140deg,#f4fafb 12%,#b2d4e2 80%,#d5e7ec 95%);
  }
  
  .skewed.gradient.blue .skewed.gradient{
      background: linear-gradient(150deg,#eef5f7 12%,#acd2e0 80%,#e0ebf1 90%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.blue .skewedTwo.gradient{
      background: linear-gradient(150deg,#eef5f7 12%,#acd2e0 80%,#e0ebf1 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }
  
  /*------ green version ----------- */
  
  .gradient.green{
      background: linear-gradient(150deg,#eef7f0 12%,#c0e2d5 80%,#e7f3ea 90%);
  }
  
  .skewed.gradient.green .skewed.gradient{
      background: linear-gradient(140deg,#f4fbf7 12%,#c0e2ce 80%,#e7f3ed 90%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.green .skewedTwo.gradient{
      background: linear-gradient(150deg,#f4fbf6 12%,#c0e2cd 80%,#e7f3e8 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }

  /*------ yellow version ----------- */
  
  .gradient.yellow{
      background: linear-gradient(150deg,#e2e23d 12%,#e7ef77 80%,#f3e66e 90%);
  }
  
  .skewed.gradient.yellow .skewed.gradient{
      background: linear-gradient(140deg,#f9ea63 12%,#f8f9d9 80%,#f4f7d3 90%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.yellow .skewedTwo.gradient{
      background: linear-gradient(150deg,#f5e358 12%,#fffffd 80%,#f9e26f 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }
  
  /*------ pink version ----------- */
  
  .gradient.pink{
      background: linear-gradient(150deg,#fff 20%,#fdeaf6 80%,#ffffff 90%);
  }
  
  .skewed.gradient.pink .skewed.gradient{
      background: linear-gradient(140deg,#fff 12%,#fdeff6 90%,#fff 10%);
      transform: skewY(25deg);
      -moz-transform: skewY(25deg);
      -ms-transform: skewY(25deg);
      -o-transform: skewY(25deg);
  }
  
  .skewed.gradient.pink .skewedTwo.gradient{
      background: linear-gradient(150deg,#fbf0f5 12%,#f9e2ed 85%,#f9deeb 90%);
      transform: skewY(20deg);
      transform-origin: 0;
      bottom: 0;
      height: 30%;
      position: absolute;
      left: 0;
      right: 0;
  }
  
  /*------------- more colors ------------------- */
  
  .ee, .triangleWrap .triangle.ee{
      background-color: #eef3f3;
  }
  
  .e8, .triangleWrap .triangle.e8{
      background-color: #e8edf1;
  }
  
  .d9, .inputLabel.d9, .triangleWrap .triangle.d9{
      background-color: #d9e3e3;
  }
  
  /*------------------------ overlays --------------------- */
  
  .standardOverlay{
      position: fixed;
      display: none;
      opacity: 0;
      z-index: 1000;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgba(8,8,19,0.64);
      cursor: pointer;
  }

  .standardOverlayCard{
        max-width: 600px;
      background-color: #fff;
      border-radius: 3px;
      margin-top: 14vh;
      cursor: initial;
  }

  .standardOverlayCard_wb{
    max-width: 800px;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 14vh;
  cursor: initial;
}
  
  #initialSpinnerOverlay{
      position: fixed;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgb(232, 237, 242);
      z-index: 1000;
  }

  /*------------------------ lightbox plugin (for photo albums) --------------------- */

  .lightboxOverlay{
      background-color: rgba(8,8,19, 0.64) !important;
      cursor: pointer !important;
  }

  .lb-outerContainer{
    background-color: rgba(255,255,255,0) !important;
  }

  .lightbox .lb-image {
    border: 4px solid rgba(255,255,255,0) !important;
  }

  .lb-data .lb-number{
    font-size: 12px !important;
    color: #fff !important;
    font-family: 'roboto' !important;
    font-weight: 500 !important;
  }

  .lb-data .lb-caption{
    font-size: 16px !important;
    color: #fff !important;
    font-family: 'roboto' !important;
    font-weight: 500 !important;
  }

  .lb-nav a.lb-next{
      border-radius: 100%;
    right: 10px !important;
    position: absolute;
    top: 50% ! important;
    background: #fff !important;
    opacity: 0.7 !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    margin-top: 0px;
    height: 44px;
    background-size: 24px !important;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-transform: rotate(180deg)translateY(22px);
    -moz-transform: rotate(180deg)translateY(22px);
    -ms-transform: rotate(180deg)translateY(22px);
    -o-transform: rotate(180deg)translateY(22px);
    transform: rotate(180deg)translateY(22px);
    z-index: 10;
  }

  .lb-nav a.lb-prev{
    border-radius: 100%;
    left: 10px !important;
    position: absolute;
    top: 50% ! important;
    background: #fff !important;
    opacity: 0.7 !important;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    margin-top: 0px;
    height: 44px;
    background-size: 24px !important;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-transform: rotate(0deg)translateY(-22px);
    -moz-transform: rotate(0deg)translateY(-22px);
    -ms-transform: rotate(0deg)translateY(-22px);
    -o-transform: rotate(0deg)translateY(-22px);
    transform: rotate(0deg)translateY(-22px);
    z-index: 10;
  }
  
  /*------------------------ sliders --------------------- */
  
  .overlayBlock{
      margin-top: 14vh;
  }
  
  .standardSliderWrap{
      overflow: hidden;
  }
  
  .standardSlider{
      margin-left: 0px;
      width: 200%;
      position: relative;
  }
  
  .standardSlider.active{
      margin-left: -100%;
  }
  
  .standardSlider > div{
      min-width: 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
  }
  
  /*---- v2 -------*/
  
  .sliderWrap{
      overflow: hidden;
      height: 100%;
      width: 100%;
      position: relative;
  }
  
  .slider{
      margin-left: 0px;
      width: 200%;
      height: 100%;
      position: relative;
  }
  
  .slider.active{
      margin-left: -100%;
  }
  
  .slider > div{
      min-width: 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      position: relative;
  }

    /*---- 3 panel -------*/
  
  .sliderWrap{
      overflow: hidden;
      height: 100%;
      width: 100%;
      position: relative;
  }
  
  .slider.three_panel{
      margin-left: 0px;
      width: 300%;
      height: 100%;
      position: relative;
  }
  
  .slider.three_panel > div{
      min-width: 33.33%;
      width: 33.33%;
      max-width: 33.33%;
      height: 100%;
      position: relative;
  }
  
  /*------------------------ vertical slider --------------------- */
  
  .vertical-slider-wrap{
      overflow: hidden;
      height: 59px;
  }
  
  .vertical-slider{
      height: 200%;
      width: 100%;
  }
  
  .vertical-slider > div{
      height: 50%;
  }
  
  .vertical-slider-wrap.active .first-frame{
      opacity: 1;
  }
  
  .vertical-slider .second-frame{
      opacity: 0;
  }
  
  .vertical-slider-wrap.active .vertical-slider{
      margin-top: -59px;
  }
  
  .vertical-slider-wrap.active .vertical-slider .first-frame{
      opacity: 0;
  }
  
  .vertical-slider-wrap.active .vertical-slider .second-frame{
      opacity: 1;
  }
  
  /*------------------------ ui_emailContact component --------------------- */
  
  .second-frame .product-card-explain{
      margin-top: 17px;
  }
  
  .second-frame .successIcon{
      margin-top: 18px;
      margin-right: 10px;
  }
  
  /*------------------------ other global --------------------- */
  
  .globalMessageInsert{
      position: fixed;
      right: 15%;
      left: 15%;
      bottom: -80px;
      z-index: 10000000;
      max-width: 575px;
      width: 90%;
      transform: none !important;
      margin-right: auto;
      margin-left: auto;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      font-size: 16px;
      line-height: 24px;
      font-family: 'roboto';
      font-weight: normal;
      color: #333;
      visibility: hidden;
      opacity: 0;
      background-color: rgb(56 63 86);
      border-left: 5px solid rgb(56 63 86);
      color: #fff;
  }
  
  .globalMessageInsert.active{
      bottom: 30px;
      visibility: visible;
      opacity: 1;
  }
  
  .globalMessageInsert.error{
      background-color: rgba(243, 234, 236, 0.95);
      border-left: 5px solid #9a4555;
      color: #3b4550;
  }
  
  .globalMessageInsert.longer{
      left: 10px;
      right: 10px;
      width: auto;
      max-width: none;
  }
  
  .toastBubble{
      position: fixed;
      left: 50%;
      height: 40px;
      border-radius: 25px;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      z-index: 1000000;
      background-color: rgb(56 63 86);
      color: #fff;
      font-family: 'roboto';
      font-weight: normal;
      bottom: -80px;
      visibility: hidden;
      -webkit-transform: translate3d(0,0,0);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
  }
  
  .toastBubble p{
      font-weight: normal;
      font-family: 'roboto';
      line-height: 40px;
      padding-left: 15px;
      font-size: 14px;
      padding-right: 15px;
      text-align: center;
  }
  
  .toastBubble.active{
      bottom: 30px;
      visibility: visible;
      opacity: 1;
  }
  
  .hidden {
      display: none !important;
      opacity: 0;
  }
  
  .invisible{
      opacity: 0;
      visibility: hidden;
  }
  
  .overflowHidden{
      overflow: hidden !important;
  }
  
  .overflowVisible{
      overflow: visible !important;
  }
  
  .ellipsis{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  .noWrap{
      white-space: nowrap;
  }
  
  .preWrap{
      white-space: pre-wrap !important;
  }
  
  .break-word{
      overflow-wrap: break-word !important;
  }
  
  .ellipsisWithPadding{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-top: 8px;
      padding-bottom: 8px;
  }
  
  .fadedOut{
      visibility: hidden;
      opacity: 0;
  }
  
  .upAndOut{
      visibility: hidden;
      opacity: 0;
      margin-top: -30px;
      max-height: 0px;
      font-size: 0px;
  }
  
  .boxShadowBottom{
     box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .boxShadowBottom.moreBlur, .primaryButton.moreBlur, .primaryButton.white.moreBlur{
      box-shadow: 0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
      -moz-box-shadow:  0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
    -webkit-box-shadow:  0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
  }
  
  .boxShadowBottom.moreBlur:hover, .primaryButton.moreBlur:hover, .primaryButton.white.moreBlur:hover, .boxShadowOnHover:hover{
      box-shadow: 0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
      -moz-box-shadow:  0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
    -webkit-box-shadow:  0 15px 28px rgba(55,55,95,.1), 0 5px 15px rgba(0,0,0,.07);
  }
  
  .blur{
    -webkit-filter: blur(4px);
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
  }
  
  .secondaryCard{
      padding: 20px;
      margin-bottom: 10px;
      -moz-box-shadow: 1px 1px 3px 0px #cacfd4;
    -webkit-box-shadow: 1px 1px 3px 0px #cacfd4;
      box-shadow: 1px 1px 3px 0px #cacfd4;
      border-radius: 2px;
  }
  
  .secondaryCard.active{
      border-left: 5px solid #5a67a9;
  }
  
  .standardCard{
      max-width: 1100px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .cardSelector{
      padding: 10px;
      min-width: 80px;
      border-radius: 2px;
      padding: 20px;
      border-radius: 2px;
      text-align: left;
      -moz-box-shadow: 1px 1px 3px 0px #cacfd4;
      -webkit-box-shadow: 1px 1px 3px 0px #cacfd4;
      box-shadow: 1px 1px 3px 0px #cacfd4;
      opacity: 0.55;
      cursor: pointer;
      border-left: 8px solid #dbe5e6;
  }
  
  .cardSelector.lighter{
      opacity: 0.95;
  }
  
  .cardSelector .selectorImage{
      height: 70px;
      width: 70px;
      margin-left: auto;
      margin-right: auto;
      background-repeat: no-repeat;
  }
  
  .cardSelector:hover, .cardSelector.ligher:hover{
      opacity: 1;
  }
  
  .cardSelector.active, .cardSelector.ligher.active, .cardSelector.lighter:hover{
      opacity: 1;
      border-left: 8px solid #2d59d6;
  }
  
  .cardSelector:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
  }
  
  .cardSelector h4{
      font-size: 24px;
      line-height: 28px;
      padding-bottom: 10px;
  }
  
  .cardSelector p{
      font-size: 18px;
      line-height: 24px;
  }
  
  .standardCard h3, .standardOverlayCard h3{
          padding-left: 30px;
      padding-top: 28px;
      color: #2a375f;
      font-size: 24px;
      line-height: 34px;
      padding-bottom: 12px;
      font-family: 'modern';
  }

  .standardCard h3, .standardOverlayCard_wb h3{
    padding-left: 30px;
padding-top: 28px;
color: #2a375f;
font-size: 24px;
line-height: 34px;
padding-bottom: 12px;
font-family: 'modern';
}

/*
.tappedViewBalanceTransactionData{
  text-decoration: underline;
}
*/
  
  .standardCard h3.lessPadding{
      padding-top: 19px;
      padding-left: 5px;
  }
  
  .standardCard h3.withBackButton{
      padding-left: 0px;
      display: inline-block;
  }
  
  .standardCard h3.tableSectionHeader, body.v3 .standardCard h3.tableSectionHeader, .standardOverlayCard h3.tableSectionHeader, .standardOverlayCard_wb h3.tableSectionHeader{
      font-size: 16px !important;
    padding-top: 8px;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-weight: bold !important;
    color: #727f90;
    letter-spacing: 1px;
    font-family: 'modern' !important;
  }
  
  .overlay-scroll-body{
      max-height: 42vh;
  }
  
  .standardCardBody{
      background-color: #f7f9fb;
      border-top: 1px solid #e2e8e8;
      border-bottom: 1px solid #e2e8e8;
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 30px;
      padding-bottom: 30px;
      position: relative;
      min-height: 20px;
      /*-- important so tooltips and other content don't push width of page on mobile --*/
      overflow: hidden;
  }
  
  .standardCardBody.morePaddingTop{
      padding-top: 40px;
  }
  
  /*------ this is used when we don't want to rely on h3 header styling for a card header (for instance, with calendars) --*/
  .standardCardHeader{
      height: 74px;
  }
  
  .standardCardHeader .standardBackButton{
      margin-top: 25px;
  }
  
  .standardCardHeader .standardBackButton.forward{
      margin-left: 0px;
  }
  
  .standardCardHeader.divider{
      height: auto;
      border-top: 1px solid #e8edf2;
      text-transform: uppercase;
  }
  
  .standardCardHeader.divider h3{
      font-size: 14px;
      padding-top: 10px;
      padding-bottom: 8px;
  }
  
  .standardCardFooter{
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      min-height: 40px;
  }
  
  .attachmentCard{
          text-align: left;
      padding-top: 6px;
      padding-bottom: 6px;
      margin: 20px;
      background-color: #fff;
      padding-right: 30px;
      padding-left: 15px;
      position: relative;
      display: inline-block;
      cursor: pointer;
      line-height: 30px;
      font-weight: bold;
      color: #666;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .attachmentCard .xButton{
      right: -8px;
      top: -8px;
  }
  
  .checkmarkCard{
          text-align: left;
      padding-top: 6px;
      padding-bottom: 6px;
      margin: 10px;
      background-color: #fff;
      padding-right: 15px;
      cursor: pointer;
      line-height: 30px;
      font-weight: bold;
      color: #666;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .checkmarkCard .checkmark{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/unselectedRadio.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      margin-top: 3px;
  }
  
  .checkmarkCardSubtext{
      font-size: 10px;
      text-transform: uppercase;
      font-weight: bold;
      line-height: 20px;
      margin-bottom: 4px;
      font-family: 'montserrat';
      color: #3d4752;
  }
  
  .checklistIcon{
      background-image: none;
      background-color: #fff;
      border: 1px solid #ccd1e0 !important;
  }
  
  .checkmarkCard.active .checkmark, .checklistIcon.active, .selectIcon.active, .tableCard .selectIcon.active, .tableCard.active .selectIcon, .checkmark.active{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/successIcon.jpg');
  }

  #batchBillingUploadDisplayZone.file-selected{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/successIcon.jpg);
  }

  #memUploadDisplayZone.file-selected{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/successIcon.jpg);
  }

  #memUploadDisplayZone_correction.file-selected{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/successIcon.jpg);
  }
  
  .checkmark.active.green{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/greenCheck.png');
  }
  
  .white-x-icon{
      background-size: 12px !important;
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/white-x-icon.png);
      border: none !important;
  }
  
  .white-refresh-icon{
      background-size: 15px !important;
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/white-refresh-icon.png);
      border: none !important;
  }
  
  .selectIcon{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/unselectedRadioV2.jpg');
      border: none !important;
  }
  
  .tableCard .selectIcon{
      margin-top: 6px;
      margin-left: 0px;
      height: 20px;
      min-height: 20px;
      width: 20px;
      min-width: 20px;
      max-width: 20px;
  }

  .selectTableIcon{
    width: 30px; 
    height: 30px; 
    border-radius: 50%;
    margin-top: 8px;
  }
  
  .checkmarkCard.active{
      color: #333;
  }
  
  .tinyIcon{
      min-width: 20px;
      height: 20px;
      min-height: 20px;
      width: 20px;
      max-width: 20px;
      max-height: 20px;
      border-radius: 100%;
      border: 2px solid #fff;
      margin-left: 10px;
      margin-right: 10px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }
  
  .smallerIcon{
      min-width: 26px;
      height: 26px;
      min-height: 26px;
      width: 26px;
      max-width: 26px;
      max-height: 26px;
      border-radius: 100%;
      border: 2px solid #fff;
      margin-left: 10px;
      margin-right: 10px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }
  
  .smallerIcon.noBorder{
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      width: 28px;
      max-width: 28px;
      max-height: 28px;
  }
  
  .smallIcon{
      min-width: 34px;
      height: 34px;
      min-height: 34px;
      width: 34px;
      max-width: 34px;
      max-height: 34px;
      border-radius: 100%;
      border: 1px solid #fff;
      margin-left: 20px;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }
  
  .header .smallIcon{
      margin-top: 15px;
      margin-right: 0px;
      margin-left: 5px;
      border-radius: 0px;
      background-size: contain;
  }
  
  .contain{
      background-size: contain !important;
  }
  
  .cover{
      background-size: cover !important;
  }
  
  .tooltipDot{
      width: 10px;
      height: 10px;
      min-width: 10px;
      min-height: 10px;
      margin-top: 3px;
      border-radius: 100%;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  .tooltipDot.info{
          background-color: #ccd4dc;
      width: 17px;
      height: 17px;
      min-width: 17px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/infoIcon.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 9px;
  }
  
  .tooltipDot.info.smaller{
      margin-left: 5px;
      width: 14px;
      height: 14px;
      min-width: 14px;
      min-height: 14px;
      background-size: 8px;
  }
  
  tr .tooltipDot.info.smaller{
      margin-right: 0px;
      margin-left: 10px;
      margin-top: 8px;
  }
  
  .tooltipDot.warning{
      background-color: #e0db04;
  }
  
  .tooltipDotWrapper.slideRight{
      margin-right: -25px;
      margin-left: -5px;
  }
  
  .mediumIcon{
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      width: 44px;
      max-width: 44px;
      max-height: 44px;
      border-radius: 100%;
      margin-left: 20px;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }
  
  .mediumIcon.cardHeaderIcon{
      margin-top: 15px;
  }
  
  .mediumIcon.loading{
      opacity: 0.3;
  }
  
  .mediumIcon.validation-icon{
      margin-top: 0px;
      margin-right: 8px;
      height: 60px;
      min-width: 60px;
      height: 60px;
      min-height: 60px;
      width: 60px;
      max-width: 60px;
      max-height: 60px;
      background-size: 80%;
      background-color: #fff;
  }
  
  .bigIcon{
      min-width: 69px;
      height: 69px;
      min-height: 69px;
      width: 69px;
      max-width: 69px;
      max-height: 69px;
      border-radius: 100%;
      margin-left: 20px;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }
  
  .panel-icon{
      min-width: 150px;
      height: 150px;
      min-height: 150px;
      width: 150px;
      max-width: 150px;
      max-height: 150px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain !important;
      overflow: hidden;
  }
  
  .bigIcon.burgee{
      border-radius: 0px;
      background-size: contain;
      margin-right: 10px;
  }

  .smallIcon.burgee{
    border-radius: 0px;
    background-size: contain;
  }
  
  .bigIcon.loading{
      opacity: 0.3;
  }
  
  .secondaryCardName{
      font-size: 24px;
      font-weight: bold;
      line-height: 34px;
      color: #2b375f;
  }
  
  .secondaryCardSubtext{
      font-family: 'modern';
      font-size: 16px;
      line-height: 24px;
      font-weight: bold;
      color: #52596f;
      margin-top: 4px;
      text-align: left;
  }
  
  .secondaryCardSubtext.smaller{
      font-family: 'modern';
      font-size: 14px;
      line-height: 20px;
      color: #52596f;
      text-align: left;
  }
  
  /*------------------------ card buttons --------------------- */
  
  .cardButtonWrap{
      padding-top: 15px;
      padding-left: 10px;
      padding-bottom: 5px;
      font-size: 18px;
      line-height: 20px;
      border-radius: 5px;
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
      color: #596771;
      background-color: rgba(255,255,255,0.75);
      border-left: 5px solid #5a67a9;
      cursor: pointer;
      font-weight: bold;
      padding-right: 5px;
  }
  
  /*------------------------ drilldown headers (for object detail views) --------------------- */
  
  .drilldownHeaderWrap{
      background-color: #fff;
      margin-bottom: 20px;
      padding-top: 30px;
      border-radius: 3px;
      overflow: hidden;
  }
  
  .drilldownHeaderWrap .badge-insert{
      position: absolute;
      right: 20px;
      top: 20px;
  }
  
  .drilldownHeaderWrap .badge-insert .tap-circle{
      font-size: 13px !important;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 4px;
      padding-bottom: 4px;
  }
  
  .drilldownHeaderBackButtonWrap{
      padding-bottom: 15px;
  }
  
  .drilldownHeader{
      color: #2a375f;
      font-size: 24px;
      line-height: 34px;
      padding-bottom: 2px;
      padding-right: 5px;
  }
  
  .drilldownHeaderSubtext{
      font-size: 13px;
      padding-top: 2px;
      color: #6e7885;
      font-weight: bold;
      text-transform: uppercase;
  }
  
  .drilldownHeaderMenu{
      border-top: 1px solid #e4ebf1;
      background-color: #f1f5f9;
      margin-top: 10px;
  }
  
  .drilldownHeaderMenu::-webkit-scrollbar { 
      display: none; 
  }
  
  .drilldownHeaderMenuItem{
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: bold;
      font-size: 16px;
      border-top: 3px solid #f1f5f9;
      color: #6a7482;
      white-space: nowrap;
      cursor: pointer;
  }
  
  .drilldownHeaderMenuItem.active, .drilldownHeaderMenuItem.active:hover{
      border-top: 3px solid #5280ff;
      background-color: #fff;
      color: #2c59d6;
  }
  
  .drilldownHeaderMenuItem:hover{
      color: #081333;
  }
  
  .drilldownHeaderMenuItem.dots{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal.png);
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .drilldownHeaderMenuItem.dots:hover{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal_active.png);
  }
  
  .drilldownHeaderDropdown{
      opacity: 0;
      visibility: hidden;
      top: 140px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: -5px;
      padding-left: 15px;
      padding-right: 15px;
  }

  .tableRowDropdown{
      bottom: auto;
      /*top: 50px;*/
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(130, 150, 172, .12), 0 14px 35px 0 rgba(47, 50, 94, .12), 0 5px 14px 0 rgba(0, 0, 0, .06);
      -moz-box-shadow: 0 0 0 1px rgba(130, 150, 172, .12), 0 14px 35px 0 rgba(47, 50, 94, .12), 0 5px 14px 0 rgba(0, 0, 0, .06);
      -webkit-box-shadow: 0 0 0 1px rgba(130, 150, 172, .12), 0 14px 35px 0 rgba(47, 50, 94, .12), 0 5px 14px 0 rgba(0, 0, 0, .06);
      color: #111;
      z-index: 10;
      /*
      right: 10px;
      */
      display: none;
      min-width: 110px;
  }

  /*
  .tableRowDropdown.first, .tableRowDropdown.near_top {
      bottom: -60%
  }

  .tableRowDropdown.last, .tableRowDropdown.near_bottom {
      bottom: 10px;
  }
  
  */
  

  .tableRowDropdown.first .tappedMove_up, .tableRowDropdown.last .tappedMove_down {
    display: none !important;
  }

  tr .dots{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_transparent_horizontal.png);
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      padding-left: 8px;
      padding-right: 8px;
      height: 30px;
  }

  tr td.tapped_dots{
    padding-left: 5px;
    padding-right: 5px;
    width: 45px;
    cursor: pointer;
  }

  tr .tapped_dots:hover .dots{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_transparent_horizontal_active.png);
  }
  
  .drilldownHeaderMenuItem.dots:hover{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal_active.png);
  }
  
  /*------------------------ standalone tab bars --------------------- */
  
  .tabBarWrap{
      border-top: 1px solid #e4ebf1;
      background-color: #f1f5f9;
      margin-top: 10px;
  }
  
  .tabBarWrap::-webkit-scrollbar, .gallery_row::-webkit-scrollbar { 
      display: none; 
      background: transparent;
  }
  
  .tabBarOption{
          padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: bold;
      font-size: 16px;
      border-top: 3px solid #f1f5f9;
      color: #6a7482;
      white-space: nowrap;
      cursor: pointer;
  }
  
  .tabBarOption.active, .tabBarOption.active:hover{
      border-top: 3px solid #5280ff;
      background-color: #fff;
      color: #2c59d6;
      border-right: 1px solid #e4ebf1;
  }
  
  .tabBarOption:hover{
      color: #081333;
  }

  .tabBarOption .x-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
    margin-right: -10px;
    margin-left: 5px;
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/grey-x-icon.png);
  }

  /*------------------------ drilldown headers (for object detail views) adding this version based on the white label stylesheet --------------------- */
  
  .cs-drilldown-menu{
      border-top: 1px solid #e4ebf1;
      margin-top: 10px;
  }
  
  .cs-drilldown-menu::-webkit-scrollbar { 
      display: none; 
  }
  
  .cs-drilldown-menu-item{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 16px;
        border-top: 3px solid rgba(255,255,255,0);
        color: #99a4b3;
        white-space: nowrap;
        cursor: pointer;
        font-family: roboto;
  }
  
  .cs-drilldown-menu-item.active, .cs-drilldown-menu-item.active:hover{
      border-top: 3px solid #2a375f;
        color: #2a375f;
  }
  
  .cs-drilldown-menu-item:hover{
      color: #081333;
  }
  
  .cs-drilldown-menu-item.dots{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal.png);
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .cs-drilldown-menu-item.dots:hover{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal_active.png);
  }
  
  .cs-drilldown-menu-dropdown{
      opacity: 0;
      visibility: hidden;
      top: 140px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: -5px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  /*------------------------ other icons --------------------- */
  
  .copyIcon{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/copyLinkIcon.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      /* background-color: #d4dfe2; */
      width: 30px;
      height: 30px;
      border-radius: 2px;
      margin-left: 10px;
  }
  
  .uploadIcon{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/uploadIcon.png);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      border-radius: 5px;
  }
  
  .upload-icon-on-white{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/upload-icon-on-white.png);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      border-radius: 5px;
      background-color: #f7f9fb;
  }
  
  .copyLinkIcon{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/copyLinkIcon.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 22px;
      height: 16px;
      /* border-radius: 2px; */
      margin-left: 10px;
      margin-top: 5px;
      cursor: pointer;
  }
  
  .copyLinkIcon:hover{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/copyLinkIconActive.png);
  }
  
  /*------------------------ product cards --------------------- */
  
  .product-card{
      padding-top: 40px;
      padding-right: 40px;
      padding-bottom: 40px;
      padding-left: 120px;
      border-radius: 5px;
      margin: 30px;
      text-align: left;
  }
  
  .product-card-label{
      font-family: 'Montserrat';
      color: #4c58a7;
      font-weight: bold;
      font-size: 18px;
      text-transform: uppercase;
      padding-bottom: 15px;
  }
  
  .product-card.has-badge .product-card-label{
      padding-top: 10px;
      padding-bottom: 30px;
  }
  
  .product-card.no-icon{
      padding-left: 40px;
  }
  
  .product-card-icon{
      position: absolute;
      left: 0px;
      top: 0px;
      bottom: -40px;
      width: 90px;
      overflow: hidden;
  }
  
  .product-card-badge{
      height: 100px;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 100px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
  }
  
  .product-card-badge.customerIcon_jsa{
      background-size: contain;
  }
  
  .product-card-icon-overlay{
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: #283664;
      opacity: 0;
  }
  
  .product-card-icon .skewed{
      transform: skewY(-40deg);
      -moz-transform: skewY(-40deg);
      -ms-transform: skewY(-40deg);
      -o-transform: skewY(-40deg);
  }
  
  .product-card-label.blue{
      color: #0595d6;
  }

  .product-card-label.yellow{
    color: yellowgreen;
}
  
  .product-card-label.green, .header-sublink-label.green{
      color: #0a925a;
  }
  
  .product-card-label.pink, .header-sublink-label.pink{
      color: #f378b1;
  }

  .product-card-label.deep-blue, .header-sublink-label.deep-blue{
      color: #3a5c79;
  }
  
  .product-card-explain{
      font-size: 18px;
      text-transform: none;
      font-family: 'modern';
      font-weight: bold;
      line-height: 28px;
      padding-bottom: 10px;
      padding-top: 5px;
      color: #525e6b;
  }
  
  .product-card-subtitle{
      text-transform: uppercase;
      font-size: 12px;
  }
  
  .plus-sign{
          font-weight: bold;
      font-size: 22px;
      padding-top: 10px;
  }
  
  .product-card-subtitle-value{
      font-family: 'Montserrat';
    font-weight: bold;
    font-size: 22px;
    padding-top: 8px;
  }
  
  /*--- version of product cad with a photo (like about us team page) -----*/
  
  .has-photo .product-card-icon{
      bottom: auto;
      width: 180px;
      height: 180px;
      margin-bottom: 30px;
      position: relative;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }
  
  .product-card.has-photo{
      padding-left: 40px;
  }
  
  .photo_brendan{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/brendan2.jpg');
  }
  
  .photo_graham{
      background-image: url(https://s3-us-west-1.amazonaws.com/regattatoolbox/aboutgb.png);
  }
  
  .photo_philip{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/philip_stout.jpg');
  }

  .photo_tucker{
    background-image: url('https://d282wvk2qi4wzk.cloudfront.net/imageGrid_component-image_1596490269822');
  }

  .photo_adam{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/photo_adam.jpg');
  }

  .photo_viv{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/photo_viv.png');
  }
  
  /*--- hover states for product cards ---------------- */
  
  .product-card:hover{
      -webkit-transform: translateY(-4px);
      -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      -o-transform: translateY(-4px);
  }
  
  .product-card:hover .product-card-icon-overlay{
      opacity: 0.4;
  }
  
  .product-card:hover .product-card-label, .product-card-label.dark{
      color: #283664 !important;
  }
  
  .product-card:hover .skewed .skewed.gradient{
      background: linear-gradient(150deg,#c9ced2 12%,#293d44 80%,#6c797f 90%);
  }
  
  .product-card:hover .skewed .skewedTwo.gradient{
      background: linear-gradient(150deg,#949fa2 12%,#6a8690 80%,#586267 90%);
  }
  
  /*--- dark product cards ---------------- */
  
  .dark-blue{
      background-color: #0e183a;
  }
  
  .medium-green{
      background-color: #4da76f;
  }
  
  .medium-grey{
      background-color: #5c6d79;
  }
  
  .product-card .dark-blue, .product-card .medium-green, .product-card .medium-grey{
      margin-left: -40px;
      margin-top: -40px;
      margin-right: -40px;
      margin-bottom: 30px;
      padding-left: 40px;
      padding-top: 40px;
      padding-bottom: 40px;
      padding-right: 40px;
  }

  /*------------------------ v2 product cards (v1 still in use!) --------------------- */
  
  .product-card-v2{
     margin: 30px;
    text-align: left;
    margin: 30px;
    text-align: left;
    max-width: 435px;
    width: 435px;
  }
  
  .product-card-label-v2{
      font-family: 'Montserrat';
    color: #293664;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 15px;
  }

  .product-card-icon-v2{
      width: 320px;
    height: 230px;
    margin-bottom: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/upload-photo-icon.jpg");
  }

  .product-card-explain-v2{
      font-size: 18px;
      text-transform: none;
      font-family: 'modern';
      font-weight: bold;
      line-height: 28px;
      padding-bottom: 10px;
      color: #525e6b;
  }

  .section-header-v2{
      padding-bottom: 15px;
    padding-top: 15px;
    margin-left: 30px;
    display: inline-block;
    /* text-transform: uppercase; */
    font-size: 28px;
    color: #273665;
    /* letter-spacing: .125em; */
    line-height: 40px;
    font-family: 'Montserrat';
    font-weight: 700;
  }

  .product-image_drag-and-drop{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_drag-and-drop.jpg") !important;
  }

  .product-image_templates{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_templates.jpg") !important;
  }

  .product-image_membership_database{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_membership_database.jpg") !important;
  }

  .product-image_membership_database_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_membership_database_2.png") !important;
  }

  .product-image_pos{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_pos.png") !important;
  }

  .product-image_pos_reporting{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_pos_reporting.png") !important;
  }

  .product-image_pos_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_pos_2.png") !important;
  }

  .product-image_booking{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_booking.png") !important;
  }

  .product-image_booking_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_booking_2.png") !important;
  }

  .product-image_regatta{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_regatta.png") !important;
  }

  .product-image_regatta_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_regatta_2.png") !important;
  }

  .product-image_camps{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_camps.png") !important;
  }

  .product-image_camps_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_camps_2.png") !important;
  }

  /*------------------------ gallery rows --------------------- */

  .gallery_row{
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .gallery_row_image{
    width: 465px;
    min-width: 465px;
    max-width: 465px;
    height: 300px;
    border-radius: 5px;
    margin-left: 30px;
    background-position-x: left;
    background-position-y: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/upload-photo-icon.jpg);
  }
  
  /*------------------------ customer icons --------------------- */
  
  .customerGrid{
      top: 150px;
      width: 80%;
      right: -35%;
      bottom: 50px;
      position: absolute;
      height: 550px;
      overflow: hidden;
  }
  
  .customerIcon{
      height: 150px;
      min-width: 220px;
      max-width: 220px;
      z-index: 10;
      margin: 15px;
      border-radius: 3px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.1);
      -moz-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.1);
      -webkit-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.1);
  }
  
  .customerIcon.smaller{
         height: 100px;
      min-width: 110px;
      max-width: 110px;
      background-size: 60%;
  }
  
  .customerIcon.smaller.customerIcon_chicago{
      background-size: 70%;
  }
  
  .customerIcon.medium{
      height: 120px;
      min-width: 150px;
      max-width: 150px;
      background-size: 60%;
  }
  
  .customerIconOne{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/WorldSailingLogo80px.png');
  }
  
  .customerIcon_jsa{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/jsa_burgee.png');
      background-size: 120px;
  }
  
  .isafLogo{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/WorldSailingLogo80px.png');
  }
  
  .customerIconTwo{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/29erAssoc.jpg');
      background-size: 170px;
  }
  
  .customerIconThree{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/aioda80px.png');
  }
  
  .customerIconFour{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/flying11Assoc.jpg');
      background-size: 170px;
  }
  
  .customerIconFive{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/openBic80px.png');
  }
  
  .customerIconSix{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/sailsydney100px.png');
  }
  
  .customerIconSeven{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/bcSailingAssoc.jpg');
      background-size: 170px;
  }
  
  .customerIconEight{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/c420Assoc.jpg');
      background-size: 170px;
  }
  
  .customerIconNine{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/crx300x150.jpg');
      background-size: 170px;
  }
  
  .customerIconTen, .customerIcon_stfyc{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/StFYC.jpg');
      background-size: 170px;
  }
  
  .customerIconEleven{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/USwaszpClass.jpg');
      background-size: 170px;
  }
  
  .customerIconTwelve{
      background-image: url('https://s3-us-west-1.amazonaws.com/regattatoolbox/obowlLogo.jpg');
      background-size: 170px;
  }
  
  .customerIcon_cpyc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/CedarPointYC.jpg');
      background-size: 120px;
  }
  
  .customerIcon_sdyc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/SanDiegoYC.png');
      background-size: 120px;
  }
  
  .customerIcon_byc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/BellinghamYC.jpg');
      background-size: 90px;
  }
  
  .customerIcon_cryc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/CoralReefYC.png');
      background-size: 120px;
  }
  
  .customerIcon_coronado{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/CoronadoYC.png');
      background-size: 120px;
  }
  
  .customerIcon_smwyc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/SantaMonicaWindjammersYC.png');
      background-size: 120px;
  }

  .customerIcon_fbc{
    background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/lIPqBRHTYA_burgee_1586141805481);
    background-size: 44% !important;
  }

  .customerIcon_cbyc{
    background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/YPce5CjzAT_burgee_1590613649943);
      background-size: 120px;
  }
  
  .customerIcon_pysf{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/PeninsulaYouthSailingFoundation.jpg');
      background-size: 120px;
  }

  .customerIcon_delavan{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/yVq6rz613F_burgee_1574269334439);
      background-size: 120px;
  } 

  .customerIcon_annapolis{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/imageGrid_component-image_1612996287539);
      background-size: 120px;
  } 

  .customerIcon_larchmont{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/dVgmdOaxZP_burgee_1545027311548);
      background-size: 120px;
  } 

  .customerIcon_stfyc{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/xy4o21Zzfw_burgee_1544057612184);
      background-size: 120px;
  } 

  .customerIcon_pequot{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/pdsLpSRUnM_burgee_1579585552103);
      background-size: 120px;
  }    

  .customerIcon_nhyc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/NewportHarborYC.png');
      background-size: 120px;
  }
  
  .customerIcon_syc{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/SausalitoYC.png');
      background-size: 120px;
  }
  
  .customerIcon_chicago{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/ErSVLRUAA7_campLogo_1544474934833');
      background-size: 120px;
  }

  .customerIcon_mentor{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/rOYu3bNuSr_burgee_1534985296240);
      background-size: 120px;
  }

  .customerIcon_hampton{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/yVq6rz613F_burgee_1544473856636);
      background-size: 120px;
  }

  .customerIcon_glss{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/CA2ZOjc8uC_burgee_1548698673586);
      background-size: 120px;
  }

  .customerIcon_norfolk{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/yVq6rz613F_burgee_1544475605942);
      background-size: 120px;
  }

  .customerIcon_usoda{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/kujycb4Vou_burgee_1567658429303);
      background-size: 120px;
  }

  .customerIcon_scira{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/yVq6rz613F_burgee_1542254900431);
      background-size: 85px;
  }

  .customerIcon_laser{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/yVq6rz613F_burgee_1609953718683);
      background-size: 120px;
  }

  .customerIcon_oakcliff{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/LOWa34PyEn_burgee_1537458476774);
      background-size: 120px;
  }

  .customerIcon_us_sailing{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/j62rQaVrx1_burgee_1548441235882);
      background-size: 90px;
  }

  .customerIcon_bbyra{
      background-image: url(https://myclubspot.s3-us-west-2.amazonaws.com/FGaEGywHNp_burgee_1580791876534);
      background-size: 90px;
  }

  .customerIcon_nnyc{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/Df6Wmk3zg9_burgee_1614347145764);
      background-size: 90px;
  }
  
  /*------------------------ tap cells --------------------- */
  
  .standardTapCell{
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 4px;
      padding-bottom: 4px;
      font-weight: bold;
      background-color: #fff;
      font-size: 16px;
      line-height: 20px;
      border-radius: 4px;
      color: #5b71bf;
      cursor: pointer;
      -webkit-box-shadow: 1px 2px 1px 0px rgba(50,50,93,.05), 0 3px 4px 0 rgba(0,0,0,.04);
      -moz-box-shadow: 1px 2px 1px 0px rgba(50,50,93,.05), 0 3px 4px 0 rgba(0,0,0,.04);
      box-shadow: 1px 2px 1px 0px rgba(50,50,93,.05), 0 3px 4px 0 rgba(0,0,0,.04);
  }
  
  .tapCellPreText{
      font-size: 16px;
      padding-top: 5px;
      color: #333;
      padding-right: 10px;
      line-height: 20px;
      text-transform: none;
      font-weight: bold;
  }
  
  .tapCellCompanion{
      padding-left: 2px;
      padding-right: 2px;
      padding-top: 4px;
      padding-bottom: 4px;
      font-weight: bold;
      font-size: 16px;
      line-height: 22px;
      border-radius: 4px;
      text-align: right;
  }
  
  /*------------------------ scrolling --------------------- */
  
  .scrollable {
      overflow: auto;
      -webkit-transition-property: top, bottom;
      transition-property: top, bottom;
      -webkit-transition-duration: .2s, .2s;
      transition-duration: .2s, .2s;
      -webkit-transition-timing-function: linear, linear;
      transition-timing-function: linear, linear;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
  }

  /* --- "freezing" table columns/rows --*/
  .sticky-column{
      position: -webkit-sticky;
      position: sticky;
      left: 0px;
  }

  .sticky-column::after{
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    bottom: 0;
    top: 0;
    background-color: #e2e8e8;
  }

  th.sticky-column{
    background-color: #f1f5fa;
  }

  td.sticky-column{
    background-color: #fff;
  }

  /*------------------------ badges --------------------- */
  
  .standardBadgeOutline{
      border: 1px solid #2c385f;
      color: #2c385f;
      font-weight: normal;
      padding-left: 6px;
      padding-right: 6px;
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: 13px;
      margin-left: 12px;
      line-height: 18px;
      font-family: 'Roboto';
  }

  .standardBadgeOutline p{
    font-family: 'Roboto';
    font-weight: normal;
  }
  
  .standardBadgeOutline.green{
      border: 1px solid #0fa020;
      color: #148414;
  }
  
  .standardBadgeOutline.warning, .cardFooterButton.outline.warning{
      color: #c34e4e;
      border: 1px solid #c34e4e;
  }
  
  .standardBadgeOutline.warning.adminHover:hover{
      background-color: #d68c06;
      color: #fff;
      font-weight: bold;
  }
  
  .standardBadgeOutline.green.adminHover:hover{
      background-color: #0fa020;
      color: white;
      font-weight: bold;
  }
  
  /*------------------------------ flex styles -------------------------- */
  
  .flexcontainer {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .flexWrap {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-flow: row wrap;
      justify-content: center;
      -webkit-justify-content: center;
      -ms-justify-content: center;
      -moz-justify-content: center;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: center;
  }
  
  .flexWrap.baseline, .flexWrapLeftAlign.baseline{
      align-items: baseline;
  }
  
  .flexWrapLeftAlign, .camps .campsContent.flexWrapLeftAlign,  .admin .campsContent.flexWrapLeftAlign{
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-flow: row wrap;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: center;
  }
  
  .flexWrapRightAlign {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-flow: row wrap;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: center;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
      -ms-justify-content: flex-end;
      -moz-justify-content: flex-end;
  }
  
  .flexNoWrap, .camps .campsContent.flexNoWrap,  .admin .adminContent.flexNoWrap, .admin .campsContent.flexNoWrap{
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
  }
  
  .flexNoWrap-inline{
      display: -ms-inline-flex;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: inline-flex;
  }
  
  .flexNoWrapCenter {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      justify-content: center;
      -webkit-justify-content: center;
      -ms-justify-content: center;
      -moz-justify-content: center;
      text-align: center;
  }
  
  .basis-15{
      flex-basis: 15%;
  }
  
  .basis-20{
      flex-basis: 20%;
  }
  
  .basis-25{
      flex-basis: 25%;
  }
  
  .basis-30{
      flex-basis: 30%;
  }
  .basis-40{
      flex-basis: 40%;
  }
  
  .basis-50{
      flex-basis: 50%;
  }
  
  .basis-60{
      flex-basis: 60%;
  }
  
  .basis-75{
      flex-basis: 75%;
  }
  
  .basis-90{
      flex-basis: 90%;
      max-width: 90%;
  }
  
  .maxNinety{
      max-width: 90%;
  }
  
  .maxFiftyThenHundo{
  
  }
  
  .spacer{
      min-width: 15px;
      max-width: 15px;
  }
  
  .flexNoWrapRight {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      justify-content: right;
      -webkit-justify-content: right;
      -ms-justify-content: right;
      -moz-justify-content: right;
      text-align: right;
  }
  
  .flexGrowOne {
      -webkit-flex-grow: 1;
      -moz-flex-grow: 1;
      -ms-flex-grow: 1;
      flex-grow: 1;
  }
  
  .flexGrowTwo {
      -webkit-flex-grow: 2;
      -moz-flex-grow: 2;
      -ms-flex-grow: 2;
      flex-grow: 2;
  }
  
  .flexGrowThree {
      -webkit-flex-grow: 3;
      -moz-flex-grow: 3;
      -ms-flex-grow: 3;
      flex-grow: 3;
  }
  
  /* ----------------------------- permission-based styles --------------------------------- */
  
  .adminContent, .campsContent, .coachContent, .membershipContent, .webContent, .financeContent, .regattasContent{
      display: none;
  }
  
  .admin .adminContent, .admin .campsContent, .admin .coachContent, .admin .membershipContent, .admin .webContent, .admin .financeContent, .admin .regattasContent{
      display: block;
  }
  
  .finance .financeContent{
      display: block;
  }
  
  .web .webContent{
      display: block;
  }
  
  .admin p span.adminContent{
      display: inline;
  }
  
  .camps .campsContent, .camps .coachContent{
      display: block;
  }
  
  .coach .coachContent{
      display: block;
  }
  
  .membership .membershipContent{
      display: block;
  }
  
  .regattas .regattasContent{
      display: block;
  }
  
  .admin .adminContentFallback, .camps .campsContentFallback, .admin .campsContentFallback, .admin .membershipContentFallback, .membership .membershipContentFallback, .web .webContentFallback, .admin .webContentFallback, .admin .financeContentFallback, .finance .financeContentFallback, .regattas .regattasContentFallback, .admin .regattasContentFallback{
      display: none;
  }
  
  /* ----------------------------- header & nav  --------------------------------- */
  
  .my{
          font-weight: bold;
      color: #2d59d6;
      font-size: 18px;
      padding-right: 2px;
      font-family: sans-serif;
      text-transform: none;
  }
  
  .header{
      height: 68px;
      background-color: rgba(255,255,255, 0);
      z-index: 102;
      position: relative;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      -webkit-transform: translate3d(0,0,0);
      /*
      overflow: hidden;
      */
  }
  
  /* this is for swapping in a title on mobile */
  #headerTitleInsert{
      display: none;
  }
  
  .promoActive .hamburgerWrap{
      top: 20px;
  }
  
  .promoActive.opaque.scrolled .hamburgerWrap{
      top: 10px;
  }
  
  .header.opaque.promoActive{
      height: 88px;
  }
  
  .header.opaque.scrolled.promoActive{
      height: 68px;
  }
  
  .headerPromo{
      margin-top: 0px;
      height: 20px;
      color: #fff;
      background-color: #313b61;
      font-weight: bold;
      font-size: 12px;
      letter-spacing: 1px;
      text-align: center;
      text-transform: uppercase;
      line-height: 21px;
      font-family: 'modern';
  }
  
  /*-- hide it as the user scrolls --*/
  .header.scrolled.promoActive .headerPromo{
      margin-top: -20px;
  }
  
  .paddingTopHeader{
      padding-top: 72px;
  }
  
  .header.startOpaque{
      background-color: #fff;
  }
  
  .header.opaque, .header.stayOpaque{
      background-color: rgba(255,255,255, 0.95) !important;
      -webkit-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      -moz-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      height: 68px;
  }
  
  #desktopMenuWrap .headerButton{
          color: #5a67a9;
      border: 1px solid #5a67a9;
      margin-left: 15px;
      font-weight: bold;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      border-radius: 2px;
      font-size: 14px;
      position: relative;
      cursor: pointer;
      line-height: 40px;
      height: 34px;
      line-height: 34px;
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 18px;
  }
  
  .header.opaque #desktopMenuWrap .headerButton{
      color: #fff;
      border: 1px solid #5a67a9;
      background-color: #5a67a9;
  }
  
  .header.opaque #desktopMenuWrap .headerButton:hover, #desktopMenuWrap .headerButton:hover{
      color: #fff;
      border: 1px solid #5a67a9;
      background-color: #5a67a9;
      margin-top: 16px;
      -webkit-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      -moz-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
  }
  
  .absoluteA{
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
  }
  
  .absoluteInput{
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      z-index: 1;
      opacity: 0;
      cursor: pointer;
  }
  
  #desktopMenuWrap{
      position: absolute;
      right: 0px;
      top: 0px;
      height: 70px;
      line-height: 70px;
  }
  
  .headerLinkWrap{
      color: #46505d;
      letter-spacing: 1px;
      font-weight: bold;
      margin-left: 14px;
      margin-right: 14px;
      padding-left: 5px;
      padding-right: 5px;
      border-top: 5px solid rgba(255,255,255,0);
      position: relative;
      line-height: 65px;
  }

  .headerLinkWrap > p{
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 14px;
  }
  
  .headerLinkWrap:hover, .headerLinkWrap.active{
      color: #2d59d6;
      border-top: 5px solid #6371ce;
  }
  
  .innerHeader{
      width: 95%;
      max-width: 95%;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      /*
      max-width: 1150px;
      margin-left: auto;
      margin-right: auto;
      width: 97%;
      position: relative;
      */
  }
  
  .innerHeader.narrow{
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .innerHeader .defaultUserIcon{
      right: 10px;
      visibility: visible !important;
      position: fixed;
      top: 7px;
      margin-top: 0px;
  }
  
  .mobileDashboardLinkWrap {
      position: absolute;
      right: 0px;
      top: 0px;
      height: 50px;
      line-height: 50px;
  }
  
  .header h1, .contentZoneHeader h1{
      font-weight: 100;
      line-height: 70px;
      margin-right: 200px;
      padding-left: 24px;
      font-size: 24px;
      letter-spacing: 2px;
      /*color: #333;*/
      color: #2a3664;
      text-transform: uppercase;
      cursor: pointer;
      font-family: 'modern';
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  .contentZoneHeader h1{
      line-height: 38px;
      padding-left: 0px;
      margin-right: 100px;
  }
  
  .header h1.lessPadding{
      padding-left: 15px;
  }
  
  /*------------------------ header sublinks -------------- */
  
  .header-sublink-outer{
    max-height: calc(100vh - 68px);
    border-top: 1px solid #e2e8e8;
    position: fixed;
    left: 0px;
    right: 0px;
    opacity: 0;
    visibility: hidden;
    z-index: 30;
    text-align: left;
    line-height: 40px;
    top: 60px;
    right: 0px;
    white-space: nowrap;
    box-shadow: 0px 10px 10px 2px rgb(50 50 93 / 2%), 0 3px 6px 0 rgb(0 0 0 / 5%);
    -moz-box-shadow: 0px 10px 10px 2px rgb(50 50 93 / 2%), 0 3px 6px 0 rgb(0 0 0 / 5%);
    -webkit-box-shadow: 0px 10px 10px 2px rgb(50 50 93 / 2%), 0 3px 6px 0 rgb(0 0 0 / 5%);
    border-radius: 3px;
  }

  .header-sublink-section-header{
    border-bottom: 1px solid #e2e7e8;
    padding-bottom: 10px;
    color: #2a3664;
    font-family: 'Montserrat';
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .header-sublink-inner{
    padding: 30px;
  }

  .header-sublink-left{
    padding-left: 30px;
    padding-right: 30px;
    width: 60%;
    min-width: 60%;
    background-color: rgba(255,255,255,0.98);
  }

  .header-sublink-right{
    padding-left: 30px;
    padding-right: 30px;
    background-color: rgb(244, 248, 251, 0.98);
      width: 40%;
    min-width: 40%;
  }
  
  .mobile-sublink-outer{
      line-height: 40px;
  }
  
  .headerLinkWrap:hover .header-sublink-outer, .header-sublink-outer:hover{
      visibility: visible;
      opacity: 1;
      top: 68px;
  }

  .force-hide-menu .headerLinkWrap:hover .header-sublink-outer, .force-hide-menu .header-sublink-outer:hover{
      visibility: hidden;
      opacity: 0;
      top: 60px;
  }
  
  .header-sublink-wrap{
      cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 30px;
    max-width: 300px;
    margin-left: -20px;
  }

  .header-sublink-wrap.special-hover:hover{
    background-color: #f3f3ff;
  }

  .header-sublink-wrap.special-hover:hover .header-sublink-label{
    color: #6352ec;
  }
  
  .nthSublinkWrap{
      border-top: 1px solid #f0f3f7;
  }
  
  .header-sublink-label{
      font-family: 'roboto';
    color: #2b3664;
    font-weight: 500;
    font-size: 17px;
  }
  
  .header-sublink-label.blue{
      color: #5a70ce;
  }
  
  .header-sublink-explain{
     font-size: 15px;
    text-transform: none;
    font-family: 'roboto';
    font-weight: normal;
    line-height: 22px;
    padding-bottom: 5px;
    white-space: initial;
    color: #5b646f;
  }

  .header-sublink-wrap .header-callout{
    display: inline-block;
    height: 12px;
    line-height: 13px;
    margin-top: 9px;
  }
  
  /*------------------------------ x buttons ------------------------------- */
  
  .xButton{
      height: 30px;
      width: 30px;
      border-radius: 100%;
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: #fff;
      background-image: url("https://d282wvk2qi4wzk.cloudfront.net/xButton.jpg");
      background-position: center;
      background-size: 16px;
      background-repeat: no-repeat;
      cursor: pointer;
      z-index: 1;
      -webkit-box-shadow: 0px 1px 8px -1px rgba(10, 10, 10, 0.2);
      box-shadow: 0px 1px 8px -1px rgba(10, 10, 10, 0.2);
      -moz-box-shadow: 0px 1px 8px -1px rgba(10, 10, 10, 0.2);
  }
  
  .xButton.closeOverlay{
      top: 15px;
      right: 15px;
  }
  
  .xButton.upperRight{
      right: -12px;
      top: -12px;
  }
  
  /*------------------------------ charts & metrics ------------------------------- */
  
  .metric{
      font-size: 34px;
      line-height: 40px;
      font-family: 'Roboto';
      font-weight: 500;
      color: #2a375f;
  }
  
  .metric-label{
      font-size: 13px;
    font-family: 'Roboto';
    text-transform: uppercase;
    color: #697684;
    font-weight: 400;
  }

  .metric-label.metric-label-select{
    padding-right: 20px; 
    background-color: transparent; 
    box-shadow: none; 
    margin-left: -12px;
  }
  
  .chart-container{
      height: 200px;
      margin-left: 20px;
      margin-top: 15px;
  }

  .chart-spinner{
    padding-top: 65px !important;
  }

  .chart-spinner .cardBodySpinner, #accountPickerDropdown .cardBodySpinner{
    height: 25px;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
    min-width: 25px;
    border-width: 2px;
    margin-bottom: -5px;
  }
  
  /* --------------------- left menu --------------------------------*/
  
  .leftMenuItem, .drillDownMenuItem{
      font-size: 20px;
      padding-left: 25px;
      padding-right: 25px;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #52596f;
      font-weight: bold;
      cursor: pointer;
  }
  
  .leftMenuItem.inactive, .leftMenuItem.inactive:hover{
      color: #bbbdbd;
      cursor: initial;
  }

  .leftMenuItem_secondary {
    border-bottom: 1px solid #e8edf1;
    margin-top: -15px;
    color: #737a90;
    padding-top: 15px;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 15px;
      font-weight: bold;
      cursor: pointer;
      background-color: #fdfdfd;
  }

  .leftMenuItem_secondary p{
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
  }
  
  .leftMenuSubItemWrap{
      padding-top: 5px;
      padding-left: 30px;
      padding-bottom: 5px;
  }
  
  .leftMenuSubItemWrap p{
      font-size: 16px;
      padding-left: 10px;
      line-height: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      color: #52596f;
      font-weight: bold;
      cursor: pointer;
  }
  
  .leftMenuSubItemWrap p.active{
      color: #2d59d6 !important;
  }
  
  .accountOption, #accountOption_currentUser{
      font-size: 20px;
      padding-left: 15px;
      padding-right: 25px;
      color: #52596f;
      font-weight: bold;
      cursor: pointer;
  }
  
  .leftMenuItem.active, .drillDownMenuItem.active{
      color: #2d59d6 !important;
  }
  
  .leftMenuItem:hover, .leftMenuItem_secondary:hover, .drillDownMenuItem:hover, .accountOption:hover, #accountOption_currentUser:hover, .leftMenuSubItemWrap p:hover, .cardHeaderButtonDropdownOption:hover, .toolbarButtonDropdownOption:hover, .searchBarDropdownOption:hover, .dropdownOption:hover{
      color: #081333;
  }
  
  .flexibleLeftMenu{
        min-width: 235px;
      max-width: 235px;
      margin-left: 0px;
      padding-top: 90px;
      /* padding-bottom: 50px; */
      overflow: hidden;
      z-index: 100;
      /* position: relative; */
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
  }
  
  .narrowLeftMenu .flexibleLeftMenu{
      min-width: 200px;
      max-width: 200px;
  }
  
  .standardContentZone{
      position: absolute;
      left: 235px;
      right: 0px;
      top: 0px;
      bottom: 0px;
  }
  
  .narrowLeftMenu .standardContentZone{
      left: 200px;
  }
  
  .noLeftMenu .standardContentZone{
      left: 0px !important;
  }
  
  .standardContentZone.lower{
      top: 65px;
  }
  
  .standardContentZone.lower .contentBlock{
      padding-top: 0px;
  }
  
  .contentBlock{
    position: absolute;
      top: 0px;
      padding-top: 90px;
      padding-bottom: 90px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .contentBlock.lessPadding{
      padding-top: 30px;
  }
  
  .flexibleLeftMenuMobileSpacer{
      height: 0px;
  }
  
  .mainSection.fixedView{
    min-height: 100vh;
    max-height: 100vh;
    width: 100%;
  }
  
  .fixedView{
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
  }
  
  .absoluteView{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }

  .selectedAccountNameInsert{
    font-family: 'roboto';
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
  }

  /* -------------- dark mode menu ------------------ */

  .menu_v2.dark_mode .flexibleLeftMenu{
    background-color: #25293a;
  }

  /*
  .dark_mode .headerPromo{
    background-color: #277fa0;
  }
  */

  .menu_v2.dark_mode .dashboard_header_wrap p{
    color: #e2e6ec;
    font-family: 'roboto';
    font-weight: 300;
  }

  .menu_v2.dark_mode .leftMenuItem p, .menu_v2.dark_mode .leftMenuItem_secondary p{
    color: #e2e6ec;
  }

  .menu_v2.dark_mode .leftMenuSubItem {
    color: #e2e6ec;
  }

  .menu_v2.dark_mode .leftMenuItem.active{
    border-left: 5px solid #5488ff;
    background-color: #363f5e;
  }

  .menu_v2.dark_mode .leftMenuItem.active p{
    color: #e5e9f1;
  }

  .menu_v2.dark_mode .leftMenuItem:hover p, .menu_v2.dark_mode .leftMenuItem_secondary:hover p{
    color: #fff;
  }

  .menu_v2.dark_mode .leftMenuSubItemWrap{
    padding-top: 1px;
  }

  .menu_v2.dark_mode .leftMenuSubItemWrap p:hover{
    color: #fff;
    background-color: #353f5f;
  }

  .menu_v2.dark_mode .leftMenuSubItem.active{
    color: #e5e9f1 !important;
    background-color: #353f5f;
  }

  .menu_v2.dark_mode .selectedAccountNameInsert, .menu_v2.dark_mode .standardThumbnailNameInsert {
    color: #fff;
  }

  .menu_v2.dark_mode #accountPicker{
    color: #e2e6ec;
    background-color: rgba(255,255,255,0) !important;
  }

  .menu_v2.dark_mode #accountPickerDropdown .accountOption .standardThumbnailNameInsert, .menu_v2.dark_mode #accountPickerDropdown #accountOption_currentUser .standardThumbnailNameInsert{
    color: #e2e6ec;
  }

  .menu_v2.dark_mode #accountPickerDropdown .accountOption:hover .standardThumbnailNameInsert, .menu_v2.dark_mode #accountPickerDropdown #accountOption_currentUser:hover .standardThumbnailNameInsert{
      color: #fff;
  }

  .menu_v2.dark_mode #accountPicker, .menu_v2.dark_mode #selectedCampHeader{
    background-color: #1f2539 !important;
    border-top: 1px solid #3e4869;
  }

  .menu_v2.dark_mode .dashboard_header_wrap{
    border-bottom: 1px solid #3e4869;
    background-color: #1f2538;
  }

  .menu_v2.dark_mode .leftMenuItem_secondary{
    border-top: 1px solid #3e4869;
    background-color: #363f5e;
  }

  .menu_v2.dark_mode .standardThumbnail.clubspot_logo_icon{
    border-radius: 2px;
    height: 25px;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    background-size: 80%;
    margin-top: 2px;
  }

  .menu_v2.dark_mode .dark_mode_toggle_wrap{
    background-color: #152a5a;
    border: 1px solid #535d7b;
  }

  /* -------------- v3 "no max-width" version of the dashboard ------------------ */

  body.v3 .contentBlock{
    padding: 0px !important;
  }

  body.v3{
    background-color: initial !important;
  }

  body.v3 .standardCard{
    max-width: initial !important;
    width: 100% !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    margin-top: 0px !important;
  }

  body.v3 .standardCard h3{
    font-size: 22px !important;
    font-family: 'roboto' !important;
    font-weight: 500 !important;
    padding-bottom: 10px;
  }

  body.v3 .details-view.active{
    padding-top: 152px;
  }

  body.v3 .drilldownHeaderWrap{
    width: 100% !important;
    max-width: initial !important;
    position: fixed;
    top: 0px;
    background: #fff;
    z-index: 111;
    box-shadow: 0px 1px 2px rgba(167, 167, 191, 0.1), 0px 1px 2px 0px rgba(0,0,0,.07);
    -moz-box-shadow: none 0px 1px 2px rgba(167, 167, 191, 0.1), 0px 1px 2px 0px rgba(0,0,0,.07);
    -webkit-box-shadow: none 0px 1px 2px rgba(167, 167, 191, 0.1), 0px 1px 2px 0px rgba(0,0,0,.07);
  }

   body.v3 .drilldownHeaderDropdown{
    position: fixed;
    transform: translateX(220px);
    z-index: 102;
  }

  body.v3 .drilldownHeaderDropdown.active{
    top: 160px;
  }

  body.v3 .inputWrap.searchBar{
    width: 100% !important;
    min-width: initial !important;
    height: 64px !important;
    max-width: initial !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  body.v3 .inputWrap.searchBar input{
    font-size: 18px;
    width: 95%;
  }

  body.v3 .searchBar input::-webkit-input-placeholder, .searchBar input::-webkit-input-placeholder {
     font-size: 18px !important;
  }

  body.v3 .standardCardFooter.borderTop{
    border-top: none;
  }

  body.v3 .searchBarButton{
    z-index: 10;
    white-space: nowrap;
    margin-top: 18px;
    position: absolute;
    right: 15px;
  }

  body.v3 .searchBarWrap{
    max-width: initial !important;
    width: 100%;
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid #e2e8e8 !important;
  }

  body.v3 .view{
    overflow: hidden !important;
  }

  body.v3 .view.active{
    overflow: initial !important;
  }

  body.v3.menu_v2 .flexibleLeftMenu{
    background-color: #f6f9fb;
  }

  body.v3.menu_v2.dark_mode .flexibleLeftMenu{
    background-color: #25293a;
  }

  body.v3.menu_v2 .leftMenuItem.active{
    background-color: #eef2f5;
  }

  body.v3.menu_v2.dark_mode .leftMenuItem.active{
    background-color: #363f5e;
  }

  /* -------------- v2 menu (pinned to the left) ------------------ */

  .menu_v2 .standardThumbnailNameInsert{
    max-height: initial;
  }

  .menu_v2 .flexibleLeftMenu{
    background-color: #fdfdfd;
    border-right: 1px solid #e2e8e8;
  }

  .menu_v2 .flexibleLeftMenu .selectedHeaderBackButton{
    top:10px;
  }

  .menu_v2 .standardThumbnail.clubspot_logo_icon{
    border-radius: 0px;
    box-shadow: none;
    background-size: contain;
    height: 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
  }

  .menu_v2 .dashboard_header_wrap{
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    cursor: pointer;
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8e8;
    background-color: #fdfdfd;
  }

  .menu_v2 .dashboard_header_wrap p{
    font-family: 'modern';
    font-weight: bold;
    font-size: 20px;
    line-height: 32px;
    padding-left: 3px;
    color: #303b61;
  }

  .menu_v2 #leftMenuInner{
    visibility: visible;
    opacity: 1;
    top: 73px;
    bottom: 57px;
    padding-top: 15px;
    position: absolute;
    padding-bottom: 50px;
    left: 0px;
    right: 0px;
  }

  .menu_v2 .flexibleLeftMenu.showAccountPicker #accountPickerDropdown {
    visibility: visible;
    opacity: 1;
    top: 73px;
    bottom: 70px;
    padding-top: 15px;
    position: absolute;
    left: 0px;
    right: 0px;
  }

  .menu_v2 #accountPicker, .menu_v2 #selectedCampHeader{
    background-color: #fdfdfd !important;
    border-top: 1px solid #e2e8e8;
      position: absolute;
      bottom: 0px;
      margin-bottom: 0px;
      padding-bottom: 15px;
      margin-left: 0px;
      padding-top: 15px;
      padding-left: 5px;
      font-size: 18px;
      z-index: 10;
      font-family: 'roboto';
    font-weight: 300;
    margin-left: 0px;
    margin-right: 0px;
    left: 0px;
    right: 0px;
  }

  .menu_v2 #accountPickerDropdown .accountOption, .menu_v2 #accountPickerDropdown #accountOption_currentUser{
      padding-left: 5px;
  }

  .menu_v2 .selectedAccountNameInsert{
    padding-left: 3px;
    padding-right: 30px;
  }

  .menu_v2 .standardCard, .menu_v2 .maxNineHundo{
    max-width: 1400px;
  }

  .menu_v2 .leftMenuItem.active{
    border-left: 5px solid #5280ff;
    padding-left: 20px;
    background-color: #f7f9fb;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .menu_v2 #accountPicker .dropdownArrow{
    margin-top: 0px;
  }

  .menu_v2 .leftMenuSubItem {
    font-weight: 300;
    font-family: 'roboto';
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .menu_v2 .leftMenuSubItem_import {
    font-weight: 300;
    font-family: 'roboto';
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .menu_v2 .leftMenuItem p{
    font-weight: 300;
    font-family: 'roboto';
    font-size: 18px;
  }

  .menu_v2 .outerContentWrap{
    max-width: initial;
  }

  .menu_v2 .contentBlock{
    padding-left: 30px;
    padding-right: 30px;
  }
  
  /* -------------- tooltips ------------------ */
  
  .tooltip{
      overflow: visible !important;
      position: relative;
  }
  
  .tooltipText{
      opacity: 0;
      visibility: hidden;
      bottom: 50%;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 8px;
      padding-right: 8px;
      font-size: 14px;
      font-weight: bold;
      font-family: 'modern';
      border-radius: 2px;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      left: 50%; 
      margin-left: -100px;
      width: 200px;
      color: #111;
      z-index: 10;
      line-height: 20px;
      z-index: 150;
  }
  
  .tooltipText.left{
      margin-left: -150px;
  }
  
  .tooltipText.left::after{
      left: 73%;
  }

  .tooltipText.further-left{
    margin-left:-200px;
  }

  .tooltipText.further-left::after{
      left: 95%;
  }
  
  .tooltipText.right{
      margin-left: -30px;
  }
  
  .tooltipText.right::after{
      left: 18%;
  }
  
  .tooltipText.bottom{
      top: 50%;
      bottom: auto;
  }
  
  .clockIcon.tooltip:hover .tooltipText, .visibilityIcon.tooltip:hover .tooltipText{
      bottom: 33px;
  }
  
  .clockIcon.tooltip:hover .tooltipText.bottom, .visibilityIcon.tooltip:hover .tooltipText.bottom{
      top: 33px;
      bottom: auto;
  }
  
  .tooltipDot.tooltip:hover .tooltipText{
      bottom: 25px;
  }
  
  .tooltipDot.tooltip:hover .tooltipText.bottom{
      top: 25px;
  }
  
  .tooltip:hover .tooltipText{
      opacity: 1;
      visibility: visible;
      bottom: 105%;
  }
  
  .tooltip:hover .tooltipText.bottom{
      opacity: 1;
      visibility: visible;
      top: 105%;
      bottom: auto;
  }
  
  .tooltip:hover .tooltipText.bottom.lower, .tooltip.mock-hover .tooltipText.bottom.lower{
      opacity: 1;
      visibility: visible;
      top: 125%;
  }
  
  .tooltipText::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -16px;
      border-width: 8px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
  }
  
  .tooltipText.bottom::after {
      content: "";
      position: absolute;
      bottom: 100%;
      top: auto;
      left: 50%;
      margin-left: -16px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent transparent #fff transparent
  }
  
  /* -------------- thumbnails ------------------ */
  
  .standardThumbnail{
   height: 27px;
      width: 27px;
      min-width: 27px;
      max-width: 27px;
      display: inline-block;
      border-radius: 100%;
      margin-left: 8px;
      margin-right: 8px;
      margin-bottom: -8px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: #fff;
      box-shadow: 0 6px 13px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 0 6px 13px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 0 6px 13px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .visibilityIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/hiddenIcon.jpg');
      background-size: cover;
      background-position: center;
      border: none !important;
  }
  
  .clockIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/clockIcon.jpg');
      background-size: cover;
      background-position: center;
      border: none !important;
  }
  
  .defaultClubIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/clubIcon.png');
      background-size: cover;
      background-position: center;
  }
  
  .successIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/successIcon.jpg');
      background-size: cover;
      background-position: center;
      border: none !important;
  }
  
  .successIcon.inactive{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/greyCheck.jpg');
      background-size: cover;
      background-position: center;
      border: none !important;
  }
  
  .sailingIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/defaultSailingIconV2.jpg');
      background-size: cover;
      background-position: center;
  }
  
  .golfIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/golfIcon.jpg');
      background-size: cover;
      background-position: center;
  }
  
  .tennisIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/tennisIcon.jpg');
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,0);
  }
  
  .cardSelector .selectorImage.tennisIcon{
      background-size: 50px;
  }
  
  .golfIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/golfIcon.jpg');
      background-size: cover;
      background-position: center;
  }
  
  .defaultCampIcon{
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/campIconV2.jpg');
      background-size: cover;
      background-position: center;
  }
  
  .defaultUserIcon{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/userIcon.jpg);
      background-size: 90%;
      background-repeat: no-repeat;
      background-position: bottom;
      background-color: #fff;
  }
  
  .default-image-icon{
      background-color: #f2f4f7;
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/upload-photo-icon.jpg');
      background-size: auto 40% !important;
      background-position: center;
  }
  
  .default-image-icon-without-important-css{
      background-color: #f2f4f7;
      background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/upload-photo-icon.jpg');
      background-size: auto 40%;
      background-position: center;
  }
  
  .standardThumbnail.plusButton{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/plusButton.png);
      background-size: 11px;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  .nameAndThumbnailWrap{
    cursor: pointer;
    line-height: 30px;
    word-break: break-word;
  }
  
  .nameAndThumbnailWrap.bigger{
      line-height: 34px;
  }
  
  .nameAndThumbnailWrap.bigger .standardThumbnail{
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      max-width: 32px;
      max-height: 32px;
  }
  
  .nameAndThumbnailWrap.bigger .standardThumbnailNameInsert{
      color: #2a375f;
      font-size: 24px;
      margin-left: 5px;
  }

  .standardThumbnailNameInsert{
    font-family: 'roboto';
    font-weight: 300;
    font-size: 17px;
    color: #3b4256;
    padding-left: 4px;
    line-height: 26px;
    padding-right: 30px;
    max-height: 50px;
    overflow: hidden;
  }
  
  .recentPlaceCard_admin{
      color: #262d61;
      font-weight: bold;
      font-size: 18px;
  }
  
  /* --------------------- login signup --------------------------------*/
  
  .version_send_otp, .version_enter_otp, .version_new_pw{
    display: none;
  }

  .send_otp .version_send_otp, .enter_otp .version_enter_otp, .new_pw .version_new_pw{
    display: block;
  }

  .pw_reset_slider.three_panel{
    margin-left: 0%;
  }

  .enter_otp .pw_reset_slider.three_panel{
    margin-left: -100%;
  }

  .new_pw .pw_reset_slider.three_panel{
    margin-left: -200%;
  }
  
  /* --------------------- extra copy and error/success messages --------------------------------*/
  
  .loginSignupExtraCopy, .resetPWExtraCopy, .standardExtraCopy{
      padding: 15px !important;
      background-color: rgba(192, 208, 224, 0.4) !important;
      border-left: 5px solid #516fd9 !important;
      color: #3b4550 !important;
      font-weight: bold !important;
      border-radius: 2px;
      overflow: hidden;
  }
  
  .standardExtraCopy.error{
      background-color: rgba(253, 251, 249, 0.86) !important;
      border-left: 5px solid #9a4555 !important;
  }
  
  .standardExtraCopy.deleteObject{
      background-color: rgba(253, 251, 249, 0.86) !important;
      border-left: 5px solid #9a4555 !important;
  }

  .standardExtraCopy.green{
    background-color: rgb(220 240 221 / 40%) !important;
    border-left: 5px solid #48a94f !important;
  }
  
  .deleteObject a{
      color: #d6173b;
  }
  
  .createClubAccountExtraCopy{
      background-color: rgba(255,255,255,0.5);
      padding: 15px;
      margin-top: 15px;
      border-left: 5px solid #3acde4;
  }
  
  .errorInsert{
      padding: 0px;
      background-color: rgba(208, 181, 186, 0.4);
      border-left: 5px solid #9a4555;
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      overflow: hidden;
      margin-top: 0px;
      margin-bottom: 0px;
      text-align: left;
      font-family: roboto;
      color: #494e5d;
  }

  .errorInsert a{
    font-weight: normal;
  }
  
  .errorInsert.active{
      visibility: visible;
      opacity: 1;
      margin-top: 20px;
      max-height: initial;
      overflow: initial;
      padding: 15px;
  }

  .addMemberErrorInsert{
    margin-bottom: 0px;
  }

  .addMemberErrorInsert.active{
    margin-bottom: 30px;
  }
  
  .inlineSuccessMessage{
      padding: 0px;
      background-color: rgba(144, 186, 193, 0.3);
      border-left: 5px solid #529a45;
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      margin: 0px;
  }
  
  .inlineSuccessMessage.active{
      visibility: visible;
      opacity: 1;
      margin-top: 20px;
      padding: 15px;
      max-height: initial;
  }
  
  /*-- small indicator used for things like "beta" or "optional" --*/
  
  .header-callout{
      margin-left: 8px;
      font-size: 10px;
      font-family: 'Roboto';
      text-transform: uppercase;
      font-weight: 500;
      background-color: #e1e7ea;
      color: #46505d;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 3px;
  }
  
  .header-callout.beta, .table-row-tag.beta{
      background-color: #f1e3f9;
      color: #8303d4;
  }

  .header-callout.new, .table-row-tag.grey{
     background-color: #e1e7ea;
      color: #46505d;
  }

  .header-callout.new, .table-row-tag.green{
     background-color: #c6f1c6;
      color: #105619;
  }

  .table-row-tag{
      margin-right: 8px;
    font-size: 10.5px;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: 500;
    background-color: #d9eefd;
      color: #3f538e;
      /*
    background-color: #e1e7ea;
    color: #46505d;
    */
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 3px;
    white-space: nowrap;
    margin-bottom: 4px;
    margin-top: 4px;
  }
  
  /* --------------------- mobile menu --------------------------------*/
  
  .mobileMenuOverlay, .leftMenuOverlay, .cartOverlay, .mobile-order-summary-overlay{
      position: fixed;
      z-index: 9;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgba(8,8,19,0.64);
      cursor: pointer;
      visibility: hidden;
      opacity: 0;
  }
  
  .cartOverlay, .mobile-order-summary-overlay{
      z-index: 101;
  }
  
  .mobileMenuOverlay.active, .leftMenuOverlay.active, .cartOverlay.active, .mobile-order-summary-overlay.active{
      visibility: visible;
      opacity: 1;
  }
  
  .mobileMenu{
      position: fixed;
      top: 0px;
      left: -100%;
      width: 90%;
      bottom: 0px;
      padding-top: 70px;
      padding-bottom: 100px;
      background-color: #fff;
      color: #273766;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      min-width: 320px;
  }
  
  .mobileMenu.active{
      left: 0px;
      opacity: 1;
      visibility: visible;
  }
  
  .headerPromoActive .mobileMenu{
      padding-top: 90px;
  }
  
  .mobileMenu a, .mobile-link-wrap > p{
      display: block;
      line-height: 50px;
      font-size: 24px;
      color: #333;
      text-transform: uppercase;
      font-family: 'modern';
      padding: 8px;
      cursor: pointer;
      font-weight: bold;
      letter-spacing: 1px;
  }
  
  .mobileMenu a:hover, .mobile-link-wrap:hover > p{
      color: #5a67a9;
  }
  
  .mobileMenu .innerMenu{
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      min-width: 280px;
  }
  
  .mobileMenu .divider{
      width: 100%;
      height: 1px;
      background-color: #fff;
      margin-left: auto;
      margin-right: auto;
  }
  
  .hamburgerWrap{
      position: absolute;
      left: 0px;
      top: 5px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 30px;
      width: 30px;
      cursor: pointer;
      z-index: 1;
  }
  
  .hamburger>div{
    background-color: #777;
    position: absolute;
  }
  
  .hamburger.active>div{
    position: absolute;
  }
  
  .hamburger #headerLineTop{
      right: 0px;
      left: 0px;
      top: 12px;
      height: 2px;
      width: 22px;
  }
  
  .hamburger #headerLineMiddle{
       right: 0px;
      left: 0px;
      top: 20px;
      height: 2px;
      opacity: 1;
  }
  
  .hamburger #headerLineBottom{
      right: 0px;
      left: 0px;
      top: 28px;
      height: 2px;
      width: 22px;
  }
  
  .hamburger.active #headerLineTop{
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      top: 20px;
  }
  
  .hamburger.active #headerLineMiddle{
      opacity: 0;
  }
  
  .hamburger.active #headerLineBottom{
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      top: 20px;
  }
  
  /* ----------------------------- back arrows --------------------------------- */
  
  .arrowButton{
      border-radius: 100%;
      background-color: #fff;
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      background-size: 20px;
      box-shadow: 0px 1px 15px -1px rgba(10, 10, 10, 0.4);
      -moz-box-shadow: 0px 1px 15px -1px rgba(10, 10, 10, 0.4);
      -webkit-box-shadow: 0px 1px 15px -1px rgba(10, 10, 10, 0.4);
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
  }
  
  /* ------------- used on dashboard for drill down menus ------------*/
  .selectedHeaderBackButton, .panelBackButton{
          width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      background-size: 22px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      position: absolute;
      left: 0px;
      top: 12px;
  }
  
  .cardHeaderBackButton, .standardBackButton, .drilldownHeaderBackButton{
      width: 34px;
      min-width: 34px;
      max-width: 34px;
      height: 40px;
      background-size: 21px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      margin-top: -9px;
  }
  
  .standardBackButton:hover, .standardBackButtonWrap:hover .standardBackButton, .standardBackButton.forward:hover, .hover-wrap:hover .standardBackButton{
      background-position-x: 3px;
  }
  
  .scroll-down-arrow{
      border-radius: 100%;
      background-color: #fff;
      opacity: 0.6;
      position: fixed;
      bottom: 25px;
      width: 44px;
      min-width: 44px;
      max-width: 44px;
      margin-top: 0px;
      height: 44px;
      right: 50%;
      background-size: 24px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-repeat: no-repeat;
      -webkit-transform: rotate(-90deg)translateY(50%);
      -moz-transform: rotate(-90deg)translateY(50%);
      -ms-transform: rotate(-90deg)translateY(50%);
      -o-transform: rotate(-90deg)translateY(50%);
      transform: rotate(-90deg)translateY(50%);
      animation: bobbing 1.2s linear infinite;
      -webkit-animation: wk-bobbing 1.2s linear infinite;
      z-index: 10;
  }
  
  .scroll-down-arrow.scrolled{
      -webkit-transform: rotate(-270deg);
      -moz-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
      -o-transform: rotate(-270deg);
      transform: rotate(-270deg);
      animation: none;
      -webkit-animation: none;
      right: 20px; 
      bottom: 20px;
      cursor: pointer;
  }
  
  @-webkit-keyframes wk-bobbing {
      0% {bottom: 25px; }
      50% {bottom: 10px; }
      100%{bottom: 25px; }
  }
  
  @keyframes bobbing {
      0% {bottom: 25px; }
      50% {bottom: 10px; }
      100%{bottom: 25px; }
  }
  
  .standardBackButton.forward{
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      -transform: rotate(-180deg);
      height: 34px;
  }

  .standardBackButton.smallest.forward{
    height: 15px;
    width: 15px;
    margin-top: 1px;
    min-width: 15px;
    max-width: 15px;
    background-size: 12px;
    margin-left: 4px;
  }
  
  .standardBackButton.down{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -transform: rotate(-90deg);
      height: 34px;
  }
  
  .standardBackButton.up, .table-view-row.active .standardBackButton{
      -webkit-transform: rotate(-270deg);
      -moz-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
      -o-transform: rotate(-270deg);
      -transform: rotate(-270deg);
  }
  
  /*-- don't move on hover if it's an up or down arrow ---*/
  .standardBackButton.up:hover, .standardBackButton.down:hover{
      background-position-x: center;
  }
  
  .cardHeaderBackButtonWrap, .drilldownHeaderBackButtonWrap{
      cursor: pointer;
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
  }
  
  .cardHeaderBackButtonWrap .cardHeaderBackButton{
      margin-top: 23px;
  }
  
  .drilldownHeaderBackButton{
      margin-top: 2px;
  }
  
  .nextStepBackButton{
      width: 34px;
      min-width: 34px;
      max-width: 34px;
      height: 48px;
      background-size: 22px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      vertical-align: middle;
      margin-right: 10px;
      border-radius: 2px;
  }
  
  .nextStepBackButton:hover{
      background-position-x: 3px;
  }
  
  .arrowButton.smaller{
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      height: 30px;
      background-size: 15px;
      margin-right: 8px;
      margin-left: 8px;
  }
  
  .arrowButton.smallest{
      width: 20px;
      height: 20px;
      min-height: 20px;
      min-width: 20px;
      max-width: 20px;
      max-height: 20px;
      background-size: 12px;
      margin-left: 8px;
      margin-top: 2px;
      box-shadow: 0px 1px 4px 1px rgba(10, 10, 10, 0.15);
      -moz-box-shadow: 0px 1px 4px 1px rgba(10, 10, 10, 0.15);
      -webkit-box-shadow: 0px 1px 4px 1px rgba(10, 10, 10, 0.15);
  }
  
  .arrowButton:hover, .cardHeaderBackButton:hover, #selectedCampHeader:hover .selectedHeaderBackButton, .cardHeaderBackButtonWrap:hover .cardHeaderBackButton, .drilldownHeaderBackButtonWrap:hover .drilldownHeaderBackButton, .littlePanelHeader:hover .cardHeaderBackButton, .panelHeader:hover .selectedHeaderBackButton {
      -webkit-transform: translateX(-5px);
      -moz-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
      -o-transform: translateX(-5px);
  }
  
  .arrowButton.forward{
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
  }
  
  .arrowButton.forward:hover, .recentPlaceCard_admin:hover .arrowButton.forward, .arrowButtonWrap:hover .arrowButton.forward{
      -webkit-transform: rotate(-180deg) translateX(-5px);
      -moz-transform: rotate(-180deg) translateX(-5px);
      -ms-transform: rotate(-180deg) translateX(-5px);
      -o-transform: rotate(-180deg) translateX(-5px);
  }
  
  .arrowButtonText{
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      margin-right: 8px;
  }
  
  .dropdownArrow{
      width: 20px;
      min-width: 20px;
      max-width: 20px;
      height: 20px;
      background-size: 10px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      cursor: pointer;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      position: absolute;
      right: 10px;
      top: 22px;
  }
  
  .sort-arrow{
      opacity: 0.4;
      position: absolute;
      right: 10px;
      top: 13px;
      width: 14px;
      min-width: 14px;
      max-width: 14px;
      height: 14px;
      background-size: 14px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      cursor: pointer;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -ms-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
  }
  
  th.sortable:hover .sort-arrow, .mock-table-header-item.sortable:hover .sort-arrow{
      opacity: 1;
  }
  
  th.sortable.sorted, .mock-table-header-item.sorted{
      color: #5377de;
  }
  
  th.sortable.sorted .sort-arrow, .mock-table-header-item.sortable.sorted .sort-arrow{
      opacity: 1;
  }
  
  th.sortable.ascending .sort-arrow, .mock-table-header-item.sortable.ascending .sort-arrow{
      opacity: 1;
      -webkit-transform: rotate(-270deg);
      -moz-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
      -o-transform: rotate(-270deg);
  }
  
  /* ----------------------------- buttons & spinners --------------------------------- */
  
  button{
      outline: none;
  }
  
  @-webkit-keyframes wk-spinning {
      0% {-webkit-transform: rotate(0deg);}
      100%{-webkit-transform: rotate(360deg);}
  }
  
  @keyframes spinning {
      0% {transform: rotate(0deg);}
      100%{transform: rotate(360deg);}
  }
  
  .cardBodySpinnerWrap{
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      padding-top: 20px;
      padding-bottom: 20px;
      visibility: hidden;
      opacity: 0;
      z-index: 10;
  }
  
  .cardBodySpinnerWrap.relative{
      position: relative !important;
      display: none !important;
      padding-top: 25px;
      padding-bottom: 25px;
  }
  
  .cardBodySpinnerWrap.relative.active{
      display: block !important;
  }
  
  .cardBodySpinnerWrap.active{
      opacity: 1;
      visibility: visible;
  }
  
  .cardBodySpinner{
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0);
      border-left: 3px solid #B9C5D6;
      border-top: 3px solid #B9C5D6;
      border-bottom: 3px solid #B9C5D6;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
  }
  
  .cardBodySpinnerWrap.active .cardBodySpinner{
      animation: spinning 0.65s linear infinite;
      -webkit-animation: wk-spinning 0.65s linear infinite;
  }
  
  .cardBodySpinnerWrap.centerY{
      top: 45vh;
  }
  
  /*---- upload image spinners ---------- */
  
  .tapUploadImageZone.loading .upload-image-spinner{
      animation: spinning 0.65s linear infinite;
      -webkit-animation: wk-spinning 0.65s linear infinite;
  }
  
  .upload-image-spinner{
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0);
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      border-bottom: 3px solid #fff;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
      margin-top: 50px;
  }
  
  /*---- end upload image spinners ---------- */
  
  .bigSpinner{
          font-size: 0px;
          height: 50px;
      width: 50px;
      max-width: 50px;
      max-height: 50px;
      min-width: 50px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0);
      border-left: 3px solid #B9C5D6;
      border-top: 3px solid #B9C5D6;
      border-bottom: 3px solid #B9C5D6;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .tableRow .primaryButton.outline{
      padding-top: 1px;
      margin-top: 2px;
      margin-bottom: 2px;
      padding-bottom: 1px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 10px;
      border-radius: 20px;
  }
  
  .primaryButton.spinning, .primaryButton.white.spinning, .primaryButton.inactive.spinning{
          font-size: 0px;
          color: rgba(255,255,255,0) !important;
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0) !important;
      border-left: 3px solid #5a70ce !important;
      border-top: 3px solid #5a70ce !important;
      border-bottom: 3px solid #5a70ce !important;
      background-color: rgba(255,255,255,0) !important;
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .toolbarButton.spinning{
          font-size: 0px;
          color: rgba(255,255,255,0);
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0);
      border-left: 3px solid #c6cdd8;
      border-top: 3px solid #c6cdd8;
      border-bottom: 3px solid #c6cdd8;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .primaryButton.outline, .cardFooterButton.outline, body.v3 .searchBarButton{
     background-color: rgba(255,255,255,0);
      border: 1px solid #5280fe;
      box-shadow: none;
      font-size: 11px;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 0px;
      color: #2f5bd6;
      font-weight: bold;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .primaryButton.inactive.outline, .cardFooterButton.inactive.outline, .primaryButton.inactive.outline:hover, .cardFooterButton.inactive.outline:hover{
      background-color: rgba(255,255,255,0);
      border: 1px solid #9ca4b7;
      box-shadow: none;
      font-size: 11px;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 0px;
      color: #575d6f;
      font-weight: bold;
  }
  
  .primaryButton.onDark.spinning{
          font-size: 0px;
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 3px solid rgba(255,255,255,0);
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      border-bottom: 3px solid #fff;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .primaryButton.white, .cardFooterButton.white{
      background-color: #fff;
      border: 2px solid #fff;
      color: #5a70ce;
      font-weight: bold;
  }
  
  .primaryButton.white{
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }

  .getNotificationsBtn{
      height: 20px !important;
      line-height: 1px !important;
      padding-left: 5px !important;
      font-size: 10px !important;
      padding-right: 5px !important;
      margin-right: 15px !important;
  }
  
  .sliderButton{
      height: 38px;
      line-height: 34px;
      background: #fdfdfd;
      margin-left: 15px;
      margin-right: 15px;
      color: #52596f;
      cursor: pointer;
      font-family: 'modern';
      padding-bottom: 20px;
      border-radius: 30px;
      border: 1px solid #c9c9c9;
      min-width: 130px;
      padding-right: 20px;
      font-size: 11px;
      padding-left: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
  }
  
  .sliderButton.active, .sliderButton:hover{
      color: #fff;
      background: #5a67a9;
      font-weight: bold;
      border: 1px solid #5a67a9;
  }
  
  .primaryButton{
      color: #fff;
      text-align: center;
      position: relative;
      z-index: 2;
      letter-spacing: 1px;
      text-transform: uppercase;
      line-height: 24px;
      min-width: 160px;
      max-width: 1100px;
      padding-left: 30px;
      padding-right: 30px;
      cursor: pointer;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 15px;
      border-radius: 2px;
      background-color: #5a67a9;
      border: 2px solid #5a67a9;
      font-family: 'Montserrat';
      font-weight: bold;
  }
  
  .primaryButton p, .cardFooterButton p {
      font-family: 'Montserrat';
  }
  
  .cardFooterButton{
      color: #fff;
      text-align: center;
      position: relative;
      font-family: 'Montserrat';
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding-left: 10px;
      padding-right: 10px;
      cursor: pointer;
      font-size: 11px;
      border-radius: 3px;
      background-color: #5a67a9;
      border: 1px solid #5a67a9;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
  }
  
  .cardFooterButton.inactive{
      background-color: #f3f5f7;
      border: 1px solid #f3f5f7;
      color: #b1b2b5;
  }
  
  .cardFooterButton.inactive:hover{
      background-color: #f3f5f7;
      border: 1px solid #f3f5f7;
      color: #b1b2b5;
  }
  
  .cardFooterButton.spinning{
      font-size: 0px;
      height: 36px;
      width: 36px;
      max-width: 36px;
      max-height: 36px;
      min-width: 36px;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #2d59d6;
      border-top: 2px solid #2d59d6;
      border-bottom: 2px solid #2d59d6;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
  }
  
  .cardFooterButton.inactive.outline.spinning, .primaryButton.inactive.outline.spinning{
      font-size: 0px;
      height: 36px;
      width: 36px;
      max-width: 36px;
      max-height: 36px;
      min-width: 36px;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #9ca4b7;
      border-top: 2px solid #9ca4b7;
      border-bottom: 2px solid #9ca4b7;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
  }
  
  .cardFooterButton.white.warning.spinning{
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #c34e4e;
      border-top: 2px solid #c34e4e;
      border-bottom: 2px solid #c34e4e;
  }
  
  .secondaryButton{
          color: #fff;
      text-align: center;
      text-transform: uppercase;
      position: relative;
      letter-spacing: 1px;
      line-height: 24px;
      padding-left: 15px;
      padding-right: 15px;
      cursor: pointer;
      padding-top: 4px;
      font-weight: bold;
      padding-bottom: 4px;
      font-size: 11px;
      border-radius: 2px;
      background-color: #5a67a9;
      border: 2px solid #5a67a9;
      font-family: 'Montserrat';
  }
  
  .secondaryButton.white{
      background-color: #fff;
      border: 2px solid #fff;
      color: #5377de;
      font-weight: bold;
      -webkit-box-shadow: 0px 1px 3px 0px #d6d3d3;
      -moz-box-shadow: 0px 1px 3px 0px #d6d3d3;
      box-shadow: 0px 1px 3px 0px #d6d3d3;
  }
  
  .secondaryButton.spinning{
      font-size: 0px;
      height: 35px;
      width: 35px;
      max-width: 35px;
      max-height: 35px;
      min-width: 35px;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #2d59d6;
      border-top: 2px solid #2d59d6;
      border-bottom: 2px solid #2d59d6;
      background-color: rgba(255,255,255,0);
      border-radius: 100%;
      animation: spinning 0.65s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 0.65s linear infinite;
      -webkit-animation-delay: 0.3s;
      cursor: initial;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  .checkmarkCard:hover, .bigIcon.pointer:hover, .mediumIcon.pointer:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
  }
  
  .secondaryButton.white:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
      background-color: #fff;
      border: 2px solid #fff;
      color: #5377de;
      font-weight: bold;
      -webkit-box-shadow: 0px 1px 3px 0px #d6d3d3;
      -moz-box-shadow: 0px 1px 3px 0px #d6d3d3;
      box-shadow: 0px 1px 3px 0px #d6d3d3;
  }

  .cardHeaderButtonNoResize{
    position: absolute;
    right: 15px;
    top: 22px;
    font-size: 14px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    letter-spacing: 1px;
    line-height: 24px;
    cursor: pointer;
    font-weight: 400;
    font-family: 'roboto';
    border-radius: 2px;
    border: 2px solid #fff;
    background-color: #fff;
    color: #2e3a62;
    -webkit-box-shadow: 0px 1px 3px 0px #c1c2cc;
    -moz-box-shadow: 0px 1px 3px 0px #c1c2cc;
    box-shadow: 0px 1px 3px 0px #c1c2cc;
}

.cardHeaderButtonNoResize.active{
    background-color: #41548f;
    color: #fff;
    border: 2px solid #435590;
}
  
  .cardHeaderButton{
      position: absolute;
      right: 15px;
      top: 22px;
      font-size: 14px;
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 30px;
      padding-right: 8px;
      text-align: center;
      letter-spacing: 1px;
      line-height: 24px;
      cursor: pointer;
      font-weight: 400;
      font-family: 'roboto';
      border-radius: 2px;
      border: 2px solid #fff;
      background-color: #fff;
      color: #2e3a62;
      -webkit-box-shadow: 0px 1px 3px 0px #c1c2cc;
      -moz-box-shadow: 0px 1px 3px 0px #c1c2cc;
      box-shadow: 0px 1px 3px 0px #c1c2cc;
  }
  
  .cardHeaderButtonDropdown{
      opacity: 0;
      visibility: hidden;
      top: 55px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: 10px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .cardHeaderButtonDropdownOption, .toolbarButtonDropdownOption{
      font-size: 16px;
      color: #52596f;
      cursor: pointer;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-bottom: 15px;
  }
  
  .cardHeaderButtonDropdownOption p, .toolbarButtonDropdownOption p{
      font-family: 'roboto';
      font-weight: 400;
  }
  
  .cardHeaderButtonDropdownOption .inline-label{
      line-height: 34px;
      font-size: 16px;
  }
  
  .cardHeaderButtonDropdown.active{
          opacity: 1;
      visibility: visible;
      top: 70px;
  }
  
  .cardHeaderButtonDropdown::after {
      content: "";
      position: absolute;
      bottom: 100%;
      top: auto;
      left: 80%;
      margin-left: -16px;
      border-width: 11px;
      border-style: solid;
      border-color: transparent transparent #e5e6ef transparent;
  }
  
  .cardHeaderButton.lessPaddingLeft{
      padding-left: 8px;
  }
  
  #tapFilterData_registrations, #tapFilterData_membership, #tapFilterData_applications, #tapFilterData_line_items, #tapFilterData_member_invoices, #tapFilterData_email_list,  #tapFilterData_transactions{
      right: 125px;
  }
  
  .cardHeaderButton .buttonIcon{
      position: absolute;
      left: 4px;
      top: 5px;
  }

  .cardHeaderButton .buttonIcon.filterIcon{
    top: 3px;
  }

  .cardHeaderButton .buttonIcon.emailIcon{
    top: 2px;
  }
  
  .cardHeaderButton.spinning{
      opacity: 0.5;
  }
  
  .cardHeaderButton.active{
      background-color: #41548f;
      color: #fff;
      border: 2px solid #435590;
  }
  
  .searchBarButton{
      font-size: 12px;
      padding-left: 12px;
      padding-right: 12px;
      text-align: center;
      letter-spacing: 1px;
      line-height: 24px;
      cursor: pointer;
      font-weight: bold;
      font-family: 'modern';
      border-radius: 2px;
      border: 2px solid #fff;
      background-color: #fff;
      color: #5377de;
      font-family: 'Montserrat';
      text-transform: uppercase;
      -moz-box-shadow: 0px 1px 3px 0px #c1c2cc;
      box-shadow: 0px 1px 3px 0px #c1c2cc;
  }
  
  .searchBarButtonDropdown{
      opacity: 0;
      visibility: hidden;
      top: 35px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: -5px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .cardFooterPopover{
      opacity: 0;
      visibility: hidden;
      bottom: 35px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: -5px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .searchBarButtonDropdownOption, .cardFooterPopoverOption, .dropdownOption{
      font-size: 18px;
      color: #52596f;
      font-weight: bold;
      cursor: pointer;
       padding: 10px;
  }

  .tableRowDropdownOption{
      font-size: 18px;
      color: #52596f;
      font-weight: bold;
      cursor: pointer;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
  }

  tr .tableRowDropdownOption p{
    color: #52596f;
  }
  
  .searchBarButtonDropdown.active{
      opacity: 1;
      visibility: visible;
      top: 52px;
  }
  
  .drilldownHeaderDropdown.active{
      opacity: 1;
      visibility: visible;
      top: 191px;
  }

  .tableRowDropdown.active{
      display: block;
      position: fixed;
      transform: translate(-112%,-50%) !important;
  }
  
  .cardFooterPopover.active{
      opacity: 1;
      visibility: visible;
      bottom: 64px;
  }
  
  .searchBarButtonDropdown::after, .drilldownHeaderDropdown::after {
      content: "";
      position: absolute;
      bottom: 100%;
      top: auto;
      left: 70%;
      margin-left: -16px;
      border-width: 11px;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
  }

  .tableRowDropdown::after {
      content: "";
    position: absolute;
    bottom: 50%;
    top: auto;
    right: -20px;
    left: auto;
    transform: translateY(10px);
    /* margin-left: -16px; */
    border-width: 11px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  /*
  .tableRowDropdown::after {
      content: "";
      position: absolute;
      bottom: 100%;
      top: auto;
      left: 85%;
      margin-left: -16px;
      border-width: 11px;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
  }

  .tableRowDropdown.first::after, .tableRowDropdown.near_top::after{
      content: "";
      position: absolute;
      right: -20px;
      left: auto;
      bottom: 7px;
      top: auto;
      border-color: transparent transparent transparent #fff;
  }

  .tableRowDropdown.last::after, .tableRowDropdown.near_bottom::after{
      content: "";
      position: absolute;
      right: -20px;
      left: auto;
      bottom: 10px;
      top: auto;
      border-color: transparent transparent transparent #fff;
  }

  .tableRowDropdown.last::after{
      bottom: 18px !important;
  }

  */

  
  .searchBarButtonDropdown::after, .drilldownHeaderDropdown::after {
      left: 88%;
  }
  
  .cardFooterPopover::after {
      content: "";
      position: absolute;
      top: 100%;
      bottom: auto;
      left: 70%;
      margin-left: -16px;
      border-width: 11px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
  }
  
  .exportIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/exportIcon.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
      height: 20px;
      width: 20px;
  }
  
  .settingsIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/settings-icon.png);
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: 3px;
      background-size: 16px;
      height: 22px;
      width: 22px;
      opacity: 0.85;
  }
  
  .columnsIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/columns-icon.png);
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: 4px;
      background-size: 18px;
      height: 22px;
      width: 20px;
  }
  
  /*
  .editIcon{
      height: 20px;
      width: 20px;
      background-color: #333;
      border-radius: 100%;
      overflow: hidden;
      position: relative;
  }
  
  .editIconInner{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      cursor: pointer;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/editIcon.png);
  }
  */
  
  .notesIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/notesIcon.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 15px;
      height: 20px;
      width: 20px;
  }
  
  .rotateIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/rotateIcon.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 15px;
      height: 20px;
      width: 20px;
  }
  
  .filterIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/filterIcon.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px;
      height: 20px;
      width: 20px;
      background-position-y: 6px;
  }

  .plusIcon{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/imageSingle_component-image_1579296180303);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    height: 20px;
    width: 20px;
    background-position-y: 6px;
}

  .emailIcon{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/imageSingle_component-image_1575317088292);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    height: 20px;
    width: 20px;
    background-position-y: 6px;
}  

  .bullhornIcon{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/imageSingle_component-image_1606844948928);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    height: 20px;
    width: 20px;
    background-position-y: 6px;
    margin-top: -4px;
  }
  .cardHeaderButton.active .filterIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/filterIcon-active.png);
  }
  
  .cardHeaderButton:hover, .searchBarButton:hover{
       -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
      -webkit-box-shadow: 0px 1px 3px 1px #c1c2cc;
      -moz-box-shadow: 0px 1px 3px 1px #c1c2cc;
      box-shadow: 0px 1px 3px 1px #c1c2cc;
  }
  
  .primaryButton.inactive, .secondaryButton.inactive{
      background-color: #c1c7ca;
      border: 2px solid #c1c7ca;
  }
  
  .primaryButton.inactive:hover, .secondaryButton.inactive:hover{
      background-color: #c1c7ca;
      border: 2px solid #c1c7ca;
  }
  
  .primaryButton:hover, select:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
      -webkit-box-shadow: 1px 2px 5px 1px #d6d3d3;
      -moz-box-shadow: 1px 2px 5px 1px #d6d3d3;
      box-shadow: 1px 2px 5px 1px #d6d3d3;
  }
  
  .primaryButton.noBoxShadow{
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }
  
  /* --------------- toolbar buttons ----------------- */
  
  .toolbarButton{
      background-color: rgba(255,255,255,0);
      border: 1px solid #d5dbe4;
      padding-top: 18px;
      padding-bottom: 18px;
      padding-left: 34px;
      padding-right: 34px;
      font-size: 14px;
      color: #52596f;
      font-family: 'Montserrat';
      font-weight: bold;
      text-transform: uppercase;
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      -webkit-box-shadow: none !important;
          -moz-box-shadow: none !important;
          box-shadow: none !important;
  }
  
  .toolbarButton:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
  }
  
  .toolbarButton.hasIcon{
      padding-left: 48px;
  }
  
  .toolbarButton.hasIcon-right{
      padding-right: 48px;
  }
  
  .toolbarButton .buttonIcon{
      position: absolute;
      left: 18px;
      top: 17px;
  }
  
  .toolbarButton .buttonIcon-right{
      position: absolute;
      right: 20px;
      top: 17px;
  }
  
  .toolbarButtonWrap{
      position: relative;
  }
  
  .toolbarButtonDropdown{
      opacity: 0;
      visibility: hidden;
      top: 55px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: 10px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .toolbarButtonDropdown.reversed{
      left: 10px;
      right: auto;
  }
  
  .toolbarButtonDropdownOption{
      font-size: 18px;
       min-width: 200px;
  }
  
  .toolbarButtonDropdown.active{
          opacity: 1;
      visibility: visible;
      top: 70px;
  }
  
  .toolbarButtonDropdown::after {
      content: "";
      position: absolute;
      bottom: 100%;
      top: auto;
      left: 85%;
      margin-left: -16px;
      border-width: 11px;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
  }
  
  .toolbarButtonDropdown.reversed::after{
      left: 15%;
  }
  
  .toolbarButton.primary{
      background-color: #fff;
      border: 1px solid #d5dbe4;
  }
  
  .toolbarButton.primary .applicationStatusInsert, .toolbarButton.primary .checkinStatusInsert {
          padding-left: 10px;
      margin-left: 10px;
      border-left: 1px solid #c2c9d6;
  }
  
  /* --------------- custom ui datepicker styles ----------------- */
  
  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
      border: 1px solid #464754 !important;
      background: #464754 !important;
      font-weight: normal !important;
      color: #fff !important;
  }
  
  .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
    border: 1px solid #999 !important;
      background: #e0e0e0 !important;
      color: #333 !important;
  }
  
  .ui-datepicker .ui-datepicker-header{
    position: relative !important;
      padding: .2em 0 !important;
      background-color: #f1f1f1 !important;
      border-radius: 1px !important;
      font-family: 'modern' !important;
      letter-spacing: 2px !important;
  }
  
  /*
  .ui-widget-header .ui-icon {
      background-image: url("../images/ui-icons_444444_256x240.png") !important;
  }
  */
  
  #ui-datepicker-div{
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    border: none !important;
  }
  
  .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
      width: 38% !important;
      height: 35px;
      margin: 5px !important;
      font-family: 'modern' !important;
  }
  
  /*------------------------------ table views ---------------------------- */
  
  .table-view-row, .tableRow.bigger td{
      padding-top: 25px;
      padding-bottom: 25px;
      padding-left: 30px;
      padding-right: 30px;
      font-size: 20px;
      line-height: 28px;
      background: #fff;
      border-top: 1px solid #eef3f3;
      -webkit-transition: border 0.25s ease-in-out;
      -moz-transition: border 0.25s ease-in-out;
      -ms-transition: border 0.25s ease-in-out;
      -o-transition: border 0.25s ease-in-out;
  }
  
  .table-view-row.active, .table-view-row.active:hover{
      border-top: 8px solid #e8edf1;
      background-color: #fff !important;
  }
  
  .table-view-row .fadeOutOnActive{
      visibility: visible;
      opacity: 1;
  }
  
  .table-view-row.active .fadeOutOnActive{
      visibility: hidden;
      opacity: 0;
  }
  
  .table-view.tighter .table-view-row p{
      font-size: 16px;
      line-height: 24px;
      padding-top: 2px;
      padding-bottom: 2px;
  }
  
  .table-view.tighter .table-view-row{
      padding-top: 8px;
      padding-bottom: 8px;
  }
  
  /*
  .table-tap-cell{
      font-weight: bold;
      color: #262d61;
      font-size: 16px;
      line-height: 34px;
  }
  */
  
  .table-view-row.pointer:hover, tr.pointer:hover{
      background-color: #f8f9fb;
  }

  tr.darker{
    background-color: #f9fbfd;
  }

  .tap-circle{
         padding-right: 9px;
      display: inline-block;
      padding-left: 9px;
      font-weight: bold;
      font-family: 'Montserrat';
      text-transform: uppercase;
      border-radius: 24px;
      font-size: 11px !important;
      padding-top: 1px;
      padding-bottom: 1px;
      line-height: 24px;
      background-color: #e1e7ea;
      color: #46505d;
      white-space: nowrap;
      margin-top: 2px;
  }
  
  p.tap-circle.incomplete{
      color: #46505d !important;
  }
  
  .tap-circle.good{
      background-color: #c6f1c6 !important;
      color: #105619 !important;
  }
  
  .tap-circle.blue{
      background-color: #d9eefd !important;
      color: #3f538e !important;
  }
  
  .tap-circle.bad{
      /*
      background-color: #f7f4cd !important;
      color: #8e2222 !important;
      */
      background-color: #f3f4f5 !important;
      color: #8e3822 !important;
  }
  
  .fadeInOnActive, .fadeOutOnActive{
      -webkit-transition: all 0.25s ease-in-out !important;
      -moz-transition: all 0.25s ease-in-out !important;
      -ms-transition: all 0.25s ease-in-out !important;
      -o-transition: all 0.25s ease-in-out !important;
  }
  
  .table-view-row .fadeInOnActive{
      position: absolute;
      top: 10px;
      left: 30%;
      right: 5%;
      min-height: 70px;
      padding-right: 40px;
      visibility: hidden;
      opacity: 0;
  }
  
  .table-view.tighter .table-view-row .fadeInOnActive{
      top: 3px;
  }
  
  .table-view.tighter .table-view-row .fadeInOnActive button{
      margin-top: 0px !important;
  }
  
  .table-view-row .fadeInOnActive button{
      background-color: rgba(255,255,255,0);
      border: 1px solid #5280fe;
      box-shadow: none;
      font-size: 11px;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 0px;
      color: #2f5bd6;
      font-weight: bold;
      margin-top: 8px;
      margin-right: 12px;
  }
  
  .table-view-row .fadeInOnActive button.spinning{
      min-height: 40px;
      height: 40px;
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      max-height: 40px;
  }
  
  .table-view-row.active .fadeInOnActive{
      opacity: 1;
      visibility: visible;
  }
  
  .table-view-row-content-body{
      background-color: #f1f5f9;
      margin-left: -30px;
      margin-right: -30px;
      margin-bottom: -25px;
      margin-top: 10px;
      border-top: 1px solid #e4ebf1;
      cursor: default;
      padding-top: 8px;
      padding-bottom: 15px;
      padding-right: 0px;
      padding-left: 0px;
      display: block;
      cursor: initial;
  }
  
  .table-view-row-header .drag-handle{
      margin-right: 17px;
      height: 24px;
      width: 24px;
      margin-left: -20px;
      min-width: 24px;
  }
  
  .table-view-row-content-body-inner{
      /*/
      padding-left: 40px;
      padding-right: 40px;
      */
      padding-top: 20px;
      padding-bottom: 30px;
      background: #fff;
      border-radius: 5px;
      margin-top: 0px;
      margin-bottom: 10px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
  }
  
  .draggable-container, .draggable-element{
      outline: none;
  }
  
  /*---------------- small table views (used for drag and drop lists, mobile width) ------------ */
  
  .table-view-row-smaller{
     background-color: #fff;
      padding: 15px;
      box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
      -moz-box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
      -webkit-box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
      cursor: pointer;
      outline: none;
      z-index: 10;
  }
  
  .table-view-row-smaller:hover{
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
  }
  
  .table-view-row-smaller p, .table-view-row-smaller p{
      font-weight: bold;
      font-size: 15px;
      line-height: 22px;
      margin-left: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  /*------------------------------ accordions ---------------------------- */
  
  .accordionSection{
      margin-bottom: 20px;
      border-radius: 3px;
      overflow: hidden;
  }
  
  .accordionBody{
      display: none;
      background-color: #fff;
      padding: 35px;
  }
  
  .accordionBody ul{
      margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    font-weight: 200;
    line-height: 30px;
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    color: #525e6b;
    margin-bottom: 15px;
  }
  
  .accordionHeader{
      background-color: #fff;
      cursor: pointer;
      padding: 25px;
      position: relative;
      color: #ddd;
      color: #4a5867;
  }
  
  .accordionToggle{
      font-size: 28px;
      position: absolute;
      left: 18px;
      top: 26px;
      font-weight: 200;
  }
  
  .accordionHeader.active{
      color: #fff;
      background-color: #4c58a7;
  }
  
  .accordionHeader h2{
          font-family: 'modern';
      padding-left: 25px;
      line-height: 36px;
      font-size: 22px;
      font-weight: bold;
  }
  
  .accordionHeader.active .accordionToggle{
       -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      font-weight: bold;
  }
  
  /*------------------------------ update-billing and update-billing-locked ---------------------------- */
  
  #updateBillingWrap{
      opacity: 0;
      visibility: hidden;
  }
  
  .showBilling #updateBillingWrap{
      opacity: 1;
      visibility: visible;
  }
  
  /*------------------------------ pricing ---------------------------- */
  
  .pricingProductImage{
      top: 100px;
      width: 100%;
      right: -25%;
      bottom: -40px;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/productImageIphone.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
      position: absolute;
  }
  
  /*------------------------------ homepage ---------------------------- */
  
  .hpIndexCard{
      width: 80%;
      margin-top: 35px;
      max-width: 1200px;
  }
  
  .crossSectionWrap{
      margin-left: auto;
      margin-right: auto;
      max-width: 1050px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
  }

  .crossSectionWrap.reservations-version{
    padding-top:60px;
    min-height:60%;
    max-width:1200px;
    width: 95%;
  }
  
  .hpProductImage{
      top: 150px;
      width: 100%;
      right: -50%;
      bottom: 50px;
      /*background-image: url(https://d282wvk2qi4wzk.cloudfront.net/hpProductImage.png);*/
      /*background-image: url('https://d282wvk2qi4wzk.cloudfront.net/hpProductImage-2.png');*/
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/hpProductImage-3.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position-x: left;
      background-position-y: center;
      position: absolute;
  }
  
  .hpProductImage.membership{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/screen-shot-membership.png);
  }
  
  .hpProductImage.web{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/product-image-web.png);
  }

  .hpProductImage.socials{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/product-image-socials.png);
  }

  .hpProductImage.booking{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/product-image-booking-2.png);
  }
  .hpProductImage.pos{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/product-image-pos-2.png);
  }
  
  .crossSection{
      min-height: 400px;
      min-width: 280px;
  }
  
  .crossSectionTextWrap{
      padding-top: 130px;
      padding-bottom: 180px;
      max-width: 470px;
      padding-left: 50px;
      /*
      margin-right: -90px !important;
      */
  }

  .crossSectionTextWrap.reservations-version{
      display: initial !important;
      max-width: 700px !important;
      margin-right: 0px !important;
      width: 60% !important;
  }
  
  .crossSectionTextWrap.micro-site-version{
      padding-right: 50px;
      max-width: 450px;
      margin-right: 50px;
      padding-top: 60px;
  }
  
  .crossSection.micro-site-version{
      max-width: 450px;
  }
  
  .crossSectionWrap h3{
      line-height: 44px;
      text-transform: uppercase;
      font-family: 'Montserrat';
      color: #4c58a7;
      font-weight: bolder;
      font-size: 16px;
  }
  
  .crossSectionWrap h4{
      /*
      font-weight: normal;
      font-size: 22px;
      line-height: 32px;
      color: #122947;
      */
         font-size: 20px;
      line-height: 32px;
      color: #5f7288;
      font-weight: bold;
  }
  
  .crossSectionTextWrap.centered{
      padding-left: 0px;
      text-align: center;
      margin-right: 0px !important;
      max-width: 550px;
  }
  
  .crossSectionTextWrapMobile{
      display: none;
      /* border-top: 1px solid #eee; */
      padding-top: 30px;
      padding-bottom: 60px;
      padding-left: 40px;
      padding-right: 40px;
      margin: 0px !important;
  }
  
  .indexCardImage{
      min-width: 280px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 280px;
  }
  
  /*------------------------- triangles -------------------- */
  
  .triangleWrap{
      position: absolute;
      left: 0;
      right: 0;
      bottom: -20px;
      height: 40px;
      display: block;
      opacity: 1;
  }
  
  .triangleWrap.top{
      position: absolute;
      left: 0;
      right: 0;
      top: -20px;
      height: 40px;
      display: block;
      opacity: 1;
  }
  
  .triangleWrap .triangle.fa{
      background-color: #fafafa;
  }
  
  .triangleWrap .triangle{
      background-color: #fff;
      height: 40px;
      width: 40px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
  }
  
  /*------------------------ calendars --------------------- */
  
  .calendarCell{
      min-width: 14.1%;
      max-width: 14.2%;
      text-align: left;
      height: 100px;
      padding-top: 8px;
      padding-bottom: 8px;
  }
  
  .calendarCell.borderBottom{
      border-bottom: 1px solid #e2e8e8;
  }
  
  .calendarCell.borderRight{
      border-right: 1px solid #e2e8e8;
  }
  
  .calendarCell .dateNumber{
      padding-left: 8px;
      text-align: right;
      padding-right: 8px;
      font-weight: bold;
      color: #333;
  }
  
  .calendarCell.secondaryMonth .dateNumber{
      color: #999;
  }
  
  .calendarTitleInsert{
      min-width: 120px;
  }
  
  /*------------------------ panels --------------------- */
  
  .panelWrap{
      opacity: 0;
      visibility: hidden;
      position: fixed;
      background-color: rgba(255,255,255, 0.95);
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 15px;
      padding-right: 15px;
      font-family: 'modern';
      padding-top: 20px;
      padding-bottom: 100px;
      z-index: 110;
      box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 3px 4px 0px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      min-width: 290px;
      max-width: 400px;
      width: 90%;
      right: -400px;
      color: #111;
      top: 0px;
      bottom: 0px;
  }
  
  .panelWrap.active{
      opacity: 1;
      visibility: visible;
      right: 0px;
  }
  
  .panelSectionHeader{
          text-transform: uppercase;
      margin-bottom: 8px;
      margin-top: 20px;
      font-size: 18px;
      color: #52596f;
  }
  
  .panelSectionInsert{
          padding: 15px;
      background-color: #e8edf1;
      border: 1px solid #dbe0e2;
      border-radius: 2px;
  }
  
  .secondaryButton.panelButton{
          position: fixed;
      width: 290px;
      bottom: -80px;
      right: 15px;
      max-width: 400px;
      min-width: 280px;
      width: 90%;
      height: 44px;
      font-size: 12px;
  }
  
  .panelWrap.active .secondaryButton.panelButton, .secondaryButton.panelButton.show{
      bottom: 10px;
  }
  
  .panel-box-shadow{
      box-shadow: 0px 0px 20px #dbe0e4;
      box-shadow: 0px 0px 20px #dbe0e4;
      -webkit-box-shadow: 0px 0px 20px #dbe0e4;
      -moz-box-shadow: 0px 0px 20px #dbe0e4
  }
  
  /*------------------------ charge cards (and order summary for carts) --------------------- */
  
  .chargeCardTotalWrap{
      border-top: 1px solid #c3cad2;
      margin-top: 15px;
      padding-top: 5px;
  }
  
  .orderSummaryTotalWrap {
      border-top: 1px solid #e6eaec;
      margin-top: 5px;
      padding-top: 25px;
      padding-left: 10px;
      padding-right: 10px;
  }

  .orderSummaryTotalWrap.couponsDisplay{
    padding-bottom: 8px;
  }
  
  .order-summary-label{
      font-weight: bold;
      font-family: 'Montserrat';
      color: #2c323a;
      font-size: 16px;
  }
  
  .order-summary-value{
      font-weight: bold;
      font-size: 18px;
      line-height: 18px;
      color: #2c323a;
  }
  
  .order-summary-block{
      margin-top: 90px;
  }
  
  .order-summary-block.short-header{
      margin-top: 70px;
  }
  
  /*------------------------ dashboard --------------------- */
  
  .dashboardBody, .registerBody{
      overflow: hidden;
  }
  
  .dashboardBody .header{
      display: none;
  }
  
  .lineItemHeader{
      font-size: 20px;
      color: #3f528e;
      padding-top: 5px;
      padding-right: 10px;
      line-height: 20px;
      font-weight: bold;
  }

  .lineItemTotalFilter{
      font-weight: bold;
      font-size: 18px;
  }
  
  .panelHeader{
      margin-left: 20px;
      margin-bottom: 20px;
      margin-right: 20px;
      padding-top: 8px;
      padding-left: 5px;
      font-size: 18px;
      padding-bottom: 8px;
      background-color: rgba(255,255,255,0.5);
      padding-right: 8px;
      z-index: 10;
  }

  #accountPicker, #selectedCampHeader{
      margin-left: 0px;
      margin-bottom: 20px;
      margin-right: 20px;
      padding-top: 8px;
      padding-left: 5px;
      font-size: 18px;
      padding-bottom: 8px;
      padding-right: 8px;
      z-index: 10;
  }

  #accountPicker .dropdownArrow{
    margin-top: -10px;
  }

  .panelHeader.editor{
    padding-left: 35px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
    width: 190px;
  }
  
  .panelHeader h3{
      padding-left: 10px;
      color: #2a375f;
      font-size: 24px;
      line-height: 34px;
  }
  
  h3.login-header{
      color: #2a375f;
      font-size: 24px;
      line-height: 34px;
  }
  
  #tapAddClubAccount{
      margin-left: 20px;
      margin-bottom: 20px;
      margin-right: 20px;
      padding-top: 8px;
      padding-left: 5px;
      font-size: 18px;
      padding-bottom: 8px;
      background-color: rgba(255,255,255,0.5);
      padding-right: 5px;
      color: #0083bf;
      margin-top: 10px;
      font-weight: bold;
      cursor: pointer;
  }
  
  #tapAddClubAccount:hover, #selectedCampHeader:hover, .panelHeader:hover{
      background-color: rgba(255,255,255,0.9);
  }
  
  #accountPickerDropdown{
      visibility: hidden;
      opacity: 0;
      position: absolute;
      max-height: 0px;
      margin-top: -40px;
      right: 0px;
      left: 0px;
  }
  
  .flexibleLeftMenu.showAccountPicker #accountPickerDropdown{
          visibility: visible;
      opacity: 1;
      max-height: 10000px;
      margin-top: 0px;
      bottom: 0px;
      top: 95px;
      padding-top: 20px;
  }
  
  #leftMenuInner{
      visibility: visible;
      opacity: 1;
      top: 95px;
      bottom: 0px;
      padding-top: 10px;
      position: absolute;
      left: 0px;
      right: 0px;
  }
  
  .flexibleLeftMenu.showAccountPicker #leftMenuInner{
      visibility: hidden;
      opacity: 0;
      top: 150px;
  }
  
  .flexibleLeftMenu.showAccountPicker .dropdownArrow{
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
  }
  
  /*----------- left menu slider on dashboard AND /design -------- */
  .leftMenuSlider{
      width: 200%;
      height: 100%;
      margin-left: 0px;
  }
  
  .leftMenuSlider.drillDown{
      margin-left: -100%;
  }
  
  #leftMenu_default, .leftMenuSlider.drillDown #leftMenu_manageCamp{
      visibility: visible;
      opacity: 1;
  }
  
  .leftMenuSlider.drillDown #leftMenu_default, #leftMenu_manageCamp{
      visibility: hidden;
      opacity: 0;
  }
  
  .drillDownDisplay{
      visibility: hidden;
      opacity: 0;
  }
  
  .leftMenuSlider.drillDown .drillDownDisplay{
      visibility: visible;
      opacity: 1;
  }
  
  .leftMenuSlider > div{
      width: 50%;
      min-width: 50%;
      max-width: 50%;
  }
  
  /*-------- styles for overlapping components on /design menu --------- */
  
  #leftMenu_global-styles, #leftMenu_edit-component, #leftMenu_add-component, #leftMenu_edit-header, #leftMenu_edit-footer{
      display: none;
  }
  
  .global-styles #leftMenu_global-styles, .edit-component #leftMenu_edit-component, .add-component #leftMenu_add-component, .edit-footer #leftMenu_edit-footer, .edit-header #leftMenu_edit-header{
     display: inline-block;
  }
  
  /*---- end styles for overlapping components on /design menu ------- */
  
  #accountPickerDropdown .accountOption{
      padding-left: 15px;
      margin-bottom: 10px;
  }
  
  .tableCard{
      padding-top: 20px;
      padding-bottom: 20px;
      text-align: left;
  }
  
  .tableCard.noIcon{
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .tableCardBody{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .tableCard.active .tableCardBody{
      padding-top: 20px;
      margin-top: 20px;
      padding-bottom: 10px;
      margin-left: -20px;
      margin-right: -20px;
      margin-bottom: -20px;
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  .secondaryTableCard{
      background-color: #ffffff;
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 20px;
      border-top: 1px solid #e8edf1;
  }
  
  .secondaryTableCard .secondaryCardName{
      font-size: 16px;
      color: #333;
      text-transform: uppercase;
  }
  
  .managerCard{
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .managerCard .burgeeInsert{
      margin-left: 0px;
  }
  
  .nthClubCard, .nthTableCard, .nthCampCard{
      border-top: 3px solid #dee5f1;
  }

  .standardCardBody.fff .nthTableCard{
    border-top: 1px solid #dee5f1;
  }
  
  .tableCardBorderBottom{
      border-bottom: 3px solid #dee5f1;
  }
  
  #changeBurgeeDisplayZone{
      margin-left: 0px;
      margin-bottom: 20px;
      position: relative;
  }
  
  .statusText{
      font-weight: bold;
      color: #2e3a62;
      font-size: 22px;
      line-height: 24px;
      padding-left: 15px;
      text-align: right;
  }
  
  
  #addManagerStepOne{
      visibility: visible;
      opacity: 1;
      margin-top: 0px;
  }
  
  .stepTwo #addManagerStepOne{
      visibility: hidden;
      opacity: 0;
      margin-top: -60px;
  }
  
  #addManagerStepTwo{
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      overflow: hidden;
  }
  
  .stepTwo #addManagerStepTwo{
      visibility: visible;
      opacity: 1;
      max-height: initial;
  }
  
  .managerNameWrap, .coachNameWrap{
      overflow: hidden;
      padding-left: 3px;
      padding-right: 3px;
      padding-top: 4px;
      text-align: left;
  }
  
  /*------------- personal membership section (within the dashboard) -------- */
  
  #membershipDrilldown_personal_payments, #membershipDrilldown_personal_default, #membershipDrilldown_personal_add_billing_method{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .payments #membershipDrilldown_personal_payments, .default #membershipDrilldown_personal_default, .addBillingMethod #membershipDrilldown_personal_add_billing_method{
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- events section (within the dashboard) -------- */
  
  #eventsSubdisplay_regattas, #eventsSubdisplay_camps, #eventsSubdisplay_series{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .eventsSubdisplay_regattas #eventsSubdisplay_regattas, .eventsSubdisplay_camps #eventsSubdisplay_camps, .eventsSubdisplay_series #eventsSubdisplay_series {   
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- web section (within the dashboard) -------- */
  
  #webSubdisplay_pages, #webSubdisplay_design, #webSubdisplay_settings, #webSubdisplay_edit-page, #webSubdisplay_add-page{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .webSubdisplay_pages #webSubdisplay_pages, .webSubdisplay_design #webSubdisplay_design, .webSubdisplay_settings #webSubdisplay_settings, .webSubdisplay_edit-page #webSubdisplay_edit-page, .webSubdisplay_add-page #webSubdisplay_add-page {   
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- regattas section (within the dashboard) -------- */
  
  #regattasSubdisplay_default, #regattasSubdisplay_create, #regattasSubdisplay_create_success, #regattasSubdisplay_entryList, #entryListDrilldown_regattas_addEntry, #entryListDrilldown_regattas_refund, #entryListDrilldown_regattas_default, #entryListDrilldown_regattas_entryDetails, #regattasSubdisplay_classes, #entryListDrilldown_regattas_paymentAdjustment{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .regattasSubdisplay_default #regattasSubdisplay_default, .regattasSubdisplay_create #regattasSubdisplay_create, .regattasSubdisplay_create_success #regattasSubdisplay_create_success, .regattasSubdisplay_entryList #regattasSubdisplay_entryList, .entryListDrilldown_regattas_addEntry #entryListDrilldown_regattas_addEntry, .entryListDrilldown_regattas_refund #entryListDrilldown_regattas_refund, .entryListDrilldown_regattas_default #entryListDrilldown_regattas_default, .entryListDrilldown_regattas_entryDetails #entryListDrilldown_regattas_entryDetails, .regattasSubdisplay_classes #regattasSubdisplay_classes, .entryListDrilldown_regattas_paymentAdjustment #entryListDrilldown_regattas_paymentAdjustment {   
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- members section (within the dashboard) -------- */
  
  #membershipSubdisplay_members, #membershipSubdisplay_members_guest, #membershipSubdisplay_tiers, #membershipSubdisplay_add-category, #membershipSubdisplay_plans, #membershipSubdisplay_add-plan, #membershipSubdisplay_edit-plan, #membershipSubdisplay_membershipDetails, #membershipSubdisplay_checklist, #membershipSubdisplay_applicants, #membershipSubdisplay_settings, #membershipSubdisplay_add-custom-field, #membershipSubdisplay_edit-custom-field, #applicationDetailsDrilldown_applicant, #applicationDetailsDrilldown_timeline, #membershipDetailsDrilldown_member, #membershipDetailsDrilldown_payment, #membershipDetailsDrilldown_waivers, #membershipDetailsDrilldown_category-and-plan, #applicationDetailsDrilldown_category-and-plan, #applicationDetailsDrilldown_waivers, #membershipSubdisplay_add-sponsor, #membershipSubdisplay_sponsor-response, #membershipSubdisplay_applicationDetails, #membershipSubdisplay_member-payments, #applicationDetailsDrilldown_payment, #membershipSubdisplay_add-member{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .members #membershipSubdisplay_members, .members_guest #membershipSubdisplay_members_guest, .tiers #membershipSubdisplay_tiers, .add-category #membershipSubdisplay_add-category, .plans #membershipSubdisplay_plans, .add-plan #membershipSubdisplay_add-plan, .edit-plan #membershipSubdisplay_edit-plan, .membershipDetails #membershipSubdisplay_membershipDetails, .checklist #membershipSubdisplay_checklist, .applicants #membershipSubdisplay_applicants, .settings #membershipSubdisplay_settings, .add-custom-field #membershipSubdisplay_add-custom-field, .membershipDetailsDrilldown_member #membershipDetailsDrilldown_member, .membershipDetailsDrilldown_waivers #membershipDetailsDrilldown_waivers, .membershipDetailsDrilldown_category-and-plan #membershipDetailsDrilldown_category-and-plan, .membershipDetailsDrilldown_payment #membershipDetailsDrilldown_payment, .edit-custom-field #membershipSubdisplay_edit-custom-field, .applicationDetailsDrilldown_applicant #applicationDetailsDrilldown_applicant, .applicationDetailsDrilldown_category-and-plan #applicationDetailsDrilldown_category-and-plan, .applicationDetailsDrilldown_timeline #applicationDetailsDrilldown_timeline, .applicationDetailsDrilldown_waivers #applicationDetailsDrilldown_waivers, .add-sponsor #membershipSubdisplay_add-sponsor, .applicationDetailsDrilldown_payment #applicationDetailsDrilldown_payment, .sponsor-response #membershipSubdisplay_sponsor-response, .applicationDetails #membershipSubdisplay_applicationDetails, .member-payments #membershipSubdisplay_member-payments, .add-member #membershipSubdisplay_add-member{
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- club settings section (within the dashboard) -------- */
  
  #clubSettingsSubdisplay_billing, #clubSettingsSubdisplay_edit-administrator, #clubSettingsSubdisplay_administrators, #clubSettingsSubdisplay_payments, #clubSettingsSubdisplay_basics {
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .billing #clubSettingsSubdisplay_billing, .edit-administrator #clubSettingsSubdisplay_edit-administrator, .administrators #clubSettingsSubdisplay_administrators, .payments #clubSettingsSubdisplay_payments, .basics #clubSettingsSubdisplay_basics{
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  /*------------- camps section (within the dashboard) -------- */
  
  #standardCampCard, #createCampCard, #manageCampWrap, #campSettingsWrap_registration, #editCustomFieldWrap, #campsSubdisplay_add-custom-field, #editCustomFieldWrap_editDropdownOption, #campAccountingDisplay, #successfulCampCreationCard, #campClassesCard, #addCampClassWrap, #campEntryListWrap, #campMerchWrap, #campWaiversWrap, #campMerchDisplay, #campCommunicationWrap, #campCouponsWrap, #campChecklistCard, #campCoachesCard, #addCoachWrap, #editClassWrap, #editSubclassWrap, #editMemberDiscountWrap, #campSessionsDisplay, #waiverWrap_uploads, #waiverWrap_waiverDrilldown, #waiverWrap_signatureRequests, #waiverWrap_editWaiverRecipients, #merchWrap_merchOrders, #merchWrap_merchList, #merchWrap_individualOrder, #merchWrap_editMerchObject, #merchWrap_editMerchOption, #sessionDisplay_editSession, #sessionDisplay_specialPricing, #sessionDisplay_default, #couponsDisplay_default, #couponsDisplay_editCoupon, #registrationDrilldown_waivers, #registrationDrilldown_default, #registrationDrilldown_payments, #registrationDrilldown_merchOrder, #registrationDrilldown_payments_new, #registrationDrilldown_participant, #entryListDrilldown_entryDetails, #entryDetailsDrilldown_participant, #entryDetailsDrilldown_related, #entryListDrilldown_paymentAdjustment, #entryDetailsDrilldown_waivers, #entryListDrilldown_default, #entryDetailsDrilldown_payment, #entryDetailsDrilldown_class-and-session, #entryListDrilldown_sessions, #entryListDrilldown_addEntry{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .standardCampDisplay #standardCampCard, .createCamp #createCampCard, .successfulCampCreation #successfulCampCreationCard, .manageCamps_classes #campClassesCard, .manageCamps_classes #addCampClassWrap, .manageCamps_sessions #campSessionsDisplay, .manageCamps_accounting #campAccountingDisplay, .manageCamps_coupons #campCouponsWrap, .manageCamps_settings #manageCampWrap, .manageCamps_registration #campSettingsWrap_registration, .manageCamps_editCustomField #editCustomFieldWrap, .manageCamps_add-custom-field #campsSubdisplay_add-custom-field, .manageCamps_editCustomFieldDropdownOption #editCustomFieldWrap_editDropdownOption, .manageCamps_entryList #campEntryListWrap, .manageCamps_waivers #campWaiversWrap, .manageCamps_merch #campMerchWrap, .manageCamps_communication #campCommunicationWrap, .manageCamps_checklist #campChecklistCard, .manageCamps_coaches #campCoachesCard, .manageCamps_coaches #addCoachWrap, .manageCamps_editClass #editClassWrap, .manageCamps_editSubclass #editSubclassWrap, .manageCamps_editMemberDiscount #editMemberDiscountWrap, .waiverDrilldown_waiverDrilldown #waiverWrap_waiverDrilldown, .waiverDrilldown_uploads #waiverWrap_uploads, .waiverDrilldown_signatureRequests #waiverWrap_signatureRequests, .waiverDrilldown_editRecipients #waiverWrap_editWaiverRecipients, .merchDrilldown_merchList #merchWrap_merchList, .merchDrilldown_individualOrder #merchWrap_individualOrder, .merchDrilldown_merchOrders #merchWrap_merchOrders, .merchDrilldown_editMerchObject #merchWrap_editMerchObject, .merchDrilldown_editMerchOption #merchWrap_editMerchOption, .sessionDrilldown_editSession #sessionDisplay_editSession, .sessionDrilldown_specialPricing #sessionDisplay_specialPricing, .sessionDrilldown_default #sessionDisplay_default, .couponsDrilldown_default #couponsDisplay_default, .couponsDrilldown_editCoupon #couponsDisplay_editCoupon, .registrationDrilldown_waivers #registrationDrilldown_waivers, .registrationDrilldown_default #registrationDrilldown_default, .registrationDrilldown_payments #registrationDrilldown_payments, .registrationDrilldown_merchOrder #registrationDrilldown_merchOrder, .registrationDrilldown_payments_new #registrationDrilldown_payments_new, .registrationDrilldown_participant #registrationDrilldown_participant, .entryListDrilldown_entryDetails #entryListDrilldown_entryDetails, .entryListDrilldown_paymentAdjustment #entryListDrilldown_paymentAdjustment, .entryDetailsDrilldown_participant #entryDetailsDrilldown_participant, .entryDetailsDrilldown_related #entryDetailsDrilldown_related, .entryListDrilldown_addEntry #entryListDrilldown_addEntry, .entryDetailsDrilldown_waivers #entryDetailsDrilldown_waivers, .entryListDrilldown_default #entryListDrilldown_default, .entryDetailsDrilldown_payment #entryDetailsDrilldown_payment, .entryDetailsDrilldown_class-and-session #entryDetailsDrilldown_class-and-session, .entryListDrilldown_sessions #entryListDrilldown_sessions{
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  .manageCamps_coaches #addCoachWrap{
      margin-top: 20px;
  }
  
  .showIfWaiversEnabled, .waiversEnabled .showIfWaiversDisabled, .showIfWebEnabled, .webEnabled .showIfWebDisabled{
      display: none;
  }
  
  .waiversEnabled .showIfWaiversEnabled, .webEnabled .showIfWebEnabled{
      display: block;
  }
  
  /*-------------------- new view routing ----------------------------------- */
  
  .view {
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .view.active {
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
  }
  
  .view_loading.active{
      min-height: 75vh;
  }
  
  /*--------------------- membership section (dashboard) ---------------------- */
  
  .sponsorResponseWrap{
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #f7f9fb;
      border-top: 1px solid #dee3e8;
  }
  
  .drilldownHeaderImageInsert.morePadding{
      padding-left: 20px;
  }
  
  .drilldownHeaderImageInsert .bigIcon{
      min-width: 58px;
      height: 58px;
      min-height: 58px;
      width: 58px;
      max-width: 58px;
      max-height: 58px;
      margin-top: -4px;
      margin-right: 5px;
      margin-right: 5px;
      margin-left: 5px;
      background-color: #fff;
  }
  
  .memberNumberInsert{
      font-size: 15px;
      padding-top: 2px;
      color: #456cda;
      font-weight: bold;
      text-transform: uppercase;
      padding-left: 10px;
      padding-right: 15px;
      font-family: 'Montserrat';
      line-height: 13px;
      border-left: 1px solid #7d8792;
      margin-left: 10px;
      text-decoration: underline;
  }
  
  .memberNumberInsert.no-edit{
      font-size: 13px;
      padding-top: 2px;
      color: #6e7885;
      font-weight: bold;
      text-transform: uppercase;
      text-decoration: none;
      padding-top: 3px;
  }
  
  /*------------------------------------ hiding and displaying content blocks on /register (and apply, and membership) --------------------------------- */
  
  #display_register_overview, #display_register_participant, #display_register_entry, #display_register_payment, #display_register_teammates, #display_register_sessions, #display_register_membership, #display_register_success, #display_register_merch, #subclassesWrap, #display_register_sponsors{
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      visibility: hidden;
      opacity: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .register_overview #display_register_overview, .register_participant #display_register_participant, .register_entry #display_register_entry, .register_payment #display_register_payment, .register_teammates #display_register_teammates, .register_sessions #display_register_sessions, .register_merch #display_register_merch, .register_membership #display_register_membership, .showSubclasses #subclassesWrap, .register_success #display_register_success, .register_sponsors #display_register_sponsors{
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: auto;
  }
  
  /*------------------------------------ stripe elements related --------------------------------- */
  
  .stripeFormRow{
      padding: 20px;
      background-color: #fff;
      position: relative;
  }
  
  /*------------------------------------ other stripe related --------------------------------- */
  
  .connectWithStripe{
      background-repeat: no-repeat;
      background-position: center;
      background-position: center;
      background-size: contain;
      width: 220px;
      height: 40px;
      cursor: pointer;
      cursor: pointer;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/light-on-light@3x.png);
  }
  
  /*----------------------------------- connect-stripe ------------------------------------- */
  
  #errorDisplay_connectAccount, .stripeError #successDisplay_connectAccount, .requestClubID #successDisplay_connectAccount, #requestClubIDDisplay_connectAccount{
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      overflow: hidden;
      padding: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .stripeError #errorDisplay_connectAccount, #successDisplay_connectAccount, .requestClubID #requestClubIDDisplay_connectAccount{
      visibility: visible;
      opacity: 1;
      max-height: initial;
      padding: initial;
      margin-top: initial;
      margin-bottom: initial;
  }
  
  #selectClubForStripe{
      height: 60px;
      width: 100%;
  }
  
  /*------------------------------------ used on microsites -------------------------------------- */
  
  .icon-text{
      line-height: 22px;
      padding-top: 3px;
      margin-left: 20px;
      color: #3d454e;
      font-family: 'roboto';
      font-size: 16px;
  }
  
  .micro-site-content-wrap{
      padding-left: 50px;
      padding-right: 0px;
  }
  
  .material-icons.lighter{
      color: #606d7c;
  }
  
  .material-icons{
      width: 34px;
      text-align: center;
  }
  
  .event-card{
      width: 80%;
      margin-left: auto;
      min-width: 450px;
  }

  .event-card.reservations{
    margin: 0px;
    max-width: 350px;
    width: auto;
  }
  
  .event-card-image{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      min-height: 350px;
  }
  
  .event-card-image-inner{
      position:absolute;
      top:15px;
      bottom:15px;
      left:15px;
      right:15px;
      background-repeat:no-repeat;
      background-position: center;
      background-size: contain;
  }
  
  .event-card-image.default-image-icon{
      min-height: 300px;
  }
  
  /*------------------------------------ custom fields -------------------------------------- */
  
  .customFieldInput.radioWrap, .radioWrap{
      background-color: #f7f9fb;
      border: 1px solid #dee3e8;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 3px;
      margin-bottom: 30px;
  }
  
  /*------------------------------------ membership view for admin dash -------------------------------------- */
  
  .applicationTimelineCard .standardBackButton{
      visibility: hidden;
  }
  
  .applicationTimelineCard .pointer .standardBackButton{
      visibility: visible;
  }
  
  .applicationTimelineCard .tapCellPreText{
      width: 100px;
      padding-top: 4px;
  }
  
  .timelineCardContentBody{
      background-color: #f1f5f9;
      margin-left: -20px;
      margin-right: -20px;
      margin-bottom: -20px;
      padding: 20px;
      margin-top: 10px;
      border-top: 1px solid #e4ebf1;
  }
  
  .timelineCardDescriptionInsert{
      background-color: #fefeff;
      padding: 20px;
      font-family: 'modern';
      font-size: 18px;
      line-height: 28px;
      font-weight: bold;
      color: #313646;
  }
  
  .customFieldResponseInsert{
      padding: 20px;
      font-family: 'modern';
      font-size: 18px;
      line-height: 28px;
      font-weight: bold;
      color: #313646;
  }
  
  
  /*------------------------------------ /membership -------------------------------------- */
  
  
  
  
  /*------------------------------------ registration flows (new) -------------------------------------- */
  
  .registration-header{
      font-family: 'Montserrat';
      color: #283664;
      font-weight: 700;
      font-size: 30px;
      line-height: 44px;
      padding-bottom: 5px;
  }
  
  .registration-header-wrap{
      padding-top: 70px;
      padding-bottom: 70px;
  }
  
  .hosted-by{
      font-size: 24px !important;
      line-height: 32px !important;
  }
  
  .header-image{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }
  
  /*--- used on micro sites too -----*/
  .header-image-v2{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      min-width: 450px;
      min-height: 400px;
      background-color: #f5f7f9;
  }
  
  .header-image-v2.shorter{
      min-height: 300px;
  }
  
  .header-image-v2-inner{
      position:absolute;
      top:15px;
      bottom:15px;
      left:15px;
      right:15px;
      background-repeat:no-repeat;
      background-position: center;
      background-size: contain;
  }
  
  .header-image-v2.default-image-icon{
      min-height: 300px;
  }

  .classPickerCard{
      min-width: 320px;
  }
  
  /*
  
  .classPickerCardInner{
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 20px;
      padding-bottom: 20px;
      margin: 15px;
      background-color: #f5f7f9;
      border-radius: 2px;
  }
  */
  
  .card-picker-footer{
      background-color: #fff;
      min-height: 40px;
      margin-top: 4px;
      margin-left: -30px;
      margin-right: -30px;
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: -30px;
      padding-top: 10px;
      padding-bottom: 10px;
      box-shadow: 0px 0px 1px 0px rgba(176, 189, 218, 0.05), 0px -3px 10px 1px rgba(45, 50, 53, 0.07);
      -webkit-box-shadow: 0px 0px 1px 0px rgba(176, 189, 218, 0.05), 0px -3px 10px 1px rgba(45, 50, 53, 0.07);
      -moz-box-shadow: 0px 0px 1px 0px rgba(176, 189, 218, 0.05), 0px -3px 10px 1px rgba(45, 50, 53, 0.07);
  }
  
  .card-picker-footer .cardFooterText{
      font-weight: bold;
      font-size: 16px;
      white-space: nowrap;
  }
  
  .classPickerCard .description-outer{
      text-align: left;
      padding-top: 20px;
      padding-bottom: 15px;
      margin-bottom: 30px;
      min-height: 135px;
  }
  
  .classPickerCard .description{
     height: 90px;
      overflow: hidden;
      margin-bottom: 10px;
      padding-bottom: 15px;
  }
  
  .classPickerCard .description p, .classPickerCard .description ul{
      margin-left: 0px !important;
  }
  
  .cart-header{
      position: fixed;
      right: 0px;
      top: 0px;
      height: 68px;
      width: 180px;
      cursor: pointer;
      z-index: 150;
      line-height: 68px;
  }
  
  .cart-body{
      padding-bottom: 50px;
  }
  
  .cart-body .product-name{
      font-size: 15px;
      font-weight: bold;
      font-family: 'Montserrat';
      margin-bottom: 10px;
      line-height: 24px;
      color: #2c323a;
  }
  
  .cart-body .lineItem{
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #e5eaec;
  }

  .cart-body .lineItem.lessPadding{
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  .cart-body .line-item-body{
      width: 100%;
  }
  
  .cart-body .price, .price.pos{
      position: absolute;
      bottom: 0px;
      right: 0px;
      font-weight: bold;
      font-size: 16px;
      line-height: 18px;
      color: #2c323a;
      text-align: right; 
  }
  
  .cart-body .product-explain, .cart-body .qty{
      font-size: 16px;
      text-transform: none;
      font-family: 'modern';
      font-weight: bold;
      line-height: 20px;
      color: #606d7c;
      margin-bottom: 5px;
  }
  
  .cart-header > p{
      font-size: 15px;
      font-family: 'Montserrat';
      font-weight: bold;
      text-transform: uppercase;
      color: #525863;
  }
  
  .cart-body, .mobile-order-summary-body{
      /*z-index: 200;*/
      z-index: 1000001;
  }
  
  .panelWrap.mobile-order-summary-body{
      top: 119px;
      border-top: 1px solid #e6e8ea;
      padding-bottom: 0px;
  }
  
  .cart-icon {
      border-radius: 5px;
      font-size: 15px;
      font-weight: bold;
      font-family: 'Montserrat';
      text-align: center;
      height: 25px;
      width: 25px;
      margin-top: 20px;
      margin-left: 10px;
      line-height: 26px;
      background-color: #e8edf1;
      color: #525863;
  }
  
  .cart-icon.full{
      color: #fff;
      background-color: #5a67a9;
  }
  
  .mobile-order-summary{
      position: fixed;
      cursor: pointer;
      top: 68px;
      left: 0px;
      right: 0px;
      height: 25px;
      border-top: 1px solid #e6e8ea;
      background-color: #fff;
      padding-top: 15px;
      padding-bottom: 10px;
      padding-left: 20px;
      padding-right: 20px;
      z-index: 151;
      -webkit-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
      -moz-box-shadow: 0px 1px 4px rgba(167, 167, 191, 0.1), 0px 2px 5px rgba(0,0,0,.07);
  }
  
  /*----- version for square cards (merch, and add ons) ----------------- */
  
  .merchPickerCard{
      min-width: 275px;
      max-width: 640px;
  }
  
  .merch-card-image{
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 100%;
      height: 100%;
      min-height: 200px;
  }
  
  .merch-card-image-wrap{
      margin-top: 10px;
      margin-bottom: 15px;
      margin-left: 5px;
      margin-right: 5px;
  }
  
  .card-picker-main{
      min-height: 175px;
  }

  .merchPickerCard .card-picker-main, .classPickerCard .card-picker-main  {
    min-height: auto;
  }
  
  .merchPickerCardInner, .classPickerCardInner{
         padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 60px;
    margin: 15px;
    background-color: #fff;
    border-radius: 3px;
    /* border: 1px solid #c7c9cf; */
    overflow: hidden;
    position: relative;
    /* box-shadow: none !important; */
    /* -webkit-box-shadow: none !important; */
    /*-moz-box-shadow: none !important;*/
      /*
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 20px;
      margin: 15px;
      background-color: #f5f7f9;
      border-radius: 2px;
      */
  }
  
  .merchPickerCard .card-picker-footer, .classPickerCard .card-picker-footer{
      margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid #e0e4e7;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
      /*margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
      */
  }
  
  .merchPickerCard .description-outer, .classPickerCard .description-outer {
      text-align: left;
    padding-top: 12px;
    /* padding-bottom: 15px; */
    margin-bottom: 30px;
  }
  
  /*------------------------------------ /register -------------------------------------- */
  
  .couponBlob{
      display: inline-block;
      border: 1px solid #c5b9dc;
      padding-left: 12px;
      margin-left: 5px;
      padding-right: 25px;
      padding-top: 4px;
      padding-bottom: 4px;
      font-size: 15px;
      font-weight: bold;
      border-radius: 20px;
      margin-bottom: 10px;
      background-color: #fafafd;
      color: #452c65;
      position: relative;
  }
  
  .couponBlob .xIcon{
      position: absolute;
      top: 0px;
      bottom: 0px;
      right: 3px;
      background-size: 9px;
      width: 20px;
      cursor: pointer;
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/purpleXicon.png);
      background-repeat: no-repeat;
      background-position: center;
  }

  .xIcon-plain {
    background-size: 14px;
    height: 20px;
    width: 20px;
    margin-top: 4px;
    cursor: pointer;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/purpleXicon.png);
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .campClassCard.maxHeight{
      position: relative;
      overflow: hidden;
      max-height: 82px;
  }
  
  .campClassCard.nthTableCard.maxHeight{
      box-shadow: 1px -1px 1px 0px rgba(50,50,93,.05), 0 -3px 2px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px -1px 1px 0px rgba(50,50,93,.05), 0 -3px 2px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px -1px 1px 0px rgba(50,50,93,.05), 0 -3px 2px 0 rgba(0,0,0,.07);
      border-top: none;
      border-radius: 15px;
  }
  
  .campClassCard.active{
      overflow: visible;
      max-height: 100000px;
  }
  
  .campClassDescriptionInsert{
      background-color: #fefeff;
      padding: 20px;
      margin-top: 15px;
  }
  
  #verifyButton{
      margin-left: 5px;
  }
  
  .dateInsert{
      min-height: 20px;
      line-height: 24px;
      font-size: 16px;
      font-weight: bold;
      opacity: 0;
  }
  
  .dateInsert.active{
      opacity: 1;
  }
  
  .memberPriceSubtotalInsert{
      color: #048404;
      font-weight: bold;
      font-size: 18px;
  }
  
  .quantityInsert{
      font-weight: bold;
      text-align: center;
      font-size: 20px;
      line-height: 34px;
  }
  
  .plusButton{
      border-width: 15px;
      border-style: solid;
      border-color: transparent transparent #ddd transparent;
      margin-top: -15px;
      cursor: pointer;
  }
  
  .plusButton:hover{
      border-color: transparent transparent #818d9a transparent;
  }
  
  .minusButton{
      border-width: 15px;
      border-style: solid;
      border-color: #ddd transparent transparent transparent;
      margin-bottom: -15px;
      cursor: pointer;
  }
  
  .minusButton:hover{
      border-color: #818d9a transparent transparent transparent;
  }
  
  /*-------------------- quantity picker v2 ---------------- */
  
  .qty{
      font-weight: bold;
      text-align: center;
      font-size: 20px;
      line-height: 34px;
  }

  /*-- version for table rows --*/
  td .qty{
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
  }

  td .quantityPickerV2{
    margin-top: 4px;
    margin-bottom: 4px;
    height: auto;
  }
  
  .plusButtonV2{
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #b3b8bf transparent;
      cursor: pointer;
      height: 0px;
  }
  
  .plusButtonV2:hover{
      border-color: transparent transparent #818d9a transparent;
  }
  
  .minusButtonV2{
      border-width: 6px;
      border-style: solid;
      border-color: #b3b8bf transparent transparent transparent;
      cursor: pointer;
      height: 0px;
      margin-top: 6px;
  }
  
  .minusButtonV2:hover{
      border-color: #818d9a transparent transparent transparent;
  }
  
  .quantityPickerV2{
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 8px;
      padding-bottom: 8px;
      border: 1px solid #d6dbe0;
      border-radius: 2px;
      width: 60px;
      margin-top: 12px;
  }
  /*------------------------------------ date picker ------------------------ */

  .date-picker-container{
      /*
      position: absolute;
      width: 450px;
      top: 23px;
      right: 215px;
      height: 30px;
      margin-bottom: 1%;
      */
      margin-bottom: 0px;
      padding-top: 10px;
      padding-right: 5px;
      padding-bottom: 12px;
      background-color: #f9fbfd;
      border-top: 1px solid #ecf0f1;
  }

  .date-picker-header{
      margin-left: 30px;
    font-family: roboto;
    font-size: 12px;
    line-height: 34px;
    text-transform: uppercase;
    color: #8f95a5;
    font-weight: 500;
    white-space: nowrap;
  }

  .date-picker-input-container{
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      align-items: center;
  }

  /* .date-picker-date-type{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    align-items: center;
} */

  /* .date-picker-date-type-scale{
    color: #52596f !important;
    cursor: default !important;
    display: flex;
    width: 200px;
    height: 28px;
    justify-content: space-between;
    align-items: center;
    margin-left: 1%;
    text-transform: capitalize;
} */

/* .date-picker-date-type-option{
    cursor: pointer !important;
    margin-left: 5px;
    margin-right: 5px;
    font-family: roboto;
    font-size: 12px;
    font-weight: 500
} */

  .date-picker-scale{
      color: #52596f !important;
      cursor: default !important;
      display: flex;
      width: 200px;
      height: 28px;
      justify-content: space-between;
      align-items: center;
      margin-left: 1%;
      text-transform: capitalize;
      box-shadow: none !important;
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      border: 1px solid #e2e8e8 !important;
  }

  .date-picker-date{
    color: #3d4752 !important;
    cursor: default !important;
    display: flex;
    width: 200px;
    height: 28px;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0px;
    box-shadow: none !important;
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      border: 1px solid #e2e8e8 !important;
  }

  .date-picker-date-item{
      cursor: pointer !important;
      color: #52596f !important;
      letter-spacing: 1px;
      font-family: roboto;
      font-size: 12px;
      font-weight: 500
  }

  .date-picker-scale-item{
      cursor: pointer !important;
      margin-left: 5px;
      margin-right: 5px;
      font-family: roboto;
      font-size: 12px;
      font-weight: 500
  }

  .date-picker-scale-item:hover{
    color: #5a70ce;
}

/*----------Create Filter Conditions-----------*/

.filter-condition-container{
    width: 98%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.filter-condition{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 40px;
    align-self: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

.filter-condition-dd{
    margin-left: 4px;
    margin-right: 4px;
    font-size: 16px;
}

.filter-condition-input{
    margin-left: 4px;
    margin-right: 4px;
    font-size: 16px;
    font-weight: bold;
    width: 30%;
    border: 1px solid grey;
    border-radius: 5px;
}

.remove-filter-condition{
    margin-left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(222,222,222,1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.remove-filter-condition-minus{
    width: 11px;
    height: 2px;
    background-color: #52596f;
}

/*------------------------------------ profile picture uploads (apply, membership, etc.) ------------------------ */
  
  #profPicDisplayZone{
      width: 130px;
      min-width: 130px;
      max-width: 130px;
      height: 130px;
      max-height: 130px;
      min-height: 130px;
      border-radius: 3px;
      margin-top: 12px;
  }

  #profPicDisplayZone.defaultUserIcon{
    background-size: 60%;
    background-position: center;
  }
  
  #profPicDisplayZone.cover{
      background-size: cover !important;
  }

  /*-------------------------------- member balance table --------------------------------*/

  .member_balance_transaction_row{
    background-color: #f9fbfd;
  }

  .member_balance_transaction_row .special-timestamp-td p{
    font-size: 14px;
    text-transform: uppercase;
    padding-top: 5px;
  }
  
  /*-------------------------------- point of sale --------------------------------*/

  .ipad-optimized .view{
    position: relative;
    padding-left: 235px;
    min-width: 340px;
  }

  .hide_secondary_members .is_secondary_member{
    display: none;
  }

  .selected_printers_insert{
    font-family:'roboto';
    font-weight:500;
    color:#323c63;
  }

  .tippingInput_amount{
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-size: 70px;
    line-height: 40px;
    font-family: 'roboto';
    font-weight: 500;
    color: #2a375f;
    background: rgba(255,255,255,0);
  }

  .wrap_new_order{
    display:flex;
    flex-wrap: wrap;
    padding-top: 80px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 80px;
  }

  .ipad-optimized .flexibleLeftMenu{
    position: fixed !important;
    min-width: 235px !important;
    max-width: 235px !important;
    margin-left: 0px !important;
    overflow: hidden !important;
    z-index: 100 !important;
    left: 0px !important;
    top: 0px !important;
    bottom: 0px !important;
  }

  .ipad-optimized .contentZoneHeader{
    position: fixed !important;
    left: 235px !important;
  }

  .ipad-optimized .standardContentZone{
    left: 0px;
    position: relative !important;
    overflow: hidden;
  }

  .posScrollbar{
      padding-bottom: 20px;
      padding-bottom: 20px;
      top: 66px !important;
      box-shadow: none !important;
      background: rgba(255,255,255,0) !important;
      height: auto !important;
  }
  .posScrollbar::-webkit-scrollbar, .tippingScrollbar::-webkit-scrollbar { 
      display: none; 
  }

  .posScrollbarItem, .pos-tip-option{
      cursor: pointer;
    color: #6a7482;
    font-family: 'roboto';
    font-weight: 300;
    line-height: 40px;
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 30px;
  }

  .tippingScrollbar{
    padding-bottom: 20px;
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 22px;
    padding-right: 50px;
    margin-top: -10px;
  }

  .posScrollbarItem:hover, .posScrollbarItem.active:hover, .pos-tip-option:hover, .pos-tip-option.active:hover{
    color: #081333;
  }

  .posProductTagSection{
      /* border-top: 1px solid black; */
      display: flex;
      /* margin-top: 50px; */
      flex-wrap: wrap;
  }

  .posSectionHeader{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-top: 65px;
      width: 100%;
  }

  .posTagNameHeader{
    font-size: 28px;
    line-height: 30px;
    margin-left: 6px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 30px;
    padding-bottom: 20px;
    font-family: 'roboto';
    font-weight: 300;
    color: #313c63;
  }

  .menu_tab{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-left: 7px solid #e1e6ec;
    cursor: pointer;
  }

  .menu_tab h4{
    color: #6a7482;
    font-size: 20px;
    line-height: 30px;
    font-family: 'roboto';
    font-weight: 300;
  }

  .menu_tab.active{
    border-left: 7px solid #5280ff;
  }

  .menu_tab.active:hover h4, .menu_tab.active h4{
    color: #2c59d6;
  }

  .menu_tab:hover h4{
    color: #081333;
  }

  .menu_tab .standardBackButton{
    opacity: 0;
  }

  .menu_tab.active .standardBackButton, .menu_tab:hover .standardBackButton{
    opacity: 1;
  }
  
  .pos-products-insert-wrap, .pos-members-insert-wrap{
      padding-top: 87px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pos-payment-wrap, .pos-order-details-wrap{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 100px;
  }
  
  .posProductCard, .posMemberCard, .posOrderCard{
      min-width: 250px;
      height: 250px;
      max-width: 250px;
      max-height: 250px;
      cursor: pointer;
      margin: 15px;
  }
  
  .posProductImage, .posMemberImage{
      background-position: center;
      height: 190px;
      background-repeat: no-repeat;
      background-size: cover;
  }

  /*--- other card sizes ----*/

  .product-card-size_small .posProductCard, .product-card-size_small .posOrderCard, .product-card-size_small .posMemberCard{
    min-width: 140px;
    height: 140px;
    max-width: 140px;
    max-height: 140px;
  }

  .product-card-size_small .tappedCreateNewOrder{
    max-width: 255px !important;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .product-card-size_small .tappedCreateNewOrder h3{
    font-size: 22px !important;
  }

  .product-card-size_small .posProductImage, .product-card-size_small .posMemberImage{
    height: 100px;
  }

  .product-card-size_small .hideOnSmallerCards{
    display: none;
  }

  .product-card-size_small .card-picker-footer{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  /*---- end other card sizes ------*/

  .posMemberImage.defaultUserIcon{
    background-size: 40%;
    background-position: center;
  }
  
  .card-picker-footer.lessPadding{
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .line_items_insert{
      position: absolute;
      background-color: #fff;
      bottom: 0px;
      top: 65px;
      padding-bottom: 120px;
      right: 0px;
      left: 0px;
  }
  
  .lineItem.pos{
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .draft_orders_insert{
      margin-top: 102px;
      background-color: #fff;
  }
  
  .ordered_orders_insert{
      margin-top: 102px;
      background-color: #fff;
  }
  
  .line-item-body.pos{
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #e5eaec;
  }
  
  .line-item-body .product-name{
      font-size: 16px;
      font-weight: 500;
      font-family: 'Roboto';
      margin-bottom: 10px;
      line-height: 24px;
      color: #2c323a;
  }
  
  .line-item-body .product-explain{
      font-size: 16px;
      text-transform: none;
      font-family: 'modern';
      font-weight: bold;
      line-height: 20px;
      color: #606d7c;
      margin-bottom: 5px;
      text-transform: capitalize;
  }
  
  .vertical_dots{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_white_vertical.png);
      background-repeat: no-repeat;
      background-position: center;
      width: 30px;
      height: 30px;
      background-size: 25px;
  }

  .horizontal_dots{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/imageSingle_component-image_1578424849107);
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    background-size: 25px;
    transform: rotate(90deg);
}

  .product-name.pos {
      /*
      margin-bottom: 0px;
      */
  }

  .payment_method.pos.relative {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #e5eaec;
  }
  .posPaymentOption{
      font-size: 15px;
      font-weight: bold;
      font-family: 'Montserrat';
      margin-bottom: 10px;
      line-height: 24px;
      color: #2c323a;
  }

  .pos-order-summary{
      width: 100%;
      font-size: 18px;
      text-align: left;
  }

  .pos-order-summary.taxes{
    border-top: 1px solid #e6eaec;
    padding-top: 8px;
    padding-bottom: 5px;
    margin-top: 12px;
  }

  .order-summary-pair{
    display: flex;
    justify-content: space-between;
    /* background-color: #fff; */
  }

  .pos-order-summary-header{
    /* background-color: #fff;  */
    padding-left: 2%; 
    width: 100%;
  }


  .order-summary-item{
      display: flex;
      justify-content: space-between;
      /* background-color: #fff; */
      width: 100%;
  }

  .order-summary-name{
      margin-right: 15px;
      font-size: 16px !important;
  }

  .order-summary-price{
    margin-right: 6%;
    font-size: 16px !important;
  }

  .posOrderSummary{
      background-color: #fff;
  }

  /*-------------------------------- kiosk & membership kiosk -----------------------------*/
  
  #scan-input{
      bottom: 0px;
      position: fixed;
      left: 0px;
      right: 0px;
      top: 67px;
      width: 100%;
      padding: 0px;
      opacity: 0.01;
      cursor: pointer;
      background-color: rgba(255,255,255,0);
  }
  
  .kiosk-search-wrap{
      /* max-width: 480px; */
      max-width: 680px;
      z-index: 1000;
  }
  
  .product-card-burgee{
      max-width: 240px;
      height: 140px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
  }
  
  .searching .fade-when-searching{
      opacity: 0;
      margin-top: -420px;
  }
  
  .show-when-searching{
      opacity: 0;
      height: 0px;
  }
  
  .searching .show-when-searching{
      opacity: 1;
      height: auto;
  }

  .searching .hide-when-searching{
      opacity: 0;
      height: 0px;
  }
  
  /*------------------------------ results -------------------------------*/
  
  .tabBarWrap_results_subclasses{
      border-bottom: 1px solid #ddd;
  }
  
  .tabBarWrap_results_subclasses.full-screen-version{
      border-bottom: 1px solid #ddd;
      position:absolute;
      left:0px;
      right:0px;
      top:109px;
      z-index:10;
      min-height:43px;
  }
  
  .contentBlock.scoring.has-divisions{
      top: 153px;
  }

  .powered_by_wrap h1{
    font-weight: bold;
    line-height: 70px;
    padding-left: 5px;
    font-size: 24px;
    letter-spacing: 2px;
    color: #2a3664;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'modern';
    display: inline-block;
  }

  .powered_by{
    line-height: 72px;
    margin-left: 30px;
    color: #728394;
      font-weight: 400;
      font-size: 16px;
      text-align: left;
      font-family: 'Roboto';
      white-space: pre-wrap;
  }
  
  /*------------------------------------ /scoring -------------------------------------- */
  
  /*-- some of these conditionals re-used elsewhere, eg. entry list --*/
  .hide_boat_name .version_boat_name, .hide_handicap_phrf .version_handicap_phrf, .hide_handicap_irc .version_handicap_irc, .hide_handicap_portsmouth .version_handicap_portsmouth, .hide_handicap_laserMaster .version_handicap_laserMaster, .hide_handicap_pursuit .version_handicap_pursuit, .hide_times .version_times, .hide_boat_class .version_boat_class, .hide_division .version_division, .hide_fleet .version_fleet, .hide_handicap .version_handicap, .hide_finish_time .version_finish_time, .hide_scored_by .version_scored_by, .hide_start .version_start, .hide_bow_number .version_bow_number, .hide_last_name .version_last_name {
      display: none;
  }
  
  .tappedPublishUnpublish{
      right: 200px;
  }

  .scoring_search_bar{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .cardHeaderButton.cardHeaderButton_scoring_settings{
      margin-top: 2px;
  }
  
  .cardHeaderButton.cardHeaderButton_scoring_columns{
      margin-top: 2px;
      right: 130px;
  }
  
  .cardHeaderButtonDropdown.cardHeaderButtonDropdown_scoring_columns{
      right: 130px;
      max-height: 360px;
  }
  
  .scoring_scrollable_wrap{
      top: 90px;
      position: absolute;
      bottom: 0px;
      left: 0px;
      padding-top: 22px;
  }
  
  /*-- also used on public results --*/
  .contentBlock.scoring{
      top: 110px;
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-top: 0px;
  }
  
  .wrap_scored, .wrap_unscored{
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .real-time-scoring-wrap{
      padding-right: 195px;
  }
  
  .real-time-scoring-icon{
      margin-top: -6px;
  }
  
  .real-time-scoring-icon.with-initials{
      background-color: #3a466a;
      color: #fff;
      text-align: center;
  }
  
  .real-time-scoring-icon .initials{
      letter-spacing: -3px;
      font-size: 19px;
      line-height: 44px;
      font-weight: bold;
      font-family: 'Montserrat';
      text-transform: uppercase;
  }
  
  .real-time-scoring-icon.inactive{
      opacity: 0.65;
  }
  
  .drag-handle.v2{
      margin-top: 10px;
      padding-top: 0px;
      margin-left: 10px;
  }
  
  .throwoutOption, .subevent-race-option, .billing_date_option, .billing_month_option, .billing_year_option{
      width: 32px;
      height: 32px;
      margin: 1px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      font-family: 'roboto';
      color: #728394;
  }
  
  .throwoutOption:hover, .subevent-race-option:hover, .billing_date_option:hover, .billing_month_option:hover, .billing_year_option:hover{
      background-color: #f8f9fb;
  }
  
  .throwoutOption.active, .throwoutOption.active:hover, .subevent-race-option.active, .subevent-race-option.active:hover, .billing_date_option.active, .billing_date_option.active:hover, .billing_month_option.active, .billing_month_option.active:hover, .billing_year_option.active, .billing_year_option.active:hover {
      background-color: #5280ff;
      color: #fff;
      font-weight: 500;
  }
  
  /*--- assignments ----*/
  
  .colorSwatch{
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    height: 22px;
    font-family: 'roboto';
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    max-height: 22px;
    max-width: 22px;
    border-radius: 100%;
    -webkit-transition: all 0.15s ease-in-out;
      -moz-transition: all 0.15s ease-in-out;
      -ms-transition: all 0.15s ease-in-out;
      -o-transition: all 0.15s ease-in-out;
  }

  .streamerPickerInner{
    padding-top: 10px;
  }
  
  .streamerPickerInner .colorSwatch{
      margin-right: 4px;
      float: left;
  }

  .colorSwatch > p {
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-family: 'roboto';
  }
  
  .streamerPicker, .tableRow.no-hover:hover .streamerPicker, .table-view-row.no-hover:hover .streamerPicker{
    top: 100%;
      opacity: 0;
      position: absolute;
      left: 0px;
      z-index: 10;
      min-width: 145px;
      bottom: 0px;
      overflow: hidden;
      border-radius: 4px;
  }
  
  .streamer-assignment, .tableRow.no-hover:hover .streamer-assignment, .table-view-row.no-hover:hover .streamer-assignment{
      opacity: 1;
  }
  
  .tableRow:hover .streamerPicker, .table-view-row:hover .streamerPicker{
    opacity: 1;
    top: 0px;
    bottom: 0px;
  }
  
  .assignmentRow:hover .streamer-assignment, .startRow:hover .streamer-assignment, .has-streamer-picker:hover .streamer-assignment{
      opacity: 0;
  }

  .subscriber_tag_row {
      display: flex;
  }
  
  /*------------------------------------ /design -------------------------------------- */
  
  .contentBlock.design {
      padding-top: 67px;
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
  }
  
  /*-- also used on scoring panel ----*/
  .raceStatus, select.designSelect_visibility{
      line-height: 36px;
      font-weight: bold;
      padding-left: 20px;
      font-size: 14px;
      color: #9ca4b7;
      font-family: 'Montserrat';
  }

  .designSelect_visibility{
    line-height: 24px !important;
  }
  
  .drag-handle{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/handle.png);
      background-position: center;
      background-size: 15px;
      background-repeat: no-repeat;
      height: 20px;
      width: 20px;
      min-width: 20px;
      min-height: 20px;
      float: right;
      cursor: move;
  }
  
  .previewZone{
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 50px;
      background-color: #fdfdfd;
      min-height: 90vh;
      position: relative;
  }

  .showGLOptions{
      display: none;
      width:100px;
      height: 100px;
      background-color: red;
      transform: rotate(-90deg);
      top: 10px !important;
      right: -130px!important;
  }
  
  .previewZone .cs-header{
      position: relative;
      z-index: initial;
      box-shadow: none !important;
      border-bottom: 2px solid #e8edf2;
  }
  
  .previewZone .mobileMenuOverlay{
      position: absolute;
  }
  
  .previewZone .mobileMenu{
      position: absolute;
  }
  
  .contentZoneHeader{
      background-color: #fff;
      height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 15px;
      padding-bottom: 15px;
      box-shadow: 3px -1px 5px #acb3b9;
      -moz-box-shadow: 3px -1px 5px #acb3b9;
      -webkit-box-shadow: 3px -1px 5px #acb3b9;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      z-index: 12;
  }
  
  .contentZoneHeader .cardHeaderButton{
      top: auto;
  }
  
  #leftMenu_sections, #leftMenu_global-styles{
      padding-top: 44px;
  }
  
  .flexibleLeftMenu.designPanel{
      border-right: 1px solid #d4d9de;
      background-color: #f1f5f9;
      padding-top: 67px;
  }
  
  .panelHeaderWrap{
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
  }
  
  .panelHeaderWrap.drillDown .drilldownHeaderMenu{
      margin-top: -44px;
  }
  
  .panelHeaderWrap .drilldownHeaderMenu{
      margin-left: 0px;
      margin-top: 0px;
      border-top: none;
      box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
      -moz-box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
      -webkit-box-shadow: 0px 1px 2px 0px rgba(50,50,90,.08), 0 1px 4px 0 rgba(0,0,0,.06);
  }
  
  .flexibleLeftMenu.designPanel .panelHeader{
      height: 50px;
      background-color: #f1f5f9;
      border-bottom: 1px solid #d4d9df;
      margin: 0px;
  }
  
  .flexibleLeftMenu.designPanel .smallBlockLetters{
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e1e9f1;
  }
  
  .componentIcon{
      width: 22px;
      height: 22px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  .icon-carousel{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/icon-carousel.png);
  }
  
  .icon-hero{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/icon-hero.png);
  }
  
  .icon-image-with-text{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/icon-image-with-text.png);
  }
  
  .icon-header{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/icon-header.png);
  }
  
  .icon-footer{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/icon-footer.png);
  }
  
  .componentsInsert{
      outline: none;
  }
  
  .section-trash, .section-trash_nav{
      position: absolute;
      bottom: -60px;
      left: 0px;
      right: 0px;
      height: 60px;
      line-height: 60px;
      background-color: rgba(255,255,255,0.93);
      color: red;
      font-weight: bold;
      font-size: 18px;
      padding-left: 20px;
      border-top: 1px solid #d4d9df;
  }
  
  .section-trash .table-view-row-smaller, .section-trash_nav .table-view-row-smaller{
      display: none;
  }
  
  .trash-icon{
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/trash.png);
      height: 60px;
      width: 20px;
      margin-right: 12px;
      background-position-y: 17px;
  }
  
  .section-trash.active, .section-trash_nav.active{
      bottom: 0px;
  }
  
  #tappedAddComponent{
      text-align: left;
      padding-left: 44px;
  }
  
  .littlePanelHeader{
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 10px;
      padding-right: 10px;
      background-color: #ffffff;
      border-bottom: 1px solid #d4d9df;
      line-height: 40px;
      text-transform: uppercase;
      font-size: 12px;
      cursor: pointer;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
  }
  
  .littlePanelHeader h3{
      font-family: 'modern';
  }
  
  .littlePanelHeader .cardHeaderBackButton{
      margin-top: -1px;
      background-size: 19px;
  }
  
  .leftMenuScrollPanel{
      position: absolute;
      top: 45px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      padding-top: 15px;
      padding-bottom: 100px;
  }
  
  .designPanel .borderBottom{
      border-bottom: 1px solid #d4d9df;
  }

  .hostedImageGridImage {
    width: 31%;
    margin: 1%;
    height: 30vw;
    background-size: cover;
    background-position: center;
  }
  
  .uploadedImage{
      height: 150px;
      width: 220px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      border-radius: 3px;
  }

  .uploadedImageGridThumbnail{
    margin: 15px;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 3px;
}

    .imageSingleThumbnail{
        width: 100px !important;
        height: 100px !important;
        padding: 0px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 20px !important;
    }

    .uploadedImageGridThumbnail.loading .upload-image-spinner{
        animation: spinning 0.65s linear infinite;
        -webkit-animation: wk-spinning 0.65s linear infinite;
        margin-top: 30px;
    }

    .uploadedImageGridThumbnail .upload-image-overlay{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,10,0);
        display: none;
    }
    
    .uploadedImageGridThumbnail.loading .upload-image-overlay{
        display: block;
        background-color: rgba(0,0,10,0.4);
    }
    
    .uploadedImageGridThumbnail.loading p{
        opacity: 0;
    }
    
    .uploadedImageGridThumbnail.loading .absoluteInput{
        display: none !important;
    }
    
    .uploadedImageGridThumbnail.loading{
        opacity: 0.3;
    }
  
  .tapUploadImageZone{
      color: #2f3a61;
      text-align: center;
      padding-top: 60px;
      padding-bottom: 60px;
      font-size: 15px;
      text-transform: uppercase;
      font-weight: bold;
      font-family: 'modern';
      letter-spacing: 1px;
      width: 220px;
      border-radius: 3px;
      background-color: #fdfeff;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  
  .tapUploadImageZone .upload-image-overlay{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,10,0);
      display: none;
  }
  
  .tapUploadImageZone.loading .upload-image-overlay{
      display: block;
      background-color: rgba(0,0,10,0.4);
  }
  
  .tapUploadImageZone.loading p{
      opacity: 0;
  }
  
  .tapUploadImageZone.loading .absoluteInput{
      display: none !important;
  }
  
  .tapUploadImageZone.loading{
      opacity: 0.3;
  }
  
  /* --------------------------------- emergency-export page ------------------------------- */
  
  .emergency-page{
        color: #333;
      width: 90%;
      padding: 30px;
      margin-left: auto;
      margin-right: auto;
      min-height: 50vh;
      background-color: #fff;
      margin-top: 40px;
      margin-bottom: 20px;
  }
  
  .emergency-page p{
      text-align: left;
  }
  
  .emergency-text-wrap{
      margin-left: -30px;
      margin-right: -30px;
      margin-bottom: -30px;
  }
  
  .emergency-text-wrap > div{
      min-width: 200px;
  }
  
  /* --------------------------------- more labels ------------------------------- */
  
  .roboto, p.roboto, .roboto p{
      font-family: 'Roboto';
  }
  
  .inline-label, tr p.inline-label, .table-view.tighter .table-view-row p.inline-label{
      color: #728394;
      font-weight: 400;
      font-size: 16px;
      min-width: 180px;
      max-width: 180px;
      text-align: left;
      margin-right: 5px;
      padding-right: 10px;
      font-family: 'Roboto';
      white-space: pre-wrap;
  }
  
  .inline-label-width{
      min-width: 180px;
      max-width: 180px;
      margin-right: 5px;
      padding-right: 10px;
  }
  
  .inline-select-wrap{
      margin-top: -8px;
  }
  
  .inline-value, tr p.inline-value, .table-view.tighter .table-view-row p.inline-value, .mock-inline-value{
      font-weight: bold;
      color: #292e4a;
      font-family: 'modern' !important;
      text-align: left;
      white-space: pre-wrap;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .lightBlur{
    -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      -o-filter: blur(1px);
      -ms-filter: blur(1px);
      filter: blur(1px);
  }
  
  .textCard{
      max-width: 350px;
      line-height: 34px;
  }
  
  .wideTextCard{
      line-height: 34px;
  }
  
  .textCard h2, .wideTextCard h2{
      font-size: 30px;
      margin-bottom: 20px;
  }
  
  .textCard h3, .wideTextCard h3{
      font-size: 20px;
  }
  
  .frameOuter{
      padding: 8px;
      border: 10px solid rgba(255,255,255,0.9);
      max-width: 500px;
      width: 70%;
      min-width: 290px;
      z-index: 2;
      position: relative;
  }
  
  .heroBanner .frameOuter{
      max-width: 430px;
  }
  
  .frameInner{
      padding: 40px;
      background-color: #fff;
      text-align: center;
  }
  
  .lineBehind{
      font-weight: 100;
      text-align: center;
      color: #666;
      font-size: 32px;
      line-height: 38px;
  }
  
  .lineBehind::before{
      border-bottom: 1px solid #999;
      content: ' ';
      display: inline-block;
      height: 1px;
      position: relative;
      top: -7px;
      width: 60px;
      margin-right: 12px;
  }
  
  .lineBehind::after{
      border-bottom: 1px solid #999;
      content: ' ';
      display: inline-block;
      height: 1px;
      position: relative;
      top: -7px;
      width: 60px;
      margin-left: 12px;
  }
  
  .longFormBlock h1{
      /*
      margin-bottom: 10px;
      line-height: 50px;
      font-size: 36px;
      font-family: 'modern';
      font-weight: bold;
      */
      /*
      margin-bottom: 10px;
      line-height: 55px;
      font-size: 45px;
      font-family: 'Lora', serif;
      font-weight: bold;
      */
      margin-bottom: 10px;
      line-height: 55px;
      font-size: 45px;
      font-family: Montserrat;
      font-weight: bold;
      letter-spacing: -1px;
  }
  
  h1.micro-site-version{
      line-height: 62px;
      font-size: 44px;
  }

  h1.micro-site-version.reservations-version{
    font-size: 34px;
    line-height: 44px;
  }
  
  .longFormBlock h1.heroBannerHeader, .heroBannerHeader{
      background-color: rgba(255,255,255,0.88);
      display: inline-block;
      font-weight: bold;
      position: relative;
      z-index: 1;
      font-weight: bold;
      font-size: 40px;
      padding-top: 12px;
      padding-bottom: 12px;
      line-height: 60px;
      padding-left: 30px;
      padding-right: 30px;
  }
  
  .contentWrap{
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 30px;
      width: 97%;
  }
  
  .heroBanner{
      padding-top: 260px;
      padding-bottom: 170px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: relative;
      background-color: #fff;
      margin-right: auto;
      margin-left: auto;
      min-width: 280px;
  }
  
  
  .smallText {
      color: #666;
      font-size: 16px;
      margin-top: 12px;
  }
  
  .centeredText{
      text-align: center;
  }
  
  .textRight, .secondaryCardSubtext.textRight, th.textRight{
      text-align: right !important;
  }
  
  .whiteText{
      color: #fff;
  }
  
  .smallCenteredText {
      color: #222;
      font-size: 11px;
      line-height: 20px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 1px;
      margin-bottom: 8px;
      margin-top: 16px;
      text-transform: uppercase;
  }
  
  .tinyCenteredText {
      font-size: 12px;
      text-align: center;
      line-height: 16px;
  }
  
  .absoluteBottom {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
  }
  
  .absoluteTop {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
  }
  
  .zeroOpacity {
      opacity: 0;
  }
  
  .fullView {
      width: 100%;
      min-height: 100vh;
      position: relative;
  }
  
  .zten{
      z-index: 10;
  }
  
  /* -------------------- toggles ----------------------------- */
  
  .toggleDisplay{
      display: none;
  }
  
  .toggleDisplay.active{
      display: block;
  }
  
  .toggle{
      opacity: 0.6;
      cursor: pointer;
      font-size: 22px;
      padding-bottom: 15px;
      text-align: center;
      padding-top: 15px;
      padding-left: 20px;
      font-weight: bold;
      padding-right: 15px;
      height: 30px;
      line-height: 30px;
      color: #666;
      font-family: 'modern';
      background-color: rgba(255,255,255,0.5);
  }
  
  .toggle:hover{
      opacity: 1;
      color: #2d59d6;
  }
  
  .toggle.active{
      opacity: 1;
      font-weight: bold;
      font-size: 32px;
      color: #283664;
      background-color: rgba(255,255,255,0);
  }
  
  /*---------------------------- on off switches (toggles) ------------------ */
  
  .toggleWrap{
      height: 26px;
      width: 50px;
      min-width: 50px;
      max-width: 50px;
      margin-top: 3px;
      margin-left: 5px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid #c7cdd4;
      cursor: pointer;
  }

  .toggleWrap.smaller{
    height: 18px;
    width: 33px;
    min-width: 33px;
    max-width: 33px;
    margin-top: 7px;
    margin-left: 18px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #c7cdd4;
  }
  
  .toggleWrap.centeredBlock{
      margin-left: auto;
      margin-right: auto;
  }
  
  /*-- unclickable styles used all over --*/
  .toggleWrap.unclickable, .admin #toggleMemberCharges.unclickable, .unclickable{
      opacity: 0.45;
      cursor: initial;
  }

  tr.incomplete{
    opacity: 0.5;
  }
  
  .toggleWrap.enabled{
      background-color: #33bd3e;
  }
  
  .toggleSlider{
        width: 26px;
      height: 26px;
      border-radius: 18px;
      background-color: #fff;
      box-shadow: 1px 1px 5px 1px #c1c5c7;
      -moz-box-shadow: 1px 1px 5px 1px #c1c5c7;
      -webkit-box-shadow: 1px 1px 5px 1px #c1c5c7;
  }

  .toggleWrap.smaller .toggleSlider{
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: #fff;
  }

  .toggleWrap.enabled.smaller .toggleSlider{
    margin-left: 47%;
  }
  
  .toggleWrap.enabled .toggleSlider{
    margin-left: 50%;
  }
  
  .toggleWrap.higher{
      margin-top: -3px;
  }
  
  .toggleWrap.with-inline-label{
      margin-top: -3px;
      margin-left: 0px;
  }
  
  .toggleText{
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      color: #3e4751;
      padding-top: 8px;
      text-align: center;
      padding-left: 8px;
      padding-right: 8px;
  }
  
  /*------------------------------ sign up page ---------------------------- */
  
  .menuHero{
      background-color: #fff;
      background-image: url('assets/hero2.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  #menuWrap{
      max-width: 1100px;
      padding: 30px;
  }
  
  .dummy{
      z-index: -1;
      opacity: 0;
  }
  
  .menuCardOuter{
      width: 260px;
      min-width: 260px;
      max-width: 260px;
      -webkit-perspective: 600px;
      -moz-perspective: 600px;
  }
  
  .seeIngredients{
          width: 26px;
      height: 26px;
      position: absolute;
      top: 7px;
      left: 7px;
      border-radius: 100%;
      background-color: #fff;
      border: 2px solid #aba6a6;
      color: #999;
      font-family: 'ourSerif';
      font-weight: bolder;
      font-size: 18px;
      line-height: 26px;
  }
  
  .menuCard:hover .seeIngredients{
      opacity: 1;
  }
  
  .menuCardOuter .front{
      position: absolute;
      background-color: #fff;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 5;
      cursor: pointer;
      -webkit-transform: rotateX(0deg) rotateY(0deg);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      -moz-transform: rotateX(0deg) rotateY(0deg);
      -moz-transform-style: preserve-3d;
      -moz-backface-visibility: hidden;
  }
  
  .menuCard.back h3{
      font-family: 'ourSerif';
  }
  
  .menuCard.back p{
      font-family: 'modern';
      margin-top: 8px;
  }
  
  .menuCardOuter .back{
      position: absolute;
      background-color: #fff;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 8px;
      padding-right: 8px;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 3;
      -webkit-transform: rotateY(-180deg);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      -moz-transform: rotateY(-180deg);
      -moz-transform-style: preserve-3d;
      -moz-backface-visibility: hidden;
      cursor: pointer;
  }
  
  .menuCardOuter.flip .front {
      z-index: 900;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
  }
  
  .menuCardOuter.flip .back {
      z-index: 1000;
      -webkit-transform: rotateX(0deg) rotateY(0deg);
      -moz-transform: rotateX(0deg) rotateY(0deg);
  }
  
  .menuCardUp, .menuCardDown{
      height: 30px;
      font-family: 'modern';
      color: #fff;
      display: inline-block;
      font-weight: bold;
      margin: 6px;
      float: right;
      border-radius: 5px;
  }
  
  .menuCardUp{
      background-color: #f96b42;
      width: 60px;
      font-size: 24px;
      line-height: 30px;
  }
  
  .menuCardDown{
      background-color: #aba6a6;
      width: 30px;
      font-size: 24px;
      line-height: 28px;
  }
  
  .menuCard.front:hover .CTAWrap{
      background-color: rgba(255,255,255,0.85);
      opacity: 1;
  }
  
  .menuCard.front .CTAWrap{
      background-color: rgba(255,255,255,0);
      opacity: 0;
  }
  
  .menuCard.front .imageOverlay{
      background-color: rgba(255,255,255, 0);
  }
  
  .menuCard.front:hover .imageOverlay{
      background-color: rgba(0,0,0,0);
  }
  
  /* ----------------------------- footer  --------------------------------- */
  
  .footer{
          padding-top: 25px;
      padding-bottom: 40px;
      padding-right: 20px;
      padding-left: 20px;
      background-color: #eef3f3;
  }
  
  .fixedBottomButton{
      position: fixed;
      bottom: 10px;
      width: 150px;
      border-radius: 20px;
      height: 34px;
      left: 50%;
      color: #fff;
      text-align: center;
      z-index: 5;
      letter-spacing: 1px;
      text-transform: uppercase;
      line-height: 28px;
      cursor: pointer;
      font-size: 10px;
      background-color: #fff;
      color: #5a67a9;
      border: 1px solid #fff;
      -webkit-transform: translate3d(0,0,0);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      box-shadow: 0px 1px 5px #999;
      -moz-box-shadow: 0px 1px 5px #999;
      -webkit-box-shadow: 0px 1px 5px #999;
  }
  
  #floatingChatWrap{
      position: fixed;
      bottom: 8px;
      right: 10px;
      z-index: 5;
      cursor: pointer;
  }
  
  .footer a{
          padding-top: 8px;
      padding-bottom: 6px;
      text-transform: uppercase;
      color: #333;
      font-size: 12px;
      letter-spacing: 2px;
      font-weight: bold;
      display: block;
      margin-left: 20px;
      margin-right: 20px;
  }
  
  /* ---------------------------------------- faq -------------------------------------- */
  
  .faqWrap{
      width: 90%;
      max-width: 850px;
      margin-left: auto;
      margin-right: auto;
  }
  
  /* ---------------------------------------- media queries -------------------------------------- */
  
  .showOnMobileTablet, .showOnMobile{
      display: none;
  }
  
  .container-for-register{
      padding-left: 50px;
      margin-top: -100px;
  }
  
  .minThreeTwoFiveOverElevenHundo{
      min-height: 325px;
  }
  
  .marginTopSeventyThenFifty{
      margin-top: 70px;
  }

  @media print{
      /* #overlay_results-race-overlay{transform: scale(.9);} */
        .race-results-overlay{
          transform: scale(.8);
        }
        
  }

  @media all and (max-width: 660px) {
    .weatherWidget{
        margin-left: 0px !important;
    }
}

  @media all and (max-width: 1120px) {
    /*
    .date-picker-scale{
        display: none !important;
    }
    */
    .date-picker-input-container{
        justify-content: flex-end;
    }
  }
  
  @media all and (max-width: 1150px) {
      .maxThreeFiftyThenFourFifty{
          max-width: 450px;
      }
      .crossSectionTextWrap.micro-site-version{
          max-width: 45%;
          margin-right: 0px;
      } 
      .container-for-register{
          padding-right: 25px;
      }
  }
  
  @media all and (max-width: 1100px) {
      .crossSectionTextWrap.micro-site-version{
         padding-top: 50px;
          padding-bottom: 120px;
          max-width: 40%;
          padding-right: 20px;
      }
      .crossSectionTextWrap.reservations-version{
        width: 50% !important;
        flex-basis: 50%;
      }
      .crossSection.micro-site-version.reservations-version{
        min-height: 400px;
      }
      .hideHunderElevenHundo{
          display: none !important;
      }
      .container-for-register{
          padding-right: 40px;
          margin-top: -80px;
          padding-left: 40px;
      }
      .minThreeTwoFiveOverElevenHundo{
          min-height: initial;
      }
  }
  
  @media all and (max-width: 1050px) {
      .wrap_unscored, .wrap_scored{
          display: none;
          width: 100%;
          max-width: 100%;
          min-width: 100%;
          padding-bottom: 60px;
          margin-bottom: 50px;
          /* and make it scrollable */
          overflow: auto;
          -webkit-transition-property: top, bottom;
          transition-property: top, bottom;
          -webkit-transition-duration: .2s, .2s;
          transition-duration: .2s, .2s;
          -webkit-transition-timing-function: linear, linear;
          transition-timing-function: linear, linear;
          -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
      }
      .scoring_scrollable_wrap{
          bottom: 42px;
      }
      .innerHeader{
          width: 90%;
          max-width: 90%;
      }
      .show_unscored .wrap_unscored, .show_scored .wrap_scored{
          display: -ms-flex;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
      }
      .hideOnMobileTablet{
          display: none !important;
      }
      .noMinWidthOnMobile{
          min-width: initial !important;
      }
      .showOnMobileTablet{
          display: block;
      }
      .e8OnMobileTablet{
          background-color: #e8edf1 !important;
      }
      .noBoxShadowMobileTablet{
          -webkit-box-shadow: none !important;
          -moz-box-shadow: none !important;
          box-shadow: none !important;
      }
      .order-summary-block{
          margin-top: 130px;
      }
      .order-summary-block.no-header{
          margin-top: 40px;
      }
      .event-card{
          margin-left: 50px;
          margin-right: 50px;
          width: auto;
      }
      .micro-site-content-wrap{
          padding-left: 50px;
          padding-right: 50px;
      }
      .crossSectionTextWrap.reservations-version{
        padding-left: 10px !important;
      }
  }
  
  @media all and (max-width: 990px) {
      .customerGrid{
          right: -40%;
      }
  }
  
  @media all and (max-width: 950px) {
      #guaranteeHeader{
          font-size: 120px;
          margin-left: 20px;
          margin-top: -170px;
      }
      .imageThree{
          min-width: 100%;
      }
      .customerGrid{
          right: -45%;
      }
      .registration-header-wrap{
          padding-top: 45px;
          padding-bottom: 50px;
      }
  }
  
  @media all and (max-width: 900px) {
      .header-sublink-left-flex-container{
        -webkit-flex-flow: row wrap;
          -moz-flex-wrap: wrap;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      }
      .header-sublink-left{
        width: initial;
        min-width: initial;
      }
      .event-card{
          margin-left: 40px;
      }
      .scroll-down-arrow{
          right: 20px;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
      }
      .customerGrid{
          right: 0px;
          top: 480px;
          width: 100%;
          left: 0px;
          overflow: hidden;
          justify-content: center;
          -webkit-justify-content: center;
          -ms-justify-content: center;
          -moz-justify-content: center;
      }
      .skewed .innerBlock{
          background-color: #f1f3f5;
      }
      .crossSectionTextWrap{
          display: none;
      }
      .crossSectionTextWrapMobile{
          display: block;
      }
      .crossSection{
          min-height: 550px;
          min-width: 280px;
      }
      .hpProductImage{
          top: 250px;
          right: 20px;
          left: 20px;
          width: auto;
          background-position-x: center;
      }
      .pricingProductImage{
          right: 20px;
          left: 20px;
          top: 350px;
          width: auto;
      }
      .container-for-register{
          margin-top: -40px;
          padding-left: 40px;
          padding-right: 40px;
      }
  }

  @media all and (max-width: 875px) {
      .pos-member-select{
          flex-direction: column;
          align-items: center;
      }
      .pos_order_summary_block{
          width: 80%;
      }
      .crossSectionTextWrap.reservations-version{
          max-width: 100% ! important;
          padding-left: 30px !important;
          padding-right: 30px !important;
      } 
      .globalMessageInsert{
          max-width: 70%;
          left: 8%;
          right: 8%;
      }
  }
  
  @media all and (min-width: 721px) {
      .hideOnDesktop{
          display: none !important;
      }
  }
  
  @media all and (max-width: 720px) {
      /*--- styles to ensure natural, relative scrolling on mobile when flexible left menu is off the canvas anyway --*/
      .fixedView{
          position: relative;
      }
      /*
      body.v3 .details-view.active{
        padding-top: 112px;
      }
      */
      .contentBlock, .menu_v2 .contentBlock{
        padding-left: 15px;
        padding-right: 15px;
      }
      .scoring_scrollable_wrap{
          position: relative;
          top: initial;
          bottom: initial;
          min-height: 90vh;
      }
      .marginTopSeventyThenFifty{
          margin-top: 50px;
      }
      .contentBlock.lessPaddingOnMobile{
          padding-left: 8px;
          padding-right: 8px;
      }
      .wrap_scored, .wrap_unscored{
          padding-left: 0px;
          padding-right: 0px;
      }
      .noPaddingLeftRightUnder720{
          padding: 0px !important;
      }
      .outerContentWrap{
          position: relative;
          height: initial;
          max-height: initial;
      }
      .registration-header{
          font-size: 24px;
          line-height: 32px;
      }
      .hosted-by{
          font-size: 20px !important;
          line-height: 32px !important;
      }
      .standardContentZone, .standardContentZone.lower, .narrowLeftMenu .standardContentZone{
          position: relative;
          top: initial;
          padding-top: 40px;
          left: initial;
          right: initial;
          bottom: initial;
      }
      .standardContentZone.stayAbsolute{
        position: absolute !important;
        left: 0px !important;
        right: 0px !important;
        top: 0px !important;
        bottom: 0px !important;
      }
      .contentBlock{
          position: relative;
          top: initial;
          left: initial;
          right: initial;
          bottom: initial;
      }
      .dashboardBody, .registerBody{
          overflow: auto;
      }
      .dashboardBody .header{
          display: block;
      }
      /*--- end styles to ensure natural, relative scrolling on mobile --*/
      .registration-header-wrap{
          padding-top: 40px;
          padding-bottom: 40px;
      }
      .overflowHiddenOnMobile{
          overflow: hidden !important;
      }
      .centeredOnMobile{
          margin-left: auto;
          margin-right: auto;
      }
      .hundopOnMobile{
          width: 100%;
      }
      .showOnMobile{
          display: block;
      }
      .tinyMarginTopOnMobile{
          margin-top: 5px;
      }
      .smallMarginTopOnMobile{
          margin-top: 20px;
      }
      .hugePaddingBottomOnMobile{
          padding-bottom: 100px;
      }
      .panelWrap.mobile-order-summary-body{
          top: 101px;
      }
      .cart-header{
          height: 50px;
          line-height: 50px;
      }
      .cart-icon{
          margin-top: 12px;
      }
      .flexibleLeftMenu{
          z-index: 105;
          width: 80%;
          min-width: 80%;
          max-width: 80%;
          left: -120%;
          padding-top: 10px;
          background-color: rgba(250,250,251,1);
          position: fixed;
      }
      #accountPicker, #tapAddClubAccount{
          background-color: #fff;
      }
      .flexibleLeftMenu.expanded{
        left: 0px;
      }
      .standardContentZone .contentBlock{
          padding-top: 50px;
      }
      .standardContentZone .contentBlock.lessPadding{
          padding-top: 30px;
      }
      .flexibleLeftMenuMobileSpacer{
          height: 50px;
      }
      .heroBannerWrap{
          padding-top: 0px;
          padding-bottom: 0px;
          width: 100%;
      }
      .crossSectionWrap{
          padding-left: 0px;
          padding-right: 0px;
      }
      .crossSectionWrap.reservations-version{
        padding-top:0px;
      }
      .crossSectionTextWrap{
          padding-top: 0px;
          padding-bottom: 0px;
      }
      .hideOnMobile{
          display: none !important;
      }
      .inputWrap.searchBar{
          min-width: 160px;
      }
      .product-card-badge{
          display: none;
      }
      .header h1{
          font-size: 20px;
          line-height: 54px;
          font-weight: bold;
          padding-left: 10px;
          text-align: center;
          text-transform: uppercase;
      }
      .longFormBlock h1.interject{
          font-size: 26px;
          line-height: 42px;
      }
      .header .smallIcon, .header .cs-header-icon{
          visibility: hidden;
      }
      .header .smallIcon.burgee, .header .cs-header-icon.burgee{
          position: relative;
          top: -8px;
          margin-left: auto;
          margin-right: auto;
          visibility: visible;
      }
      .header .smallIcon.burgee.left{
          position: relative;
          margin-left: 15px;
          margin-right: initial;
      }
      .header, .header.opaque, .header.promoActive.opaque, .header.stayOpaque{
          height: 50px;
          text-align: center;
      }
      .paddingTopHeader{
          padding-top: 55px;
      }
      .header.promoActive{
          height: 78px;
      }
      .mobile-order-summary{
          top: 50px;
      }
      .menuCard .CTAWrap{
          background-color: rgba(255,255,255,0.85) !important;
          opacity: 1 !important;
      }
      .messageWrap{
          margin-top: 20vh;
      }   
      .heroBanner{
          padding-top: 150px;
          padding-bottom: 150px;
      }
      .longFormBlock h1.heroBannerHeader, .heroBannerHeader{
          background-color: rgba(0,0,0,0);
          color: #fff;
          font-size: 48px;
          line-height: 60px;
      }
      .imageOverlay.darkerOnMobile {
          background-color: rgba(0, 0, 0, 0.4);
      }
      .indexCardTextWrap{
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .crossSectionTextWrapMobile{
          padding-top: 25px;
          padding-left: 25px;
          padding-right: 25px;
      }
      .hpProductImage{
          width: 200%;
          background-position-x: left;
          top: 400px;
          right: auto;
          left: auto;
          left: 15%;
      }
      .pricingProductImage{
          top: 300px;
      }
      .flexNoWrap.flexWrapOnMobile{
          -webkit-flex-flow: row wrap;
          -moz-flex-wrap: wrap;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      }
      .noMarginLeftOnMobile{
          margin-left: 0px !important;
      }
      .container-for-register{
          padding-left: 10px;
          padding-right: 10px;
      }
      .sticky-column p{
        min-width: auto !important;
        white-space: initial;
      }
  }
  
  @media all and (max-width: 650px) {
      #guaranteeHeader{
          font-size: 90px;
          margin-top: -130px;
      }
      .barWrap{
          margin-left: 30px;
          margin-right: 30px;
      }
      .table-view-row-content-body-inner{
          padding-left: 20px;
          padding-right: 20px;
          padding-top: 15px;
      }
      .minThreeHundoThenNone{
          min-width: 0px;
      }
      .micro-site-content-wrap{
          padding-left: 20px;
          padding-right: 20px;
      }
  }

  @media all and (max-width: 780px) {
    .cardHeaderButton.second-from-right{
        right: 60px !important;
    }
    .cardHeaderButton.third-from-right{
        right: 106px !important;
    }
    .cardHeaderButton{
        max-width: 30px;
        padding-right: 0px;
        color: rgba(255,255,255,0);
        overflow: hidden;
    }
    #tapFilterData_membership{
          right: 60px;
      }
    #tapFilterData_email_list{
        right: 60px;
    }
      #tapEmail_membership{
          right: 106px !important;
      }
      #tapFilterData_registrations, .cardHeaderButton.second-from-right{
          right: 60px;
      }
      .tappedPublishUnpublish{
          right: 84px;
      }
      .cardHeaderButtonDropdown.second-from-right{
          right: 44px;
      }
  }

  @media all and (max-width: 940px) {
    #tapFilterData_line_items{
        right:60px !important;
    }
    #tapFilterData_gl_codes{
        right:60px !important;
        max-height: 34px;
    }
    .view_line-items .cardHeaderButton{
        max-width: 30px;
        padding-right: 0px;
        color: rgba(255,255,255,0);
        overflow: hidden;
    }
    .view_gl-codes .cardHeaderButton{
        max-width: 30px;
        padding-right: 0px;
        color: rgba(255,255,255,0);
        overflow: hidden;
    }
    .date-picker-date-item{
        background: url(https://d282wvk2qi4wzk.cloudfront.net/imageSingle_component-image_1578127757071);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 13px;
        height: 20px;
        width: 20px;
        background-position-y: 6px;
        font-size: 0px;
    }
    .date-picker-date{
        height: 30px;
        width: 30px;
    }
  }
  
  @media all and (max-width: 500px) {
      .sticky-column{
        max-width: 60px;
      }
      .inline-label{
          min-width: 150px;
          max-width: 150px;
      }
      .crossSection.micro-site-version{
          margin-left: auto !important;
          margin-right: auto !important;
          min-height: 400px;
      }
      .event-card{
          min-width: 375px;
          margin-left: 25px;
          margin-right: auto;
      }
      .event-card-image{
          min-height: 250px;
      }
      .standardCardBody{
          padding-left: 15px;
          padding-right: 15px;
      }
      .table-view-row-content-body-inner{
          padding-left: 0px;
          padding-right: 0px;
          padding-top: 5px;
      }
      .hideOnEvenSmaller{
          display: none !important;
      }
      .header-image-v2{
          min-height: 330px;
          min-width: 300px;
      }
      .header-image-v2.shorter{
          min-height: 200px;
      }
      .header-image-v2.default-image-icon{
          min-height: 0px;
      }
      .customerGrid.lower{
          top: 435px;
      }
      .crossSectionWrap{
          padding-top: 0px;
      }
      .eightyThenNinety{
          width: 95%;
      }
      .eightyThenNinetyTrue{
          width: 92%;
      }
      .indexCardTextWrap{
          padding-top: 30px;
          padding-bottom: 30px;
      }
      .hpIndexCard{
          width: 100%;
          margin-top: 0px;
      }
      .indexCardTextWrap{
          max-width: 450px;
      }
      #guaranteeHeader{
          font-size: 60px;
          margin-top: -125px;
      }
      .frameInner{
          padding: 30px;
      }
      .toggle{
          margin: 5px;
          font-size: 18px;
      }
      .messageWrap{
          margin-top: 10vh;
      } 
  
      .product-card{
          padding-left: 65px;
          margin: 15px;
      }
  
      .product-card.has-photo{
          padding-right: 30px;
          padding-left: 30px;
      }
  
      .product-card-icon{
          width: 40px;
      }

      .centeredUnderFiveHundo{
          margin-left: auto;
          margin-right: auto;
      }
  
      /*-- mobile hero banner styles --*/
      .heroBanner{
          padding-top: 110px;
          padding-bottom: 60px;
      }
      .frameOuter{
          max-width: 100%;
          width: 100%;
          padding: 0px;
          border: 0px;
          margin-top: 150px;
      }
      .frameInner{
          background-color: rgba(255,255,255,0.9);
      }
  
      .annotateRight{
          right: -40px;
          font-size: 12px;
      }
  
      .annotateLeft{
          left: -40px;
          font-size: 12px;
      }
      /*----- this is for the dashboard header where we swap in titles like an ios app ------- */
  
      .swapOutOnMobile{
          display: none;
      }
  
      #headerTitleInsert{
          font-size: 20px;
          line-height: 54px;
          font-weight: bold;
          padding-left: 60px;
          text-align: center;
          text-transform: uppercase;
          display: block;
          text-align: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
      }
      .pricingProductImage{
          top: 300px;
      }
  }

  @media all and (max-width: 470px){
    .longFormBlock h1{
          font-size: 32px;
          line-height: 40px;
      }
  }
  
  @media all and (max-width: 400px){
      .noPaddingLeftRightOnMobile{
          padding: 0px !important;
      }
      .pricingProductImage{
          top: 255px;
      }
      .standardContentZone .contentBlock{
          padding-left: 5px;
          padding-right: 5px;
      }
      .event-card{
          min-width: 280px;
          margin-left: auto;
          margin-right: auto;
      }
  }
  
  @media all and (max-width: 375px){
      .hpProductImage{
          left: 5%;
          background-size: cover;
          top: 400px;
      }
  }
  
  
  /*----------Reservations-----------*/

  .availabilityButton{
      display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4c58a7;
    width: 65px;
    line-height: 35px;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid #4c58a7;
  }

  .availabilityButton p{
    color: #fff;
    font-weight: 500;
    font-family: 'roboto';
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .timeBlockTablePicker{
    color: #fff;
    background-color: #4c58a7;
    border: 1px solid #4c58a7;
    width: 100px;
    line-height: 22px;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    font-family: 'roboto';
    margin: 0px;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
  }

  .availabilityButton.booked{
       background-color: #f3f5f7;
      cursor: default;
      border: 1px solid #e3e9ef;
      /*
      background-color: grey;
      */
  }

  .timeBlockTablePicker.booked{
      background-color: #f3f5f7;
      cursor: default;
      border: 1px solid #e3e9ef;
      /*
      background-color: grey;
      */
  }

  .timeBlockTablePicker.booked, .availabilityButton.booked p {
    color: #646a79;
  }  

  .availabilityButtonsContainer{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
  }

  @media all and (max-width: 1100px) {
      .fullPageAskewView{
          display: none;
      }
      .mobilePageAskewView{
          display: block;
      }
  }