:root {
  --site-red:#D7063A;
  --site-heading-colour:var(--site-red);
  --site-red-dark:#D7063A;
  /*20% darker*/
  --site-coral:#fe6f61;
  --site-blue:#8fb7fb;
  --site-blue-dark:#2b76f7;
  --site-blue-light:#34cceb;
  /*aka website bg blue*/
  --heading-blue:#4976C4;
  --bs-container-max-width: 1320px;
  --bg-blenrep:#EBF0F9;
  --color-blenrep:rgba(73, 118, 196, 1);
  --bg-color-resources: rgba(143, 183, 252, 1);
  --text-color-black: rgba(35, 33, 34, 1);
  --loader-col: var(--site-red);
  --bs-btn-active-bg: #D7063A;
}

.btn-group .btn-primary {
	--bs-btn-active-bg: #D7063A;
}


html body form .radio-buttons div.radio label input[type="radio"][value="Strongly disagree" i],
html body form .radio-buttons div.radio label input[type="radio"][value="Disagree" i],
html body form .radio-buttons div.radio label input[type="radio"][value="Agree" i],
html body form .radio-buttons div.radio label input[type="radio"][value="Strongly agree" i] {
  -webkit-appearance: none;
  appearance: none;
  
  width: 60px;
  height: 60px;
  cursor: pointer;
  
  /* Clear Bootstrap background dot */
  background-image: none;
  --bs-form-check-bg-image: none;
  
  /* Default Navy color */
  background-color: rgba(0, 25, 101, 1);
  color: rgba(0, 25, 101, 1);
  
  /* Mask settings */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  
  transition: transform 0.2s ease, background-color 0.2s ease;
  margin: 0;
}


html body form .radio-buttons div.radio label input[type="radio"][value="Strongly disagree" i]:hover,
html body form .radio-buttons div.radio label input[type="radio"][value="Disagree" i]:hover,
html body form .radio-buttons div.radio label input[type="radio"][value="Agree" i]:hover,
html body form .radio-buttons div.radio label input[type="radio"][value="Strongly agree" i]:hover {
  transform: scale(1.08);
}


html body form .radio-buttons div.radio label input:checked[type="radio"][value="Strongly disagree" i],
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Disagree" i],
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Agree" i],
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Strongly agree" i] {
  background-color: var(--site-red);
  background-image: none;
  --bs-form-check-bg-image: none;
}


html body form .radio-buttons div.radio label input:checked[type="radio"][value="Strongly disagree" i] + span.option-label,
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Disagree" i] + span.option-label,
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Agree" i] + span.option-label,
html body form .radio-buttons div.radio label input:checked[type="radio"][value="Strongly agree" i] + span.option-label {
  color: var(--site-red);
  font-weight: bold;
}


/* 1. Strongly Disagree */
html body form .radio-buttons div.radio label input[type="radio"][value="Strongly disagree" i] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><path d='M 28 35 L 42 45 M 42 35 L 28 45' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 58 45 L 72 35 M 58 35 L 72 45' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 32 72 Q 50 55 68 72' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><path d='M 28 35 L 42 45 M 42 35 L 28 45' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 58 45 L 72 35 M 58 35 L 72 45' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 32 72 Q 50 55 68 72' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
}

html body form .radio-buttons div.radio label input[type="radio"][value="Disagree" i] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><circle cx='35' cy='40' r='6' fill='black'/><circle cx='65' cy='40' r='6' fill='black'/><path d='M 32 70 Q 50 58 68 70' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><circle cx='35' cy='40' r='6' fill='black'/><circle cx='65' cy='40' r='6' fill='black'/><path d='M 32 70 Q 50 58 68 70' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
}


html body form .radio-buttons div.radio label input[type="radio"][value="Agree" i] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><circle cx='35' cy='40' r='6' fill='black'/><circle cx='65' cy='40' r='6' fill='black'/><path d='M 32 60 Q 50 78 68 60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><circle cx='35' cy='40' r='6' fill='black'/><circle cx='65' cy='40' r='6' fill='black'/><path d='M 32 60 Q 50 78 68 60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
}


html body form .radio-buttons div.radio label input[type="radio"][value="Strongly agree" i] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><path d='M 28 42 Q 38 28 48 42' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 52 42 Q 62 28 72 42' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 32 60 Q 50 82 68 60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='none' stroke='black' stroke-width='3'/><path d='M 28 42 Q 38 28 48 42' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 52 42 Q 62 28 72 42' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M 32 60 Q 50 82 68 60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
}


html body form .radio-buttons div.radio label:has(input[value="Strongly disagree" i]),
html body form .radio-buttons div.radio label:has(input[value="Disagree" i]),
html body form .radio-buttons div.radio label:has(input[value="Agree" i]),
html body form .radio-buttons div.radio label:has(input[value="Strongly agree" i]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

html body form .radio-buttons div.radio label:has(input[value="Strongly disagree" i]) span.option-label,
html body form .radio-buttons div.radio label:has(input[value="Disagree" i]) span.option-label,
html body form .radio-buttons div.radio label:has(input[value="Agree" i]) span.option-label,
html body form .radio-buttons div.radio label:has(input[value="Strongly agree" i]) span.option-label {
  margin-top: 8px;
  color: #0a194f;
  font-weight: 700;
  max-width: 100px;
}

#service-ProgramFeedback .radio-buttons {
	display: flex;
	flex-direction: column;
}

@media (max-width: 767px) {
  .cp-service__submit {
    width: 100%;
  }
  
  .stepped-form .stepped-form__indicators {
	  top: 0;
      display: flex;
	  justify-content: flex-end;
  }
}

.radio-buttons:has(input[value="Strongly agree" i]) .radio {
	margin-right: 5px;
	padding-left: 5px;
}

#layout-base .btn-group > label.btn {
  border-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.stepped-form .stepped-form__indicators li.active {
	background: var(--site-red);
}

.stepped-form__controls>.stepped-form__control--next {
	background: var(--site-red);
}

.btn-group input[name="TimeOnTreatment"] + label {
  max-height: 30px;
  min-width: 250px;
  padding: 0;
}

.btn-group input[name="AstellasTreatment"] + label {
  display: block;
  padding: 3rem 0;
}

.checkboxList input {
	border: 1px solid black;
}

.form-control {
	background: #F0F0F0;
}

header.global-header .navbar .global-header__header-link {
	background-color: white;
	padding: 1rem 2rem;
}

.cp-service__body h1 {
	margin-bottom: 1rem;
}

.cp-service h1, .cp-service h2, .cp-service h3, .cp-service h4 {
	margin: 1rem 0;
}

.cp-service h5 {
	margin: 2rem 0 1rem 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(16%) sepia(100%) saturate(5000%) hue-rotate(340deg)
            brightness(85%) contrast(110%);
    cursor: pointer;
}

a.custom-tooltip {
	border: 1px solid var(--site-red-dark);
	color: var(--site-red-dark);
}

footer.global-footer {
	text-align: center;
}

span.field-label a {
	color: var(--site-blue-light);
}