body {
    background-color: whitesmoke;
}



.btn-success {
     background-color: var(--booking-page-blue);
    border-color: var(--booking-page-blue);
}

.btn-success:hover {
     background-color: var(--booking-page-blue);
    box-shadow: var(--hover-box-shadow);
    border-color: var(--booking-page-blue);
}

/* #saasappoint-main-menu-collapse a {
    color: black !important;
} */

#saasappoint-main-menu-collapse {
    background-color: white !important;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    padding: 0;
}

@media (min-width: 992px) {
    #saasappoint-main-menu-collapse .navbar-brand {
        width: 100px;
    }
}
@media (max-width: 992px) {
    #saasappoint-main-menu-collapse .navbar-brand {
        margin-right: 0;
    }
    img.saasappoint-sacompanylogo {
        max-width: 50px; 
        max-height: 50px;
    }
}

#saasappoint-main-menu-collapse > a.navbar-brand {
    padding: 0;
}

#saasappoint-main-menu-collapse a.saasappoint_header_book_now_btn {
    color: white !important;
}

.saasappoint-banner-overlay {
    /*min-height: 100vh;*/
    min-height: 75vh;
    display: flex;
    background-color: whitesmoke;
    color: black;
    /*border-bottom: 2px solid white;*/
    border-bottom: none;
    margin: 0 1vw;
    font-size: 1.4em;
    /*margin-top:10%!important;
    margin-bottom: -10%;*/
    margin-top:5%!important;
    margin-bottom: -3%;

}

.saasappoint-banner-overlay > .container {
    margin: auto auto;
}

.saasappoint_header_book_now_btn {
     background-color: var(--booking-page-blue);
}

#saasappoint_search_business_btn {
    background-color: #dc793e!important;
    border-color: #dc793e!important;
}

#saasappoint-sasa-navbarresponsive-toggler-icon {
    background-color: var(--booking-page-blue); 
    border: 1px solid #fff;
}

#saasappoint_reset_business_btn {
    /*background-color: white !important;*/
    background-color: #007cb7!important;
}

a#saasappoint_reset_business_btn {
  font-size: 1em;
}

.bookup-categories .list-group-item:first-child {
  background-color: #007cb7!important;
  color:#fff;
  font-size: 1.5em;
}

.saasappoint-business-card {
  border-radius: 0.5rem;
  /*box-shadow: rgb(117, 114, 114) 2px 2px 5px 0px;*/
  box-shadow: rgb(0 0 0 / 25%) 0px 0px 15px 0px;
  border: 0px!important;
}

.saasappoint-business-card:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}



.saasappoint_set_btype_filter:hover {
    background-color: #007cb7 !important;
    border-radius: 0.75rem;
}

#saasappoint_reset_business_btn a:hover, 
#saasappoint-main-menu-collapse .saasappoint_set_btype_filter a:hover {
     background-color: var(--booking-page-blue) !important;
    color: white !important;
}

.saasappoint_set_btype_filter.btype_active {
    background-color: var(--main-buttons_background-secondary);
    color: white !important;
    border-radius: 0.75rem;
}

#saasappoint-main-menu-collapse .saasappoint_set_btype_filter.btype_active a {
     background-color: var(--booking-page-blue) !important;
    color: white !important;
}

.saasappoint-footer-bg {
    background-color: white !important;
}

.saasappoint-footer-bg p {
    color: black !important;
}

/* @media (max-width:960px) {
.saasappoint-paddingtb60 {
    padding-top: 3vh;    
    max-width: 98vw;
}
} */

@media (min-width:960px) {
.saasappoint-paddingtb60 {
    padding-top: 1vh;    
    padding-left: 5vh;
    padding-right: 5vh;
}
}

/*
.saasappoint-paddingtb60 > .mx-5 {
    margin-right: 1rem !important;
} */

#saasappoint_get_all_business_list {
    min-height: 30vh;
}


.saasappoint-login-main {
    height: 100vh;
    background-color: whitesmoke !important;
    padding-top: 3rem !important;
}

.saasappoint-login-main > .row {
    height: 100%;
    margin: auto auto;
    background-color: whitesmoke;
}

.saasappoint-login-form-block {
    margin-top: auto;
    margin-bottom: auto;
    background-color: white !important;
}

.saasappoint-login-form-block > h2, .saasappoint-register-right-block > h2 {
    color: var(--booking-page-blue) !important;
}

.saasappoint-login-form-block > h2:after, #saasappoint_login_btn, 
#saasappoint_customer_register_btn, 
#saasappoint_admin_register_btn,
.saasappoint-register-right-block > h2:after {
     background-color: var(--booking-page-blue) !important;
}

#saasappoint_login_btn:hover, 
#saasappoint_customer_register_btn:hover,
#saasappoint_admin_register_btn:hover {
     background-color: var(--booking-page-blue);
    box-shadow: var(--hover-box-shadow)
}

.saasappoint-business-card {
    border-radius: 15px;
}

.saasappoint-register-main {
    height: 100vh;
    background-color: whitesmoke !important;
}

.saasappoint-register-container {
    padding-top: 3rem;
    height: 100%;
    min-height: 100%;
    background-color: whitesmoke !important;
}

#saasappoint_customer_register_form {
    height: 100%;
    background-color: whitesmoke;
}

#saasappoint_admin_register_form {
    min-height: 100%;
    background-color: whitesmoke;
}

#saasappoint_customer_register_form  > .row, 
#saasappoint_admin_register_form > .row {
    min-height: 100%;
    margin: auto auto;
    background-color: whitesmoke;
}

#saasappoint_customer_register_form .saasappoint-register-right-block {
    margin: auto;
    background-color: white !important;
}

#saasappoint_admin_register_form .saasappoint-register-right-block {
    background-color: white !important;
}

.saasappoint-business-card i.fa-user, 
.saasappoint-business-card i.fa-envelope, 
.saasappoint-business-card i.fa-phone, 
.saasappoint-business-card i.fa-map-marker {
    color: var(--booking-page-blue) !important;
}

.text-sacustom {
    color: var(--booking-page-blue) !important;
}

#saasappoint_forgot_password_btn, #saasappoint_forgot_password_btn:hover {
     background-color: var(--booking-page-blue) !important;
}

#saasappoint_forgot_password_btn:hover {
    box-shadow: var(--hover-box-shadow) !important;
}


.LeftMenuBox {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: justify;
    justify-content: space-between;
    flex-shrink: 0;
}


.LeftMainMenu {
    display: flex;
    -moz-box-align: center;
    align-items: center;
}

.PopoverWrapper {
    position: relative;
    cursor: pointer;
}

.PopoverWrapper .popover-handler {
    display: inline-block;
    cursor: pointer;
}

.popover-content::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    top: -8px;
    left: 15px;
    box-shadow: rgba(142, 142, 142, 0.14) -4px -4px 8px -3px;
    pointer-events: none;
    border-style: solid;
    border-width: 0px 8px 9px;
    border-color: transparent transparent rgb(255, 255, 255);
}

.popover-content::before {
    left: auto;
    right: 15px;
}

.popover-content {
    left: auto;
    right: 0px;
    top: calc(100% + 15px);
    display: none;
    min-width: 200px;
    position: absolute;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(142, 142, 142, 0.14) 0px 3px 20px;
    z-index: 99;
    padding: 20px 0px;
    border-radius: 10px;
}

.popover-wrapper .popover-content .menu-item a {
    font-size: 15px;
    /*font-weight: 700;*/
    line-height: 1.2em;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 6px;
    transition: all 0.15s ease-in-out 0s;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px;
    padding: 12px 30px;
}

.popover-wrapper .popover-content .menu-item a:last-child {
    border-bottom: 0px;
}

.popover-handler:hover .popover-content {
    display: block;
    top: calc(100% + 0px);
}

.LeftSelectedItem {
    width: auto;
    height: 38px;
    display: flex;
    -moz-box-align: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid var(--booking-page-blue);
    padding: 0px 15px;
    border-radius: 6px;
    outline: currentcolor none 0px;
    min-width: 150px;
    cursor: pointer;
}

.LeftSelectedItem span:first-child {
    margin-right: auto;
}

.LeftSelectedItem span {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    /* font-family: "Lato", sans-serif; */
    font-size: 15px;
    font-weight: 700;
    color: var(--booking-page-blue);
    text-decoration: none;
}

.LeftMenuIcon {
    margin-right: 7px;
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: center;
    justify-content: center;
    min-width: 16px;
}

.LeftArrow {
    width: 12px;
    margin-left: 16px;
}

.gym {
    background-image: url(/images/gym-image.png);
}

.hair {
    background-image: url(/images/hair-image.png);
}

#sa_infobar .sa_infobar_text {
    text-transform: none!important;
    
}
#sa_infobar {
	bottom: 0!important;
	top: unset!important;
}

.saasappoint_reset_password_btn {
	 background-color: var(--booking-page-blue) !important;
}

/*new frontend*/

body {
    /* font-family: 'lato', sans-serif !important; */
    /* font-family: 'Roboto Flex', sans-serif!important; */
    font-family: 'Ubuntu', sans-serif!important;

    font-weight: 400 !important;
}

a:hover { 

text-decoration: none;
}

/*
.saasappoint-banner-overlay > .container {
    margin-bottom: 8%;
}
*/

.saasappoint_welcome_content p {margin-top: 1rem;}

.bookup_custom_footer_content p {margin-top: 1rem;}

.saasappoint-bsearch-result-heading h3 {
text-shadow:none;
font-weight: 500;
}

#saasappoint-main-menu-collapse {
    background-color: whitesmoke !important;
}

.saasappoint-header-style {
    background: whitesmoke !important;
}

.saasappoint-heading-border {
/*
    background: #58adde none repeat scroll 0 0!important;
    
    */
    background:none!important;
}

.card {
    /*border: 3px solid #dc793e!important;*/
   /* border: 3px solid rgba(88,173,222,.225)!important; */
}

.saasappoint-business-card .card-body {
padding: 0.8em!important;

}


.card-body .row {

  height:100%;
}

.card-description {
  /*border-top:1px solid #000;*/
  border-top: 1px solid rgba(0, 0, 0, 0.15);
   height: auto;

}

.img-responsive {
  max-height:95%!important;
}

.card-image {
  height: 40%;
}


@media (min-width: 992px) {
    .saasappoint-bsearch-result-heading .card {
    
        width: 60%!important;
    }}
    .saasappoint-bsearch-result-heading .card {
        border: 3px solid rgb(81, 174, 229) !important;
        
    }

 .saasappoint-toggle-switch-input:checked + .saasappoint-toggle-switch-slider {
         background-color: var(--booking-page-blue)!important;
    }
/*new frontend*/


/* call me back button */
.callme-container {
    position:fixed;
    left:10px;
    bottom:120px;
    z-index:1000;
}


.callme-container .callme-button {
    height: 42px;
    width: 42px;
    border:none;
    /* background-color: var(--main-buttons_background-secondary); */
    background-color: #324773;
    border-radius: 42px;        /*Transform the square into rectangle, sync that value with the width/height*/
    transition: all 300ms;      /*Animation to close the button (circle)*/
    box-shadow: 3px 3px 5px rgb(34 47 60);
    cursor:pointer;
}

.callme-container .callme-button span {
    font-size: 1.5rem;
    color: white;
    position: absolute;
    left: 12px;
    top: 10px;
    line-height: 20px;
}


.callme-container .callme-button:hover {
    transition: all 200ms;     
    width:147px;                                            
    /* border-top-right-radius: 5px;                            */
    /* border-bottom-right-radius: 5px;                         */
}

.callme-container .callme-button:active {
    transition: all 200ms;     
    background-color: #58adde;
    box-shadow: none;
    /* transform: translateY(4px); */
  }

/*
    Long text appears slowly with an animation. That code prepare the animation by hidding the text.
    The use of display is not there because it does not work well with CSS3 animation.
*/
.callme-container .callme-button .callme-opened {
    transition: opacity 1000ms; /*Only the text fadein/fadeout is animated*/
    opacity:0;                /*By default we do not display the text, we want the text to fade in*/
    color:white;
    white-space: nowrap;      
    font-size: 0;             /*Set to 0 to not have overflow on the right of the browser*/
    width: 0;                 /*Set to 0 to not have overflow on the right of the browser*/
    margin:0;                 /*Set to 0 to not have overflow on the right of the browser*/
    white-space: normal;
    word-wrap: break-word;
}

/*
    Animation to have a text that appear progressively. We need to play with a delay
    on the width and the font-size to not have the browser have the text appears on the right
    side of the browser view port. This has the side-effect of having an horizontal bar.
*/
.callme-container .callme-button .callme-opened.show-long-text{
  transition: opacity 700ms,
              width 1ms linear;       /*two thirds of the animation on the container width*/
              /* font-size 1ms linear;   two thirds of the animation on the container width */
  opacity:1;
  margin-top: -10px;                          /*Center the position vertically*/
  /*margin-left: 65px;                        /*Center between the + and the right end side*/
  font-size: 0.8rem;                          /*Text size, cannot be defined initially without moving the scrollbar*/
  width: auto;                              /*Required to be set with a delay (see animation) to not have scrollbar. Delay is to wait container to size up*/
  text-align:center;
}
/* ----------------- */

/* ---- bookup modal css ---- */
.modal-dialog {
    -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}
.bookup-modal-header {
    text-align: center;
    margin: -1rem 1rem 1rem;
    padding: 1.5rem;
    border: none;
    border-radius: 3px;
    background-color: var(--main-buttons_background-secondary);
    -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

.bookup-modal-title {
    width: 100%;
}

.bookup-modal-body {
    color: var(--main-buttons_background-secondary);
}
.bookup-modal-body .form-control {
    border-top: 0;
    border-right: 0;
    border-left: 0;
}
/* -------------------------- */

#saasappoint_get_business_map {
    height: 500px;
}
/*new frontend*/


/* parallax new version */

.parallax {

position: relative;
width:98%;
height: 100%;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;

}


.parallax img {display:none;}

@media (min-width: 992px) {
 
.parallax img {

display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;

}

}


.bookup-heading {

    margin-top: -15%!important;
}

@media (max-width: 1368px) {
    .saasappoint-business-card {
    max-width: 100% !important;
    min-width: 70% !important;
}
}
/* parallax new version */


/* follow me button */
.followme-container {
    position:fixed;
    left:10px;
    bottom:170px;
    z-index:1000;
}


.followme-container .followme-button {
    height: 42px;
    width: 42px;
    border:none;
    /* background-color: var(--main-buttons_background-secondary); */
    background-color: #324773;
    border-radius: 42px;        /*Transform the square into rectangle, sync that value with the width/height*/
    transition: all 300ms;      /*Animation to close the button (circle)*/
    box-shadow: 3px 3px 5px rgb(34 47 60);
    cursor:pointer;
}

.followme-container .followme-button span {
    font-size: 1.5rem;
    color: white;
    position: absolute;
    left: 12px;
    top: 10px;
    line-height: 20px;
}


.followme-container .followme-button:hover {
    transition: all 200ms;     
    width:123px;                                            
    /* border-top-right-radius: 5px;                            */
    /* border-bottom-right-radius: 5px;                         */
}

.followme-container .followme-button:active {
    transition: all 200ms;     
    background-color: #58adde;
    box-shadow: none;
    /* transform: translateY(4px); */
  }

/*
    Long text appears slowly with an animation. That code prepare the animation by hidding the text.
    The use of display is not there because it does not work well with CSS3 animation.
*/
.followme-container .followme-button .followme-opened {
    transition: opacity 1000ms; /*Only the text fadein/fadeout is animated*/
    opacity:0;                /*By default we do not display the text, we want the text to fade in*/
    color:white;
    white-space: nowrap;      
    font-size: 0;             /*Set to 0 to not have overflow on the right of the browser*/
    width: 0;                 /*Set to 0 to not have overflow on the right of the browser*/
    margin:0;                 /*Set to 0 to not have overflow on the right of the browser*/
}

/*
    Animation to have a text that appear progressively. We need to play with a delay
    on the width and the font-size to not have the browser have the text appears on the right
    side of the browser view port. This has the side-effect of having an horizontal bar.
*/
.followme-container .followme-button .followme-opened.show-long-text{
  transition: opacity 700ms,
              width 1ms linear;       /*two thirds of the animation on the container width*/
              /* font-size 1ms linear;   two thirds of the animation on the container width */
  opacity:1;
  margin-top: 2px;                          /*Center the position vertically*/
  /*margin-left: 65px;                        /*Center between the + and the right end side*/
  font-size: 1.2rem;                          /*Text size, cannot be defined initially without moving the scrollbar*/
  width: auto;                              /*Required to be set with a delay (see animation) to not have scrollbar. Delay is to wait container to size up*/
  text-align:center;
}
/* ----------------- */


@media (max-width:960px) {
.navbar-collapse {
    background: rgba(88, 173, 222, 0.1);
    }
}

.category-button {

  box-shadow: rgb(0 0 0 / 25%) 0px 0px 8px 0px;

}

.footer-bg {
background-color: #006291 !important;
}

.footer-bg.edge.top-left {
  position: relative;
}

.footer-bg.edge.top-left::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 310' fill='rgb(0,98,145)' fill-opacity='1'%3E%3Cpolygon points='0,310 100,310 100,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 310px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: -310px;
}


.brand-facebook {
  margin-right: 1em;
}



.apple-popup {
    overflow: visible!important;
    bottom: 5%!important;
    top: unset!important;
    width: 560px!important;
    height: 110px!important;
    border-radius: 20px!important;
    padding:14px!important;
}


@media (max-width:768px) {
    .apple-popup {
    width:100%!important;
    margin:unset!important;
    left:unset!important;
    right:unset!important;
    }
}


.apple-popup:after {
    content: " ";
   /* border-top: 11px solid #ffffff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;*/
     border-top: 30px solid #ffffff;
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    position: relative;
   /* top: 48px;*/
   top:20px;
}

.apple-popup .sa-icon, .sa-button-container {
display:none!important;
    
}
.apple-popup .text-muted {
    text-align:left;
    font-size: 1em;

}

.apple-popup .img-left {
    margin-right:5px;
}

#togglePassword {
    position: absolute;
    right: 35px;
    top: 40px;
    /* transform: translateY(-50%); */
    cursor: pointer;
}

#togglePassword::before {
    display: none;
  }

.bookup-button {
    background: var(--booking-page-blue);
    border: 1px solid var(--booking-page-blue);
  }
  
  .bookup-button:hover {
    background-color: var(--booking-page-blue);
    box-shadow: var(--hover-button-box-shadow);
    border: 1px solid var(--booking-page-blue);
  }

  .navigation .nav-link .fa, .navigation .fa {
    font-weight: 500!important;
  }