@font-face {
  font-family: 'MetropolisBlack';
  src: url('../fonts/Metropolis-Black.woff2') format('woff2');
}

@font-face {
  font-family: 'MetropolisBold';
  src: url('../fonts/Metropolis-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'MetropolisMedium';
  src: url('../fonts/Metropolis-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'MetropolisRegular';
  src: url('../fonts/Metropolis-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'MetropolisSemiBold';
  src: url('../fonts/Metropolis-SemiBold.woff2') format('woff2');
}

body {
  background: #f2f2f2;
  font-family: MetropolisRegular;
}

h1 {
  font-family: MetropolisBold;
}

.bold-text {
  font-family: MetropolisBold;
}

.table thead th {
  font-family: MetropolisBold;
}

.card-header .btn-link {
  text-decoration: none;
  text-align: left;
}

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

input.form-control,input.form-control:focus {
  box-shadow: none;
  border-color: #000000;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 -moz-transition: none;
 -webkit-transition: none;
}

.navbar {
  border-bottom: 1px solid #d7d7d7;
}

.nav-logout {
  margin-top: 6px;
}

.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-left: 3em;
  padding-right: 3em;
}

.section-white {
  background-color: #ffffff;
}

.inactive-link {
   pointer-events: none;
   cursor: default;
}

/* Buttons */
.btn-primary {
  color: #fff;
  border-color: #2E8CFF;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  background-color: #2E8CFF;
}

.btn-primary:hover {
  color: #fff;
  border-color: #2E8CFF;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  background-color: #2E8CFF;
}

.btn-primary:visited {
  color: #fff;
  border-color: #2E8CFF;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  background-color: #2E8CFF;
}

.btn-outline-primary {
  color: #000000;
  border-color: #d7d7d7;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  background-color: #fff;
}

.btn-outline-primary:hover {
  color: #000000;
  border-color: #d7d7d7;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  background-color: #fff;
}

.btn-outline-primary:visited {
  color: #000000;
  border-color: #d7d7d7;
  border-width: 1px;
  font-family: MetropolisSemiBold;
  padding-right: 1.75rem;
  padding-left: 1.75rem;
  background-color: #fff;
}

.btn-set-width {
  width: 280px;
}

.connect-google-calendar-button img:focus {
  background: url('../images/btn_google_signin_dark_focus_web.png');
}

.connect-google-calendar-button img:active {
  background: url('../images/btn_google_signin_dark_pressed_web.png');
}

/* Header */
.altschedule_logo {
  font-family: MetropolisMedium;
  font-size: 1.7em;
}

.altschedule_logo_alt {
  background: #21C16A;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

/* Features Table */
.features-table {
  font-size: 1.1em;
  margin-top: 2em;
  padding-left: 3rem;
  padding-right: 3rem;
} 

.features-table-button-col {
  text-align: center;
  padding: 0px;
}

.features-table-button-col-first {
  margin-top: 2em;
  margin-bottom: 1em;  
}

.features-table-left-col {
  background: #ffffff;
  padding: 15px;
  border-top: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
}

.features-table-right-col {
  background: #ffffff;
  padding: 15px;
  border-top: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
}

.features-first-table-left-col {
  border-top-left-radius: 5px;
  border-top-right-radius:  5px;
}

.features-first-table-right-col {
  border-top-right-radius: 0px;
}

.features-last-table-left-col {
  border-bottom-left-radius: 0px;
  border-bottom: none;
}

.features-last-table-right-col {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom: 1px solid #d7d7d7;
}

.features-table-checkmark {
  font-family: MetropolisBold;
  font-size: 1.2em;
}

.navbar-toggler:focus {
  box-shadow: none;
}

@media (min-width: 992px) { 
  .features-table-left-col {
    background: #ffffff;
    padding: 15px;
    border-top: 1px solid #d7d7d7;
    border-left: 1px solid #d7d7d7;
    border-right: none;
  }

  .features-first-table-left-col {
    border-top-right-radius: 0px;
  }

  .features-first-table-right-col {
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
  }

  .features-last-table-left-col {
    border-bottom-left-radius: 5px;
    border-bottom: 1px solid #d7d7d7;
  }

  .features-last-table-right-col {
    border-bottom-left-radius: 0px;
  }

  .features-table-button-col-second {
    margin-top: 2em;
  }
}

/* Wizard Steps Section */
.wizard-step-number {
  color: #21C16B;
  font-family: MetropolisBlack;
  font-size: 3em;
  margin-right: 5px;
}

.wizard-step-text {
  position: relative;
  top: -21px;
  left: 5px;
  font-size: 1.1em;
}

.wizard-step-content {
  border: 1px solid #D7D7D7;
  border-radius: 5px;
}

.wizard-step-text {
  margin-top: 12px;
}

.wizard-btn-width {
  width: 150px;
}

.wizard-steps-container .col:not(:first-child),
.wizard-steps-container .col:not(:last-child) {
  padding-right: 7px;
  padding-left: 7px;
}

.wizard-steps-row {
  width: 100%;
  height: 100%;
}

.wizard-step-text {
  font-size: 0.75em;
}

.wizard-header-text {
  margin-top: -23px;
}

.wizard-next-button, .wizard-next-button:hover, .wizard-next-button:visited {
  width: 150px;
}

.wizard-form-container {
  background: #fff;
  border-radius: 5px;
  padding: 2em;
  border: 1px solid #d7d7d7;
}

.wizard-appt-form-container {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #d7d7d7;
}

.wizard-form-service-container input {
  width:  100%;
}

.wizard-form-label {
  font-family: MetropolisSemiBold;
}

.wizard-form-remove-link {
  margin-right: 10px;
  margin-top: 5px;
}

.wizard-add-service {
  font-family: MetropolisSemiBold;
}

/* Pricing */
.pricing-cost-text {
  font-family: MetropolisBold;
  font-size: 4em;
}

.pricing-button {
  width: 280px;
}

/* Progress Bar */
.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 50%;
  margin: auto;
}

@media (max-width: 992px) { 
  .stepper-wrapper {
    display: none !important;
  }
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 15px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 15px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
  color: #fff;
  font-family: MetropolisBold;
  text-decoration: none;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #21c16a;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #21c16a;
  width: 100%;
  top: 15px;
  left: 50%;
  z-index: 3;
}

.stepper-item.current .step-counter {
  background-color: #21c16a;
}

.stepper-item.current::after {
  position: absolute;
  content: "";
  width: 100%;
  top: 15px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

/* Appointment Slots */
.wizard-appt-slot-header {
  border-bottom: 1px solid #d7d7d7;
  padding: 1em;
  font-family: 'MetropolisSemiBold';
}

.wizard-appt-slot-content {
  padding: 1em;
}

.wizard-appt-slot-content-secondary {
  padding: 1em;
  border-top: 1px solid #d7d7d7;
}

.wizard-appt-slot-select {
  width: 100px;
}

@media (max-width: 600px) { 
  .wizard-appt-slot-select {
    width: 60px;
  }

  .wizard-appt-slot-label-container {
    width: 60px;
  }

  .wizard-appt-slot-remove-slot {
   font-size: 0.8em;
  }

  #id_timezone {
    width: 100%;
  }
}

.wizard-appt-slot-divider {
  margin-left: 5px;
  margin-right: 5px;
}

.wizard-appt-slot-remove-slot {
  margin-left: 10px;
}

.wizard-appt-slot-label-container {
  width: 75px;
  display: inline-block;
}

.wizard-appt-slot-time-container {
  height: 32px;
}