@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --primary: #257BC3;
  --primary-dark: #006bb3;
}
.required::after {
  content: '*';
  color: red;
  margin-left: 5px;
}
.btn{
  padding: 12px 2em;
}
.container{
  padding: 0 25px;
}
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  border-radius: 30px;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}
.btn-secondary{
  width: 44px;
  height: 44px;
  border-radius: 30px;
  background: #F4F4FE !important;
  box-shadow: 0px 1px 3px 0px rgba(105, 105, 105, 0.22);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 1em !important;
}
html {
  font-size: 14px;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #C7CCD2;
}
.form-control, .form-select{
  display: flex;
  height: 44px;
  padding: 6px 18px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 24px;
  box-shadow: 0px 2px 2px 0px rgba(234, 233, 244, 0.50);
}
.form-control:focus{
  border-color: #fff !important;
}
.form-control::placeholder{
  font-size: 14px;

}
.form-select{
  font-size: 14px;
}
.form-label{
  margin-bottom: .5rem !important;
  font-size: 14px;
}
/* Base styling for the custom radio button */
input.form-custom-input {
  appearance: none; /* Remove default radio styling */
  width: 24px;
  height: 24px;
  border-radius: 50%; /* Make it circular like a radio button */
  border: 2px solid var(--primary); /* Thin border with --primary color */
  background-color: transparent; /* Transparent background */
  position: relative;
  cursor: pointer;
  outline: none; /* Remove default focus outline */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Styling for when the radio button is checked */
input.form-custom-input:checked {
  background-color: var(--primary); /* Primary color when checked */
  border-color: var(--primary); /* Keep the border same as primary */
}

/* Styling for the "dot" inside the radio button when checked */
/* Use FontAwesome check mark when checked */
input.form-custom-input:checked::after {
  content: "\f00c"; /* Font Awesome check mark (Unicode) */
  font-family: 'Font Awesome 5 Free'; /* Font Awesome font family */
  font-weight: 900; /* Font Awesome uses 900 for solid icons */
  color: #fff; /* White check mark */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px; /* Adjust the size of the check mark */
}

/* Hover state for a nice effect */
input.form-custom-input:hover {
  border-color: var(--primary); /* Darken the border on hover */
  box-shadow: 0 0 5px var(--primary); /* Slight shadow on hover */
}


body {
  margin-bottom: 60px;
  background-color: #F4F4FE;
}
main{
  max-width: 440px;
}
#paginationControls button {
  font-weight: bold;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  color: black;
}
#paginationControls button:active, #paginationControls button:hover, #paginationControls button:focus, #paginationControls button.active {
  background: #F8F9FB;
  color: #0082C9;
  border-radius: 0.25rem;
}
.card{
  background-color: transparent;
  border: none;
}

.btn-bd-secondary {
    background-color: #F8F9FA !important;
    color: #5D5E60;
    border-color: #5D5E60 !important;
}

    .btn-bd-secondary:active, .btn-bd-secondary:focus, .btn-bd-secondary:hover {
        border: 1px solid #4b4c4d !important;
        background-color: #4b4c4d !important;
    }

        .btn-bd-secondary:active i, .btn-bd-secondary:focus i, .btn-bd-secondary:hover i {
            color: #fff !important;
        }

    .btn-bd-secondary i {
        font-size: 1.5rem;
    }

#DoctorSearchResults, #SelectedDoctorDisplay, #prescriberQuestionsSection, #reviewSection {
    .card{
    background: #F3F3F3 !important;
    border-radius: 20px;
    /* shadow 3 */
    box-shadow: 0px 1px 5px 0px rgba(105, 105, 105, 0.33);
  }
}

.circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 8px solid #1E90FF; /* Blue border for the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #1E90FF;
    background-color: white; /* To match the background color inside the circle */
}

    .circle span {
        display: inline-block;
    }

.progress-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
}

.logo {
    max-height: 120px;
}

.progress-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
}

.progress-ring {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg); /* Rotates the circle to start progress from the top */
}

.progress-ring__background,
.progress-ring__circle {
    stroke-dasharray: 339.29; /* Circumference of the circle (2 * π * r) */
    stroke-width: 8; /* Stroke width for the circle */
}

.progress-ring__circle {
    stroke-dashoffset: 33.93; /* Adjust based on percentage (for 92% completion) */
    transition: stroke-dashoffset 0.6s ease; /* Smooth transition */
}

.progress-value {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #1E90FF;
}

#manualPrescriberEntrySection .input-validation-error {
    border-color: red;
}

/* Media query for screen sizes smaller than 576px */
@media (max-width: 576px) {
    .logo {
        max-height: 80px;
    }

    .progress-circle {
        width: 80px;
        height: 80px;
    }

    .progress-ring {
        width: 80px;
        height: 80px;
    }

    .progress-ring__background,
    .progress-ring__circle {
        stroke-width: 6; /* Slightly reduce stroke width for smaller size */
    }

    .progress-value {
        font-size: 18px; /* Reduce text size for smaller circle */
    }
}