:root {
    --color1: #019889;
    --color1_light: #10cebb;
    --color1_dark: #007a6e;
}

@font-face {
    font-family: 'GilroyLight';
    src: url('../fonts/GilroyLight.eot');
    src: url('../fonts/GilroyLight.eot') format('embedded-opentype'),
        url('../fonts/GilroyLight.woff2') format('woff2'),
        url('../fonts/GilroyLight.woff') format('woff'),
        url('../fonts/GilroyLight.ttf') format('truetype'),
        url('../fonts/GilroyLight.svg#GilroyLight') format('svg');
}

@font-face {
    font-family: 'GilroyRegular';
    src: url('../fonts/GilroyRegular.eot');
    src: url('../fonts/GilroyRegular.eot') format('embedded-opentype'),
        url('../fonts/GilroyRegular.woff2') format('woff2'),
        url('../fonts/GilroyRegular.woff') format('woff'),
        url('../fonts/GilroyRegular.ttf') format('truetype'),
        url('../fonts/GilroyRegular.svg#GilroyRegular') format('svg');
}

@font-face {
    font-family: 'GilroyMedium';
    src: url('../fonts/GilroyMedium.eot');
    src: url('../fonts/GilroyMedium.eot') format('embedded-opentype'),
        url('../fonts/GilroyMedium.woff2') format('woff2'),
        url('../fonts/GilroyMedium.woff') format('woff'),
        url('../fonts/GilroyMedium.ttf') format('truetype'),
        url('../fonts/GilroyMedium.svg#GilroyMedium') format('svg');
}


@font-face {
    font-family: 'GilroyExtraBold';
    src: url('../fonts/GilroyExtraBold.eot');
    src: url('../fonts/GilroyExtraBold.eot') format('embedded-opentype'),
        url('../fonts/GilroyExtraBold.woff2') format('woff2'),
        url('../fonts/GilroyExtraBold.woff') format('woff'),
        url('../fonts/GilroyExtraBold.ttf') format('truetype'),
        url('../fonts/GilroyExtraBold.svg#GilroyExtraBold') format('svg');
}

@font-face {
    font-family: 'GilroySemiBold';
    src: url('../fonts/GilroySemiBold.eot');
    src: url('../fonts/GilroySemiBold.eot') format('embedded-opentype'),
        url('../fonts/GilroySemiBold.woff2') format('woff2'),
        url('../fonts/GilroySemiBold.woff') format('woff'),
        url('../fonts/GilroySemiBold.ttf') format('truetype'),
        url('../fonts/GilroySemiBold.svg#GilroySemiBold') format('svg');
}


* {
    font-family: 'GilroyRegular';
}
.font-w-600{
    font-family: GilroyMedium;
}
.font-w-700{
    font-family: GilroySemiBold;
}
.font-w-800{
    font-family: GilroyExtraBold;
}
input[type="text"] {
    outline: none;
}
.btn-anchor {
    color: #007DFC;
}

.btn-anchor-theme {
    color: var(--color1);
}

.text-gray {
    color: #838383;
}

.b-medium {
    font-family: GilroyMedium;
}
button.nav-button {
    background: var(--color1);
}
button.nav-button:hover {
    background: var(--color1_dark);
}

.text-btn {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: #838383;
    text-decoration: none;
}

.text-btn:hover {
    color: #000;
}

.text-btn-theme {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--color1);
    text-decoration: none;
}

.text-btn-theme:hover {
    color: var(--color2);
}

a {
    text-decoration: none;
    cursor: pointer !important;
}

.font-14 {
    font-size: 14px;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    display: block;
}

input[type=checkbox].form-checkbox {
    accent-color: var(--color1);
}

.errorMsg {
    font-size: 13px;
    color: #f00;
}

.respHeight{
    min-height: 100vh;
}

.unauthContainer {
    z-index: 1;
    position: relative;
}

.wrapperUnAuth {
    min-height: 100vh;
}

.unauthContainer {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* .formWrapper > .container, .formWrapper > .container > .row {
    height: 100%;
} */
.wrapperUnAuth {
    align-items: center;
    display: flex;
    display: -webkit-flex;
    width: 100%;
    min-height: 100vh;
}

.bgUnauth {
    position: relative;
    background: #FAF9F5;
    padding: 20px 0;
}

.bgUnauth:before {
    content: "";
    background: url(../images/flower-top.png) top left no-repeat;
    position: absolute;
    width: 20vw;
    height: 20vw;
    background-size: contain;
    top: 0;
}

.bgUnauth:after {
    content: "";
    background: url(../images/flower-bottom.png) bottom right no-repeat;
    position: absolute;
    width: 20vw;
    height: 20vw;
    background-size: contain;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.boxFormShadow {
    box-shadow: 0px 3px 10px 0px #0000001A;
    background: #fff;
    padding: 20px 30px;
    border-radius: 14px;
}

.loginBoxImg {
    max-width: 400px;
    margin: 0 auto;
}

.loginBoxImg img {
    width: 100%;
    margin-bottom: 20px;
}

.loginBoxImg p {
    font-size: 24px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: center;
    color: #313131;
}

.boxForm h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 42.59px;
    text-align: center;
    font-family: GilroySemiBold;
}

form label {
    font-family: GilroyMedium;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.41px;
    margin-bottom: 10px;
}

.boxForm form input {
    border: 1px solid #E6E6E6;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    padding: 15px 20px;
    border-radius: 12px;
    letter-spacing: 0.2px;
}

.boxForm form select {
    border: 1px solid #E6E6E6;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    padding: 15px 20px;
    border-radius: 12px;
    letter-spacing: 0.2px;
}

.boxForm form textarea {
    border: 1px solid #E6E6E6;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    padding: 15px 20px 25px 20px;
    border-radius: 12px;
    letter-spacing: 0.2px;
}

.character-count {
    position: absolute;
    bottom: 6px;
    right: 8px;
    color: #838383;
    font-size: 12px;
}

.form-group {
    margin-bottom: 15px;
}

.btn {
    padding: 10px 20px;
    border-radius: 12px;
    background: #ddd;
    font-family: 'GilroyMedium';
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
}

.btn-sm {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 20px;
}
.btn-danger {
    background: #dc3545;
}
.radius-12 {
    border-radius: 12px;
}

.full-width {
    width: 100%;
}

.btn-theme {
    background: var(--color1);
    color: #fff;
}

.btn-theme:hover {
    background: var(--color1_dark);
    color: #fff;
}

.btn-theme-border {
    border-color: var(--color1_dark);
    ;
    background: transparent;
    color: var(--color1_dark);
}

.btn-theme-border:hover {
    background: var(--color1_dark);
    color: #fff;
}

.orLine {
    max-width: 400px;
    margin: 0 auto;
    border-top: 1px solid #E6E6E6;
    position: relative;
}

.otherSignupContent {
    font-family: GilroyRegular;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #838383;
}

.orLine p {
    color: #838383;
    background: #fff;
    position: relative;
    display: inline-block;
    padding: 0 10px;
    transform: translate(0, -50%);
    margin: 0;
}

.inputWrapper {
    position: relative;
}


.inputWrapper button.text-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0px, -50%);
}

.inputWrapper input {
    padding-right: 90px !important;
    width: 100%;
}




.formProfileHeading {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
}

.formProfileHeading h2 {
    width: 100%;
    text-align: center;
    font-family: GilroySemiBold;
    font-size: 32px;
    font-weight: 400;
    line-height: 39.2px;
    margin-bottom: 0;
}

.formProfileHeading a {
    position: absolute;
    left: 0;
    top: 0;
}
.formProfileHeading button {
    left: 60px;
    position: absolute;
}

.profileImage {
    width: 170px;
    margin: 0 auto;
    text-align: center;
}

.proImgCircle {
    width: 170px;
    height: 170px;
    background: var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 12px;
}

.proImgCircle img.proIcon {
    max-width: 80px;
}

.profileImage label {
    position: relative;
    display: inline-block;
    color: var(--color1);
    cursor: pointer;
}

.profileImage label input[type="file"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.otherFormProfile {
    max-width: 550px;
    margin: 20px auto 0;
}

.profilestepswrp {
    display: flex;
    border-radius: 7px;
}

.profilestep {
    width: 25%;
    border: 1px solid var(--color1);
    padding: 10px 20px;
    border-left: 0;
    position: relative;
}

.profilestep.active {
    background: var(--color1);
}

.profilestep.active h3 {
    color: #fff;
}

.profilestep h3 {
    margin: 0;
    font-family: GilroyMedium;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color1);
    text-align: center;
}

.profilestep:nth-last-child(1) {
    border-radius: 0 7px 7px 0;
}

.profilestep:nth-child(1) {
    border-left: 1px solid var(--color1);
    border-radius: 7px 0 0 7px;
}

.profilestep.active:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25px;
    border-left-width: 25px;
    border-style: solid;
    border-top-width: 22.5px;
    border-bottom-width: 22.5px;
    border-color: transparent transparent transparent #019889;
    transform: translate(100%, 0);
}

.profilestep:nth-last-child(1).active:after {
    content: none;
}

.genderBox {
    border-radius: 10px;
    border: 1px solid #E6E6E6;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.genderBoxWrp input {
    display: none !important;
}

.genderBox span {
    color: #1B1B1B;
}

.genderBox svg {
    margin-bottom: 10px;
}

.genderBoxWrp input:checked~.genderBox {
    background: var(--color1);
    color:#fff;
}

.genderBoxWrp input:checked~.genderBox span {
    color: #fff;
}

.genderBoxWrp input:checked~.genderBox svg path {
    stroke: #fff;
}

.boxForm .react-datepicker-wrapper {
    display: block;
}

.boxForm .react-datepicker-wrapper input {
    width: 100%;
    display: block;
    border-radius: 7px;
}

.custom-datepicker {
    border: 1px solid #019889;
    /* Border color */
    border-radius: 4px;
    /* Rounded corners */
    padding: 10px;
    /* Padding */
}

.react-datepicker {
    background-color: #ffffff;
    /* Background color of the calendar */
    border: 1px solid #019889;
    /* Border color of the calendar */
}

.react-datepicker__header {
    background-color: #019889;
    /* Header background color */
    color: white;
    /* Header text color */
}

.react-datepicker__current-month {
    color: white;
    /* Current month text color */
}

.react-datepicker__day--selected {
    background-color: #019889;
    /* Selected day background color */
    color: white;
    /* Selected day text color */
}

.react-datepicker__day:hover {
    background-color: #019889;
    /* Hover effect for days */
    color: white;
    /* Hover text color */
}

.react-datepicker__current-month {
    display: none;
    /* Hides the current month heading */
}

.day-option span {
    background: #fff;
    display: block;
    color: #838383;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 5px 15px;
    font-size: 14px;
}

.day-option input:checked~span {
    background: var(--color1);
    color: #fff;
    border-color: var(--color1);
}

.day-option input {
    display: none;
}

.reactdropdown>div[class*="css-"] {
    border: 1px solid #E6E6E6;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    padding: 5px 10px;
}
.treatmentGroup__name h2 {
    font-family: GilroySemiBold;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    color: #313131;
    margin: 0;
}

.treatmentGroup__dateTime p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    margin: 0;
}

.treatmentGroup a {
    padding: 20px;
}
.editTreatment {
    padding: 20px 0;
    text-align: center;
}

.editTreatment a {
    font-family: 'GilroyMedium';
}

.treatlistHead h2 {
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    font-family: 'GilroySemiBold';
    margin-bottom: 20px;
}

.treatProgress label {
    font-size: 14px;
    color: var(--color1);
    margin-bottom: 7px;
}

.treatProgress .progress {
    background: transparent;
    border: 1px solid #E6E6E6;
    height: 5px;
}

.fillProgress {
    background: var(--color1);
    height: 100%;
    width: 33%;
}

.treatlistHead {
    margin-bottom: 25px;
}

.treatListItems {
    margin-bottom: 25px;
}

.card {
    border: 1px solid #E6E6E6;
}

.treatListItemsHead h3 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #313131;
    font-family: 'GilroySemiBold';
}

.treatListItemsBody {
    display: flex;
    display: -webkit-flex;
    gap: 20px;
}

.treatCheckbox input {
    width: 20px;
    height: 20px;
}

.treatBodylistGroup {
    margin-bottom: 20px;
}

.treatBodyList {
    width: 100%;
}

.treatBodylistGroup:nth-last-child(1) {
    margin-bottom: 0;
}

.treatBodylistGroup h4 {
    font-size: 16px;
    color: #313131;
    font-family: 'GilroyMedium';
    margin-bottom: 10px;
}

.treatBodylistGroup p {
    font-size: 14px;
    color: #838383;
    margin: .0;
}

.treatListItemsHead p {
    font-size: 14px;
    color: #838383;
    margin: .0;
}




/* terms and conditions */
/* Parent Class for Both Pages */


.legal-page h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.legal-page h2 {
    font-size: 1.8rem;
    font-family:GilroySemiBold ;
    margin-top: 30px;
    margin-bottom: 15px;
}

.legal-page p {
    font-size: 1rem;
    margin-bottom: 15px;
}

.legal-page ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.legal-page li {
    margin-bottom: 10px;
}

.legal-page a {
    color: #3498db;
    text-decoration: none;
}

.legal-page a:hover {
    text-decoration: underline;
}



.terms-page h1 {
    color: #27ae60;
}

.terms-page h2 {
    font-family:GilroySemiBold ;
    color: #16a085;
}




.privacy-page h2 {
    color: #1abc9c;
}
/* terms and conditions end */
img.proImage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.react-datepicker__navigation {
    top: 4px !important;
}
.react-datepicker__navigation--previous {
    left: -10px !important;
}
.react-datepicker__navigation--next {
    right: -10px !important;
}
.previewIMGorPDF img {
    width: 48px;
    height: 48px;
    border: 1px solid #e1e1e1;
    padding: 3px;
    border-radius: 11px;
    object-fit: contain;
}
.inputPrivewWrp .inputWrapper {
    width: calc(100% - 50px)
}
.modal {
    padding: 0 !important;
}
.searchCommunityBx input {
    border: 1px solid #E6E6E6;
    padding: 14px 20px;
    border-radius: 12px;
}

.searchCommunityBx {
    margin-bottom: 20px;
}
.articleViewImg {
    position: relative;
    padding-top: 56.25%;
}

.articleViewImg img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
}
small.tagline {
    font-size: 13px;
    color: #a7a7a7;
    letter-spacing: 1px;
}
.active>.page-link, .page-link.active {
    background: #019889;
    border-color: #019889;
}
.deocotorImgBx {
    overflow: hidden;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin: 20px auto;
}

.deocotorImgBx img {
    width: 100%;
    height: 100%;
}
.doctorDetails {
    max-width: 400px;
    margin: 0 auto;
}

.doctorName h2 {
    font-family: GilroySemiBold;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
}

.doctorName {
    margin-bottom: 20px;
}

.dobGenderBox {
    background: #E8F3F1;
    padding: 10px 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.dobGenderBox ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
}

.dobGenderBox ul li {
    list-style: none;
    font-family: GilroyMedium;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    flex: 25%;
}

.dobGenderBox ul li span {
    display: block;
    color: #019889;
}

.dobGenderBox ul li span.dobGIcon {
    margin-bottom: 8px;
}

.educatioBox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.educatioBox {
    border: 1px solid #E6E6E6;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 20px;
}


.educatioBox ul li {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #838383;
    gap: 6px;
    padding: 3px 0;
}

.inforGroup label {
    font-family: GilroyMedium;
    font-weight: 400;
    font-size: 16px;
    color: #313131;
    margin-bottom: 7px;
}

.inforInput.form-control {
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    color: #838383;
}

.inforInput.form-control.active {
    background: var(--color1);
    color: #fff;
}

.aboutcotent p span {
    color: var(--color1);
}

.aboutcotent p {
    color: #838383;
}

.durationFilter select {
    border: 1px solid #E6E6E6;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #838383;
    padding: 15px 20px;
    border-radius: 12px;
    letter-spacing: 0.2px;
}

.earningCountWrp {
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.earningCountBox h3 {
    font-family: GilroySemiBold;
    font-weight: 400;
    font-size: 18px;
    margin: 0;
}

.earningCountBox p {
    font-family: GilroySemiBold;
    font-weight: 400;
    font-size: 24px;
    margin: 0;
    color: #313131;
}
.earningCountBox {
    padding-bottom: 20px;
    border-bottom: 1px solid #E8F3F1;
    margin-bottom: 20px;
}

.earningCountBox:nth-last-child(1) {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

.positive {
    color: #019889 !important;
}

.negative {
    color: #BA1C1C !important;
}
.upcominCardBx.active {
    background: #ebf3f3;
}

.unseenCount {
    margin-left: 6px;
    background: red;
    font-size: 10px;
    display: inline-block;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    top: -10px;
    position: relative;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
.notificationItem h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #4e4d4d;
}

.notificationItem p {
    font-size: 14px;
    color: #787878;
    margin: 0;
}

.notificationItem {
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    margin-bottom: 15px;
}
.notificationTime{
    font-size: 12px;
    color: #a7a7a7;
}