/*!
Theme Name: Get Out the Clot
Theme URI: 
Author: Aaron Podbelski
Author URI: 
Description: Get out the Clot website
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gotc-2024
*/

/* Custom Fonts - START */
/* @font-face {
	font-family: "Poppins";
	font-style: SemiBold;
	font-weight: 600;
	font-display: block;
	src: url("dist/webfonts/Poppins-SemiBold.ttf") format("truetype");
} */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap'); */

/* @font-face {
	font-family: "Source Sans Pro";
	font-style: SemiBold;
	font-weight: 400;
	font-display: block;
	src: url("dist/webfonts/SourceSansPro-Regular.ttf") format("truetype");
} */
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); */

/* Custom Fonts - END */

/* Bootstrap 5 root variables. Changed values noted by comment, others may be removed. */
:root {
	
	--bs-font-sans-serif: "Source Sans Pro", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	
	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	/* --bs-body-color: #212529; */
	--bs-body-color: #2E2E2C;
	
	--bs-body-bg: #fff;
}

/* New variables - do not work when added in above */
:root {
	
	--real-font-headers: "Poppins", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--real-footer-height: 315px;
	--real-placeholder-color: #6e757c;
	--real-focus-color: #496ed9; /* #000000 */
}




/* Basic Elements - START */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

body {
/* 	font-size: 1.15em; */
	font-size: 1.15em;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 0.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --real-gray );
	font-family: var( --real-font-headers );
}
.h1,
h1 {
	font-size: 5.6rem;
}
.h2,
h2 {
	font-size: 3.4rem;
}
.h3,
h3 {
/* 	font-size: 2.4rem; */
	font-size: 2.0rem;
}
.h4,
h4 {
/* 	font-size: 2.0rem; */
	font-size: 1.75rem;
}
.h5,
h5 {
/* 	font-size: 1.75rem; */
	font-size: 1.5rem;
}
.h6,
h6 {
	font-family: var( --bs-font-sans-serif );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 28px;
}

.faux-h6 {
	/* margin-bottom: 0.5rem; */
	font-weight: 700;
	/* line-height: 1.2; */
	color: var( --real-gray );
	/* font-size: 1.5rem; */
}

.lg-logo-font-size {
	font-size: 60px;
}

a {
	color: var( --real-blue-link ) !important;
	text-decoration: underline;
	transition: all 0.2s;
}

a:hover {
	color: var( --real-blue-link-hover ) !important;
	text-decoration: underline;
}

a.dark-background-link, .dark-background-link a {
	color: var( --real-gray-lite-22 ) !important;
}

a.dark-background-link:hover, .dark-background-link a:hover {
	color: var( --bs-white ) !important;
}

.dark-background-text {
	color: var( --bs-white ) !important;
}


a:focus {
	
	/* outline: 2px solid var( --real-focus-color ); */
	
}

a.primary-button:focus {
	
	outline: 2px solid var( --real-focus-color );
	margin: 5px !important;
	padding: 5px !important;
}




input:focus {
	border: 2px solid var( --real-focus-color ) !important;
	margin: inherit;
}

input[type="submit"]:focus {
	border: 5px dashed var( --real-focus-color ) !important;
	margin: inherit;
}

a[type="button"] {
	text-decoration: none;
}

input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ 
	color: var( --real-placeholder-color ) !important;
	opacity: 1; /* Firefox */
}

input::-ms-input-placeholder { /* Microsoft Edge */
	color: rgb(34, 0, 0) !important;
}

img {
	max-width: 100%;
	height: auto;
	object-fit: inherit;
/* 	border-radius: 1em; */
}

a sup {
	display:inline-block;
	text-decoration:none;
}

ul {
	list-style: none;
}

ul li::before {
	content: "\2022";  
	/* color: var( --real-dark-green );  */
	font-weight: bold; 
	display: inline-block; 
	width: 1em; 
	margin-left: -1em; 
}

ul li ol li::before {
	content: none;
}

ul.navbar-nav li::before {
	content: none;
}

/* ul#menu-main-nav li::before {
	content: none;
} */

ul li p {
	display: inline;
}

ol {
	/* list-style: none;  */
	/* counter-reset: li; */
	/* counter-reset: item; */
}

ol {
	list-style-type: decimal;
}

ol ol {
	list-style-type: lower-alpha;
}

ol ol ol {
	list-style-type: lower-roman;
}



ol li {
	counter-increment: li
}
/* Basic Elements - END */

/* Bootstrap 5 overrides - START */

fieldset {
	/* border: 1px groove var( --real-gray-lite ); */
}

.fs-6 {
	font-size: 0.6em !important;	
}

.btn-link:hover {
	color: var( --bs-green );
}

.bg-secondary {
	background-color: var(--bs-gray-400) !important;
}

.dropdown-item.active, 
.dropdown-item:active {
	color: var( --bs-gray-900 );
	background-color: inherit;
	text-decoration: underline !important;
	font-weight: 700 !important;
}

.accordion-button {
	color: var( --bs-gray-900 );
	text-decoration: none;
	font-weight: 600;
	background-color: var( --bs-white );
}

.accordion-button::after {
	background-image: none;
}

.accordion-button:not(.collapsed) {
	color: var( --bs-orange );
	text-decoration: none;
	font-weight: 600;
	background-color: var( --bs-gray-200 );
}

.accordion-button:not(.collapsed)::after {
	background-image: none;
}

.accordion-button > i {
	position: absolute;
	right: 2em;
}

.dropdown-item {
	white-space: break-spaces;
}

/* Bootstrap 5 overrides - END */





/* Cookie Pro overrides - START */



.ot-sdk-show-settings {
	color: var( --bs-gray-dark ) !important;
	background-color: white !important;
	border: none !important;
	height: auto !important;
	white-space: normal;
	word-wrap: break-word;
	padding: 0px !important;
	font-size: 0.8em;
	line-height: 1.2;
	cursor: pointer;
}

.ot-sdk-show-settings:hover {
	background-color: white !important;
	color: var( --real-blue-link-hover ) !important;
}

/* Cookie Pro overrides - END */

/* Utilities - START */

.real-breadcrumb {
	padding-top: 10px;
}

.transparent-card {
	display: flex;
	flex-direction: column;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.inside-full-width {
	max-width: 1320px;
	width: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	margin-right: auto;
	margin-left: auto;
}

.pen-text-lg-align-right {
	text-align: right;
}

.pen-text-lg-align-left {
	text-align: left;
}

/* .btn-close {
	color: white;
} */

/* LightBox Modal - START */
.close-btn-svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
	
}

.modal-content {
	background-color: transparent;
	border: none;
}

.modal-header {
	padding: 0px 15px 0px 0px;
	/* align-items: center; */
	border-bottom: none;
	background-color: transparent;
}

.video-icon-overlay {
	position: relative;
	display: inline-block; /* Ensures the div can have width and height */
}

.video-icon-overlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 130px; /* Circle size */
	height: 130px; /* Circle size */
	background-color: rgba(48, 66, 106, 0.75); /* Semi-transparent blue */
	border-radius: 50%; /* Makes the background a circle */
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s ease-in-out;
	pointer-events: none;
}

.video-icon-overlay::after {
	content: '';
	position: absolute;
	width: 0; 
	height: 0; 
	border-style: solid;
	border-width: 25px 0 25px 44px; 
	border-color: transparent transparent transparent white; 
	border-radius: 1px; 
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	cursor: pointer;
	pointer-events: none;
}

.video-icon-overlay:hover::before {
	background-color: rgba(48, 66, 106, 1); 
}

.video-btn {
	cursor: pointer;
}
/* LightBox Modal - END */


/* Are these being used?  - START */
.edge-to-edge {
	position: relative;
}

.edge-to-edge:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -1;
	width: 200vw;
	right: -400px;
}

/* Are these being used?  - START */

.real-color-gray:after {
	background-color: var( --real-gray );
}

.real-color-gray-lite:after {
	background-color: var( --real-gray-lite );
}

.real-color-dark-green {
	color: var( --real-dark-green );
}

.real-color-orange {
	color: var( --real-orange );
}

.video-border-1 {
	border: 2px solid var( --real-gray-lite );
}

.real-orange-border-1 {
	border: 2px solid var( --real-orange );
	border-radius: 3px;
}

.real-blue-border-1 {
	border: 1px solid var( --real-blue-link-hover );
	border-radius: 10px;
}

.real-gray-border-1 {
	border: 3px solid var( --real-gray-lite-22 );
	border-radius: 10px;
}



.linked-header {
	color: var( --real-gray ) !important;
}

.linked-header a {
	color: var( --real-gray ) !important;
}

.mobile-small-icon img {
	transform: scale(0.5, 0.5);
}

.bg-gray-lite {
	background-color: var( --real-gray-lite );
}

.bg-gray-lite-22 {
	background-color: var( --real-gray-lite-22 );
}

.real-big-text-1 {
	font-size: 30px;
}



.cta-button-group {
	float: left;
}

.go-article-banner {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	height: 100%;
	margin-left: -50vw;
	margin-right: -50vw;
	
	
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.ml-n1 {
	margin-left: -0.25rem !important;
}

.ml-n2 {
	margin-left: -0.50rem !important;
}

.ml-n3 {
	margin-left: -1.0rem !important;
}

.ml-n4 {
	margin-left: -1.5rem !important;
}
	
.ml-n5 {
	margin-left: -3.0rem !important;
}

.mr-n2 {
	margin-right: -0.50rem !important;
}

.mb-n1 {
	margin-bottom: -0.25rem !important;
}

.mb-n2 {
	margin-bottom: -0.50rem !important;
}

.mb-n3 {
	margin-bottom: -1.00rem !important;
}

.mb-n3-5 {
	margin-bottom: -1.10rem !important;
}

.mb-n4 {
	margin-bottom: -1.50rem !important;
}

.mb-n5 {
	margin-bottom: -3.00rem !important;
}

.mb-n5-2 {
	margin-bottom: 0rem !important;
}

.py-2-5 {
	padding: 0.75rem 0rem !important;
}

.fw-500 {
	font-weight: 500;
}

.color-real-purple {
	color: var(--bs-orange) !important;
	border-color: var(--bs-orange) !important; 
}

.color-real-slate {
	color: var( --real-gray ) !important;
}

a.color-real-slate {
	color: var( --real-gray ) !important;
}

.img-contain {
	object-fit: contain;
	/* padding-top: 2em; */
}

.img-contain img {
	object-fit: contain !important;
}

.aspect-ratio-1-1 {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
}

.list-circled {
	display: block;
	padding: 0 0 0 26px;
	list-style: none;
	overflow: hidden;
	counter-reset: numList;
}

.list-circled li {
	width: 100%;
	float: left;
	position: relative;
	color: #000;
	padding: 1rem 0 2rem 4rem;
	font-size: 23px;
	text-align: left;
	line-height: 1.1;
}

.list-circled li:before {
		counter-increment: numList;
		content: counter(numList);
		font-size: 24px;
		font-weight: 400;
		float: left;
		position: absolute;
		left: -26px;
		text-align: center;
		color: #fff;
		line-height: 1.8;
		top: 12px;
		width: 44px;
		height: 44px;
		background-color: var( --bs-green );
		-moz-border-radius: 999px;
		border-radius: 999px;
		margin-right: 6rem;
}

.text-shadow-dark {
	/* text-shadow: 1px 1px var( --bs-gray-800 ); */
}

.real-btn-solid {
	background-color: var( --real-orange );
	border-radius: 20px;
	color: var( --bs-white ) !important;
	text-shadow: 1px 1px 1px var( --real-orange-drop );
	padding: 8px 20px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.4s;
}

.real-btn-solid a {
	color: var( --bs-white ) !important;
	text-decoration: none;	
}

.real-btn-solid:hover {
/* 	padding: 5px 20px; */
	color: var( --bs-white ) !important;
	text-decoration: none;	
	background-color: var( --real-orange-hover );
	text-shadow: 1px 1px 1px var( --real-orange-hover-drop );
}

.real-btn-empty {
	color: var( --real-orange );
	font-size: 1.2em;
	padding: 5px 30px;
	border: 3px solid var( --real-orange );
	border-radius: 25px;
	background-color: transparent;
	transition: all 0.2s;
}

.real-btn-empty a {
	text-decoration: none;	
}

.real-btn-empty:hover {
	color: var( --real-orange );
	background-color: var( --real-orange-background-hover );
/* 	padding: 5px 20px; */
}

.real-btn-empty:hover a {
	color: var( --bs-white );
}

.something {
	width: 100%;
	box-sizing: border-box;
}

.home-icon-1 {
	grid-template-columns: 1fr 50% !important;
}

.home-icon-2 {
	grid-template-columns: 1fr 50% !important;
}

.home-icon-3 {
	grid-template-columns: 1fr 50% !important;
}

.circle-text {
	font-size: 1.1em;
}

.circle-spacer {
	height: 6em !important;
}

.circle-min-height {
	min-height: 16em !important;
}

.rounded-top-1 {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

.rounded-top-2 {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

.rounded-bottom-2 {
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.rounded-top-3 {
	border-top-left-radius: 0.50rem;
	border-top-right-radius: 0.50rem;
}

.rounded-4 {
	border-radius: 1rem;
}

.rounded-top-4 {
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.rounded-px-3, .rounded-px-3 video {
	border-radius: 10px;
}

.rounded-px-top-3 {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.rounded-px-top-3 img {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.rounded-px-bottom-3 {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.rounded-px-end-3 {
	/* border-bottom-right-radius: 10px;
	border-top-right-radius: 10px; */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.rounded-px-end-3 img {
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 0px;
}

.cover-image-person {
	margin-bottom: -65px;
	
}

.card-bg-gray {
	background-color: var( --real-gray );
}

.bg-light-gray {
	background-color: var( --real-gray-lite-22 );
}

.bg-light-blue {
	background-color: var( --real-light-blue );
}

.bg-white {
	background-color: var( --bs-white );
}

.video-mask {
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	overflow: hidden; 
}

.card-text {
	font-size: 1.0em;
	font-weight: 700;
}

.user-manual-border-start {
	border-color: var( --real-gray );
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.user-manual-border-end {
	border-color: var( --real-gray );
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.ifu-gap {
	gap: 2em;
}

table.style-guide td {
	border: 1px solid black;
	padding: 0px 10px;
	text-align: center;
}

.fs-7 {
	font-size: 0.5em;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: anywhere;
}

/* Utilities - END */

/* GOTC - START */

:root {
	--line-color-orange: #E67439;
	--line-color-yellow: #E6BC39;
	--line-color-blue: #A8DADC;
	--line-color-red: #E42535;
	
	--gotc-red: #E42535;
	--gotc-orange: #E67439;
	--gotc-yellow: #E6BC39;
	--gotc-blue: #A8DADC;
	--gotc-pink: #fbe7e7;
	
	
	--bg-color-orange: #fcf0eb; 
	--bg-color-yellow: #fdf8ec; 
	--bg-color-blue: #f6fbfc;
	--bg-color-pink: #fbe7e7;
	--bg-color-white: #ffffff;
	--base-padding: 20px;
	--content-width: 800px;
	
	--css-circle-d: 40px;
	--css-line-thickness: 10px;
	--css-line-w-p: 70%;
	--css-top-offset-1: 15px;
	
	--gotc-color-button-orange: #E67439;
	--gotc-color-button-blue: #458FB0;
}

.svg-container {
	max-width: 100%; 
	margin: 0 auto;
}

.custom-container {
	max-width: 1080px; 
	margin: 0 auto;
}

.social-container {
	display: flex;
	justify-content: center;
	align-items: center;     
	flex-wrap: wrap;         
	gap: 100px;  
}

.gotc-partner-logos {
	display: flex;
	justify-content: center;
	align-items: center;     
	flex-wrap: wrap;         
	gap: 30px;               
}

.gform_heading {
	display: none;
}

.gotc-social {
	color: #FFFFFF !important;
	font-size: 8.4rem;
	transition: 0.5 ease-in-out;
}

.citations {
	word-break: keep-all;
}

a.gotc-social:hover {
	color: #e5e5e5 !important;   
}

a.link-white:hover {
	color: #e5e5e5 !important;
}

.gotc-red {
	color: var( --gotc-red );
}

.gotc-orange {
	color: var( --gotc-orange );
}

.gotc-yellow {
	color: var( --gotc-yellow );
}

.gotc-blue {
	color: var( --gotc-blue );
}

.gotc-pink {
	color: var( --gotc-pink );
}

.gotc-white {
	color: #ffffff;
}


.gotc-bg-red {
	background-color: var( --gotc-red );
}

.gotc-bg-orange {
	background-color: #e673391a;
}

.gotc-bg-yellow {
	background-color: #E6BC391a;
}

.gotc-bg-blue {
	background-color: #A8DADC1a;
}

.gotc-bg-pink {
	background-color: #D000001a;
}

.gotc-bg-black {
		background-color: black;
}

.gotc-bg-white {
	background-color: var( --bg-color-white );
}

.pledge-button {
	background-color: var( --gotc-red );
	padding: 20px 30px;
	border: none;
	border-radius: 25px;
	font-size: 2.0rem;
}

.pledge-button a {
	text-decoration: none;
	color: #FFFFFF !important;
}

.pledge-button a:hover {
	text-decoration: none;
	color: #FFFFFF !important;
}

.info-button {
	background-color: var( --gotc-orange );
	padding: 20px 30px;
	border: none;
	border-radius: 25px;
	font-size: 2.0rem;
	width: 366px;
	margin-left: auto;
	margin-right: auto;
}

.info-button a {
	text-decoration: none;
	color: #FFFFFF !important;
}

.info-button a:hover {
	text-decoration: none;
	color: #FFFFFF !important;
}

.color-button {
	width: 70%;
	padding: 20px 8px;
	border: none;
	border-radius: 25px;
	font-size: 2.0rem;
}

.color-button a {
	text-decoration: none;
	color: #FFFFFF !important;
	z-index: 9999 !important;
}

.color-button a:hover {
	text-decoration: none;
	color: #FFFFFF !important;
}

.bg-color-orage {
	background-color: var( --gotc-color-button-orange );
}

.bg-color-blue {
	background-color: var( --gotc-color-button-blue );
}

#gform_submit_button_1 {
	background-color: #D00000;
	padding: 20px 30px;
	border: none;
	border-radius: 25px;
	font-size: 2.0rem;
}

#gform_submit_button_2 {
	background-color: #D00000;
	padding: 20px 30px;
	border: none;
	border-radius: 25px;
	font-size: 2.0rem;
}

.gotc_required_asterisk {
	color: var( --gotc-red );
}

.gotc-form, .gotc-form label, .gotc-form legend {
	font-size: 18px !important;
	font-weight: 400 !important;
}

.pen-x-logo::before {
	content: "\e61b";
}

.blood-clot-icon {
	width: 80%;
	margin-left: 2rem;
}

.blood-clot-ul li {
	margin-bottom: 2rem;
}



.figure-reference {
	position: relative;
	display: block;
}

.figure-on-image {
	font-size: 4rem;
	font-weight: 700;
	position: absolute;
	top: 36%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}

.figure-on-bubble {
	font-size: 4.5rem;
	font-weight: 700;
	position: absolute;
	top: 29%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}








.circle-row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.circle-reference {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.survey-circle-1, .survey-circle-2, .survey-circle-3, .survey-circle-4, .survey-circle-5 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.figure-on-circle-1, .figure-on-circle-2, .figure-on-circle-3, .figure-on-circle-4, .figure-on-circle-5 {
	font-weight: 700;
	position: absolute;
	transform: translate(-50%, -50%);
}

.figure-on-circle-1 {
	font-size: 2.7rem;
	top: 27%; 
	left: 50%;
}

.survey-circle-1 {
	height: 7rem;
	aspect-ratio: 1 / 1;
	background-color: var( --gotc-red );
	border-radius: 4rem;
}

.figure-on-circle-2 {
	font-size: 2.5rem;
	top: 26%; 
	left: 50%;
}

.survey-circle-2 {
	height: 6rem;
	aspect-ratio: 1 / 1;
	background-color: var( --gotc-orange );
	border-radius: 4rem;
}

.figure-on-circle-3 {
	font-size: 2.5rem;
	top: 26%; 
	left: 50%;
}

.survey-circle-3 {
	height: 6rem;
	aspect-ratio: 1 / 1;
	background-color: var( --gotc-yellow );
	border-radius: 4rem;
}

.figure-on-circle-4 {
	font-size: 2.2rem;
	top: 24%; 
	left: 50%;	
}

.survey-circle-4 {
	height: 5rem;
	aspect-ratio: 1 / 1;
	background-color: var( --gotc-blue );
	border-radius: 4rem;
}

.figure-on-circle-5 {
	font-size: 2.0rem;
	top: 24%; 
	left: 50%;
}

.hosp-margin-corrector {
	margin-top: 1.0rem;
	margin-bottom: 2.6rem;
}

.survey-circle-5 {
	height: 5rem;
	aspect-ratio: 1 / 1;
	background-color: var( --gotc-pink );
	border-radius: 4rem;
}

.col-lg-1-5 {
	flex: 0 0 20%;  
	max-width: 20%;
}


.blood-reference {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: center;
	position: relative;
}

img.blood {
	max-width: 50%;
}

.figure-on-blood {
	font-weight: 700;
	font-size: 3.0rem;
}

.arrow-reference {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.figure-on-arrow {
	font-weight: 700;
	font-size: 4.0rem;
}

.figure-dvt {
	font-weight: 700;
	font-size: 3.4rem;
}


















.css-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	width: 100%;
	max-width: 991px; 
	height: 100%;
	/* height: 70%; */
	z-index: 10; 
	overflow: visible;
}

.circle-1 {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 20% - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
}

.circle-hole-1 {
	background-color: var( --bg-color-yellow );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 20% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

.line-v-1 {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: calc( 72% + 0px ); 
	top: calc( 23.5% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left {
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-orange );
	border-left: 10px solid var( --line-color-orange );
	border-radius: 0 0 0 85px; 
	position: absolute;
	top: calc( 95% + 6.5px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
}

.line-h-1 {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 100% - ( var( --css-line-thickness ) / 2 ) );
	left: calc( 17% );
	z-index: 1001;
}

.curve-top-right {
	width: 85px;
	height: 85px; 
	/* background-color: var( --bg-color-yellow ); */
	border-top: 10px solid var( --line-color-orange );
	border-right: 10px solid var( --line-color-orange );
	border-bottom: 0px none #00000000 !important;
	border-left: 0px none #00000000 !important;
	border-radius: 0 85px 0 0; 
	position: absolute;
	top: calc( 100% + 10px - var( --css-top-offset-1 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
		
}

.corrector-1 {
	background-color: var( --bg-color-yellow );
	width: 8%; 
	height: 1%; 
	position: absolute;
	top: calc( 106% - 8px );
	right: calc( 6% - 20px + var( --css-top-offset-1 ) );
	z-index: 100;
	/* border: 1px solid black; */
}

.line-v-2 {
	width: var( --css-line-thickness ); 
	height: 6%; 
	position: absolute;
	top: calc( 106% - 7px );
	right: calc( 5% - 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.circle-2 {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 114% - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 2 ) );
		
}

.circle-hole-2 {
	background-color: var( --bg-color-yellow );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 114% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
		
}

.line-v-3 {
	width: var( --css-line-thickness ); 
	height: 47.3%; 
	position: absolute;
	top: calc( 117% - 5px);
	right: calc( 5% - 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-right {
	position: absolute;
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-yellow );
	border-right: 10px solid var( --line-color-yellow );
	border-radius: 0 0 85px 0; 
	top: calc( 163.5% + ( var( --css-line-thickness ) / 2 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
}

.line-h-2 {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 169% - 2.0px + ( var( --css-line-thickness ) / 3 ) );
	left: calc( 17% );
	z-index: 100;
}

.curve-top-left {
	width: 85px; 
	height: 85px;
	border-top: 10px solid var( --line-color-yellow );
	border-left: 10px solid var( --line-color-yellow );
	border-right: 0px none #00000000 !important;
	border-bottom: 0px none #00000000 !important;
	border-radius: 85px 0 0 0; 
	position: absolute;
	top: calc( 170% + 2.0px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
		
}

.corrector-2 {
	background-color: var( --bg-color-blue );
	width: 8%; 
	height: 1%; 
	position: absolute;
	top: calc( 175% );
	left: calc( 6% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
	/* border: 1px solid black; */
}

.line-v-4 {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 10%; 
	top: calc( 176% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.circle-3 {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 187% - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		
}

.circle-hole-3 {
	background-color: var( --bg-color-blue );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 187% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

/* OLD - for arrow pointing to <h2>
 .line-v-5 {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 85%; 
	top: calc( 250% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left-2 {
	width: 45px; 
	height: 45px;
	border-bottom: 10px solid var( --line-color-blue );
	border-left: 10px solid var( --line-color-blue );
	border-radius: 0 0 0 45px; 
	position: absolute;
	top: calc( 335% - 1px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100; 
}

.line-h-3 {
	width: 6%;
	height: var( --css-line-thickness ); 
	border-radius: 5px;
	position: absolute;
	top: calc( 337% + 2.5px );
	left: calc( 12% + 7px );
	z-index: 100;
}

.arrow-top {
	width: 6%;
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 335% + 1px );
	left: calc( 14% + 0px );
	z-index: 100;
	transform: rotate(45deg);
	border-radius: 5px;
}

.arrow-bottom {
	width: 6%;
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 339.4% + 1px );
	left: calc( 14% + 0px );
	z-index: 100;
	transform: rotate(-45deg);
	border-radius: 5px;
} */

.line-v-5 {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 61%; 
	top: calc( 190.2% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left-2 {
	width: 45px; 
	height: 45px;
	border-bottom: 10px solid var( --line-color-blue );
	border-left: 10px solid var( --line-color-blue );
	border-radius: 0 0 0 45px; 
	position: absolute;
	top: calc( 251% - 1px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100; 
}

.line-h-3 {
	width: 18%;
	height: var( --css-line-thickness ); 
	border-radius: 5px;
	position: absolute;
	top: calc( 252% + 4.6px );
	left: calc( 12% + 7px );
	z-index: 100;
}

.arrow-top {
	width: 6%;
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 251% + 1px );
	left: calc( 26% + 0px );
	z-index: 100;
	transform: rotate(45deg);
	border-radius: 5px;
}

.arrow-bottom {
	width: 6%;
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 253.5% + 1px );
	left: calc( 26% + 0px );
	z-index: 100;
	transform: rotate(-45deg);
	border-radius: 5px;
}




.line-color-orange {
	background-color: var( --line-color-orange );
}

.line-color-yellow {
	background-color: var( --line-color-yellow );
}

.line-color-blue {
	background-color: var( --line-color-blue );
}

.line-color-red {
	background-color: var( --line-color-red );
}


/* Patient Page Line - START */


.css-container-patient {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	width: 100%;
	max-width: 991px; 
	height: 60%;
	z-index: 10; 
	overflow: visible;
}

.circle-1-pat {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 5% - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
}

.circle-hole-1-pat {
	background-color: var( --bg-color-yellow );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 5% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

.line-v-1-pat {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: calc( 113% + 1px ); 
	top: calc( 10% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left-pat {
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-yellow );
	border-left: 10px solid var( --line-color-yellow );
	border-radius: 0 0 0 85px; 
	position: absolute;
	top: calc( 123% + 0px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
}

.line-h-1-pat {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 133% + 2.5px - ( var( --css-line-thickness ) / 2 ) );
	left: calc( 17% );
	z-index: 1001;
}

.curve-top-right-pat {
	width: 85px;
	height: 85px; 
	border-top: 10px solid var( --line-color-yellow );
	border-right: 10px solid var( --line-color-yellow );
	border-bottom: 0px none #00000000 !important;
	border-left: 0px none #00000000 !important;
	border-radius: 0 85px 0 0; 
	position: absolute;
	top: calc( 134% + 6px - var( --css-top-offset-1 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
}

.corrector-1-pat {
	background-color: var( --bg-color-yellow );
	width: 7%; 
	height: 1%; 
	position: absolute;
	top: calc( 120% );
	left: calc( 8% + 0px + var( --css-top-offset-1 ) );
	z-index: 100;
	/* border: 1px solid black; */
}

.line-v-2-pat {
	width: var( --css-line-thickness ); 
	height: 20%; 
	position: absolute;
	top: calc( 146% );
	right: calc( 5% - 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.circle-2-pat {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 171% - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 2 ) );
}

.circle-hole-2-pat {
	background-color: var( --bg-color-yellow );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 171% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

.line-v-3-pat {
	width: var( --css-line-thickness ); 
	height: 75%; 
	position: absolute;
	top: calc( 176% );
	right: calc( 5% - 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-right-pat {
	position: absolute;
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-orange );
	border-right: 10px solid var( --line-color-orange );
	border-radius: 0 0 85px 0; 
	top: calc( 249.5% + ( var( --css-line-thickness ) / 2 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
}

.line-h-2-pat {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 262% - 2px + ( var( --css-line-thickness ) / 3 ) );
	left: calc( 17% );
	z-index: 100;
}

.curve-top-left-pat {
	width: 85px; 
	height: 85px;
	border-top: 10px solid var( --line-color-orange );
	border-left: 10px solid var( --line-color-orange );
	border-right: 0px none #00000000 !important;
	border-bottom: 0px none #00000000 !important;
	border-radius: 85px 0 0 0; 
	position: absolute;
	top: calc( 264% + 4px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
}

.corrector-2-pat {
	background-color: var( --bg-color-orange );
	width: 8%; 
	height: 1%; 
	position: absolute;
	top: calc( 250% );
	right: calc( 2% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
}

.line-v-4-pat {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 10%; 
	top: calc( 278% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.circle-3-pat {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 290% - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
}

.circle-hole-3-pat {
	background-color: var( --bg-color-blue );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 290% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

.line-v-5-pat {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 117%; 
	top: calc( 297% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left-2-pat {
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-blue );
	border-left: 10px solid var( --line-color-blue );
	border-radius: 0 0 0 85px; 
	position: absolute;
	top: calc( 413% - 1px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100; */
}

.line-h-3-pat {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 422% - 0.5px + ( var( --css-line-thickness ) / 3 ) );
	left: calc( 17% );
	z-index: 100;
}

.curve-top-right-2-pat {
	width: 85px;
	height: 85px; 
	border-top: 10px solid var( --line-color-blue );
	border-right: 10px solid var( --line-color-blue );
	border-bottom: 0px none #00000000 !important;
	border-left: 0px none #00000000 !important;
	border-radius: 0 85px 0 0; 
	position: absolute;
	top: calc( 424% + 5.5px - var( --css-top-offset-1 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
}

.line-v-6-pat {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 10%; 
	top: calc( 438% - var( --css-top-offset-1 ) );
	right: calc( 3% + 0px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.circle-4-pat {
	width: var( --css-circle-d ); 
	height: var( --css-circle-d ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 451% - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 2 ) );
}

.circle-hole-4-pat {
	/* background-color: var( --bg-color-yellow ); */
	background-color: var( --bg-color-pink );
	width: calc( var( --css-circle-d ) / 2 ); 
	height: calc( var( --css-circle-d ) / 2 ); 
	border-radius: 50%;
	position: absolute;
	top: calc( 451% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
	right: calc( 1% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
	z-index: 100 !important;
}

.line-v-7-pat {
	width: var( --css-line-thickness ); 
	height: 70%; 
	position: absolute;
	top: calc( 456% );
	right: calc( 5% - 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-right-2-pat {
	position: absolute;
	width: 85px; 
	height: 85px;
	border-bottom: 10px solid var( --line-color-red );
	border-right: 10px solid var( --line-color-red );
	border-radius: 0 0 85px 0; 
	top: calc( 525% + ( var( --css-line-thickness ) / 2 ) );
	right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
	z-index: 100;
}

.corrector-3-pat {
	background-color: var( --bg-color-pink );
	width: 8%;
	height: 1%;
	position: absolute;
	top: calc( 525.5% );
	right: calc( 2% + 20px + var( --css-top-offset-1 ) );
	z-index: 101;
}

.line-h-4-pat {
	width: var( --css-line-w-p );
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 537% + 1.2px + ( var( --css-line-thickness ) / 3 ) );
	left: calc( 17% );
	z-index: 100;
}

.curve-top-left-2-pat {
	width: 85px; 
	height: 85px;
	border-top: 10px solid var( --line-color-red );
	border-left: 10px solid var( --line-color-red );
	border-right: 0px none #00000000 !important;
	border-bottom: 0px none #00000000 !important;
	border-radius: 85px 0 0 0; 
	position: absolute;
	top: calc( 540% + 1px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100;
}

.line-v-8-pat {
	position: absolute;
	width: var( --css-line-thickness ); 
	height: 37%; 
	top: calc( 553% - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 10;
}

.curve-bottom-left-3-pat {
	width: 45px; 
	height: 45px;
	border-bottom: 10px solid var( --line-color-red );
	border-left: 10px solid var( --line-color-red );
	border-radius: 0 0 0 45px; 
	position: absolute;
	top: calc( 590% - 1.5px - var( --css-top-offset-1 ) );
	left: calc( 5% + 20px + var( --css-top-offset-1 ) );
	z-index: 100; */
}

.corrector-4-pat {
	background-color: #ffffff;
	width: 8%;
	height: 1%;
	position: absolute;
	top: calc( 587% );
	left: calc( 8% + 1px + var( --css-top-offset-1 ) );
	z-index: 101;
}


.line-h-5-pat {
	width: 20%;
	height: var( --css-line-thickness ); 
	border-radius: 0px;
	position: absolute;
	top: calc( 593% + 0px );
	left: calc( 12% + 7px );
	z-index: 100;
}

.arrow-top-pat {
	width: 6%;
	height: var( --css-line-thickness ); 
	position: absolute;
	top: calc( 590% + 1px );
	left: calc( 28% + 0px );
	z-index: 100;
	transform: rotate(45deg);
	border-radius: 5px;
}

.arrow-bottom-pat {
	width: 6%;
	height: var( --css-line-thickness ); 
	/* margin-left: 40px;  */
	position: absolute;
	top: calc( 595% + 5px );
	left: calc( 28% + 0px );
	z-index: 100;
	transform: rotate(-45deg);
	border-radius: 5px;
}


/* Patient Page Line - END */

.container-fun {
	max-width: 991px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}



.gotc-bg-red,
.gotc-bg-orange,
.gotc-bg-yellow,
.gotc-bg-blue,
.gotc-bg-pink,
.gotc-bg-black,
.gotc-bg-white {
	position: relative;
	overflow: visible !important;
}



.pledge-button-header {
	background-color: var( --gotc-red );
	padding: 10px 30px;
	border: none;
	border-radius: 15px;
	font-size: 1.1rem;
	font-weight: 600;
	position: relative;
	width: fit-content !important;
}

.pledge-button-header a {
	text-decoration: none;
	color: #FFFFFF !important;
}

.gotc-icon {
	max-height: 150px;
}

.gotc-icon-special {
	max-height: 100px;
}

.gotc-icon-catheter {
	max-height: 100px;
}

.gotc-icon-text {
	max-height: 100px;
}

.logos {
	max-width: 200px;
	max-height: 60px;
	margin-left: auto;
	margin-right: auto;
}


.semi-stat {
	position: relative;
	display: inline-block;  
}

.semi-stat img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.semi-stat .stat-text {
	position: absolute;
	left: 50%;
	bottom: 0px;             
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	line-height: 1;
	pointer-events: none;   /* clicks pass through to the image if needed */
	/* Optional: control size responsively; comment out if you style h2 globally */
	/* font-size: clamp(28px, 4vw, 48px); */
}

/* space the caption from the image (since the number no longer pushes layout) */
.semi-stat p {
	margin-top: 0.75rem;
}

.gotc-smaller-text {
	font-size: 2.0rem;
}

.z-high-01 {
	position: relative;
	z-index: 99999;
}




@media only screen and (max-width: 991px) {
		
		:root {
			
			--base-padding: 20px;
			--content-width: 800px;
			
			--css-circle-d: 40px;
			--css-line-thickness: 10px;
			--css-line-w-p: 40%;
			--css-top-offset-1: 15px;
		}
		
		h1 {
			font-size: 4.6rem !important;
		}
		
		h2 {
			font-size: 2.7rem !important;
		}
		
		h3 {
			font-size: 2.0rem !important;
		}

		h6 {
			font-family: var( --bs-font-sans-serif );
			font-size: 1.15rem;
			font-weight: 700;
			line-height: 28px;
		}
		
		.css-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); 
			width: 100%;
			max-width: 390px; 
			height: 100%;
			z-index: 10; 
			overflow: visible;
		}
		
		.css-container-patient {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); 
			width: 100%;
			max-width: 390px; 
			height: 83%;
			z-index: 10; 
			overflow: visible;
		}
		
		.container-fun {
			max-width: 330px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			overflow: visible;
		}
		
		.container-fun.offset-right {
			max-width: 250px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			padding-left: 3rem;
			padding-right: 0px;
			overflow: visible;
		}
		
		.container-fun.offset-left {
			max-width: 250px;
			width: 100%;
			/* margin-left: auto;
			margin-right: 7rem; */
			margin-left: auto;
			margin-right: auto;
			padding-right: 3rem;
			padding-left: 0px;
			overflow: visible;
		}
		
		.info-button {
			background-color: var( --gotc-orange );
			padding: 20px 30px;
			border: none;
			border-radius: 25px;
			font-size: 0.8rem;
			width: 100%;
			font-weight: 600;
			margin-left: auto;
			margin-right: auto;
		}
		
		
		
		/* Calculated Version */
		.circle-1 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 5% - ( var( --css-circle-d ) ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		.circle-hole-1 {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 5% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 1 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		.line-v-1 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 91.6%; 
			top: calc( 6% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-left {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-orange );
			border-left: 10px solid var( --line-color-orange );
			border-radius: 0 0 0 85px; 
			position: absolute;
			top: calc( 96% + 16px + calc( var( --css-line-thickness ) / 2 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.line-h-1 {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 100% - ( var( --css-line-thickness ) / 2 ) + 2px );
			left: calc( 35% );
			z-index: 100;
		}
		
		.curve-top-right {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-orange );
			border-right: 10px solid var( --line-color-orange );
			border-radius: 0 85px 0 0; 
			border-bottom: 0;
			border-left: 0;
			position: absolute;
			top: calc( 99% + 21.5px  );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.corrector-1 {
			display: none;
		}
		
		.line-v-2 {
			width: var( --css-line-thickness ); 
			height: 6%; 
			position: absolute;
			top: calc( 103% + 3px );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.circle-2 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 110.5% - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0%  );
			
		}
		
		.circle-hole-2 {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 110.5% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0% + ( var( --css-circle-d ) / 4 ) );
			z-index: 100 !important;
			
		}
		
		.line-v-3 {
			width: var( --css-line-thickness ); 
			height: calc( 47% + 0px ); 
			position: absolute;
			top: calc( 112% );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-right {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-yellow );
			border-right: 10px solid var( --line-color-yellow );
			border-radius: 0 0 85px 0; 
			
			top: calc( 158% + 14.0px + ( var( --css-line-thickness ) / 1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.line-h-2 {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 162% - 0.5px );
			left: calc( 35% + 2px );
			z-index: 100;
		}
		
		.curve-top-left {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-yellow );
			border-left: 10px solid var( --line-color-yellow );
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 163% - 10.2px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
			
		}
		
		.corrector-2 {
			display: none;
		}
		
		.line-v-4 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 0%; 
			top: calc( 268% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: -100;
		}
		
		.circle-3 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 167% - 8px - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
			
		}
		
		.circle-hole-3 {
			background-color: var( --bg-color-blue );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 167% - 8px + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		/* OLD - arrow pointing to <h2>
		.line-v-5 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 92%; 
			top: calc( 260% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.curve-bottom-left-2 {
			width: 45px; 
			height: 45px;
			border-bottom: 10px solid var( --line-color-blue );
			border-left: 10px solid var( --line-color-blue );
			border-radius: 0 0 0 45px; 
			position: absolute;
			top: calc( 352% - 1px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; 
		}
		
		.line-h-3 {
			width: 7%;
			height: var( --css-line-thickness ); 
			border-radius: 5px;
			position: absolute;
			top: calc( 353% + 8px );
			left: calc( 24% + 0px );
			z-index: 100;
		}
		
		.arrow-top {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 352% + 8px );
			left: calc( 23% + 0px );
			z-index: 100;
			transform: rotate(45deg);
			border-radius: 5px;
		}
		
		.arrow-bottom {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 355% - 2px );
			left: calc( 23% + 0px );
			z-index: 100;
			transform: rotate(-45deg);
			border-radius: 5px;
		} */
		
		.line-v-5 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 52.1%; 
			top: calc( 168.7% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.curve-bottom-left-2 {
			width: 45px; 
			height: 45px;
			border-bottom: 10px solid var( --line-color-blue );
			border-left: 10px solid var( --line-color-blue );
			border-radius: 0 0 0 45px; 
			position: absolute;
			top: calc( 221% - 7px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; 
		}
		
		.line-h-3 {
			width: 5%;
			height: var( --css-line-thickness ); 
			border-radius: 5px;
			position: absolute;
			top: calc( 221% + 13px );
			left: calc( 24% + 0px );
			z-index: 100;
		}
		
		.arrow-top {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 221% + 2px );
			left: calc( 20% + 0px );
			z-index: 100;
			transform: rotate(45deg);
			border-radius: 5px;
		}
		
		.arrow-bottom {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 222% - 1px );
			left: calc( 20% + 0px );
			z-index: 100;
			transform: rotate(-45deg);
			border-radius: 5px;
		}
		
		/* .custom-container {
			max-width: 390px; 
			margin: 0 auto;
		} */
		
		.gotc-partner-logos {
			flex-direction: column;
			align-items: center; 
			gap: 25px;
		}
		
		.social-container {   
			flex-direction: column;
			align-items: center; 
			gap: 0px;  
		}
		
		.pledge-button {
			background-color: var( --gotc-red );
			padding: 20px 30px;
			border: none;
			border-radius: 25px;
			font-size: 1.2rem;
			font-weight: 600;
		}
		
		.pen-text-lg-align-right {
			text-align: unset;
		}
		
		.pen-text-lg-align-left {
			text-align: unset;
		}
		
		.pen-text-sm-align-center {
			text-align: center;
		}
		
		
		/* TEST   */
		
		
		/* .line-v-1 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 80%; 
			top: calc( 14% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-left {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-orange );
			border-left: 10px solid var( --line-color-orange );
			border-radius: 0 0 0 85px; 
			position: absolute;
			
			top: calc( 92% + 0px + calc( var( --css-line-thickness ) / 2 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.line-h-1 {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 100% - ( var( --css-line-thickness ) / 2 ) + 1px );
			left: calc( 35% );
			z-index: 100;
		}
		
		.circle-1 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 11% - ( var( --css-circle-d ) ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		.circle-hole-1 {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 11% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 1 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		} */
		/* TEST */
		
		/* Patient Page - START */
		.color-button {
			width: 100%;
			padding: 10px 8px;
			border: none;
			border-radius: 15px;
			font-size: 0.8rem;
			font-weight: 600;
		}
		
		/* Patient Page Line - START */
		
		.circle-1-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 0% - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		.circle-hole-1-pat {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 0% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		.line-v-1-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: calc( 99% + 6px ); 
			top: calc( 5% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-left-pat {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-yellow );
			border-left: 10px solid var( --line-color-yellow );
			border-radius: 0 0 0 85px; 
			position: absolute;
			top: calc( 104% + 4px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.line-h-1-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 110% + 4.3px - ( var( --css-line-thickness ) / 2 ) );
			left: calc( 35% );
			z-index: 1001;
		}
		
		.curve-top-right-pat {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-yellow );
			border-right: 10px solid var( --line-color-yellow );
			border-bottom: 0px none #00000000 !important;
			border-left: 0px none #00000000 !important;
			border-radius: 0 85px 0 0; 
			position: absolute;
			top: calc( 111% + 3.5px - var( --css-top-offset-1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.corrector-1-pat {
			background-color: var( --bg-color-yellow );
			width: 0%; 
			height: 0%; 
			position: absolute;
			top: calc( 120% );
			left: calc( 8% + 0px + var( --css-top-offset-1 ) );
			z-index: 100;
			/* border: 1px solid black; */
		}
		
		.line-v-2-pat {
			width: var( --css-line-thickness ); 
			height: 1.7%; 
			position: absolute;
			top: calc( 117.5% );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.circle-2-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 122% - ( var( --css-circle-d ) / 2 ) ); 
			/* right: calc( 0% + ( var( --css-circle-d ) / 2 ) ); */
			right: calc( 0% );
		}
		
		.circle-hole-2-pat {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 122% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			/* right: calc( 0% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) ); */
			right: calc( 0% + ( var( --css-circle-d ) / 4 ) );
			z-index: 100 !important;
		}
		
		.line-v-3-pat {
			width: var( --css-line-thickness ); 
			height: 46.7%; 
			position: absolute;
			top: calc( 125% );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-right-pat {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-orange );
			border-right: 10px solid var( --line-color-orange );
			border-radius: 0 0 85px 0; 
			top: calc( 171% + 0px + ( var( --css-line-thickness ) / 2 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.line-h-2-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 178% + 1.4px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		.curve-top-left-pat {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-orange );
			border-left: 10px solid var( --line-color-orange );
			border-right: 0px none #00000000 !important;
			border-bottom: 0px none #00000000 !important;
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 180% - 1.8px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.corrector-2-pat {
			display: none;
			background-color: var( --bg-color-orange );
			width: 8%; 
			height: 1%; 
			position: absolute;
			top: calc( 250% );
			right: calc( 2% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.line-v-4-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 1%; 
			top: calc( 187% + 5px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.circle-3-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 190% - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		.circle-hole-3-pat {
			background-color: var( --bg-color-blue );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 190% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		.line-v-5-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 82.5%; 
			top: calc( 194% + 5px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-left-2-pat {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-blue );
			border-left: 10px solid var( --line-color-blue );
			border-radius: 0 0 0 85px; 
			position: absolute;
			top: calc( 277% - 1px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; */
		}
		
		.line-h-3-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 282% + 1.8px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		.curve-top-right-2-pat {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-blue );
			border-right: 10px solid var( --line-color-blue );
			border-bottom: 0px none #00000000 !important;
			border-left: 0px none #00000000 !important;
			border-radius: 0 85px 0 0; 
			position: absolute;
			top: calc( 284% - 1.3px - var( --css-top-offset-1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.line-v-6-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 1%; 
			top: calc( 292% - 6px - var( --css-top-offset-1 ) );
			right: calc( 0% - 0.5px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.circle-4-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 294% + 3px - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0%  );
		}
		
		.circle-hole-4-pat {
			background-color: var( --bg-color-pink );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			/* top: calc( 306% + 3px + ( var( --css-circle-d ) / 4 )  ); 
			right: calc( 0% + ( var( --css-circle-d ) / 4 ) ); */
			top: calc( 294% + 3px + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0% - ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		.line-v-7-pat {
			width: var( --css-line-thickness ); 
			height: 64.3%; 
			position: absolute;
			top: calc( 297.5% );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-right-2-pat {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-red );
			border-right: 10px solid var( --line-color-red );
			border-radius: 0 0 85px 0; 
			top: calc( 361% + 2px + ( var( --css-line-thickness ) / 2 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		.corrector-3-pat {
			display: none;
			background-color: var( --bg-color-pink );
			width: 8%;
			height: 1%;
			position: absolute;
			top: calc( 355.5% );
			right: calc( 2% + 20px + var( --css-top-offset-1 ) );
			z-index: 101;
		}
		
		.line-h-4-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 368% + 3.5px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		.curve-top-left-2-pat {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-red );
			border-left: 10px solid var( --line-color-red );
			border-right: 0px none #00000000 !important;
			border-bottom: 0px none #00000000 !important;
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 369% + 10.8px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		.line-v-8-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 32.4%; 
			top: calc( 377.7% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		.curve-bottom-left-3-pat {
			width: 45px; 
			height: 45px;
			border-bottom: 10px solid var( --line-color-red );
			border-left: 10px solid var( --line-color-red );
			border-radius: 0 0 0 45px; 
			position: absolute;
			top: calc( 410% - 0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; */
		}
		
		.corrector-4-pat {
			display: none;
			background-color: #ffffff;
			width: 8%;
			height: 1%;
			position: absolute;
			top: calc( 370% );
			left: calc( 8% + 1px + var( --css-top-offset-1 ) );
			z-index: 101;
		}
		
		
		.line-h-5-pat {
			width: 2%;
			height: var( --css-line-thickness ); 
			border-radius: 0px;
			position: absolute;
			top: calc( 412% - 1.5px );
			left: calc( 25% + 1px );
			z-index: 100;
		}
		
		.arrow-top-pat {
			width: 9%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 410% + 11px );
			left: calc( 20% + 4px );
			z-index: 100;
			transform: rotate(45deg);
			border-radius: 5px;
		}
		
		.arrow-bottom-pat {
			width: 9%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 412% + 8px );
			left: calc( 21% + 0px );
			z-index: 100;
			transform: rotate(-45deg);
			border-radius: 5px;
		}
		
		
		/* Patient Page Line - END */
		
		
		
		
		
		/* SPECIAL - Android Mobile section - START */
		
		/* SPECIAL - Android Mobile section - HOME Page - START */
		
		/* body.android .circle-1 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 11% - ( var( --css-circle-d ) ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		.circle-hole-1 {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 11% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 1 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		} */
		
		/* .line-v-1 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 80%; 
			top: calc( 14% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-left {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-orange );
			border-left: 10px solid var( --line-color-orange );
			border-radius: 0 0 0 85px; 
			position: absolute;
			top: calc( 92% + 0px + calc( var( --css-line-thickness ) / 2 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		} */
		
		body.android .line-h-1 {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 100% - 0.9px - ( var( --css-line-thickness ) / 2 ) + 1px );
			left: calc( 35% );
			z-index: 100;
		}
		
		body.android .curve-top-right {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-orange );
			border-right: 10px solid var( --line-color-orange );
			border-radius: 0 85px 0 0; 
			border-bottom: 0;
			border-left: 0;
			position: absolute;
			top: calc( 99% + 20.5px );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		/* body.android .corrector-1 {
			display: none;
		} */
		
		body.android .line-v-2 {
			width: var( --css-line-thickness ); 
			height: 6%; 
			position: absolute;
			top: calc( 103% + 4px );
			right: calc( 5% - 20.1px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		/* .circle-2 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 116% - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0%  );
			
		}
		
		.circle-hole-2 {
			background-color: var( --bg-color-yellow );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 116% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0% + ( var( --css-circle-d ) / 4 ) );
			z-index: 100 !important;
			
		} */
		
		body.android .line-v-3 {
			width: var( --css-line-thickness ); 
			height: calc( 46% + 13px ); 
			position: absolute;
			top: calc( 112% );
			right: calc( 5% - 20.1px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-right {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-yellow );
			border-right: 10px solid var( --line-color-yellow );
			border-radius: 0 0 85px 0; 
			top: calc( 158% + 2px + ( var( --css-line-thickness ) / 1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		body.android .line-h-2 {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 161% + 11.3px );
			left: calc( 35% + 2px );
			z-index: 100;
		}
		
		body.android .curve-top-left {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-yellow );
			border-left: 10px solid var( --line-color-yellow );
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 162% + 1.2px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
			
		}
		
		/* .corrector-2 {
			display: none;
		} */
		
		/* body.android .line-v-4 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 0%; 
			top: calc( 268% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: -100;
		}
		
		body.android .circle-3 {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 256% - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
			
		}
		
		body.android .circle-hole-3 {
			background-color: var( --bg-color-blue );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 256% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		} */
		
		body.android .line-v-5 {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 51.3%; 
			top: calc( 168.7% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		body.android .curve-bottom-left-2 {
			width: 45px; 
			height: 45px;
			border-bottom: 10px solid var( --line-color-blue );
			border-left: 10px solid var( --line-color-blue );
			border-radius: 0 0 0 45px; 
			position: absolute;
			top: calc( 220% - 1px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; 
		}
		
		body.android .line-h-3 {
			width: 5%;
			height: var( --css-line-thickness ); 
			border-radius: 5px;
			position: absolute;
			top: calc( 221% - 6.2px );
			left: calc( 24% + 0px );
			z-index: 100;
		}
		
		body.android .arrow-top {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 220% + 8px );
			left: calc( 20% + 0px );
			z-index: 100;
			transform: rotate(45deg);
			border-radius: 5px;
		}
		
		body.android .arrow-bottom {
			width: 10%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 221% + 5px );
			left: calc( 20% + 0px );
			z-index: 100;
			transform: rotate(-45deg);
			border-radius: 5px;
		}
		
		/* SPECIAL - Android Mobile section - HOME Page - END */
		
		
		/* SPECIAL - Android Mobile section - Patient Page - START */
		body.android .line-h-1-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 110% + 2px - ( var( --css-line-thickness ) / 2 ) );
			left: calc( 35% );
			z-index: 1001;
		}
		
		body.android .curve-top-right-pat {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-yellow );
			border-right: 10px solid var( --line-color-yellow );
			border-bottom: 0px none #00000000 !important;
			border-left: 0px none #00000000 !important;
			border-radius: 0 85px 0 0; 
			position: absolute;
			top: calc( 111% + 1.0px - var( --css-top-offset-1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		
		body.android .line-v-2-pat {
			width: calc( var( --css-line-thickness ) - 0.2px ); 
			height: 1.8%; 
			position: absolute;
			top: calc( 117.3% );
			right: calc( 5% - 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		
		body.android .line-v-3-pat {
			width: var( --css-line-thickness ); 
			height: 45.3%; 
			position: absolute;
			top: calc( 125% );
			right: calc( 5% - 20.1px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-right-pat {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-orange );
			border-right: 10px solid var( --line-color-orange );
			border-radius: 0 0 85px 0; 
			top: calc( 170% - 3.0px + ( var( --css-line-thickness ) / 2 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		body.android .line-h-2-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 176% + 7.0px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		body.android .curve-top-left-pat {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-orange );
			border-left: 10px solid var( --line-color-orange );
			border-right: 0px none #00000000 !important;
			border-bottom: 0px none #00000000 !important;
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 178% + 3.0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		/* body.android .corrector-2-pat {
			display: none;
			background-color: var( --bg-color-orange );
			width: 8%; 
			height: 1%; 
			position: absolute;
			top: calc( 250% );
			right: calc( 2% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		} */
		
		body.android .line-v-4-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 1%; 
			top: calc( 186% - 2.0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .circle-3-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 188.5% - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 2 ) );
		}
		
		body.android .circle-hole-3-pat {
			background-color: var( --bg-color-blue );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 188.5% + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			left: calc( 5% + ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		body.android .line-v-5-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 80.5%; 
			top: calc( 193% + 0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-left-2-pat {
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-blue );
			border-left: 10px solid var( --line-color-blue );
			border-radius: 0 0 0 85px; 
			position: absolute;
			top: calc( 273% + 5.0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; */
		}
		
		body.android .line-h-3-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 278% + 6.0px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		body.android .curve-top-right-2-pat {
			width: 85px;
			height: 85px; 
			border-top: 10px solid var( --line-color-blue );
			border-right: 10px solid var( --line-color-blue );
			border-bottom: 0px none #00000000 !important;
			border-left: 0px none #00000000 !important;
			border-radius: 0 85px 0 0; 
			position: absolute;
			top: calc( 280% + 2.0px - var( --css-top-offset-1 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		body.android .line-v-6-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 1%; 
			top: calc( 288% - 6px - var( --css-top-offset-1 ) );
			right: calc( 0% - 0.5px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .circle-4-pat {
			width: var( --css-circle-d ); 
			height: var( --css-circle-d ); 
			border-radius: 50%;
			position: absolute;
			top: calc( 290% + 3px - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0%  );
		}
		
		body.android .circle-hole-4-pat {
			background-color: var( --bg-color-pink );
			width: calc( var( --css-circle-d ) / 2 ); 
			height: calc( var( --css-circle-d ) / 2 ); 
			border-radius: 50%;
			position: absolute;
			/* top: calc( 306% + 3px + ( var( --css-circle-d ) / 4 )  ); 
			right: calc( 0% + ( var( --css-circle-d ) / 4 ) ); */
			top: calc( 290% + 3px + ( var( --css-circle-d ) / 4 ) - ( var( --css-circle-d ) / 2 ) ); 
			right: calc( 0% - ( var( --css-circle-d ) / 4 ) + ( var( --css-circle-d ) / 2 ) );
			z-index: 100 !important;
		}
		
		body.android .line-v-7-pat {
			width: var( --css-line-thickness ); 
			height: 63.3%; 
			position: absolute;
			top: calc( 293.5% );
			right: calc( 5% - 20.1px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-right-2-pat {
			position: absolute;
			width: 85px; 
			height: 85px;
			border-bottom: 10px solid var( --line-color-red );
			border-right: 10px solid var( --line-color-red );
			border-radius: 0 0 85px 0; 
			top: calc( 356% + 2px + ( var( --css-line-thickness ) / 2 ) );
			right: calc( 5% - ( var( --css-line-thickness ) / 2 ) );
			z-index: 100;
		}
		
		/* body.android .corrector-3-pat {
			display: none;
			background-color: var( --bg-color-pink );
			width: 8%;
			height: 1%;
			position: absolute;
			top: calc( 355.5% );
			right: calc( 2% + 20px + var( --css-top-offset-1 ) );
			z-index: 101;
		} */
		
		body.android .line-h-4-pat {
			width: var( --css-line-w-p );
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 363% + 0.8px + ( var( --css-line-thickness ) / 3 ) );
			left: calc( 35% );
			z-index: 100;
		}
		
		body.android .curve-top-left-2-pat {
			width: 85px; 
			height: 85px;
			border-top: 10px solid var( --line-color-red );
			border-left: 10px solid var( --line-color-red );
			border-right: 0px none #00000000 !important;
			border-bottom: 0px none #00000000 !important;
			border-radius: 85px 0 0 0; 
			position: absolute;
			top: calc( 364% + 8.0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100;
		}
		
		body.android .line-v-8-pat {
			position: absolute;
			width: var( --css-line-thickness ); 
			height: 32.0%; 
			top: calc( 372.0% - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 10;
		}
		
		body.android .curve-bottom-left-3-pat {
			width: 45px; 
			height: 45px;
			border-bottom: 10px solid var( --line-color-red );
			border-left: 10px solid var( --line-color-red );
			border-radius: 0 0 0 45px; 
			position: absolute;
			top: calc( 404% - 0px - var( --css-top-offset-1 ) );
			left: calc( 5% + 20px + var( --css-top-offset-1 ) );
			z-index: 100; */
		}
		
		/* body.android .corrector-4-pat {
			display: none;
			background-color: #ffffff;
			width: 8%;
			height: 1%;
			position: absolute;
			top: calc( 370% );
			left: calc( 8% + 1px + var( --css-top-offset-1 ) );
			z-index: 101;
		} */
		
		
		body.android .line-h-5-pat {
			width: 2%;
			height: var( --css-line-thickness ); 
			border-radius: 0px;
			position: absolute;
			top: calc( 406% - 2.5px );
			left: calc( 25% + 1px );
			z-index: 100;
		}
		
		body.android .arrow-top-pat {
			width: 9%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 404% + 11px );
			left: calc( 20% + 4px );
			z-index: 100;
			transform: rotate(45deg);
			border-radius: 5px;
		}
		
		body.android .arrow-bottom-pat {
			width: 9%;
			height: var( --css-line-thickness ); 
			position: absolute;
			top: calc( 406% + 8px );
			left: calc( 21% + 0px );
			z-index: 100;
			transform: rotate(-45deg);
			border-radius: 5px;
		}
		/* SPECIAL - Android Mobile section - Patient Page - END */
		
		/* SPECIAL - Android Mobile section - START */
		
}

/* GOTC - START */