.PaperCalendar__day--disabled {
    border-radius: 0;
    opacity: 0.7;
    color: #191818;
    cursor: default;
    background-color: #ff1a0090;
    pointer-events: none;
    cursor: none !important;
}

.PaperCalendar__day {
    flex: 1 0 auto;
    width: 14.28%;
    height: 16.66%;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    line-height: 0;
    justify-content: center;
    border: 1px solid #fffefe;
    cursor: pointer;
    position: relative;
}
.PaperCalendar__day--default {
    background-color: lightgreen;
}

.PaperCalendar__day--active {
    background-color: #13ff00ad;
    color: #000;
    border-radius: 3px;
    position: relative;
    z-index: 2;
}

.PaperCalendar__hover .PaperCalendar__day.PaperCalendar__day--default:hover {
    background-color: #13ff00ad; 
    z-index: 1;
}

.PaperCalendar__hover .PaperCalendar__day.PaperCalendar__day--outsidemonth:not(.PaperCalendar__day--active):hover {
    background-color: #13ff00ad;
    opacity: 1;
}

.PaperCalendar__day--outsidemonth {
    opacity: 0.7;
    border-radius: 0;
    color: #000;
}

.PaperCalendar__day--today::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #ffffff;
    border-radius: 100%;
    width: 9px;
    height: 9px;
}

.PaperCalendar__dayLabel {
    flex: 1 1 auto;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    padding-top: 4px;
    color: #000;
}

.Appointment__time-picker-item {
    overflow: hidden;
    width: 100%;
    flex-direction: row;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: space-between;
    border: 1px solid white;
}

.Appointment__time-picker-item--disabled .BtnV2 {
    background-color: #ff5845c2 !important;
    opacity: 0.7 !important;
}

.Appointment__time-picker .BtnV2.Appointment__time-button {
    margin: 0;
    box-shadow: none;
    font-size: 14px;
    position: relative;
    transform: none;
    border: 0;
    height: 40px;
    color: #333;
    display: flex;
    opacity: 1;
    padding: 0;
    background-color: lightgreen;
}

.Appointment__time-picker .BtnV2.Appointment__time-button:not(.BtnV2--solid):hover {
    background-color: #13ff00ad;
    box-shadow: none;
    transform: none;
    border: 0;
    z-index: 2;
}

.Pagination {
    bottom: 8% !important;
}

.LiveField__input--confirm {
    background-color: #FFD700 !important;
    font-size: 22px !important;
    color: #000000 !important;
}

.LiveField--error .LiveField__error {
    font-size: 15px !important;
}

div.Appointment__overlay {
    background-color: #ffffff99;
}

div.Appointment__overlay div.sk-fading-circle {
    border-radius: 50%;
    transform: scale(3);
}

/* 1) turn every choice box into a flex‑column */
.Choices__choice {
/*  display: flex; */
/*  flex-direction: column; */
/*  align-items: center;    */    /* center the image and text */
/*  height: 100%;               /* make them all the same height */
/*  padding: 1rem;              /* whatever gutter you like */
/*  box-sizing: border-box; */    /* so padding doesn’t break your layout */
}

/* 2) let the image area grow to fill the space */
.Choices__imagebox {
/*  flex-grow: 1;               /* takes up all the available space */
/*  display: flex;              
/*  justify-content: center; */
}

/* 3) shove the label to the bottom of the flex‑column */
.Choices__label {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 90%;
  text-align: center;
  /* optional spacing from bottom edge */
  padding-bottom: 8px;
  padding-right: 0px !important;
}

/* hide the radio “dot” in every choice */
.Choices__choice > i.MaterialIcon {
/*  display: none !important; */
}

.Choices img {
    width: 100%;
    margin-bottom: 12px;
    pointer-events: none;
}