@font-face{
    font-family: riesling;
    src: url('../assets/fonts/riesling.ttf');
}

.riesling {
    font-family: riesling;
    font-size: 43px !important;
}

.title-retention{
    text-align:center;
}

.unselectable {
  -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* New Button Toggle with JQuery */
.onoffswitch {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #C2C2C2;
    border-radius: 20px;
    background-color: #0098ff;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}



/* TOGGLE SWITCH #2 */
.onoffswitch2 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox2 {
    display: none;
}
.onoffswitch-label2 {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner2 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner2:before, .onoffswitch-inner2:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner2:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff; color: #FFFFFF;
}
.onoffswitch-inner2:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch2 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox2:checked + .onoffswitch-label2 .onoffswitch-inner2 {
    margin-left: 0;
}
.onoffswitch-checkbox2:checked + .onoffswitch-label2 .onoffswitch-switch2 {
    right: 0px;
}


/* TOGGLE SWITCH #3 */
.onoffswitch3 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox3 {
    display: none;
}
.onoffswitch-label3 {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner3 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner3:before, .onoffswitch-inner3:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner3:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff; color: #FFFFFF;
}
.onoffswitch-inner3:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch3 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox3:checked + .onoffswitch-label3 .onoffswitch-inner3 {
    margin-left: 0;
}
.onoffswitch-checkbox3:checked + .onoffswitch-label3 .onoffswitch-switch3 {
    right: 0px;
}


/* TOGGLE SWITCH #4 */
.onoffswitch4 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox4 {
    display: none;
}
.onoffswitch-label4 {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner4 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner4:before, .onoffswitch-inner4:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner4:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff; color: #FFFFFF;
}
.onoffswitch-inner4:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch4 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox4:checked + .onoffswitch-label4 .onoffswitch-inner4 {
    margin-left: 0;
}
.onoffswitch-checkbox4:checked + .onoffswitch-label4 .onoffswitch-switch4 {
    right: 0px;
}


/* TOGGLE SWITCH #5 */
.onoffswitch5 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox5 {
    display: none;
}
.onoffswitch-label5 {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner5 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner5:before, .onoffswitch-inner5:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner5:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff; color: #FFFFFF;
}
.onoffswitch-inner5:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch5 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox5:checked + .onoffswitch-label5 .onoffswitch-inner5 {
    margin-left: 0;
}
.onoffswitch-checkbox5:checked + .onoffswitch-label5 .onoffswitch-switch5 {
    right: 0px;
}


/* TOGGLE SWITCH #6 */
.onoffswitch6 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox6 {
    display: none;
}
.onoffswitch-label6 {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner6 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner6:before, .onoffswitch-inner6:after {
    display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner6:before {
    content: "ON";
    padding-left: 10px;
    background-color: #0098ff; color: #FFFFFF;
}
.onoffswitch-inner6:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch6 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox6:checked + .onoffswitch-label6 .onoffswitch-inner6 {
    margin-left: 0;
}
.onoffswitch-checkbox6:checked + .onoffswitch-label6 .onoffswitch-switch6 {
    right: 0px;
}

/* TOGGLE SWITCH #7 - FREEZEACCOUNTS */
.onoffswitch7, .onoffswitch8, .onoffswitch9, .onoffswitch10 {
    position: relative; width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox7, .onoffswitch-checkbox8, .onoffswitch-checkbox9, .onoffswitch-checkbox10 {
    display: none;
}
.onoffswitch-label7, .onoffswitch-label8, .onoffswitch-label9, .onoffswitch-label10{
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner7, .onoffswitch-inner8, .onoffswitch-inner9, .onoffswitch-inner10 {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner7:before, .onoffswitch-inner7:after,
.onoffswitch-inner8:before, .onoffswitch-inner8:after,
.onoffswitch-inner9:before, .onoffswitch-inner9:after,
.onoffswitch-inner10:before, .onoffswitch-inner10:after{
    display: block;
    float: left;
    width: 50%;
    height: 28px;
    padding: 0;
    line-height: 28px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner7:before {
    content: "ON";
    padding-left: 10px;
    background-color: red;
    color: #FFFFFF;
}
.onoffswitch-inner8:before,
.onoffswitch-inner9:before,
.onoffswitch-inner10:before {
    content: "ON";
    padding-left: 10px;
    background-color: green;
    color: #FFFFFF;
}
.onoffswitch-inner7:after,
.onoffswitch-inner8:after,
.onoffswitch-inner9:after,
.onoffswitch-inner10:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch7,
.onoffswitch-switch8,
.onoffswitch-switch9,
.onoffswitch-switch10{
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox7:checked + .onoffswitch-label7 .onoffswitch-inner7,
.onoffswitch-checkbox8:checked + .onoffswitch-label8 .onoffswitch-inner8,
.onoffswitch-checkbox9:checked + .onoffswitch-label9 .onoffswitch-inner9,
.onoffswitch-checkbox10:checked + .onoffswitch-label10 .onoffswitch-inner10
{
    margin-left: 0;
}
.onoffswitch-checkbox7:checked + .onoffswitch-label7 .onoffswitch-switch7,
.onoffswitch-checkbox8:checked + .onoffswitch-label8 .onoffswitch-switch8,
.onoffswitch-checkbox9:checked + .onoffswitch-label9 .onoffswitch-switch9,
.onoffswitch-checkbox10:checked + .onoffswitch-label10 .onoffswitch-switch10
{
    right: 0px;
}


.saveButton{
    display: flex;
    margin-bottom: 30px;
    width: 100%;
    justify-content: flex-end;
}
.cancel-edit-retention{
    margin-left: 20px;
    display:none;
}
.save-button-edit-retentions{
    display:none;
}

.save-button-new-retentions{
    display:none;
}

.load-button3{
    position:absolute;
    margin-top: -64px;
    margin-left: 75%;
    font-size: 70px;
    color: white;
}

#daysLeftID {
    padding-top: 25px;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    right: 17px;
    padding-right: 15px;
}

#daysLeftID-retention{
    padding-top: 25px;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    right: 17px;
    padding-right: 15px;
}

.promo-header{
    margin-top: 200px !important;
    border-bottom-left-radius: 20px ;
    border-bottom-right-radius: 20px ;
}

.promo-info {
  opacity: 0;
}

.promo-info-show {
  opacity: 1;
  transition: opacity .4s .4s !important;
}

/* .retentionRow{
    width: 100%;
} */

.promo-img-upload-retention{
    width: 190px;
    height: 115px !important;
    object-fit: cover;
}

.pictureForm{
    display: flex;
    justify-content: center;
    width: 210px;
}

.tooltips-h1{
    color: black !important;
    line-height: 1.2 !important;
    font-size: 22px;
}

.tooltips-p{
    color: black !important;
    line-height: 1.4 !important;
}

.button-slides-div{
    display:flex;
    justify-content: center;
}

.button-slides2{
    font-size: 14px;
    margin-left: 30px;
}

.buttons-on-tooltips{
    margin-top: 10px;
    display:flex;
    justify-content: center;
}

.button-one{
    height: 20px;
    padding: 0 8px;
    margin-right: 13px;
}

.button-two{
    height: 20px;
    padding: 0 6px;
    margin-right: 13px;
    background-color: lightgray;
}

.button-three{
    height: 20px;
    padding: 0 6px;
    background-color: lightgray;
}

#get-started-button{
    margin-left: 35px;
}

.iphone-install-app, .iphone-install-app-popup{
    background-color: #f5f3f3;
    color: black !important;
    font-size: 12px;
    padding: 8px;
    border-radius: 5px;
    margin-top: -7px;
}

.more-height{
    height: 330px !important;
}

.prev-slide-tooltips{
    margin-left: -75px !important;
    color: lightgray !important;
}

.next-slide-tooltips{
    color: lightgrey !important;
    margin-right: -75px !important;
}

.promo-title{
    margin-top: 8px !important;
    margin-left: 20px !important;
    width: 90%;
    position: absolute;
    font-size: 23px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 20px !important;
}

.treasure-chest-controls{
    top: -55% !important;
}

.help-controls{
    top: -15px !important;
}

.done-controls{
    top: -140px !important;
}

#addToHomeScreen{
    margin: auto;
    margin-top: 30px;
}

.title-expiring-promo{
    margin-top: -22px !important;
}

.how-earned-disclaimer{
    font-size: 10px;
    color: gray;
    font-weight: 500;
    font-style: italic;
    margin: 0;
    margin-top: 5px;
}

.doCkeckIn-treasure{
    margin-top: 38px;
    text-align: left;
    margin-left: 5px;
    position: absolute;
    z-index:99;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.treasure-tracker-treasureTab{
    width: 75%;
    margin-left: 90px;
    background-color: transparent !important;
}

.treasure-title{
    display:flex;
    justify-content: center;
}

.instruction-badge{
    color: white;
}

.containe{
    border: 1px solid #e4e4e4;
    width: 350px;
    border-radius: 25px;
    padding-top: 2px;
    padding-bottom: 5px;
    height: 45px;
    margin-top: 20px;
}
.containe2{
    border: 1px solid #e4e4e4;
    border-radius: 25px;
    padding-top: 2px;
    padding-bottom: 5px;
    height: 45px;
    margin-top: 20px;
}

.phoneNumber {
    width: 300px;
    height: 40px;
    /* height: 20px; */
    padding-right: 50px;
    padding-left: 13px;
    font-size: 15px;
    border: 0px solid transparent;
    background-color: transparent;
    color: #666;
    margin-top: -1px;
}

.submit-phone {
    height: 35px;
    width: 6px;
    cursor: pointer;
    background: rgb(45,155,243);
    background: linear-gradient(90deg, rgba(45,155,243,1) 30%, rgba(72,224,251,1) 100%);
    color: white;
    border: 0;
    font-size: 23px;
    padding-right: 30px;
    padding-left: 30px;
    -webkit-appearance: none;
    border-radius: 25px;
    margin-right: 3px;
    transition: background-color 0.5s ease;
}
textarea:focus, input:focus{
    outline: none;
}
.buttonIntro, .buttonIntro-es{
    display: flex;
    margin-top: -57px;
    width: 65px;
    margin-bottom: -2px;
    margin-left: 80%;
}
.signup-options{
    margin-top: -10px;
}
.error-message1{
    position: absolute;
    color: red;
    margin-top: 7px;
    margin-bottom: 1px;
    font-size: 12px;
    margin-left: 10px;
}

.invalid-phone-number{
    position:absolute;
    margin-top: 45px;
    margin-left: 10px;
}

.phone-login{
    border: 1px solid lightgrey !important;
}

#instructions-index{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.instruction-one{
    text-align: center;
    margin-bottom: 0;
    font-size: 24px;
    font-family: 'Quicksand', sans-serif;
}

.instruction-two{
    text-align: center;
    margin-top: 0;
    font-size: 13px;
    font-weight: 500;
    color: gray;
    letter-spacing: 0.5px;
}

#progress-bar{
    background: linear-gradient(90deg, rgba(45,155,243,1) 30%, rgba(72,224,251,1) 100%) !important;
}

#progress-wrapper{
    display:flex;
    justify-content: center;
}

.divider{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.divider-line{
    border-bottom: 2px solid #ededed;
    margin-bottom: 20px;
    width: 80%;
}

.home-card{
    border-radius: 25px !important;
}

.how-many-more-visits{
    position: absolute;
    top: 0;
    z-index: 99;
    text-align: center;
    width: 100%;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    filter: blur(0) !important;
    font-size: 15px;
    font-family: 'Quicksand', sans-serif;
}

.progress-bar-rewards{
    width: 95% !important;
    height: 12px;
    border-radius: 6px;
    background: lightgray;
    margin-right: 13px;
}

.preview-description{
    color: white;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
    letter-spacing: 1.5px;
    width: 89%;
    position:absolute;
    text-transform: uppercase;
}

.preview-description-retention{
    color: white;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
    letter-spacing: 1.5px;
    width: 89%;
    position:absolute;
}

.learn-more-description{
    /* width: 110px;
    height: 25px;
    position: absolute;
    margin-top: 69px;
    margin-left: 20px;
    background: transparent;
    font-size: 13px;
    padding: 0;
    padding-left: 15px;
    font-weight: bold; */

    background: transparent;
    border: 1px solid white;
    width: 120px;
    height: 25px;
    margin-top: 5px;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
}

.learn-more-description-offer{
    width: 110px;
    height: 25px;
    margin-top: 69px;
    margin-left: 20px;
    background: transparent;
    font-size: 13px;
    padding: 0;
    padding-left: 15px;
    font-weight: bold;
}

.new-css-card-open{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 60px !important;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    /* margin-top: 44% !important; */
    border-radius: 0px;
    margin-top: 235px !important;
}

.divider-cards{
    border-bottom: 1px lightgray solid
}

.selection-of-card{
    position: absolute;
    background-color: white !important;
    z-index: 100;
    margin-top: 50px !important;
    display: flex;
    direction: column;
    direction: column;
    flex-direction: column;
    text-align: center;
    line-height: 40px;
    width: 450px !important;
}

.modal-header {
  background: #f3f0f0;
  padding: 8px;
  text-align: center;
  line-height: 40px;
}

#cropper-card {
  position: absolute;
  padding: 0;
  z-index: 100;
  right: 20px;
  left: 270px
}

#cropper {
  max-width: 96%;
  margin: 20px auto;
}

#cropper-card .form-buttons {
  display: block;
}

#cropper-card .form-buttons button {
  float: left;
  width: 40%;
  margin: 20px;
}

.promo-button{
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.separator{
    margin-bottom: 20px;
    border-bottom: 1px solid lightgray;
    padding-bottom: 20px;
}

#token{
    border:0;
}

.promo-disclaimer:before, .promo-disclaimer-ret:before{
    content: "\f05a";
    font-weight: 900;
}

.promo-gift:before{
    content: "\f06b";
    font-weight: 900;
}

.buttons-offer, .buttons-promo{
    display: flex;
    position: absolute;
    margin-top: 64px;
    width: 100%;
    height: 23px;
    margin-left: 20px;
    z-index: 99;
}

.buttons-retention{
    display: flex;
    position: absolute;
    margin-top: 64px;
    width: 100%;
    height: 23px;
    margin-left: 20px;
}

.redeem-button-outside{
    background: transparent;
    border: 1px solid white;
    width: 123px;
    height: 25px;
    margin-top: 5px;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    font-weight: bold;
}

.more-info-offer{
    background: transparent;
    border: 1px solid white;
    width: 120px;
    height: 25px;
    margin-top: 5px;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
}

.learn-more-retention{
    background: transparent;
    border: 1px solid white;
    width: 120px;
    height: 25px;
    margin-top: 5px;
    font-size: 13px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
}

.open-title{
    margin-top: 13px !important;
    width: 100%;
}

.tt-rewards{
    text-align: start !important;
}

.promo{
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.01), 0 10px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 20px !important;
}

.picture-badges{
    width: 100vw;
    position: fixed;
    margin-top: -184px;
    margin-left: -16px;
    height: 100vh;
    max-width: 500px;
}

.coming-soon{
    width: 100vw;
    position: fixed;
    margin-top: -184px;
    margin-left: -16px;
    height: 100vh;
    max-width: 500px;
}

.coming-soon-text{
    text-shadow: 4px 2px 4px rgb(111, 111, 111);
    letter-spacing: 1px;
    font-weight: 500;
    padding-right: 30px;
    padding-left: 30px;
    text-align: center;
}

.coming-soon-wrapper{
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.rewards-card{
    display: flex;
    justify-content: space-between;
}

.picture-card{
    border-radius: 0px !important;
}

.expires-in-days {
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin-left: 26px;
    margin-top: -20px;
    font-style: italic;
    letter-spacing: 0.8px;
}

.ring-live {
    position: absolute;
    margin-left: -15px;
    margin-top: -41px;
}

.tooltips-bar-wrapper{
    background-color: lightgray !important;
    box-shadow: 0 9px 22px rgba(0,0,0,0.01), 0 6px 10px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

.animated-bar-tooltips{
    background: linear-gradient(90deg, rgba(45,155,243,1) 30%, rgba(72,224,251,1) 100%) !important;
}

.location-off{
    background: red;
    z-index: 99;
    text-align: center;
    font-size: 13px;
    z-index: 99;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    color: white;
    display: none;
}

.location-off p{
    margin: 0;
    font-weight: 600;
}

.location-not-available{
    color: black;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background-color: lightgray;
    z-index: 99;
    max-width: 500px;
    margin: 0 auto;
    padding: 15px;
    display: none;
}

.location-not-available p{
    margin: 0;
    font-weight: 600;
    margin-left: 5px;
}

.location-not-available p i{
    margin-right: 5px;
}

.no-location{
    position: absolute;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 13px !important;
    font-weight: 600;
    margin: 0;
    top: -96px;
    background: rgba(255, 0, 0, 0.8);
    padding: 20px !important;
}

body p.no-location i {
    margin-right: 5px;
    font-size: 16px;
    text-align: center;
}

.total-members-big{
    font-size: 100px;
    color: #0098ff;
    font-weight: 100;
}

.table-members-locations{
    text-align: center !important;
}

.num-members-table::before{
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    color: transparent !important;
}

.num-members-table::after{
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    color: transparent !important;
}

.name-location-table::before{
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    color: transparent !important;
}

.name-location-table::after{
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    color: transparent !important;
}

.ring-live-retention{
    position: absolute;
    margin-left: -15px;
    margin-top: -41px;
}

.expires-in-days-retention{
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin-left: 26px;
    margin-top: -20px;
    font-style: italic;
    letter-spacing: 0.8px;
}

#closeTreasureEarned, #closeReportBug, #closeAddHomeScreen, .closePopup{
    cursor:pointer;
    float: right;
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 14px;
    color: #666;
    width: 25px;
    height: 20px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

#closeTreasureEarned:hover, #closeReportBug:hover, #closeAddHomeScreen:hover{
    color: #666;
}

.full-page-container-location{
    max-width: 1000px;
    background: white;
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.location-title{
    text-align: center;
    margin-bottom: 20px;
    color:black;
    font-size: 28px;
}

.title-location{
    font-weight: 900;
}

.get-location{
    background: #f6f6f6;
}

.token-image{
    width: 110px;
    border: none !important;
}

.animation-token{
    animation: imganim 0.75s infinite linear both !important;
    -webkit-animation: imganim 0.75s infinite linear both !important;
}

@keyframes imganim {
    0% {transform: scale(1);}
    25% {transform: scale(1.05);}
    50% {transform: scale(1.1);}
    75% {transform: scale(1.05);}
    100% {transform: scale(1);}
}

@-webkit-keyframes imganim {
    0% {-webkit-transform: scale(1);}
    25% {-webkit-transform: scale(1.05);}
    50% {-webkit-transform: scale(1.1);}
    75% {-webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(1);}
}

.home-page{
    width: 100% !important;
    height: 120px !important;
    z-index: 99;
    display: flex;
    justify-content: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: -60px;
}

.hidd-token{
    display: none;
}

.intro-perks{
    width: 50%;
    display: flex;
    flex-direction: column;
}

div.intro-perks > div {
  width: 65px;
  height: 65px;
  left: 50%;
  transform: translateX(-50%);
}

.perks-intro-second-paragraph > .image-second-p > div {
  margin: 10px auto 0;
  width: 45px;
}

.intro-columns{
    display:flex;
    justify-content: space-between;
    margin-top: 35px;
}

.button-intro{
    display:flex;
    justify-content: center;
    margin-bottom: 10px;
}

.perks-intro-second-paragraph{
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
}

.image-second-p{
    width: 20%
}

.perks-second-p{
    text-align: start;
    margin-left: 10px;
}

.separator-perks{
    border-bottom: 3px solid #f1f1f1;
    margin-top: 20px;
}

.intro-three{
    margin-top: 25px !important;
}

.card-intro{
    padding: 0px !important;
}

.vip-insiders-info-intro{
    background-color: #fcfbf7;
    padding-top: 10px;
    padding-bottom: 25px;
    display: block;
    text-align: center;
    max-width: 475px !important;
    margin: 0 auto;
}

.telephoneLabel{
    position: absolute;
    left: 8px;
    color: grey;
    white-space: nowrap;
    font-size: 12px;
    color: #2d9bf3;
    -webkit-transform: none !important;
    transform: none !important;
}

.picture-intro{
    width: 45px !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    left: 0 !important;
    transform: none !important;
}

.picture-intro-stopwatch{
    width: 37px !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    left: 0 !important;
    transform: none !important;
}

.disable-coin{
    opacity: .4;
    pointer-events: none;
}

.disable-animation{
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

.locations-members{
    width: 135px;
    border: none;
    margin-top: -9px;
    margin-bottom: 0;
    font-size: 13px;
}

.outside-location{
    color: black;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background-color: yellow;
    z-index: 99;
    max-width: 500px;
    margin: 0 auto;
    padding: 5px;
    display:none;
}

.outside-location button{
    height: 25px;
    padding: 0 40px;
}

.outside-location p{
    margin-bottom: 10px;
    margin-top: 5px;
    font-weight: 600;
}

.outside-location-button{
    display:flex;
    justify-content: center;
    margin-bottom: 10px;
}

.looking-location{
    color: black;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background-color: lightgray;
    z-index: 99;
    max-width: 500px;
    margin: 0 auto;
    padding: 5px;
    display:none;
}

.looking-location button{
    height: 25px;
    padding: 0 40px;
}

.looking-location p{
    margin-bottom: 10px;
    margin-top: 5px;
    font-weight: 600;
}

.info-container-searching{
    display: flex;
    justify-content: center;
}


.spinner-location{
    font-size: 19px;
    color: #a0a0a0;
    display:none;
    margin-bottom: 10px;
}

.spinner-location-searching{
    font-size: 17px;
    color: #616161;
    margin-bottom: -8px;
    margin-top: 7px;
    margin-right: 7px;
}

.shadow-on-popup{
    position: fixed;
    height: 200vh;
    width: 100%;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99;
    display: none;
}

.shadow-on-zendesk{
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99;
    display: none;
}

.shadow-password{
    position: absolute;
    height: 100%;
    width: 200vw;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99;
    display: none;
}

.downArrow{
    display:flex;
    justify-content: center;
    max-width: 500px;
    height: 30px;
    display:none;
}
.upArrow {
  position: fixed;
  top: 4%;
  right: 10%;
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

.bounce-reversed {
	-moz-animation: bounce-reversed 3s infinite;
	-webkit-animation: bounce-reversed 3s infinite;
	animation: bounce-reversed 3s infinite;
}
@-moz-keyframes bounce-reversed {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(30px);
    transform: translateY(30px);
  }
  60% {
    -moz-transform: translateY(15px);
    transform: translateY(15px);
  }
}
@-webkit-keyframes bounce-reversed {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  60% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
}
@keyframes bounce-reversed {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  60% {
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
}

#arrow-install-ios{
    font-size: 40px;
    color: lightgray;
    align-self: flex-end;
    /* margin-bottom: 125px; */
    margin-top: 40px;
}

#arrow-install-samsung {
  top: 3%;
  right: 15%;
  margin: 0;
  width: auto;
}
#arrow-install-samsung .m_scroll_arrows {
  border-color: #2d9bf3;
}

.title-open-card{
    width: 90%;
}

.card-title-popup{
    font-size: 17px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.button-popup-card{
    display: flex;
    justify-content: center;
    margin-bottom: 11px;
    margin-top: 5px;
}

.button-cards{
    border-radius: 8px;
    width: 200px;
    padding-left: 65px !important;
}

.text-cards-selection{
    font-size: 12px;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.separator-popup-card{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.line-popup{
    width: 40%;
    height: 1px;
    color: black;
}

.cancel-button-cards {
    cursor: pointer;
    float: right;
    position: absolute;
    top: 3px;
    right: 11px;
    font-size: 14px;
    color: #666;
    width: 25px;
    height: 20px;
}

.popup-center-cards{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
    position: absolute;

}

.shadow-on-popup-admin, .background-shadow{
    background-color: gray;
    width: 200vw;
    height: 1000vh;
    position: absolute;
    z-index: 99;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    margin-top: -62px;
    left: 0;
}

.show-server-message{
    font-size: 12px;
    margin-top: 17px;
    margin-right: 10px;
    margin-bottom: 17px;
    color: #545454 !important;
    line-height: 1.4;
    font-weight: normal;
    margin-left: 7px;
}

#token-animation{
    position: absolute;
    background: rgba(0,0,0,0.2);
    width: 112px;
    height: 116px;
    border-radius: 50%;
    filter: blur(5px);
}

.token-image-rewards{
    width: 92px;
}

.dayLeftParent{
    padding: 0;
    cursor: pointer;
    height: 300px;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -200px;
}

.daysLeftParent-retention{
    padding: 0;
    cursor: pointer;
    height: 300px;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -200px;
}

.input-retention{
    border-radius: 5px;
    border: 1px solid #cccc
}

.menu-link-phrase{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.parent-button-signin{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

body#admin, body#admin-edit {
    background-color: #f9f9f9;
    padding: 40px;
    display: -webkit-flex;
    display: flex;
}

body#admin section.admin-section#benefitsrewards-section .half-row, body#admin-edit section.admin-section#benefitsrewards-section .half-row {
    background: none;
    margin-bottom: 0;
    padding: 0;
}

.members-table{
    display:flex;
    justify-content:
    space-between; padding-bottom: 0;
}

.new-members-chart{
    display:flex;
    justify-content: space-between;
    text-align: center;
}

.row-retention{
    display:flex;
    justify-content: space-between;
}

.row-retention{
    margin-bottom: 5px;
}

.row-retention-2{
    margin-bottom: 15px;
}

.verification-code{
    border-radius: 10px;
    border: none;
    width: 70%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
    color: gray;
    font-weight: 500;
}

.wrong-verif-code{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.verification-code-form, .verification-code-form-es{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.message-sms{
    color: gray;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 21px;
}

.resend-icon{
    margin-top: 5px;
    font-size: 12px;
    color: lightgray;
}

.link-resend{
    margin-top: 21px;
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 13px;
    color: #bdbcbc;
    font-weight: 500;
    width: 80%;
    font-style: italic;
}

.verification-code::placeholder {
    color: #D0D0D0;
    opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: gray !important;
}

.event-headline{
    padding: 5px !important;
    margin-bottom: 10px;
}

.verif-num-button{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.button-send-sms{
    margin: 0;
    height: 37px;
    border-radius: 25px;
    padding-left: 12px;
    background: linear-gradient(90deg, rgba(45,155,243,1) 30%, rgba(72,224,251,1) 100%);
    padding-right: 18px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.key-img{
    margin-right: 10px;
    margin-left: 6px;
}

.terms-intro{
    text-decoration: underline;
    color: #adadad
}

.terms-and-conditions-intro{
    display: flex;
    justify-content: center;
}

p.event-detail.reward-item:before{
    content: '\f06b';
    font-weight: 900;
}

p.event-detail.disclaimer-reward:before{
    content: '\f06a';
    font-weight:900;
}

.rewards-alcoholic{
    display: flex;
    flex-direction: column;
    width: 60%;
}

.redemptionshead{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 20px;
}

.redemp-title{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    width: 80%;
}

.redemptionsTab{
    height: 1000px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.usersTable{
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.info-icon{
    width: 40px;
    margin-top: 13px;
    margin-bottom: 13px;
}

.card-just-claimed3{
    font-size: 16px;
    padding-bottom: 10px;
}

.error-msg-rewards{
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

#error-404-wrapper{
    text-align: center;
    padding: 32px;
    margin-top: 220px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none !important;
    padding: 10px 9px;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #bbbbbb !important;
    color: white !important;
    padding: 10px 9px;
}

.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 {
    background: #0098FF !important;
    font-weight: normal;
    color: #ffffff;
    padding: 10px 9px;
}

.ui-widget-header {
    border: none !important;
    background: white !important;
    color: #333333;
    font-weight: bold;
}

.ui-datepicker-calendar tbody td a {
  text-align: center;
  border-radius: 50%;
}

#ui-datepicker-div .ui-datepicker-current {
  display: none;
  visibility: hidden;
}

#ui-datepicker-div button {
  color: #fff;
  border-radius: 25px;
}

.ui_tpicker_time_label {
  margin-top: 6px;
}

.ui-timepicker-div dl {
  float: left;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before {
  margin: 0 3px;
}

.ui-timepicker-div select.ui-state-default {
  height: auto;
  margin: 0;
  padding: 6px 8px;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
  display: inline-block;
  padding-right: 8px;
}

.promo-menu-button::before{
    content: '\f142';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0098ff;
}

.description-card{
    width: 100%;
    border: none;
    opacity: 1 !important;
    background-color: transparent !important;
}

.dropdown-check-list{
    outline: none;
}

.dropdown-check-list .anchor, .anchor2, .edit-anchor2, .anchor-offer, .anchor2-offer, .anchorCopy, .copy-anchor2, .sms-locations-anchor, .anchor-promo {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 10px 50px 10px 10px;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 3px;
    font-size: 14px;
}

.dropdown-check-list .anchor:after, .anchor2:after, .edit-anchor2:after, .anchor-offer:after, .anchor2-offer:after, .anchorCopy:after, .copy-anchor2:after, .sms-locations-anchor:after, .anchor-promo:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 17px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.treeSelect {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 7px;
  font-size: 14px;
  line-height: 120%;
  display: flex;
  align-items: center;
  padding: 9px 7px;
  outline: none;
  font-weight: 100;
}

.treeSelect.error {
  border-color: #f00;
}

.treeSelect label {
  display: block;
  cursor: pointer;
  transform: translateY(0) !important;
}

.treeSelect-output {
  flex-grow: 2;
}

.treeSelect::after {
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  margin-right: 5px;
  margin-top: 6px;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -moz-transition: transform .25s;
  -webkit-transition: transform .25s;
  -ms-transition: transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
  transform-origin: 25% 25%;
}
.treeSelect-open::after {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.node_open{
    display: flex;
    align-items: center;
    outline: none;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 8px 14px;
}

.node_open::after{
    content: "";
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 4px;
    /* margin-right: 9px; */
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -moz-transition: transform .25s;
    -webkit-transition: transform .25s;
    -ms-transition: transform .25s;
    -o-transition: transform .25s;
    transition: transform .25s;
    transform-origin: 75% 75%;
}

.node-label{
    /* display: inline-block; */
    margin-bottom: 5px;
    color: black !important;
}

.show-children-node::after{
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.toOpen-dropdown-child{
    /* display: none; */
    display: block !important;
}

.hide-disabled-input{
    display: none;
}

#location-dropdown {
  width: 100%;
  margin: 16px 0;
  font-size: 16px;
  border-radius: 0;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#location-dropdown li {
  font-size: 16px;
}

#location-dropdown .treeSelect-dropdown input {
  margin: 0;
  margin-right: 6px;
  width: auto;
}

.dropdown-check-list .anchor:active:after, .anchor2:active:after, .edit-anchor2:active:after, .anchor-offer:active:after, .anchor2-offer:active:after, .anchorCopy:active:after, .copy-anchor2:active:after, .sms-locations-anchor:active:after, .anchor-promo:active:after {
    right: 15px;
    top: 21%;
}

.locationClass, .locationWhoSees, .edit-locationWhoSees, .locationClassEdit, .locationClassEdit2, .locationClassCopy, .locationClassCopy2{
    width: 25px;
}

.dropdown-check-list ul.locationsAvailable, ul.edit-locationsAvailable, ul.locationsAvailableWhoSeesThis, ul.edit-locationsAvailableWhoSeesThis,
ul.locationsAvailable-offer, ul.locationsAvailableWhoSeesThis-offer, ul.copy-locationsAvailable, ul.copy-locationsAvailableWhoSeesThis, ul.sms-available-locations {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
}

.card.new-promo {
    display: block;
    min-height: 50px;
    width: 48%;
}

.card.editable input:not(.img-upload):not(.cta-promo input){
    margin: 0;
    padding: 0;
    border: 1px solid #e4e4e4 ;
    padding: 10px;
    height: 40px;
}

.card.new-promo, .card.new-offer{
    border: 1px solid #0098ff;
}

.picture-upload{
    display: flex;
    border: none;
    margin: 0;
    padding-bottom: 20px;
}

.event-detail{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    color: grey;
    padding-left: 25px;
    line-height: 1.3;
    margin-bottom: 20px !important;
    font-weight: 400;
    font-size: 13px;
}

.event-location:before{
    content: '\f3c5';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-date:before{
    content: '\f274';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-schedule-date:before{
    content: '\f073';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-exp-date:before{
    content: '\f273';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-time:before{
    content: '\f017';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-link:before{
    content: '\f0c1';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.event-sms:before{
    content: '\f075';
    font-weight: 900;
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 0;
    text-align: center;
    width: 20px;
    color: #0098FF;
}

.cancel-button-promo, .cancel-button-offer{
    margin-right: 30px !important;
    background: slategrey !important;
}

.hide-locations-appended{
    display: block !important;
}

.hide-locations-appended2{
    display: none !important;
}

.rewards-retentions{
    display: flex;
    flex-direction: column;
}

.title-popup-personalization{
    letter-spacing: 2px;
    padding-top: 30px;
    color:#e0b155;
    margin-bottom:15px;
    text-transform:uppercase;
    font-weight: bold;
}

.toRemove-first{
    display: none !important;
}

.toRemove-third{
    display: none !important;
}

.show-server-msg{
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-just-claimed{
    margin-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
}

.headline-msg, .disclaimer-separator{
    display: flex;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 5px;
    padding-bottom: 23px;
}

.button-redeem-msg, .time-code-msg{
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 20px;
}

.no-scroll{
    overflow: hidden;
    width:100%;
    position: fixed;
}

.wait-second{
    font-size: 22px;
    font-weight: 500;
    margin-top: 10px;
    font-family: 'Montserrat', helvetica, sans-serif;
}

.check-in-msg{
    font-family: 'Roboto', helvetica, arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.popup-phone-number, .popup-phone-number-es{
    background-color: white;
    padding: 40px 30px;
    z-index: 99;
    position: absolute;
    width: 86%;
    border-radius: 10px;
    text-align: center;
    display:none;
    margin-top: -160px;
}

.two-fa-icon{
    text-align:center;
}
.two-fa-icon img{
    width:60px;
    padding-top: 13px;
}

.code-container-input{
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(45,155,243,1);
    border-radius: 5px;
    width: 90%;
    height: 37px;
}

.button-next-2fa{
    padding: 0 10px;
    height:100%;
    border-radius: 0px;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 800;
    margin-right:0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.popup-phone-number h5, .popup-phone-number-es h5{
    font-size: 15px;
    margin-top: 15px;
    font-weight: 500;
    font-family: 'Montserrat', helvetica, sans-serif;
}

.verif-sent{
    margin-top: 3px;
    margin-bottom: 5px;
    font-size: 13px;
}

.copy-phone-num{
    color: #989898;
    font-size: 19px;
    margin-top: 6px;
    font-weight: 100;
}

.shadow-on-popup-intro{
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99;
    display: none;
}

.resend-code{
    margin: 0;
    margin-top: 10px;
    color: #ababab;
    font-size: 13px;
    cursor: pointer;
}

.verification-error-message {
    font-size: 13px;
    padding-top: 10px;
    display: inline-block;
    font-style: italic;
    color: red;
    width: 250px;
    display: none;
}

.code-sent{
    margin: 0;
    margin-top: 10px;
    color: #ababab;
    font-size: 14px;
    display:none;
}

.spinner-resend{
    margin-top: 12px;
    display: none;
    font-size: 17px;
    color: #a0a0a0;
}

.closePopup{
    margin-top: 8px;
    margin-right: 8px;
    cursor: pointer;
    float: right;
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 14px;
    color: #c5c5c5;
    width: 25px;
    height: 20px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

#report-a-bug-admin, #report-a-bug-member{
    position: absolute;
    min-width: 360px;
    top: 900px;
    max-width: 500px;
}

.description-bug{
    width: 100%;
    border: 1px lightgray solid;
    border-radius: 3px;
    height: 140px;
    margin-top: 10px;
}

/* .shadow-on-popup-bug{
    position: absolute;
    height: 108%;
    width: 200vw;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 98;
    display: none;
    margin-top: -200px;
} */

.submit-form-bug{
    background: linear-gradient(to right, #0098ff 0%, #6dc8fc 100%);
    color: white;
    width: 40%;
    border-radius: 25px;
    padding: 0 20px;
    height: 35px;
    cursor: pointer;
    border: none;
}

#report-a-bug-member input, #report-a-bug-member select, #report-a-bug-admin input, #report-a-bug-admin select, #report-a-bug-admin2 input, #report-a-bug-admin2 select{
    margin-top: 10px;
    margin-bottom: 10px;
}

.label-bug{
    margin-top: 10px;
}

.title-report{
    padding-bottom: 20px;
    padding-top: 20px;
    font-weight: 600;
    background-color: #ececec;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 10px;
}

#thanks-submission{
    padding: 30px;
}

#thanks-submission div{
    margin-bottom: 25px;
}

#thanks-submission i{
    color: green;
    font-size: 50px;
}

#thanks-submission h4{
    font-weight: 600;
    margin-bottom: 30px;
}


#thanks-submission2{
    padding: 30px;
    position: absolute;
    top: 40%;
}

#thanks-submission2 div{
    margin-bottom: 25px;
}

#thanks-submission2 i{
    color: green;
    font-size: 50px;
}

#thanks-submission2 h4{
    font-weight: 600;
    margin-bottom: 30px;
}


.shadow-bug-admin{
    width: 100%;
    height: 135%;
    position: absolute;
    z-index: 99;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    margin-top: -62px;
}

#report-a-bug-admin2{
    width: 400px;
    top: 980px;
    position: absolute;
}

.shadow-on-popup-bug{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
}

.to-hide{
    display:none !important;
}

.shadow-menu-bottom{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
}

.checkboxes-rewards{
    display: flex;
    flex-direction: column;
    width: 40%;
    align-items: center;
}
.iphone-install-app-chrome{
    background-color: #f5f3f3;
    color: black !important;
    font-size: 12px;
    padding: 8px;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.popup-use-safari{
    position: fixed;
    width: 300px;
    background-color: white;
    padding: 45px 25px !important;
    top: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -60%);
    -moz-transform: translate(-50%, -60%);
    -ms-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
    border-radius: 10px;
    -webkit-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -moz-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -o-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -ms-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    text-align: center;
    z-index: 100;
    display:none;
}

.popup-use-safari i{
    color: red;
    font-size: 50px;
    margin-bottom: 20px;
}

.popup-use-safari h3{
    color: black;
    font-weight: 400;
    margin-bottom: 30px;
}

.popup-samsung-browser{
    position: fixed;
    width: 300px;
    background-color: white;
    padding: 45px 25px !important;
    top: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -60%);
    -moz-transform: translate(-50%, -60%);
    -ms-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
    border-radius: 10px;
    -webkit-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -moz-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -o-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    -ms-transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
    text-align: center;
    z-index: 100;
    display:none;
}

.popup-samsung-browser i{
    color: red;
    font-size: 50px;
    margin-bottom: 20px;
}

.popup-samsung-browser h3{
    color: black;
    font-weight: 400;
    margin-bottom: 25px;
    font-size: 20px;
}

.popup-samsung-browser button{
    padding: 0 20px;
    font-size: 13px;
}

.notHere{
    display: none !important;
}

.error-size-image{
    margin-bottom: 10px !important;
    color: red;
    font-weight: bold;
    font-size: 13px;
    margin-top: 5px !important;
}

#reward-name-history{
    color: #000;
    margin-bottom: 5px;
    font-weight: 400;
}

.promo-menu p.delete-promo-offer{
    color: red;
}
.promo-menu p.delete-promo-offer:hover{
    background-color: red;
    color: white;
}
.promo-menu p.delete-promo-offer:before{
    content: '\f2ed';
    margin-right: 7px;
    font-family: 'Font Awesome\ 5 Free';
}

.offline-message{
    color: white;
    text-align: center;
    background-color: red;
    z-index: 99;
    max-width: 500px;
    margin: 0 auto;
    padding: 5px;
    display: none;
}

.offline-message p{
    margin: 0;
    font-weight: 600;
    padding: 5px;
}
.page-manager-contact{
    margin-top: 200px;
}

#download-pwa-ios{
    padding: 20px;
}

.share-icon-popup{
    width: 26px;
    margin-left: 3px;
    margin-right: 3px;
}

.mouse_scroll {
    margin: 0 auto;
    width: 100%;
    height: 100px;
    margin-top: 25px;
    z-index: 100;
    margin-bottom: 25px;
    position: fixed;
    display: flex;
    justify-content: center;
    bottom: 0px;
    animation: bounce 2s infinite;
}

.mouse_scroll_up {
  animation: bounce-reversed 2s infinite;
}

.mouse_scroll div{
    margin-top: 25px;
}

.mouse_scroll_tooltips {
    margin: 0 auto;
    width: 100%;
    height: 100px;
    margin-top: 13%;
    z-index: 100;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    bottom: 0px;
    animation: bounce 2s infinite;
}

.mouse_scroll_tooltips div{
    margin-top: 20px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.m_scroll_arrows {
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    border-right: 6px solid white;
    border-bottom: 6px solid white;
    margin: 0 0 3px 4px;
    width: 35px;
    height: 35px;
}

.m_scroll_arrows_tooltips{
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    border-right: 6px solid #46a4fb;
    border-bottom: 6px solid #46a4fb;
    margin: 0 0 3px 4px;
    width: 25px;
    height: 25px;
}
.m_scroll_arrows_up {
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.unu {
    margin-top: 1px;
}

.unu {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-delay: alternate;
}

.doi {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
    animation-delay: .2s;
    animation-direction: alternate;
    margin-top: -6px;
}

.trei {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;
    animation-delay: .3s;
    animation-direction: alternate;
    margin-top: -6px;
}

.iphone-install-app-popup2{
    background-color: #f5f3f3;
    color: black !important;
    font-size: 13px;
    padding: 15px;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 21px !important;
    border: 2px solid #e8e6e6;
}

.alcohol-selection{
    top: -3px;
    left: 0;
    text-align: center;
    font-size: 15px;
    color: black;
    width: 100%;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 5px;
}

.center-options{
    display: flex;
    justify-content: center;
}

.bullet-alcohol{
    width: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 14px;
}

.bullet-alcohol-no{
    width: 20px;
    margin-left: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 14px;
}

#alcohol-preference{
    margin-bottom: 5px;
}

.rewards-descriptions-titles{
    font-size: 11px;
    font-weight: 600;
    color: gray;
    letter-spacing: 1px;
}

.reward-admin{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 3px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    padding-left: 5px;
    border: 1px solid lightgray;
}

.number-of-visits1, .number-of-visits2, .number-of-visits3, .number-of-visits4, .number-of-visits5, .number-of-visits6, .number-of-visits7, .number-of-visits8, .number-of-visits9, .number-of-visits10, .number-of-visits11, .number-of-visits12, .number-of-visits13, .number-of-visits14{
    color: black;
    font-weight: 500;
    font-size: 20px;
}

.rewards-separator, .rewards-separator2, .rewards-separator3, .rewards-separator4, .rewards-separator5, .rewards-separator6, .rewards-separator7, .rewards-separator8, .rewards-separator9, .rewards-separator10, .rewards-separator11, .rewards-separator12, .rewards-separator13, .rewards-separator14{
    margin-top: 15px;
    color: lightgray;
    margin-bottom: 12px;
    border: 1px solid #e8e8e8;
}

.no-select{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
.title-setting {
    font-family: 'Montserrat';
}

.location-rest-link{
    border: none !important;
    color: black;
    text-decoration: underline;
    padding: 0 !important;
    font-family: 'Montserrat';
    font-size: 15px;
}

.locationsAvail-action{
    cursor: pointer;
    color: #46a4fb;
    text-decoration: underline;
    padding: 3px;
}

.info-rewards{
    margin-right: 4px;
    width: 12px;
    vertical-align: middle;
}

.reward-info{
    margin-right: 10px;
}

.slide-controls .hide{
    position: relative;
    visibility: hidden;
    pointer-events: none;
}

.arrows-tooltips{
    width:30px !important;
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
}

.message-txt{
    margin-top: -8px !important;
    margin-left: 27px !important;
    font-size: 13px;
    color: green;
}

.heart-share{
    width: 22px;
    margin-right: 10px;
}

.send-sms-div{
    position: absolute;
    background-color: white !important;
    z-index: 100;
    display: flex;
    direction: column;
    direction: column;
    flex-direction: column;
    text-align: center;
    line-height: 40px;
    width: 725px !important;
}

.send-sms-container{
    padding: 0 35px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-bottom: 0;
}

#ranking-key {
  border: 1px solid rgb(99, 99, 99);
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 8.03px 11.468px 21px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  margin-top: -52px;
  margin-left: 285px;
  width: 100%;
  z-index: 1;
  text-align: left;
  padding: 0 10px;
  font-size: 80%;
  line-height: 100%;
}
#ranking-key::before {
  border: 1px solid rgb(99, 99, 99);
  border-top: 0;
  border-right: 0;
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  content: "\00a0";
  display: block;
  height: 20px;
  position: absolute;
  margin-top: 20px;
  margin-left: -21px;
  transform:         rotate( 45deg );
  -moz-transform:    rotate( 45deg );
  -ms-transform:     rotate( 45deg );
  -o-transform:      rotate( 45deg );
  -webkit-transform: rotate( 45deg );
  width:  20px;
}

#ranking-key > div {
  margin: 10px 0;
}

.radio-buttons-sms{
    font-size: 14px;
    width: 80% !important;
    margin: 0 auto;
    padding-bottom: 15px;
}

.radio-buttons-sms .datepicker{
    font-size: 13px;
}

.dropdown-check-list-sms .sms-locations{
    position: relative;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 3px;
    font-size: 14px;
}

#phone-preview-div{
    background-color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 26px;
    width: 90% !important;
    margin: 0 auto;
    overflow: hidden;
    height: 254px;
}

#message-input{
    margin-bottom: 10px;
}

#message-input{
    margin-bottom: 10px;
}

.chat {
    width: 300px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-family: helvetica;
    background: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    height: 100%;
    padding-left: 28px;
}

.messages {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 14px;
    width: 85% !important;
}

.message {
    border-radius: 20px;
    padding: 8px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.yours {
    align-items: flex-start;
}

.yours .message {
    margin-right: 25%;
    background-color: #EEE;
    position: relative;
    line-height: normal;
    text-align: left;
    width: 85% !important;
}

.yours .message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: -7px;
    height: 20px;
    width: 20px;
    background: #EEE;
    border-bottom-right-radius: 15px;
}

.yours .message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 20px;
    background: white;
    border-bottom-right-radius: 10px;
}


@keyframes fade_in_out {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}
.bubble {
    display: flex;
    position: relative;
    width: 95px !important;
    height: 40px;
    align-items: center;
    justify-content: space-around;
    border-radius: 75px;
    background-color: #EEE;
}
.bubble::before, .bubble::after {
    position: absolute;
    content: '';
    background: #EEE;
    border-radius: 100%;
}
.bubble::before {
    bottom: 0;
    left: -6px;
    width: 18px;
    height: 18px;
}
.bubble::after {
    bottom: -5px;
    left: -18px;
    width: 12.5px;
    height: 12.5px;
}
.bubble__circle {
    width: 14.8333333333px !important;
    height: 14.8333333333px;
    border-radius: 100%;
    background-color: #bbb;
    animation: fade_in_out 1.5s infinite;
    animation-delay: 0.25s;
}
.bubble__circle:first-of-type {
    margin-left: 20.8333333333px;
    animation-delay: 0s;
}
.bubble__circle:last-of-type {
    margin-right: 20.8333333333px;
    animation-delay: 0.5s;
}
.wrapper {
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 140px;
}

.no-display{
    display: none;
}

body#admin .ui-datepicker{
    width: auto !important;
    z-index: 101 !important;
}

body#admin .ui-datepicker tr td{
    padding: 5px !important;
}

.input-icon{
    position: absolute;
    left: 3px;
    top: calc(50% - 1em); /* Keep icon in center of input, regardless of the input height */
    color: lightgray;
    padding-left: 5px;
}

#action-buttons-sms{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    width: 85%;
    margin: 0 auto;
}

.action-buttons-sms{
    margin-top: 13px !important;
}

.test-sms{
    margin-right: 20px;
}

ul.sms-available-locations {
    position: absolute;
    z-index: 99;
    background: white;
    width: 100%;
    top: 37px;
    max-height: 260px;
    overflow: auto;
}

.treeSelect-dropdown {
    /* position: absolute;
    z-index: 99;
    top: 34px;
    margin: 0;
    margin-left: -7px;
    border: 1px solid #ccc;
    padding: 2px;
    background: white;
    width: 100%;
    display: none;
    text-align: left;
    max-height: 250px;
    overflow: auto; */

    z-index: 99;
    top: 0;
    margin: 0;
    margin-left: 0px;
    padding: 2px;
    background: white;
    text-align: left;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 7px;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    overflow-x: hidden;
}

.treeSelect-dropdown p, .treeSelect-dropdown li{
    line-height: 2;
}

.treeSelect-dropdown::-webkit-scrollbar {
    width: 4px;
}

  /* Track */
.treeSelect-dropdown::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(119, 119, 119, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.treeSelect-dropdown::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.31);
}

.treeSelect-open .treeSelect-dropdown {
  display: block;
}

.treeSelect-dropdown ul {
  margin: 0;
  margin-left: 13px;
}

.treeSelect-parent{
    /* position: absolute;
    z-index: 98;
    top: 34px;
    margin: 0;
    margin-left: -7px;
    border: 1px solid #ccc;
    background: white;
    width: 100%;
    text-align: left;
    padding-bottom: 4px;
    padding-right: 5px;
    display: none; */
    position: absolute;
    z-index: 98;
    top: 35px;
    margin: 0;
    border: 1px solid #ccc;
    background: white;
    width: 100.5%;
    text-align: left;
    padding-bottom: 4px;
    padding-right: 5px;
    display: none;
    left: -1px;
}

.treeSelect-open-parent{
    display: block;
}

.vip-logo-load-pwa-ios{
    width: 100vw;
    height: 100vh;
    z-index: 100;
    max-width: 500px;
    background-size: 25% !important;
}

.load-screen-pwa-ios{
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 500px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: white !important;
    z-index: 99;
    pointer-events: none;
    display: none;
}

.c-checkbox {
    display: none;
}
.c-checkbox:checked + .c-formContainer .c-form {
    width: 270px;
}
.c-checkbox:checked + .c-formContainer .c-form__toggle {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.7);
}
.c-checkbox:checked + .c-formContainer .c-form__input, .c-checkbox:checked + .c-formContainer .c-form__buttonLabel {
    transition: 0.2s 0.1s;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.c-formContainer, .c-form, .c-form__toggle {
    width: 130px;
    height: 40px;
    margin: 0 auto;
    font-size: 10px;
    font-family: Roboto, sans-serif;
}
.c-formContainer {
    font-weight: 500;
    margin-top: 10px;
}
.c-form {
    position: absolute;
    border-radius: 6.25em;
    background-color: #fff;
    transition: 0.2s;
}
.c-form__toggle {
    position: absolute;
    border-radius: 6.25em;
    background-color: white;
    transition: 0.4s;
    width: 270px;
    right: -75px;
    /* border: 2px solid lightgray; */
}
.c-form__toggle:hover {
    position: absolute;
    border-radius: 6.25em;
    /* background-color: lightgray; */
    transition: 0.2s;
    width: 270px;
    right: -75px;
    /* border: 2px solid lightgray; */
    text-decoration: underline;

}
.c-form {
    left: 54%;
    transform: translateX(-50%);
    padding: 0.625em;
    display: flex;
    justify-content: center;
}
.c-form__toggle {
    color: #0075ff;
    top: 1px;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-form__toggle::before {
    font-size: 15px;
    content: attr(data-title);
}
.c-form__input, .c-form__button {
    font: inherit;
    border: 0;
    outline: 0;
    border-radius: 5em;
    box-sizing: border-box;
}
.c-form__input, .c-form__buttonLabel {
    font-size: 1.75em;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7);
    transition: 0s;
}
.c-form__input {
    color: lightgray;
    height: 100%;
    width: 100%;
    padding: 0 0.714em;
    font-weight: 100;
    font-size: 15px;
}
.c-form__input::placeholder {
    color: currentColor;
}
.c-form__input:required:valid {
    color: black;
}
.c-form__input:required:valid + .c-form__buttonLabel {
    color: #fff;
}
.c-form__input:required:valid + .c-form__buttonLabel::before {
    pointer-events: initial;
}
.c-form__buttonLabel {
    color: #ffaea9;
    height: 100%;
    width: auto;
}
.c-form__buttonLabel::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: pointer;
}
.c-form__button {
    color: white;
    padding: 0;
    height: 100%;
    width: 6em;
    background-color: #ff7b73;
    font-size: 14px;
}
.c-form__button:before {
    background: #0075ff !important;
}

.montserratt{
    font-family: 'Montserrat', helvetica, sans-serif !important;
}

#send-sms-div p{
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}




.buton-cover {
    position: relative;
}
.btn, .button-slide-out__above {
   display: block;
   min-width: 120px;
   border: none;
   padding: 0 1em;
   font-size: 12px;
   color: #fff;
   line-height: 40px;
   text-align: center;
   background: none;
   transition: background 0.3s ease;
   outline: none;
    cursor: pointer;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: #fff;
}
.btn--primary {
    background: #0075ff;
    z-index: 2 !important;
    background: #0075ff !important;
    width: 100%;
    margin: 0 auto;
    font-size: 15px !important;
    font-weight: 400;
    border: 2px solid #0075ff;
    line-height: initial;
}

.first-btn:hover {
    background: white !important;
    border-radius: 25px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    color: #2D73F3;
    border: 2px solid #2D73F3
}
.first-btn:before {
    background: white !important;
}
.btn--gray {
    background: lightgray !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: 400;
}
.btn--gray:hover {
    background: #cacaca !important;
    border-radius: 25px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.btn--gray:before {
    background: #cacaca !important;
}
.btn--gray-drk {
    background: #0098ff !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: 400;
}
.btn--gray-drk:hover {
    background: #538FFC !important;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.btn--gray-drk:before {
    background: #538FFC !important;
}
.button-set {
    display: flex;
    margin-top: 1px;
}
.button-set .btn {
    display: block;
    min-width: initial;
    min-width: 50%;
    padding: 0;
}
.button-slide-up {
    position: relative;
    overflow: hidden;
    min-width: 120px;
}
.button-slide-up .button-set {
    margin-top: 0;
}
.button-slide-up__button {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
}
.is_active .button-slide-up__button {
    transform: translateY(-100%);
}

#error-msg, .error-msg-test-num{
    font-size: 12px;
    color: red;
    position: absolute;
    width: 100%;
    left: 0;
    display: none;
    margin-top: -6px;
}

.actual-msg{
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.actual-msg p{
    text-align: center;
    background-color: #f9f9f9;
    display: inline-block;
    padding: 5px;
    border-radius: 9px;
    font-size: 19px;
    margin: 0 55px !important;
    padding-left: 20px;
    padding-right: 20px;
}

.gif-sending{
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.action-msg{
    margin-bottom: 30px;
}

.action-msg p{
    text-align: center;
    color: #2c73f3;
    font-weight: 400;
    font-size: 17px;
    margin-top: -8px;
}

.cancel-send-msg{
    display: flex;
    justify-content: center;
}

#sending-message{
    display:none;
    padding:0 !important;
    height: 107% !important;
    width: 720px !important;
    z-index:100 !important;
    margin-top: 150px !important;
}

.cancel-send-msg button{
    border-radius: 10px !important;
    padding: 0 30px !important;
    background: #0098ff !important;
    font-weight: 600;
}

#shout-out-schedules{
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

#shout-out-schedules .p-light{
    color: #959595;
}

#shout-out-schedules i{
    margin-right: 10px;
}

.msg-menu-button{
    float: right;
    cursor: pointer;
}

.msg-menu{
    top: 0;
    overflow: hidden;
    position: absolute;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.5);
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.95);
    right: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 2;
    right: 13px;
    /* display: none */
    opacity: 0;
}

.msg-menu p:not(:last-child){
    border-bottom: 1px solid #e4e4e4;
}

.msg-menu p{
    padding: 5px 20px;
    font-size: 12px;
    font-weight: 500;
}

.schedule-info-msg{
    margin-right: 15px !important;
    background: #D8EACC;
    color: #5C5C5C;
    padding: 3px 13px;
    z-index: 1;
    border-radius: 30px;
    font-size: 12px;
}

.edit-msg:before{
    content: '\f303';
    margin-right: 7px;
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

.edit-msg:hover{
    background-color: #0098FF;
    color: white
}

.delete-msg{
    color: red;
}

.delete-msg:before{
    content: '\f2ed';
    margin-right: 7px;
    font-family: 'Font Awesome\ 5 Free';
}

.delete-msg:hover{
    background-color: red;
    color: white !important;
}

span.msg-menu-button:hover .msg-menu {
    /* display: block; */
    opacity: 1;
}

.change-date{
    background-color: #e6e6e6;
    padding: 7px;
    margin-top: 20px;
    font-size: 14px;
}

.msg-menu-button::before {
    content: '\f142';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #ccc;
}

span.msg-menu-button:hover .msg-menu-button{
    color: #0098ff;
}

.paused-state-shout{
    position: absolute;
    top: 12px;
    right: 70px;
    background: #FBEECA;
    padding: 0 10px;
    display: flex;
    height: 32px;
    border-radius: 15px;
    border: 1px solid lightgray;
}

.paused-state-shout h6{
    font-size: 13px;
    font-family: 'Montserrat', helvetica, sans-serif !important;
    font-weight: 500;
    margin-top: -5px;
    color: black;
}

#pause-message-popup{
    margin-left: 100px;
    width: 600px;
    padding: 0;
}

.pause-message-popup-title{
    padding: 12px;
    background-color: #efefef;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.pause-message-popup-description{
    padding: 40px 20px;
}

.popup-buttons-pause{
    padding: 15px;
    border-top: 1px solid #ececec;
    display: flex;
    justify-content: left;
}

.popup-buttons-pause button{
    margin: 0 !important;
}

.popup-buttons-pause p{
    margin-left: 15px !important;
    margin-top: 0px;
    color: #2D73F3 !important;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
    font-family: 'Montserrat', helvetica, sans-serif !important;
}

.popup-buttons-pause p:hover{
    color: gray !important;
}

.asterisk{
    margin-left: 5px;
    font-weight: bold;
}

#my-input{
    width: 100%;
    border: 1px solid lightgray;
    padding: 7px;
    padding-left: 30px;
    border-radius: 7px;
}

.admin-panel-logout button{
    background: #0098ff;
    margin-top: 0;
}

#checkedIn{
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

#alreadyCheckedIn{
    background: linear-gradient(to right, #989898, #bfbfbf);
    background: -moz-linear-gradient(to right, #989898, #bfbfbf);
    background: -webkit-linear-gradient(to right, #989898, #bfbfbf);
    background: -o-linear-gradient(to right, #989898, #bfbfbf);
    background: -ms-linear-gradient(to right, #989898, #bfbfbf);
    border-radius: 50px;
    padding: 8px 20px;
    box-shadow: 2px 7px 8px 0px #0000002e;
    display: none;
    margin: 42px 0 -20px;
}

#alreadyCheckedIn img{
    width: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

#alreadyCheckedIn p{
    margin: 0 auto;
    color: white;
    font-weight: 500;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.spinner-waiting{
    position: absolute;
    top: 48px;
    z-index: 2;
    left: 190px;
    color: #616161;
}

.spinner-waiting img{
    width: 20px;
}

.account-confirmation{
    margin-top: 10px !important;
    margin-left: 10px !important;
    color: green;
}

.account-failed{
    margin-top: 10px !important;
    margin-left: 10px !important;
    color: red;
}

.account-failed i{
    margin-right: 5px;
}

#twilio-billing{
    position: absolute;
    right: 0;
    margin-top: 45px;
}

#twilio-billing-first{
    position: absolute;
    right: 0;
    margin-top: 0;
}

.title-menu-upload h3, .copy-link-menu-parent h3{
    text-align: center;
    margin-bottom: 10px;
}

.title-menu-upload p{
    text-align: center;
    margin-bottom: 10px !important;
}

.restaurant-name-menu{
    margin-bottom: 10px !important;
}

.image-upload{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.copy-link-menu-parent{
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-menu-saved{
    position: absolute;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    color: green;
    font-weight: 500;
}

.close-twilio-account{
    color: #989898;
    font-size: 12px;
    margin-top: 9px !important;
    margin-left: 20px !important;
    cursor: pointer;
    font-weight: 500;
    display: none;
}

#add-rest-group-popup{
    padding: 25px 40px;
    width: 45%;
    max-width: 550px;
}

#add-rest-group-popup .questions-form{
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 13px;
}

#add-rest-group-popup button{
    margin-top: 15px;
    padding: 0 25px !important;
    height: 30px !important;
}

#add-rest-group-popup .cancel-add-rest{
    cursor: pointer;
    float: right;
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 14px;
    color: #b7b7b7;
    width: 25px;
    height: 20px;
}

.back-shadow-addRest{
    background-color: gray;
    width: 100%;
    height: 1000vh;
    position: absolute;
    z-index: 100;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5) !important;
    margin-top: -62px;
    margin: -40px;
    display: none;
}

/* .do-scroll{
    width: 100%;
    height: 220px;
    display: -moz-grid;
    overflow-y: scroll;
} */

#chain-name-list{
    height: 70vh;
}

#locationsTable3, #locationVisitsTable{
    width:100%;
    max-height: 200px;
}

#locationsTable2{
    width:100%;
    height: 300px;
}

#redeemptionsTable1{
    height: 800px;
    width: 100%;
}

#locationsTable3 tbody, #locationVisitsTable tbody, #locationsTable2 tbody, #detailedSmsTable tbody, #redeemptionsTable1 tbody{
    width: 100%;
    display: table;
}

#customersTable{
    height: auto;
    max-height: 750px;
    /* height: 750px; */
}

#detailedSmsTable{
    width: 100%;
    height: 500px;
}

.flexcroll{
    overflow-y:scroll;
    display: block !important;
}
.flexcroll{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

.flexcroll-x{
    overflow-x:scroll;
    display: block !important;
}
.flexcroll-x{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

/* SCROLLBAR Y */
.flexcroll::-webkit-scrollbar {
    width: 4px;
}

  /* Track */
.flexcroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(119, 119, 119, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.31);
}

/* SCROLLBAR X */
.flexcroll-x::-webkit-scrollbar {
    width: 4px;
}

  /* Track */
.flexcroll-x::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(119, 119, 119, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.flexcroll-x::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.31);
}


#change-language{
    position: absolute;
    top: -3px;
    background-color: #30A4F3;
    color: white;
    right: 50px;
    padding: 0 10px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    display: none;
    z-index: 99;
}

#change-language p{
    margin: 0;
    padding: 5px 0;
    font-weight: 600;
}

#demo-use{
    margin-top: 0;
    color: black;
    font-weight: 600;
    background-color: #F3EC1A;
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 20px;
}


body.dark-mode .card-container {
  color: #fff;
  background-color: #1b1b1b;
}

body.dark-mode #milestone-header {
  color: #fff;
}

body.dark-mode .divider-line, body.dark-mode .divider-cards, body#rewards.dark-mode #rewards-container .rewards-wrapper item {
  border-color: #303030;
}

body.dark-mode .card, body#home.dark-mode #promotion-container .promo .promo-wrapper {
  background-color: #1b1b1b;
}


#ranking-badge {
  visibility: hidden;
  margin: 0 auto 38px;
  width: 80%;
  padding: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 900 1.1em/1 Roboto;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  background: #555;
  border-radius: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  text-shadow: 2.724px 5.346px 6.86px rgba(0, 0, 0, 0.09);
}

#ranking-badge img {
  max-width: 36px;
  margin-right: .6em;
  -webkit-filter: drop-shadow(2.724px 5.346px 6.86px rgba(0, 0, 0, 0.09));
  filter: drop-shadow(2.724px 5.346px 6.86px rgba(0, 0, 0, 0.09));
}

#ranking-badge.supervip {
  background: linear-gradient(90deg, #dfb354 0% 46%, #dac8a2 56%, #dfb354 66% 100%);
  background-size: 200% auto;
  animation: badge-shimmer 5s ease infinite;
}

#ranking-badge.vip {
  background: linear-gradient(90deg, #0098ff 0% 46%, #5cbdff 56%, #0098ff 66% 100%);
  background-size: 200% auto;
  animation: badge-shimmer 5s ease infinite;
}
#ranking-badge.vip img {
  max-height: 22px;
}

@keyframes badge-shimmer {
  0% {
    background-position: 133%;
  }
  100% {
    background-position: 0%;
  }
}

.select-signup{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://cdn.iconscout.com/icon/free/png-512/down-arrow-16-460295.png) 96% / 25% no-repeat;
    padding-left: 7px;
}

.select-signup-disc-us {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://cdn.iconscout.com/icon/free/png-512/down-arrow-16-460295.png) 96% / 8% no-repeat;
    padding-left: 7px;
}

body #ranking-overlay {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 500px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: rgb(0 0 0 / 100%);
    z-index: 100;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

body #ranking-overlay h1{
    color: white;
    font-size: 40px;
    display: none;
}

body #ranking-overlay p{
  color: white;
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  display: none;
  line-height: 1.4;
}

body #ranking-overlay p span{
    font-weight: 600;
}

body #ranking-overlay .first{
  margin-bottom: 15px;
}

body #ranking-overlay .last{
  margin-top: 25px;
}

body #ranking-overlay .new-icon{
  color: white;
  background-color: red;
  display: inline-block;
  padding: 10px 5px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  z-index: 1;
  left: 15px;
  top: -20px;
  display: none;
}

body #ranking-overlay div:not(.ranking-badge-img){
    text-align: center;
}

body #ranking-overlay button{
    margin: 30px auto;
    display: none;
    font-size: 16px;
}

body #ranking-overlay.hide {
    display: none;
}
body #ranking-overlay.hide.first-timer {
    display: -webkit-flex;
    display: flex;
    animation-delay: .5s;
}

body #ranking-overlay img {
    width: 145px;
    margin: 20px auto;
}

.delay-h1 {
    animation-delay: 2.5s;
}

.delay-p {
    animation-delay: 3s;
}

.delay-icon {
  animation-delay: 3.5s;
}

.ret-separator{
    border-top: 1px solid lightgray;
    width: 90%;
    margin: 20px auto;
}

.switch-picture{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-direction: column;
}

.switch-picture p{
    text-align: left !important;
}

#delete-image{
    width: 14px;
}

.ret-img{
    width: 210px;
    margin-right: 15px;
    border: 1px solid lightgray;
    padding: 5px;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.checkbox-ret-conditions{
    display: flex;
    margin: 10px 0;
}

.retention-name-column{
    width: 260px;
}

.title-retention-days{
    text-align: start;
    margin-bottom: 5px;
    font-weight: 500;
}

.remove-image-selection{
    cursor: pointer;
    pointer-events: none;
    margin-top: 10px;
}

span.typeTab {
  padding: 10px 15px 5px 15px;
  border: #D2D2D2 1px solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #f0f0f0;
  font-weight: 400;
  color: grey;
  vertical-align: bottom;
  display: inline-block;
  cursor: pointer;
}

span.typeTab.selected {
  border-bottom: none;
  background-color: white;
  padding: 12px 17px 7px 17px;
  cursor: initial;
}

span.quarantine-alert {
  background-color: #f60303;
  display: none;
  border-radius: 20px;
  height: 6px;
  width: 6px;
  position: absolute;
  top: 7px;
  right: 6px;
}

#users-tab span.quarantine-alert {
  top: -2px;
  right: -8px;
}

th#verifiedBlockedHead::after,  th#verifiedBlockedHead::before {
  display: none !important;
}

.clicked{
    pointer-events: none;
}

th#verifiedBlockedHead {
  text-align: center;
}

span.verifiedCheckbox, span.blockedCheckbox {
  color: white;
  padding: 2px 0;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  width: 80px;
  display: inline-block;
  font-size: 13px;
  transition: 0.2s;
}

span.verifiedCheckbox {
  background-color: #6ce3aa;
  margin-right: 10px;
}
span.blockedCheckbox {
  background-color: #f3312f;
}

span.verifiedCheckbox:hover, span.blockedCheckbox:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

span.verifiedCheckbox:hover{
  background-color: #42d991;
}

span.blockedCheckbox:hover {
  background-color: #d4211f;
}

span.verifiedCheckbox::before {
  content: 'Verify';
}

span.verifiedCheckbox.checked::before {
  content: 'Unverify';
}

span.blockedCheckbox::after {
  content: 'Block';
}

span.blockedCheckbox.checked::after {
  content: 'Unblock';
}

.welcome-offer-parent div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-divider{
    width: 90%;
    border-top: 1px solid lightgray;
    margin-bottom: 30px;
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto;
}

.ranking-description{
    font-size: 12px;
    padding-bottom: 10px;
}

#ranking-retentions-title-block{
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid lightgray;
    margin-bottom: 25px;
}

#ranking-retentions-title-block div:nth-of-type(2){
    display: flex;
    justify-content: center;
    align-items: center;
}

#redemption-codes-key {
  border: 1px solid rgb(99, 99, 99);
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 8.03px 11.468px 21px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  margin-top: -18px;
  margin-left: 170px;
  width: auto;
  z-index: 1;
  text-align: left;
  padding: 0 10px;
  font-size: 80%;
  line-height: 100%;
  padding: 18px 25px 8px 15px;
}
#redemption-codes-key::before {
  border: 1px solid rgb(99, 99, 99);
  border-top: 0;
  border-right: 0;
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  content: "\00a0";
  display: block;
  height: 20px;
  position: absolute;
  margin-top: 1px;
  margin-left: -26px;
  transform: rotate( 45deg );
  -moz-transform: rotate( 45deg );
  -ms-transform: rotate( 45deg );
  -o-transform: rotate( 45deg );
  -webkit-transform: rotate( 45deg );
  width: 20px;
}
.prevent-sms{
    background: lightgray !important;
    border: 2px solid lightgray;
    pointer-events: none;
}

#early-msg{
    display: flex;
    margin-bottom: 15px;
    display: none;
}

#early-msg p{
    font-size: 12px;
    text-align: initial;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 400;
    margin-left: 7px !important;
}

.promotion-dates{
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    padding-left: 5px;
}

.cta-promo{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 4px;
}

.cta-promo span{
    display: inline-flex;
    justify-content: start;
    align-items: center;
    width: 49%;
    max-width: 160px;
}

.cta-promo span i{
    font-size: 14px;
    color: #0098ff;
    margin-right: 10px;
}

.cta-promo span div{
    width: 100%;
}

.promo-cta-action{
    flex-grow: 1;
    font-size: 13px;
    font-weight: 500;
    padding: 8px !important;
    margin-left: 5px !important;
    border: 1px solid #e4e4e4 !important;
}

.cta-promo input{
    width: auto;
    margin-right: 5px !important;
}

.field-description {
  border: 1px solid rgb(99, 99, 99);
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 8.03px 11.468px 21px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  margin-top: -68px;
  margin-left: 33px;
  width: auto;
  z-index: 1;
  text-align: left;
  padding: 5px 10px;
  font-size: 80%;
  line-height: 100%;
  max-width: 260px;
}

.field-description::before {
  border: 1px solid rgb(99, 99, 99);
  border-top: 0;
  border-right: 0;
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  content: "\00a0";
  display: block;
  height: 13px;
  position: absolute;
  margin-top: 15px;
  margin-left: -18px;
  transform: rotate( 45deg );
  -moz-transform: rotate( 45deg );
  -ms-transform: rotate( 45deg );
  -o-transform: rotate( 45deg );
  -webkit-transform: rotate( 45deg );
  width: 13px;
}

.field-description p{
  font-size: 13px;
}

.field-description .italic {
  font-style: italic;
}

#redemption-codes-key div{
    margin-bottom: 10px;
}

#redemption-codes-key .code-key{
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding-left: 40px;
}

#redemption-codes-key .code-key span{
    width: 100%;
    display: flex;
    display: inline-flex;
}

#redemption-codes-key .code-key span div{
    margin-right: 7px;
}

.edit-retentions{
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.field-description p{
    font-size: 13px;
}

.field-description .italic {
    font-style: italic;
}

.input-with-icon{
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.input-with-icon i{
    font-size: 14px;
    color: #0098ff;
    margin-right: 10px;
}

.promotion-dates p{
    padding-left: 0 !important;
}

.promotion-dates .event-detail{
    width: 49%;
}

.cta-text-dropdown{
    border-radius: 3px;
    border: 1px solid #e4e4e4;
}

body#admin p.promo-sms-msg{
    margin-top: -35px;
    margin-left: 30px;
    margin-bottom: 20px;
    font-size: 12px;
}

.cta-button{
    background: transparent;
    border: 1px solid white;
    max-width: 135px;
    min-width: 120px;
    height: 25px;
    margin-top: 5px;
    font-size: 13px;
    padding-left: 13px;
    padding-right: 13px;
    font-weight: bold;
    border-radius: 25px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', helvetica, sans-serif;
}

.cta-button-inside{
    cursor: pointer;
    background: rgba(45,155,243,1);
    color: white;
    line-height: 1;
    padding: 0 30px;
    height: 30px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Montserrat', helvetica, sans-serif;
    border: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.refresh-icon{
    background-color: white;
    padding: 5px 6px;
    border-radius: 20px;
}

#scheduled-sms-key {
    border: 1px solid rgb(99, 99, 99);
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 8.03px 11.468px 21px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    margin-top: -52px;
    margin-left: 324px;
    width: 100%;
    z-index: 1;
    text-align: left;
    padding: 0 10px;
    font-size: 80%;
    line-height: 100%;
    max-width: 302px;
}

#scheduled-sms-key::before {
    border: 1px solid rgb(99, 99, 99);
    border-top: 0;
    border-right: 0;
    background-color: #fff;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    content: "\00a0";
    display: block;
    height: 20px;
    position: absolute;
    margin-top: 20px;
    margin-left: -21px;
    transform:         rotate( 45deg );
    -moz-transform:    rotate( 45deg );
    -ms-transform:     rotate( 45deg );
    -o-transform:      rotate( 45deg );
    -webkit-transform: rotate( 45deg );
    width:  20px;
}

.remove-cta-info{
  display: flex;
  justify-content: center;
  align-items: center;
  color: lightgray;
  font-size: 17px;
  margin-left: 5px;
  cursor: pointer;
  display: none;
}

.remove-cta-edit{
  display: none;
}

.user-exists-admin {
  color:red;
  display:none;
  width: 100%;
}

.user-created-admin {
  color: green;
  display:none;
  width: 100%;
}

.manager-box {
  display: flex;
  margin-bottom: 0 !important;
}

.manager-box .check {
  width: 40%;
  display: flex;
  align-items: center;
}

.manager-box input{
  transform: scale(1.5);
  width: auto;
}

.manager-box label{
  margin-left: 10px;
  color: black !important;
  font-size: 15px !important;
  margin-bottom: 0 !important;
}

.manager-box .select-location {
  width: 60% !important;
}

.manager-box .select-location input {
  margin-right: 10px;
}

.manager-box .blocked {
  pointer-events: none;
  background-color: #ececec;
}

#reorder-campaigns-popup {
  width: 50%;
  min-height: 300px;
  padding: 40px 70px;
  top: 60%;
  max-width: 800px;
  border-radius: 20px;
  max-height: 1000px;
}

#reorder-campaigns-popup h2 {
  font-size: 22px !important;
  font-weight: 600;
  margin-bottom: 35px;
}

#reorder-campaigns-popup ul{
  min-height: 200px;
  text-align: left;
  margin-top: 20px;
  height: 100%;
  width: 100%;
  overflow: auto;
  max-height: 500px;
}

#reorder-campaigns-popup div{
  position: absolute;
  right: 25px;
  top: 20px;
}

#reorder-campaigns-popup div i{
  color: #c5c5c5;
  font-size: 20px;
  cursor: pointer;
}

#sortable-campaigns li {
  padding: 13px 0;
  font-size: 16px;
  cursor: grab;
  background-color: #F7F7F7;
  padding: 20px;
  border-radius: 10px;
  border: #E5E5E5 2px solid !important;
  margin-top: 15px;
  display: flex;
  align-items: center;
}

#sortable-campaigns li img{
  width: 10px;
  height: 100%
}

#sortable-campaigns li p{
  color: black;
  font-size: 17px;
  margin-left: 13px;
  color: black;
  font-size: 17px;
  margin-left: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sortable-campaigns li:active {
  cursor: grabbing;
}

#sortable-campaigns button {
  padding: 0 35px;
  font-size: 15px;
  font-weight: 500;
}

.ui-state-default, .ui-widget-header .ui-state-default {
  background: transparent;
}

#sortable-campaigns .sort-placeholder {
  height: 100%;
  border: #F2F2F2 2px solid !important;
  background-color: #F2F2F2 !important;
}

body#admin #reorder-campaigns-popup button{
  padding: 0 35px;
  font-weight: 600;
  font-size: 15px;
}

.reorder-campaigns img {
  margin: 5px;
  margin-right: 8px;
  height: 13px;
}


#edit-location-popup {
    top: 68%;
    position: absolute;
}

#edit-location-popup div {
  position: absolute;
  right: 25px;
  top: 25px;
}

#edit-location-popup div i{
  font-size: 18px;
  cursor: pointer;
}

#edit-location-popup div i:hover{
  color: #0098ff;
}

#edit-location-popup h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

#edit-location-popup input {
  margin-top: 5px;
}

#edit-location-popup label {
  font-size: 14px;
  color: #777676;
  padding-left: 5px;
}

.download-users-list {
  background: #0098ff;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-family: 'Montserrat', helvetica, sans-serif;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#signup-checkbox-sms {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

#signup-checkbox-sms input {
  transform: scale(1.5);
  margin: 5px;
}

#signup-checkbox-sms p {
  text-align: start;
  line-height: 1.5;
  font-weight: 500;
  margin: 10px 0 10px 10px;
  max-width: 270px;
}

button.blocked {
  background: #C7C7C7;
  pointer-events: none;
}

.dob-label {
  top: -3px;
  font-size: 12px;
  font-weight: 400;
  left: 0 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

/* TOGGLE SWITCH #13 */
.onoffswitch13 {
  position: relative;
  width: 78px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.onoffswitch-checkbox13 {
  display: none;
}
.onoffswitch-label13 {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #C2C2C2;
  border-radius: 20px;
}
.onoffswitch-inner13 {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner13:before, .onoffswitch-inner13:after {
  display: block;
  float: left;
  width: 50%;
  height: 28px;
  padding: 0;
  line-height: 28px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner13:before {
  content: "ON";
  padding-left: 10px;
  background-color: green;
  color: #FFFFFF;
}

.onoffswitch-inner13:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE; color: #999999;
  text-align: right;
}

.onoffswitch-switch13 {
  display: block; width: 18px; margin: 5px;
  background: #FFFFFF;
  position: absolute; top: 0; bottom: 0;
  right: 46px;
  border: 2px solid #C2C2C2; border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox13:checked + .onoffswitch-label13 .onoffswitch-inner13 {
  margin-left: 0;
}

.onoffswitch-checkbox13:checked + .onoffswitch-label13 .onoffswitch-switch13 {
  right: 0px;
}

/* TOGGLE SWITCH #15 */
.onoffswitch15, .onoffswitch16, .onoffswitch17, .onoffswitch18 {
    position: relative;
    width: 78px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
  }
  .onoffswitch-checkbox15, .onoffswitch-checkbox16, .onoffswitch-checkbox17, .onoffswitch-checkbox18 {
    display: none;
  }
  .onoffswitch-label15, .onoffswitch-label16, .onoffswitch-label17, .onoffswitch-label18 {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #C2C2C2;
    border-radius: 20px;
  }
  .onoffswitch-inner15, .onoffswitch-inner16, .onoffswitch-inner17, .onoffswitch-inner18 {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }

  .onoffswitch-inner15:before, .onoffswitch-inner15:after,
  .onoffswitch-inner16:before, .onoffswitch-inner16:after,
  .onoffswitch-inner17:before, .onoffswitch-inner17:after,
  .onoffswitch-inner18:before, .onoffswitch-inner18:after {
    display: block;
    float: left;
    width: 50%;
    height: 28px;
    padding: 0;
    line-height: 28px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
  }

  .onoffswitch-inner15:before, .onoffswitch-inner16:before, .onoffswitch-inner17:before, .onoffswitch-inner18:before {
    content: "ON";
    padding-left: 10px;
    background-color: green;
    color: #FFFFFF;
  }

  .onoffswitch-inner15:after, .onoffswitch-inner16:after, .onoffswitch-inner17:after, .onoffswitch-inner18:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
  }

  .onoffswitch-switch15, .onoffswitch-switch16, .onoffswitch-switch17, .onoffswitch-switch18 {
    display: block; width: 18px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #C2C2C2; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }

  .onoffswitch-checkbox15:checked + .onoffswitch-label15 .onoffswitch-inner15,
  .onoffswitch-checkbox16:checked + .onoffswitch-label16 .onoffswitch-inner16,
  .onoffswitch-checkbox17:checked + .onoffswitch-label17 .onoffswitch-inner17,
  .onoffswitch-checkbox18:checked + .onoffswitch-label18 .onoffswitch-inner18 {
    margin-left: 0;
  }

  .onoffswitch-checkbox15:checked + .onoffswitch-label15 .onoffswitch-switch15,
  .onoffswitch-checkbox16:checked + .onoffswitch-label16 .onoffswitch-switch16,
  .onoffswitch-checkbox17:checked + .onoffswitch-label17 .onoffswitch-switch17,
  .onoffswitch-checkbox18:checked + .onoffswitch-label18 .onoffswitch-switch18 {
    right: 0px;
  }


@media only screen and (device-width: 410px) and (device-width: 789px){
    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }
}

#stripe-klarna-financing-modal{
    padding: 30px 35px;
}

#stripe-klarna-financing-modal h1{
    color: black;
    font-family: 'Montserrat', helvetica, sans-serif;
    font-size: 24px;
}

#stripe-klarna-financing-modal p{
    color: black;
}

#stripe-klarna-financing-modal button{
  font-weight: 600;
}

#klarna-financing-banner {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #328977;
  z-index: 100;
  margin: 0 auto;
  position: absolute;
  max-width: 500px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 11px 12px;
  align-items: center;
  color: white;
  top: 0;
}

#klarna-financing-banner span {
  font-size: 12px;
  font-family: 'Montserrat', helvetica, sans-serif;
}

#klarna-financing-banner div:nth-child(2) {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

#klarna-financing-banner i {
  font-size: 19px;
  margin-left: 7px;
  color: black;
}

#klarna-financing-banner button {
  padding: 0 12px;
  font-size: 12px;
  height: 25px;
  font-weight: 500;
  white-space: nowrap;
}

#klarna-financing-banner button img{
  width: 10px;
  margin-left: 5px;
}

#klarna-financing-banner img {
  width: 12px;
}

.banner-wrapper{
    max-width: 500px;
    height: 50px;
}

#open-twilio h3 span{
    font-style: italic;
}

#open-twilio button{
    font-weight: 500; 
    background: lightgray; 
    pointer-events: none;
}

#v2-transition-modal {
    padding: 35px 25px;
}

#v2-transition-modal .closePopup {
    margin-top: 3px;
    margin-right: 3px;
}

#v2-transition-modal .title {
    color: black;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    padding-bottom: 13px;
}

#v2-transition-modal .text {
    color: black;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
}

#v2-transition-modal button {
    margin: 25px auto 0px;
}

/* Standard Device Styles Code */
/* @media only screen and (max-width: 600px){ */
@media only screen and (device-width: 360px) and (device-height: 640px){
    /* body p.offline-message br {
        display: none;
    } */

    .controls-add-to-home-screen{
        top: -80px ;
    }

    .controls-location{
        top: -111px ;
    }

    .load-button3{
        position:absolute;
        margin-top: -65px;
        margin-left: 60%;
        font-size: 70px;
        color: white;
    }

    body#home #milestone-tracker{
        background: transparent;
        margin-top: -10%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-top: 63px;
        padding-bottom: 5px;
        margin-bottom: 0px;
        min-height: 0;
    }

    .picture-card{
        border-radius: 0px ;
    }

    .promo-title{
        margin-top: 6px ;
        margin-left: 20px ;
        width: 300px;
        position: absolute;
        font-size: 20px;
    }

    .learn-more-description{
        /* width: 110px;
        height: 25px;
        position: absolute;
        margin-top: 67px;
        margin-left: 20px;
        background: transparent;
        font-size: 13px;
        padding: 0;
        padding-left: 15px;
        font-weight: bold; */

        background: transparent;
        border: 1px solid white;
        width: 120px;
        height: 25px;
        margin-top: 5px;
        font-size: 13px;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: bold;
    }

    .open-title{
        margin-top: 13px ;
        width: 100%;
    }

    .instruction-one{
        text-align: center;
        margin-bottom: 0;
        font-size: 19px;
        font-family: 'Quicksand', sans-serif;
    }

    .instruction-two{
        text-align: center;
        margin-top: 0;
        font-size: 11px;
        font-weight: 500;
        color: gray;
        letter-spacing: 0.5px;
    }

    body #milestone-tracker h4, body #milestone-tracker p {
        width: 100%;
        text-align: center;
        font-size: 25px;
    }

    .no-location{
        position: absolute;
        width: 100%;
        color: white;
        text-align: center;
        font-size: 13px ;
        font-weight: 600;
        margin: 0;
        top: -60px;
        background: rgba(255, 0, 0, 0.8);
        padding: 7px ;
        border-radius: 5px;
    }

    body .app-container {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        max-width: 500px;
        min-height: 100%;
        background-color: #f9f9f9;
        background-size: auto;
        background-position: top !important;
        background-repeat: repeat;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h3#calculated-roi {
        color: #0098ff;
        font-size: 65px !important;
        font-weight: 100;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .customer-home-button{
        margin-right: 10px;
    }

    body#admin button, body#admin-edit button {
        padding: 0 9px !important;
    }

    #locationsTable3{
        margin-left: -19px;
    }

    #locationVisitsTable{
        margin-left: -5px;
    }

    #locationVisitsTable tr td{
        padding: 10px 0px !important;
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 300px;
    }

    .outside-location p{
        margin-bottom: 10px;
        margin-top: 5px;
        font-weight: 600;
        font-size: 13px;
    }

    .page-manager-contact {
        margin-top: 160px;
    }

    #reward-history-container .location-name {
        font-size: 11px;
    }
    #reward-history-container .location-address {
        font-size: 10px;
    }
    #reward-history-container .sm {
        font-size: 11px !important;
    }

    #card-history-container .location-name{
        font-size: 11px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #card-history-container .sm {
        font-size: 11px !important;
    }

    #visits-history-container .location-name{
        font-size: 11px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .sm {
        font-size: 11px !important;
    }

    #monthSelectionSms, #yearSelectionSms{
        width: 50% !important;
    }

}

@media only screen and (min-device-width : 411px) and (max-device-width : 823px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #reward-history-container .location-address {
        font-size: 10px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }

    .instruction-one {
        text-align: center;
        margin-bottom: 0;
        font-size: 22px;
        font-family: 'Quicksand', sans-serif;
    }

    /* body .app-container:before{
        position: relative;
        height: 100%;
    } */

    /* body .app-container:after{
        position: absolute ;
        background-color: rgba(0,0,0,0.55) ;
        /* height: 100%;
    } */

    body .app-container {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        max-width: 500px;
        min-height: 100%;
        background-color: #f9f9f9;
        background-size: auto;
        background-position: top !important;
        background-repeat: repeat;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #monthSelectionSms, #yearSelectionSms{
        width: 50% !important;
    }
}

/* Iphone X Media Queries */
@media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
    #reward-history-container .location-address {
        font-size: 10px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }

    .instruction-one{
        text-align: center;
        margin-bottom: 0;
        font-size: 20px;
        font-family: 'Quicksand', sans-serif;
    }

    .instruction-two{
        text-align: center;
        margin-top: 0;
        font-size: 11px !important;
        font-weight: 500;
        color: gray;
        letter-spacing: 0.5px;
    }

    body #milestone-tracker h4, body #milestone-tracker p {
        width: 100%;
        text-align: center;
        font-size: 28px ;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .customer-home-button{
        margin-right: 10px;
    }

    body#admin button, body#admin-edit button {
        padding: 0 12px !important;
    }

    #locationVisitsTable{
        margin-left: -5px;
    }

    #locationVisitsTable tr td{
        padding: 10px 10px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 350px;
    }

    .outside-location p{
        margin-bottom: 10px;
        margin-top: 5px;
        font-weight: 600;
        font-size: 13px;
    }

    #monthSelectionSms, #yearSelectionSms{
        width: 50% !important;
    }
}

/* Samsung Galaxy Tab A - Where I practice */
@media only screen and (min-device-width : 768px) and (max-device-height : 1024px) and (orientation : portrait) {

    body .app-container {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        max-width: 500px;
        min-height: 100vh;
        background-color: #f9f9f9;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    body .app-container:before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        width: 120vw;
        height: 120vh;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(5px);
        background: inherit;
        background-color: #ddd;
        background-blend-mode: overlay;
        z-index: -2;
    }

    body .app-container:after {
        content: '';
        position: fixed;
        top: 0;
        left: 50%;
        width: 100%;
        max-width: 500px;
        height: 100vh;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background: inherit;
        background-color: #333;
        background-blend-mode: overlay;
        z-index: -1;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .title-report{
        font-size: 18px;
    }

    #monthSelectionSms, #yearSelectionSms{
        width: 50% !important;
    }
}

/* iPhone XS MAX */
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) {
    .instruction-one {
        text-align: center;
        margin-bottom: 4px;
        font-size: 20px;
        font-family: 'Quicksand', sans-serif;
    }

    body .app-container:before{
        position: fixed;
        height: 100%;
    }

    body .app-container:after{
        position: fixed ;
        background-color: rgba(0,0,0,0.55) ;
        height: 100%;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 350px;
    }
}

/* iphone 6,7,8 plus */
@media only screen and (min-device-width : 414px) and (max-device-height : 736px) and (orientation: portrait) {

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 350px;
    }

}

/* iphone 6,7,8 */
@media only screen and (min-device-width : 375px) and (max-device-height : 667px) and (orientation : portrait) {

    .instruction-one {
        text-align: center;
        margin-bottom: 4px;
        font-size: 20px;
        font-family: 'Quicksand', sans-serif;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .customer-home-button{
        margin-right: 10px;
    }

    body#admin button, body#admin-edit button {
        padding: 0 12px !important;
    }

    #locationsTable3{
        margin-left: -12px;
    }

    #locationVisitsTable{
        margin-left: -5px;
    }

    #locationVisitsTable tr td{
        padding: 10px 10px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 350px;
    }

    .outside-location p{
        margin-bottom: 10px;
        margin-top: 5px;
        font-weight: 600;
        font-size: 13px;
    }

    .page-manager-contact {
        margin-top: 170px;
    }

    #reward-history-container .location-name {
        font-size: 11px;
    }
    #reward-history-container .location-address {
        font-size: 10px;
    }
    #reward-history-container .sm {
        font-size: 11px !important;
    }

    #card-history-container .location-name{
        font-size: 11px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #card-history-container .sm {
        font-size: 11px !important;
    }

    #visits-history-container .location-name{
        font-size: 11px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .sm {
        font-size: 11px !important;
    }
}

/* iphone 5 */
@media only screen and (min-device-width : 320px) and (max-device-height : 568px) and (orientation : portrait) {

    .claim-reward-button{
        padding: 0 10px;
    }

    .promo-title{
        overflow: hidden;
        padding-right: 50px;
    }

    .title-open-card{
        margin-left: 16px ;
        font-size: 16px;
        padding-right: 0;
    }

    body #token-redeem-container #token img.token-image {
        width: 90px;
        /* height: 100%; */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .treasure-tracker-treasureTab {
        width: 75%;
        margin-left: 80px;
        background-color: transparent;
    }

    body #milestone-tracker h4, body #milestone-tracker p {
        /* color: black; */
        width: 100%;
        text-align: center;
        font-size: 24px;
    }

    .phoneNumber {
        width: 250px;
        height: 40px;
        /* height: 20px; */
        padding-right: 50px;
        padding-left: 13px;
        font-size: 15px;
        border: 0px solid transparent;
        background-color: transparent;
        color: #666;
        margin-top: -1px;
    }

    .instruction-one {
        text-align: center;
        margin-bottom: 4px;
        font-size: 16px;
        font-family: 'Quicksand', sans-serif;
    }

    .instruction-two {
        text-align: center;
        margin-top: 0;
        font-size: 10px;
        font-weight: 500;
        color: gray;
        letter-spacing: 0.5px;
    }

    .rewards-love{
        font-size: 19px;
    }

    .token-image-rewards {
        width: 85px;
    }

    body#home #promotion-container .promo .promo-header span.close-promo-wrapper {
        height: 35px;
        width: 87%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        text-align: right;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .no-location{
        position: absolute;
        width: 100%;
        color: white;
        text-align: center;
        font-size: 11px !important;
        font-weight: 600;
        margin: 0;
        top: -96px;
        background: rgba(255, 0, 0, 0.8);
        padding: 20px !important;
        border-radius: 5px;
    }

    #error-404-wrapper{
        text-align: center;
        padding: 32px;
        margin-top: 100px;
    }

    body #tooltips-overlay section.tooltips-slide{
        position: absolute;
        text-align: center;
        /* max-width: 250px; */
        max-width: 279px;
        height: 285px !important;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .tooltips-h1{
        font-size: 15px;
    }

    .logo-tool1{
        width: 70px !important;
        margin-top: -18px;
        margin-bottom: 5px;
    }

    body #tooltips-overlay .slide-controls {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        width: 100%;
        padding: 0 15px;
        z-index: 99;
    }

    .iphone-install-app, .iphone-install-app-popup{
        background-color: #f5f3f3;
        color: black !important;
        font-size: 10px;
        padding: 5px;
        border-radius: 5px;
        margin-top: 10px;
    }

    .slide2image, .slide3image{
        width: 65px;
    }

    .instructions-tooltip3{
        font-size:12px !important;
    }

    .location-p, .click-tooltip{
        font-size:12px !important;
    }

    .button-slides2{
        font-size: 14px;
        margin-left: 30px;
    }

    .button-slides2{
        font-size: 12px;
        margin-left: 20px;
        margin-right: 20px;
    }

    #get-started-button{
        margin-left: 20px !important;
    }

    .skip-tooltip-6{
        margin-top: 39px !important;
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 96%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 300px;
    }

    .outside-location p{
        margin-bottom: 10px;
        margin-top: 5px;
        font-weight: 600;
        font-size: 11px;
    }

    body .mobile-menu-container a.menu-link.active:before {
        left: 0;
    }

    .page-manager-contact{
        margin-top: 100px;
    }

    #reward-history-container .location-name {
        font-size: 10px;
    }
    #reward-history-container .location-address {
        font-size: 10px;
    }
    #reward-history-container .sm {
        font-size: 10px !important;
    }

    #card-history-container .location-name{
        font-size: 10px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #card-history-container .sm {
        font-size: 10px !important;
    }

    #visits-history-container .location-name{
        font-size: 10px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .sm {
        font-size: 10px !important;
    }

}

/* iPhone XR */
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) {

    .instruction-one {
        text-align: center;
        margin-bottom: 4px;
        font-size: 20px;
        font-family: 'Quicksand', sans-serif;
    }

    .members-table {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .new-members-chart{
        display:flex;
        text-align: center;
        flex-direction: column;
    }

    .new-members-title{
        padding-bottom: 10px;
    }

    .users-admin-count{
        font-size: 15px;
    }

    .users-table-count{
        display: flex;
        justify-content: space-around;
    }

    .row-retention{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body#admin #admin-header span#admin-header-buttons, body#admin-edit #admin-header span#admin-header-buttons {
        display: -webkit-flex;
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    button#customer-button{
        margin-right: 0px !important;
    }

    .code-container-input{
        display: flex;
        justify-content: space-between;
        border: 1px solid rgba(45,155,243,1);
        border-radius: 5px;
        width: 100%
    }

    .popup-phone-number, .popup-phone-number-es{
        background-color: white;
        padding: 40px 30px;
        z-index: 99;
        position: absolute;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        display:none;
    }

    .title-report{
        font-size: 18px;
    }

    #report-a-bug-admin, #report-a-bug-member {
        position: absolute;
        top: 900px;
        max-width: 500px;
        width: 350px;
    }

    .outside-location p{
        margin-bottom: 10px;
        margin-top: 5px;
        font-weight: 600;
        font-size: 13px;
    }

    #reward-history-container .location-address {
        font-size: 10px;
    }
    #card-history-container .location-address{
        font-size: 10px;
    }
    #visits-history-container .location-address{
        font-size: 10px;
    }
}

/* Iphone X Media Queries */
@media only screen and (min-device-width : 280px) and (max-device-height : 653px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
    body .popup{
        width: 260px;
    }
}