@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import "variables.css";
html,
body {
  margin: 0;
  height: 100%; /* needed for proper layout */
  background-color: var(--clr-base-lt);
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}

* {
  outline: none;
}
body {
  overflow: hidden;
}

.page {
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1 1 auto;
  position: relative; /* need this to position inner content */
  overflow-y: auto;
}
.font-weight-100 {
  font-weight: 100;
}
.font-weight-200 {
  font-weight: 200;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}

.content-wrapper {
  padding: 20px;
}
.font-size-12 {
  font-size: 12px;
}
.font-size-13 {
  font-size: 13px;
}

.font-size-14 {
  font-size: 14px;
}
.font-size-15 {
  font-size: 15px;
}
.font-size-16 {
  font-size: 16px;
}

.font-size-17 {
  font-size: 17px;
}
.font-size-18 {
  font-size: 18px;
}
.font-size-19 {
  font-size: 19px;
}
.font-size-20 {
  font-size: 20px;
}
.bg-light {
  background-color: var(--light);
}
.header-block {
  box-shadow: 0 2px 11px rgb(235 235 235 / 20%);
  background-color: rgb(234, 235, 235);
}
.btn-primary {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.color-blue {
  color: var(--clr-primary);
}
.hrline {
  background-color: var(--input-border);
}
.content-area {
  box-shadow: 0 2px 11px rgb(235 235 235 / 20%);
}
.btn-time-slot {
  border: 1px solid var(--clr-primary);
  color: var(--clr-primary);
}
.btn-time-slot.active,
.btn-time-slot:hover {
  background-color: var(--clr-primary);
  color: var(--light);
}
.slot-booking {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}
.form-user-details {
  padding: 20px 40px;
}
.total-amount {
  background-color: rgb(240, 240, 240);
  padding: 15px;
  box-shadow: 0 2px 11px rgb(235 235 235 / 80%);
}

.c-checkbox input[type="checkbox"]:checked + span {
  background-image: url("/images/check.svg");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center center;
}
.form-control {
  border: 1px solid var(--input-border);
  padding: 0.475rem 0.75rem;
  /* color: var(--clr-base-lt); */
}

.form-control::placeholder {
  color: var(--input-placeholder);
  font-weight: 400px;
}
.form-control::-webkit-input-placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}
.form-control::-moz-placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}

.btn-group-customize .btn-outline-primary {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.btn-group-customize .active {
  color: var(--light);
  background-color: var(--clr-primary);
}
.btn-group-customize .btn-outline-primary:hover {
  color: var(--light);
  background-color: var(--clr-primary);
}
.calendar-block {
  border: 1px solid var(--input-border);
  border-radius: 4px;
}
.back-btn {
  border-right: 1px solid var(--input-border);
  padding: 6px;
}
.next-btn {
  border-left: 1px solid var(--input-border);
}
.appointment-summary {
  max-width: 400px;
  width: 100%;
}
.summary-inner {
  border: 1px solid var(--input-border);
  border-radius: 6px;
}
.block-content {
  padding: 12px 9px;
  border-bottom: 1px solid var(--input-border);
}
.block-content .h6 {
  margin-bottom: 0px;
}
.confirm-booking {
  padding: 5px 30px;
  font-size: 20px;
  margin-top: 40px;
}
.checkbox .fa-check {
  flex: 0 0 20px;
}
.flatpickr .form-control[readonly] {
  background-color: transparent;
}
.flatpickr .form-control[readonly][disabled] {
  background-color: #e9ecef;
}
.form-validate {
}
@media (max-width: 768px) {
  .form-user-details {
    padding: 20px 10px;
  }
}
.footer-section {
  font-size: 12px;
  color: var(--input-placeholder);
}
.footer-section a {
  text-decoration: none;
  color: var(--input-placeholder);
}
.footer-section a:hover {
  color: var(--clr-primary);
}
.header a {
  text-decoration: none;
  font-size: 26px;
  font-weight: 500;
}

.header .virtual {
  color: var(--clr-primary);
}

.header .clinic {
  color: #212529;
}
.link-web
{
  color: var(--clr-primary);
}
.mh-100
{
  min-height: 100%;
}
.stripe-card-element
{
  border:1px solid var(--input-border);
  border-radius: 4px;
  
}