/*
TABLE OF CONTENTS
=============================================
1. max-width: 1024px| 102.4rem
2. max-width: 992px | 99.2rem
3. max-width: 768px | 76.8rem
4. max-width: 576px | 57.6rem
*/
html {
  font-size: 62.5%;
}

@media (max-width: 1024px) {
  /*used as a container*/
  .container {
    padding: 1% 0 !important;
  }
  /*used as a data container*/
  .dataContainer {
    padding: 0 1.6rem 1.6rem !important;
  }
  /*used as a footer container*/
  .divHeaderFooter {
    padding: 0.8rem 1.6rem !important;
  }
}
@media (max-width: 992px) {
  /*used as a container*/
  .container {
    padding: 3% 2% !important;
  }
  /*This is use for display center*/
  .divSelectService:not(.divSelectServiceConfirmed) .column {
    text-align: center;
    padding-bottom: 3.2rem !important;
  }
  .divSelectServiceConfirmed .column {
    padding: 2rem 0 !important;
    text-align: center;
  }
  .circular {
    margin: 0 !important;
  }
  .dvSearchControl {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  /*used as a container*/
  .container {
    padding: 2% 0% !important;
  }
  .cliniclogoHeader img {
    max-width: 12rem !important;
  }
  .dvComCircle {
    float: none;
    margin: 0 auto;
  }
  /*used as a data container*/
  .dataContainer {
    padding: 0 1.6rem 1.6rem !important;
  }
  /*used as a footer container*/
  .divHeaderFooter {
    padding: 0.8rem 1.6rem !important;
  }
  /*This is use for container left*/
  .list-button {
    float: right !important;
  }
  /*This is use for display center*/
  .divSelectService:not(.divSelectServiceConfirmed) .column {
    text-align: center;
    padding-bottom: 1.2rem !important;
  }
  .circular {
    margin: 0 !important;
  }
  .divSelectServiceConfirmed .column {
    padding: 2rem 0 !important;
    text-align: center;
  }
  .dvSearchControl {
    width: 100% !important;
  }
  /*This is use Header Column*/
  .divHeaderFooter .column {
    padding-bottom: 2rem !important;
  }
  /*This is use Appointment Summary*/
  .divHeaderFooter .dvApptSummary {
    top: 0;
    width: 100%;
  }
  /*This is use Grid Column*/
  .gridcolumn {
    padding-bottom: 0.48rem !important;
    padding-top: 0.48rem !important;
  }
  .dvPrograssInd {
    padding: 0 1rem;
  }
  .gridcolumn.right {
    text-align: left !important;
  }
  .customlabel.small {
    padding: 0 !important;
  }
  .divHeaderFooter .column.social-media {
    display: flex;
    padding-bottom: 1.2rem !important;
  }
  .divHeaderFooter .column.header {
    padding-bottom: 2rem !important;
    text-align: center !important;
  }
  /*This is use Small Icon Morning/Evening*/
  .small-Icon {
    margin-left: 10% !important;
    margin-right: 10% !important;
  }
  .dvCaptionData {
    text-align: center !important;
    line-height: 4rem !important;
  }
  .inputField.otp-box,
  .inputField.otp-box-last {
    width: 13.3%;
  }
  .dvPatientCon {
    padding: 1rem 1rem !important;
  }
  .dvAdditionalData select {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
  .search-patient-container .main-section {
    width: 100%;
  }
  .dvPatientSearch {
    padding: 1rem;
  }
}
@media (max-width: 576px) {
  .mainBodyContainer {
    border-radius: 0 !important;
  }
  /*used as a container*/
  .container {
    padding: 0% !important;
  }
  /*used as a data container*/
  .dataContainer {
    padding: 0 !important;
  }
  .dvComCircle {
    float: none;
    margin: 0 auto;
  }
  .circular {
    margin: 0 !important;
  }
  /*used as a footer container*/
  .divHeaderFooter {
    padding: 0.8rem 0.8rem 0 !important;
  }
  .dvCurrentMonth {
    font-size: 1.4rem !important;
    line-height: 3.5rem !important;
  }
  .list-button {
    float: left !important;
    margin-top: 0px !important;
  }
  .dvImgLocation {
    width: 100% !important;
  }
  .table-striped .rowdataOuter .gridcolumn .btn-primary {
    width: 100% !important;
  }
  .divSelectService:not(.divSelectServiceConfirmed) .column {
    text-align: center;
    padding-bottom: 1.2rem !important;
  }
  .divSelectService {
    padding: 1rem !important;
  }
  .divSelectServiceConfirmed .column {
    padding: 2rem 0 !important;
    text-align: center;
  }
  /*This is use Header Column*/
  .divHeaderFooter .column {
    padding-bottom: 3.2rem !important;
    text-align: center !important;
  }
  .divHeaderFooter .clinicLogo,
  .divHeaderFooter .lblFooterLogoTxt {
    float: left !important;
  }
  .divHeaderFooter .clinicFooterlogo.column {
    text-align: left !important;
  }
  .divHeaderFooter .column.social-media {
    display: flex;
    padding-bottom: 1.2rem !important;
  }
  .divHeaderFooter .column.header {
    padding-bottom: 2rem !important;
  }
  .divHeaderFooter .column.header img {
    max-width: 10rem !important;
  }
  /*This is use Appointment Summary*/
  .divHeaderFooter .dvApptSummary {
    top: 0;
    width: 100%;
  }
  /*This is use Small Icon Morning/Evening*/
  .small-Icon {
    margin-left: 3% !important;
    margin-right: 3% !important;
  }
  .dvSearchControl {
    width: 100% !important;
  }
  .txtSearchBox {
    padding: 0 1.2rem !important;
  }
  .dvDayViewBoxCalendar .lblDate {
    margin: 0 !important;
  }
  .dvErrorMsgForBook {
    width: 90% !important;
  }
  .dvAlertMsgInnerTxt {
    width: 85% !important;
  }
  .lblScheduleText {
    margin-left: 20px;
  }
  .btnCancelApptContainer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: white;
    padding: 20px 0;
    text-align: center;
  }
  .btnCancelAppointment {
    /*position: fixed;
    bottom: 20px;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;*/
  }
  .list-button {
    margin-top: 10px;
  }
  .pb-xs-0 {
    padding-bottom: 0 !important;
  }
  .pt-xs-0 {
    padding-top: 0 !important;
  }
  .dvCaptionData {
    text-align: center !important;
    line-height: 4rem !important;
  }
  .inputField.otp-box,
  .inputField.otp-box-last {
    width: 13.3%;
  }
  .dvPatientCon {
    padding: 1rem 1rem !important;
  }
  .pnlFormContainerPatient {
    padding: 1rem;
  }
  .search-patient-container .main-section {
    width: 100%;
  }
  .dvPatientSearch {
    padding: 1rem;
  }
}