/* Open Sans @font-face kit */
/* BEGIN Light */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,500&display=swap");

.header-wrapper {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  justify-content: space-between;
}

.buttonprop {
  display: block !important;
}

iframe#WebResource_TestDHP {
  height: 500px;
  width: 900px;
}

.listenaudio {
  position: absolute;
  height: 0;
  bottom: -13px;
  right: 23px;
  z-index: 2;
}

.for-exitStyle {
  display: flex;
}

.disabled {
  opacity: 0.8;
}

.wrapper-body {
  margin-top: -41px;
  min-height: calc(100vh - 465px);
  /* Chitra adding this for footer placement */
}

.header-codesnip {
  display: block;
  font-size: 0;
  left: 0;
  bottom: -26px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05), 0 3px 4px rgba(0, 0, 0, 0.11);
  color: #ffffff;
  margin-left: -8px;
}

@media (max-width: 647px) {
  .header-wrapper {
    padding: 10px;
  }

  .header-codesnip {
    width: 70px !important;
    height: 70px !important;
    margin-left: -8px;
    margin-top: 8px;
    margin-bottom: 9px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05), 0 3px 4px rgba(0, 0, 0, 0.11);
    color: #ffffff;
  }

  .for-exitStyle h1 {
    margin: 0 0 14px 20px !important;
  }

  .wrapper-body {
    margin-top: -41px;
    min-height: calc(100vh - 460px);

  }

}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@font-face {
  font-family: GDS-Logo;
  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"),
    local("Helvetica");
}


@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

a {
  border: 2px solid transparent;
}

a:hover {
  text-decoration: none !important;
}

/* rmc */
.view-grid td a,
.view-grid td {
  word-break: break-word !important;
}

* {
  word-break: keep-all;
}

.BookingCalendar-mask {
  position: relative;
  overflow: hidden;
  height: 279px;
  border-bottom: 1px solid #dee0e2;
}

table.BookingCalendar-dates {
  width: 100%;
  font-size: 19px;
  border-width: 0 1px;
  border-style: solid;
  border-color: #dee0e2;
  border-collapse: collapse;
  background: url("lbl_unavailable_tile.png");
}

table.BookingCalendar-dates th,
table.BookingCalendar-dates td {
  width: 14.28571%;
}

table.BookingCalendar-dates thead th {
  padding: 3px 0 0;
  font-weight: bold;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  background: #f8f8f8;
  border-bottom: 2px solid #bfc1c3;
}

table.BookingCalendar-dates tbody td {
  padding: 0;
  border-color: #dee0e2;
  border-style: solid;
  border-width: 0 0 1px 1px;
}

table.BookingCalendar-dates td:last-child>div {
  border-right: 1px solid #dee0e2;
}

table.BookingCalendar-dates tbody tr:last-child td {
  border-bottom: none;
}

a.BookingCalendar-dateLink,
a.BookingCalendar-dateLink:visited {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: #0b0c0c;
  text-decoration: none;
}

a.BookingCalendar-dateLink:hover {
  color: #0b0c0c;
  text-decoration: underline;
  background: #d5e8f3;
}

a.BookingCalendar-dateLink.is-chosen {
  overflow: hidden;
}

a.BookingCalendar-dateLink.is-chosen:after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #2b8cc4 transparent transparent;
}

@media (min-width: 641px) {
  a.BookingCalendar-dateLink.is-chosen:after {
    border-width: 0 15px 15px 0;
  }
}

a.BookingCalendar-dateLink .BookingCalendar-day {
  padding-left: 3px;
}

.BookingCalendar-date--bookable {
  background: white;
}

.BookingCalendar-date--bookable.is-active {
  background: #96c6e2;
}

.BookingCalendar-content {
  position: relative;
  min-height: 55px;
}

.BookingCalendar-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  color: white;
  line-height: normal;
  text-align: center;
  background: #6f777b;
}

.BookingCalendar-tag--today {
  background: #2b8cc4;
}

ul.BookingCalendar-legend {
  overflow: hidden;
  padding: 0;
  list-style: none;
}

ul.BookingCalendar-legend li {
  float: left;
  margin-right: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 300;
  text-transform: none;
}

@media (max-width: 640px) {
  ul.BookingCalendar-legend li {
    font-size: 14px;
    line-height: 1.14286;
  }
}

ul.BookingCalendar-legend li:last-child {
  margin-right: 0;
}

.BookingCalendar-legendBox {
  float: left;
  width: 29px;
  height: 29px;
  margin: 0 5px 0 0;
  border: 1px solid #dee0e2;
}

.BookingCalendar-legendBox--unavailable {
  background: url("lbl_unavailable_tile.png");
}

.BookingCalendar-header {
  position: relative;
  border: 1px solid #dee0e2;
  background: white;
}

.BookingCalendar-currentMonth {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
  font-weight: 700;
  margin: 0;
  padding: 0.5em 0;
  text-align: center;
}

@media (max-width: 640px) {

  .BookingCalendar-currentMonth,
  .SlotPicker-dayTitle {
    font-size: 20px;
    line-height: 1.2;
  }
}

a.BookingCalendar-nav,
.SlotPicker-timeSlots,
.SlotPicker-choices ul li.is-chosen .SlotPicker-prompt,
.SlotPicker-promoteHelp,
.breadcrumb,
[data-name="SummaryAppointmentDetailsSection"] input#lwdt_location,
[data-name="SummaryAppointmentDetailsSection"] .text-muted,
[data-name="AppointmentConfirmationTab"] .datetimepicker .input-group-addon,
[data-name="AppointmentDateAndTimeConfirmationSection"] .form-control-cell .validators,
input[type="radio"].hideRadio+label,
input[type="radio"].hideRadio,
input[type="radio"].hideRadio~br {
  display: none;
}

a.BookingCalendar-nav--next,
a.BookingCalendar-nav--prev {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.632em;
  font-family: "Open Sans", sans-serif;
  font-size: 19px;
  line-height: 1.31579;
  font-weight: 400;
  text-transform: none;
  color: #0b0c0c;
  line-height: 30px;
  text-decoration: none;
  background: no-repeat 0 -80px;
}

@media (max-width: 640px) {

  a.BookingCalendar-nav--next,
  a.BookingCalendar-nav--prev {
    font-size: 16px;
    line-height: 1.25;
  }
}

a.BookingCalendar-nav--next:hover,
a.BookingCalendar-nav--prev:hover {
  text-decoration: underline;
}

a.BookingCalendar-nav--prev {
  margin-left: 10px;
  padding-left: 40px;
  background-image: url("lbl_prev.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 20 / 10),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  a.BookingCalendar-nav--prev {
    background-position: 0 10px;
    background-size: 30px;
  }
}

a.BookingCalendar-nav--next {
  left: auto;
  right: 0;
  margin-right: 10px;
  padding-right: 40px;
  background-image: url("lbl_next.png");
  background-position: 100% -80px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 20 / 10),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  a.BookingCalendar-nav--next {
    background-position: 100% 10px;
    background-size: 30px;
  }
}


.SlotPicker-days {
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .SlotPicker-days {
    margin-bottom: 0;
  }
}

@media (max-width: 720px) {
  h2 {
    font-size: 3.2rem !important;
    line-height: 4.8rem !important;
  }
h3.starfeeback{
  font-size: 24px !important;
    line-height: 3.6rem !important;
}
  h3 {
    font-size: 2.4rem !important;
    line-height: 3.6rem !important;
  }

  h4 {
    font-size: 2rem !important;
    line-height: 3rem !important;
  }
}

.SlotPicker-day {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 0.5em;
  list-style: none;
  background: #dee0e2;
}

@media (max-width: 640px) {
  .SlotPicker-day {
    border-width: 1px 0;
  }
}

.SlotPicker-dayTitle {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
  font-weight: 700;
  margin: 0.2em 0 0.3em;
}

.SlotPicker-dayOneSlot,
.SlotPicker-choices ul li p,
.navbar-btn {
  margin: 0;
}

.SlotPer-label-wide,
.SlotPicker-label {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  box-sizing: border-box;
  min-height: 50px;
  border-radius: 6px;
  background-size: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-around;
  justify-content: space-evenly;
  align-items: center;
}

.SlotPer-label-wide {

  display: block
}

.SlotPicker-label.is-active,
.SlotPicker-label-wide.is-active {
  outline: 3px solid #007e8f;
  background-color: rgba(224, 240, 242, 1);
  background-size: 32px;
}


.SlotPicker-label-wide.is-disabled,
.SlotPicker-label.is-disabled {
  color: #bfc1c3;
}


.SlotPicker-slot {
  position: absolute;
  top: -99px;
  left: -99px;
  margin-top: -7px;
}

.SlotPicker-duration {
  display: block;
  font-size: 18px;
  font-weight: 400;
}

input[type="radio"].slot-picker-radios {
  margin-right: 10px;
}

input[type="radio"].slot-picker-radios-wide {
  margin-left: 10px;
  margin-top: 5px;
}

input[type="radio"].slot-picker-radios-wide:focus,
input[type="radio"].slot-picker-radios:focus {
  transform: scale(1) !important;
}

.slot-picker-sep-wide,
.slot-picker-sep {
  margin-left: 3px;
}

.SlotPicker-choices ul {
  zoom: 1;
  margin: 0;
  padding: 10px;
  list-style-type: none;
  background: #dee0e2;
}

@media (min-width: 769px) {
  .SlotPicker-choices ul {
    min-height: 236px;
  }
}

.SlotPicker-choices ul li {
  cursor: pointer;
  position: relative;
  margin-top: 10px;
  padding: 10px;
  min-height: 60px;
  background: white;
  border: 1px solid #bfc1c3;
}

.SlotPicker-choices ul li:first-child {
  margin-top: 0;
}

.SlotPicker-choices ul li .SlotPicker-prompt {
  display: none;
  padding: 5px 18%;
  text-align: center;
  color: #6f777b;
}

@media (max-width: 640px) {
  .SlotPicker-choices ul li .SlotPicker-prompt {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.SlotPicker-choices ul li.is-chosen {
  padding-left: 65px;
  padding-right: 80px;
}

@media (max-width: 640px) {
  .SlotPicker-choices ul li.is-chosen {
    padding-left: 55px;
  }
}

.SlotPicker-choices ul li.is-chosen p {
  font-size: 24px;
}

.SlotPicker-choices ul li.is-chosen .SlotPicker-date {
  font-weight: bold;
}

.SlotPicker-choices ul li.is-chosen .SlotPicker-position {
  background-color: #6f777b;
}

.SlotPicker-choices ul li.is-active .SlotPicker-position {
  background-color: #2b8cc4;
}


.SlotPicker-position {
  position: absolute;
  left: 10px;
  height: 100%;
  background: #bfc1c3;
  color: white;
  width: 55px;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  margin: -10px 0 0 -10px;
}

@media (max-width: 640px) {
  .SlotPicker-position {
    width: 45px;
  }
}

.SlotPicker-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  overflow: hidden;
  text-indent: 999px;
  background: no-repeat 0 -90px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 20 / 10),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .SlotPicker-icon {
    background-position: 0 0;
    background-size: 100%;
  }
}

.SlotPicker-icon--remove {
  background-image: url("lbl_remove.png");
}

.SlotPicker-icon--promote {
  right: 50px;
  background-image: url("images/promote.png");
}

#loading {
  position: absolute;
  top: 120px;
  left: calc(50% - 30px);
  z-index: 9999999;
}

@media (max-width: 480px) {
  #loading {
    position: absolute;
    top: 145px;
    left: calc(50% - 40px);
    z-index: 9999999;
  }
}

div#ceremonypageload-mask {
  position: relative;
  background: #ffffff;
  height: 100%;
  width: calc(100% + 4px);
  z-index: 9999998;
}

div#load-mask {
  position: relative;
  background: #b2b2b2a8;
  height: 100%;
  width: calc(100% + 4px);
  z-index: 9999998;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #007180;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #007180 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

div#ttry {
  position: relative;
}

div#loading-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

div#page-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
}

div#page-loader #loading {
  top: 50vh;
}

h1 {
  font-family: "Open Sans", sans-serif;
}

h2 {
  /* Header 2 */
  font-size: 36px;
  line-height: 48px;
  /* identical to box height, or 133% */
  color: #2b4972 !important;
  border-color: #d4dae2;
  font-family: "Open Sans", sans-serif;
}

/* Header 4 */
h3 {
  font-size: 24px;
  line-height: 36px;
  /* identical to box height, or 150% */
  color: #000000 !important;
  border-bottom: 1px solid #d4dae2;
  margin: 0;
  border: none;
  font-family: "Open Sans", sans-serif;
}

h2,
h3 {
  font-weight: 600;
}

h1:first-letter,
h2:first-letter,
h3:first-letter {
  text-transform: capitalize;
}

h4 {
  color: #000000 !important;
}

label.field-label.field-label {
  /* font-size: 18px; */
  font-weight: 400;
  /* color: #2b4972; */
}

.web-resource-cell .field-label,
.checkbox-cell .field-label,
.datetime.form-control-cell .field-label {
  font-weight: 400;
  color: #000000;
}

[data-name="ResponseSummaryTab"] .datetime.form-control-cell .field-label {
  font-weight: 400;
  /* color: #2b4972; */
}

[data-name="Reschedule or Cancel your appointment"] fieldset[aria-label="Reschedule or Cancel your appointment"] legend h3 {
  font-size: 36px;
  color: #2b4972;
}

[data-name="Reschedule or Cancel your appointment"] fieldset[aria-label="Appointment"] {
  box-shadow: none;
  border-bottom: 2px solid #d4dae2 !important;
}

input#UpdateAppointButton,
input#CancelAppointment {
  margin-top: 20px;
}

.active {
  background-color: #007e8f;
  border-radius: 10px;
  color: white;
}

.control {
  min-height: auto;
  padding-bottom: 3px;
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body {
  display: none;
  /*Chitra, display block in Common function file */
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: #000000;
}

.barbar-static-top.navbar .menu-bar>.navbar-nav>li>a {
  border-radius: 10px;
}

.navbar-inverse .navbar-nav>li>a:focus {
  border: 0 !important;
  outline: 0 !important;
}

.dropdown-menu {
  border: none;
  border-radius: 7px;
}

#navbar .dropdown-menu {
  margin-top: -8px !important;
}

.navbar-nav>li>.dropdown-menu {
  border-top-left-radius: 5px;
}

.navbar-static-top.navbar .menu-bar>.navbar-nav>li>a {
  color: white;
}

.navbar-static-top.navbar-inverse {
  border-top: 6px #007e8f solid !important;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2b4972;
  box-shadow: none;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #00718012 !important;
}

.crmEntityFormView fieldset {
  margin-bottom: 0;
  padding: 16px 0;
  position: relative;
  box-shadow: inset 0 2px 0 #d4dae2;
}

[data-name="BookingCompleteTab"] fieldset:nth-child(2),
.crmEntityFormView fieldset:first-child,
[data-name="callBackSummary"] fieldset:nth-child(2),
[data-name="callBackSummary"] fieldset:nth-child(3),
[data-name="callBackSummary"] fieldset:nth-child(4) {
  box-shadow: none;
}

[data-name="BookingCompleteTab"] fieldset:nth-child(2) legend {
  top: 20px;
}

[data-name="BookingCompleteTab"] fieldset:nth-child(2) table {
  margin-top: 0px;
}

.crmEntityFormView fieldset:first-child legend {
  top: 20px;
}

.crmEntityFormView fieldset:first-child table {
  margin-top: 0px;
}

.crmEntityFormView fieldset>legend {

  position: relative;
  top: 43px;
}

.crmEntityFormView fieldset>table {
  margin-top: 28px;
}

.panel {
  border: 0;
  padding: 5px;
}

input:not(.input-text-box, .lookup),
select,
textarea {
  border-radius: 5px;
}

.input-text-box {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.input-group-addon {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.crmEntityFormView {
  border: 0 !important;
}

.progress {
  border-radius: 20px;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #545454;
  border-color: #bbbbbb;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.list-group-item {
  padding: 5px 15px;
  border: 1px solid #f7f7f7;
}

.crmEntityFormView,
.entitylist {
  border: 1px solid #f2f2f2;
  padding: 12px;
  border-radius: 10px;
}

@media screen and (max-width: 900px) {

  .crmEntityFormView,
  .entitylist {
    border: 0;
    padding: 0;
    border-radius: 3px;
  }
}

/*added ul and ul li class. Reuben*/
/* ul li {
    margin-left:1em; margin-right:0
}  */
/* commenting this as this distorts the whole ul to margin -left  rmc added back */

ul li::marker {
  color: #007e8f;
  font-size: 1.2em;
}

ul.welcometabUL {
  margin-left: 1.2em;
  margin-right: 0;
}

.welcometabH3 {
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.clswid {
  width: 107px;
}

.btn-primary {
  border-radius: 10px;
}

.btn-xs,
.btn-group-xs>.btn {
  padding: 1px 7px 0;
  border-radius: 20px;
  width: 100%;
}

.navbar-right {
  margin-top: -5px;
  display: none;
}


.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
  padding-bottom: 0.3em;
}

.navbar-inverse .navbar-nav>li>a:focus {
  border: 0 !important;
  outline: 0;
}

.crmEntityFormView .actions,
.form-custom-actions {
  border-top: 2.2px solid #d4dae2;
}

.crmEntityFormView .form-custom-actions {
  margin: 20px 0;
  padding: 19px 0 0 0;
}

.btn-default {
  border-radius: 10px;
  margin-top: 0;
}

td.clearfix.cell,
td.clearfix.cell.crmquickform-cell {
  border-right: 0;
}

html[dir="ltr"] .crmEntityFormView .cell.crmquickform-cell:first-child {
  border-right: 0;
}

.form-readonly {
  background: none;
  background-color: none;
}

tr td:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-left: 0;
}

tr td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-right: 0;
}

tr td:nth-last-child(2) {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-right: 0;
}

.table>thead>tr>th,
.table>thead>tr>td,
.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td {
  border-top: 0;
}

.table>thead>tr>th {
  border-bottom: 0;
}

.table-fluid tr {
  border-top: 0 !important;
}

.navbar-toggle {
  position: absolute;
  margin: 0;
  border-radius: 3px;
  top: 4px;
  right: 3px;
  padding: 17px 10px;
  display: none;
  /*Hiding thiss as they dont want to see home and sign in */
}

.navbar-toggle .icon-bar {
  width: 25px;
  height: 3px;
  border-radius: 2px;
}

.pull-left {
  float: left !important;
  margin: 5px;
}

.page-header {
  padding-bottom: 9.5px;
  margin: 62px 0 8px;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover {
  background-color: #007180 !important;
  line-height: 160%;
  margin: auto;
}

.pagination>li>a {
  border: 1px solid lightgrey !important;
  border-radius: 50% !important;
}

.pagination>li>a:hover {
  border: 2px solid #007180 !important;
  border-radius: 40% !important;
}

.jquery-bootstrap-pagination {
  margin: auto;
}

.modal-content {
  border-radius: 10px;
}

.form-close {
  position: absolute;
  top: 1px !important;
  width: 57px;
  height: 60px;
  background-color: #007180 !important;
  border-top-right-radius: 8px !important;
  right: 1px !important;
  color: #ffffff !important;
  font-size: xx-large !important;
}

.form-close:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  opacity: 1;
}

.modal-body {
  padding-top: 3px;
}

iframe.quickform {
  min-height: fit-content;
}

.cancelled {
  text-decoration: line-through;
  opacity: 0.4 !important;
}

.ticked:after {
  display: inline-block;
  vertical-align: top;
  line-height: 1.8em;
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.3em;
  text-align: center;
  content: "✔";
  color: #007180;
}

.modal-form .modal-body iframe {
  padding: 0 !important;
  min-height: 82%;
  height: 82vh;
}

.modal-footer {
  padding: 15px;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}

.modal-content {
  border: 0;
}

.modal-header {
  padding: 15px;
  background-color: #ededed;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 18px;
  font-weight: 600;
  font-variant: small-caps;
  height: 63px;
}

textarea {
  height: 70px;
  min-height: 70px;
  max-width: 100%;
  min-width: 100%;
}

.alert-warning {
  background-color: #e9f1f5;
  border-color: #ffdac7;
  box-shadow: inset 0 0 10px #ffeebd;
  border-radius: 10px;
}

.form-loading {
  position: fixed;
  animation: spinner 4s linear infinite !important;
  top: 45%;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

th {
  font-weight: 400;
  text-underline-position: under;
  letter-spacing: 1px;
}

.fa {
  top: 0;
}

a:focus {
  outline-offset: 0;
  border: 2px solid black;
  outline: 2px solid yellow;
}

input::file-selector-button {
  font-weight: bold;
  background-color: #007180;
  color: white;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  margin-right: 30px;
  cursor: pointer;
}

input::file-selector-button:hover {
  background-color: #009eb3;
}

.col-md-12.columnBlockLayout {
  margin-top: 30px;
}

a.btn.btn-primary.pull-right.action.create-action {
  width: 100%;
}

.dropdown-menu>li>a {
  color: #fff;
  text-decoration: none;
}

ul.dropdown-menu {
  background-color: white;
  padding: 0px;
  border: none;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
  border-radius: 5px;
  margin-right: 3px;
}

a.details-link {
  text-decoration: none;
  margin-right: 3px;
  border-radius: 5px;
}

a:not(.btn) {
  text-decoration: underline;
  /* NV - Commented below for later to review as underline is not inline */
  /* background-image: linear-gradient(to bottom, rgba(0, 126, 143, 0) 50%, white 50%); */
  font-weight: bold;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0px 1.1em;
  transition: all 0.25s ease;
  letter-spacing: -0.5px;
  cursor: pointer;
}

a:not(.btn):hover {
  text-decoration: none !important;
  background-image: none !important;
  letter-spacing: -0.5px !important;
}

div.information-box a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(to bottom,
      rgba(0, 126, 143, 0) 50%,
      black 50%);
  font-weight: bold;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0px 1em;
  color: black;
  transition: all 0.25s ease;
  letter-spacing: -0.5px;
  cursor: pointer;
}

div.information-box a:not(.btn):hover {
  text-decoration: none;
  background-image: none;
  letter-spacing: -0.5px;
}

@media screen and (max-width: 674px) {
  div.information-box a:not(.btn):hover {
    text-decoration: none;
    background-image: none;
    letter-spacing: -0.5px;
  }

  a:not(.btn):hover {
    text-decoration: none !important;
    background-image: none !important;
    letter-spacing: -0.5px !important;
  }
}

.div-forText {
  border-radius: 10px;
  border: solid 1px #007180;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-top: 5%;
  margin-bottom: 5%;
  padding: 5%;
  backdrop-filter: blur(10px);
}

.entitylist {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  margin-bottom: 5%;
  min-height: 40vh;
}

.btn.btn-default.btn.btn-default.btn.btn-default {
  border-radius: 46px;
  background: #d4dae2;
  color: #3a3a3a;
  padding: 8px 24px 8px;
  font-weight: 700;
  font-size: 20px;
  margin-right: 20px;
  box-shadow: none;
  border: solid 2px rgba(255, 255, 255, 0);
}

.btn.btn-default.btn.btn-default.btn.btn-default:hover {
  background: #dce3eb;
}

.btn.btn-primary {
  border-radius: 46px;
  background: #007180;
  color: #ffffff;
  padding: 8px 24px 8px;
  font-weight: 700;
  font-size: 20px;
  margin-right: 20px;
  box-shadow: none;
  border: solid 2px rgba(255, 255, 255, 0);
}

.btn.btn-danger {
  border-radius: 46px;
  color: #ffffff;
  padding: 8px 24px 8px;
  font-weight: 700;
  font-size: 20px;
  margin-right: 20px;
  box-shadow: none;
  border: none;
}

button[title="Select month"],
button[title="Select year"],
button[title="Select decade"] {
  padding: 0;
}

button[title="Previous month"]:focus,
button[title="Next month"]:focus,
button[title="Next year"]:focus,
button[title="Previous year"]:focus,
button[title="Next decade"]:focus,
button[title="Previous decade"]:focus,
button[title="Next century"]:focus,
button[title="Previous century"]:focus {
  border: 0;
  outline: 0;
}

.-datetimepicker-widget tr td.active button {
  background: transparent;
  color: #fff;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

.ui-datepicker-prev:focus~.ui-icon .ui-icon-circle-triangle-w,
.ui-datepicker-next:focus~.ui-icon .ui-icon-circle-triangle-e,
td[data-handler="selectDay"]>a:focus-visible,
th[data-action="previous"]:focus-within,
th[data-action="next"]:focus-within,
.picker-switch:focus-within,
.input-group-addon:focus,
input:focus,
.SlotPicker-label-wide:focus,
.SlotPicker-label:focus,
.btn-group:focus,
.entity-action-button:focus,
button.button-increment:focus-visible,
button.button-decrement:focus-visible,
select:focus {
  border: 2px solid #000000 !important;
  outline: 2px solid yellow !important;
  -webkit-box-shadow: 0 0 0 2px;
  box-shadow: 0 0 0 2px;
  outline-offset: 0 !important;
}

input[type="radio"]:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.btn.btn-primary:hover {
  background: #007e8f;
}

button.btn.btn-default.btn-entitylist-filter-submit {
  margin-bottom: 8px;
}

.panel-body {
  margin: -17px;
  border: 0;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(187, 181, 231, 0.0984768907563025) 51%,
      rgba(0, 0, 0, 0) 100%);
  padding: 0em 0.7em 0em !important;
}

label.entitylist-filter-option-group-label.h4 {
  font-size: 16px;
  margin-left: 22px;
}

.crmquickform-cell div label {
  display: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#WebResource_payment {
  height: 700px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #007e8f;
  position: relative !important;
  min-width: 32px;
  min-height: 32px;
  margin-top: -3px;
  margin-right: 15px;
}

div.information-box {
  border-left: 10px solid #fdb513 !important;
  background: rgba(253, 185, 19, 0.25);
  margin-top: 8px;
  margin-bottom: 28px;
  padding: 20px;
}

div.warning-box {
  border-left: 10px solid #ca2b2c !important;
  background: #ffffff;
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 20px;
}

div.error-box {
  border-left: 10px solid #ca2b2c !important;
  background: #ca2b2c40;
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 20px;
}

div.field-label[data-wrapper-section="lwdt_preappointmenttext"] {
  border-left: 10px solid #fdb513 !important;
  background: rgba(253, 185, 19, 0.25);
  padding: 20px;
}

div.field-label[data-wrapper-section="lwdt_bookingappointmenttextlabel"] {
  padding-top: 20px;
}

legend {
  margin-left: 25px;
}

#lwdt_paymenterrortype_label,
#lwdt_paymenterrordescription_label,
#lwdt_paymenterroroccuredat_label {
  font-weight: 600;
}

div.validation-summary {
  border-left: 10px solid #ca2b2c !important;
  background-color: white;
  margin: 33px 0px 0px 0px;
  width: 755px;
}

div.validation-summary a {
  color: #ca2b2c !important;
  text-decoration: none;
  border-bottom: 3px dotted;
}

.accordion {
  background-color: #eee;
  color: black;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.panel {
  margin: 0;
  padding: 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Chitra recently added 2px Dec 12 2024 */
.accordion.panel>div {
  padding: 22px 0 0 2px;
}

.accordion-click-target {
  color: rgba(0, 126, 143, 1);
  display: inline-block;
  padding: 0 40px;
  position: relative;
  font-weight: 700;
  text-decoration: underline;
  background: white;
  cursor: pointer;
}

.accordion-click-target:hover {
  text-decoration: none;
}

span.accordion-click-target:before {
  content: "";
  background-image: url(/accordion-pulldown.png);
  display: block;
  height: 23px;
  width: 23px;
  background-size: contain;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
}

span.accordion-click-target.active:before {
  content: "";
  background-image: url(/accordion-pullup.png);
  display: block;
  height: 24px;
  width: 24px;
  background-size: contain;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
}

iframe[src="/_webresource/cr3b8_rmcslotbooking"] {
  border: none !important;
}

label.SlotPicker-label-wide,
label.SlotPicker-label {
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 7px 4px 11px 0px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 2px;
  width: 168px;
  border: 2px solid transparent;
}

label.SlotPicker-label-wide {
  width: unset;
  justify-content: center;
}

@media (max-width: 300px) {

  label.SlotPicker-label-wide,
  label.SlotPicker-label {
    margin-right: 20px;
    margin-bottom: 10px;
    background-position: 7px 14px;
    width: 157px;
  }

  label.SlotPicker-label-wide {
    width: unset;
  }

  label.SlotPicker-label-wide.is-active,
  .SlotPicker-label.is-active {
    border-color: #007e8f;
    background-color: #d5e8f3;
    background-position: 7px 14px;
  }
}

.SlotPicker-time-wide,
.SlotPicker-time {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.SlotPicker-time-wide {
  display: inline;
}

input[type="text"]:disabled {
  background: rgb(243, 243, 243);
  color: #000000;
}

input.form-control,
textarea.form-control {
  border: 2px solid #7b7b7b;
}

.form-control {
  height: 100%;
}

.increment-decrement {
  border: 1px solid #7b7b7b;
  border-radius: 6px;
  width: 50px;
  font-size: 16px;
  text-align: center;
  outline: none;
  line-height: 32px;
  margin: 0 4px;
}

.button-increment,
.button-decrement {
  font-size: 21px;
  font-weight: bold;
  border-radius: 60%;
  background-color: #007e8f;
  border: 2px solid transparent;
  color: white;
  outline: none;
  cursor: pointer;
  height: 42px;
  width: 42px;
}

button:disabled {
  background-color: #d9d9d9;
  border: 2px solid transparent;
  color: #999999;
  cursor: default;
}

.crmEntityFormView [data-name="ResponseSummaryTab"] fieldset {
  border: none !important;
  box-shadow: none;
}

.crmEntityFormView [data-name="ResponseSummaryTab"] fieldset legend {
  width: 100%;
  margin-left: 0;
  border: none !important;
}

.crmEntityFormView [data-name="ResponseSummaryTab"] fieldset h3 {
  border-bottom: 2px solid #d4dae2 !important;
  padding-bottom: 10px;
}

.crmEntityFormView .tab-title {
  padding: 15px 0;
  border-bottom: 2.2px solid #d4dae2;
}

.crmEntityFormView .tab-title_1 {
  padding: 0 0 15px 0;
  border-bottom: 2.2px solid #d4dae2;
}

.crmEntityFormView .validation-summary h2 {
  font-size: 24px !important;
  line-height: 32px !important;
}

legend.section-title.section-title.section-title {
  margin: 12px 0 12px;
}

[data-name="WelcomeTab"] fieldset table,
[data-name="Agreement_Tab"] fieldset table {
  max-width: 760px;
}

fieldset table {
  max-width: 760px;
}

fieldset table.section tr .cell {
  padding: 0 0 20px;
}

fieldset table.section tr .cell.picklist-cell {
  padding: 0 0 20px;
}

fieldset table.section tr:last-child .cell {
  padding: 0;
}

.datepicker .datepicker-days thead button:active:focus,
.datepicker .datepicker-days thead button:active:hover {
  background: inherit;
}

.bootstrap-datetimepicker-widget button {
  font-weight: 400;
  font-size: 16px;
  height: 25px;
  border: 2px solid white;
  border-spacing: 0;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
  border-radius: 50%;
  background-color: #007e8f;
  border: 2px solid transparent;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
  width: 145px;
  border-radius: 0 !important;
  background-color: initial !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: #007e8f;
}

.datepicker .datepicker-days thead .picker-switch button {
  color: black;
}

.datepicker .datepicker-years thead .picker-switch button {
  color: black;
}

.datepicker .datepicker-months thead .picker-switch button {
  color: black;
}

fieldset[aria-label="Appointment"] {
  border-bottom: none !important;
}

fieldset[aria-label="Please confirm which partner lives in the borough"] {
  box-shadow: none !important;
}

fieldset:last-of-type {
  border-bottom-style: hidden;
}

fieldset[aria-label="Choose bin type"] {
  padding-top: 16px !important;
  box-shadow: inset 0 2px 0 #d4dae2 !important;
}

fieldset table.section tr .cell {
  padding: 0 0 20px;
}

fieldset table.section tr:last-child .cell {
  padding: 0;
}

.actions .col-sm-6 {
  padding: 0;
}

.footer-customclass {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.footer-customclass a {
  text-decoration: underline !important;
  font-size: 18px;
  color: #3a3a3a;
}

.footer-customclass a:hover {
  text-decoration: none !important;
}

[data-name="SummaryAppointmentBookedSection"] label.field-label.field-label,
[data-name="AppointmentDateAndTimeConfirmationSection"] label.field-label.field-label,
[data-name="SummaryAppointmentDetailsSection"] label.field-label.field-label,
[data-name="orderDeatilsCompleteSection"] label.field-label.field-label {
  color: initial !important;
  font-weight: 400;
  margin-bottom: 0;
}

[data-name="SummaryAppointmentBookedSection"] tr:last-child {
  display: block;
  margin-left: 0;
}

[data-name="SummaryAppointmentBookedSection"] tr:last-child .control {
  margin-left: 0;
}

[data-name="SummaryAppointmentDetailsSection"] tr,
[data-name="AppointmentDateAndTimeConfirmationSection"] tr:not(:first-of-type),
[data-name="SummaryAppointmentBookedSection"] tr,
[data-name="orderDeatilsCompleteSection"] tr {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

[data-name="SummaryAppointmentDetailsSection"] tr::before,
[data-name="SummaryAppointmentBookedSection"] tr::before,
[data-name="orderDeatilsCompleteSection"] tr::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #007e8f;
  margin-right: 12px;
}

[data-name="SummaryAppointmentDetailsSection"] td.form-control-cell.form-control-cell.form-control-cell,
[data-name="AppointmentDateAndTimeConfirmationSection"] td.form-control-cell.form-control-cell.form-control-cell,
[data-name="SummaryAppointmentBookedSection"] td.form-control-cell.form-control-cell.form-control-cell,
[data-name="SummaryAppointmentDetailsSection"] td.web-resource-cell.web-resource-cell,
[data-name="callBackSummaryChildsDetailsSection"] td.cell.cell.cell,
[data-name="orderDeatilsCompleteSection"] td.form-control-cell.form-control-cell.form-control-cell,
[data-name="orderDeatilsCompleteSection"] td.picklist-cell.picklist-cell.picklist-cell {
  display: flex;
  align-items: center;
  padding: 0;
}

@media screen and (max-width: 674px) {

  [data-name="SummaryAppointmentBookedSection"] td.form-control-cell.form-control-cell.form-control-cell,
  [data-name="AppointmentDateAndTimeConfirmationSection"] td.form-control-cell.form-control-cell.form-control-cell,
  [data-name="orderDeatilsCompleteSection"] td.form-control-cell.form-control-cell.form-control-cell,
  [data-name="SummaryAppointmentDetailsSection"] td.form-control-cell.form-control-cell.form-control-cell {
    display: block !important;
  }

}

fieldset table[data-name="yourDetails_label"] tr .web-resource-cell {
  padding: 0px;
}

fieldset table[data-name="yourDetails_label"] tr:nth-child(4) td {
  padding: 0 0 20px;
}

[data-name="SummaryAppointmentDetailsSection"] tr:last-child .control {
  margin-left: 0;
}

a.BookingCalendar-nav.is-active,
.SlotPicker-timeSlots.is-active,
.SlotPicker-day.is-active,
.SlotPicker-promoteHelp.is-chosen,
.SlotPicker-choices ul li.is-chosen .SlotPicker-icon--remove,
.SlotPicker-choices ul li.is-chosen .SlotPicker-icon--promote,
.SlotPicker-choices ul li.is-clicked .SlotPicker-prompt,
.crmEntityFormView table[data-name="SummaryAppointmentDetailsSection"] tbody tr td.form-control-cell::before,
.crmEntityFormView table[data-name="SummaryAppointmentDetailsSection"] tbody tr td.form-control-cell::after,
[data-name="SummaryAppointmentDetailsSection"] tr:last-child,
.crmEntityFormView table[data-name="SummaryAppointmentBookedSection"] tbody tr td.form-control-cell::before,
.crmEntityFormView table[data-name="SummaryAppointmentBookedSection"] tbody tr td.form-control-cell::after,
.crmEntityFormView table[data-name="orderDeatilsCompleteSection"] tbody tr td.form-control-cell::before,
.crmEntityFormView table[data-name="orderDeatilsCompleteSection"] tbody tr td.form-control-cell::after {
  display: block;
}

select.form-control {
  border-radius: 5px;
  border: 2px solid #7b7b7b;
}

@media (max-width: 525px) {
  [data-wrapper-section="lwdt_thanksforappointmentbooking"] {
    padding-top: 40px;
  }

  .crmEntityFormView .tab-title {
    padding: 10px 0;
  }

  .crmEntityFormView fieldset {
    padding: 16px 0 0;
  }
}

[data-name="WelcomeTab"],
[data-name="BookingCompleteTab"] fieldset table.section tr .cell {
  padding: 0;
  margin: 0;
}

.ui-datepicker.ui-widget.ui-widget-content {
  padding: 0;
}

.ui-datepicker.ui-widget.ui-widget-content table {
  margin-bottom: 0;
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev {
  width: 2em;
  height: 1.5em;
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next span,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev span {
  left: 35%;
  top: 45%;
}

.ui-datepicker .ui-datepicker-prev-hover {
  top: 2px;
  left: 2px;
  border: none;
}

.ui-datepicker .ui-datepicker-next-hover {
  top: 2px;
  right: 2px;
  border: none;
}

.ui-datepicker table.ui-datepicker-calendar td a,
.ui-datepicker table.ui-datepicker-calendar td span {
  text-align: left;
  padding: 1px 0 0 5px;
}

.crmEntityFormView .cell.cell .picklist.picklist.picklist input[type="radio"] {
  border: 5px solid #fff;
  border-radius: 50%;
  outline: 2px solid #7b7b7b;
  height: 40px;
  width: 40px;
  margin: 0;
  top: -6px;
  transform: scale(0.7);
}

input[type="checkbox"]:focus {
  outline-offset: 2px !important;
}

.crmEntityFormView .cell.cell .picklist.picklist.picklist input[type="radio"]:focus {
  outline-offset: 0;
}

.crmEntityFormView .cell.cell .picklist.picklist.picklist input[type="radio"]:checked {
  border-width: 0px;
}

.picklist.vertical {
  display: grid;
  grid-template-columns: 0fr 1fr;
  grid-gap: 16px;
}

table[data-name="NumberOfChildrenSection"] td.cell.cell {
  padding: 0;
}

table[data-name="NumberOfChildrenSection"] td.web-resource-cell.web-resource-cell {
  padding-bottom: 20px;
  font-size: 18px;
}

table[data-name="NumberOfChildrenSection"] td.web-resource-cell.web-resource-cell div,
table[data-name="NumberOfChildrenSection"] td.web-resource-cell.web-resource-cell span,
.form-control,
.ui-datepicker-calendar>thead>tr>th,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  font-size: 18px;
}

table[data-name="DeclarationOfBirthSection"] td.cell.cell {
  padding: 0;
}

table[data-name="DeclarationOfBirthSection"] td.web-resource-cell.web-resource-cell {
  padding-bottom: 20px;
  font-size: 18px;
}

table[data-name="DeclarationOfBirthSection"] td.web-resource-cell.web-resource-cell div,
table[data-name="DeclarationOfBirthSection"] td.web-resource-cell.web-resource-cell span {
  font-size: 18px !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  font-weight: 600 !important;
  outline: 3px solid #007e8f;
  background-color: rgba(224, 240, 242, 1) !important;
}

table[data-name="AppointmentDateAndTimeConfirmationSection"] input[type="text"]:disabled {
  border: none;
  background: #fff;
  box-shadow: none;
  padding: 0;
}

[data-name="AppointmentDateAndTimeConfirmationSection"] tr:nth-child(4):last-child {
  /* display: block; */
  display: none;
  margin-left: 0;
}

[data-name="AppointmentDateAndTimeConfirmationSection"] tr:nth-child(4):last-child .control {
  margin-left: 0 !important;
}

.picklist label {
  display: contents;
}

[data-name="callBackSummaryChildsDetailsSection"] .control {
  margin-left: 10px;
  padding-bottom: 0;
}

[data-name="callBackSummaryChildsDetailsSection"] label.field-label.field-label {
  margin-bottom: 0;
  color: #2b4972;
  font-weight: 600;
}

table[data-name="RelationshipandContactInformationSection"] td {
  padding: 0 0 0px !important;
}

table.section:not(:last-of-type) {
  border-bottom: 1px solid rgb(255, 0, 0);
}

.tab[data-name="AppointmentConfirmationTab"] {
  padding: 33px 0;
}

.tab[data-name="AppointmentConfirmationTab"] fieldset {
  padding: 0;
}

td.cell.checkbox-cell {
  display: flex;
  align-items: flex-start;
}

td.cell.checkbox-cell .info {
  order: 2;
  padding-left: 0 !important;
}

@media (max-width: 767px) {
  .crmEntityFormView table.section td.cell.checkbox-cell {
    display: flex;
    align-items: center;
  }

  .crmEntityFormView fieldset>legend {
    position: relative;
    top: 57px;
  }

  /* May 29 adde by chitra to adjust the legend when in mobile view*/

  div.validation-summary {
    width: 100%;
  }
}

.ui-datepicker {
  max-width: 70em;
  max-height: 40em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev span:focus,
.ui-datepicker .ui-datepicker-next span:focus {
  border: 1px solid black;
  outline: 1px solid yellow;
  border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev span {
  display: block;
  position: absolute;
  left: 30%;

  top: 50%;

  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='32' y='32' width='32' height='32' rx='16' transform='rotate(-180 32 32)' fill='%23007E8F'/%3E%3Cpath d='M19.2843 8.22862C19.5167 7.99813 19.6334 7.69493 19.6334 7.39224C19.6334 7.08954 19.5167 6.78633 19.2842 6.55583C18.8201 6.09567 18.0688 6.09567 17.6047 6.55592L17.8159 6.76893L17.6047 6.55593L8.71582 15.3715C8.71581 15.3716 8.71579 15.3716 8.71578 15.3716C8.49251 15.5929 8.36671 15.8938 8.36671 16.2079C8.36671 16.5221 8.49264 16.8229 8.71584 17.0443L8.92709 16.8313L8.71585 17.0443L17.6047 25.8595C17.6047 25.8595 17.6047 25.8595 17.6047 25.8595C18.0688 26.3197 18.8202 26.3197 19.2843 25.8595C19.7497 25.3979 19.7498 24.6484 19.2843 24.1868L19.2843 24.1868L11.2388 16.2079L19.2843 8.22862ZM19.2843 8.22862L19.0732 8.01572L19.2843 8.22861L19.2843 8.22862Z' fill='white' stroke='white' stroke-width='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 30%;

  top: 50%;

  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23007E8F'/%3E%3Cpath d='M12.7157 23.7714C12.4833 24.0019 12.3666 24.3051 12.3666 24.6078C12.3666 24.9105 12.4833 25.2137 12.7158 25.4442C13.1799 25.9043 13.9312 25.9043 14.3953 25.4441L14.1841 25.2311L14.3953 25.4441L23.2842 16.6285C23.2842 16.6284 23.2842 16.6284 23.2842 16.6284C23.5075 16.4071 23.6333 16.1062 23.6333 15.7921C23.6333 15.4779 23.5074 15.1771 23.2842 14.9557L23.0729 15.1687L23.2842 14.9557L14.3953 6.14053C14.3953 6.14053 14.3953 6.14053 14.3953 6.14053C13.9312 5.68027 13.1798 5.68027 12.7157 6.14053C12.2503 6.60209 12.2502 7.35159 12.7157 7.81323L12.7157 7.81323L20.7612 15.7921L12.7157 23.7714ZM12.7157 23.7714L12.927 23.9844L12.7157 23.7714L12.7157 23.7714Z' fill='white' stroke='white' stroke-width='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

@media (min-width: 300px) {
  .ui-datepicker-calendar>thead>tr>th {
    font-size: 16px;
  }

  .bootstrap-datetimepicker-widget.dropdown-menu {
    width: 21em;
  }

  .dropdown-menu {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .ui-datepicker .ui-datepicker-calendar th {
    font-size: 12px;
  }

  div#ttry~table {
    font-size: 16px;
  }
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
  min-height: 10em;
  background: #ffffff;
}

.ui-datepicker td {
  border: 2px solid transparent;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: center;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: 0.5em;
  top: 0.3em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

.ui-widget {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
}


.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-icon {
  width: 16px;
  height: 16px;
  transform: scale(2);
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  background-image: none;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #555;
  font-weight: bold;
  font-size: x-large;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #ffffff;
  font-weight: 500;
  vertical-align: middle;
  color: #454545;
  min-height: 3em;
}

.Displaytimings {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  flex-wrap: wrap;
  display: flex;
  align-items: left;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.DisplayTimingsSingle {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  display: flex;
  align-items: left;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
}

#ttry .ui-datepicker-calendar {
  background: url(unavailable.png);
}

[data-name="orderDeatilsCompleteSection"] .picklist-cell .control,
[data-name="orderDeatilsCompleteSection"] .form-control-cell .control,
[data-name="SummaryAppointmentDetailsSection"] .form-control-cell .control,
[data-name="AppointmentDateAndTimeConfirmationSection"] .form-control-cell .control,
[data-name="SummaryAppointmentBookedSection"] .form-control-cell .control {
  font-weight: bold;
  margin-left: 10px;
  padding-bottom: 0;
}

fieldset table[data-name="binOrderdetailsSection"] {
  max-width: 100%;
}


td.clearfix.cell.lookup.form-control-cell {
  padding-top: 20px;
}

#WebResource_NoOfCerti {
  height: 45px !important;
}

.grid-container {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#lwdt_requesttype_row div[id^="lwdt_requesttype_div_"]:nth-child(odd) {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #e0e0e0;
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: #FFFFFF;
}

@media(min-width:992px) {
  #lwdt_requesttype_row .col-md-6 {
    width: 48%;
  }
}

#lwdt_requesttype_row div[id^="lwdt_requesttype_div_"]:nth-child(even) {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #e0e0e0;
  margin-bottom: 20px;
  background-color: #FFFFFF;
}

.active-container {
  outline: 3px solid #007e8f;
  background-size: 32px;
}

div.control a {
  color: #0b7f99;
}

input[type="radio"] {
  appearance: none;
  display: inline-block;
  background-color: #fff;
  border: 2px solid #7b7b7b;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease-in-out;
}

input[type="radio"]:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #007e8f;
  width: 0;
  height: 0;
  transition: all 0.3s ease-in-out;
}

input[type="radio"]:checked:before {
  width: 50% !important;
  height: 50% !important;
}

input[type="radio"]:focus {
  outline: 2px solid yellow !important;
  border: 2px solid #000 !important;
  scale: 1.1;
}

.view-empty.message {
  display: none !important;
}

ul.dropdown-menu.colorForDropdown {
  background-color: white;
  padding: 0px;
  border: none;
}

[role="menuitem"][role="menuitem"] {
  color: black;
  text-decoration: underline;
  font-size: 18px;
  font-family: sans-serif;
}

.buttonCustomization.buttonCustomization.buttonCustomization,
.customButtonForGrid.customButtonForGrid.customButtonForGrid {
  width: 100%;
  color: #0b7180;
  background-color: white;
  border: solid 2px #0b7180;
  padding: 8px;
}

.tableStyled>thead>tr>th {
  border-bottom: 2px solid lightgray;
}

.tableStyled>tbody>tr>td {
  border-top: 2px solid lightgray;
}

.tableStyled {
  border-collapse: collapse;
}

.tableStyled .dropdown.action .btn.btn-default.btn.btn-default.btn.btn-default {
  padding: 4px 12px 2px;
}

.tableStyled tbody tr:last-child td {
  border-bottom: 2px solid lightgray;
}

.tableStyled tr td {
  border-radius: 0;
}

table .grid-actions {
  border-bottom: 0;
}

@media (max-width: 525px) {
  .row.sectionBlockLayout>.container {
    width: calc(100vw - 23px);
  }
}

.form-close>span:not([aria-hidden="true"]) {
  display: none;
}

th.theadHeader {
  color: var(--Darker-turquoise, #007e8f);
  font-size: 17.08px;
  font-style: normal;
  font-weight: 700;
  line-height: 23.9px;
}

.view-grid.table-responsive {
  overflow-x: hidden;
}

@media (max-width: 525px) {
  .view-grid.table-responsive {
    overflow-x: auto;
  }
}

.binsBlockData {
  display: inline-block;
  vertical-align: text-top;
  width: 60%;
  margin-top: -1.5px;
  font-weight: bold;
}

@media screen and (max-width: 674px) {
  .binsBlockData {
    padding-left: 8.5%;
    margin-top: 2px
  }
}

.footer-links {
  display: flex;
  justify-content: space-between;
}

.footer-links-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 33%;

}

@media screen and (max-width: 674px) {
  .footer-links-section {
    max-width: 100%;
  }
}

.footer-links-section span {
  margin-bottom: 18px;
}

footer .container:before {
  content: none;
}

.footer-wrapper {
  padding: 80px 30px 70px;
}

.copyRight {
  color: var(--white, #FFF);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  /* 143.75% */
}

.atagFooter.atagFooter {
  color: var(--white, #FFF);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  /* 143.75% */
  text-decoration-line: underline;
}

@media screen and (max-width: 674px) {
  .footer-links {
    flex-direction: column;
  }
}

.hintText {
  color: #505a5f;
  margin-bottom: 5px;
  float: left;
}

.hideOrShowPostCode {
  display: none !important;
}

.hideOrShowPostCodeForAdd {
  display: none !important;
}

/* For custom subgrid styling - OK */
/* Please keep empty ruleset below, currently in testing to see if subgrid works - OK 04/06/2024 */

@media (max-width: 3840px) {
  .table-fluid thead {
    display: none
  }

  .table-fluid td,
  .table-fluid tr {
    display: block;
  }

  html[dir=ltr] .table-fluid td {
    /* padding-left: 14rem!important; */
  }

  .table-fluid td:before {
    content: attr(data-th);
    /* font-weight: 700; */
    display: inline-block;
    /* width: 12rem; */
    /* margin-left: -12rem; */
    float: left;
    padding-right: 1rem;
    word-break: normal
  }
}

@media (max-width: 767px) {

  .table-fluid td:before {
    content: attr(data-th);
    font-weight: 400;
    display: contents;
    width: 22rem;
    margin-left: -12rem;
    float: left;
    /* padding-right: 1rem; */
    word-break: normal
  }
}

/* button for file upload - OK */
.customButtonForFileUpload {
  padding: 8px 24px 8px !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  width: initial !important;
}

.link-styleForRemoveButton {
  background: none;
  /* Remove button background */
  border: none;
  /* Remove button border */
  color: black;
  /* Inherit text color from parent element */
  padding: 0;
  /* Remove button padding */
  text-align: left;
  /* Align text to the left (optional) */
  text-decoration: underline;
  font-weight: 500;
}

.link-styleForRemoveButton:hover {
  background-color: white;
  /* Ensures no background color on hover */
  color: black;
  /* text-decoration: none; */
  text-decoration: initial;
}

.textarea:focus-visible {
  outline-offset: 0;
  border: 2px solid black;
  outline: 2px solid yellow;
}

textarea:read-only {
  text-align: justify;
  height: 130px;
}

/*chitra adding this to ignore the icon on all attachment for Mulitple upload #2847MASH one to be common*/

.attachment span.fa.fa-file {
  display: none;
}

input[type="file"]::file-selector-button {
  border-radius: 46px;
  background: #007180;
  color: #ffffff;
  padding: 8px 24px 8px !important;
  font-weight: 700;
  font-size: 20px;
  margin-right: 20px;
  box-shadow: none;
  border: solid 2px rgba(255, 255, 255, 0);
  color: #0b7180;
  background-color: white;
  border: solid 2px #0b7180;
  padding: 8px;
}

/* this is for if there is only text in the validator and you dont need an a tag - osh */

.validatorText {
  color: #ca2b2c !important;
  text-decoration: none;
  border-bottom: 3px dotted;
  font-weight: bold;
  margin-left: 3px;
  display: inline
}

/* this is to fix the misaligned child details on births - osh */

table[role="presentation"][data-name="callBackSummaryChildsDetailsSection"] .info,
table[role="presentation"][data-name="AppointmentDateAndTimeConfirmationSection"] .info,
table[role="presentation"][data-name="SummaryAppointmentBookedSection"] .info,
table[role="presentation"][data-name="SummaryAppointmentDetailsSection"] .info {
  padding-bottom: unset !important;
}

;

/* haven't used hr in any project yet - this should match to standard fieldset borders but within the table of the fieldset - osh*/

hr {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  height: 2.2px !important;
  border: 0 none !important;
  background-color: #d4dae2 !important;
}

hr.summaryHR {
  margin-top: unset !important;
  border-top: 2.2px solid #d4dae2 !important;
}

/* style for info banner that can be initialised from the web template lwdt_createMadeChangeBanner */

.info-banner {
  background-color: rgb(224, 240, 242);
  padding: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

/* input field for agnopay nav page */

.agno-navigation-select {
  max-width: 760px;
}

.agno-navigation-description {
  padding-top: 20px;
}

/* target the starFeedback section iframe to give max height */

[data-name="starFeedbackSection"].section {
  height: 300px;
}

@media (max-width: 550px) {
  [data-name="starFeedbackSection"].section {
    height: 375px;
  }
}

@media (max-width: 450px) {
  [data-name="starFeedbackSection"].section {
    height: 420px;
  }
}

[data-name="starFeedbackSection"].section .control {
  height: 100%;
}

/* chitra adding this for horizontal picklist */
.picklist.horizontal.picklist.horizontal.picklist.horizontal input[type="radio"] {
  top: 12px;
}

/* all css below for new feedback footer - osh */

.feedbackFooter {
  height: 88px;
  background-color: #2B4972;
  color: white;
  border-bottom: #008299 8px solid;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feedbackQuestionMark {
  background-color: white;
  border-radius: 50%;
  color: #2B4972;
  width: 30px;
  height: 30px;
  text-align: center;
  font-weight: 800;
}

.feedbackFooter a {
  color: white;
  font-size: 20px;
}

.feedbackContainer {
  display: flex;
  gap: 10px;
}

.feedbackMain {
  display: flex;
  gap: 5px;
}

.feedbackText {
  padding-top: 2px
}

@media (max-width: 768px) {

  /* Adjust width as needed */
  .feedbackFooter {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
    /* Reduce padding for smaller screens */
    height: auto;
    /* Allow height to adjust */
    padding-top: 10px;
    padding-bottom: 10px;
    gap: unset;
  }

  .feedbackQuestionMark {
    width: 40px;
  }

  .feedbackMain {
    flex-direction: column;
    margin-left: unset !important;
    margin-right: unset !important;
    padding: unset;
  }

  .feedbackFooter a {
    color: white;
    font-size: 20px;
    padding-left: 32px;
  }

  .feedbackContainer {
    gap: 5px;
  }
}

@media (max-width: 500px) {
  .feedbackQuestionMark {
    width: 50px;
    max-width: 30px
  }
}

 .stars {
            display: flex;
            gap: 5px;
            font-size: 40px;
            cursor: pointer;
        }

        .star {
            color: #d9d9d9;
            transition: color 0.2s;
            padding-bottom: 10px;
        }

        .star.filled {
            color: #007180;
        }

        .stars.disabled {
            cursor: default;
        }

        .stars.disabled .star {
            pointer-events: none;
        }