.hh-baa-holder {
  padding-top: 100px;
   padding-bottom:100px;
  padding-left: 4%;
  padding-right: 4%;
}

.hh-baa-holder #root {
  transform: scale(.8);
  transform-origin: top center;
}

.hh-baa-holder .note-filter-row .Dropdown-root .ddl-react-select__value-container .ddl-react-select__single-value,
.hh-baa-holder .note-filter-row .Dropdown-root .ddl-react-select__value-container .ddl-react-select__placeholder{
    font-family: ivypresto-text, serif !important;
    line-height: 19px;
    font-weight: 200;
    color: #607280 !important;
    letter-spacing: 1px;
	font-style: normal;
}
.hh-baa-holder .hh-hdr-2{
	z-index: 1;
}
.hh-baa-holder #OpenSlotsDiv label{
	color: #17314B;
	line-height: 20px;
	font-weight: 500;
	font-family: sofia-pro, sans-serif;
}
.hh-baa-holder #OpenSlotsDiv .btn{
	font-weight: 400;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__current-month,
.hh-baa-holder #OpenSlotsDiv .setting-bg .open-slots-container .v-week-task-text,
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg .h2{
    font-family: ivypresto-headline, serif;
    color: #17314B;
    font-size: 36px;
    line-height: 44px;
    font-weight: 400;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__day-names{
	padding-top: 20px;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__day-names .react-datepicker__day-name{
	font-size: 12px;
	line-height:15px;
	font-family: sofia-pro, sans-serif;
	font-weight: 600;
    letter-spacing: 1px;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__month .react-datepicker__week .react-datepicker__day{
	font-size: 25px;
	line-height: 25px;
	font-family: sofia-pro, sans-serif;
	font-weight: 600;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .open-slots-container .rectangle {
	padding: 8px 5px;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .open-slots-container .rectangle .details span.this-week-tpoic{
	font-size:16px;
	font-family: sofia-pro, sans-serif;
}

.hh-baa-holder #OpenSlotsDiv .btn-next-step{
	font-weight: 500;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__navigation{
	height: 16px;
    width: 16px;
    transform: rotate(45deg);
	top: 25px;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next{
	right: 40px;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 2px;
}
.hh-baa-holder #OpenSlotsDiv .setting-bg .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous{
	left: 40px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 2px;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg small{
	font-size: 14px;
    line-height: 20px;
	font-family: sofia-pro-light, sans-serif;
    font-weight: 300;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg{
	position: relative;
	box-shadow: 0px 58px 20px -126px #c7c7c7,
				0px 8px 30px -26px #d2d2d2,
				0px 88px 70px -36px #d4d4d4;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg:before{
	content: '';
    position: absolute;
    left: -165px;
    top: -232px;
    height: 90%;
    width: 90%;
	background: url(/wp-content/uploads/2021/02/halftone-02.svg) center center no-repeat;
	background-position: center center;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg:after{
	content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 280px;
    width: 58%;
	background: url(/wp-content/uploads/2021/02/halftone-03-small.svg) center center no-repeat;
	background-position: center center;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg .h2{
	margin-bottom: 20px;
	z-index: 1;
    position: relative;
}
.hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg .setting-bg-inner{
	max-width: 80%;
}
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg input,
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg textarea{
	font-size: 16px;
    line-height: 19px;
    padding: 15px 20px;
    height: auto;
	font-weight: 300;
	font-family: ivypresto-text, serif;
}
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg textarea{
	min-height: 120px;
}
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg #gender{
	height: auto;
}
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg #gender label{
	 font-weight: 300;
	font-family: ivypresto-text, serif;
    font-size: 17px;
  position: relative;
  padding-left: 25px;
  display: inline-block;
}
.hh-baa-holder #OpenSlotsDiv #create-appointment .setting-bg #gender label input[type="radio"]{
	height: 21px;
	width: 21px;
  position: absolute;
  left: 0px;
  top: 0px;
}

@media(max-width: 900px){
  .hh-baa-holder .note-filter-row-inner {display: block !important;}
  .hh-baa-holder .note-filter-row-inner>div {margin-bottom: 10px; margin-right: 0px !important;}
  .hh-baa-holder #OpenSlotsDiv .setting-bg-inner>div {display: block !important;}
  .hh-baa-holder .open-slots-container {width: 100%;}
  .hh-baa-holder #OpenSlotsDiv>div>div {display: block !important;}
  .hh-baa-holder #patient-info {width: auto !important;}
  .hh-baa-holder #OpenSlotsDiv .col-6 {flex: none; max-width: none;}
  .hh-baa-holder #OpenSlotsDiv>div>div>div:nth-child(2) {width: auto !important;}
  .hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg .h2 {font-size: 28px;}
  .btn-large {padding: 12px 34px;}
}
@media(max-width: 600px){
  .hh-baa-holder #openslot-date {transform: scale(.7);}
  .hh-baa-holder #OpenSlotsDiv #patient-info .setting-bg .h2 {font-size: 24px;}
}

@media(max-width: 500px){
  .hh-baa-holder #openslot-date {transform: scale(.7) translateX(-8%);}
  .hh-baa-holder .btn-large {padding: 8px 36px;}
}
@media(max-width: 425px){
  .hh-baa-holder #openslot-date {
    transform: scale(.7) translateX(-25%);
  }
}