/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/index.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/lib/index.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!../app_dynamite_us/cartridges/app_dynamite_us/cartridge/client/default/scss/booking.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
/* _functions.scss: homebrewed and 3rd party SASS functions */
/*Spinner*/
.spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid black;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  text-align: center;
}

/*Spinner wrapper to allocate the position of the spinner*/
.spinner-wrapper {
  position: absolute;
  top: 30%;
  left: 50%;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
/*Styling for iframe*/
#ab-iframe {
  height: 90vh;
  width: 100%;
  border: 0;
}

/*Wrapper for embedded Appointment Booker*/
.booking-wrapper {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 1400px;
}

/*Media query to adjust iframe style in multiple device*/
/*Laptop or Tablet - i.e. iPad Air*/
@media screen and (max-width: 1024px) {
  /*Change styling atrribute of the iframe*/
  #ab-iframe {
    height: 90vh;
    /*...*/
  }
}
/*Small Tablet i.e. Surface Duo */
@media screen and (max-width: 768px) {
  /*Change styling atrribute of the iframe*/
  #ab-iframe {
    height: 90vh;
    /*...*/
  }
}
/*Mobile i.e. iPhone SE */
@media screen and (max-width: 430px) {
  /*Change styling atrribute of the iframe*/
  #ab-iframe {
    height: 90vh;
  }
}