/*
TABLE OF CONTENTS
=============================================
1. FONT-FACE
2. COLOR SHADE
3. FONT-WEIGHT
4. FONT-SIZE
5. BODY
6. PAGE
7. INPUT
8. COMMON
9. TOOLTIP
10. CALENDAR
11. APPOINTMENT SUMMARY
12. LOADING
*/
/*1. START FONT-FACE*/
@font-face {
  font-family: LatoRegular;
  font-style: normal;
  font-weight: 400;
  /* https://css-tricks.com/snippets/css/using-font-face-in-css/ */
  src: url("/./Content/font/lato-regular-webfont.eot"); /* IE9 Compat Modes */
  src: url("/./Content/font/lato-regular-webfont.eot?#iefix") format("embedded-opentype"); /* IE6-IE8 */
  src: url("/./Content/font/lato-regular-webfont.woff2") format("woff2"); /* Super Modern Browsers */
  src: url("/./Content/font/lato-regular-webfont.woff") format("woff"); /* Pretty Modern Browsers */
  src: url("/./Content/font/lato-regular-webfont.ttf") format("truetype"); /* Safari, Android, iOS */
  src: url("/./Content/font/lato-regular-webfont.svg") format("svg"); /* Legacy iOS */
}
/*1. START FONT-FACE*/
/*2. START COLOR SHADE*/
/*Header Row*/
/*9 Selectors primary button hover color*/
/*2. END COLOR SHADE*/
/*3. START FONT-WEIGHT*/
/*3. END FONT-WEIGHT*/
/*4. START FONT-SIZE*/
/*4. START FONT-SIZE*/
/*4. END FONT-SIZE*/
/*START BODY*/
html {
  -ms-text-size-adjust: 100%; /* Non-standard: Adjust text size for IE */
  -webkit-tap-highlight-color: transparent; /* Remove link highlight on tap */
  -webkit-text-size-adjust: 100%; /* Non-standard: Adjust text size for WebKit browsers */
  font-family: LatoRegular;
  font-size: 62.5%;
  height: 100%; /* Added Height support for Safari */
  width: 100%;
}

body {
  font-family: LatoRegular;
  font-size: 1.6rem;
  height: 100%;
  margin: 0; /* Added Height support for Safari || https://stackoverflow.com/questions/25516934/safari-css-using-calc-with-vh-does-not-work */
  width: 100%;
}

/*END BODY*/
/*START PAGE*/
/*This is use for the Container on the OAB Page*/
.mainContainer {
  background-color: #7f8c8d;
  overflow: hidden;
}

/*This is use for the as a Header container on the OAB Page*/
.mainBodyContainer {
  background-color: #ecf0f1;
  border-radius: 0.48rem;
  min-height: 97vh;
  padding: 0;
}

.dvPrograssInd {
  padding: 0;
}

/*This is used as a Header Row on the OAB Page*/
.divHeaderFooter {
  background-color: #FFFFFF;
  border-radius: 0.48rem 0.48rem 0 0;
  color: #000000;
  min-height: 6.72rem;
  padding: 3rem;
}

.header-foter-center {
  background-color: transparent;
  height: 7.2rem;
  padding: 1rem 2rem;
  text-align: center;
}

.divHeaderFooter .summary {
  float: right;
}

/*This is used for confirm booking*/
.divSelectServiceConfirmed {
  background-color: #369960;
  padding: 0.64rem 4rem;
}

/*This is use for confirm canclled*/
.divSelectServiceCancel {
  background-color: #c0392b;
  padding: 0.64rem 4rem;
}

/*This is use for the Data Header Container of the Page, Where the Type of data displaying, Like Select a Service*/
.dataContainer {
  padding: 0 3rem 3rem;
}

/*This is use for Clinic Logo*/
/*/*This is use for the Clinic Image of the Page*/
.cliniclogoHeader img {
  max-width: 15rem;
}

/*This is use for the Clinic Social Media Circle of the Page*/
.dvComCircle {
  -moz-border-radius: 15.04rem;
  -webkit-border-radius: 15.04rem;
  background-repeat: no-repeat;
  border-radius: 15.04rem;
  cursor: pointer;
  float: right;
  height: 4rem;
  margin-left: 1.6rem;
  width: 4rem;
}

/*This is use for the Clinic Social Media Circle Common of the Page*/
.dvComCircleLogo1,
.dvComCircleLogo2,
.dvComCircleLogo3,
.btnSearchButton,
.clinicLogo,
.dvCircularMale,
.dvCircularFemale {
  background: url(/Content/img/AllImages2.png) no-repeat top left;
}

.dvComInstagramLogo {
  background: url(/Content/img/AllImages2.png) no-repeat top left;
}

/*This is use for the Clinic Social Media Circle Image*/
.dvComCircleLogo1 {
  background-position: 0 -13.696rem;
  height: 4.16rem;
  width: 4.16rem;
}

/*This is used for the Clinic Social Media Instagram Circle Image*/
.dvComInstagramLogo {
  background-position: 0 -55.7rem;
  height: 4.16rem;
  width: 4.16rem;
}

/*This is used for the Clinic Social Media Circle Image*/
.dvComCircleLogo2 {
  background-position: 0 -51.2rem;
  height: 4.16rem;
  width: 4.16rem;
}

/*This is use for the Clinic Social Media Circle Image*/
.dvComCircleLogo3 {
  background-position: 0 -23.904rem;
  height: 4.16rem;
  width: 4.16rem;
}

/*This is used for the Data Header Container of the Page, Where the Type of data displaying, Like Select a Service*/
.divSelectService {
  color: #000000;
  font-size: 1.6rem;
  margin-left: 0;
  min-height: 6.72rem;
  padding: 1rem 0;
}

/*This is used for the Label of Select Service*/
.divSelectService .lblHeaderValue,
.lblHeaderValueWhite {
  color: #000000;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.8rem;
  margin-bottom: 0;
  margin-top: 2rem;
}

.select-service-header {
  padding: 2rem 0;
}

.select-service-heade .lblHeaderValue {
  margin-top: 0;
}

.lblHeaderValueWhite {
  color: #FFFFFF;
}

/*This is use for the Icon List, right hand side image*/
.dotsandlines {
  display: table;
  float: right;
  width: 100%;
}

/*This is used for the Icon List, right hand side image*/
.circle-contain {
  width: 1.28rem;
}

/*This is used for the Icon List connected line, right hand side image*/
.circle-contain,
.line {
  display: table-cell;
}

/*This is used for the Icon List Circle, right hand side image*/
.circle {
  background: #7f8c8d;
  border-radius: 50%;
  color: #FFFFFF;
  height: 3.744rem;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 3.744rem;
}

/*This is used for the Icon List Circle, right hand side image*/
.circle-big {
  background-color: #2ecc71;
  border: 0.128rem solid #2ecc71;
  cursor: pointer;
  height: 3.744rem;
  width: 3.744rem;
}

.circle-selected {
  background-color: #da8c10;
  border: 0.128rem solid #da8c10;
}

/*This is use for the Icon List Circle, right hand side image*/
.circle-special {
  background-color: #7f8c8d;
  border: 0.128rem solid #7f8c8d;
}

.imgClinicLink, .imgServiceLink, .imgDocLink, .imgBookingLink, .imgCalenderLink {
  background-image: url(/Content/img/smallImg.png);
  background-repeat: no-repeat;
}

/*This is use for the Icon List Image, right hand side image*/
.imgClinicLink {
  background-position: 0.56rem -13.92rem;
}

/*This is use for the Icon List Image, right hand side image*/
.imgServiceLink {
  background-position: 0.768rem -7.28rem;
}

/*This is use for the Icon List Image, right hand side image*/
.imgDocLink {
  background-position: 0.56rem -17.2rem;
}

/*This is use for the Icon List Image, right hand side image*/
.imgBookingLink {
  background-position: 0.56rem -10.56rem;
}

/*This is use for the Icon List Image, right hand side image*/
.imgCalenderLink {
  background-position: 0.768rem 0.752rem;
}

/*This is use for the Search Container on the OAB Page*/
.captiondiv {
  background-color: #7f8c8d;
  border-radius: 0.48rem 0.48rem 0 0;
  color: #FFFFFF;
  margin-left: 0;
  margin-right: 0;
  min-height: 4.8rem;
}

.captiondiv .search {
  padding: 2rem;
}

/*This is used for data row caption*/
.subcaption {
  padding: 10px 15px;
}

/*This is used for data row primary value*/
.subcaption h4 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.96rem;
}

/*This is used for Data Header Container*/
.subheaderNew {
  padding-bottom: 1rem;
  padding-left: 0;
}

/*This is used for Data Header Label h3*/
.subheaderNew h3 {
  color: #000000;
  margin-bottom: 0;
}

/*This is use for Data Header Label*/
.subheaderNew label {
  color: #000000;
}

/*This is use for data row primary value*/
.subcaption h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  margin-top: 1.28rem;
}

/*This is used for data row helper text, description*/
.lblHelperText {
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.92rem;
}

.lblHelperText.left {
  text-align: left;
}

/*END PAGE*/
/*START INPUT*/
/*This is used for btn important*/
/*This is used for btn disabled*/
.btnLowEmpDisabled {
  background-color: #ecf0f1;
  border-radius: 0.16rem;
  font-size: 1.6rem;
  padding: 0.48rem 1.6rem;
  pointer-events: none;
}

.btnLowEmp {
  background-color: #ecf0f1;
  border-radius: 0.16rem;
  font-size: 1.6rem;
  padding: 0.48rem 1.6rem;
}

/*This is used for btn secondary disabled*/
.btnLowEmpDisabled:focus,
.btnLowEmpDisabled:active,
.btnLowEmpDisabled:hover,
.btnLowEmpDisabled:visited {
  background-color: #ecf0f1;
  border: 0.128rem solid #ecf0f1;
  color: #7f8c8d;
  outline: 0;
}

/*This is use for input field*/
select,
input[type=text],
input[type=email],
input[type=tel] {
  height: 42px;
}

/*This is use for input field*/
input[type=search] {
  -moz-appearance: searchfield;
  -moz-box-sizing: content-box;
  -webkit-appearance: searchfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/*This is used for input field*/
input[type=search]::-webkit-search-cancel-button {
  -moz-appearance: searchfield-cancel-button;
  -webkit-appearance: searchfield-cancel-button;
}

/*Used for Field disabled*/
.select2-container--disabled .selection .select2-selection span {
  background: #f1f2f9;
  cursor: no-drop;
}

/*Used for Field disabled*/
.ContainerDisabled,
input[type=number]:disabled,
textarea:disabled,
input[type=tel]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=text]:disabled,
select:disabled {
  background-color: #f1f2f9;
  cursor: no-drop;
}

/*This is used for field focus*/
.inputField {
  background: #FFFFFF;
  border: 0.08rem solid #7f8c8d;
  border-radius: 0.2rem;
  color: #000000;
  font-family: LatoRegular;
  font-size: 1.6rem;
  padding: 0.5rem 1rem;
  width: 100%;
}

/*This is use for field focus*/
.inputField:focus {
  -moz-box-shadow: inset 0 0 0 0.4rem #369960;
  -webkit-box-shadow: inset 0 0 0 0.4rem #369960;
  border-color: #369960;
  box-shadow: inset 0 0 0 0.4rem #369960;
  outline: 0;
}

/*This is used for field focus*/
.inputError {
  -moz-box-shadow: inset 0 0 0 0.4rem #c0392b;
  -webkit-box-shadow: inset 0 0 0 0.4rem #c0392b;
  border-color: #c0392b;
  box-shadow: inset 0 0 0 0.4rem #c0392b;
  outline: 0;
}

/*This is used for label*/
.inputstyle label {
  margin-bottom: 0;
  margin-top: 0.64rem;
}

/*This is use for checkbox*/
.dvChkBox {
  float: left;
  padding-top: 0.128rem;
  width: 2.08rem;
}

/*This is used for select*/
select {
  border: 0.128rem solid #f3f6f6;
  float: left;
  font-size: 1.6rem;
  margin-right: 0.64rem;
  width: 7.68rem;
}

/*This is used for select option*/
option {
  font-weight: normal;
  line-height: 3.04rem;
  padding: 0.48rem;
}

/*This is used for select option hover*/
option:hover {
  color: blue;
}

/*This is used for the Search Container*/
.dvSearchContainerFull {
  background-color: #FFFFFF;
  border-radius: 0.48rem;
  height: 4rem;
  width: 100%;
}

/*This is use for the Search Container dropdown*/
.dvSearchContainerFull .dropdown-menu {
  max-height: 20rem;
  overflow: hidden;
  overflow-y: auto;
  top: 3.8rem;
}

/*This is used for the Search Container dropdown menu*/
.dvSearchContainerFull .dropdown-menu a {
  font-size: 1.6rem;
  padding-left: 0.48rem;
}

/*This is used for the Search text box*/
.txtSearchBox {
  border: none;
  border-radius: 0;
  float: left;
  font-size: 1.6rem;
  line-height: 3.5rem;
  padding: 0.3rem 1.2rem;
}

/*This is used for the Search dropdown*/
.btn-search-drondown {
  background-color: transparent;
  border: none;
  padding: 0;
}

/*This is use for the Search dropdown*/
.txtSearchDropdown {
  background-color: #f3f6f6;
  border: none;
  border-radius: 0.24rem 0 0 0.24rem;
  color: #7f8c8d;
  float: left;
  font-size: 1.6rem;
  height: 4.1rem;
  padding: 0 1.28rem 0 1.28rem;
  width: auto;
}

/*This is used for the Search dropdown focus and active*/
.txtSearchDropdown:active,
.txtSearchDropdown:focus {
  outline: 0;
  padding: 0 1.28rem 0 1.28rem;
}

.txtSearchDropdown:after {
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.4em solid;
  content: "";
  display: inline-block;
  height: 0;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  width: 0;
}

/*This is used for the Search button container*/
.btnSearch {
  background-color: transparent;
  border: none;
  padding: 0;
  width: 6.4rem;
}

/*This is use for the Search button*/
.btnSearchButton {
  background-color: #f4ac3b;
  background-position: 0.992rem -35.52rem;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0 0.24rem 0.24rem 0;
  float: right;
  height: 4.048rem;
  right: 0;
  width: 4rem;
}

/*This is used for the Search button Hover*/
.btnSearchButton:hover,
.btnSearchButton:focus,
.btnSearchButton:active {
  background-color: #f4ac3b;
  outline: 0;
}

/*END INPUT*/
/*START COMMON*/
/*This is used for Footer container*/
.bookingFooter {
  border-top: 0.16rem solid #ecf0f1;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.btn-cancel-appointment {
  height: 5.5rem;
  padding: 0.8rem 1.5rem;
  text-transform: capitalize;
}

.borderForPrint {
  border-bottom: 0.16rem solid #ecf0f1;
  border-left: 0.16rem solid #ecf0f1;
  border-right: 0.16rem solid #ecf0f1;
}

/*This is use for gap on confirm booking page*/
.dvBodyContainerConfirmGap {
  margin-top: 1.92rem;
}

/*This is use for border on appintment summary*/
.borderbottom {
  border-bottom: 0.16rem solid #7f8c8d;
}

/*This is use for checkbox*/
.chkBox {
  width: 1.6rem;
  height: 1.6rem;
}

/*This is use clear the div*/
.divclear {
  clear: both;
}

/*This is use for label*/
.customlabel {
  border-radius: 0;
  color: #7f8c8d;
  font-size: 1.6rem;
  font-weight: normal;
  padding: 1.28rem;
}

.custom-label-small {
  padding: 0.5rem 0;
}

/*This is used for margin 0*/
.m-0 {
  margin: 0;
}

/*This is used for empty container after previous and next*/
.divEmptySeperation {
  min-height: 6.72rem;
}

/*This is used for grid price section*/
.label-default .divPriceSection {
  font-size: 2.4rem;
  margin-right: 0;
  padding-right: 0;
  padding-top: 1.28rem;
}

/*This is used for section background color*/
.dvBgColor {
  width: 50%;
}

/*This is used for confirm successfully*/
.divSelectServiceSuccessFull {
  background-color: #369960;
  color: #FFFFFF;
  font-size: 1.6rem;
  margin-left: 0;
  min-height: 9.296rem;
}

.divMsgRedArea {
  background-color: #c0392b;
  color: #FFFFFF;
  font-size: 1.6rem;
  margin-left: 0;
  min-height: 7.296rem;
}

.div-msg-area-green {
  background-color: #2ecc71;
}

/*This is used for Grid Clinic Image*/
.dvBookedLocation img {
  max-width: 100%;
}

/*This is used for Grid Clinic Image*/
.dvImgLocation {
  border: 0.128rem solid #ecf0f1;
  cursor: pointer;
  height: 100%;
  max-width: 100%;
}

/*This is used for cursor pointer*/
.cursorStyle {
  cursor: pointer;
}

.dvClinicLogoParent {
  float: left;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/*This is used for footer logo*/
.divfooterLogo img {
  width: 30%;
}

/*This is used for clinic logo*/
.clinicLogo {
  background-position: -6px -6px;
  border-radius: 4px;
  cursor: pointer;
  height: 6.2rem;
  width: 6.2rem;
}

.clinicLogo img {
  width: 90%;
}

/*This is use for gap*/
.divgap10 {
  padding-top: 0.96rem;
}

/*This is use for gap*/
.divgap20 {
  padding-top: 2.08rem;
}

/*This is use for gap*/
.divgapsmall {
  padding-top: 0.48rem;
}

/*This is use for inner container*/
.pnlFormContainer,
.pnlFormContainerPatient {
  background-color: #FFFFFF;
}

/*This is use for inner container*/
.pnlFormContainerPatient {
  padding: 1rem;
}

.search-patient-container {
  background-color: #7f8c8d;
}

.search-patient-container .main-section {
  -webkit-box-shadow: 0 0 2px #7f8c8d;
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 2px #7f8c8d;
  margin: 0 auto;
  width: 60%;
}

/*This is used for label default*/
.label-default {
  color: #000000;
}

/*This is used for header caption*/
.lblHeaderCap {
  border-bottom: 0.128rem solid #ecf0f1;
  color: #000000;
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding: 0 0 0.4rem;
  position: relative;
  width: 100%;
}

/*This is used for field caption*/
.lblLabelCaption {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-align: left;
}

/*This is use for terms and condition*/
.lblLabelCaptionTermsAndCondition {
  color: #07C;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  text-align: left;
}

/*This is used for text align left*/
.tdalignleft {
  color: #000000;
  text-align: left;
}

/*This is used for appointment summary label value*/
.lblAppointmentSummaryValue {
  color: #2980b9;
  font-family: LatoRegular;
  font-size: 1.4rem;
  font-weight: 700;
}

.lblAppointmentSummaryValue.link {
  cursor: pointer !important;
}

/*This is use for text align right*/
.txtRight {
  text-align: right;
}

/*This is use for line*/
.line {
  border-top: 0.4rem solid #7f8c8d;
  display: block;
  height: 2rem;
}

/*This is used for border*/
.linespecial {
  border-top: 0.4rem solid #2ecc71;
  display: block;
  height: 2rem;
}

/*This is used for gap from top*/
.dvPaddTop10 {
  padding-top: 1.28rem;
}

/*This is used for Booking Calender*/
.divBookingCalenderSection {
  font-size: 2.4rem;
  margin-right: 0;
  padding-top: 1.28rem;
  text-align: right;
}

/*This is used for footer row*/
.dvFooterRowForBooking {
  background-color: #ecf0f1;
  min-height: 6.72rem;
}

/*This is use for modal*/
.dvModalContent {
  padding: 1.6rem;
}

/*This is use for modal*/
.dvModalHeader {
  border-bottom: none;
}

/*This is use for modal*/
.dvmodalbody {
  max-height: 70vh;
  overflow: hidden;
  overflow-y: auto;
  padding-top: 0;
}

/*This is used for modal*/
.dvModalFooter {
  border-top: none;
}

/*This is used for stamp for cancelled appointment*/
.rubber_stamp {
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  border: 0.48rem solid #c0392b;
  border-radius: 0.48rem;
  color: #c0392b;
  float: left;
  font-size: 3.2rem;
  font-weight: 700;
  left: 45%;
  line-height: 4.96rem;
  padding: 0 1.2rem;
  position: absolute;
  top: 70%;
  transform: rotate(-20deg);
}

.rubber_stamp_green {
  border: 0.48rem solid #2ecc71;
  color: #2ecc71;
}

.dvButtonsRight {
  float: right;
  margin-left: 1.5rem;
}

.cancellink {
  color: #07C;
  cursor: pointer;
  line-height: 4rem;
  padding: 0.8rem;
}

/*This is use for footer logo, clinicea*/
.clinicFooterlogo {
  padding-top: 0;
}

.clinicFooterlogo_footer {
  padding-top: 2rem;
}

/*This is use for footer text*/
.lblFooterLogoTxt {
  font-family: LatoRegular;
  font-size: 1.4rem;
}

/*This is use on clinic is not available*/
.pnlNotAvailable {
  height: 68vh;
}

/*This is use on clinic is not available*/
.pnlNotAvailable .msgContainer {
  background-color: #f5a4c7;
  font-size: 2.4rem;
  padding: 1rem;
  text-align: center;
}

/*This is used for clinic phone number*/
.lblPhone {
  color: #07C;
  text-decoration: none;
}

/*END COMMON*/
/*START TOOLTIP*/
.dvErrorMsg {
  background-color: #c0392b;
  border-radius: 0.48rem;
  color: #FFFFFF;
  left: 0;
  margin: 0 auto;
  padding: 1.28rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 10rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 10000;
}

/*This is used for warning message text*/
.dvErrorMsgForBook {
  background-color: #c0392b;
  border-radius: 0.48rem;
  color: #FFFFFF;
  left: 0;
  margin: 0 auto;
  padding: 1.28rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 10rem;
  width: 450px;
  z-index: 10000;
}

/*This is use for warning message text*/
.dvAlertMsgInnerTxt {
  float: left;
  font-size: 1.6rem;
  padding-left: 1.28rem;
  padding-top: 0.56rem;
  width: auto;
}

/*This is used for warning message text*/
.alertImg {
  float: left;
  height: 4rem;
  width: 4.488rem;
}

/*This is used to display error msg when any field is blank on the Patient Details Page.*/
.arrow-left {
  border-bottom: 0.64rem solid transparent;
  border-right: 0.64rem solid #c0392b;
  border-top: 0.64rem solid transparent;
  float: left;
  height: 0;
  left: 0.16rem;
  position: absolute;
  top: 1.28rem;
  width: 5%;
}

/*This is used to display error msg when any field is blank on the Patient Details Page.*/
.arrow-down {
  border-left: 1.28rem solid transparent;
  border-right: 1.28rem solid transparent;
  border-top: 1.28rem solid #c0392b;
  height: 0;
  margin-left: 1.28rem;
  width: 0;
}

/*This is use for warning message container, when field is empty*/
.divWarning {
  background: #c0392b;
  border-radius: 0.2rem;
  clear: both;
  color: #FFFFFF;
  font-size: 1.6rem;
  padding: 0.96rem 1.44rem;
  position: relative;
  width: 95%;
}

/*This is used for border on a textbox when it's empty*/
.reqFieldSecondTime {
  -moz-box-shadow: inset 0 0 0 0.4rem #c0392b;
  -webkit-box-shadow: inset 0 0 0 0.4rem #c0392b;
  box-shadow: inset 0 0 0 0.4rem #c0392b;
}

/*END TOOLTIP*/
/*START CALENDAR*/
/*This is used on calendar not available*/
.divSelectDayViewNotAvi {
  background-color: #2ecc71;
  border-radius: 0.4rem;
  color: #FFFFFF;
  font-size: 1.6rem;
  margin-left: 0;
  margin-top: 1.28rem;
  padding: 1.6rem;
  text-align: center;
}

/*This is used on calendar not available, on right-hand side*/
.dvSingleDayViewNotAvilable {
  background: #f3f6f6;
  border: 0.1rem solid #ecf0f1;
  border-radius: 0.4rem;
  color: #7f8c8d;
  cursor: no-drop;
  text-align: center;
}

/*This is use on calendar available*/
.dvSingleDayViewAvilable {
  background: #FFFFFF;
  border: 0.128rem solid #ecf0f1;
  cursor: default;
  height: 4.96rem;
  text-align: center;
}

.dvSingleDayViewAvilable:hover {
  border: 0.128rem solid #2ecc71;
}

/*This is used on calendar selected day*/
.dvSingleDayViewSelected {
  background: #7f8c8d;
  border: 0.128rem solid #7f8c8d;
  color: #FFFFFF;
}

/*This is use on calendar morning*/
.small-Icon {
  margin-left: 7%;
  margin-right: 7%;
}

.small-Icon-2 {
  margin-left: 25%;
  margin-right: 25%;
}

.small-Icon-2-e {
  height: 0.8rem;
  margin-left: 8%;
}

.dvAvilableMorning {
  -moz-border-radius: 8.992rem 8.992rem 0 0;
  -webkit-border-radius: 8.992rem 8.992rem 0 0;
  background: #7CD4F6;
  border-radius: 8.992rem 8.992rem 0 0;
  float: left;
  height: 0.64rem;
  margin-top: 0.352rem;
  width: 1.128rem;
}

/*This is used on calendar evening*/
.dvAvilableEvening {
  -moz-box-shadow: 0.288rem 0.24rem 0 0 #f4ac3b;
  -webkit-box-shadow: 0.288rem 0.24rem 0 0 #f4ac3b;
  border-radius: 50%;
  box-shadow: 0.288rem 0.24rem 0 0 #f4ac3b;
  float: left;
  height: 0.88rem;
  width: 0.88rem;
}

/*This is used on calendar afternoon*/
.dvAvilableAfternoon {
  background: #f5a4c7;
  border-radius: 50%;
  float: left;
  height: 0.8rem;
  margin-top: 0.288rem;
  width: 0.8rem;
}

/*This is used on calendar small box where morning afternoon is showing*/
.dvDaySmallBox {
  background-color: transparent;
  border-radius: 50%;
  float: left;
  height: 1.28rem;
  margin-left: 3%;
  width: 0.96rem;
}

/*This is use on calendar today selected*/
.dvTodayContainer {
  border: 0.128rem solid #7f8c8d;
  color: #7f8c8d;
  font-weight: 700;
}

/*This is used on calendar next/prev common*/
.dvNextMonth,
.dvPrevMonth {
  background-color: #ecf0f1;
  border: 0.128rem solid #ecf0f1;
  color: gray;
  cursor: pointer;
  float: left;
  font-size: 2.4rem;
  line-height: 3.8rem;
  text-align: center;
  width: 10%;
}

/*This is used on calendar next month*/
.dvNextMonth {
  border-left: none;
  border-radius: 0 0.4rem 0.4rem 0;
  height: 4.16rem;
}

/*This is used on calendar prev month*/
.dvPrevMonth {
  border-radius: 0.4rem 0 0 0.4rem;
  border-right: none;
  height: 4.16rem;
  left: 1.6rem;
  top: 0.96rem;
}

/*This is used on calendar next/prev hover*/
.dvPrevMonth:hover,
.dvNextMonth:hover {
  background-color: #369960;
  border: 0.128rem solid #369960;
  color: #FFFFFF;
}

.dvPrevMonth_disabled:hover {
  background-color: #ecf0f1;
  border: 0.128rem solid #ecf0f1;
  color: gray;
  cursor: no-drop;
}

/*This is used on calendar current month*/
.dvCurrentMonth {
  border: 0.128rem solid #ecf0f1;
  border-radius: 0.4rem 0 0 0.4rem;
  float: left;
  font-size: 1.8rem;
  font-weight: 700;
  height: 4.16rem;
  padding: 0.48rem;
  text-align: center;
  width: 80%;
}

/*This is used for Morning/Afternoon, Evening Schedule*/
.dvCalendarSchedule {
  background: #f3f6f6;
  border: 1px solid #ecf0f1;
  border-radius: 4px;
  font-size: 1.4rem;
  margin: 0 auto;
  margin-bottom: 1.6rem;
  padding: 0.48rem;
  text-align: center;
}

.dvCalendarSchedule .icon-morning {
  height: 0.96rem;
  margin-right: 0.2rem;
  margin-top: 0.48rem;
  width: 1.6rem;
}

.dvCalendarSchedule .icon-afternoon {
  height: 1.28rem;
  margin-left: 0;
  margin-right: 0.2rem;
  margin-top: 0.32rem;
  width: 1.28rem;
}

.dvCalendarSchedule .icon-evening {
  -moz-box-shadow: 0.4rem 0.4rem 0 0 #f4ac3b;
  -webkit-box-shadow: 0.4rem 0.4rem 0 0 #f4ac3b;
  box-shadow: 0.4rem 0.4rem 0 0 #f4ac3b;
  height: 1.44rem;
  margin-left: 0;
  margin-right: 0.2rem;
  width: 1.44rem;
}

/*This is used for Morning/Afternoon, Evening small box*/
.dvDayViewBox {
  background-color: #7f8c8d;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
  padding: 0.3rem;
}

/*This is used for Morning/Afternoon, Evening small box*/
.dvDayViewBoxCalendar {
  border-radius: 0.4rem;
  height: 5.488rem;
  padding: 0.2em;
  text-align: center;
}

.dvDayViewBoxCalendar .lblDate {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.32rem 0;
}

/*END CALENDAR*/
/*START APPOINTMENT SUMMARY*/
/*This is used on appointment summary yellow sticker*/
.dvApptSummary {
  float: right;
  width: 100%;
}

.dvApptSummary table tr {
  border-bottom: 0.1rem solid #e5e594;
}

/*This is used on appointment summary yellow sticker*/
.post-it-note {
  background: #FFFFA5;
  border-radius: 1rem;
  padding: 0 1rem 1rem 1rem;
}

.dvPageBack {
  padding-top: 1rem;
}

/*This is used for staff image circle*/
.circular {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  height: 6rem;
  margin: 0 auto;
  width: 6rem;
}

.circular_smallPat {
  height: 4.8rem;
  margin-bottom: 1rem;
  width: 5.8rem;
}

.circular-NonImage {
  background-color: #ecf0f1;
  border: 1px solid #ecf0f1;
  padding: 0.5rem 0;
}

/*This is used for staff image female and if staff*/
.circular img {
  border-radius: 50%;
  max-height: 5.6rem;
  max-width: 5.6rem;
}

.circular .img-non {
  height: 5.6rem;
  width: 5.6rem;
}

/*This is use staff image female and male if staff image not there*/
.dvCircularMale,
.dvCircularFemale {
  opacity: 0.6;
}

.tblStaffBio {
  min-height: 6rem;
  width: 100%;
}

.tblStaffBio .data {
  vertical-align: middle;
}

/*This is use staff image male if staff image not there*/
.dvCircularMale {
  background-position: 0.6rem -39.6rem;
}

/*This is use staff image female if staff image not there*/
.dvCircularFemale {
  background-position: 0.6rem -45.408rem;
}

/*This is use to adjust the line height on an address*/
.dvAddressLineHeight {
  line-height: 2.08rem;
}

table {
  font-family: LatoRegular;
  margin-bottom: 0.8rem;
  width: 100%;
}

table td {
  font-size: 1.6rem;
  line-height: 3.04rem;
  padding: 0.32rem;
  vertical-align: top;
}

/*This is used for appointment summary column width*/
.tdColumn13 {
  width: 13%;
}

/*This is used for appointment summary column width*/
.tdColumn67 {
  width: 67%;
}

/*END APPOINTMENT SUMMARY*/
/*START LOADING*/
/*This is used for container for loading on page*/
.PageLoading {
  background-color: rgba(182, 182, 182, 0.6);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1300;
}

/*This is use for container for loading on page*/
.PageLoading .modal-content {
  border: 0.1rem solid #edf5f8;
  margin: 0 auto;
  padding: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/*This is used for loading*/
.dymamic-loading,
.dymamic-loading-trans {
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 6% 0 5%;
  right: 0;
  width: 100%;
  z-index: 1050;
}

/*This is used for loading body*/
.dymamic-loading .modal-body {
  background-color: #FFFFFF;
  padding-bottom: 1.5rem;
  text-align: center;
}

/*This is used for loading body*/
.dymamic-loading-trans .modal-body {
  background-color: transparent;
  padding-bottom: 1.5rem;
  text-align: center;
}

.dymamic-loading_important {
  padding-top: 20% !important;
}

.modal-content-custom {
  background-color: transparent;
  border: none;
  text-align: center;
}

@-webkit-keyframes spinner-border {
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner-border {
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*This is use for loading caption*/
.label-Loading-value {
  color: #000000;
  font-size: 1.8rem;
  margin-top: 3rem;
}

/*This is used for loading spinner*/
.spinner-border {
  -moz-animation: 0.75s linear infinite spinner-border;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
  border: 0.4rem solid #1b55d8;
  border-radius: 50%;
  border-right-color: transparent;
  display: inline-block;
  height: 6.4rem;
  vertical-align: text-bottom;
  width: 6.4rem;
}

.calendarDVloader {
  border: 0.1rem solid #000000;
  border-radius: 4px;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 0.32rem;
  text-align: center;
}

/* END LOADING */
@media print {
  .hideAll {
    display: none;
  }
}
/*used for grid table*/
.table-striped {
  background-color: #FFFFFF;
}

/*used for grid table row*/
.table-striped .rowdataOuter {
  background-color: #FFFFFF;
  border-bottom: 0.1rem solid #ecf0f1;
  padding: 1.5rem;
}

.rowdataCalendar {
  padding: 0 0.5rem;
}

/*Used for grid table row separator, any practitioner*/
.table-striped .rowdataOuter_seperator {
  margin-bottom: 1.6rem;
}

.table-striped .rowdataOuter .gridcolumn {
  padding: 0 1.5rem;
}

.table-striped .rowdataOuter .gridcolumn_right {
  text-align: right;
}

/*Used for grid table row primary value*/
.lblPrimaryValue,
.lblPrimaryValueNormal {
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
}

.btn-block {
  width: 100%;
}

.lblPrimaryValueNormal {
  font-weight: normal;
  margin-top: 0;
}

.lblCaptionValue {
  color: #000000;
  font-size: 1.6rem;
  margin-top: 0.96rem;
}

.lblPrimaryValueBig {
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.96rem;
}

.lblPrimaryValueBigWhite {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.96rem;
}

.lblPrimaryValueBigWhite_normal {
  font-weight: normal;
}

/*used for grid table row secondary value*/
.lblSecondaryValue,
.lblSecondaryValueWhite,
.lblSecondaryValueBlack,
.lblSecondaryValueBold, .lblSecondaryValueBoldPurple, .lblSecondaryValueItalic {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.92rem;
}

/*used for grid table row secondary value bold*/
.lblSecondaryValueBold {
  font-weight: bold;
}

.lblSecondaryValueBoldPurple {
  color: #634C9F;
  font-weight: bold;
}

/*used for grid table row secondary white*/
.lblSecondaryValueWhite {
  color: #FFFFFF;
}

.lblSecondaryValue {
  color: #000000;
}

.lblSecondaryValue_preline {
  white-space: pre-line;
}

.lblSecondaryValueBlack {
  color: #000000;
}

/*Used for Required Star*/
.lblFieldNameRequired {
  color: #E74C3C;
}

.lblHelperText {
  color: #E74C3C;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.92rem;
}

/*Primary button in white color*/
.btn-primary {
  -webkit-box-shadow: 0 0 2px #7f8c8d;
  background-color: #369960;
  border-color: #2ecc71;
  box-shadow: 0 0 2px #7f8c8d;
  color: #FFFFFF;
  font-size: 1.6rem;
  height: 4rem;
  padding: 0.8rem 1rem;
  text-transform: uppercase;
}

.btn-primaryBlue {
  background-color: #07C;
  border-color: #07C;
  text-transform: capitalize !important;
}

.btn-primaryRed {
  background-color: #c0392b;
  border-color: #c0392b;
}

/*primary buttons design*/
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  -webkit-box-shadow: 0 0 0 0.32rem #f1f2f9;
  background-color: #2ecc71;
  border-color: #2ecc71;
  box-shadow: 0 0 0 0.32rem #f1f2f9;
  color: #FFFFFF;
  outline: 0;
}

.btn-primary .lower {
  color: #ecf0f1;
}

.btn-primaryRed:hover,
.btn-primaryRed:focus,
.btn-primaryRed:active {
  -webkit-box-shadow: 0 0 0 0.32rem #f1f2f9;
  background-color: #E74C3C;
  border-color: #c0392b;
  box-shadow: 0 0 0 0.32rem #f1f2f9;
  color: #FFFFFF;
  outline: 0;
}

.btn-primaryBlue:hover,
.btn-primaryBlue:focus,
.btn-primaryBlue:active {
  -webkit-box-shadow: 0 0 0 0.32rem #2980b9;
  background-color: #2980b9;
  border-color: #07C;
  box-shadow: 0 0 0 0.32rem #2980b9;
  color: #FFFFFF;
  outline: 0;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #369960;
  border-color: #2ecc71;
  color: #FFFFFF;
}

/*used in secondary buttons (gray color buttons)*/
.btn-secondary {
  background-color: #FFFFFF;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
  font-size: 1.6rem;
  height: 4.2rem;
  min-width: 4rem;
  padding: 0.8rem 1.2rem;
  text-transform: uppercase;
}

/*Used in secondary buttons (gray color buttons)*/
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  -webkit-box-shadow: 0 0 0 0.32rem #edf5f8;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 0.32rem #edf5f8;
  color: #000000;
  outline: 0;
}

/*This is used for morning button on calendar right-hand side*/
.btnSuccessMoring,
.btnSuccessAfterNoon,
.btnSuccessEvening {
  color: #FFFFFF;
  margin-bottom: 1.12rem;
  padding: 0.64rem 0.75rem !important;
}

.btnSuccessMoring {
  background-color: #7CD4F6;
  border: 0.128rem solid #63bbdd;
}

/*This is use AfterNoon button on calendar right hand side*/
.btnSuccessAfterNoon {
  background-color: #f5a4c7;
  border: 0.128rem solid #db8aad;
}

/*This is used for Evening button on calendar right-hand side*/
.btnSuccessEvening {
  background-color: #f4ac3b;
  border: 0.128rem solid #da8c10;
}

/*This is used for morning button hover on calendar right-hand side*/
.btnSuccessMoring:active,
.btnSuccessMoring:focus,
.btnSuccessMoring:hover {
  background-color: #63bbdd;
  border: 0.128rem solid #63bbdd;
  outline: 0;
}

/*This is used for AfterNoon button hover on calendar right-hand side*/
.btnSuccessAfterNoon:active,
.btnSuccessAfterNoon:focus,
.btnSuccessAfterNoon:hover {
  background-color: #db8aad;
  border: 0.128rem solid #db8aad;
  outline: 0;
}

/*This is used for Evening button hover on calendar right-hand side*/
.btnSuccessEvening:active,
.btnSuccessEvening:focus,
.btnSuccessEvening:hover {
  background-color: #da8c10;
  border: 0.128rem solid #da8c10;
  outline: 0;
}

/*This is use for prev/next container*/
.dvCustomPager {
  background-color: #FFFFFF;
  padding: 1.6rem;
  text-align: left;
}

/*This is used for prev/next not last child*/
.dvCustomPager button:not(:last-child) {
  margin-right: 1.6rem;
}

/*This is used for container right*/
.list-button {
  float: right;
}

/*Book appointment page to write date above calendar*/
.btn-secondary-custom-div {
  background-color: #7f8c8d;
  border-radius: 0.4px;
  color: #FFFFFF;
  font-size: 1.6rem;
  padding: 0.8rem 0.48rem;
  text-align: center;
}

.lblValueSameLine {
  -o-text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lblHelperText ol,
.lblHelperText ul {
  padding-left: 15px;
}

.lblHelperText ol li,
.lblHelperText ul li {
  border-radius: 0;
  cursor: pointer;
  display: list-item;
  height: auto;
  line-height: 1rem;
  margin: 0 0.7em 0.2rem;
  position: relative;
  text-align: left;
  width: auto;
}

.ListTermAndCondition ol,
.ListTermAndCondition ul {
  padding-left: 15px;
}

.ListTermAndCondition ol li,
.ListTermAndCondition ul li {
  border-radius: 0;
  cursor: pointer;
  display: list-item;
  margin: 0 0.7em 1rem;
  position: relative;
  text-align: left;
}

.dvServicePrice {
  float: left;
  padding: 0 0.5rem;
  text-align: right;
  width: 40%;
}

.dvServiceDuration {
  float: left;
  padding: 0 0.5rem;
  width: 60%;
}

.btnPrev {
  margin-right: 1rem;
}

.dvCancelPageData {
  background-color: #FFFFFF;
}

.tblAvailable {
  width: 100%;
}

.tblAvailable td {
  font-size: 1.6rem;
  line-height: 2.5rem;
  padding: 0;
  vertical-align: top;
  width: 33.3%;
}

.dvAdditionalData {
  padding-top: 0.5rem;
}

.dvAdditionalData p {
  margin: 0;
}

.dvAdditionalData .link {
  color: #07C;
  cursor: pointer;
}

.dvAdditionalData select {
  max-width: 40rem;
  min-width: 40rem;
}

.dvPatientSearch .another {
  color: #07C;
  cursor: pointer;
}

.dvPatientSearch .another-link {
  cursor: pointer;
  text-decoration: underline;
}

.dvSentOTP {
  background-color: #ecf0f1;
  border-radius: 4px;
  margin: 0 auto;
  margin-bottom: 1.5rem;
  padding: 2rem;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.dvSentOTP_success {
  background-color: #369960;
  border: 2px solid #2ecc71;
  color: #FFFFFF;
}

.inputField_otp-box,
.inputField_otp-box-last {
  -webkit-appearance: none;
  float: left;
  font-size: 2rem;
  font-weight: bold;
  height: 42px;
  margin-right: 4%;
  text-align: center;
  width: 11%;
}

.inputField_otp-box-last {
  margin-right: 0%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dvPhoneControl .inputField {
  border-radius: 0 0.2rem 0.2rem 0;
  float: left;
  width: 100px;
}

.dvPhoneControl select {
  border: 0.08rem solid #7f8c8d;
  border-radius: 0.2rem 0 0 0.2rem;
  border-right: none;
  color: #000000;
  float: left;
  font-size: 1.6rem;
  margin-right: 0;
  padding: 0.5rem 0 0.5rem 0.75rem;
  text-align: left;
}

.dvPhoneControl select:hover {
  background-color: #FFFFFF;
  border: 0.08rem solid #7f8c8d;
  color: #000000;
}

.dvPatientCon {
  border-radius: 4px;
  color: #FFFFFF;
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
  padding: 1rem 3rem;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.dvPatientCon_found,
.dvMultiplePatientCon_found {
  -webkit-box-shadow: 0 0 0.5rem #2ecc71;
  background-color: #FFFFFF;
  border: 0.2rem solid #2ecc71;
  box-shadow: 0 0 0.5rem #2ecc71;
  color: #000000;
}

.dvPatientCon_bold {
  font-weight: 700;
}

.dvMultiplePatientCon_found:hover {
  background-color: #FFFFFF;
  border: 0.2rem solid #2ecc71;
}

.patient-notfound {
  margin-top: 1rem;
  color: #000000;
  padding-bottom: 3rem !important;
}

.dvPatientCon p {
  font-size: 1.8rem;
  margin: 0;
}

.patient-notfound p {
  font-size: 1.6rem;
  margin: 0;
}

.dvPatientCon svg {
  margin: 0;
  width: 100%;
}

.close-result {
  color: #07C;
  float: right;
  text-align: right;
}

.lblAddOne {
  color: #07C;
  cursor: pointer;
}

.dvMultiplePatientCon {
  border-radius: 4px;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  margin: 2rem 0.75rem;
  margin-bottom: 0.2rem;
  padding: 4rem 2rem;
  text-align: center;
  width: 25rem;
}

.dvMultiplePatientCon .link {
  -o-text-overflow: ellipsis;
  color: #07C;
  font-weight: 700;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lblLink {
  color: #07C;
  font-weight: 700;
}

.dvMultiplePatientCon .additiondetails {
  font-size: 1.4rem;
}

.dvPatientCon .count {
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0 0 3rem;
}

.dvPatientCon .lblCount {
  background-color: #E74C3C;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: bold;
  padding: 0.2rem 1rem;
}

.dvCaptionData {
  text-align: right;
  line-height: 4rem;
}

.dvSearchControl {
  margin: 0 auto;
  width: 60%;
}

.dvBgColorGray {
  background-color: #ecf0f1;
}

/*21. START BUTTON*/
/*22. START TOOLTIP*/
.SuccessTooltip,
.InfoTooltip,
.SuccessSmallTooltip,
.ErrorTooltip {
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  -webkit-box-shadow: 0 0 0.2px #7f8c8d;
  border-radius: 0.4rem;
  box-shadow: 0 0 0.2px #7f8c8d;
  color: #FFFFFF;
  display: inline-block;
  font-family: LatoRegular;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  z-index: 1200;
}

/*Used for Tooltip*/
.deTooltipNew {
  border-radius: 0.4rem;
  display: inline-block;
  left: 0;
  margin: 0 auto;
  min-width: 9rem;
  padding-top: 3rem;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  width: auto;
  z-index: 1100;
}

/*Used for image*/
.alertImg {
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  margin-left: 1rem;
  margin-right: 0;
  padding-right: 0;
  top: 2rem;
}

/*Used for image*/
.alertImg:hover {
  -ms-transform: translateY(-0.2rem);
  -webkit-transform: translateY(-0.2rem);
  color: #FFFFFF;
  transform: translateY(-0.2rem);
}

/*Used for Alert Msg*/
.lblAlertMsgInnerTxt {
  color: #FFFFFF;
  font-size: 1.8rem;
  margin-top: 0.5rem;
}

/*Used for Status Tooltip Success*/
.SuccessTooltip {
  background-color: #2ecc71;
}

/*Used for Status Tooltip Warning*/
.InfoTooltip,
.SuccessSmallTooltip {
  background-color: #f4ac3b;
}

/*Used for Status Tooltip Error*/
.ErrorTooltip {
  background-color: #E74C3C;
}

.WarningTooltip:before,
.ErrorTooltip:before,
.SuccessSmallTooltip:before {
  font: normal normal normal 1.4rem/1 FontAwesome;
  line-height: 2.5rem;
  margin-right: 1rem;
  margin-top: 0.5rem;
}

/*Used for WarningTooltip*/
.WarningTooltip:before {
  content: "\f071";
  font-size: 2.2rem;
}

/*Used for SuccessSmallTooltip*/
.SuccessSmallTooltip:before {
  background-color: #da8c10;
  border-radius: 0.4rem;
  content: "\f129";
  font-size: 2.2rem;
  padding: 0.2rem 1rem;
}

/*Used for ErrorTooltip*/
.ErrorTooltip:before {
  content: "\f05a";
  font-size: 2.2rem;
}

/*Used for Tooltip*/
.SuccessTooltip,
.WarningTooltip,
.SuccessSmallTooltip,
.ErrorTooltip {
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  border-radius: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: inline-block;
  margin: 0 auto;
  min-height: 5.5rem;
  min-width: 10rem;
  padding: 1rem 2.5rem;
  z-index: 1200;
}

/*Used for Tooltip*/
.WarningTooltip {
  -webkit-box-shadow: 0 0 0.2rem #7f8c8d;
  background-color: #f4ac3b;
  box-shadow: 0 0 0.2rem #7f8c8d;
  color: #FFFFFF;
}

/*Used for Tooltip*/
.WarningTooltip:before {
  content: "\f071";
  font: normal normal normal 1.4rem/1 FontAwesome;
  font-size: 2.5rem;
  line-height: 2.5rem;
  margin-right: 1rem;
  margin-top: 0.5rem;
}

.dvModalContent {
  padding: 1rem;
}

.modal-content-center {
  text-align: center;
}

.btnPaypal {
  background-color: transparent;
  border: none;
  height: 83px;
  outline: 0;
  padding: 0;
}

.btnPaypal .paypal-button {
  height: 55px;
}

.btnPayPalClose {
  background-color: #FFFFFF;
  border: 1px solid #7f8c8d;
  border-radius: 17px;
  cursor: pointer;
  height: 26px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 26px;
}

.btnPayPalClose:focus,
.btnPayPalClose:active,
.btnPayPalClose:hover,
.btnPayPalClose:visited {
  outline: 0;
}

.dvEnterOTPContainer {
  text-align: center;
}

.dvEnterOTPContainer input[type=text],
.dvEnterOTPContainer input[type=email],
.dvEnterOTPContainer input[type=tel] {
  display: inline;
  text-align: center;
  width: 200px;
}

.custom_frame {
  border: none;
  width: 100%;
}

.dvNewPatient {
  padding-top: 20px;
}

.dvNewPatient fieldset {
  border-top: 1px solid #ecf0f1;
}

.dvNewPatient fieldset legend {
  font-weight: bold;
  margin: 0;
  padding: 0 10px;
  width: auto;
}

.dvLoadingData {
  padding: 10px 20px 20px;
  text-align: center;
}

.loading-dots--dot {
  -webkit-animation: dot-keyframes 1.5s infinite ease-in-out;
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: #2ecc71;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 10px;
}

.loading-dots--dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.loading-dots--dot:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.loading-dots--dot:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.loading-dots--dot:nth-child(5) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes dot-keyframes {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
@keyframes dot-keyframes {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.close-btn-secondary-custom-transparent {
  background-color: transparent;
  border: none;
  font-size: 30px;
  height: 34px;
  line-height: 30px;
  outline: 0;
}

.modal-footer-custom {
  padding: 5px;
  text-align: center;
}

.modal-body .height {
  height: 80px;
  text-align: center;
}

.dvModalBG {
  -moz-user-select: inherit;
  -ms-user-select: inherit;
  -webkit-user-select: inherit;
  background-color: rgba(182, 182, 182, 0.6);
  user-select: inherit;
}

.dvModalBG .modal-content {
  -webkit-box-shadow: none !important;
  border: none !important;
  border-radius: 10px !important;
  border-top: 8px #63bbdd !important;
  box-shadow: none !important;
}

.dvModalBG .modal-footer {
  border-top: 0.128rem solid #ecf0f1;
  display: block;
  padding: 0.2rem 1rem !important;
  text-align: center;
}

.dvModalBG .modal-header {
  border-bottom: 0.128rem solid #ecf0f1;
}

.dvModalBG .modal-header .header {
  color: #000000;
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  position: relative;
  width: 100%;
}

.text-primary {
  cursor: pointer;
}

.dvNoRecToDisplay {
  margin-top: 0;
  padding-top: 12%;
  text-align: center;
}

.dvBrandLogo img {
  border-radius: 4px;
  cursor: pointer;
  max-height: 6.2rem;
}

.dvBrandLogo .name {
  font-weight: bold;
}

.container-loading-full {
  min-height: 100vh;
}

.container-loading {
  /*background: url(/Content/img/dummyoab.webp);*/
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0.48rem;
  min-height: 97vh;
  text-align: center;
  width: 100%;
}

.container-loading-mobile {
  /*background: url(/Content/img/dummyoabmobile.webp);*/
  background-size: cover;
}

.loading-image {
  -webkit-animation: blinkerimg 1s linear infinite;
  animation: blinkerimg 1s linear infinite;
}

/*Used for blinker*/
@-webkit-keyframes blinkerimg {
  50% {
    opacity: 0.6;
  }
}
@keyframes blinkerimg {
  50% {
    opacity: 0.6;
  }
}
.container-loading .progress-bar-oab {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.container-loading .full-bar {
  background-color: #f3f6f6;
  border-radius: 2rem;
  color: #000000;
}

.container-loading .full-bar .bar {
  background-color: #2ecc71;
  color: #FFFFFF;
  height: 0.5rem;
  width: 33%;
}

.container-loading .msg {
  color: #000000;
  font-size: 1.4rem;
}

.nav {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link.active {
  font-weight: 700;
}

.select-option {
  /* webkit browsers */
  -webkit-appearance: inherit;
  /* Firefox */
  -moz-appearance: inherit;
  /* modern browsers */
  appearance: inherit;
}

/* ===== FIX: keep price + duration side-by-side inside dvRateAndDuration =====
   Place this at the END of your stylesheet (after Bootstrap) so it overrides defaults
*/
/* Make the meta container a single non-wrapping flex row and center it */
.dvRateAndDuration {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important; /* LEFT ALIGN the price + mins */
  gap: 0.6rem !important;
  white-space: nowrap !important;
  box-sizing: border-box;
}

/* Override Bootstrap .col-* behaviour only when used INSIDE dvRateAndDuration:
   - remove float (Bootstrap columns float), use inline-block so they sit inline,
   - cancel the % width so columns don't force stacking,
   - remove the negative padding effect inside this micro-layout. */
.dvRateAndDuration > [class*=col-] {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Make labels inside the meta compact and prevent wrapping/overflow */
.dvRateAndDuration .customlabel {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0.6rem 0.8rem !important; /* reduce only here */
  max-width: 9.5rem !important; /* tune if you want wider */
  box-sizing: border-box !important;
}

/* Button: ensure chevron and text do not wrap */
.rowdataOuter .list-button,
.dvRateAndDuration ~ .list-button,
.list-button {
  white-space: nowrap !important;
  min-width: 110px !important;
  margin-top: 0 !important;
}

/* Small screens: allow graceful wrap if absolutely necessary */
@media (max-width: 520px) {
  .dvRateAndDuration {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
  }
  .dvRateAndDuration .customlabel {
    max-width: 6.5rem !important;
    padding: 0.45rem 0.6rem !important;
  }
  .list-button {
    min-width: 90px !important;
  }
}