/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

html, body{
  height: 100% !important;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-y: hidden;
}

body{
  width: 100% !important;
  background: #242526;
}

/* ACTION BARS */

table.dataTable thead .sorting {
  background-image: url("");
}

main{
  position: relative;
}

.top_action_bar{
  /*  background:#ffffffb8; */
  height:10%;
  position: fixed;
  z-index:10;
  padding: 0px;
  display: flex;
  width: 100%;
  align-items: center;
  /* box-shadow: 0px 1px 3px 1px #cfcfcf; */
}

.back_home_btn{
  height: 50px;
  padding:8px;
}

.top_action_bar_default_btn{
  padding: 0px;
  text-align: center;
  align-items: center;
  display: flex;
  width: 15%;
}

.text_action_bar{
  font-size: calc(16px + 0.4vw);
  font-weight: 400;
  color: #292929;
  margin: 0;
}

/* CAROUSELS */
.carousel-item{
  text-align: center;
}

.carousel-item div{
  min-height: 100%;
  background-position:top;
  background-repeat: no-repeat;
  background-size: cover;
}


/* TIME RANGES */
.selected_time_range_btn{
  border: 2px solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #c1c1c1;
  border-radius: 10px;
  background: #e3c2a0;
}

.selected_time_range_btn label{
  color: white;
}

.time_range_btn{
  border: 1px solid #a29c9c;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #c1c1c1;
  border-radius: 10px;
  background: white;
}

.time_range_btn label{
  color: #242526;
}

.main_text_color {
  color: #242526;
}

.sel_custom {
  background: transparent;
  background-image: url(/img/arrows_select.png);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
/*  -webkit-appearance: none;*/
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  border-radius: 0px;
}


/* ANIME */

h1.ml8 {
  font-weight: 900;
  font-size: 4.5em;
  color: #fff;
  width: 3em;
  height: 3em;
}

.ml8 .letters-container {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 1em;
  text-align: center;
}

.ml8 .letters {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 0.7em;
  right: -0.12em;
  top: -0.2em;
}

.ml8 .bang {
  font-size: 1.4em;
  top: auto;
  left: -0.06em;
}

.ml8 .circle {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.ml8 .circle-white {
  width: 3em;
  height: 3em;
  border: 2px dashed white;
  border-radius: 2em;
}

.ml8 .circle-dark {
  width: 2.2em;
  height: 2.2em;
  background-color: #4f7b86;
  border-radius: 3em;
  z-index: 1;
}

.ml8 .circle-dark-dashed {
  border-radius: 2.4em;
  background-color: transparent;
  border: 2px dashed #4f7b86;
  width: 2.3em;
  height: 2.3em;
}

.ml14 {
  font-weight: 200;
  font-size: 3.2em;
}

.ml14 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml14 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #fff;
  transform-origin: 100% 100%;
  bottom: 0;
}

.ml14 .letter {
  display: inline-block;
  line-height: 1em;
  color: white;
}

.haptic-swinger{
  -webkit-animation: haptic-swing 1.5s ease-in-out infinite alternate;
  -moz-animation: haptic-swing 1.5s ease-in-out infinite alternate;
  animation: haptic-swing 1.5s ease-in-out infinite alternate;
}

@keyframes haptic-swing {
  from {
    text-shadow: none;
  }
  to {
    text-shadow: 0 0 8px #fff;
  }
}
/* HEADER */
.salon_logo{
  max-height: 100%;
  min-height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 15px;
}

.salon_logo img{
  max-width: 100%;
  max-height: 100%;
  width:auto;
  height: auto;
  margin-right: auto;
}

/* PAGE SECTION */
#backgrounds_carousel{
  width: 100%;
  height: 40%;
  z-index: 50;
}

#backgrounds_carousel .carousel-inner, #backgrounds_carousel .carousel-item{
  height: 100%;
}

#backgrounds_carousel .carousel-item img{
  max-height: 100%;
}

.left_body_side{
  flex: 1;
  overflow: auto;
  width: 60%;
  position: relative;
  z-index: 150;
  display: flex;
  gap: 10px;
}

.salon_info_container{
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  color: white;
}

.salon_info{
  height: fit-content;
  margin: 0 10px;
  color: white;
  display: flex;
  gap: 10px;
}

.modal .salon_info{
  color: black;
  align-items: baseline;
  gap: 20px;
}

.salon_info i{
  display: flex;
  align-items: center;
}

.more_info{
  max-width: -webkit-fill-available;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BOXES */
.agend_box_container{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: auto;
  position: absolute;
  top: 0;
  right: 0;
}

@media (min-width: 992px){
  .agend_box_container{
    width: 40%;
  }
}

.agend_box{
  height: 100%;
  width: 98%;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -100%;
  z-index: 200;
  padding-bottom: 20px;
  display: none;
}

.internal_box{
  height: 100%;
  overflow: hidden;
  box-shadow: 0px 0px 10px 2px #00000087;
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
}

.agend_box_body{
  width: 100%;
  padding: 15px;
  flex: 1;
  overflow: hidden;
}

.agend_box_header{
  width: 100%;
  z-index: 2;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-shadow: #787878 -2px 2px 10px -1px;
  position: relative;
}

.agend_box_cover{
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 250;
}

.box_buttons_container{
  flex: 0;
  padding: 13px;
  display: flex;
  gap: 5px;
}

/* BOX BUTTONS */
.proceed_button, .go_back_button{
  height: 100%;
  width: 50%;
  padding: 5px;
  background: white;
  border: solid 1px #dae3db;
  border-radius: 5px;
  box-shadow: 0px 0px 0 2px white;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.proceed_button label, .go_back_button label{
  color: #545454;
  text-transform: uppercase;
  /* font-size: calc(16px + 0.4vw); */
}

.proceed_button img, .go_back_button img{
  max-width: 60px;
  height: auto;
  padding: 0 10px;
}

.proceed_button img{
  margin-left: auto;
}

.proceed_button label{
  text-align: left;
  margin: auto 0 auto 10px;
}

.go_back_button img{
  rotate: 180deg;
}

.go_back_button label{
  text-align: right;
  margin: auto 10px auto 0;
}

/* MODALS */

@media (max-width: 991px) {
  .close{
    font-size: 6rem;
  }
}

/* MODAL SALON INFO */
#salon_info_modal .modal-content{
  border-radius: 25px;
  padding: 15px;
}

/* MODAL CUSTOMER DATA */
.customer_data_active_input{
  opacity: 1;
  background: white;
}

.customer_data_active_button{
  opacity: 1;
  background: #a2bfa5;
}

.customer_data_active_select{
  opacity: 1;
  background: white;
}

.customer_data_not_active_input{
  opacity: 0.4;
  background: #c7c7c7;
  pointer-events: none;
}

.customer_data_not_active_button{
  opacity: 0.4;
  background: #c7c7c7;
  pointer-events: none;
}

.customer_data_not_active_select{
  opacity: 0.4;
  background: #c7c7c7;
  pointer-events: none;
}

/* NO SELECT */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
  supported by Chrome and Opera */
}

/* FOOTER */

.page_footer_info_element label{
  z-index: 1;
}

.round-button{
  width: 10%;
  padding-top: 10%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: solid white 2px;
  color: white;
  position: relative;
}

.round-button i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* SERVICES */

.booking_service.selected{
  background-color: #f0f9f1 !important;
}

input[type='checkbox'].mobile{
  -webkit-appearance:none;
  width:50px;
  height:50px;
  background:white;
  border-radius:5px;
  border:2px solid #555;
}
input[type='checkbox'].mobile:checked {
  background: #a2bfa5;
}

/* ROTATE */
.rotate-90{
  transform: rotate(90deg);
}

.rotate-180{
  transform: rotate(180deg);
}

.rotate-270{
  transform: rotate(270deg);
}

/* BOOKING SERVICES AND CATEGORIES */
#booking_categories_list{
  width: 100%;
  max-height: 100px;
  display: flex;
  overflow-x: auto;
  box-sizing: initial;
}

@media (max-width: 991px) {
  #booking_categories_list{
    max-height: 20%;
  }
}

.title_text, .description_text{
  color: var(--text_color);
}

.title_text{
  font-weight: 400;
}

.description_text{
  font-weight: 400;
}

.booking_category_button{
  flex: 0 0 33%;
}

.booking_category_name{
  text-transform: uppercase
}

.booking_category_button:not(.selected){
  opacity: 0.4;
}

.booking_service{
  display: flex;
  min-height: 50px;
  padding: 3px;
  border: 0px;
  border-bottom: 1px solid #b4b4b4;
  text-transform: uppercase;
  color: var(--text_light_color);
}

#smart_booking_search_bar_input{
  border: 1px solid rgb(239, 239, 239);
  border-radius: 5px;
  box-shadow: rgb(214, 224, 215) 0px 0px 1px 1px;
  width: 100%;
  margin: 0px;
  font-weight: 300;
  color: rgb(180, 180, 180);
  padding: 5px;
}

/* FREQUENT SERVICES */
.frequent_services_section{
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  padding: 15px 0;
}

.frequent_services_container{
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.frequent_service_button {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  border-radius: 50px;
  border: 0;
  background-color: #deddd8;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.frequent_service_button.selected {
  background-color: #acdbc6;
}

/* FROM BLADE */
.row{
  margin-left: 0;
  margin-right: 0;
}

.dropdown-item:hover {
  background-color: #5A6268 !important;
}

.dropright .dropdown-menu{
  transform: translate3d(90px, 0px, 0px) !important;
}

.dropright .dropdown-menu.mobile{
  transform: translate3d(140px, 0px, 0px) !important;
}

.dropright .dropdown-toggle::after{
  color: white;
}

.dropright .dropdown-toggle.mobile::after{
  color: white;
  font-size: 2.2rem;
}

#dropdown_reg_form_flags img.mobile{
  height: 50px !important;
}

.dropdown-menu img.mobile{
  height: 40px !important;
}

.btn-secondary{
  background-color: transparent;
  border-color: transparent;
}

/* CAROUSEL WITH MULTIPLE CARD PER SLIDE AT ONCE */
/*
CC 2.0 License Iatek LLC 2018
Attribution required
*/
@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md  if col-md-4*/
  .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.3333%;  /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
}

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm  if col-sm-6*/
  .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -50%;  /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
}
@media (min-width: 576px) {
  
  .carousel-item {
    margin-right: 0;
  }
  
  /* show 2 items */
  .carousel-inner .active + .carousel-item {
    display: block;
  }
  
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
    transition: none;
  }
  
  .carousel-inner .carousel-item-next {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  
  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  } 
  
  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
  
}

/*MD*/
@media (min-width: 768px) {
  
  /* show 3rd of 3 item slide */
  .carousel-inner .active + .carousel-item + .carousel-item {
    display: block;
  }
  
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }
  
  .carousel-inner .carousel-item-next {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  
  /* left or forward direction */
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  
  /* right or prev direction */
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
  
}

/*LG */
@media (min-width: 991px) {
  /* show 4th item */
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
    display: block;
  }
  
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
    transition: none;
  }
  
  /* Show 5th slide on lg if col-lg-3 */
  .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;  /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
  /* left or forward direction */
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  
  /* right or prev direction //t - previous slide direction last item animation fix */
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }

}