/*------------------------------ 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: 'roboto';
  }

  ol{
    list-style-position: inside;
  }

  h1, h2, h3, h4{
    font-weight: normal;
  }

  h2{
      font-size: 34px;
  }

  *{
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .aspect-one{
    aspect-ratio: 1 / 1;
  }

  select{
      border: none;
      background-color: #fff;
      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;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 12px;
      padding-right: 12px;
      font-family: 'roboto';
      font-weight: normal;
  }

  .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,
  .transportationSelect:hover .selectArrow{
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
  }

  td .selectArrow{
    top: 5px;
  }

  .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);
  }

  .relativeArrowWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /* transition: top ease 2s; */
    cursor: pointer;
  }

  .relativeArrowWrap:hover .selectArrow.increment {
    justify-content: center;
    align-items: center;
    top: -5px;
  }

  .relativeArrowWrap:hover .selectArrow.decrement {
    justify-content: center;
    align-items: center;
    top: 5px;
  }

  .selectArrow.increment {
    transform: rotate(90deg);
    position: relative;
    right: 0px;
    top: 0px;
    background-size: 22px;
    height: 24px;
    width: 24px;
    transition: top ease .5s;
  }

  .selectArrow.decrement {
    position: relative;
    right: 0px;
    top: 0px;
    background-size: 22px;
    height: 24px;
    width: 24px;
    transition: top ease .5s;
  }

  p.bigBlue {
    font-weight: 500;
    color: rgb(42, 55, 95);
    font-size: 34px;
  }

  .flexCenteredColumn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .flexCenteredColumn ._20p{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexCenteredColumn ._60p{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* @keyframes bounceUpDown {
    from {
      margin-top: -5px;
    }

    to {
      margin-top: 5px;
    }
  } */

  select.bigger{
      font-size: 22px;
      padding-top: 12px;
      padding-bottom: 12px;
  }

  ul{
      text-align: left;
      padding-left: 30px;
  }

  sup{
      font-family: 'roboto';
      font-weight: normal;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-size: 11px;
      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;
  }

  /*------------------------------ v3 marketing styles ---------------------------- */

  .splash-hero-wrap-v3{
    min-height: max(100vh, 500px);
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .splash-image-slider-wrap-v3{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
  }

  .splash-image-slider-card{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 100%;
  }

  .splash-image-slider{
    height: 100%;
  }


  .splash-image-overlay{
    opacity: 20%;
    background-color: #141a21;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }

  .splash-element-wrapper{
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    min-width: 280px;
    padding: 20px;
    position: relative;
    text-align: left;
    overflow: hidden;
    color: #fff;
  }

  .splash-element-wrapper h1{
    margin-bottom: 10px;
    line-height: 55px;
    font-size: 50px;
    font-family: Montserrat;
    font-weight: bold;
    letter-spacing: -1px;
  }

  .splash-element-wrapper h2{
    font-weight: normal;
    font-size: 26px;
    text-align: center;
    font-family: 'roboto';
    font-weight: normal;
  }

  .splash-button.green{
    background-color: #15d27b !important;
    border: 2px solid #15d27b !important;
  }

  .splash-button.red{
    background-color: #c60707 !important;
    border: 2px solid #c60707 !important;
  }

  .splash-button.red:hover{
    color: #fff !important;
    background-color: #a60808 !important;
    border: 2px solid #a60808 !important;
  }

  .splash-button.blue{
    background-color: #4a56f8 !important;
    border: 2px solid #4a56f8 !important;
  }

  .splash-button.blue:hover{
    color: #fff !important;
    background-color: #3843d3 !important;
    border: 2px solid #3843d3 !important;
  }

  .splash-button{
    margin: 10px !important;
    border: 2px solid #fff !important;
    background-color: rgba(255,255,255,0) !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    /*
    border-radius: 0px !important;
    */
  }

  .splash-button.on_light{
    color: #1b2556 !important;
    border: 2px solid #1b2556 !important;
  }

  .splash-button.on_light:hover{
    background-color: #1b2556 !important;
    color: #fff !important;
  }

  .splash-button:hover{
    background-color: #fff !important;
    color: #283664 !important;
    -webkit-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
       -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  .splash-button.on-light:hover{
    background-color: #283664 !important;
    color: #fff !important;
  }

  .splash-button.on-light{
    border: 2px solid #3d4b88 !important;
    color: #273665 !important;
  }

  .splash-background-image-photo{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
  }

  .splash-video{
    display: initial;
    position: absolute;
    min-width: 100%;
    bottom: 0;
  }


  /*------------------------------ fonts ---------------------------- */

  .capitalize{
      text-transform: capitalize;
  }

  .capitalize-first-letter{
      display: block;
      text-transform: lowercase;
  }

  .capitalize-first-letter:first-letter{
      text-transform: capitalize;
  }
  
  .blockLetters{
      font-weight: 400;
      text-transform: uppercase;
      font-size: 15px;
      line-height: 24px;
      font-family: 'roboto';
      font-weight: normal;
      color: #292e4a;
  }

  .blockLetters.moreLineHeight{
      line-height: 41px;
  }

  .smallBlockLetters {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      text-transform: uppercase;
      font-family: 'roboto';
      font-weight: normal;
      color: #292e4a;
  }

  .inline-date-time-picker select{
    box-shadow: none;
    /* color: #4a56f8; */
    font-size: 15px;
    background-color: #f6f6f7;
    border-radius: 5px;
    overflow: hidden !important;
    margin:3px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .inline-date-time-picker p{
    font-size:15px;
  }

  .inline-date-time-picker select:hover{
    box-shadow: none;
    color: #080852;
    -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
  }

  .standardOverlay .section-header, 
  .standardOverlay_v2 .section-header{
      /*
      border-bottom: 1px solid #b7c1d0;
      display: inline-block;
      */

      padding-left: 8px;
      border-left: 4px solid #728394;

  }

  .standardCardBody .section-header-v3{
    padding-left: 22px;
    border-bottom: 1px solid #e4ebf1;
    line-height: 40px;
    font-size: 16px;
    color: #728394;
    text-align: left;
    font-family: 'roboto';
    font-weight: normal;
  }

  .standardOverlay.no-fade-on-click{
    cursor: initial !important;
  }

  .mediumBlockLetters{
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'roboto';
      font-weight: normal;
      color: #292e4a;
  }

  .largeBlockLetters{
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'roboto';
    font-weight: normal;
    color: #292e4a;
}

  .uppercase{
      text-transform: uppercase;
  }

  .successText{
      font-size: 18px;
    line-height: 28px;
    color: #606d7c;
  }

  .successText strong{
    font-weight: normal !important;
  }

  .fine-print{
      font-size: 10px;
      line-height: 18px;
      color: #647282;
  }

  .explain-large{
      font-size: 26px;
      line-height: 32px;
      font-weight: bold;
      color: #647282;
  }

  .modern{
    /*
    font-family: 'modern', 'sans-serif';
    */
    font-family: 'roboto', 'sans-serif';
    -webkit-font-smoothing: antialiased;
  }

  .interject{
      line-height: 54px;
  }

  .report-section-header{
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 1px solid #e4ebf1;
  }

  .report-section-header p{
    text-transform: uppercase;
    color: #2a3664;
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: bold;
  }

  .report-section-header_tag{
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    font-size: 13px;
    padding-top: 15px;
    text-transform: uppercase;
  }

  .race-metadata-wrap{
    border: 1px solid #e4ebf1;
    border-radius: 5px;
    margin: 12px;
  }

  .report_sections_wrap td.width-70, .report_sections_wrap th.width-70{
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .merged-cell-header{
    text-align: center;
    font-size: 11px;
    color: #081333;
    border-right: 1px solid #e4ebf1;
    border-bottom: 1px solid #e4ebf1;
    text-decoration: underline;
    font-weight: 400;
  }
  
  .th-border-right{
    border-right: 1px solid #e4ebf1;
  }

  .td-padding-bottom td{
    padding-bottom: 14px;
  }

  .report_sections_wrap td.width-100, .report_sections_wrap th.width-100{
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .report_sections_wrap td .tooltipText{
    width: auto;
    margin: 0px;
    right: auto;
    left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    bottom: auto;
    top: -15px;
    color: #656a7a;
  }

  .report_sections_wrap td:hover .tooltipText{
    opacity: 1;
    visibility: visible;
    top: -29px;
  }

  .report_sections_wrap td .tooltipText::after{
    left: 10px;
    margin-left: 0px;
  }

  /*
  .reportSectionSummaryRow, 
  .reportTagSummaryRow{
    border-top: 2px solid #e8edf1 !important;
  }
  */

  .reportSectionProductRow_option,
  .reportSectionProductRow_option td
  .order-rollup-line-item-row,
  .order-rollup-line-item-row td
  {
    background-color: #fafafa !important
  }

  .reportSectionProductRow_option,
  .order-rollup-line-item-row
  {
    display: none;
  }

  .reportSectionProductRow .standardBackButton,
  .order-rollup-row .standardBackButton,
  .customerBalanceTransactionRow .standardBackButton,
  .transactionRow .standardBackButton
  {
    position: absolute !important;
    right: 0px !important;
    height: auto !important;
    top: 0px !important;
    bottom: 0px !important;
    margin-top: 0px !important;
    padding-right: 12px !important;
    padding-left: 10px !important;
    background-position-x: center !important;
  }

  .reportSectionProductRow_option.active,
  .order-rollup-line-item-row.active
  {
    display: table-row;
  }

  .reportSectionSummaryRow p,
  .reportTagSummaryRow p {
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    font-size: 15px;
  }

  .sectionHeader{
      padding-bottom: 10px;
      display: inline-block;
      text-transform: uppercase;
      font-size: 30px;
      color: #273665;
      letter-spacing: .125em;
      line-height: 40px;
      font-weight: normal;
  }

  .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: #4a56f8;
      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: normal;
      color: #626f7d;
  }

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

  .noObjectsMSG a{
    font-weight: 400;
    letter-spacing: 0px;
  }

  .subtext{
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      color: #606d7c;
  }

  .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;
    */

    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .accordionBody {
      color: #525e6b;
  }

  .subtext .dark{
      color: #333;
      font-family: 'montserrat';
      font-size: 18px;
  }

  .subtext.smaller, .cardBodyText{
      font-size: 18px;
      line-height: 26px;
      color: #525e6b;
  }

  .subtext.evenSmaller{
      color: #798a98;
      font-size: 16px;
  }

  .note p{
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 15px;
      color: #525e6b;
      font-family: 'Montserrat';
  }

  .greenFont, .statusText.green, .tableTapCell.green, .tableNonTapCell.green, .tableNonTapCell.greenFont, .pageStatus.greenFont, .cart-body .price.green, .product-explain.green{
      color: #26a326 !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;
      */
      padding-left: 22px;
      padding-right: 22px;

      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: #4a56f8 !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-left: 22px;
      padding-right: 22px;

      padding-top: 7px;
      padding-bottom: 7px;
      vertical-align: top;
  }

  td.vertical-align-middle{
    vertical-align: middle;
  }

  .align-items-center, 
  .powered_by_wrap .flexNoWrap{
    align-items: center;
  }

  .align-items-baseline{
    align-items: baseline;
  }

  td.lessPadding, .mock-td.lessPadding, th.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: #f6f8f9;
      border-bottom: 1px solid #e4ebf1;
  }

  .mock-table-header-row{
      /*
      padding-left: 30px;
      padding-right: 30px;
      */
      padding-left: 22px;
      padding-right: 22px;

      background-color: #f6f8f9;
      border-top: 1px solid #e4ebf1;
  }

  .tableRow{
      text-align: left;
      border-bottom: 1px solid #e8edf1;
      font-size: 15px;
      line-height: 22px;
  }

  .tableRow.unsaved{
      background-color: ghostwhite !important;
  }

  .tableRow.clubMemberRow.reciprocal, .tableRow.callout{
      border-left: 4px 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: normal;
    font-weight: 500;
    font-size: 15px;
  }

  .tableRow td.vertical-merge p{
    font-family: 'roboto';
    font-weight: normal;
    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: #525e6b;
  }

  tr p,
  .table-view.tighter .table-view-row p,
  td select,
  .accordionBody .tableRow p
  {
      border: none;
      white-space: nowrap;
      padding-top: 2px;
      padding-bottom: 2px;
      color: #525e6b;
      font-size: 16px;
  }

   tr p a, .table-view.tighter .table-view-row p a{
      font-size: 15px;
      color: #4a56f8;
      font-family: 'roboto';
      font-weight: normal;
      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{
      padding-right: 0px;
      padding-left: 22px;
      /*
      width: 10px;
      padding-right: 0px;
      */
  }

  td.flexFirstCell{
    display: inline-flex;
    align-items: left;
  }

  td.drag-handle-cell{
    text-align: center;
    vertical-align: middle;
    width: 35px;
  }

  .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;
  }

  .table-view.lessPaddingForRows .table-view-row{
    padding-left: 20px;
    padding-right: 20px;
  }

  .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;
      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;
  }

  .table-cell-subtext{
    font-size: 13px;
    padding: 0px;
    font-weight: normal;
    color: #969cac !important;
    font-family: 'roboto';
  }

  .tableTapCell.incomplete, .tableNonTapCell.incomplete, .subtext.incomplete, p.incomplete, .table-row.incomplete p, tr.incomplete p, h4.incomplete, i.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' !important;
      line-height: 18px;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 11px !important;
  }
  .tapped_add_member_group,
  .tapped_add_member_tag,
  .tapped_add_event_tag
  {
    background-color: #fff !important;
    border: 1px dashed #bcc1cd;
    padding-right:8px !important;
  }

  /* -- event orders -- */

  .event_order_iframe{
    width: 100%;
    min-height: 100vh;
    border: none;
  }

  .accordionHeader.active .package-product-count{
    color: #fff;
  }

  .event_order_sub_header {
    font-family: 'roboto';
    font-weight: normal;
    line-height: 20px;
    color: #728394;
    margin-bottom: 5px;
    padding-left: 30px;
    font-size: 14px;
    margin-top: -10px;
  }

  .accordionBody p.already-added-name-insert {
    font-family: 'roboto';
    font-weight: normal;
    line-height: 20px;
    color: #728394;
    margin-bottom: 5px;
    font-size: 14px;
    margin-top: 5px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .package-product-count {
    font-family: 'roboto';
    font-weight: normal;
    line-height: 14px;
    color: #728394;
    margin-bottom: 5px;
    font-size: 12px;
    text-transform: uppercase;
  }

  .accordionHeader.package-header{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 12px;
    padding-top: 12px;
    line-height: 30px;
    border: 1px solid #e4ebf1;
    border-radius: 3px;
  }

  .package-wrap{
    margin-bottom:10px;
  }

  .package-header .accordionToggle{
    font-size: 18px;
    position: relative;
    top: 0px;
    margin-right: 10px;
    right: 0px;
    height: 34px;
    line-height: 34px;
  }

  /*-------------------- 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: 60vh !important;
  }

  .mce-modal-block{
      background: #000 !important;
  }

  .mce-notification-error *, .mce-notification-error .mce-progress .mce-text{
      display: none !important;
  }

  #email-builder iframe{
    min-width: initial !important;
  }

  #email-builder .blockbuilder-preview{
    right: 70px !important;
  }

  .email-content-container,
  .sms-content-container
  {
      display: flex;
      border-bottom: 1px solid #e8edf1;
      background-color: #fff;
      z-index: 9999;
  }

  .email_header_field,
  .sms_header_field {
      line-height: 44px;
    padding-left: 12px;
    font-size: 14px;
    min-width: initial !important;
  }

  .emailContentHeader,
  .smsContentHeader {
      display: flex;
      font-size: 16px;
      line-height: 28px;
      padding-top: 8px;
      padding-bottom: 8px;
  }

  .recipientContentHeader,
  .recipientContentHeader_sms
   {
    overflow: hidden;
    height: 28px;
    cursor: inherit;
    padding-bottom:0px;
  }

  .recipientContentHeader.expanded,
  .recipientContentHeader_sms.expanded{
    height: 90px;
  }

  .unicodeX{
      cursor: pointer;
  }

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

  .emailOverflowCount,
  .sesEmailOverflowCount,
  .smsOverflowCount {
    border: 1px solid black;
    cursor: pointer;
    margin-right: 10px;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
    max-height: 28px;
  }

  .emailUnableToSendCount {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    flex-flow: wrap;
    margin-right: 10px;
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 6px;
    max-height: 28px;
    color: #728394; 
    font-size: 13px; 
  }
  /* -------------------- 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';
     */
     font-family: 'roboto';
  }

  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';
     */
     font-family: 'roboto';
     font-weight: normal;
  }

  input:-ms-input-placeholder {
     color: #9ca4b7;
     font-size: 16px;
     font-weight: 300;
     /*
     font-family: 'modern';
     */
     font-family: 'roboto';
     font-weight: normal;
  }


  .ip-input {
    position: relative !important;
    width: 2.5em;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 1rem;
  }

  .ip-input-group {
    padding-top: 5px;
    display: flex;
    align-items: center;
  }

  .ip-input-group input[type="text"] {
    border: none !important;
    font-size: 22px;
  }

  .ip-input-group input[type="text"]:last-child {
    margin-right: 0;
    border-right: 1px solid #ccc;
  }

  .ip-input-group span {
    display: inline-block;
    width: 1px;
    background-color: #ccc;
    height: 1.5em;
  }

  /* ----- START "skeleton screen" loading ----*/

  .coming-soon, 
  .card-header-subtext.coming-soon{
    position: relative;
    background-color: #e8edf1;
    color: rgba(255,255,255,0) !important;
    margin-right: 25px;
    border-radius:5px;
    overflow: hidden;
  }

  .coming-soon p {
    color: rgba(255,255,255,0) !important;
  }

  .coming-soon::after {
    background: linear-gradient(40deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    top: 0px;
    left: 0px;
    animation: coming_soon 0.75s infinite;
  }

  /* Loading Animation */
  @keyframes coming_soon {
      100% {
          transform: translateX(100%);
      }
  }

  /* ----- END "skeleton screen" loading ----*/

  .color-swatch-label{
    line-height: 34px;
    font-family: roboto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    color: #293135;
  }

  .color-swatch{
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background-color: #ddd;
    margin-top: 3px;
  }

  .color-swatch-wrapper .standardBackButton{
    margin-left: 0px;
    margin-right: 5px;
    background-size: 16px;
  }

  .color-swatch-wrapper .absoluteA{
    opacity: 0;
    width: 100%;
    cursor: pointer;
  }

  @-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{
    word-break: break-word; /* Allows long words to break */
    overflow-wrap: break-word; /* For older browser compatibility */
    hyphens: auto; /* Inserts hyphens where words break */
  }

  textarea{
      border: none;
      padding: 15px;
      border-radius: 2px;
      font-size: 16px;
      line-height: 24px;
      /*
      font-family: 'modern';
      */
      font-family: 'roboto';
      font-weight: normal;
      outline: none;
      resize: none;
  }

  .checkboxText{
    display: inline-block;
    padding-left: 8px;
    line-height: 25px;
    color: #52606e;
    font-family: 'roboto';
    font-weight: normal;
    font-size: 15px;
    font-weight: 200;
  }

  .checkboxText a{
    font-weight: normal !important;
  }

  .standardCheckbox{
      margin-top: 5px;
  }

  .textareaWrap{
      border-radius: 5px;
      padding-top: 12px;
      padding-bottom: 12px;
      min-width: 100px;
      position: relative;
      background-color: #fff;
      height: 100px;
  }

  .shake{
      -webkit-animation: shake 0.5s linear;
  }
  .dateInput .inputWrap,
  .standardCardBody .inputWrap, 
  .standardCardBody .textareaWrap, 
  .standardCardBody .vue-input-wrap{
      border: 1px solid #e4ebf1;
  }
  
  .inputWrap,
  .vue-input-wrap{
      border-radius: 5px;
      padding-top: 12px;
      padding-bottom: 12px;
      height: 35px;
      min-width: 100px;
      position: relative;
      background-color: #fff;
  }
  .tiny-vue-input-wrap{
    border-radius: 5px;
    height: 35px;
    position: relative;
    background-color: #fff;
}

  .inputWrap.onWhite, 
  .textareaWrap.onWhite,
  .vue-input-wrap.onWhite  {
      border: 1px solid #bdcad6;
  }

  /*--------- searchbar inputs ----- */

  .inputWrap.searchBar{
      height: 28px;
      padding-top: 4px;
      padding-bottom: 4px;
      min-width: 240px;
  }

  .inputWrap.searchBar_web::after, 
  .searchBarWrap.icon-v2::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;
  }
  .inputWrap.searchBar.left-align::after{
    left: 8px;
  }

  .inputWrap.searchBar.left-align input{
    left:0px;
  }


  .inputWrap.overlaySearchBar::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 24px;
    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, .inputWrap.searchBar.higher_icon::after{
    top: 18px;
  }

  .contentZoneHeader .inputWrap.pos-v5-search::after{
    top: 15px;
  }

  .contentZoneHeader.pos-v5-content-zone-header{
    height: 35px;
    border-bottom: 1px solid #e8edf1;
  }

  .pos-v5 .contentZoneHeader{
    padding-left: 10px;
    padding-right: 10px;
  }

  .pos-v5 .secondaryButton.outline{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pos-v5 .standardCard{
    overflow: hidden;
  }

  .inputWrap.pos-v5-search{
    height: 44px;
    margin-top: -4px;
    margin-bottom: -4px;
    padding: 0px;
  }

  .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;
      color: #626f7d;
  }

  .inputWrap.searchBar input::-webkit-input-placeholder {
    font-size: 16px;
    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;
  }

  /* ------- inline-search for slimmer searchars underneath the card header but above the table view ---------------*/

  .searchBarWrap.inline-search .inputWrap.searchBar::after{
      left: 22px;
      top: 16px;
  }

  .searchBarWrap.inline-search{
    margin-top: -10px;
  }

  .searchBarWrap.inline-search,
  body.v3 .searchBarWrap.inline-search{
    padding-bottom: 5px;
    border-bottom: none !important;
  }

  .searchBarWrap.inline-search input{
    padding-left: 45px !important;
    left: 0px !important;
    font-size: 15px;
  }

  body.v3 .searchBarWrap.inline-search input::-webkit-input-placeholder,
  .searchBarWrap.inline-search input::-webkit-input-placeholder
  {
    font-size: 16px !important;
  }

  body.v3 .searchBarWrap.inline-search .inputWrap.searchBar{
    height: 44px !important;
    padding-top: 0px;
    width: initial !important;
    padding-bottom: 0px;
  }

  .searchBarWrap.inline-search .posScrollbarItem, 
  .posScrollbarItem.mobile-order.smaller {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 11px;
    padding-right: 11px;
  }

  /*--------- inline tab bar at the top of tables for quick filtering ----- */

  .table-tab-option, 
  .table-tab-option.no-hover:hover{
    cursor: pointer;
    color: #6a7482;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    font-size: 16px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: #fff;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 24px;
  }

  .table-tab-option.bigger, 
  .table-tab-option.bigger.no-hover:hover{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 30px;
    border-bottom: 2px solid rgba(255,255,255,0);
  }

  .table-tab-option-subtext{
    font-size: 12px;
    line-height: 14px;
    padding-bottom: 3px;
    color: #76828f !important;
  }

  .table-tab-option:hover,
  .table-tab-option.bigger:hover
  {
    color: #081333;
    border-bottom: 2px solid #081333;
  }

  .table-tab-option.active,
  .table-tab-option.bigger.active{
    color: #4a56f8;
    border-bottom: 2px solid #4a56f8 !important;
  }

  .table-tab-option.active p{
    color: #4a56f8 !important;
  }

  .posScrollbar.table-tab-wrap{
    padding-bottom: 15px;
  }

  .table-tab-inner{
    border-bottom: 1px solid #e4ebf1;
  }

  /*--------- end searchbar inputs ----- */



  /*------------- slider inputs ---------------*/

  input[type=range]{
    pointer-events: none;
  }
  input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
    pointer-events: auto;
  }
  input[type=range]::-moz-range-thumb{/*Firefox*/
    pointer-events: auto;
  }
  input[type=range]::-ms-thumb{/*Internet Explorer*/
    pointer-events: auto;
  }

  .range-slider-range::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
  }

  .range-slider-range::-webkit-slider-thumb:hover {
    background: #5280ff;
  }

  .range-slider-range:active::-webkit-slider-thumb {
    background: #5280ff;
  }

  .range-slider-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
  }

  .range-slider-range::-moz-range-thumb:hover {
    background: #5280ff;
  }

  .range-slider-range:active::-moz-range-thumb {
    background: #5280ff;
  }

  .range-slider-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff,
                0 0 0 6px #2c3e50;
  }

  .range-slider-range {
    -webkit-appearance: none;
    width: 70%;
    height: 6px;
    border-radius: 5px;
    background: #e5eaee;
    outline: none;
    padding: 0;
    margin: 0;
  }

  .range-slider-value {
    display: inline-block;
    position: relative;
    width: auto;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: bold;
    font-size: 14px;
  }

  .range-slider-value:after {
    position: absolute;
    top: 10px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
  }


  /*-- firefox ---*/
  ::-moz-range-track {
      background: #d7dcdf;
      border: 0;
  }

  input::-moz-focus-inner,
  input::-moz-focus-outer {
    border: 0;
  }

  .inputWrap.secondary{
      height: 28px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 75px;
  }

  .inputCurrencySymbol.secondary{
      line-height: 40px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 20px;
  }

  .inputWrap.missingField,
  .vue-input-wrap.missingField{
      -webkit-animation: shake 0.5s linear;
      border: 1px solid #c34e4e !important;
  }

  .inputWrap.checkoutInputWrap{
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
  }

  .inputWrap select,
  .vue-input-wrap select{
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      padding-left: 15px;
      width: 95%;
      font-size: 22px;
      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,
  .vue-input-wrap select:hover
  {
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
  }

  .inputWrap select,
  .vue-input-wrap select{
      z-index: 5;
  }

  .inputWrap input, 
  .textareaWrap textarea,
  .vue-input-wrap input
  {
      position: absolute;
      top: 0px;
      height: 100%;
      left: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      bottom: 0px;
      
      /*
      padding-left: 15px;
      width: 90%;
      */
        width: 100%;
        padding-left: 15px;
        box-sizing: border-box;

      font-size: 22px;
      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;
      height: 20px;
      line-height: 20px;
      z-index: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
  }

  textarea::placeholder, 
  input::placeholder{
    color: #8493a0;
  }

  .inputWrapFull .inputLabel,
  .textareaWrapFull .inputLabel, 
  .vue-input-wrap input:focus + .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';
      */
      font-family: 'roboto';
      font-weight: normal;
  }

  .easy-autocomplete-container li{
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  /*------------------------ positioning --------------------- */

  .relative{
      position: relative;
  }

  .inline{
    display: inline;
  }

  .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;
  }

  .smallMarginRight{
    margin-right: 11px;
  }

  .marginTen{
      margin: 10px;
  }

  .marginTwenty{
      margin: 20px;
  }

  .maxFifty{
    max-width: 50px;
  }

  .maxOneHundo{
      max-width: 100px;
  }

  .maxOneFifty{
      max-width: 150px;
  }

  .maxTwoHundo{
      max-width: 200px;
  }

  .maxTwoFifty{
      max-width: 200px;
  }

  .maxTwoFiftyTrue{
      max-width: 250px;
  }

  .minTwoSeventyFive{
      min-width: 275px;
  }

  .maxTwoSeventyFive{
      max-width: 275px;
  }

  .maxThreeHundo{
      max-width: 300px;
  }

  .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;
  }

  .minOneHundo{
    min-width: 100px;
  }

  .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: 1px solid #e4ebf1;
  }

  .borderTop{
      border-top: 1px solid #e4ebf1;
  }

  .borderLeft{
      border-left: 1px solid #d7dee4;
  }

  .lightBorderBottom{
        border-bottom: 1px solid #e4ebf1;
    }

  .lightBorderTop{
      border-top: 1px solid #e4ebf1;
  }

  .lightBorderRight{
    border-right: 1px solid #e4ebf1;
  }
  .lightBorderLeft{
    border-left: 1px solid #e4ebf1;
  }

  .lightBorderAllAround{
      border: 1px solid #e4ebf1;
  }

  .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;
  }
 
  .noMarginBottom{
        margin-bottom: 0px !important;
    }

  .noMarginLeft{
      margin-left: 0px !important;
  }
  .noMarginRight{
    margin-right: 0px !important;
  } 

  .noMarginLeftRight{
      margin-left: 0px !important;
      margin-right: 0px !important;
  }

  .noPaddingRight{
      padding-right: 0px !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;
  }

  .margin-2{
    margin: 2px;
  }

  .tiniestPaddingBottom{
    padding-bottom: 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;
  }

  .borderRadiusThirty{
    border-radius: 30px !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;
      */
      padding-left: 22px;
      padding-right: 22px;
  }

  .hugePaddingLeftRight{
      padding-left: 60px;
      padding-right: 60px;
  }

  .smallPaddingLeft{
      padding-left: 15px;
  }

  .paddingFifteen{
      padding: 15px;
  }

  .bigPaddingLeft{
      padding-left: 30px;
  }

  .paddingAllAround{
      /*
      padding: 30px;
      */
      padding: 22px;
  }

  .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: #4a56f8;
      /*
      letter-spacing: 1px;
      */
  }

  .coolLink{
      color: #4a56f8;
      cursor: pointer;
  }

  .coolLink:hover, a:hover {
      color: #080852;
  }

  a.cardFooterLink:hover, 
  .card_footer_link_button:hover{
    border: 1px solid #7581bd;
  }

  .cardFooterLink, 
  .cardFooterText, 
  .card_footer_link_button{
      font-size: 16px;
      line-height: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
  }

  /*-- special style for cancel buttons in overlays --*/
  .standardOverlay .cardFooterLink,
  .standardOverlayCard .cardFooterLink, 
  .standardOverlay_v2 .cardFooterLink
  {
    border: none;
    font-size: 16px;
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: initial;
    padding-right: initial;
    color: #4a56f8;
    font-family: 'roboto';
    font-weight: normal;
    text-transform: capitalize;
    border-radius: none;
  }

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

  .standardOverlayCard.emailBuilderCard {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    margin: 0px;
    max-width: initial;
    width: auto;
  }

  .cardFooterLink, 
  .cardFooterLink.unclickable:hover,
  .card_footer_link_button{
    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:5px;
  }

  .cardFooterText{
      color: #525e6b;
  }

  .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: #4a56f8;
  }

  .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, font-size 0s;
      -moz-transition: all 0.30s ease-in-out, font-size 0s;
      -ms-transition: all 0.30s ease-in-out, font-size 0s;
      -o-transition: all 0.30s ease-in-out, font-size 0s;
  }

  .easeFast {
      -webkit-transition: all 0.15s ease-in-out, font-size 0s;
      -moz-transition: all 0.15s ease-in-out, font-size 0s;
      -ms-transition: all 0.15s ease-in-out, font-size 0s;
      -o-transition: all 0.15s ease-in-out, font-size 0s;
  }

  .easeSuperFast {
      -webkit-transition: all 0.1s ease-in-out, font-size 0s;
      -moz-transition: all 0.1s ease-in-out, font-size 0s;
      -ms-transition: all 0.1s ease-in-out, font-size 0s;
      -o-transition: all 0.1s ease-in-out, font-size 0s;
  }

  .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: #e4ebf1;
  }

  .e8, .triangleWrap .triangle.e8{
    background-color: #e8edf1;
      /*background-color: #fff;*/
  }

  .d9, .inputLabel.d9, .triangleWrap .triangle.d9{
      background-color: #d9e3e3;
  }

  /*------------------------ modal menu sheet (pops up from the bottom and slides up as an overlay) --------------------- */

  .modal-menu-sheet-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8,8,19,0.64);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.modal-menu-sheet.active .modal-menu-sheet-overlay{
    opacity: 1;
    visibility: visible;
}

.modal-menu-sheet.active .modal-menu-sheet-inner{
    bottom: 0px;
    top: 20px;
}

.modal-menu-sheet-inner{
    position: fixed;
    bottom: -100%;
    left: 0px;
    right: 0px;
    z-index: 1001;
    background-color:#fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}

  /*------------------------ overlays --------------------- */

  .v-overlay{
      position: fixed;
      opacity: 1;
      z-index: 10001;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgba(8,8,19,0.64);
      cursor: pointer;
      display: none;
  }

  .calendar-overlay{
      position: absolute;
      z-index: 15;
      min-width: 200px;
      max-width: 200px;
      /* min-height: 300px;
      max-height: 300px; */
      height: 200px;
      background-color: #fff; 
      /* background-color: rgba(0, 0, 0, .06);  */
      cursor: pointer;
      display: none;
      box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
      border-radius: 6.5px;
      padding: 15px;
  }

  .calendarOverlayCard{
    /* background-color: pink; */
    background-color: inherit;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .v-overlay.active, .calendar-overlay.active{
    display: initial;
  }

  .standardOverlay, 
  .standardOverlay_v2{
      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;
  }

  .standardOverlay_not_clickable{
    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: 5px;
      margin-top: 14vh;
      cursor: initial;
  }

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

  .fullscreenOverlayCard{
    width: auto;
    background-color: #fff;
    border-radius: 3px;
    cursor: initial;
    margin: 0px;
    position: absolute;
    overflow: hidden;
    top: 25px;
    bottom: 25px;
    right: 25px;
    left: 25px;
  }

  .fullscreenOverlayCard .standardCardFooter{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color:#fff;
    border-top: 1px solid #e4ebf1;
  }

  #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;
  }

  .sliderWrap{
      overflow: hidden;
      height: 100%;
      width: 100%;
      position: relative;
  }

  /*---- 3 panel -------*/

  .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;
  }

  /*---- 4 panel -------*/

  .slider.four_panel{
      margin-left: 0px;
      width: 400%;
      height: 100%;
      position: relative;
  }

  .slider.four_panel > div{
      min-width: 25%;
      width: 25%;
      max-width: 25%;
      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 --------------------- */

    .fa-square-check{
        color: #3bd988;
    }

    .solid-circle-check{
        color: #3bd988;
    }

    .fa-solid.fa-circle-dollar{
        color: #3bd988;
    }

    .fa-solid.fa-circle-exclamation{
        color: #c34e4e;
    }

    .global-message-icon-good{
        color: #77f18f !important;
        padding-right: 5px;
    }

    .global-message-icon-loading{
        display: none;
        overflow: hidden;
        min-width: 24px;
        max-width: 24px;
    }

    .global-message-icon-spinner{
        display: none;
        height: 12px;
        margin-right: 8px;
        width: 12px;
        max-width: 12px;
        max-height: 12px;
        min-width: 12px;
        padding: 0px;
        border-right: 2px solid rgba(255,255,255,0);
        border-left: 2px solid #fff;
        border-top: 2px solid #fff;
        border-bottom: 2px 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;
    }

    .global-message-icon-bad{
        display: none;
        color: #d12445;
        padding-right: 5px;
    }

    .globalMessageInsert.error .global-message-icon-good, 
    .globalMessageInsert.loading .global-message-icon-good
    {
        display: none;
    }

    .globalMessageInsert.error .global-message-icon-bad{
        display: inline-block;
    }

    .globalMessageInsert.loading .global-message-icon-loading{
        display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      align-items: center;
    }

    .globalMessageInsert.loading .global-message-icon-spinner{
        display: inline-block;
    }

    .globalMessageInsert{
        text-align: center;
        padding-left: 12px;
        width: auto;
        padding-right: 12px;
        left: 50%;
        min-width: 100px;
        transform: translateX(-50%) !important;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 22px;
        font-weight: 400;
        background-color: #373b4b;
        /*
      transform: none !important;
      width: 90%;
      line-height: 24px;
      right: 15%;
      left: 15%;
      padding: 15px;
      margin-right: auto;
      margin-left: auto;
      background-color: #121834;
      border-left: 5px #121834;
      */
      position: fixed;
      bottom: -80px;
      z-index: 10000000;
      max-width: 575px;
      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;
      font-family: 'roboto';
      font-weight: normal;
      visibility: hidden;
      opacity: 0;
      color: #fff;
    }

  .globalMessageInsert.active{
      bottom: 30px;
      visibility: visible;
      opacity: 1;
  }

  .globalMessageInsert.error{
      background-color: #faf1f4;
      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: #121834;
      color: #fff;
      font-family: 'roboto';
      font-weight: normal;
      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';
      font-weight: normal;
      line-height: 40px;
      padding-left: 15px;
      font-size: 14px;
      padding-right: 15px;
      text-align: center;
  }

  .toastBubble.active{
      bottom: 30px;
      visibility: visible;
      opacity: 1;
  }
  .toastBubble.lighter{
    background-color: #3E65D9;
    border: 2px solid #3E65D9;
}

  .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);
  }

  .blur-more{
    -webkit-filter: blur(50px);
      -moz-filter: blur(50px);
      -o-filter: blur(50px);
      -ms-filter: blur(50px);
      filter: blur(50px);
  }

  .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 #1b2556;
  }

  .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);
  }

  .standardCard.flat{
    border: 1px solid #e4ebf1;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  .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 #4a56f8;
  }

  .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, .fullscreenOverlayCard h3{
      /*
          padding-left: 30px;
      */
      padding-left: 22px;
      padding-top: 28px;
      color: #2a375f;
      font-size: 24px;
      line-height: 34px;
      padding-bottom: 12px;
      /*
      font-family: 'modern';
      */
      font-family: 'roboto';
      font-weight: normal;
  }

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

/*
.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;

    color: #727f90;
    letter-spacing: 1px;
    /*
    font-family: 'modern' !important;
    font-weight: bold !important;
    */
    font-family: 'roboto' !important;
  }

  .overlay-scroll-body{
      max-height: 42vh;
  }

  .standardCardBody{
      background-color: #f7f9fb;
      border-top: 1px solid #e4ebf1;
      border-bottom: 1px solid #e4ebf1;
      /*
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 30px;
      padding-bottom: 30px;
      */
      padding-left: 22px;
      padding-right: 22px;
      padding-top: 22px;
      padding-bottom: 22px;
      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;
  }

  .card-header-subtext{
    margin-top: -5px;
    font-size: 14px;
    color: #9ca4b7 !important;
    font-family: 'roboto' !important;
    text-align: left;
    /*
    white-space: nowrap;
    text-overflow: ellipsis;
    */
  }

  .card-header-subtext.darker{
    color: #728394 !important;
  }

  /*------ 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: #606d7c;
      border: 1px solid #e4ebf1;
  }

  .attachmentCard .xButton{
      right: -8px;
      top: -8px;
  }

  .checkmarkCard{
          text-align: left;
      padding-top: 6px;
      padding-bottom: 6px;
      flex-grow: 1;
    flex-basis: 40%;
      margin: 10px;
      background-color: #fff;
      padding-right: 15px;
      cursor: pointer;
      line-height: 30px;
      color: #606d7c;
      border: 1px solid #e4ebf1;
  }

  .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: #525e6b;
  }

  .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');
  }

  .radioSelectBox{
    border: 2px solid rgb(228, 235, 241);
    text-align: left;  
  }

  .radioSelectBox.active{
    border: 2px solid #2a375f;
}


  #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);
  }

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

  #importCommonDisplayZone.spinning{
    font-size: 0px;
    height: 25px;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
    min-width: 25px;
    min-height: 25px;
    margin-top: 25px;
    padding: 0px;
    margin-right: 32px !important;
    margin-left: 32px !important;
    background-image: none;
    border-right: 2px solid rgba(255,255,255,0);
    border-left: 2px solid #4a56f8;
    border-top: 2px solid #4a56f8;
    border-bottom: 2px solid #4a56f8;
    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;
  }

  .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: 9px !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: #081333;
  }

  .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;
  }

  .colorTagIcon{
    min-width: 22px;
    min-height: 22px;
    height: 22px;
    width: 22px;
    max-width: 22px;
    max-height: 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    margin: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }

    .colorTagIcon.no-color{
        border: 1px solid #e8edf1;
        text-align: center;
        font-size: 12px;
        color: #52596f;
    }

  .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;
  }

  .cs-burgee-wrap-mobile{
    position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 8px;
      height: 54px;
      width: 210px;
    display: none;
    visibility: hidden;
  }

  .cs-burgee{
    height: 100%;
    width: 100%;
    background-size: 90%;
    background-position: center;
      background-repeat: no-repeat;
  }

  .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;
  }

  .pagination-in-header{
    padding-top: 20px; 
    padding-right: 10px;
  }

  .pagination-in-footer{
    margin-right: -10px;
  }

  .pagination-arrow-wrap{
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .pagination-arrow-wrap.active{
    cursor: pointer;
  }

  .pagination-arrow-wrap.active:hover, 
  .inline-table-icon:hover{
    background-color: #f7f9fb;
  }

  .pagination-arrow-wrap i{
    font-size:15px;
    color:#d7dbe3;
  }

  .pagination-arrow-wrap.active i{
    color:#636e7a;
  }

  .pagination-arrow-wrap.active:hover i{
    color: #4a56f8;
  }

  tr .tooltipDot.info.no-pagination{
    margin-left: 10px;
    margin-top: 6px;
    margin-left: 5px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    background-size: 8px;
  }

  .fa-solid.fa-triangle-exclamation{
    color: #ebbf2f;
  }

  .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;
  }

  .review-card{
    max-height: 300px;
  }

  .review-card.expanded{
    max-height: initial;
  }

  .expand-review-button{
    position: absolute;
    bottom: 10px;
    background-color: #ffffff;
    border-radius: 60px;
    border: 1px solid #ddd;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'roboto';
    font-weight: normal;
    color: #9198aa;
    bottom: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    cursor: pointer;
    border: none;
    font-size: 16px;
  }

  .review-card.expanded .expand-review-button{
    display: none;
  }

  .expand-review-button .standardBackButton{
    background-size: 16px;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-right: -12px;
    height: 39px !important;
    margin-left: 0px;
  }

  .review-icon{
    border-radius: 0px;
    background-size: 85%;
    background-color: #fff;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    margin-right: 15px;
  }

  .review-header-wrap{
    font-family: 'roboto';
    font-weight: normal;
    font-weight: normal;
    color: #283664;
  }

  .review-star{
    color: #ffcf00;
    padding-right: 2px;
    font-size: 22px;
    font-weight: bold;
  }

  .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-header-v2{
    padding-left: 30px;
    margin-top: -20px !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    border-bottom: 1px solid #e8edf1;
    padding-bottom: 15px !important;
  }

  .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: 2px;
      background-size: contain;
      margin-right: 10px;
  }

  .smallIcon.burgee{
    border-radius: 2px;
    background-size: contain;
  }

  .bigIcon.loading{
      opacity: 0.3;
  }

  .secondaryCardName{
      font-size: 22px;
      line-height: 34px;
      color: #2b375f;
  }

  .secondaryCardSubtext{
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      font-size: 16px;
      line-height: 24px;
      color: #606d7c;
      margin-top: 4px;
      text-align: left;
  }

  .secondaryCardSubtext.smaller{
      /*
      font-family: 'modern';
      */
      font-family: 'roboto';
      font-weight: normal;
      font-size: 14px;
      line-height: 20px;
      color: #606d7c;
      text-align: left;
  }

  /*------------------------ horizontal toggle buttons --------------------- */

  .horizontal-toggle-wrap{
    background-color: #e5eaee;
      border: 3px solid #e5eaee;
      border-radius: 50px;
      margin-top: 15px;
  }

  .horizontal-toggle-button{
    border-radius: 45px;
      height: 34px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 33px;
      cursor: pointer;
      font-size: 16px;
      text-align: center;
      line-height: 34px;
      font-family: 'roboto';
      font-weight: normal;
      color: #324454;
      font-weight: 400;
  }

  .horizontal-toggle-button.selected{
    background-color: #fff;
  }

  /*------------------------ view more buttons --------------------- */

    .view_more_button.card-layout{
        margin-top:0px;
    }
    .view_more_button{
        color: #6a7482;
        margin: 8px;
        border: 1px solid #e5eaec;
        border-top: 1px solid #e5eaec;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        padding: 16px;
        margin-top: 8px;
    }
    .view_more_button:hover{
        color: #081333;
        background-color: #f8f9fb;
    }
    .view_more_button i{
        padding-left: 8px;
    }
    .view_more_button:hover i{
        color: #4a56f8;
        transform: translateX(4px);
    }

  /*------------------------ 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 #1b2556;
      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;
  }

  .drilldownHeaderBackButtonWrap .smallMarginLeft{
    width: 85%;
  }

  .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;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }

  .drilldownHeaderSubtext{
      font-size: 13px;
      padding-top: 2px;
      color: #6e7885;
      text-transform: uppercase;
  }

  .drilldownFooterMenu{
    border-top: 1px solid #e4ebf1;
    background-color: #f1f5f9;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
}


.drilldownFooterMenu::-webkit-scrollbar {
    display: none;
}

.drilldownFooterMenuItem{
    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;
}

.drilldownFooterMenuItem.active, .drilldownFooterMenuItem.active:hover{
    border-top: 3px solid #5280ff;
    background-color: #fff;
    color: #2c59d6;
}

.drilldownFooterMenuItem:hover{
    color: #081333;
}

  .drilldownHeaderMenu{
      border-top: 1px solid #e4ebf1;
      background-color: #f1f5f9;
      margin-top: 10px;
  }


  .drilldownFooterMenu::-webkit-scrollbar {
      display: none;
  }

  .drilldownHeaderMenuItem{
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      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, 
  .tapped_dots .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_fake{
    padding-left: 5px;
    padding-right: 5px;
    width: 45px;
    cursor: pointer;
  }

  tr .tapped_dots_fake:hover .dots{
    background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_transparent_horizontal_active.png);
  }

  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-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;
      */
      font-family: 'roboto';
      font-weight: normal;
      line-height: 28px;
      padding-bottom: 10px;
      padding-top: 5px;
      color: #525e6b;
  }

  .product-card-subtitle{
      text-transform: uppercase;
    font-size: 12px;
    font-family: 'roboto';
    font-weight: normal;
  }

  .product-card-subtitle.lighter{
    color: #697684;
  }

  .plus-sign{
          font-weight: bold;
      font-size: 22px;
      padding-top: 10px;
  }

  .product-card-subtitle-value{
      font-family: 'roboto';
      font-weight: normal;
    font-size: 22px;
    padding-top: 8px;
  }

  /*--- version of product cad with a photo (like about us team page) -----*/

  .team-card{
    max-width: 360px;
    text-align: left;
    margin-bottom: 20px;
  }

  .team-card-inner{
    padding-left: 24px;
    padding-right: 24px;
  }

  .team-title{
    color: #6a7482;
    font-size: 16px;
    padding-bottom: 20px;
  }

  .team-name-wrap{
    margin-top: 18px;
  }

  .team-name{
    color: #273665;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Montserrat';
    line-height: 28px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .team-description{
    font-size: 16px;
    font-family: 'roboto';
    font-weight: normal;
    line-height: 22px;
    padding-bottom: 10px;
    color: #525e6b;
  }

  .team-photo{
    width: auto;
    height: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3px;
  }

  .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/brendan4.jpg');
  }

  .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_bryce{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/bryce-pic.jpg');
  }

  .photo_chandler{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/chandler_photo.PNG');
  }

  .photo_kate{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/kate_photo-2.jpg');
  }

  .photo_michael{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/michael_photo_2.jpg');
  }

  .photo_maple{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/maple-windsurf.jpg');
  }

  .photo_madeline{
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/madeline_king_headshot.jpeg');
  }

  .photo_iain{
    background-image: url('https://d282wvk2qi4wzk.cloudfront.net/photo_iain.jpg');
  }

  .photo_john_collins{
    background-image: url('https://d282wvk2qi4wzk.cloudfront.net/photo_john_collins.jpg');
  }

  /*--- 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 .light-grey{
    background-color: #ffffff;
    border-bottom: 1px solid #e8ebf0;
    padding-top: 35px !important;
    padding-bottom: 25px !important;
  }

  .product-card .dark-blue,
  .product-card .medium-green,
  .product-card .medium-grey,
  .product-card .light-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;
  }

  .view_clocked-out.error .dark-blue, 
  .view_clocked-in.error .medium-green{
    background-color: #d12445;
  }

  /*------------------------ 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;
      */
      font-family: 'roboto';
      font-weight: normal;
      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;
  }
  .staffPickerInsert.version_searching,
  .memberGroupPickerInsert.version_searching,
  .membershipPickerInsert.version_searching,
  .couponPickerInsert.version_searching{
    margin-left: -22px !important;
    margin-right: -22px !important;
    margin-top: 22px !important;
  }

  membershipPickerInsert.version_searching_v2{
    margin-left: 22px !important;
    margin-right: 22px !important;
    margin-top: 22px !important;
  }

  .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-position: center !important;
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/olcc-photo.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_3{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_pos_3.jpg") !important;
  }

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

  .product-image_booking{
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/booking-res-image.jpg") !important;
  }

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

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

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

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

  .product-image_accounting_2{
    background-image: url("https://s3-us-west-2.amazonaws.com/myclubspot/product-image_accounting_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;
  }

  .product-image_golf_1{
    background-position: center !important;
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/tee-sheet-impage.jpg") !important;
  }

  .product-image_golf_2{
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/tee-sheet-image-2.jpg") !important;
  }

  .product-image_dining_1{
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/product_image-dining-1.jpg") !important;
  }

  .product-image_dining_2{
    background-image: url("https://d282wvk2qi4wzk.cloudfront.net/product_image-dining-2.jpg") !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;
  }

  .tapCellCompanion{
      padding-left: 2px;
      padding-right: 2px;
      padding-top: 4px;
      padding-bottom: 4px;
      font-size: 16px;
      line-height: 22px;
      border-radius: 4px;
      text-align: right;
  }

  /*------------------------ scrolling --------------------- */

  .scrollable {
      overflow: auto !important;
      -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 !important;
      position: sticky !important;;
      left: 0px;
      z-index: 1;
  }

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

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

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

  .sticky-column.higherZ{
    z-index: 101;
  }

    .sticky-row{
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 1;
    }

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

    th.sticky-row{
        background-color: #f6f8f9;
    }

    td.sticky-row{
        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';
      font-weight: normal;
  }

  .standardBadgeOutline p{
    font-family: 'roboto';
    font-weight: normal;
    font-weight: normal;
  }

  .standardBadgeOutline.green{
      border: 1px solid #0fa020;
      color: #148414;
  }

  .view_layout_button{
    display: block;
    top: -18px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 60px !important;
    line-height: 32px;
  }

  .standardBadgeOutline.warning, .cardFooterButton.outline.warning{
      color: #c34e4e !important;
      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;
  }

  .flexNoWrapCenterAlign {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      justify-content: center;
      align-items: 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;
  }

  .flexShrinkOne {
      -webkit-flex-shrink: 1;
      -moz-flex-shrink: 1;
      -ms-flex-shrink: 1;
      flex-shrink: 1;
  }

  .flexGrowOne {
      -webkit-flex-grow: 1;
      -moz-flex-grow: 1;
      -ms-flex-grow: 1;
      flex-grow: 1;
  }

  /* This ensures that all children with this class will grow and shrink equally and have no intrinsic size. */
  .flexOne{
    flex: 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: #4a56f8;
      font-size: 18px;
      padding-right: 2px;
      font-family: sans-serif;
      text-transform: none;
  }

  .dashboard-header-v3{
    position: fixed;
    height: auto;
    z-index: 100;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
    left: 0px;
    right: 0px;
    background-color: rgba(255,255,255,0.95);
    border-bottom: 1px solid #e4ebf1;
  }

  .hamburger-v2{
    cursor: pointer;
  }

  .hamburger-v2 .menu-line{
    margin-top: 7px;
    margin-bottom: 7px;
    width: 20px;
    border-radius: 1px;
    height: 2px;
    background-color: #777;
  }

  .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;
      */
      /*
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      */
  }

  /* this is for swapping in a title on mobile */
  #headerTitleInsert{
      display: none;
  }

  .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;
  }

  .marketing-header-button{
    background-color: #eaebfb;
    color: #2a3664;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 24px;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
  }

  .marketing-header-button.spinning{
    opacity: 0.7;
  }

  .marketing-header-button:hover{
    background-color: #d9daf1;
  }

  .marketing-header-button.blue{
    background-color: #4a56f8;
    border: 1px solid #4a56f8;
    color: #fff;
    font-weight: bold;
  }
  
  .marketing-header-button.inactive{
    /* opacity: 0.5; */
    cursor: initial;
  }

  .marketing-header-button.blue:hover{
    background-color: #3843d3;
  }

  .marketing-header-button.grey{
    background-color: #8c8c8c;
    color: #fff;
    font-weight: bold;
    border: none;
  }

  .marketing-header-button.grey:hover{
    background-color: #7a7a7a;
  }

  .marketing-header-button.white{
    background-color: #fff;
    color: #4a56f8;
    font-weight: bold;
    border: 1px solid #e4ebf1;
  }

  .marketing-header-button.white:hover{
    background-color: #f8f9fb;
  }

  #desktopMenuWrap .headerButton{
          color: #1b2556;
      border: 1px solid #1b2556;
      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;
  }

  #desktopMenuWrap .headerButton > p{
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 400;
  }

  #desktopMenuWrap .headerButton .logged_in_user_name_insert{
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .header.opaque #desktopMenuWrap .headerButton{
      color: #fff;
      border: 1px solid #1b2556;
      background-color: #1b2556;
  }

  .header.opaque #desktopMenuWrap .headerButton:hover, #desktopMenuWrap .headerButton:hover{
      color: #fff;
      border: 1px solid #1b2556;
      background-color: #1b2556;
      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, button.relative a{
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      width: 100%;
    padding: 0px;
  }

  .absoluteInput{
      position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    width: 100%;
    padding: 0px;
  }

  #desktopMenuWrap{
      position: absolute;
      right: 0px;
      top: 0px;
      height: 70px;
      line-height: 70px;
  }

  .headerLinkWrap::after{
      content: "";
      position: absolute;
      height: 2px;
      width: 0px;
      left: 50%;
      top: 5px;
      transition: all 0.28s ease 0s;
      transform: translateX(-50%);
      background: #283664;
  }

  .headerLinkWrap:hover::after{
    width: 100%;
  }

  .headerLinkWrap{
      color: #283664;
      letter-spacing: 1px;
      font-weight: bold;
      margin-left: 14px;
      margin-right: 14px;
      padding-left: 5px;
      padding-right: 5px;
      border-top: 4px 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: #052a6c;
      /*
      border-top: 5px solid #6371ce;
      */
  }

  .standard-content-width{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1050px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .standard-content-width-offset{
    margin-left:-22px;
    margin-right: -22px;
  }

  .innerHeader #desktopMenuWrap{
    right: 30px;
  }

  .innerHeader .hamburgerWrap{
    left: 30px;
  }

  .innerHeader .mobileDashboardLinkWrap{
    right: 30px;
  }

  .innerHeader{
      margin-left: auto;
      margin-right: auto;
      position: relative;
      max-width: 1050px;
      padding-left: 30px;
        padding-right: 30px;
        /*
      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: 68px;
    padding-top: 24px;
  }

  .mobileDashboardLinkWrap .cardFooterButton{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .header h1{
    font-weight: 100;
    line-height: 70px;
    margin-right: 200px;
    margin-left: 0px !important;
    font-size: 24px;
    letter-spacing: 2px;
    color: #2a3664;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'roboto';
    font-weight: normal;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .contentZoneHeader h1{
    font-weight: 100;
    line-height: 70px;
    margin-right: 200px;
    padding-left: 24px;
    font-size: 24px;
    letter-spacing: 2px;
    color: #2a3664;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'roboto';
    font-weight: normal;
    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 v2 (with vue) -------------- */

  .header-sublink-outer-v2{
    max-height: calc(100vh - 110px);
    position: fixed;
    left: 20px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    z-index: 30;
    text-align: left;
    line-height: 40px;
    top: 90px;
    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: 5px;
  }

  .header-sublink-outer-v2.active{
    visibility: visible;
    opacity: 1;
  }

  /*------------------------ header sublinks -------------- */

  .header-sublink-outer{
    max-height: calc(100vh - 68px);
    border-top: 1px solid #e4ebf1;
    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{
    width: 60%;
    min-width: 60%;
    background-color: rgba(255,255,255,0.98);
  }

  .header-sublink-right{
    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';
    font-weight: normal;
    color: #2b3664;
    font-weight: 500;
    font-size: 17px;
  }

  .header-sublink-label.blue{
      color: #4a56f8;
  }

  .header-sublink-explain{
     font-size: 15px;
    text-transform: none;
    font-family: 'roboto';
    font-weight: normal;
    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;
  }

  .header-callout.statement-reversal-line{
    display: inline-block;
    height: 12px;
    line-height: 13px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 3px;
  }

  /*------------------------------ 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;
  }

  .xButton-calendarOverlay{
    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: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}
  /*------------------------------ charts & metrics ------------------------------- */

  .bar-chart-wrap{
    max-width: 400px;
    padding:12px;
    padding-top:6px;
  }

  .bar-chart-bar-wrap{
    height: 18px;
    border-radius: 5px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .bar-chart-section{
    border-right: 1px solid #fff;
  }

  .bar-chart-row{
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #e4ebf1;
  }

  .chart-color-key{
    width: 18px;
    height: 18px;
    background-color: #f6f8f9;
    border-radius: 5px;
    margin-right: 5px;
  }

  .chart-row-label{
    padding-left: 5px;
    padding-right: 5px;
  }

  .chart-row-value{
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
  }

  .metric-value,
  .metric{
      font-size: 34px;
      line-height: 40px;
      font-family: 'roboto';
      font-weight: normal;
      font-weight: 500;
      color: #2a375f;
  }

  .metric-label{
      font-size: 13px;
    font-family: 'roboto';
    font-weight: normal;
    text-transform: uppercase;
    color: #697684;
    font-weight: 400;
  }

  .table-summary-metric-wrap{
    margin-left: 22px;
    margin-right: 22px;
    padding: 12px;
    margin-bottom: 22px;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
  }

  .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;
  }

  .cardBodySpinner.small-spinner{
    max-height: 20px;
    height: 20px;
    max-width: 20px;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  /* --------------------- left menu --------------------------------*/

  .left_menu_sublink_header,
  .leftMenuSubItemWrap .left_menu_sublink_header{
    font-weight: 500;
    font-family: 'roboto';
    padding-top: 20px;
    padding-bottom: 12px;
    text-transform: uppercase;
    font-size: 14px;
    color: #2a375f;
    cursor: initial;
  }

  .dark_mode .left_menu_sublink_header{
    color: #fff;
  }

  /*-- start menu-v4 (with icons) --*/

  .menu-v4 .leftMenuItem p{
    font-size: 16px !important;
  }

  .menu-v4 .leftMenuItem i{
    padding-right: 10px;
    font-size: 16px;
    width: 16px;
    text-align: center;
  }

  .menu-v4 .left-menu-icon-wrap{
    padding: 10px;
    border-radius: 5px;
  }

  .menu-v4 .leftMenuItem{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 6px !important;
    padding-top: 0px !important;
  }

  .menu-v4 .leftMenuSubItemWrap{
    padding-top: 0px;
    padding-left: 36px;
    padding-right: 10px;
  }

  .menu-v4 .leftMenuSubItem{
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
  }

  .menu-v4 .leftMenuSubItem.active{
    font-weight: 500;
  }

  .menu-v4 .leftMenuSubItem.active, 
  .menu-v4 .leftMenuSubItem:hover
  {
    background-color: #f1f5f7;
  }

  .menu-v4 .left-menu-icon-wrap .standardBackButton{
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background-size: 15px;
    margin: 0px;
    opacity: 0;
  }

  .dark_mode .menu-v4 .leftMenuItem.active .left-menu-icon-wrap{
    background-color: #363f5e !important;
  }

  .menu-v4 .leftMenuItem.active .left-menu-icon-wrap .standardBackButton{
    -webkit-transform: rotate(-270deg);
      -moz-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
      -o-transform: rotate(-270deg);
      -transform: rotate(-270deg);
      opacity: 1;
  }

  .menu-v4 .leftMenuItem:hover .left-menu-icon-wrap .standardBackButton{
      opacity: 1;
  }

  .menu-v4 .leftMenuItem.active{
    border-left: none !important;
    background-color: initial !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 6px !important;
    padding-top: 0px !important;
  }

  .menu-v4 .leftMenuSubItem{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .menu-v4 .leftMenuItem.active .left-menu-icon-wrap, 
  .menu-v4 .leftMenuItem:hover .left-menu-icon-wrap
  {
    background-color: #f1f5f7;
  }

  .menu-v4 .leftMenuItem.active p{
    color: #081333;
    font-weight: 500;
  }

  .allowWrap {
    text-overflow: unset !important;
    white-space: unset !important;
  }
  /*-- end menu-v4 --*/

  .leftMenuItem, .drillDownMenuItem{
      font-size: 20px;
      padding-left: 25px;
      padding-right: 25px;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #52596f;
      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;
      cursor: pointer;
      background-color: #fdfdfd;
  }

  .leftMenuItem_secondary p.secondary-left-menu-explain{
    padding-top: 8px;
    font-family: 'roboto';
    font-weight: 400;
    text-transform: none;
    font-size: 12px;
    line-height: 14px;
  }

  .secondary-left-menu-explain a{
    color: #081333;
    letter-spacing: 0px;
    text-decoration: underline;
  }

  .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;
      */
      color: #788097;
      font-weight: bold;
      cursor: pointer;
  }

  .leftMenuSubItemWrap p.active{
      color: #4a56f8 !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: #4a56f8 !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: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
  }

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

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

  .menu_v2.dark_mode .dashboard_header_wrap p{
    color: #e2e6ec;
    font-family: 'roboto';
    font-weight: normal;
    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 i{
    color: #41e994;
  }

  .menu_v2.dark_mode .leftMenuItem:hover p{
    color: #2a375f !important;
  }

  .menu_v2.dark_mode .leftMenuItem i{
    color: #7c848b;
  }

  .menu_v2.dark_mode .leftMenuItem:hover p{
    color: #52596f !important;
  }

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

  .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-bottom: 1px solid #3e4869;
    background-color: #363f5e;
  }

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

  /*-------- payment method cards ------------ */

  .cs-payment-method-outer{
    padding-top:12px;
    padding-bottom: 12px;
    cursor: pointer;
  }

  .cs-payment-method-outer .cs-status-wrap{
    padding-top: 3px;
  }

  .cs-payment-method-left{
    margin-right: 8px;
  }

  .cs-payment-method-outer .cs-status-dot{
    width:8px !important;
    height: 8px !important;
  }

  .cs-payment-method-card-label-1{
    color: rgb(114 131 148);
    font-family: 'roboto';
    font-size: 12px;
    letter-spacing: 1px;
  }

  .cs-payment-method-outer .status-text{
    font-family: 'roboto';
    font-size: 14px;
  }

  .cs-payment-method-card-label-2{
    color: #292e4a;
    font-family: 'roboto';
    font-size: 12px;
    margin-left: 5px;
  }

  .cs-payment-method-card-label-0{
    color: #292e4a;
    font-size: 15px;
    text-align: left;
  }

  .cs-payment-method-icon{
    width: 60px;
    height: 40px;
    border-radius: 5px;
    -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;
    background-color: #040124;
  }

  .cs-payment-method-icon.default{
    background: #3ad988;
  }

  .cs-payment-method-icon-chip{
    width: 9px;
    height: 7px;
    background-color: #fff;
    border-radius: 1px;
    position: absolute;
    left: 9px;
    bottom: 18px;
  }

  /*-------- cs-membership cards ------------ */

  .cs-membership-card{
    min-width: 280px;
    height: 200px;
    min-height: 150px;
    margin-bottom: 10px;
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
  }

  .cs-membership-card .front{
      border-radius: 12px;
    overflow: hidden;
      position: absolute;
      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;
      background: rgb(2,0,36);
    background: linear-gradient(126deg, rgba(2,0,36,1) 0%, rgba(40,49,73,1) 35%, rgba(150,178,194,1) 100%);
  }

  .cs-membership-card .back{
      border-radius: 12px;
      overflow: hidden;
       background: rgb(2,0,36);
      background: linear-gradient(126deg, rgba(2,0,36,1) 0%, rgba(40,49,73,1) 35%, rgba(150,178,194,1) 100%);
      position: absolute;
      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;
  }

  .cs-membership-card-outer{
    margin: 20px;
    margin-bottom: 5px;
    max-width: 320px;
  }

  .cs-membership-card-outer .front-back-dot{
    width: 6px;
    height: 6px;
    border: 1px solid #aab9c6;
    border-radius: 100%;
    background-color: #fff;
    margin-left: 2px;
    margin-right: 2px;
  }

  .cs-membership-card-strip{
    width: 100%;
    height: 25px;
    margin-top: 30px;
    background-color: #657a8d;
  }

  .cs-membership-card-outer.flip .front-back-dot.dot_front{
    background-color: #fff;
  }

  .cs-membership-card-outer .front-back-dot.dot_front,
  .cs-membership-card-outer.flip .front-back-dot.dot_back{
    background-color: #aab9c6;
  }

  .cs-membership-card-outer.flip .cs-membership-card .front {
      z-index: 900;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
  }

  .cs-membership-card-outer.flip .cs-membership-card .back {
      z-index: 1000;
      -webkit-transform: rotateX(0deg) rotateY(0deg);
      -moz-transform: rotateX(0deg) rotateY(0deg);
  }

  .cs-membership-card-button{
    margin-left: 10px;
    border: 1px solid #fff !important;
    background-color: rgba(255,255,255,0) !important;
    color: #fff;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 10px;
    border-radius: 2px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }

  .cs-membership-card:hover .cs-membership-card-button{
    background-color: #fff !important;
    color: #283664 !important;
    -webkit-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
       -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  .cs-membership-card .status-text,
  .cs-membership-card .member-number,
  .cs-membership-card .category-type{
    color: #fff;
    font-family: 'roboto';
    font-size: 14px;
  }

  .cs-membership-card-barcode{
    height: 50px;
    width: auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
  }

  .cs-membership-card-barcode.qr{
    width: 50px;
  }

  .cs-membership-card .member-name {
    color: rgba(255,255,255, 0.5);
    letter-spacing: 1px;
    padding-left: 5px;
    margin-top: 5px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
  }

  .cs-membership-card .club-name-insert{
    color: rgba(255,255,255, 0.5);
    letter-spacing: 1px;
    margin-top: 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
  }

  .cs-membership-card .category-type{
    padding-left: 5px;
    margin-top: 5px;
    font-size: 11px;
  }

  .cs-membership-card .end-date-insert,
  .cs-membership-card .cs-membership-card-email-insert{
    color: #fff;
    font-family: 'roboto';
    font-size: 12px;
    margin-left: 5px;
  }

  .cs-membership-card-label{
    color: rgba(255,255,255, 0.5);
    font-family: 'roboto';
    font-size: 12px;
    letter-spacing: 1px;
  }

  .sticky-column .cs-status-dot{
    width: 8px !important;
    height: 8px !important;
    margin-left: 10px !important;
    margin-right: 0px !important;
  }

  .cs-membership-card .status-dot,
  .cs-status-dot{
    margin-left: 5px;
    margin-top: 3px;
    background-color: #afb1b8;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    margin-right: 8px;
  }

  .cs-customer-transaction-ending-balance{
    padding-top: 8px;
    font-size: 12px;
    font-weight: normal;
    text-transform: initial;
    font-family: 'roboto';
    color: #606d7c;
  }

  .cs-customer-transaction-balance-tag{
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 500;
    color: #606d7c;
    background-color: #edf2f2;
    padding: 4px;
    border-radius: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 3px;
  }

  .cs-customer-transaction-new-balance{
    color: #6a7482 !important;
  }

  .cs-membership-card .status-dot.active,
  .cs-status-dot.good{
    background-color: #24d988;
  }

  .cs-membership-card .status-dot.expired,
  .cs-status-dot.bad{
    background-color: #d95724;
  }

  .cs-membership-card .status-dot.past_due,
  .cs-status-dot.medium{
    background-color: #d9cc24;
  }

  .cs-membership-card-icon{
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .cs-membership-card-icon-wrap{
    padding: 2px;
    border-radius: 5px;
    background-color: #fff;
  }

  .new_version_callout{
    margin: 10px;
    padding: 10px !important;
  }

  .feature-icon-wrap{
    margin-left: 8px;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    padding: 8px;
    font-size: 14px !important;
    cursor: pointer;
  }

  .feature-icon-wrap:hover{
    background-color: #f8f9fb;
    color: #4a56f8;
  }

  .cs-membership-card-body{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .cs-membership-card-footer-back{
    position: absolute;
    height: auto;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    align-items: baseline;
  }

  .cs-membership-card-footer{
    position: absolute;
    height: auto;
    padding-left: 25px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(6, 6, 40, 0.1);
  }

  /* -------------- account v3 (hosted site accounts) ------------------ */

  .account-v3 .flexibleLeftMenu{
    width: 100%;
    min-width: 250px;
    max-width: 280px;
    left: -120%;
    position: fixed;
    z-index: 1001 !important;
  }

  .account-v3 .standardThumbnail.clubspot_logo_icon{
    height: 25px !important;
    width: 25px !important;
    max-width: 25px !important;
    background-size: contain;
    background-position: left !important;
    margin: 0px !important;
    margin-right: 8px !important;
  }

  .account-v3 .leftMenuOverlay{
    z-index: 1000;
  }

  .account-v3 .standardContentZone{
    position: relative;
    top: initial;
    padding-top: 70px;
    left: initial;
    right: initial;
    bottom: initial;
  }

  .account-v3 .outerContentWrap{
    position: relative;
    height: initial;
    max-height: initial;
  }

  .account-v3 .contentBlock{
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
  }

  .account-v3 .flexibleLeftMenu.expanded {
    left: 0px;
  }

  .account-v3 .hamburger.hideOnDesktop,
  .account-v3 .leftMenuOverlay.hideOnDesktop{
    display: initial !important;
  }

  /*
  .wl-personal .innerHeader{
    position: relative;
    margin-right: 22px;
    margin-left: 22px;
    width: auto !important;
    max-width: initial !important;
  }
  */

  .account-v3 .cs-burgee-wrap-mobile{
    display: initial;
    visibility: visible;
  }

  .account-v3 .product-card{
    /*
    background-color: #677c7f;
    color: #fff;
    */
    cursor: pointer;
    width: 300px;
    padding: 25px;
    position: relative;
    margin: 15px;
    min-height: 110px;
  }

  .account-v3 .product-card.has-image{
    color: #fff;
  }

  .account-v3 .product-card-image{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
  }

  .account-v3 .product-card-overlay{
    position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgba(8,8,19,0.45);
  }

  .account-v3 .product-card.has-image:hover .product-card-label{
    color: #fff !important;
  }

  .account-v3 .product-card:hover .product-card-overlay{
      background-color: rgba(8,8,19,0.3);
  }

  .account-v3 .product-card.has-image p{
    color: #fff;
  }

  .account-v3 .product-card p{
    position: relative;
    text-align: left;
    color: #273665;
  }

  .account-v3 .product-card .product-card-explain{
    color: #737a90;
  }

  .account-v3 .product-card-label .standardBackButton{
    height: 30px;
    width: 30px;
    display: inline-block;
    margin-top: 0px;
  }

  .account-v3 .account-image{
    height: 55vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .account-v3 .sectionHeader{
    padding-left: 12px;
    padding-right: 12px;
    font-size: 26px;
    line-height: 36px;
    display: block;
    font-family: 'Montserrat';
  }

  .account-v3 .sectionHeader.smaller{
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 0px;
    text-transform: uppercase;
    font-family: 'Montserrat';
    letter-spacing: 1px;
  }

  .account-v3 .flexibleLeftMenu{
    background-color: #fff !important;
  }

  body.v3.account-v3 .drilldownHeaderWrap{
    position: relative;
    z-index: initial;
    left: 0px;
    margin-bottom: 0px;
  }

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

  body.v3.account-v3 .details-view.active,
  body.v3.account-v3 .details-view
  {
    padding-top: 0px;
  }

  .account-v3 .header{
    background-color: #fff !important;
  }

  /* -------------- 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{
    max-width: initial !important;
    min-width: initial !important;
    width: initial !important;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 236px;
    /*
    width: 100% !important;
    max-width: initial !important;
    */
    position: fixed;
    top: 0px;
    /*
    background: #fff;
    */
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(15px);          /* Apply blur to the background */
    -webkit-backdrop-filter: blur(15px);   /* For Safari support */

    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: 5;
    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 #e4ebf1 !important;
  }

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

  body.v3 .view.active{
    /*
    overflow: initial !important;
    */
    min-height: 400px;
  }

  body.v3 .view.vue{
    min-height: 100vh;
  }

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

  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 #e4ebf1;
  }

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

  .menu_v2 .standardThumbnail.clubspot_logo_icon{
    border-radius: 5px;
    box-shadow: none;
    background-size: cover;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    margin-left:7px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Montserrat';
    text-align: center;
    line-height: 26px;
    background-color: #081333;
    background-image: initial;
  }

  .smallIcon.login-with-clubspot-icon{
    border-radius: 5px !important;
    margin-right: 15px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    background-size: cover !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    margin-left: 7px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: 'Montserrat' !important;
    text-align: center !important;
    line-height: 26px !important;
    background-color: #081333 !important;
    background-image: initial !important;
  }

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

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

  .menu_v2 #leftMenuInner{
    visibility: visible;
    opacity: 1;
    top: 63px;
    bottom: 57px;
    padding-top: 15px;
    position: absolute;
    padding-bottom: 150px;
    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 #e4ebf1;
      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: normal;
    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';
    font-weight: normal;
    /*
    padding-top: 6px;
    padding-bottom: 6px;
    */
    padding-top: 4px;
    padding-bottom: 4px;
  }

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

  .menu_v2 .leftMenuItem p{
    font-weight: 300;
    font-family: 'roboto';
    font-weight: normal;
    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';
      */
      font-family: 'roboto';
      font-weight: normal;
      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
  }

  .header-callout .tooltipDot{
    display: inline-block;
    position: absolute;
  }

  /* -------------- thumbnails ------------------ */

  .standardThumbnail{
   height: 27px;
      width: 27px;
      min-width: 27px;
      max-width: 27px;
      display: inline-block;
      border-radius: 3px;
      margin-left: 8px;
      margin-right: 8px;
      margin-bottom: -8px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 90%;
      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;
  }

  @media screen and (max-width: 700px) {
        .cs-min-section-width {
            max-width: initial !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-image: url('https://d282wvk2qi4wzk.cloudfront.net/ecNpKgrusD_burgee_1650399066758');
      */
      background-image: url('https://d282wvk2qi4wzk.cloudfront.net/ecNpKgrusD_burgee_1680488465135');
      background-size: 90%;
      background-position: center;
  }

  .defaultClubIconOld{
    /*
    background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/clubIcon.png');
    background-image: url('https://d282wvk2qi4wzk.cloudfront.net/ecNpKgrusD_burgee_1650399066758');
    */
    background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/favicons/favicon-144.png');
    background-size: 90%;
    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;
  }

  .bigIcon.defaultUserIcon{
    background-size: 60%;
    background-position: center;
  }

  .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: normal;
    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 --------------------------------*/

  .cs-login-image{
    height: 100%;
    min-height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cs-login-burgee{
    height: 90px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: contain;
}

.cs-login-burgee.centered{
  background-position-x: center;
}

.cs-login-profile-picture{
      min-width: 90px;
    height: 90px;
    min-height: 90px;
    width: 90px;
    max-width: 90px;
    max-height: 90px;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

  .cs-login-explain{
    font-family: 'roboto';
    font-weight: normal;
    line-height: 20px;
    color: #728394;
    margin-bottom: 5px;
    font-size: 16px;
  }

  .cs-login-profile-picture{
      min-width: 90px;
    height: 90px;
    min-height: 90px;
    width: 90px;
    max-width: 90px;
    max-height: 90px;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    background-color: #c1c7ca;
}

.cs-login-username{
  color: #697684;
    text-align: center;
    padding-top: 10px;
}

.cs-login-profile-overlay{
  position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(8,8,19,0.3);
}

.cs-login-burgee.centered{
  background-position-x: center;
}

.cs-login-fallback-profile-image{
  background-image: url('https://d282wvk2qi4wzk.cloudfront.net/default-login-background-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
}

.cs-login-initials{
  position: relative;
    color: #fff;
    text-align: center;
    font-size: 50px;
    font-family: 'roboto';
}
  
  .version_send_otp, .version_enter_otp, .version_new_pw, .version_no_otp{
    display: none;
  }

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

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

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

  .new_pw .pw_reset_slider.four_panel{
    margin-left: -200%;
  }

  .no_otp .pw_reset_slider.four_panel{
    margin-left: -300%;
  }

  /* --------------------- extra copy and error/success messages --------------------------------*/

    .loginSignupExtraCopy, .resetPWExtraCopy, .standardExtraCopy{
        padding: 15px !important;
        overflow: hidden;
        color: #3b4550 !important;
        border: 1px solid #e4ebf1 !important;
        border-left: 3px solid #3b4550 !important;
        border-radius: 5px;
        background-color: #fff !important;
    }

  .standardExtraCopy strong{
    font-weight: initial !important;
  }

  .standardExtraCopy.error{
    color: #e24865 !important;
    border: 1px solid #f6d7dd !important;
    background-color: #fff5f8 !important;
  }

  .standardExtraCopy.warning {
    color: #b26a00 !important; /* dark orange text */
    border: 1px solid #ffe5b4 !important; /* light orange border */
    background-color: #fff8e6 !important; /* very light orange background */
  }

  .standardExtraCopy.deleteObject{
      background-color: rgb(244 229 232 / 40%) !important;
      border-left: 5px solid #9a4555 !important;
      color: #823140 !important;
      border: 1px solid #9a4555 !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;
        color: #e24865 !important;
        border: 1px solid #f6d7dd !important;
        background-color: #fff5f8 !important;
    /*
        color: #494e5d;
      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;
      border-radius: 3px;
  }

  .errorInsert a,
  .error_insert_v2 a{
    font-weight: normal;
  }

  .error_insert_v2{
    /*
      border-left: 5px solid #cf0e33 !important;
    border: 1px solid #dde3e8;
    color: #494e5d;
    */
    color: #e24865 !important;
        border: 1px solid #f6d7dd !important;
        background-color: #fff5f8 !important;
    border-radius: 3px;
    margin-top: 20px;
    margin-bottom: 0px;
    text-align: left;
    font-family: roboto;
    
    padding: 15px;
  }
  
  .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, 220, 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';
      font-weight: normal;
      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;
  }

  .table-row-checkbox-wrap{
    width:50px;
  }

  .timelineRow .table-row-tag{
    margin-right: 0px;
  }

  .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,
  .table-row-tag.good{
     background-color: #c6f1c6;
      color: #105619;
  }

  .header-callout.bright-blue{
    background-color: #4a56f8;
    color: #fff;
  }

  .header-callout.dark, .table-row-tag.dark{
    background-color: #191b3e;
    color: #fff;
  }
  .header-callout.bad {
    background-color: #f3f4f5;
    color: #8e3822;
  }
  
  .member_group,
  .member_tag,
  .event_tag{
    margin-left: 0px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    cursor: pointer;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 24px;
  }
  .member_group,
  .member_tag p,
  .event_tag p{
      line-height: 15px;
  }

  .member_tag .xIcon,
  .member_group .xIcon,
  .event_tag .xIcon
  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 2px;
    background-size: 7px;
    width: 20px;
    cursor: pointer;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/purpleXicon.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .filter_tag .xIcon
  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 5px;
    background-size: 7px;
    width: 20px;
    cursor: pointer;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/purpleXicon.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .table-row-tag{
      margin-right: 8px;
    font-size: 10.5px;
    font-family: 'roboto';
    font-weight: normal;
    text-transform: uppercase;
    font-weight: 500;
    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: 3px;
    margin-top: 3px;
    line-height: 24px;
    display: inline-block;
  }

  .dropdownClickAway{
    position: fixed;
    z-index: 9;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    visibility: visible;
    opacity: 0; 
  }

  /* --------------------- mobile menu --------------------------------*/

  .mobileMenuOverlay, 
  .leftMenuOverlay, 
  .cartOverlay, 
  .mobile-order-summary-overlay, 
  .tableFilterOverlay, 
  .left-menu-overlay-v2{
      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, .tableFilterOverlay{
      z-index: 101;
  }

  .mobileMenuOverlay.active, 
  .leftMenuOverlay.active, 
  .cartOverlay.active, 
  .mobile-order-summary-overlay.active 
  .tableFilterOverlay.active, 
  .left-menu-overlay-v2.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;
  }

  .mobileMenu a, .mobile-link-wrap > p{
      display: block;
      line-height: 50px;
      font-size: 24px;
      color: #333;
      text-transform: uppercase;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      padding: 8px;
      cursor: pointer;
      letter-spacing: 1px;
  }

  .mobileMenu a:hover, .mobile-link-wrap:hover > p{
      color: #1b2556;
  }

  .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: 13px;
      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,
  .scroll-down-arrow-pos
  {
      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: 90;
  }

  .scroll-down-arrow.scrolled,
  .scroll-down-arrow-pos
  {
      -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;
  }

  /*
  .scroll-down-arrow-pos{
    display: none;
  }

  .wrap_filter_options .scroll-down-arrow-pos{
    display: initial;
  }
  */

  @-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.white{
    background-image: url('https://d282wvk2qi4wzk.cloudfront.net/arrow-white.png');
  }

  .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);
  }

  .rotate-up{
    -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      -transform: rotate(-180deg);
  }

  /*-- 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;
      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: 5px;
      top: 13px;
      width: 13px;
      min-width: 13px;
      max-width: 13px;
      height: 13px;
      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: #4a56f8;
  }

  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,
  tr.ascending .sorted .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: 16px;
      padding-bottom: 16px;
      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: 32px;
      width: 32px;
      max-width: 32px;
      max-height: 32px;
      min-width: 32px;
      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,
  .cardBodySpinner.active{
      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.lighter-blue{
    background-color: #3843d3;
    border: 2px solid #3843d3;
  }

  .primaryButton.splash-button.spinning,
  .primaryButton.splash-button.spinning.inactive
  .primaryButton.splash-button.lighter-blue.spinning,
  .primaryButton.splash-button.lighter-blue.spinning.inactive,
  .primaryButton.splash-button.blue.spinning,
  .primaryButton.splash-button.blue.spinning.inactive{
    overflow: hidden;
    color: rgba(255, 255, 255, 0) !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border-right: 2px solid rgba(255,255,255,0) !important;
    border-left: 2px solid #4a56f8 !important;
    border-top: 2px solid #4a56f8 !important;
    border-bottom: 2px solid #4a56f8 !important;
  }

  .primaryButton.splash-button.spinning i{
    display: none;
  }

  .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 #1b2556 !important;
      border-top: 3px solid #1b2556 !important;
      border-bottom: 3px solid #1b2556 !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;
  }

  i.spinning{
    animation: spinning 1.2s linear infinite;
      animation-delay: 0.3s;
      -webkit-animation: wk-spinning 1.2s linear infinite;
      -webkit-animation-delay: 0.3s;
  }

  .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;
  }

  .cardFooterButton.warning, 
  .cardFooterButton.white.warning{
    color: #fff !important;
    background-color: #e00931;
    border: 1px solid #e00931;
    border-radius: 20px;
  }

  .cardFooterButton.warning:hover, 
  .cardFooterButton.white.warning:hover{
    color: #fff !important;
    background-color: #c10d2f;
    border: 1px solid #c10d2f;
  }

  .cardFooterButton.warning.spinning, 
  .cardFooterButton.white.warning.spinning{
    border-right: 2px solid rgba(255, 255, 255, 0);
    border-left: 2px solid #c10d2f;
    border-top: 2px solid #c10d2f;
    border-bottom: 2px solid #c10d2f;
    background-color: rgba(255, 255, 255, 0) !important;
  }

  .primaryButton.outline, 
  .cardFooterButton.outline, 
  body.v3 .searchBarButton, 
  .secondaryButton.outline{
     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;
      border-radius:5px;
  }

  .primaryButton.smaller{
      box-shadow: none;
      font-size: 11px;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      min-width: 0px;
      font-weight: bold;
       -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
      border-radius:5px;
  }

  .primaryButton.outline.darker {
      border: 1px solid #2a375f;
      color: #2a375f
  }

  .primaryButton.outline.darker.selected {
    color: #fff;
    background-color: #2a375f;
    border: 1px solid #2a375f
  }

  .next-invoice-subtext{
    color: #728394;
    font-size: 13px;
    display: inherit;
  }

  .toolbar-item-button .button-arrow, 
  .toolbar-item-button:hover .button-arrow, 
  .toolbar-item-button .button-arrow:hover{
    margin: 0px !important;
    height: 18px !important;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    background-size: 15px;
    margin-left: 0px !important;
  }

  .toolbar-item-button.taller{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .toolbar-item-button.blue{
    background-color: #3e65d9;
    border: 2px solid #3e65d9;
  }

  .toolbar-item-button{
      min-width: initial;
      padding-left: 12px;
      padding-right: 6px;
      border-radius: 25px;
      padding-top: 2px;
      padding-bottom: 2px;
      color: #fff;
      text-align: center;
      position: relative;
      z-index: 2;
      letter-spacing: 1px;
      text-transform: uppercase;
      line-height: 24px;
      cursor: pointer;
      background-color: #1b2556;
      border: 2px solid #1b2556;
  }

  .toolbar-item-button.spinning{
      font-size: 0px;
      color: rgba(255,255,255,0) !important;
      height: 24px;
      width: 24px;
      max-width: 24px;
      max-height: 24px;
      min-width: 24px;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0) !important;
      border-left: 2px solid #1b2556 !important;
      border-top: 2px solid #1b2556 !important;
      border-bottom: 2px solid #1b2556 !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;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
  }

  .toolbar-item-button:hover{
    -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);
  }

  /*
  .primaryButton.no-ease:hover{

    -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);

        
  }

  .primaryButton.no-ease.spinning{
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
  }
  */

    .primaryButton.spinning{
        animation-delay: 0s !important;
        -webkit-animation-delay: 0s !important;
    }

    .primaryButton{
        -webkit-transition: all 0s, -webkit-transform 0.15s ease-in-out !important;
        -moz-transition: all 0s, -moz-transform 0.15s ease-in-out !important;
        -o-transition: all 0s, -o-transform 0.15s ease-in-out !important;
        transition: all 0s, transform 0.15s ease-in-out !important;
    }

  .toolbar-item-button .button-text {
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .toolbar-item-button:hover .button-arrow, 
  .toolbar-item-button .button-arrow:hover{
    background-position-x: -3px !important;
  }

  .searchBarButton, .primaryButton.outline{
    line-height: 24px;
  }

  .cardFooterButton.outline{
    line-height: 18px;
  }

  .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 !important;
      font-weight: bold;
  }

  .cardFooterButton.spinning.outline.warning{
    border-right: 2px solid rgba(255, 255, 255, 0);
    border-left: 2px solid #c34e4e;
    border-top: 2px solid #c34e4e;
    border-bottom: 2px solid #c34e4e;
    background-color: rgba(255, 255, 255, 0);
  }

  .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: #4a56f8;
      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';
      */
      font-family: 'roboto';
      font-weight: normal;
      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: #1b2556;
      font-weight: bold;
      border: 1px solid #1b2556;
  }

  .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: 3px;
      background-color: #1b2556;
      border: 2px solid #1b2556;
      font-family: 'Montserrat';
      font-weight: bold;
  }

  .primaryButton p, .cardFooterButton p {
      font-family: 'Montserrat';
  }

  .cardFooterButton.white{
    border: 1px solid #e4ebf1;
  }

  .cardFooterButton.white:hover {
    /*color: #081333;*/
    color: #4a56f8;
    background-color: #f8f9fb;
  }

  .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: #1b2556;
      border: 1px solid #1b2556;
      /*
      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,
  .cardFooterButton.white.warning.inactive, 
  .marketing-header-button.blue.inactive
  {
        /*
        background-color: #c1c7ca;
        border: 1px solid #c1c7ca;
        color: #fff !important;
        */

        background-color: #f3f5f7 !important;
        border: 1px solid #f3f5f7 !important;
        color: #b1b2b5 !important;

  }

    
  .cardFooterButton.inactive:hover, 
  .marketing-header-button.blue:hover.inactive{
        /*
        background-color: #c1c7ca;
        border: 1px solid #c1c7ca;
        color: #fff;
        */
        background-color: #f3f5f7 !important;
        border: 1px solid #f3f5f7 !important;
        color: #b1b2b5 !important;
  }

  .cardFooterButton.spinning, .link-button.spinning{
      font-size: 0px;
      height: 25px;
      width: 25px;
      max-width: 25px;
      max-height: 25px;
      min-width: 25px;
      margin-top: 10px;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #4a56f8;
      border-top: 2px solid #4a56f8;
      border-bottom: 2px solid #4a56f8;
      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{
    font-size: 0px;
      height: 25px;
      width: 25px;
      max-width: 25px;
      max-height: 25px;
      min-width: 25px;
      padding: 0px;
    min-height: 25px;
    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);
  }     

    .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: 22px;
      padding-left: 15px;
      padding-right: 15px;
      cursor: pointer;
      padding-top: 4px;
      font-weight: bold;
      padding-bottom: 4px;
      font-size: 11px;
      border-radius: 3px;
      background-color: #1b2556;
      border: 2px solid #1b2556;
      font-family: 'Montserrat';
  }

  .secondaryButton.white{
      background-color: #fff;
      border: 2px solid #fff;
      color: #4a56f8;
      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 !important;
      color: rgba(255,255,255,0);
      height: 35px !important;
      width: 35px !important;
      max-width: 35px !important;
      max-height: 35px !important;
      min-width: 35px !important;
      padding: 0px;
      border-right: 2px solid rgba(255,255,255,0);
      border-left: 2px solid #1b2556;
      border-top: 2px solid #1b2556;
      border-bottom: 2px solid #1b2556;
      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{
      color: #081333;
  }

  .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: #4a56f8;
      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: 28px;
      padding-right: 10px;
      text-align: center;
      letter-spacing: 1px;
      line-height: 24px;
      cursor: pointer;
      font-weight: 400;
      font-family: 'roboto';
      font-weight: normal;
      border-radius: 30px;
      border: 2px solid #fff;
      background-color: #fff;
      color: #52596f;
      border: 1px solid #e8eaf1;
  }

  .cardHeaderButtonNoResize.active{
      background-color: #4a56f8;
      color: #fff;
      border: 1px solid #4a56f8;
  }

  .card-header-button-v3{
    line-height: 24px;
    height: auto !important;
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 10px;
    text-align: center;
    letter-spacing: 0px;
    cursor: pointer;
    font-weight: 400;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 30px;
    border: 2px solid #fff;
    background-color: #fff;
    color: #52596f;
    border: 1px solid #e8eaf1;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
  }

  .card-header-button-v3.text-hides-on-mobile{
    min-height: 38px;
    min-width: 38px;
    text-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    text-align: center;
  }

  .card-header-button-v3-spinner{
    height: 10px;
    width: 10px;
    max-width: 10px;
    max-height: 10px;
    min-width: 10px;
    padding: 0px;
    border-right: 1px solid rgba(255,255,255,0) !important;
    border-left: 1px solid #1b2556 !important;
    border-top: 1px solid #1b2556 !important;
    border-bottom: 1px solid #1b2556 !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;
    margin-right: auto;
    margin-top: 1px;
    margin-right: 2px;
    overflow: hidden;
  } 

  .marketing-header-button.blue.spinning .card-header-button-v3-spinner{
    border-left: 1px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0) !important;
  }

  button.inactive .card-header-button-v3-spinner{
    border-left: 1px solid #728394 !important;
    border-top: 1px solid #728394 !important;
    border-bottom: 1px solid #728394 !important;
    border-right: 1px solid rgba(255, 255, 255, 0) !important;
  }

  .cardHeaderButton{
    position: absolute;
    right: 15px;
    top: 22px;
    font-size: 14px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 28px;
    padding-right: 10px;
    text-align: center;
    letter-spacing: 1px;
    line-height: 24px;
    cursor: pointer;
    font-weight: 400;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 30px;
    border: 2px solid #fff;
    background-color: #fff;
    color: #52596f;
    border: 1px solid #e8eaf1;
  }

  .cardHeaderButtonFilterDropdown{
      padding-left: 0px; 
      padding-right: 0px; 
      opacity: 0;
      visibility: hidden;
      top: 45px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 5px;
      color: #111;
      z-index: 1001;
      left: 22px;
      overflow: hidden;
      max-width: calc(100% - 15px);
  }

  .cardHeaderButtonFilterDropdown:focus{
    outline: none !important;
  }

  .filter-popup-category{
    padding-right: 8px;
    min-width: 90px;
  }

  .filter_popup_left{
    background-color: #f6f8f9;
    border-right: 1px solid #e4ebf1;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 200px;
    max-height: 65vh;
  }

  .filter_popup_right{
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 500px;
    max-height: 65vh;
    min-width: 170px;
  }

  .filter_popup_right .option-explain{
    font-size: 13px !important;
    line-height: 16px;
    color: #83909d;
    padding-top: 4px;
  }

  .cardHeaderButtonDropdown{
      opacity: 0;
      visibility: hidden;
      top: 70px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 3px;
      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);
      color: #111;
      z-index: 10;
      right: 10px;
      padding-left: 15px;
      padding-right: 15px;
      overflow: hidden;
  }

  .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.smallPadding{
    padding-top: 7.5px;
    padding-bottom: 7.5px;
}

  .cardHeaderButtonDropdownOption p, .toolbarButtonDropdownOption p{
      font-family: 'roboto';
      font-weight: normal;
      font-weight: 400;
  }

  .toolbarButtonDropdownOption p.tap-circle{
      font-family: 'roboto';
      font-weight: 500;
      font-size: 12px !important;
  }

  .cardHeaderButtonDropdownOption .inline-label{
      line-height: 34px;
      font-size: 16px;
  }

  .cardHeaderButtonDropdown.active{
      opacity: 1;
      visibility: visible;
      top: 70px;
  }
  .cardHeaderButtonFilterDropdown.active{
    opacity: 1;
    visibility: visible;
}

  .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: 10px;
  }

  #tapFilterData_registrations,
  #tapFilterData_membership,
  #tapFilterData_membership_aging,
  #tapFilterData_products,
  #tapFilterData_product_inventory,
  #tapFilterData_members,
  #tapFilterData_applications,
  #tapFilterData_line_items,
  #tapFilterData_member_invoices,
  #tapFilterData_email_list,
  #tapFilterData_add_journal_entry,
  #tapFilterData_add_journal_entry_admin,
  #tapFilterData_transactions,
  #tapFilterData_transactions,
  #tapMessage_email_list,
  #tapFilterData_gift_cards,
  #tapFilterData_assignments
  {
      right: 110px;
  }

  #tapFilterData_import_from_qbo {
      right: 260px;
  }

  .cardHeaderButton .buttonIcon{
      position: absolute;
      left: 5px;
      top: 5px;
  }

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

  .cardHeaderButton .buttonIcon.emailIcon{
    top: 2px;
  }

  .cardHeaderButton.spinning{
      opacity: 0.5;
  }

  .cardHeaderButton.active{
      background-color: #4a56f8;
    color: #fff !important;
    border: 1px solid #4a56f8;
  }

  .cardHeaderButton.cardHeaderButton_camp_program_filter.active,
  .cardHeaderButton.cardHeaderButton_camp_program_filter.active:hover{
    background-color: #cd386f;
    border: 1px solid #cd386f;
  }

  .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';
      */
      font-family: 'roboto';
      font-weight: normal;
      border-radius: 2px;
      border: 2px solid #fff;
      background-color: #fff;
      color: #4a56f8;
      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;
      cursor: pointer;
       padding: 10px;
  }

  .tableRowDropdownOption{
      font-size: 15px;
      color: #52596f;
      cursor: pointer;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 12px;
      padding-right: 12px;
      text-align: left;
      white-space: nowrap;
  }

  tr .tableRowDropdownOption p{
    color: #52596f;
  }

  .tableRowDropdownOption:hover p{
    color: #081333;
  }

  .tableRowDropdown.warning:hover p{
    color: #c34e4e !important;
  }

  .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;
  }

  .importIcon{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/exportIcon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    height: 20px;
    width: 20px;
    transform: scaleY(-1);
}

  .settingsIcon{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/settings-icon.png);
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: 3px;
    background-size: 13px;
    height: 17px;
    width: 17px;
    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{
    border: 1px solid #6f6f9b;
    color: #080852;
      /*
      -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.lighter-blue.inactive:hover,
    .splash-button.blue.inactive:hover{
        background-color: #f3f5f7 !important;
        border: 2px solid #f3f5f7 !important;
        color: #b1b2b5 !important;
    }

    .primaryButton.lighter-blue.inactive, 
    .splash-button.blue.inactive{
        background-color: #f3f5f7 !important;
        border: 2px solid #f3f5f7 !important;
        color: #b1b2b5 !important;
    }

  .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(-1px);
      -moz-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
      -o-transform: translateY(-1px);
      transform: translateY(-1px);
      -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: 15px;
      padding-right: 15px;
      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: 34px;
  }

  .toolbarButton.hasIcon-right{
      padding-right: 34px;
  }

  .toolbarButton .buttonIcon{
      position: absolute;
      left: 18px;
      top: 17px;
  }

  .toolbarButton .buttonIcon-right{
      position: absolute;
    right: 5px;
    top: 18px;
  }

  .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,
  .toolbarButton.primary .eventOrderStatusInsert
  {
      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;
      */
      font-family: 'roboto' !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;
      */
      font-family: 'roboto' !important;
  }

  /*------------------------------ table views ---------------------------- */

  .tableRow .smallIcon,
  .table-view-row .smallIcon{
    border-radius: 3px;
  }

  .table-view-row, .tableRow.bigger td{
      padding-top: 25px;
      padding-bottom: 25px;
      /*
      padding-left: 30px;
      padding-right: 30px;
      */
      padding-left: 22px;
      padding-right: 22px;
      font-size: 20px;
      line-height: 28px;
      background: #fff;
      border-top: 1px solid #e4ebf1;
      -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, 
  tr.pointer:hover .sticky-column
  {
      background-color: #f8f9fb !important;
  }

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

  td .tap-circle{
    margin-top:0px;
  }

  .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;
  }

  .recipientBubble.tap-circle, 
  .recipientBubble_sms.tap-circle{
    padding-right: 9px;
    display: inline-block;
    padding-left: 9px;
    font-weight: 400;
    font-family: roboto;
    text-transform: none !important;
    border-radius: 24px;
    font-size: 13px !important;
    padding-top: 0px;
    padding-bottom:0px;
    line-height: 24px;
    background-color: #f4f6f7;
    color: #353954;
    white-space: nowrap;
    margin-top: 2px;
    margin-right: 5px !important;
    margin-bottom: 5px;
    margin-top: 0px !important;
    border: 1px solid #e8edf1;
  }

  p.tap-circle.incomplete{
      color: #46505d !important;
  }

  .tap-circle.good{
      background-color: #c6f1c6 !important;
      color: #105619 !important;
  }

  .tap-circle.purple,
  .table-row-tag.purple{
    background-color: #f1e3f9 !important;
      color: #8303d4 !important;
  }

  .tap-circle.blue,
  .header-callout.blue,
  .table-row-tag.blue{
      background-color: #d9eefd !important;
      color: #3f538e !important;
  }

  .tap-circle.bad,
  .table-row-tag.bad{
      /*
      background-color: #f7f4cd !important;
      color: #8e2222 !important;
      */
      background-color: #f3f4f5 !important;
      color: #8e3822 !important;
  }

  .tap-circle.orange,
  .table-row-tag.orange{
      background-color: #ffeeda;
      color: #c65102;
  }

  .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: -22px;
      margin-right: -22px;
      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: #525e6b;
  }

  .accordionToggle{
      font-size: 22px;
    position: absolute;
    right: 30px;
    top: 29px;
    font-weight: 200;
  }

  .accordionHeader.active{
      color: #fff;
      background-color: #4c58a7;
  }

  .accordionHeader h2{
      font-family: 'roboto';
    font-weight: normal;
    padding-right: 25px;
    line-height: 36px;
    font-size: 22px;
  }

  .accordionHeader.active .accordionToggle{

      -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
      /*
       -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 ---------------------------- */

  .hp-tagline-2{
    font-size: 58px !important;
    line-height: 63px !important;
    margin-bottom: 0px !important;
  }

  .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;
      /* padding-bottom: 90px; */
      padding-bottom: 0px;
  }

  .crossSectionWrap.reservations-version{
    padding-top:60px;
    min-height:60%;
    max-width:1200px;
    width: 95%;
  }

  .hpProductImage{
      top: 150px;
      width: 100%;
      right: -55%;
      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.accounting{
      background-image: url(https://d282wvk2qi4wzk.cloudfront.net/accounting-ipad-1.png);
  }

  .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-5.png);
  }

  .crossSection{
      min-height: 400px;
      min-width: 280px;
  }

  .crossSectionTextWrap{
      padding-top: 130px;
      padding-bottom: 90px;
      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: bold;
      font-size: 22px;
  }

  .crossSectionWrap h4{
      /*
      font-weight: normal;
      font-size: 22px;
      line-height: 32px;
      color: #122947;
      */
         font-size: 20px;
      line-height: 32px;
      color: #5f7288;
  }

  .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: 90px;
      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 --------------------- */

/*-- 10.17 vue calendar --*/
.standardCardBody.calendar{
  background-color: #fff;
  border-top: 1px solid #e4ebf1;
  border-bottom: 1px solid #e4ebf1;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 22px;
  padding-bottom: 22px;
  position: relative;
  min-height: 20px;
  /*-- important so tooltips and other content don't push width of page on mobile --*/
  overflow: visible;
} 

.cs-calendar-select-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4ebf1;
  background-color: #fff;
  border-radius: 5px;
  height: 38px;
  padding: 0 12px 0 12px;
  cursor: pointer;
  margin-right: 10px;
}

.calendar-view-dropdown{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 70px; 
  max-width: 70px; 
}

.select-view-options{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
  box-shadow: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  border-radius: inherit;
  font-size: inherit;
  padding-left: 0px;
  padding-right: 0px;
  appearance: inherit;
  padding-bottom: 0px;
  padding-top: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  min-width: 90px; 
  max-width: 90px; 
}

.view-options{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.5rem;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: .00625em;
  background-color: inherit;
  min-width: 180px;
  max-width: 180px; /* Changed to max-width to limit the width */
  overflow-x: hidden; /* Hide horizontal overflow */
  left: -90px; /* Adjust the left property to move the dropdown to the left */
  transition: background-color 0.3s; /* Add transition */
}

.view-options li{
  display: flex;
  height: 36px;
  width: 100%; /* Adjusted to take full width of the parent */
  padding-left: 16px;
  padding-right: 16px;
  padding: 10px;
  cursor: pointer;
  color: rgb(60,64,67);
  font-size: 14px;
  overflow: hidden;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}

.view-options li:hover {
  background-color: #f0f0f0;
}

.cs-calendar-wrap-v2{
  border: 1px solid #e7ecf0;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

.flexGrid{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  text-align: center;
  height: 100%;
}

.grid-cell.timestamp{
  border: none;
}

.daysOfWeek-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: 26px;
}

.placeholder-daysOfWeek-grid{
  display: grid;
  grid-template-columns: 5% repeat(7, minmax(10%, 1fr));
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: fit-content;
  border-width: 1px 0 0 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.day-daysOfWeek-grid{
  display: grid;
  grid-template-columns: 5% repeat(1, minmax(100%, 1fr)); /*changed to 95% to fit allDay-cell-event*/
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: fit-content;
  border-width: 1px 0 0 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: 150px;
}

.placeholder-calendar-grid{
  display: grid;
  grid-template-columns: 5% repeat(7, minmax(10%, 1fr));
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: 12px;
  border-width: 1px 0 0 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.day-calendar-grid{
  display: grid;
  grid-template-columns: 5% repeat(1, minmax(95%, 1fr)); /*changed to 95% to fit allDay-cell-event*/
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  overflow: none;
  grid-auto-rows: 12px;
  border-width: 1px 0 0 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.daysOfWeek-grid, .calendar-grid, .placeholder-daysOfWeek-grid, .placeholder-calendar-grid {
  margin: 0; /* Remove default margin */
}

.grid-cell {
 	position: relative;
	white-space: nowrap;
  min-height: 100%;
	max-height: 100%;
  min-width: 100%;
	max-width: 100%;
  border-width: 1px 0 0 1px;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell-week {
  position: relative;
  white-space: nowrap;
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
}

.grid-cell.borderClose{
  border-width: 1px 1px 0 1px;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell.borderTopRightBottomClose{
  border-width: 1px 1px 1px 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell.borderTopBottomClose{
  border-width: 1px 0 1px 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell-week.timestamp.borderBottomClose{
  border-bottom: 1px solid #e4ebf1;
}

.grid-cell.showBorder, .grid-cell-week.showBorder {
  position: relative;
  white-space: nowrap;
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  border-width: 0 0 1px 1px;
  border-color: #e4ebf1;
  border-style: solid;
}
  
.grid-cell.hideBorder, .grid-cell-week.hideBorder {
  position: relative;
  white-space: nowrap;
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  border-width: 0 0 0 1px;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell.dayOfWeek, .grid-cell-week.dayOfWeek{
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #70757a;
  min-width: 100%;
	max-width: 100%;
  line-height: 26px; /* Match line-height with grid-auto-rows */
}

.grid-cell.dayOfWeek.hide, .grid-cell-week.dayOfWeek.hide {
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #70757a;
  min-width: 100%;
	max-width: 100%;
  min-height: 35.5px; /* Match line-height with grid-cell-week.dayOfWeek content */
  max-height: 35.5px; /* Match line-height with grid-cell-week.dayOfWeek  content */
  border-width: 0 0 1px 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell-week.allDay{
  border-width: 0.5px;
  border-color: #e4ebf1;
  border-style: solid;
}

.grid-cell.allDay, .grid-cell-week.allDay{
  display: block;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #70757a;
  line-height: 20px;
}

.grid-cell.day, .grid-cell-week.day{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #70757a;
  min-width: 100%;
	max-width: 100%;
  line-height: 26px; /* Match line-height with grid-auto-rows */
}

.grid-cell.notCurrentMonth, .grid-cell-week.notCurrentMonth{
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.4);
}

.grid-cell.currentMonth, .grid-cell-week.currentMonth{
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(60, 64, 67, 1);
}

.cell-content{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* must align-items for month view */
}

.cell-content-week.allDay{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* must align-items for month view */
}

.cell-content.calendarObj, .cell-content-week.calendarObj{
  padding-top: 5px;
}

.week-cellDay-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-width: 0 0 1px 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.day-cellDay-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
}

.grid-cell-week.day{
  border-width: 0 0 1px 0;
  border-color: #e4ebf1;
  border-style: solid;
}

.cell-day.dayOfWeek{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #70757a;
  font-size: inherit;
  font-weight: 500;
}

.numberHeader{
  padding-right: 3.5px;
  display: flex;
}

.dayHeader{
  margin-top: 9.5px;
  display: flex;
}

.cell-day.calendarObj{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 6px 0;
}

.cell-day.calendarObj:hover{
  background-color: rgba(232, 237, 241, 0.7);
}

.cell-day.timestamp{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  font-size: 10px;
  font-weight: 300;
  color: #70757a;
}

.timestampIsActive{
  font-family: inherit;
  font-weight: 400;
  color: green;
}

.timestamp{
  position: relative;
  top: 1.35px;
  padding-right: 1.5px;
}

.cell-events-month{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

.cell-events-week{
  display: flex;
  width: 100%;
  padding: 0;
}

.overflow-cell-events{
  padding-left: 7.5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 550;
  font-family: inherit;
  color: inherit;
  font-size: 11.5px;
  width: 95%;
  margin: 5px 0 5px 0;
}

.event-page-name{
    font-family: 'roboto';
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 18px;
    line-height: 30px;
    font-weight: 500;
    color: #292e4a;
}

/* blog post */
.event-subtext{
  font-family: 'roboto';
  text-align: justify;
    hyphens: auto;
  padding-top: 10px;
  line-height: 28px;
  font-size: 18px;
  font-weight: normal;
  color: #606d7c;
}

.blog-post-body{
    color: #292e4a;
}

.blog-post-body p{
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
    hyphens: auto;
    padding-bottom: 14px;
    padding-top: 14px;
}

@media (max-width: 720px) {
  .blog-post-body img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

.event-page-section-header{
    font-family: 'roboto';
    font-size: 22px;
    margin-top: 30px;
    line-height: 30px;
    font-weight: 500;
    color: #292e4a;
}

.event-page-location{
    color: #728394;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-top: 4px;
}

.event-page-host-name{
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 18px;
    padding-top:10px;
}

.event-page-host-icon{
    background-size: 60% !important;
    border: 1px solid #e4ebf1;
    margin-left: 0px;
    margin-right: 14px;
    height: 60px;
    width: 60px;
    min-height: 60px;
    max-height: 60px;
    min-width: 60px;
    max-width: 60px;
}

.event-page-callout{
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    font-size: 13px;
    margin: 6px;
    color: #6a7482;
    padding-bottom: 8px;
    padding-top: 8px;
    cursor: pointer;
}

.event-page-callout i{
    padding-right:3px;
}

.event-page-callout.smaller{
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
}

.cell-event-month{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0; /* Reset margin to remove extra space */
  flex: 1; /* Allow the title to take up remaining space */
  overflow: hidden;
  transition: background-color 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  border-radius: 2px;
  width: 100%;
  margin: 2.75px 0 2.75px 0;
  padding: 1.5px 0 1.5px 0;
}

.transparent-event{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0; /* Reset margin to remove extra space */
  flex: 1; /* Allow the title to take up remaining space */
  overflow: hidden;
  transition: background-color 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  border-radius: 2px;
  width: 100%;
  margin: 2.75px 0 2.75px 0;
  padding: 1.5px 0 1.5px 0;
}

.overlay-events-contain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.overflow-date-contain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overflow-dateOfWeek{
  font-family: inherit; 
  color: #70757a;
  font-size: 11px;
  letter-spacing: .8px;
  line-height: 16px;
  padding-bottom: 0;
  text-transform: uppercase;
}

.overflow-day{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit; 
  font-weight: 400;
  cursor: pointer;
  outline: none;
  font-size: 25px;
  line-height: 36px;
  color: rgb(60,64,67);
  width: 40px;
  border-radius: 50%;
  height: 36px;
}

.cell-event-overlay{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: inherit;
  font-size: 12.5px;
  margin: 0;
  overflow: hidden;
  transition: background-color 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  border-radius: 2px;
  width: 100%;
  height: 22px;
}

.event-title{
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2.5px 0 2.5px 0;
}

.cell-event-week{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  margin: 0;
  flex: 1;
  overflow: hidden;
  transition: background-color 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  border-radius: 2px;
  width: 100%;
  font-size: 12px;
  top: 6.5px;
  padding: 5px 0 0 5px;
}

.allDay-cell-event{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0; /* Reset margin to remove extra space */
  flex: 1; /* Allow the title to take up remaining space */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: background-color 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  border-radius: 2px;
  cursor: pointer;
  width: 95%;
  padding: 0 0 0 5px;
  margin: 1px;
}

.cell-event li::marker {
  color: red;
  margin: 0; /* Reset margin to remove extra space */
}

.overflow-cell-events:hover, .cell-event-week:hover, .cell-event-month:hover, .cell-event-overlay:hover {
  background-color: rgba(128, 128, 128, 0.1);
  cursor: pointer;
}

/*-- calendar --*/

.cs-calendar-wrap{
  border: 1px solid #e7ecf0;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.cs-calendar{
  height: 90vh;
}

.cs-calendar-menu-wrap{
  padding: 10px;
}

.cs-calendar-date-range-title{
    line-height: 38px;
    font-size: 22px !important;
    margin-left: 8px;
}

select.cs-calendar-view-select{
  background-color: inherit;
    box-shadow: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    border-radius: inherit;
    font-size: inherit;
    padding-left: 0px;
    padding-right: 0px;
    appearance: inherit;
    padding-bottom: 0px;
    padding-top: 0px;
    border: none;
    outline: none;
}

select.vue-cs-calendar-view-select{
  background-color: inherit;
  box-shadow: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  border-radius: inherit;
  font-size: inherit;
  padding-left: 0px;
  padding-right: 0px;
  appearance: inherit;
  padding-bottom: 0px;
  padding-top: 0px;
  border: none;
  outline: none;
}

select.cs-calendar-view-select:hover{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.cs-calendar-button, .cs-calendar-select-wrap{
    border: 1px solid #e4ebf1;
    background-color: #fff;
    border-radius: 5px;
    height: 38px;
    line-height: 38px;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    margin-right: 10px;
}

select.vue-cs-calendar-view-select:hover{
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
}

.cs-calendar-button, .vue-cs-calendar-select-wrap{
  border: 1px solid #e4ebf1;
  background-color: #fff;
  border-radius: 5px;
  height: 38px;
  line-height: 38px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  margin-right: 10px;
}

.cs-cal-filter-option{
    cursor: pointer;
    color: #6a7482;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: 300;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 25px;
    background-color: #fff;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 30px;
  }

  .cs-cal-filter-option.active,
  .cs-cal-filter-option:hover
  {
    color: #fff !important;
    background-color: #4a56f8;
  }

.cs-calendar-button-previous{
    background-size: 15px;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;
    min-width: 34px;
    width: 34px;
    max-width: 34px;
    height: 34px;
    max-height: 34px;
    padding: 0px;
}

.cs-calendar-button-next{
    background-size: 15px;
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/backArrowBlack.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;
    min-width: 34px;
    width: 34px;
    max-width: 34px;
    height: 34px;
    max-height: 34px;
    padding: 0px;
    -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
}

.cs-calendar-all-day, .cs-calendar-time{
  font-weight: normal;
  font-family: 'roboto';
  font-weight: normal;
  font-size: 12px;
}

/* the time-centered class was causing problems - commenting out june 13, 2023) */
.cs-calendar-all-day,
.cs-calendar-time-centered{
    font-weight: normal;
    font-family: 'roboto';
    font-weight: normal;
    font-size: 12px;
    font-weight: bold;
    height: 100%;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

.day-item.is-locked {
    text-decoration: line-through !important;
}

.tui-full-calendar-weekday-schedule {
  border: none !important;
  line-height: inherit !important;
  padding-left: 3px;
}

.tui-full-calendar-weekday-schedule-title{
  line-height: 24px;
}

.tui-full-calendar-weekday-grid-more-schedules{
  font-family: 'roboto';
  font-weight: normal;
    font-weight: 500;
    color: #52596f;
}

.cs-calendar-all-day,
.cs-calendar-time,
.cs-calendar-time-hours
{
  font-weight: normal;
  font-family: 'roboto';
  font-size: 12px;
}

.cs-calendar-time-hours.left{
  padding-right: 4px;
}

.cs-calendar-time-hours.right{
  padding-left: 4px;
  display: none;
}

.cs-calendar-time-bullet{
    position: relative;
    display: inline-block;
    padding: 0;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 100%;
    background-color: #333;
    margin-left: -3px;
}

.tui-full-calendar-weekday-schedule {
  border: none !important;
    line-height: 18px !important;
    padding-left: 4px;
    margin-left: 7px !important;
    margin-right: 7px !important;
}

.tui-full-calendar-weekday-schedule-bullet{
    display: none !important;
}

.tui-full-calendar-weekday-schedule-title {
    padding-left: 3px !important;
}

.day-item.is-locked {
    text-decoration: line-through !important;
}

  /*------------------------ 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';
      */
      font-family: 'roboto';
      font-weight: normal;
      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.no-button{
    padding-bottom: 20px;
  }

  .panelWrap.active{
      opacity: 1;
      visibility: visible;
      right: 0px;
  }

  .panelSectionHeader{
          text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: #52596f;
    font-weight: 500;
  }

  .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;
  }

  .floating-cart-button{
      position: fixed;
      width: 290px;
      bottom: -80px;
      max-width: 400px;
      min-width: 280px;
      height: 44px;
      font-size: 12px;
      left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .floating-cart-button .number-of-items-insert{
    width: 25px;
    height: 25px;
    background-color: #404c83;
    line-height: 26px;
    padding-left: 1px;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    font-family: 'roboto';
    font-weight: normal;
    margin-top: -2px;
  }

  .floating-cart-button.show{
      bottom: 10px;
  }

  .secondaryButton.panelButton.show.confirmedAddCardOnFile{
    bottom: 65px;
  }

  .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 #e4ebf1;
    margin-top: 15px;
    padding-top: 10px;
  }

  .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-size: 18px;
      line-height: 18px;
      color: #2c323a;
  }

  .order-summary-block{
      margin-top: 90px;
  }

  .order-summary-block.short-header{
      margin-top: 90px;
  }

  .order-summary-total{
    font-size: 20px;
    line-height: 20px;
    color: #2c323a;
  }
  .order-summary-total-label{
    font-weight: bold;
    font-family: 'Montserrat';
    color: #2c323a;
    font-size: 18px;
  } 

  /*------------------------ 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;
      font-weight: normal;
      font-family: 'roboto';
  }

  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;
      */
      padding-left: 22px;
      padding-right: 22px;
  }

  .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{
      color: #2e3a62;
      font-size: 20px;
      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;
  }

  /*------------- cs hosted invoices / statements -------- */

  .cs-statement-line-customer-name{
    color: #728394;
    font-size: 13px;
    margin-top: -4px;
    display: inherit;
  }

  .cs-hosted-invoice-summary-header{
    background-color: #fafafa;
    padding: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
    border: 1px solid #e7eaef;
  }

  .cs-memo-wrap{
    border: 1px solid #e7eaef;
    padding: 10px;
  }

  .cs-hosted-invoice-header-wrap{
    padding-left: 40px;
    /* -- added for rancho and old lyme 10/17/23 --*/
    padding-top: 0px !important;
  }

  .cs-hosted-invoice-header-wrap.qb-style{
    padding-top: 45px !important;
  }

  .cs-hosted-invoice-summary-wrap-inner{
    padding-left: 10px;
    max-width: 400px;
  }

  .cs-hosted-invoice-total-wrap{
    border-top: 1px solid #e6eaec;
    margin-top: 10px;
  }

  .cs-hosted-invoice-total-wrap p{
    font-weight: 500;
    font-family: 'roboto' !important;
    color: #292e4a;
  }

  /*-- statement cards --*/

   

  /*-- signups list (personal dashboard) --*/

  .cs-signups-list-wrap,
  .cs-notifications-list-wrap{
    text-align: left;
    min-width: 250px;
  }

  .cs-signups-list-wrap .wb-content button,
  .cs-notifications-list-wrap .wb-content button{
    min-width: 150px;
  }

  .cs-signups-list-wrap .searchBarWrap,
  .cs-notifications-list-wrap .searchBarWrap{
    border: 1px solid #e8edf1;
    margin-top: 10px;
  }

  .cs-signups-row,
  .cs-notifications-row {
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      border-bottom: 1px solid #e8edf1;
  }

  .cs-dynamic-events-row {
        display: -ms-flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        border-bottom: 1px solid #e8edf1;
    }

    .cs-dynamic-events-row.pointer {
        cursor: pointer;
    }

    .cs-dynamic-events-row.pointer:hover {
        background-color: #f8f9fb;
    }

  .cs-status-dot{
    height: 6px !important;
    width: 6px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 6px !important;
    min-width: 6px;
  }

  .cs-status-dot-text{
    font-size: 13px;
    /*
    color: #606d7c;
    font-weight: 500;
    */
  }

  .cs-message-row-main-wrap{
    padding: 20px;
    font-size: 1.1em !important;
    /* width: 80%; */
    max-width: 550px !important;
  }

  .cs-message-row-content{
    font-size: 14px;
    color: #788097;
    padding-top: 5px;
  }

  .cs-message-row-date{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
  }

  .cs-message-row-date-wrap{
    text-align: center;
    padding: 0px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .cs-message-row-subject{
    padding-top: 0px;
    font-size: 14px;
    padding-bottom: 0px;
  }

  .cs-message-row-subject.bold{
    color: #2a375f;
  }

  .cs-message-row-subject.light{
    color: #697684;
  }

  .header-callout.cs-message-row-recipient-count{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
    color: #606d7c;
    border-radius: 20px;
    margin-left: 4px;
    min-width: 12px;
    text-align: center;
  }

  .cs-message-row-subject.no-subject{
    font-style: italic;
  }

  .cs-customer-transaction-description-wrap{
    max-width: 300px;
    padding: 20px;
    font-size: 1.1em !important;
  }

  .cs-customer-transaction-1{
    font-size: 13px;
    color: #606d7c;
    white-space: initial;
  }

  .cs-signups-row-inner,
  .cs-notifications-row-inner,
  .cs-statement-card-inner{
      display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      text-align: left;
  }

  .cs-invoice-item-card-cadence{
    font-size: 12px;
    font-weight: normal;
    text-transform: initial;
    font-family: 'roboto';
    color: #606d7c;
  }

  .cs-signups-date-month,
  .cs-notification-date-month,
  .cs-statement-card-date-month,
  .cs-payment-card-status,
  .cs-invoice-card-status{
    font-size: 0.8em !important;
    text-transform: uppercase;
    font-weight: 500;
    color: #e37925;
  }

  .cs-payment-card-status.good,
  .cs-invoice-card-status.good{
    color: #04b767;
  }

  .cs-payment-card-status.bad,
  .cs-invoice-card-status.bad{
    color: #8e3822;
  }

  .cs-payment-card-status.pending,
  .cs-invoice-card-status.pending{
    color: #afb1b8;
  }

  .cs-invoice-card-status.open, 
  .cs-statement-card-date-month{
    color: #4a56f8;
  }

  .cs-payment-card-description{
    font-size: 12px;
    max-width: 280px;
    margin-top: 5px;
    color: #606d7c;
    padding-top: 3px;
    /* padding-left: 5px; */
    white-space: initial;
    overflow: initial;
    /* background-color: #f6f9f9; */
    border-radius: 3px;
    width: auto;
    min-width: initial;
    /* border: 1px solid #eaf1f1; */
  }

  .cs-payment-card-status-wrap,
  .cs-invoice-card-status-wrap{
    text-align: center;
    padding: 20px;
    padding-left: 10px;
    padding-right: 0px;
    display: flex;
    align-items: center;
    width: 90px;
    position: relative;
  }

  .cs-signups-date-day,
  .cs-notifications-date-day,
  .cs-statement-card-date-day{
    font-size: 1em !important;
    text-transform: uppercase;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 500;
    padding-top: 4px;
  }

  .cs-signups-row-image{
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px;
    min-width: 75px;
    min-height: 100px;
    max-width: 75px;
    max-height: 100px;
    border-radius: 3px;
    background-color: #77818f;
    color: #fff;
    font-weight: 500;
    font-size: 35px;
    text-align: center;
    align-items: center;
    background-position: center;
  }

  .cs-notifications-row-image{
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    border-radius: 100%;
    border: 1px solid #e2e8e8;
    color: #fff;
    font-weight: 500;
    font-size: 35px;
    text-align: center;
    align-items: center;
    background-position: center;
    position: relative;
  }

  .cs-signups-date-wrap, 
  .cs-notifications-date-wrap, 
  .cs-statement-card-date-wrap{
    text-align: center;
    padding: 20px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    width: 30px;
    position: relative;
  }

  .cs-signups-name-wrap{
    padding: 20px;
    font-size: 1.1em !important;
    min-width: 240px;
    max-width: 240px;
  }
  .cs-notifications-name-wrap{
    padding: 20px;
    font-size: 1.1em !important;
  }

  .cs-statement-card-outer{
    margin: 8px;
    border: 1px solid #e5eaec;
    border-radius: 5px;
    cursor: pointer;
  }

  .cs-statement-card-name-wrap{
    padding: 20px;
    font-size: 1.1em !important;
  }

  .cs-signups-links-wrap-inner{
    padding: 10px;
    text-align: left;
    padding-bottom: 12px;
  }

  .cs-signups-links-wrap{
    display: flex;
    align-items: center;
    max-width: 180px;
    text-align: left;
  }

  .cs-signups-links-wrap a {
    color: #236651;
    border-bottom: 1px solid #236651 !important;
    text-decoration: none !important;
    font-family: inherit;
    line-height: 24px;
    font-size: 14px;
    white-space: nowrap;
  }

  .cs-signups-button-wrap{
    padding-left: 20px;
  }

  .cs-signups-button-wrap button{
    min-width: 150px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
  }

  .cs-signups-name-0,
  .cs-notifications-name-0,
  .cs-statement-card-name-0{
    font-size: 0.9em;
    padding-bottom: 5px;
  }

  .cs-signups-name-1,
  .cs-notifications-name-1,
  .cs-statement-card-name-1{
    font-size: 13px;
    color: #606d7c;
  }

  .cs-signups-name-2,
  .cs-notifications-name-2{
    font-size: 13px;
    color: #606d7c;
  }

  .cs-status-dot-text{
    font-size: 13px;
    color: #606d7c;
  }

  .cs-signups-callouts .tap-circle{
      margin: 0px;
      margin-top: 3px;
      display: inline-block;
      font-size: 10px !important;
      font-family: 'roboto';
      text-transform: uppercase;
      font-weight: 500;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 3px;
      line-height: initial;
  }

  /*------------- 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;
  }

  /*------------- applicant export -------- */

  .applicant-export-wrap{
    border: 1px solid #e4ebf1;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .applicant-export-body{
    padding: 12px;
  }

  .applicant-export-header{
    border-bottom: 1px solid #e4ebf1;
    padding: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'roboto';
    text-align: center;
  }

  /*------------- 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;
      display: none;
  }

  .view.active,
  .view.vue {
      opacity: 1;
      visibility: visible;
      max-height: initial;
      overflow: initial;
      display: block;
  }

  .view_loading.active{
      min-height: 75vh;
  }

  .membership-inquiry .cs-membership-card-outer{
    margin-left: 0px;
    cursor: initial;
  }

  /*--------------------- 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;
      border-radius: 5px;
      -webkit-box-shadow: 1px 1px 1px 0px rgb(50 50 93 / 5%), 0 3px 6px 0 rgb(0 0 0 / 5%) !important;
      -moz-box-shadow: 1px 1px 1px 0px rgb(50 50 93 / 5%), 0 3px 6px 0 rgb(0 0 0 / 5%) !important;
      box-shadow: 1px 1px 1px 0px rgb(50 50 93 / 5%), 0 3px 6px 0 rgb(0 0 0 / 5%) !important;
  }

  .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-weight: normal;
      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;
  }

  .reserve-time-column{
    line-height: 50px;
  }

  .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-v2{
    object-fit: cover;
    z-index: 1;
    border-radius: 5px;
    width: 100%;
    height: 100%;
  }

  .event-card-image-v2-background{
    width: 500px; 
    height: 425px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid #fff;
    filter: blur(0.25px) grayscale(0.25);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 5px;
  }

  .container-for-event-image {
    max-width: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    position: relative;
    border: 1px solid #e4ebf1;
    border-radius: 5px;
    overflow: hidden;
  }

  .container-for-event-image.blog{
    max-width: initial;
    height: 450px;
  }

  .event-card-image-blur-overlay{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(253,253,253,0.8);
  }

  .event-card-image-inner-blurred{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-filter: blur(6px);
      -moz-filter: blur(6px);
      -o-filter: blur(6px);
      -ms-filter: blur(6px);
      filter: blur(6px);
  }

  .container-for-event-icons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0 15px 0 15px;
  }

  .event-page-icon-title{
    font-size: 13px;
  }

  .event-page-register-wrap{
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    padding: 20px;
    max-width: 400px 
  }

  .mobile-version .event-page-icon-title{
    font-size: 12px;
  }

  .mobile-version .event-page-icon-wrap{
    margin-left: 4px;
    margin-right: 4px;
    width: auto;
    max-width: 80px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .mobile-version .event-page-icon{
    font-size: 18px;
  }

  .event-page-icon-wrap {
    width: 82px;
    height: 82px;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    background-color: #fff;
    font-family: 'roboto';
    border: 1px solid #e4ebf1;
    color: #6a7482;
    cursor: pointer;
  }

  .event-page-icon{
    font-size: 26px;
    line-height: 30px;
  }

  .event-page-icon-wrap:hover{
    background-color: #f8f9fb;
    color: #283664;
  }

  .micro-site-border{
    border: 0.75px solid rgb(221, 221, 221) !important; 
    width: 85%; 
    border-radius: 2px; 
    margin: 0 auto;
  }

  .event-card-image-inner-contain{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .event-card-image-inner{
      position:absolute;
      top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
      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-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      font-size: 18px;
      line-height: 28px;
      color: #313646;
  }

  .customFieldResponseInsert{
      padding: 20px;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      font-size: 18px;
      line-height: 28px;
      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);
  }

  .show_full_name .cardFooterText{
    font-size: 14px !important;
    white-space: break-spaces !important;
    line-height: 16px;
    text-align: left;
  }

  .card-picker-footer .cardFooterText{
      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-size: 16px;
      line-height: 18px;
      color: #2c323a;
      text-align: right;
  }

  .mobile-order-product-row .price{
      font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    color: #57616e;
    text-align: left;
    font-family: 'roboto';
    font-weight: normal;
  }

  .total_in_cart_callout{
    font-size: 14px;
    color: #57616e;
    font-family: 'roboto';
    font-weight: normal;
  }

  .total_in_cart_callout a{
    font-weight: normal !important;
  }

  .add-to-order-price-insert{
    position: absolute;
    right: 15px;
  }

  #overlay_add-product-to-online-order .add-product-image,
  #overlay_add-product-add-on-to-online-order .add-product-add-on-image
  {
    height: 320px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #overlay_add-product-to-online-order .standardOverlayCard,
  #overlay_add-product-add-on-to-online-order .standardOverlayCard
  {
    max-width: 600px;
    background-color: #fff;
    border-radius: 5px;
    bottom: 50px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    top: 50px;
    right: 25px;
    left: 25px;
    width: auto;
    overflow: hidden;
  }

  .add-product-title-insert,
  .add-product-add-on-title-insert
  {
    font-family: 'roboto';
    font-weight: normal;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 20px;
    text-transform: uppercase;
    color: #2c323a;
    font-weight: 500;
  }

  .add-product-inner,
  .add-product-add-on-inner
  {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 70px;
    padding-bottom: 50px;
  }

  .add-product-button-wrap,
  .add-product-add-on-button-wrap
  {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 10px;
    border-top: 1px solid #e4ebf1;
  }

  .add-product-description-insert,
  .add-product-add-on-description-insert
  {
    font-size: 14px;
    text-transform: none;
    /*
    font-family: 'modern';
    font-weight: bold;
    */
    font-family: 'roboto';
    font-weight: normal;
    line-height: 18px;
    color: #606d7c;
    margin-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .cart-body .product-explain, .cart-body .qty{
      font-size: 16px;
      text-transform: none;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      line-height: 20px;
      color: #606d7c;
      margin-bottom: 5px;
  }

  .cart-body .qty{
      color: #606d7c !important;
  }

  .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: 10001;
  }

  .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: #1b2556;
  }

  .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;
  }

  td .xIcon-plain{
    height: 22px;
    width: 20px;
    background-size: 40%;
    margin-top: 0px;
  }

  .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-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{
      text-align: center;
      font-size: 20px;
      line-height: 34px;
  }

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

  td .quantityPickerV2{
    margin-top: 4px;
    margin-bottom: 4px;
    height: auto;
  }

  .plusButtonV3{
    padding: 12px;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
  }

  .minusButtonV3{
    padding: 12px;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
  }

  .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 ------------------------ */

    /* https://vue3datepicker.com/customization/theming/#css-variables */
    :root {
        --dp-cell-border-radius: 5px !important; /*Specific border radius for the calendar cell*/
        --dp-border-radius: 5px !important; /*Configurable border-radius*/
    }

    .dp--menu-wrapper{
        z-index: 101 !important;
    }

    .dp__theme_light {
        --dp-hover-color: rgb(241 241 246) !important;
        --dp-border-color: #e4ebf1 !important;
        --dp-menu-border-color: #e4ebf1 !important;
        --dp-primary-color: #4a56f8 !important;
        --dp-hover-text-color: #081333 !important;
        --dp-text-color: #081333 !important;
    }

    .dp__overlay_container.dp__container_block{
        border-bottom: 1px solid #e4ebf1 !important;
    }

    .dp__main{
        width: auto !important;
    }

    .dp__input_icon{
        left: 18px !important;
        font-size: 12px !important;
        color: #646a7d !important;
    }

    .dp__calendar_header_item{
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #8b93a5 !important;
        height: auto !important;
    }

    .dp__calendar_header_separator{
        background-color: #e4ebf1 !important;
    }

    .cs-global-date-picker{
      width: 186px !important;
      padding-left: 26px !important;
      font-size: 12px !important;
      font-weight: 500;
      font-family: 'roboto' !important;
      color: #2f3a62 !important;
      border: 1px solid #e2e8e8 !important;
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-right: 10px !important;
      margin-left: 10px !important;
      padding-right: 0px !important;
    }

    .cs-global-date-picker.single{
      width: 105px !important;
    }
    .cs-global-date-picker.time{
      width: 278px !important;
    }
    .cs-global-date-picker.time{
      width: 278px !important;
    }
    .cs-global-date-picker.single.time{
      width: 155px !important;
    }

    @media all and (max-width: 900px) {
        .cs-global-date-picker,
        .cs-global-date-picker.single,
        .cs-global-date-picker.time,
        .cs-global-date-picker.single.time
        {
            width: 0px !important;
        }
    }

  .metrics-chart-container,
  .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-scale-item.settings-icon{
     background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_transparent_horizontal.png);
    height: 20px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0px;
    margin-right: -3px;
  }

  .date-picker-scale-item.active{
    color: #4a56f8;
  }

  .date-picker-header{
    margin-left: 22px;
    font-family: roboto;
    font-size: 12px;
    line-height: 34px;
    text-transform: uppercase;
    color: #697684;
    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-scale{
      /*
        color: #525e6b !important;
        */
    color: #2e3a62 !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 #e4ebf1 !important;
  }

  .date-picker-date{
    /*
    color: #525e6b !important;
    */
    color: #2e3a62 !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 #e4ebf1 !important;
  }

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

  /* this is the member-facing version eg for reservations */
  .date-picker-input{
    cursor: pointer !important;
    /*
    color: #292e4a !important;
    */
    color: #2e3a62 !important;
    letter-spacing: 1px;
    font-family: roboto;
    font-size: 16px;
    height: 100%;
    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: #4a56f8;
}

.date-picker-time {
    color: #525e6b !important;
    cursor: default !important;
    display: flex;
    width: 100px;
    height: 28px;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0px;
    border: 1px solid #e4ebf1 !important;
    box-shadow: none;
}

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

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

/*----------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;
  }
 
  #memberPicDisplayZone,
  #applicantPicDisplayZone,
  #productImageDisplayZone{
    width: 180px;
    height: 180px;
    min-height: 180px;
    min-width: 180px;
    border-radius: 5px;
    -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    border: 1px solid #bdcad6;
    background-size: 50%;
    background-position: center;
  }
  #memberPicDisplayZone.has-image,
  #applicantPicDisplayZone.has-image,
  #productImageDisplayZone.has-image
  {
    background-size: cover;
  }

  #profPicDisplayZone.cover{
      background-size: cover !important;
  }

  .product-barcode-wrap{
    border: 1px solid #bdcad6;
    padding-top: 15px;
    padding-bottom: 8px;
    border-radius: 5px;
    max-width: 150px;
  }

  .product-barcode-insert{
    background-size: contain;
    width: auto;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
  }

  /*-------------------------------- 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;
  }

  /*-------------------------------- tee sheet --------------------------------*/

  .tee_sheet_button_wrap{
    max-width: 120px;
    width: 120px;
  }

  .tee_sheet_group_wrap{
    padding-left: 6px;
    padding-right: 6px;
    margin-top: 5px;
    cursor: pointer;
  }

  .tee_sheet_button_wrap div ul li {
    color: #525e6b;
  }

  .version_18_holes .inline-label{
    padding-right: 0px;
    margin-right: 0px;
  }

  .header-callout.tee_sheet_header_callout{
    display: inline-block;
    height: 11px;
    vertical-align: middle;
    line-height: 11px;
    margin-bottom: 4px;
  }

  .tinyIcon.tee_sheet_player_icon{
    display: inline-block;
    margin-bottom: -6px;
    margin-left: 0px;
    margin-right: 5px;
    border-radius: 3px;
  }
  .member_checkin_guest_x_icon{
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border: 1px solid #e4ebf1;
    line-height: 20px;
    color: #525e6b;

  }
  .tee_sheet_player_x_icon{
    position: absolute;
    top: 15px;
    right: 0px;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border: 1px solid #e4ebf1;
    line-height: 20px;
    color: #525e6b;
  }
  .court_reservation_x_icon{
    position: absolute;
    top: -9px;
    right: -9px;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border: 1px solid #e4ebf1;
    line-height: 20px;
    color: #525e6b;
  }

  

  .tee_sheet_player_icon_wrap{
    z-index: 1;
  }

  .quick-action-wrap-with-players{
    margin-top: 20px !important;
  }

  .tee_sheet_order{
    margin: 5px;
    border: 1px solid #e4ebf1;
    border-radius: 3px;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    color: #525e6b;
  }

  .tee_sheet_order_status{
    font-size: 14px;
  }

  .tee_sheet_order_total{
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .tee_sheet_player_icon_v2{
    height: 44px;
    width: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #e8eef3;
  }

  .tee_sheet_player_icon_v2 .fa-user{
    line-height: 40px;
    color: #6c7583;
    font-size: 16px;
  }
  .court-booking-members-only-callout,
  .tee-sheet-members-only-callout{
    background-color: #00beba;
    color: white;
    position: absolute;
    right: -1px;
    top: -1px;
    height: 12px;
    line-height: 12px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 10px;
  }

  .tee_sheet_button{
    margin-left: 0px !important;
  }

  #overlay_add-details-for-tee-time .standardOverlayCard,
  #overlay_add-details-for-reservation .standardOverlayCard
  {
    margin-top: 50px;
    position: relative;
  }

  #overlay_add-details-for-tee-time .add-product-button-wrap,
  #overlay_add-details-for-reservation .add-product-button-wrap
  {
    position: relative;
  }

  /*-------------------------------- banquets --------------------------------*/

  .beo-pdf td{
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .beo-pdf td p,
  .beo-pdf .add-product-option-in-option-group .product-name{
    font-size: 13px !important;
    max-width: 200px;
    white-space: pre-wrap;
    line-height: 15px;
  }

  .beo-pdf .add-product-option-in-option-group{
    padding-bottom: 7px;
    padding-top: 7px;
  }

  .beo-pdf .hide_times .column-time{
    display: none;
  }

  body.v3.beo-pdf .standardCard{
    width: initial !important;
  }

  /*-------------------------------- point of sale --------------------------------*/

  .quick-action-wrap{
    width: 72px;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
    cursor: pointer;
    color: #6a7482;
  }

  .quick-action-wrap.bigger{
    width:90px;
  }

  .quick-action-wrap:hover .quick-action-title, 
  .event-page-callout:hover, 
  .event-page-callout.active, 
  .card-header-button-v3:hover,
  .card-header-button-v3.active{
    color: #081333;
  }

  .quick-action-wrap:hover .quick-action-icon-wrap{
    background-color: #f8f9fb;
  }

  @keyframes slow-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  .quick-action-wrap.gift-cards-available .quick-action-icon-wrap i {
    animation: slow-blink 3s infinite ease-in-out;
  }

  .quick-action-wrap.gift-card-added .quick-action-icon-wrap .fa-gift-card{
      color: #4a56f8
  }


  .quick-action-icon-wrap i{
    font-size: 26px;
    line-height: 70px;
  }

  .quick-action-wrap.bigger .quick-action-icon-wrap i{
    font-size: 32px;
    line-height: 90px;
  }

  .quick-action-icon-wrap i.rotate90{
      transform: rotate(90deg);
  }

  .quick-action-icon-wrap i.rotate180{
    transform: rotate(180deg);
  }

  .quick-action-icon-wrap i.rotate270{
    transform: rotate(-90deg);
  }

  .explain-common-wrap{
    border: 1px solid #e4ebf1;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    padding: 15px;
    color: #606d7c;
  }

  .explain-common-wrap-text{
    line-height: 24px;
    font-size: 16px;
    padding-top: 12px;
  }

  .quick-action-icon-wrap{
    margin: 3px;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    height:70px;
    width: 70px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .quick-action-wrap.bigger .quick-action-icon-wrap{
    height:90px;
    width: 90px;
  }

  .quick-action-icon-wrap .photo{
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .quick-action-icon-wrap .header-callout{
    position: absolute;
    right:0px;
    top:0px;
    background-color: #4a56f8;
    color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 9px;
    min-width: 8px;
    max-width: 62px;
  }

  .quick-action-title{
    margin-top: 8px;
    font-size: 13px;
  }

  .posScrollbarItem .mobile-order-callout{
    width: 20px;
    display: inline-block;
    text-align: center;
    margin-right: -5px;
    border-radius: 5px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    margin-left: 8px;
    background-color: #eab92e;
    font-weight: bold;
    color: #fff;
  }

  .view_members.searching .version_not_searching{
    display: none;
  }

  .merge-order-card{
    min-width: 100px;
    padding: 20px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e4ebf1;
  }

  .merge_order_staff_callout{
    display: inline-block;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .loading-members-card{
    max-width: initial;
    width: 100%;
    margin-top: -20px;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    min-height: 100vh;
  }

  .view_members .version_searching{
    display: none;
  }

  .view_members.searching .version_searching{
    display: initial;
  }

  .view_members .search-callout{
    text-transform: none;
    line-height: 18px;
    text-align: center;
    font-size: 13px;
    color: #7c8694;
    background: #fefeff;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 5px;
  }

  .pos-v5 .search-callout, 
  .pos-v5 .view_members .search-callout {
    text-transform: none;
    line-height: 14px;
    text-align: center;
    font-size: 14px;
    color: #7c8694;
    background: rgba(255, 255, 255, 0.6);
    padding-left: 8px;
    padding-right: 8px;
    /* border-radius: 5px; */
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 5px;
    border: 1px solid #e8edf1;
  }

  .search-callout .search_member_count{
    font-weight: 500;
    color: #2a375f;
  }

  .search-callout-icon{
    background-image: url(https://d282wvk2qi4wzk.cloudfront.net/search-bar-icon-b.png);
    height: 14px;
    width: 14px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 14px;
    margin-bottom: -2px;
  }

  .tappedClearGiftCards{
    display: inline-block;
    margin-top: 0px;
    background-size: 8px;
  }

  .coming-soon .tappedClearGiftCards{
    display: none;
  }

  .reservation-table-row{
        padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e4ebf1;
  }

  .reservation-table-row-header-wrap{
    padding-left: 8px;
    padding-right: 8px;
    border-right: 1px solid #e4ebf1;
  }

  .reservation-table-row-header{
    display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    color: #273665;
    letter-spacing: 0px;
    line-height: 24px;
    font-weight: normal;
  }

  .tappedViewCustomerNotes{
    position: absolute;
    right: 10px;
    bottom: 5px;
    margin-right: 0px;
    height: 30px;
    width: 30px;
    max-width: 26px;
    max-height: 26px;
  }

  .order-card-size_small .hide_for_small_order_buttons{
    display: none;
  }

  .show_for_small_order_buttons{
    display: none;
  }

  .order-card-size_small .show_for_small_order_buttons{
    display: initial;
  }

  .order-card-size_small .posOrderCard {
    height: 92px;
  }

  .order-card-size_small .no_margin_top_for_small_order_cards{
    margin-top: 0px;
  }

  .order-card-size_small .posOrderCard .sectionHeader{
    line-height: 32px;
  }

  .order-card-size_small .order-card-background{
    padding-top: 1px;
    padding-bottom: 1px;
    height: 90px !important;
  }

  .house-account-confirm-wrap{
    height: auto !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
    color: #728394;
  }

  .cs-card-reader-outer{
    border-radius: 5px;
    height: 180px;
    width: 300px;
    background-color: #e8edf1;
    position: relative;
    border: 1px solid #e8edf1;
    overflow: hidden;
  }

  .cs-card-reader-helper-text{
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .reader-last-checked{
    font-size: 10px;
    letter-spacing: 0px;
    line-height: 20px;
  }

  .cs-card-reader-spinner-wrap{
    position: absolute;
    left: 0px;
    top: 26px;
    right: 0px;
    bottom: 0px;
  }

  .cs-card-reader-name-wrap{
    padding:10px;
    background-color: #fff;
  }

  .cs-card-reader-outer.connected{
    background-color: #3ad988;
  }

  .cs-card-reader-icon-chip{
    width: 9px;
    height: 7px;
    background-color: #fff;
    border-radius: 1px;
    position: absolute;
    left: 14px;
    bottom: 16px;
  }

  .pos-seat-number-option{
    cursor: pointer;
    color: #6a7482;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    line-height: 40px;
    font-size: 20px;
    border-radius: 4px;
    background-color: #fff;
    white-space: nowrap;
    line-height: 80px;
    height: 80px;
    width: 80px;
    min-width: 80px;
    max-width: 100px;
    border: 1px solid #a2abb7;
    margin: 10px;
  }

  .pos-seat-number-option:hover{
    color: #fff !important;
    background-color: #4a56f8;
    border: 1px solid #4a56f8;
  }

  #overlay_pos-member-popup .profile-background,
  #overlay_member-checkin .profile-background, 
  #overlay_member-profile-popup .profile-background{
    height: 100px;
    background-color:#f2f2f3;
  }

  #overlay_pos-member-popup .profile-background-inner,
  #overlay_member-checkin .profile-background-inner, 
  #overlay_member-profile-popup .profile-background-inner{
    height: 100%;
    -webkit-filter: blur(70px);
        -moz-filter: blur(70px);
        -o-filter: blur(70px);
        -ms-filter: blur(70px);

        filter: blur(70px);
      background-repeat: no-repeat;
      background-size: 15%;
      background-position: right;
  }

  #overlay_pos-member-popup .profile-picture,
  #overlay_member-checkin .profile-picture,
  #overlay_member-profile-popup .profile-picture{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-top: -50px;
    text-align: center;
    margin-left: 20px;
    line-height: 100px;
    font-size: 50px;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-color: #687ee9;
    color: #fff;
  }

  .clock-insert{
    color: #a7aeb8;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    display: inline-block;
    border-radius: 3px;
    padding: 4px;
    font-size: 16px;
    height: 20px;
  }

  .clock-insert.bad{
    color: #c34e4e;
  }

  #overlay_pos-split-payments .drop-zone, 
  #overlay_split-order .drop-zone {
    min-height: 70px;
    border: 2px dashed #d0d6da;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'roboto';
    font-weight: normal;
    color: #606d7c;
    text-align: left;
  }

  .split-row-line{
    cursor: move;
    padding: 12px;
    margin: 6px;
    background-color: #fff;
    border-radius: 3px;
  }

  .split-row-line .drag-handle{
    height: 40px;
    background-size: 16px;
    margin-left: 0px !important;
    margin-right: 6px;
  }

  .split-row-line p{
    white-space: pre-wrap !important;
  }

  .pos-line-upper-right{
    position: absolute;
    right: 10px;
    top: 17px;
  }

  .pos-line-fire-icon{
    margin-left: 5px;
    margin-top: 1px;
    background-color: #1bd21b;
    border-radius: 100%;
    height: 8px;
    width: 8px;
  }

  .pos-line-note-icon{
    margin-top: -7px;
    font-size: 16px;
    color: #606d7c;
  }

  #overlay_pos-split-payments .version_by_amount,
  #overlay_pos-split-payments .version_by_item,
  #overlay_pos-split-payments .version_by_seat {
    display: none;
  }

  #overlay_pos-split-payments.split_type_by_amount .version_by_amount,
  #overlay_pos-split-payments.split_type_by_item .version_by_item,
  #overlay_pos-split-payments.split_type_by_seat .version_by_seat
  {
    display: initial;
  }

  .hide-left-menu.ipad-optimized .view{
    padding-left: 0px;
  }

  .hide-left-menu.ipad-optimized .flexibleLeftMenu{
    left: -235px !important;
  }

  .hide-left-menu.ipad-optimized .contentZoneHeader{
    left: 0px !important;
  }

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

  /* -------- start vue.js pos menu -------*/

  .vue-pos.ipad-optimized .flexibleLeftMenu{
    display: none !important;
  }

  .vue-pos.ipad-optimized .show-left-menu .flexibleLeftMenu{
    display: initial !important;
  }

  .vue-pos.ipad-optimized .contentZoneHeader {
    left: 0px !important;
  }

  .vue-pos.ipad-optimized .view{
    padding-left: 0px;
  }

  .vue-pos.ipad-optimized .show-left-menu .contentZoneHeader {
    left: 235px !important;
  }

  .vue-pos.ipad-optimized .show-left-menu .view{
    padding-left: 235px;
  }

  /* -------- end vue.js pos menu -------*/

  .pos_invoice_callout,
  .tapped_edit_table_for_order
  {
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'roboto';
    font-size: 11px;
  }

  .split_order_overlay_blocker{
    display: none;
    position: fixed;
    left: 235px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: 1000;
    background-color: rgba(8,8,19,0.64);
  }

  .viewing_split_order_parent .split_order_overlay_blocker{
    display: block;
    opacity: 1;
  }

  .viewing_split_order_parent .hide_for_split_order_parent{
    display: none;
  }

  .show_for_split_order_parent {
    display: none;
  }

  .viewing_split_order_parent .show_for_split_order_parent{
    display: block;
  }

  .viewing_split_order_parent .blur_for_split_order_parent{
    -webkit-filter: blur(4px);
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
  }

  .viewing_split_order_parent .unclickable_for_split_order_parent{
    opacity: 0.45;
      cursor: initial;
  }

  .number-pad{
    display:flex;
    align-items:center;
    text-align: center;
    min-height: 100%;
  }

  .number-pad-header{
    color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    font-size: 18px;
    text-align: center;
  }

  .number-pad-dot{
    height: 12px;
    width: 12px;
    background-color: rgba(255,255,255,0);
    border: 1px solid white;
    border-radius: 100%;
    margin: 8px;
  }

  .number-pad-dot.active{
    background-color: #fff;
  }

  .number-pad-option{
    border-radius: 100%;
    height: 90px;
    width: 90px;
    margin: 12px;
    border: 1px solid white;
    line-height: 90px;
    font-size: 45px;
    color: #fff;
  }

  @-webkit-keyframes numberpadtouch {
      0% {background-color: rgba(255,255,255,0)}
      40% {background-color: rgba(255,255,255,0.9)}
      100% {background-color: rgba(255,255,255,0)}
  }

  .numberpadtouch{
      -webkit-animation: numberpadtouch 0.2s linear;
  }

  .number-pad-option.active{
    background-color: #fff;
  }

  .hide_secondary_members .is_secondary_member{
    display: none;
  }

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

  .tippingInput_amount,
  .discountInput_amount,
  .upchargeInput_amount,
  .custom-member-payment-input_amount,
  .stockInput_edit_stock,
  .addProductComponentInput_quantity,
  .inventoryCostInput_cost,
  .blendInventoryCostInput_cost,
  .addProductAddOnInput_quantity,
  .input_custom-amount-for-product,
  .stockInput_ticket-cap
  {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-size: 70px;
    line-height: 40px;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    color: #2a375f;
    background: rgba(255,255,255,0);
  }

  .tippingInput_amount::placeholder,
  .discountInput_amount::placeholder,
  .upchargeInput_amount::placeholder,
  .custom-member-payment-input_amount::placeholder,
  .input_custom-amount-for-product::placeholder
  {
    font-size: 70px;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 500;
    line-height: 70px;
  }

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

  .gallery_row.splitPickerInsert{
    margin-bottom: -20px;
    margin-left: -15px;
    margin-top: -20px;
  }

  .order-card-background.canceled{
    background-color: #b37070;
  }

  .table-option-background,
  .order-card-background{
    background-color: #5c6d79;
      padding-left: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-right: 20px;
      height: 159px;
  }

  .table-option-background.occupied,
  .order-card-background.open{
    background-color: #5280ff;
  }

  .order-card-background.requires_approval{
    background-color: #e3b123;
  }

  .order-card-background.mobile_preparing{
    background-color: #857ff2;
  }

  .reservation-card-background{
    background-color: #bac4ca;
      padding-left: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-right: 20px;
  }

  .reservation-card-background.checked_in{
    background-color: #61c391;
  }

  .reservation-card-background.canceled{
    background-color: #b55e5e;
  }

  .split_customer_insert{
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -31px;
  }

  .split_row{
    border-top: 1px solid #e4ebf1;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 30px;
    padding-left: 30px;
  }

  .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,
  .discountScrollbar::-webkit-scrollbar,
  .hide-scrollbar::-webkit-scrollbar {
      display: none;
  }

  .posScrollbar.mobile-ordering{
    left: 0px;
    right: 0px;
    padding-left: 0px;
    position: sticky;
    z-index: 10;
    top: 30px !important;
  }

  .posScrollbarItem.mobile-order.scrollbarBorder{
    border: 1px solid rgb(106, 116, 130);
  }

  .mobile-order-product-row{
    /*
    width: 100%;
    */
    width: inherit;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
  }

  .tip-amount-subtext{
    font-size: 9px;
    margin-bottom: -4px;
    line-height: 12px;
  }

  .pos-tip-option-wrap-inline{
    border-radius: 5px;
    overflow: hidden;
    background-color: #f2f3f4;
  }

  .pos-tip-option-inline{
    line-height: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 5px;
    cursor: pointer;
    color: #6a7482;
  }

  .pos-tip-option-inline:hover{
    background-color: #fff;
    color: #081333;
  }

  .pos-tip-option-inline.active{
    color: #fff !important;
    background-color: #4a56f8;
  }

  .posScrollbarItem.mobile-order,
  .pos-tip-option,
  .pos-discount-option{
    cursor: pointer;
    color: #6a7482;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 25px;
    background-color: #fff;
    margin-right: 8px;
    white-space: nowrap;
    line-height: 30px;
  }

  .posScrollbarItem.inline-table-version{
    cursor: pointer;
    color: #6a7482;
    background-color: #fff;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 5px;
    background-color: #fff;
    margin-right: 8px;
    white-space: nowrap;
    line-height: 30px;
    border: 1px solid #e4ebf1;
  }

  .posScrollbarItem.inline-table-version.active,
  .posScrollbarItem.inline-table-version:hover
  {
    color: #081333;
  }

  .posScrollbarItem.inline-table-version:hover {
    background-color: #f8f9fb;
  }

  .posScrollbarItem.inline-table-version.active i,
  .posScrollbarItem.inline-table-version:hover i, 
  .inline-selection-bar-button.active i
  {
    color: #4a56f8;
  }

  .pos-tip-option, 
  .pos-discount-option{
    margin-right: 3px;
  }

  .posScrollbarItem.mobile-order.active,
  .posScrollbarItem.mobile-order:hover,
  .posScrollbarItem.mobile-order.active:hover,
  .pos-tip-option:hover,
  .pos-discount-option:hover
  {
    color: #fff !important;
    background-color: #4a56f8;
  }

  .posScrollbarItem.posScrollbarItem_filter_by_staff.mobile-order.active,
  .posScrollbarItem.posScrollbarItem_filter_by_staff.mobile-order:hover,
  .posScrollbarItem.posScrollbarItem_filter_by_staff.mobile-order.active:hover,
  .posScrollbarItem.posScrollbarItem_filters.mobile-order.active,
  .posScrollbarItem.posScrollbarItem_filters.mobile-order:hover,
  .posScrollbarItem.posScrollbarItem_filters.mobile-order.active:hover
  {
    background-color: #cd386f;
  }

  .pos-v5 .wrap_filter_options .posScrollbarItem, 
  .pos-v5 .posScrollbarItem{
    margin-bottom: 10px !important;
  }

  .price-v2.pos{
    position: relative;
    bottom: auto;
    right: auto;
    padding-top: 10px;
    font-size: 16px;
    line-height: 18px;
    color: #2c323a;
    text-align: right;
  }

  .posScrollbarItem{
    cursor: pointer;
    color: #6a7482;
    font-family: 'roboto';
    font-weight: normal;
    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: 8px;
    margin-right: 8px;
    white-space: nowrap;
    line-height: 30px;
  }

  .posScrollbarItem.mobile-order > p{
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    font-size: 16px;
  }

  .posScrollbarItem.mobile-order .standardBackButton{
    height: 100%;
    background-position: center;
    margin-top: 0px;
    margin-bottom: 0px;
    background-size: 14px;
    margin-right: -12px;
    margin-left: -4px;
  }

  .tippingScrollbar, .discountScrollbar{
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 15px;
    margin-top: -10px;
  }

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

  .posProductTagSection{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
  }

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

  .mobile-order-section-header{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-top: 40px;
      width: 100%;
  }

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

  .mobile-order-tag-name-header{
    font-size: 22px;
    line-height: 28px;
    padding: 12px;
    font-family: 'roboto';
    font-weight: normal;
    font-weight: 300;
    color: #313c63;
    text-transform: capitalize;
  }

  .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: normal;
    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;
  }

  .number_that_dont_match_insert{
    line-height: 20px;
  }

  .pos-v5 .pos-products-insert-wrap,
  .pos-v5 .pos-members-insert-wrap{
    padding-left: 10px;
    padding-right: 10px;
  }

  .pos-v5 .pos-orders-insert-wrap,
  .pos-v5 .pos-tickets-insert-wrap,
  .pos-v5 .pos-tables-insert-wrap
  {
      padding-left: 10px;
    padding-right: 10px;
  }

  .pos-products-insert-wrap,
  .pos-members-insert-wrap {
      padding-top: 87px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pos-orders-insert-wrap,
  .pos-tickets-insert-wrap,
  .pos-tables-insert-wrap
  {
      padding-top: 137px;
      padding-left: 20px;
    padding-right: 20px;
  }

  .pos-tickets-insert.flexWrapLeftAlign{
    align-items:flex-start;
    align-content:flex-start;
  }

  .pos-payment-wrap, .pos-order-details-wrap{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 100px;
  }

  .posProductCard,
  .posMemberCard,
  .posTableCard
  {
      min-width: 250px;
      height: 250px;
      max-width: 250px;
      max-height: 250px;
      cursor: pointer;
      margin: 8px;
  }

  body.pos-v3 .posProductCard, body.pos-v3 .posMemberCard, body.pos-v3 .posTableCard{
      height: auto;
      max-height: initial;
  }

.posReservationCard,
.posOrderCard
{
  min-width: 250px;
    height: 260px;
    max-width: 250px;
    max-height: 280px;
    cursor: pointer;
    margin: 8px;
}

  .posProductImage, .posMemberImage{
      background-position: center;
      height: 190px;
      background-repeat: no-repeat;
      background-size: cover;
  }

  /*------ version where filter options are wrapped (option in pos settings) ----------- */

  .wrap_filter_options .posScrollbar{
    position: relative !important;
    margin-bottom: -80px;
    left: 0px !important;
  }

  .vue-pos.ipad-optimized .wrap_filter_options .contentZoneHeader.posScrollbar{
    position: relative !important;
    margin-bottom: -80px;
    left: 0px !important;
  }

  .vue-pos.ipad-optimized .contentZoneHeader.posScrollbar{
    position: sticky !important;
    margin-bottom: -80px;
    left: 0px !important;
  }

  .wrap_filter_options .higher_z_index{
    z-index: 100;
  }

  .wrap_filter_options .posScrollbarItem{
    margin-bottom: 12px !important;
  }

  .wrap_filter_options .posScrollbar > .flexNoWrap{
    display: -ms-flex !important;
      display: -webkit-flex !important;
      display: -moz-flex !important;
      display: flex !important;
      -webkit-flex-direction: row !important;
      flex-direction: row !important;
      -webkit-flex-flow: row wrap !important;
      -moz-flex-wrap: wrap !important;
      -webkit-flex-wrap: wrap !important;
      -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
      text-align: center !important;
  }

  /*--- smart kitchen ----*/

  .fire_card_bottom{
    padding: 12px;
    text-align: left;
    font-size: 18px;
  }

  .fire_card_details_wrap{
    padding-top: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8edf1;
    margin-bottom: 12px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .fire_customer{
    line-height: 14px;
    line-height: 26px;
    font-family: 'roboto';
    font-weight: normal;
    font-size: 16px;
    color: #606d7c;
  }

  .fire_customer_header{
   font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    color: initial;
  }

  .fire_line{
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #e8edf1;
    margin-bottom: 8px;
  }

  .fireEventCard{
      max-width: 450px;
      min-width: 300px;
    cursor: pointer;
    margin: 15px;
  }

  .fire_course_header{
    font-family: 'roboto';
    font-weight: normal;
    padding-top: 15px;
    padding-bottom: 15px;
    text-transform: uppercase;
    font-size: 14px;
    background-color: #f7f7f7;
    padding-left: 12px;
    margin-left: -12px;
    margin-right: -12px;
    margin-top: -12px;
  }

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

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

  .product-card-hide-image .posProductCard .posProductImage{
    display: none !important;
  }

  .product-card-hide-image .posProductCard{
    height: auto;
  }

  .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';
      font-weight: normal;
      margin-bottom: 5px;
      line-height: 24px;
      color: #2c323a;
  }

  .add-item-to-invoice-selected-product-row,
  .add-product-component-selected-product-row,
  .edit-stock-for-product-selected-product-row,
  .add-product-add-on-selected-product-row,
  .add-coupon-to-product-selected-coupon-row,
  .add-product-to-tag-selected-product-row,
  .add-product-to-report-section-selected-product-row,
  .edit-staff-row
  {
    border-bottom: 1px solid #e4ebf1;
    padding: 30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -30px;
    margin-bottom: 30px;
  }

  .mobile-order-product-row .product-name,
  .add-item-to-invoice-selected-product-row .product-name,
  .add-product-to-report-section-selected-product-row .product-name,
  .add-product-component-selected-product-row .product-name,
  .add-product-add-on-selected-product-row .product-name,
  .edit-stock-for-product-selected-product-row .product-name,
  .add-on-or-option-header,
  .guest-number,
  .add-coupon-to-product-selected-coupon-row .product-name,
  .table-view-row .product-name,
  .split-row-line .product-name
  {
    font-size: 15px;
    font-weight: 500;
    font-family: 'roboto';
    font-weight: normal;
    margin-bottom: 5px;
    line-height: 24px;
    color: #2c323a;
    text-transform: uppercase;
  }

  .mobile-order-product-image{
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
  }

  .mobile-order-product-row-inner{
    border-bottom: 1px solid #e8edf1;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .select-icon-v2{
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    border: 2px solid #2c3d4f;
    margin-right: 10px;
    position: relative;
  }

  /*
  .add-product-option.active .select-icon-v2,
  .add-product-add-on.active .select-icon-v2
  {
    border: 2px solid #2c3d4f;
  }
  */

  .select-icon-v2.multi{
    border-radius: 3px;
  }

  .select-icon-v2.single{
    border-radius: 100%;
  }

  .select-icon-v2.single .inner{
    border-radius: 100%;
  }

  .select-icon-v2 .inner{
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background-color: #2c3d4f;
  }

  .select-icon-v2 .inner{
    opacity: 0
  }

  .add-product-option.active .select-icon-v2 .inner,
  .add-product-add-on.active .select-icon-v2 .inner,
  .add-product-option-in-option-group.active .select-icon-v2 .inner
  {
    opacity: 1;
  }

  .add-product-add-on,
  .add-product-option,
  .add-product-option-in-option-group,
  .player-fee-row
  {
    border-bottom: 1px solid #e4ebf1;
    padding-bottom: 15px;
    padding-top: 15px;
    align-items: center;
    cursor: pointer;
  }

  .add-product-add-on .product-name,
  .add-product-option .product-name,
  .add-product-option-in-option-group .product-name,
  .player-fee-row .product-name
  {
    font-size: 16px;
      font-weight: 500;
      font-family: 'roboto';
      font-weight: normal;
      line-height: 18px;
      color: #2c323a;
  }

  .add-product-add-on .product-explain,
  .add-product-option .product-explain,
  .add-product-option-in-option-group .product-explain,
  .player-fee-row .product-explain
  {
    font-size: 16px;
      text-transform: none;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      line-height: 20px;
      color: #606d7c;
      margin-bottom: 5px;
  }

  .add-product-option-wrap,
  .add-product-add-on-wrap,
  .add-product-option-group-wrap,
  .add-product-add-on-option-wrap,
  .add-product-add-on-wrap_add-on,
  .add-product-add-on-option-group-wrap,
  .player-fees-wrap
  {
    border-top: 1px solid #e4ebf1;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    margin-bottom: 15px;
  }

  .add-product-option-group-wrap,
  .add-product-add-on-option-group-wrap
  {
    margin-bottom: -15px !important;
  }

  .has-option-groups .add-product-add-on-wrap,
  .has-option-groups .add-product-add-on-wrap_add-on
  {
    border-top: none;
    padding-top: 0px;
  }

  .add-on-or-option-explain{
    text-transform: initial !important;
  }

  .line-item-body .product-explain,
  .mobile-order-product-row .product-explain,
  .table-view-row .product-explain,
  .add-item-to-invoice-product-row .product-explain,
  .add-product-to-report-section-product-row .product-explain,
  .add-on-or-option-explain,
  .add-coupon-to-product-coupon-row .product-explain,
  .eventTypeCard .product-explain,
  .split-row-line .product-explain,
  .merge-order-card .product-explain
  {
      font-size: 15px;
      text-transform: none;
      font-family: 'roboto';
      font-weight: normal;
      line-height: 16px;
      color: #606d7c;
      margin-bottom: 5px;
      text-transform: capitalize;
  }

  .table-view-row .product-explain{
    font-size: 15px;
      text-transform: none;
      font-family: 'roboto';
      font-weight: normal;
      line-height: 18px;
      color: #7b8897;
      margin-bottom: 5px;
  }

  .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);
}

  .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;
  }

  .unpublished_changes_callout,
  .unfired_lines_callout{
    width: 18px;
    height: 18px;
    background-color: #404c83;
    line-height: 18px;
    padding-left: 1px;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    font-family: 'roboto';
    font-weight: 700;
    margin-left: 6px;
    margin-right: -3px;
    font-size: 10px;
    color: #51f2c7;
    border-radius: 3px;
  }

  /*-------------------------------- kiosk & membership kiosk -----------------------------*/

  #scan-input,
  #scan-input-product-lookup,
  #scan-input-member-lookup
  {
      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: 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{
      display: none;
  }

  .show-when-searching{
      display: none;
  }

  .searching .show-when-searching{
      display: initial;
  }

  .searching .hide-when-searching{
      display: none;
  }

  .toolbar-v2{
    position: fixed;
    left: 50%;
    width: 320px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    -moz-box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    -webkit-box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    z-index: 100;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    bottom: 15px;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateX(-160px);
    -moz-transform: translateX(-160px);
    -ms-transform: translateX(-160px);
    -o-transform: translateX(-160px);
    transform: translateX(-160px);
  }

  .toolbar-v2-icon{
    position: fixed;
    left: 50%;
    width: 150px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    -moz-box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    -webkit-box-shadow: rgb(40 40 41 / 12%) 0px 12px 40px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    z-index: 100;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    bottom: 15px;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateX(-75px);
    -moz-transform: translateX(-75px);
    -ms-transform: translateX(-75px);
    -o-transform: translateX(-75px);
    transform: translateX(-75px);
  }

  .toolbar-v2-inline{
    min-width: 150px;
    height: 45px;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    overflow: hidden;
    border-radius: 5px;
    border-bottom: 1px solid #e4ebf1;
    border-left: 1px solid #e4ebf1;
    border-right: 1px solid #e4ebf1;
  }

  /*--------------------- toolbar for member portal -------------------------*/

  .inline-account-toolbar-wrap{
    margin-left: -3px;
    margin-right: -3px;
  }

  .inline-account-toolbar{
    margin: 3px;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
  }

  .inline-account-toolbar-metric.coming-soon{
    margin-right:0px;
  }

  .inline-account-toolbar-header{
    border-bottom: 1px solid #e4ebf1;
    padding: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'roboto';
    text-align: center;
  }

  .inline-account-toolbar-item{
    padding: 12px;
    cursor: pointer;
  }

  .inline-account-toolbar-item.no-hover{
    cursor: default;
  }

  .inline-account-toolbar-item.no-hover:hover{
    color: #2e3a62;
  }

  .inline-account-toolbar-item.no-hover:hover .inline-account-toolbar-label{
    color: #697684;
  }

  .inline-account-toolbar-item:hover,
  .inline-account-toolbar-item:hover .inline-account-toolbar-label,
  .inline-account-toolbar-item.active,
  .inline-account-toolbar-item.active .inline-account-toolbar-label,
  .quick-action-wrap:hover i,
  .event-page-callout:hover i,
  .event-page-callout.active i,
  .card-header-button-v3:hover i,
  .card-header-button-v3.active i,
  .event-page-icon-wrap:hover i,
  .add-to-split-button i,
  .explain-common-icon,
  i.inline-table-icon:hover,
  .group-number-option:hover
  {
    color: #4a56f8;
  }

  .inline-table-icon{
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 5px;
    margin-left: 0px;
    margin-right: -28px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #cdd1d9;
  }

  .inline-account-toolbar-metric{
    font-size: 22px;
    font-weight: 500;
    white-space: nowrap;
  }

  .inline-account-toolbar-label{
    font-size: 14px;
    color: #697684;
    padding-top: 4px;
    white-space: nowrap;
  }


  /*------------------------------ camp capacity boxes -------------------------------*/

  .camp-capacity-box{
    margin: 3px;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    width: 100px;
  }
  .regatta-capacity-box{
    margin: 5px;
    background-color: #fff;
    color: #2e3a62;
    font-family: 'roboto';
    font-weight: normal;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    width: 150px;
  }

  /* .underCapacity
  {
    color: #4a56f8;
    border-color: #4a56f8;
  } */
  .ninetyPercentCapacity
  {
    color: #04b767 !important;
    border-color: #04b767 !important;
  }

  .overCapacity .camp-capacity-box-metric{
    color: #c34e4e !important;
  }

  .camp-capacity-box-header{
    border-bottom: 1px solid #e4ebf1;
    padding: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'roboto';
    text-align: center;
    vertical-align: middle
  }

  .camp-capacity-box-item{
    padding: 12px;
    cursor: pointer;
  }

  .camp-capacity-box-metric{
    font-size: 22px;
    font-weight: 500;
    white-space: nowrap;
  }

  .camp-capacity-box-label{
    font-size: 12px;
    color: #697684;
    padding-top: 2px;
    white-space: nowrap;
  }

  /*------------------------------ results -------------------------------*/

  .boat-class-results-section{
    margin-top:66px;
  }

  .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, .powered_by_text{
    line-height: 60px;
    padding-left: 5px;
    font-size: 18px;
    letter-spacing: 2px;
    color: #2a3664;
    text-transform: uppercase;
    font-family: 'roboto';
    font-weight: normal !important;
    display: flex;
  }

  .powered_by{
    line-height: 72px;
    margin-left: 30px;
    color: #728394;
      font-weight: 400;
      font-size: 16px;
      text-align: left;
      font-family: 'roboto';
      font-weight: normal;
      white-space: nowrap;
  }

  /*------------------------------------ /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_orc .version_handicap_orc, .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, .hide_first_name .version_first_name {
      display: none;
  }

  .scoring_search_bar{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .card-header-button-wrap-v2{
    align-items: flex-end;
    padding-bottom: 15px;
  }

  .card-header-button-wrap-v3{
    align-items: flex-start;
    padding-bottom: 12px;
  }

  .card-header-button-v3 span{
    padding-left: 4px;
  }

  .export-dropdown-v3{
    top: 45px !important;
    border-radius: 5px;
  }

  .card-header-button-wrap-v2 .cardHeaderButton{
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    height: 30px;
    position: relative;
    margin-right: 10px;
  }

  .cardHeaderButton.cardHeaderButton_scoring_settings{
      margin-top: 4px;
  }

  .cardHeaderButton.cardHeaderButton_scoring_columns{
      margin-top: 4px;
      right: 125px;
  }

  .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,
  .billing_hours_option,
  .billing_minutes_option,
  .days_of_week_picker_option,
  .golf_time_block_option,
  .court_time_block_option
  {
      width: 32px;
      height: 32px;
      margin: 1px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      font-family: 'roboto';
      font-weight: normal;
      color: #728394;
  }

  .throwoutOption:hover,
  .subevent-race-option:hover,
  .billing_date_option:hover,
  .billing_month_option:hover,
  .billing_year_option:hover,
  .billing_hours_option:hover,
  .billing_minutes_option:hover,
  .days_of_week_picker_option:hover,
  .golf_time_block_option:hover,
  .court_time_block_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,
  .billing_hours_option.active,
  .billing_hours_option.active:hover,
  .billing_minutes_option.active,
  .billing_minutes_option.active:hover,
  .days_of_week_picker_option.active,
  .days_of_week_picker_option.active:hover,
  .golf_time_block_option.active,
  .golf_time_block_option.active:hover,
  .court_time_block_option.active,
  .court_time_block_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';
    font-weight: normal;
    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';
    font-weight: normal;
  }

  .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;
  }

  .custom-drag-handle{
    fill: rgb(144, 147, 156);
    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.pos-menu-v5, 
    .flexibleLeftMenu.pos-menu-v5-3{
        border-right: 1px solid #e4ebf1;
        z-index: 101 !important;
        background-color: #f1f5f9;
    }

    .pos-table-callout-wrap{
        position: sticky;
        top: 0px;
        background-color: #fff;
        z-index: 102;
        border-top: 1px solid #e4ebf1;
    }

  .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;
  }

  .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';
      */
      font-family: 'roboto';
      font-weight: normal;
  }

  .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';
      */
      font-family: 'roboto';
      font-weight: normal;
      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';
      font-weight: normal;
      white-space: pre-wrap;
  }

  .inline-label-wrap{
    align-items: center;
    padding-top: 8px;
  }

    .toggleContainer{
        border: 1px solid #e4ebf1;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        margin: 5px;
    }
    .flexToggleContent{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 450px;
        padding: 20px;
    }
    .flexToggleContentResponsive{
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 450px;
      padding: 20px;
    }
    .inline-toggle-description{
        margin: 0;
        color: #728394;
        font-weight: 400;
        font-size: 16px;
        text-align: left;
        font-family: 'roboto';
        font-weight: normal;
    }

  .inline-label-wrap .toggleWrap{
    height: 21px;
    margin-top: -2px !important;
    margin-bottom: -2px !important;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
  }

  .inline-label-wrap .toggleWrap .toggleSlider{
    width: 21px;
    height: 21px;
    border-radius: 21px;
    background-color: #fff;
  }

  .toggle-text{
    color: #728394;
    font-size: 12px;
    padding-top: 2px;
  }

  .receipt-label {
    color: #728394;
    font-weight: 400;
    font-size: 16px;
    font-family: 'roboto';
    font-weight: normal;
    white-space: pre-wrap;
    text-transform: none !important;
  }

  .receipt-value {
      padding-right: 15px;
      color: #292e4a;
      font-family: 'roboto' !important;
      white-space: pre-wrap;
      text-transform: none !important;
      font-size: 16px;
  }

  .inline-label-width{
      min-width: 180px;
      max-width: 180px;
      margin-right: 5px;
      padding-right: 10px;
  }

  .inline-input-wrap{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: #fff; */
    border: 1px solid #eaedf0;
    border-radius: 5px;
    height: 19px;
    display: inline-block;
    position: relative;
  }

  td .inline-input-wrap{
    margin-top: 0px;
    position: relative;
    height: 22px;
  }

  td .inline-input-wrap input{
      font-size: 15px;
      background-color: transparent;
      /* padding-top: 4px; */
  }

  .inline-select-wrap{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: #fff; */
    border: 1px solid #eaedf0;
    border-radius: 5px;
    height: 19px;
    display: inline-block;
    position: relative;
  }

  .inline-input-wrap{
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: #fff; */
    border: 1px solid #eaedf0;
    border-radius: 5px;
    height: 19px;
    display: inline-block;
    position: relative;
    min-width: 65px;
    width: 65px;
    max-width: 65px;
  }

  .inline-input-wrap input{
    padding-left: 10px;
    font-size: 16px;
  }

  td .inline-input-wrap{
    margin-top: 0px;
    position: relative;
    height: 22px;
  }

  td .inline-input-wrap input{
      font-size: 15px;
      background-color: transparent;
      padding-top: 4px;
  }

  td .inline-select-wrap{
    margin-top: 0px;
    position: relative;
    height: 22px;
  }

  .inline-select-wrap .selectArrow{
    top: 6px;
    position: absolute;
    margin: 0px !important;
  }

  .selectWrap.inline-select-wrap select{
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    /* max-width: 150px; */
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 32px;
    font-size: 16px !important;
    color: #292e4a;
    margin: 0px;
    text-transform: none;
    font-weight: normal !important;
  }

  .inline-value, tr p.inline-value, .table-view.tighter .table-view-row p.inline-value, .mock-inline-value{
      color: #292e4a;
      font-family: 'roboto' !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: 55px;
      font-size: 45px;
      font-family: Montserrat;
      font-weight: 500;
      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: #333;
      font-size: 11px;
      line-height: 20px;
      font-weight: 500;
      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;
  }

  /* -------------------- inline selection bar ----------------------------- */

  .inline-selection-bar
  {
   background-color: #e5eaee;
     border: 1px solid #e5eaee;
     border-radius: 50px;
     margin-top: 15px;
     cursor: pointer;
 }
 
 .inline-selection-bar-button {
   border-radius: 45px;
     height: 40px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 33px;
     cursor: pointer;
     font-size: 16px;
     text-align: center;
     line-height: 40px;
     font-family: 'roboto';
     color: #324454;
     font-weight: 400;
 }

 .inline-selection-bar-button.active{
    background-color: #fff;
 }

  /* -------------------- 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;
      padding-right: 15px;
      height: 30px;
      line-height: 30px;
      color: #666;
      /*
      font-family: 'modern';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      background-color: rgba(255,255,255,0.5);
  }

  .toggle:hover{
      opacity: 1;
      color: #4a56f8;
  }

  .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.table-row-version{
    height: 22px;
    width: 41px;
    min-width: 41px;
    max-width: 41px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #c7cdd4;
  }

  .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, 
  .quick-action-icon-wrap .toggleWrap.enabled{
      background-color: #3bd988;
  }

  .toggleWrap.enabled.inactive{
    background-color: #75857c;
  }

  .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;
  }

  .quick-action-icon-wrap .toggleWrap{
    margin-top: 0px;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 15px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    bottom: -7px;
    background-color: #fff;
    border: 1px solid #e4ebf1;
  }

  .quick-action-icon-wrap .toggleSlider{
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    border-radius: 15px;
  }

  .toggleWrap.table-row-version .toggleSlider{
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #fff;
  }

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

  .quick-action-wrap .toggleWrap.enabled .toggleSlider{
    margin-left: 12px;
  }

  .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: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: #535e6c;
    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-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 p{
      /*
      font-family: 'modern';
      */
      font-family: 'roboto';
      font-weight: normal;
      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';
      font-weight: bold;
      */
      font-family: 'roboto';
      font-weight: normal;
      color: #fff;
      display: inline-block;
      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: #e4ebf1;
  }

  .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: #1b2556;
      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;
      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: 600px) {

    .filter_popup_left{
        padding-left: 6px;
        padding-right: 6px;
        min-width: 34px;
    }

    .cardHeaderButtonFilterDropdown{
        left: 8px;
    }

    .number-pad-option{
        height: 70px;
        width: 70px;
        line-height: 70px;
        font-size: 34px;
        margin: 8px;
    }

    .hp-tagline, 
    .hp-tagline-2{
      font-size: 40px !important;
      line-height: 48px !important;
    }
    .cs-signups-name-wrap,
    .cs-notifications-name-wrap{
      padding-left: 10px;
      min-width: initial;
      max-width: initial;
      padding-bottom: 0px;
    }
    .cs-signups-date-wrap,
    .cs-notifications-date-wrap{
      padding: 10px;
      padding-right: 0px;
    }
    .cs-signups-links-wrap,
    .cs-notifications-links-wrap{
      max-width: initial;
      flex-basis: 90%;
    }
  }

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

  @media all and (max-width: 1120px) {
    .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;
      }
      .date-picker-header{
        display: none;
      }
      .flexWrapLeftAlign.flexNoWrapOnMobile{
          display: -ms-flex;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          -webkit-flex-flow: nowrap;
          -moz-flex-wrap: nowrap;
          -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          text-align: center;
      }
      .flexNoWrapLeftOnMobile{
         justify-content: left !important;
        -webkit-justify-content: left !important;
        -ms-justify-content: left !important;
        -moz-justify-content: left !important;
        text-align: left !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;
      }
      .account-v3 .account-image{
        height: 40vh;
      }
  }

  @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;
      }
  }

  @media all and (min-width: 721px) {
      .hideOnDesktop{
          display: none !important;
      }
      .filter_popup_left{
        min-width: 110px;
      }
  }

  @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;
      }

      .innerHeader #desktopMenuWrap{
        right: 22px;
      }
    
      .innerHeader .hamburgerWrap{
        left: 22px;
      }
    
      .innerHeader .mobileDashboardLinkWrap{
        right: 22px;
      }
    
      .innerHeader{
          padding-left: 22px;
        padding-right: 22px;
      }

      .standard-content-width{
        padding-left: 22px;
        padding-right: 22px;
      }

      .standard-content-width-offset{
        margin-left:-22px;
        margin-right: -22px;
      }

      .account-v3 .account-image{
        height: 30vh;
      }

      .cs-burgee-wrap-mobile{
        display: initial !important;
        visibility: visible !important;
      }

      .splash-element-wrapper{
        width: 90%;
      }

      body.v3 .drilldownHeaderWrap{
        left: 0px !important;
      }

      body.v3 .inputWrap.searchBar {
        /*
          margin-left: 60px;
          z-index: 105;
          */
          margin-left: -5px;
      }

      #overlay_add-product-to-online-order .standardOverlayCard{
        left: 0px;
        right: 0px;
        top: 10px;
      }

      #overlay_add-product-to-online-order .add-product-image{
        height: 220px;
      }

      #mobile-order-product-viewport{
        /* very important so position:sticky works for mobile ordering product tag tab bar */
        overflow: inherit !important;
      }

      /*
      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-left: 0px !important;
          padding-right: 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;
      }
      .relativeOnMobile{
        position: relative !important;
      }
      .bigIcon.relativeOnMobile{
        top: auto !important;;
        right: auto !important;;
        left: auto !important;;
        bottom: auto !important;
      }
      .centeredOnMobile{
          margin-left: auto;
          margin-right: auto;
      }
      .hundopOnMobile{
          width: 100%;
      }
      .showOnMobile{
          display: block;
      }
      .tinyMarginTopOnMobile{
          margin-top: 5px;
      }
      .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;
      }
      .aspect-one-on-mobile{
        aspect-ratio: 1 / 1;
      }
      .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;
      }
      .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;
      }
      .noMarginRightOnMobile{
          margin-right: 0px !important;
      }
      .noMarginTopOnMobile{
          margin-top: 0px !important;
      }
      .tinyMarginLeftRightOnMobile{
        margin-left: 8px !important;
        margin-right: 8px !important;
      }
      .tinyPaddingTopOnMobile{
          padding-top: 8px !important;
      }
      .noPaddingTopOnMobile{
          padding-top: 0px !important;
      }
      .noPaddingBottomOnMobile{
          padding-bottom: 0px !important;
      }
      .noPaddingLeftOnMobile{
        padding-left: 0px !important;
      }
      .noPaddingRightOnMobile{
        padding-right: 0px !important;
      }
      .noPaddingOnMobile{
          padding: 0px !important;
      }
      .smallMarginTopOnMobile{
          margin-top: 20px !important;
      }
      .smallPaddingTopOnMobile{
          padding-top: 20px !important;
      }
      .smallPaddingLeftRightOnMobile{
          padding-left: 15px !important;
          padding-right: 15px !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: 55px !important;
    }
    .cardHeaderButton.third-from-right{
        right: 101px !important;
    }
    .cardHeaderButton{
        max-width: 30px;
        padding-right: 0px;
        color: rgba(255,255,255,0);
        overflow: hidden;
    }
    #tapFilterData_membership{
          right: 60px;
    }
    #tapFilterData_membership_aging{
        right: 60px;
    }
    #tapFilterData_products{
        right: 60px;
    }
    #tapFilterData_members{
        right: 60px;
    }
    #tapFilterData_email_list{
        right: 60px;
    }
    #tapFilterData_gift_cards{
        right: 60px;
    }
      #tapEmail_membership,
      #tapEmail_members
      {
          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;
    }
    .date-picker-time-item {
        height: 30px;
    }
  }

  @media all and (max-width: 500px) {

        .fullscreenOverlayCard{
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
        }

      .cs-hosted-invoice-burgee{
        position: relative !important;
        right: 0px !important;
        top: 0px !important;
        margin-bottom: 10px;
      }

      .account-v3 .account-image{
        height: 20vh;
      }

      .cs-hosted-invoice-summary-wrap-right{
        padding-top: 0px !important;
      }

      .sticky-column{
        max-width: 100px;
        white-space: pre-wrap;
      }
      .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;
      }
      .orderLineItems, 
      .createNewTab{
        min-width: 240px !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;
      }

        .globalMessageInsert{
            min-width: 220px;
            /*
            left: 8%;
            right: 8%;
            */
        }

      /*-- 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;
      }

      .container-for-event-image, 
      .container-for-event-image.blog{
        height:300px;
        }

      .cs-hosted-invoice-header-wrap{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px !important;
      }

      .cs-hosted-invoice-header-wrap.qb-style{
        padding-top: 20px !important;
      }
  }

  @media all and (max-width: 400px){

    .team-card-inner{
        padding-left: 0px;
        padding-right: 0px;
      }

      .container-for-event-image, 
      .container-for-event-image.blog{
        height:280px;
        }

      .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;
      }
      .team-photo{
        height: 310px;
      }
  }


  /*----------Reservations-----------*/

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .booking-panel-left{
    flex-basis: 25%;
    border-right: 1px solid #dfe4ec;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .booking-panel-right{
    flex-basis: 75%;
    background-color: #fff !important;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .booking-panel-right .order-summary-block{
    width: 100%;
    padding-bottom: 0px;
    background-color: #fff !important;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .booking-date-wrapper{
    margin-left: 5px !important;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .no-availability-for-this-date{
    padding: 20px;
    margin-top: 0px;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .try-another-date-button{
    margin-left: 20px;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .view_table .standardCard{
    width: 100%;
    max-width: 100%;
    -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  }

  .version_reservable_product .title-and-image-wrap-mobile-tablet{
    padding-left: 20px;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  .version_reservable_product .availabilityButtonsContainer{
    padding-left: 15px;
  }

  .version_reservable_product .event-card-image.default-image-icon{
    min-height: 180px;
  }

  /* we use version_reservable_product to indicate it's NOT a social*/
  body.e8.version_reservable_product{
    background-color: #fff;
  }

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

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

  .availabilityButtonV2{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a56f8;
    min-width: 100px;
    max-width: 150px;
    flex: 1 1 0px;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid #4a56f8;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative;
  }

  .res_check_in_status,
  .availabilityButtonV2 p.res_check_in_status{
    font-size: 11px !important;
    color: #728394 !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding-right: 10px !important;
  }

  .availability_button_footer{
    background-color: #fff;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 12px;
    padding-left: 12px;
    margin-top: 10px;
  }

  .res-callout{
    margin-left: 0px;
    margin-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #fff;
    border: 1px solid #e4ebf1;
    border-radius: 5px;
    line-height: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 5px;
    padding-right: 5px;
    color: #5c6d7a;
    margin-bottom: 6px;
  }

  .availabilityButtonV2 p{
    color: #fff;
    font-weight: bold;
    font-family: 'roboto';
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 15px;
    text-align: center !important;
  }

  .availabilityButtonV2 .area-name{
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    width: auto;
    display: block;
    padding-top: 1px;
  }

  .availabilityButtonV2.booked{
    background-color: #f3f5f7;
    cursor: default;
    border: 1px solid #e3e9ef;
  }

  .availabilityButtonV2.editing{
    background-color: lightblue;
    cursor: pointer;
    border: 1px solid #e3e9ef;
  }

  .availabilityButtonV2.booked p{
    color:  #646a79;
    font-weight: bold;
    font-family: 'roboto';
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 15px;
  }

  .availabilityButtonV2.inactive,
  .availabilityButtonV2.pos.inactive{
    background-color: #f3f5f7;
      border: 1px solid #f3f5f7;
  }

  .availabilityButtonV2.inactive p,
  .availabilityButtonV2.pos.inactive p{
    color: #88909d;
  }

  .availabilityButtonV2.pos p{
    color: #1b2556;
  }

  .availabilityButtonV2.pos.booked p,
  .availabilityButtonV2.pos.checked_in p
  {
    color: #fff;
  }

  .availabilityButtonV2.inactive,
  .availabilityButtonV2.player_card.inactive{
    background-color: #f3f5f7;
    border: 1px solid #f3f5f7;
  }

  .availabilityButtonV2.inactive p,
  .availabilityButtonV2.player_card.inactive p{
    color: #88909d;
  }

  .availabilityButtonV2.player_card p{
    color: #1b2556;
  }

  .availabilityButtonV2.player_card.booked p,
  .availabilityButtonV2.player_card.checked_in p
  {
    color: #fff;
  }

  .availabilityButtonV2.player_card{
    width: 150px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e4ebf1;
    padding-top: 28px;
  }

  .availabilityButtonV2.player_card.booked{
    background-color: #5280ff;
    cursor: pointer;
  }

  .availabilityButtonV2.player_card.checked_in{
    background-color: #61c391;
    cursor: pointer;
  }

  .availabilityButtonV2.player_card.inactive{
    cursor: default;
  }

  .availabilityButtonV2.pos{
    width: 130px;
    text-align: center;
    background-color: #fff;
  }

  .availabilityButtonV2.pos.booked{
    background-color: #5280ff;
    border: 1px solid #5280ff;
    cursor: pointer !important;
  }

  .availabilityButtonV2.pos.checked_in{
    background-color: #61c391;
    border: 1px solid #61c391;
    cursor: pointer;
  }

  .availabilityButtonV2.pos.inactive{
    cursor: default;
  }

  .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';
    font-weight: normal;
    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;
  }

  .availableTimeBlock.edit{
    /* background-color: #f3f5f7; */
    background-color: #c6f1c6;
    cursor: default;
    border: 1px solid #e3e9ef;
    cursor: pointer;
    /*
    background-color: grey;
    */
}

.availableTimeBlock.edit, .availabilityButton.edit p {
    /* color: #fff; */
    color: #105619;
    width: 100px;
    line-height: 22px;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    font-family: 'roboto';
    font-weight: normal;
    margin: 0px;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
}

.paymentSummaryInsert strong{
  font-weight: normal !important;
}

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

.filterCategory {
    padding: 10px;
    border-radius: 5px;
    margin: 1px;
    cursor: pointer;
}

.filterCategory i, 
.popup-filter-option i{
    color: #52596f;
}

.popup-filter-option.active i{
    color: #2e59d6;
}

.popup-filter-option i{
    font-size: 20px;
}

.popup-filter-option{
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    padding-left: 6px;
    padding-right: 6px;
}

.popup-filter-option p{
    color: #52596f;
    font-size: 16px !important;
    font-family: 'roboto';
    font-weight: normal;
    padding-left: 10px;
    min-width: 100px;
    padding-right: 20px;
}

.filterCategory .left-icon{
    padding-right: 8px;
    min-width: 20px;
}

.event-page-callout i.active{
    color: #2e59d6;
}

.filterCategory .fa-chevron-right{
    padding-left: 8px;
    font-size: 12px;
}

.filterCategory p{
    color: #52596f;
    font-size: 16px !important;
    font-family: 'roboto';
    font-weight: normal;
}

.filterCategory:hover p, 
.filterCategory.active p
{
    color: #081333;
}

.filterCategory.active, 
.filterCategory:hover{
    color: #081333;
    background-color: #e9edf8;
}

.filter-divider{
    width: 1px;
    position: relative;
    height: 30px;
    margin-right: 5px;
}

.header-toggle-msg{
    padding-top: 6px;
    font-size: 14px;
    padding-bottom: 6px;
    padding-left: 5px;
    color: #8890a3;
}

.no-filters-applied-msg{
    padding-top: 6px;
    font-size: 14px;
    padding-bottom: 6px;
    padding-left: 5px;
    color: #8890a3;
}

.filter-divider .bar{
    position: absolute;
    width: 1px;
    left: 0px;
    top: 3px;
    bottom: 3px;
    background-color: #e8edf1;
}

.filter_tag{
    border-radius: 10px;
    padding-right: 25px;
    background-color: #eaebfb;
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
    padding-right: 28px;
    color: #535a6f;
    margin: 5px;
    text-transform: capitalize;
}

.cart-payment-option p{
  font-size: 20px!important;
  color: #6a7482;
  font-family: 'roboto';
  font-weight: normal;
  padding-left: 10px;
  min-width: 100px;
  padding-right: 20px;
}

.cart-payment-option:hover p,
.payment-card.active .cart-payment-option p 
{
    color: #081333;
}

.cart-payment-option:hover i{
    color: #081333;
}

.cart-payment-option i.fa-circle-check{
    color: #2e59d6;
}

.cart-payment-option i{
    color: #6a7482;
    font-size: 20px;
}

/* 
.filterCategory i, 
.popup-filter-option i{
    color: #52596f;
}

.popup-filter-option.active i{
    color: #2e59d6;
} */


.calendarMonth{
  padding: 0px;
  cursor: pointer;
}
.calendarMonth div {
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}
.calendarYear {
  padding: 10px;
}

.calendarMonth div:hover{
    color: #081333;
    background-color: #e9edf8;
    border-radius: 5px;
}
.selectedMonthStart{
  color: #081333;
  background-color: #e9edf8;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.selectedMonthEnd{
  color: #081333;
  background-color: #e9edf8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.inMonthSpan{
  color: #081333;
  background-color: #f5f5f7;
}

.cart-payment-option, 
.cart-payment-customer-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
    border: 1px solid #e5eaec;
    border-radius: 5px;
    margin-top: 10px;
}
.grayOut3Dots{
  background-color: #f3f5f7;
  padding-left:10px;
  padding-right:10px;
}

.datePickerDropdownButton{
    border: 1px solid #e5eaec;
    border-radius: 5px;
    cursor: pointer;;
}

.filter_popup_mobile_title{
  text-align: center;
  font-size: 20px;
  color: #52596f
}

.datePicker{
  color: #52596f !important;
}

.scoreDropdownButton{
  border: 1px solid #e5eaec;
  border-radius: 5px;
  cursor: pointer;;
}

.scoreInputTypeSelector{
  background-color: #e5eaee;
    border: 3px solid #e5eaee;
    border-radius: 50px;
    cursor: pointer;
}

.scoreInputTypeButton{
  border-radius: 45px;
    height: 34px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 33px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    line-height: 34px;
    font-family: 'roboto';
    color: #324454;
    font-weight: 400;
    width: 50px;
}

.scoreInputTypeButton.selected{
  background-color: #fff;
}

.image_select_x_icon{
  position: absolute;
  top: 15px;
  right: 0px;
  z-index: 1;
  background-color: #fff;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  border: 1px solid #e4ebf1;
  line-height: 20px;
  color: #525e6b;
}

.numberPadButton{
    background-color: #4a56f8 !important;
}

.numberPadButton p{
    color: #fff !important;
}

.numberPadButton i{
    color: #3bd988 !important;
}

.numberPadButton.inactive i, 
.numberPadButton.inactive p{
    color: #b1b2b5 !important;
}

.numberPadButton.inactive{
    background-color: #f3f5f7 !important;
    border: 1px solid #f3f5f7 !important;
    color: #b1b2b5 !important;
}

.numberPadOption .special-icon{
    font-size: 14px;
}

.numberPadOption .explain-text{
    margin-top: 2px;
    font-size: 13px;
}

.numberPadOption{
    height: 80px;
    width: 90px;
    line-height: 80px;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    padding: 3px;
}

.numberPadOption .number{
  border-radius: 5px;
  border: 1px solid #e4ebf1;
}

.numberPadOption .number:hover{
  background-color: #f8f9fb;
}

.orderLineItems{
    min-width: 270px;
    min-height: 150px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e4ebf1;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    padding-left: 6px;
    padding-right: 6px;
    max-height: 450px;
    padding-bottom: 100px;
}

.createNewTab{
  display: flex; 
  flex-direction: column; 
  min-height: 300px;
  max-height: 600px;
  max-width: 300px; 
  min-width: 120px;
  border: 1px dashed #e4ebf1;
  border-radius: 5px;
  justify-content: center;
}

.split-qty-label{
    color: #728394;
    font-size: 11px;
    margin-bottom: 4px;
    display: inherit;
    font-weight: 500;
}

.split_column{
    max-width: 300px;
}

.advanced-split-header{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(228, 235, 241);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 8px;
}

.advanced-split-quantity{
    padding: 6px;
    background-color: #f8f9fb;
    min-width: 20px;
    border-radius: 5px;
    margin-right: 5px;
    border: 1px solid #e4ebf1;
    font-size: 14px;
    text-align: center;
}

.split_column{
    padding: 10px;
}

.advanced-split-customer-name{
    font-size: 14px;
    line-height: 18px;
    color: #525e6b;
    white-space: nowrap !important;
}

.split-member-number-label{
    text-transform: uppercase;
    font-size: 12px;
    color: #525e6b;
}

.edit-split-customer-wrap{
    padding-left: 15px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #6a7482;
    margin-top: -4px;
    margin-bottom: -4px;
}

.add-to-split-button{
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border: 1px solid #e4ebf1;
    color: #081333;
    cursor: pointer;
    background-color: #f8f9fb;
}

.add-to-split-wrap{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
    background-color: rgba(255, 255, 255, 0.8);
}
.thumbnail-container {
  width: 100px;
  height: 150px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  background: #f9f9f9;
  border: 1px solid #e4ebf1;
  border-radius: 5px;
}


.thumbnail {
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;
}

/* This is our screen sizing */
.thumbnail, .thumbnail iframe {
  width: 400px;
  height: 600px;
}

.thumbnail-container-grid {
  width: 72px;
  height: 72px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  background: #f9f9f9;
  border: 2px solid #e4ebf1;
  border-radius: 5px;
}
.thumbnail-grid {
  -ms-zoom: 0.11;
  -moz-transform: scale(0.11);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.11);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.11);
  -webkit-transform-origin: 0 0;
}

/* This is our screen sizing */
.thumbnail-grid, .thumbnail-grid iframe {
  width: 600px;
  height: 600px;
}

/* This pseudo element masks the iframe, so that mouse wheel scrolling and clicking do not affect the simulated "screenshot" */
.thumbnail:after, .thumbnail-grid:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.transportationSelect,
.guestFeeSelect{
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid #eaedf0;
  border-radius: 5px;
  height: 19px;
  display: inline-block;
  position: relative;
  width: 100%;
}

.transportation-label,
.guestFee-label{
  font-size: 14px;
  font-family: 'roboto';
  font-weight: normal;
  color: #525e6b;
}

.transportation-label.transportation-label-select,
.guestFee-label.guestFee-label-select{
  padding-right: 20px;
  background-color: transparent;
  box-shadow: none;
  margin-left: -12px;
}
body.v3 .view.overflow_initial{ 
  overflow: initial !important; 
}

toolbar-option, .toolbar-select{
  min-width: 15px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  display: inline-block;
  font-family: 'Roboto';
  cursor: pointer;
  line-height: 45px;
  font-weight: bold;
  font-size: 20px;
  color: #99a0ab;
  background-repeat: no-repeat;
  background-position: center;
}

.toolbar-option{
    border-radius: 3px;
}

.toolbar-option:hover{
    color: #081333;
}

.toolbar-option.less-padding{
  padding-left: 12px;
  padding-right: 12px;
}

.toolbar-option.selected{
  color: #3e66da;
  background-color: #fff;
}

.toolbar.active{
    visibility: visible;
    opacity: 1;
    bottom: 10px;
}

select.toolbar-select:hover{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.toolbar-select{
  background-color: rgba(255,255,255,0);
  color: #000000;
  font-family: 'roboto';
  font-weight: normal;
  font-size: 16px;
  box-shadow: none !important;
  border: none !important;
  line-height: 18px;
}

.x-icon-white{
  background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/white-x-icon.png);
  background-size: 9px !important;
}

.toolbar-option_left-align, 
.toolbar-option_right-align, 
.toolbar-option_center-align, 
.toolbar-option_bulleted-list,
.toolbar-option_numbered-list,
.toolbar-option_delete_table_column,
.toolbar-option_delete_table_row,
.toolbar-option_table,
.toolbar-option_add_table_column,
.toolbar-option_add_table_row
{
  background-size: 65%;
  padding-left: 10px;
  padding-right: 10px;
}

/* Tip-Tap Editor */

.tiptap-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tiptap-container p,
.tiptap-container h1,
.tiptap-container h2,
.tiptap-container h3{
  min-height: 1em;
}

.tiptap-content{
    height: 450px;
    padding: 22px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #e4ebf1;
    outline: none !important;
    flex: 1 1 auto;
}

.tiptap-content h1{
  font-size: 40px;
}
.tiptap-content h2{
  font-size: 34px;
}
.tiptap-content h3{ 
  /* h3 has other stylings so need to override them here  */
  font-size: 24px;
  padding-left: 0 !important;
  padding-top: 0 !important;
  color: initial !important;
  line-height: normal !important;
  padding-bottom: 0 !important;
  font-family: initial !important;
  font-weight: initial !important;
}

.tiptap-content ol li,
.tee_sheet_note ol li,
.dining_note ol li,
.court_note ol li {
  margin-left: 20px;
}
.tiptap-content ol,
.tee_sheet_note ol,
.dining_note ol,
.court_note ol {
  list-style-position: outside;
}

.tee_sheet_note,
.dining_note,
.court_note{
  padding: 15px !important;
  overflow: hidden;
  color: #3b4550 !important;
  border: 1px solid #e4ebf1 !important;
  border-left: 3px solid #3b4550 !important;
  border-radius: 5px;
  background-color: #fff !important;
}

.tee_sheet_note p:empty,
.dining_note p:empty,
.court_note p:empty{ 
  display: block;
  min-height: 1em; /* or any desired height */
}

.tiptap-content strong{
  font-weight: bold !important;
}

.tiptap-toolbar{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #e4ebf1;
  background-color: #f9fbfd;
}

.tiptap-option{
  margin: 4px 2px 4px 2px;
  padding: 6px;
  border-radius: 2px;
}

.tiptap-option.selected{
  color: #3e66da !important;
  background-color: #e9edf8 !important;  
}

.selected-color-check{
  padding-left: 2px;
  padding-top: 2px;
}

.color-picker-container {
  position: relative;
  display: inline-block;
}

.color-picker-popup {
  position: absolute;
  top: 100%; /* Position it directly below the button */
  left: 0;
  margin-top: 8px; /* Add some space between the button and the popup */
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(10, 20px);
  grid-gap: 5px;
}
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #e4ebf1;
  padding: 2px;
}
.color-swatch:hover{
  border: 3px solid #e4ebf1;
  padding: 0px;
}
.color-line {
  position: absolute;
  bottom: -5px;
  left: 0px;
  right: 0px;
}
.no-color-option:hover {
  background-color: #e4ebf1 !important;
  border: 2px solid #e4ebf1 !important;
  border-radius: 5px;
  padding: 6px !important;
}
.no-color-option{
  padding: 8px;
  margin: 2px
}
.inline-edit-container{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #e5eaec;
  overflow: hidden;  
}

.img-size-picker-popup {
    position: absolute;
    top: 22px; /* Position it directly below the button */
    margin-top: 8px; /* Add some space between the button and the popup */
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10005;
    margin-left: 22px;
    min-width: 300px;
}
@media (max-height: 600px) {
  .img-size-picker-popup {
      max-height: 200px; /* Set a maximum height for smaller screens */
      overflow-y: auto; /* Enable vertical scrolling if content overflows */
  }
}

.edit-link-popup {
    position: absolute;
    top: 22px; /* Position it directly below the button */
    margin-top: 8px; /* Add some space between the button and the popup */
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-left: 22px;
    min-width: 300px;
}

.edit-attachment-popup {
    position: absolute;
    top: 22px; /* Position it directly below the button */
    margin-top: 8px; /* Add some space between the button and the popup */
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-left: 22px;
    min-width: 300px;
}

.emailBannerWrapper {
    position: absolute;
    top: 20px;
    display: flex;
    align-items: center;
    height: 40px;
    left: 20px;
    right: 20px;
    cursor: pointer;
    justify-content: center;
    /* background-color: rgb(119, 120, 122); */
    background-color: #b4b3b3;
    border-radius: 15px 15px 0px 0px;
}

.emailBannerWrapper p{
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    position: relative;
    letter-spacing: 1px;
    height: 20px;
    line-height: 20px;
    z-index: 1;
    white-space: nowrap;
    max-width: 90%;
}



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

  .highlighted {
    background-color: rgba(0, 123, 255, 0.3);
    border: 1px solid rgba(0, 123, 255, 0.5);
}

  .rightSideRadius15{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }