.profile-container .full-row {
	padding: 1rem;
}
.profile-sidebar h3 {
    font-family: "SF Pro Display", Arial, sans-serif;
    font-style: normal;
    font-size: 1rem;
}
.dc-pro-header {
  padding: 1rem;
}
.dc-pro-header .col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: center;
  padding: 0;	
}
/* HLYK-CALENDAR */
.profile-sidebar .hlyk-datepicker,
.profile-container .datepicker-inline {
	width: 100%;
	padding: 0;
}
.profile-sidebar .hlyk-datepicker td.today.disabled.disabled-date.day {
	background: none;
	color: #ffffff;
	opacity: 1;
}
.profile-sidebar .hlyk-datepicker .dow {
	color: #3A6D79;
}
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover:hover,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover:hover,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover:active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover:active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover.active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled.active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover.active,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover.disabled,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled.disabled,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover.disabled,
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today[disabled],
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today:hover[disabled],
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled[disabled],
.profile-sidebar .hlyk-datepicker .datepicker table tr td.today.disabled:hover[disabled] {
    background: none;
}
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
	background: #89BE53 !important;
}
.profile-sidebar .hlyk-datepicker td.today.disabled.disabled-date.day:before {
	background: #89BE53 !important;
	opacity: 1;
}
/* END HLYK CALENDAR */
/*
.datepicker .datepicker-switch {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 400;
  }

  .datepicker table tr td.day {
    position: relative;
    z-index: 1;
  }

  .datepicker table tr td.day:hover:before {
    /* 		  display:block !important; */

    opacity: 1 !important;
  }

  .datepicker table tr td.day:before {
    content: "";
    background: #eee;
    display: block;
    height: 30px;
    width: 30px;
    z-index: -1;
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 10px;

  }
*/
  #calendar .datepicker-inline {
    width: 100%;
  }

  .datepicker table tr td.day.focused,
  .datepicker table tr td.day:hover {
    background: transparent !important;
  }

  .datepicker table tr td.active.day:before {
    content: "";
    background: #89BE53 !important;
    display: block;
    height: 30px;
    width: 30px;
    opacity: 0.4;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 13px;
    opacity: 1 !important;
    background-image: none !important;
  }

  #page-container p {
    font-family: 'SF Pro Display', sans-serif;
  }

  #page-container {
    font-family: 'SF Pro Display', sans-serif;
    line-height: 20px;
    background: #f3f5f7;
  }

  .buttonLabelTwo p {
    margin-bottom: 0 !important;
  }

  #appointment {
    margin-bottom: 10px;
  }

  .back {
    color: #3A6D79;
    background-color: #FBFCFF;
    border: none;
    font-weight: 400;
    font-family: 'SF Pro Display', sans-serif;
  }

  .back:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .back i {
    padding-right: 10px;
  }

  .content-row {
    border: 1px solid #B7CEDC;
    background: #ffffff;
  }

  #female {
    display: none;
    color: black;
  }

  #pregnant {
    display: none;
    color: black;
  }
  
  .profile-heading {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  div.tele-appt-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  div.tele-appt-container:after {
    content: none;
  }
  table.table-condensed {
    border-collapse: separate !important;
      border-spacing: 5px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
  }

  .about {
    display: flex;
    float: left;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 16px;
  }

  .time-picker {
    /* width: 100%; */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .buttonPicker {
    display: none;
  }

  .buttonLabel {
    padding: 7px 19px 23px 19px;
    margin: 4px;
    background: #fff;
    border: 1px solid #3A6D79;
    cursor: pointer;
    width: 150px;
    height: 55px;
    font-size: 14px;
    border-radius: 8px;
  }

  .buttonPickerTwo {
    display: none;
  }

  .buttonLabelTwo {
    padding: 10px 8px 10px 8px;
    background: #fff;
    border: 1px solid #3A6D79;
    cursor: pointer;
    border-radius: 8px;
    font-size: 12.2px;
    margin: 0;
  }

  .buttonPickerTwo:checked+.buttonLabelTwo {
    background: #ECFDFF;
    border: 1px solid #3A6D79 !important;
  }

  .buttonPicker:checked+.buttonLabel {
    background: #ECFDFF;
    border-color: #3A6D79 !important;
  }

  .gender-form {
    /* float: left; */
  }

  .custom-select {
    color: black;
    padding: 8px 16px;
    border: 1px solid;
    border-color: #B7CEDC;
    border-radius: 10px;
    cursor: pointer;
    background-color: white;
    width: 366px;
    height: 42px;
    opacity: 1;
    font-size: 14px;
  }

  /* .table{
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-family: sans-serif;
}

.table-condensed{
    border-collapse: separate;
    border-spacing: 5px;
    border: solid;
    border-radius: 8px;
    border-width: 1px;
    border-color: #B7CEDC;
    width: 390px;
    height: 338px;
}

.old.disabled.day{
    color: #D4E2EA !important;
}

td.disabled.day{
    color: #D4E2EA !important;
}

td.day{
    opacity: 0.8;
    color: #89BE53;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    padding: 5px;
}

td.day:hover{
    opacity: 1;
    cursor: pointer;
} */
  /* .datepicker-switch{
    cursor: pointer;
} */
  .next {
    cursor: pointer;
  }

  .dow {
    color: #3A6D79;
    border-radius: 4px;
  }
  .continue-button {
    width: 100%;
    height: 45px;
    background-color: #416B77;
    border-radius: 4px;
    opacity: 1;
    color: white;
    font-size: 16px;
    text-align: center;
    font-weight: normal;
    border: none;
    display: flex;
    font-weight: 300 !important;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    margin-top: 30px;
    /* top: 8%; */
    /* margin-left: 65%; */
    margin-bottom: 10px;
  }

  .continue-button:hover {
    background-color: #416B77;
    opacity: 0.9;
    cursor: pointer;
  }

  .droparrow {
    position: relative;
    margin-right: 30%;
  }

  .droparrow:after {
    content: '\f078';
    font: normal normal normal 17px/1 FontAwesome;
    color: #B7CEDC;
    right: 11px;
    opacity: 1;
    top: 1px;
    height: 34px;
    padding: 9px 8px 8px 12px;
    position: absolute;
    z-index: 999999999999999;
    pointer-events: none;
    background: #ffffff;
  }

  select::-ms-expand {
    display: none;
  }

  select {
    font-size: 14px;
  }

  .droparrow select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-word-break: normal;
    word-break: normal;
  }

  .droparrowtwo {
    position: relative;
    margin-right: 5%;
  }

  .custom-select:focus,
  .custom-select:hover,
  .droparrowtwo select:hover,
  .droparrowtwo select:focus {
    box-shadow: none !important;
    border-color: #3A6D79 !important;
  }

  .droparrowtwo:after {
    content: '\f078';
    font: normal normal normal 17px/1 FontAwesome;
    color: #B7CEDC;
    right: 11px;
    opacity: 1;
    top: 1px;
    height: 34px;
    padding: 9px 8px 8px 12px;
    position: absolute;
    z-index: 999999999999999;
    pointer-events: none;
    background: #ffffff;
  }

  .droparrowtwo select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-word-break: normal;
    word-break: normal;
  }

  #page-container a:hover {
    text-decoration: none !important;
    color: #000000 !important;
  }

  .radio-button {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Hide the browser's default radio button */
  .radio-button input {
    opacity: 0;
    cursor: pointer;
  }

  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
  }

  .text-red {
    color: #F17C5D !important;
  }

  /* On mouse-over, add a grey background color */
  .radio-button:hover input~.checkmark {
    background-color: #3A6D79;
  }

  /* When the radio button is checked, add a blue background */
  .radio-button input:checked~.checkmark {
    background-color: #3A6D79;
  }

  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the indicator (dot/circle) when checked */
  .radio-button input:checked~.checkmark:after {
    display: block;
  }

  /* Style the indicator (dot/circle) */
  .radio-button .checkmark:after {
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3A6D79;
  }

  /* Reset */
  .ui-datepicker,
  .ui-datepicker table,
  .ui-datepicker tr,
  .ui-datepicker td,
  .ui-datepicker th {
    margin: 0;
    padding: 0;
    border: none;
    border-spacing: 0;
  }

  select#myState,
  .buttonLabel,
  .buttonLabelTwo {
    border: 1px solid #B7CEDC !important;
    border-radius: 8px !important;
  }

  /* Calendar Wrapper */
  .ui-datepicker {
    display: none;
    width: 294px;
    /* height: 250px; */
    padding: 35px;
    cursor: default;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 12px;
    border: 1px solid;
    border-radius: 8px;
    border-color: #B7CEDC;
    /* -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    -moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0); */
  }

  /* Calendar Header */
  .ui-datepicker-header {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
  }

  .ui-datepicker-title {
    text-align: center;
  }

  /* Month */
  .ui-datepicker-month {
    position: relative;
    padding-right: 15px;
    color: #000000;
  }

  /* .ui-datepicker-month:before {
    display: block;
    position: relative;
    top: 5px;
    right: 0;
    width: 20px;
    height: 5px;
    content: '<';
    background-color: black;
} */
  /* .ui-datepicker-month:after {
    display: block;
    position: absolute;
    top: 5px;
    left: 100px;
    width: 20px;
    height: 5px;
    content: '>';
    background-color: black;
} */
  /* Year */
  .ui-datepicker-year {
    padding-left: 8px;
    color: #000000;
  }

  /* Prev Next Month */
  .ui-datepicker-prev,
  .ui-datepicker-next {
    position: absolute;
    top: -2px;
    padding: 5px;
    width: 10px;
    cursor: pointer;
    color: black;
    content: '>';
  }

  .ui-datepicker-prev {
    left: 0;
    padding-left: 0;
  }

  .ui-datepicker-next {
    right: 12px;
    padding-right: 12px;
  }

  .ui-datepicker-prev span,
  .ui-datepicker-next span {
    display: block;
    width: 5px;
    height: 10px;
    /* text-indent: -9999px; */
    color: black;
  }

  .ui-datepicker-prev span {
    background-position: 0px 0px;
  }

  .ui-datepicker-next span {
    background-position: -5px 0px;
  }

  .ui-datepicker-prev-hover span {
    background-position: 0px -10px;
  }

  .ui-datepicker-next-hover span {
    background-position: -5px -10px;
  }

  /* Calendar "Days" */
  .ui-datepicker-calendar th {
    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
    color: #3A6D79;
  }

  .ui-datepicker-calendar td {
    padding: 0 7px;
    text-align: center;
    line-height: 26px;
  }

  .ui-datepicker-calendar td .ui-datepicker-unselectable {
    color: gray;
  }

  /* .ui-datepicker-calendar td > .ui-state-default{
    color: #89BE53;
} */
  .ui-datepicker-calendar td {
    color: gray;
  }

  a.ui-state-default {
    color: #89BE53;
  }

  .ui-datepicker-calendar .ui-state-default {
    display: block;
    width: 26px;
    outline: none;
    text-decoration: none;
    border: 1px solid transparent;
  }

  /* Day Active State*/
  .ui-datepicker-calendar .ui-state-active {
    color: white;
    border-color: #89BE53;
    border-radius: 40px;
    background-color: #89BE53
  }

  .p-100 {
    padding-left: 100px !important;
  }

  /* Other Months Days*/
  .ui-datepicker-other-month .ui-state-default {
    color: #565656;
  }

  @media(max-width:1024px) {
    .p-100 {
      padding-left: 15px !important;
    }

    .teleheading {
      font-size: 18px;
    }
  }

  input:hover,
  input:focus {
    box-shadow: none;
    outline: none;
  }

  @media(max-width:768px) {

    .appoitnment-heading {
      margin-top: 30px !important;
    }
    
    #page-container {
      padding: 20px;
    }

    .about {
      display: block !important;
    }

    .about p {
      margin-left: 0 !important;
      margin-top: 10px;
      margin-bottom: -10px !important;
    }

    .droparrow {
      margin-right: 0 !important;
    }

    .states p {
      width: 100% !important;
    }

    label p {
      font-size: 12px !important;
    }
  }
  @media(min-width: 768px) {
    .profile-heading {
      text-align: left;
    }
    .dc-pro-header .col {
      flex-direction: row; 
    }	
    div.tele-appt-container {
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: nowrap;      
    }    
  }
  @media(max-width:360px) {
    .datepicker table tr td.day:before {
      left: 0px !important;
    }

    .datepicker-inline {
      width: fit-content !important;
    }
  }

  .select2-container--default .select2-selection--single {
    min-height: 36px;
    font-size: 14px;
    margin-bottom: 10px;
  }

  th.dow:nth-child(1) {
    /*   padding-left:20px !important; */
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
  }

  th.dow:nth-child(7) {
    /*   padding-right:20px !important; */
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }

  th.dow {
    background: #EEF5F9;
    border-radius: 0 !important;
    font-size: 11px;
    font-weight: 600 !important;
    line-height: 11px;
    /* margin-right: 20px !important; */
    /*     width: 40px !important; */
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 12px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px !important;
    margin-top: -10px;
    padding-left: 15px;
  }

  .datepicker-inline {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .datepicker table tr td.active.active {
    background-image: none !important;
    background-color: transparent !important;
  }

  .datepicker td {
    text-align: center;
    width: 25px;
    height: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 11px;
    border-radius: 50% !important;
    border: none;
    padding: 5px;
    margin: 4px !important;
    font-weight: 400;
  }

  .date-output {
    position: relative;
  }

  .date-output img {
    position: absolute;
    display: block;
    left: 0;
    top: 10px;
    height: 20px;
  }

  .select-box {
    width: 100%;
    margin-bottom: 20px;
  }

  .column-section {
    border-top: 1px solid #B7CEDC
  }

  @media (min-width: 992px) {
    .column-section {
      border-top: 0;
      border-left: 1px solid #B7CEDC
    }
  }

  @media (min-width: 1440px) {
    .container {
      max-width: 1380px;
    }
  }
  @media (min-width: 1600px) {
    .container {
      max-width: 1540px;
    }
  }