/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
	scroll-behavior: smooth;

	/* Colors */
	--c-primary: #1C006E;
	--c-accent: #1a8bb7;
	--c-white: #fff;
	--c-black: #000;
	--c-gray: #959595;
	--c-gray-dark: #333;
	--c-lilac: #8F8CB5;
	--c-red: #EA0029;
	--c-teal: #055863;
	--c-overlay: rgba(255,255,255,0.6);

	/* Typography */
	--font-main: "Albert Sans", sans-serif;

	/* Transitions */
	--tr-default: all 0.3s ease;
	--tr-fast: all 0.2s;

	/* Shadows */
	--shadow-header: 1px 2px 7px 0px rgba(0,0,0,0.15);
}

/* ============================================================
   BASE / RESET
   ============================================================ */

* { outline: none; }

body {
	background: var(--c-accent);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-main);
	overflow-x: hidden;
	color: var(--c-primary);
}

section {
	position: relative;
	width: 100%;
	padding: 3rem 0;
}

.clear { clear: both; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-main);
	font-weight: 700;
	line-height: 1.2em;
}
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }

p, ul, ol {
	font-family: var(--font-main);
	font-weight: 400;
	line-height: 1.5em;
}

a:hover, a:focus {
	color: #fff;
}

/* ============================================================
   HEADER
   ============================================================ */

header {
	width: 100%;
	background-color: var(--c-white);
	color: var(--c-gray-dark);
	padding: 1rem 0;
	box-shadow: var(--shadow-header);
	z-index: 100;
}
header a {
	color: var(--c-gray-dark);
	font-weight: 800;
}
header a:hover,
header a:active { color: var(--c-black); }

h1 {
	width: 100%;
	height: 100%;
	min-height: 115px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
}
h1 a {
	width: 100%;
	height: 100%;
	display: block;
	background: url("/assets/img/rda_logo.svg") center left no-repeat;
	background-size: contain;
}

#preheader {
	background: var(--c-primary);
	height: 3rem;
	z-index: 101;
	text-align: right;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
	min-width: 150px;
	padding: 0 1rem;
	margin: 0.5rem 0 0.5rem auto;
	background-color: var(--c-primary);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 1rem;
	line-height: 2rem;
	text-align: center;
	display: inline-block;
	color: var(--c-white);
	position: relative;
	transition: var(--tr-default);
}
.btn:hover {
	border-color: rgba(255,255,255,0.8);
	color: var(--c-white);
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */

#langs {
	display: inline-block;
	margin: 0.5rem 0 0.5rem 0.5rem;
	list-style: none;
	padding: 0;
	position: relative;
	text-transform: capitalize;
}
#langs > li { position: relative; }
#langs > li > a {
	min-width: 150px;
	padding: 0 1rem;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 1rem;
	line-height: 2rem;
	text-align: center;
	display: inline-block;
	color: var(--c-white);
	text-decoration: none;
	position: relative;
	background: transparent;
	transition: var(--tr-default);
}
#langs > li > a:hover { border-color: rgba(255,255,255,0.8); }

#langs .menu {
	position: absolute;
	top: 100%;
	right: 0;
	background: rgba(28, 0, 110, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 1rem;
	list-style: none;
	padding: 0.5rem 0;
	margin: 0.5rem 0 0 0;
	min-width: 120px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: var(--tr-default);
	z-index: 1000;
}
#langs:hover .menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#langs .menu li { padding: 0; }
#langs .menu a {
	display: block;
	padding: 0;
	color: var(--c-white);
	text-decoration: none;
	transition: var(--tr-default);
	line-height: 1rem;
	text-align: center;
}
#langs .menu a:hover { border-color: rgba(255,255,255,1); }

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
	border: inset 6px;
	border-color: var(--c-white) transparent transparent;
	right: 1rem;
}

/* ============================================================
   INTRO
   ============================================================ */

#intro {
	background: url("/assets/img/intro_bg.jpg") right center no-repeat;
	background-size: cover;
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#intro h2 {
	font-size: 3.75rem;
	margin: 0;
	padding: 1rem 0;
}
#intro p {
	font-size: 1.5rem;
	line-height: 1.3125em;
}

/* ============================================================
   LOGIN / REGISTRATION
   ============================================================ */

#log-reg {
	background: url("/assets/img/login_bg.jpg") left center no-repeat;
	background-size: cover;
	flex: 1;
}
#log-reg .grid-container .grid-x .cell:nth-child(1) {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#log-reg h2 {
	font-size: 3.75rem;
	margin: 0;
	padding: 1rem 0;
	text-align: left;
}

/* ============================================================
   FORMS
   ============================================================ */

form {
	background-color: rgba(255,255,255,0.5);
	padding: 3rem;
}
form h3 {
	text-transform: uppercase;
	text-align: center;
	font-weight: normal;
	margin: 0;
	padding: 0 0 2rem 0;
	font-size: 1.5rem;
}
form h4 {
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 1rem 0 0.5rem 0;
	font-size: 1.25rem;
	font-weight: 600;
}
label {
	font-size: 1rem;
	color: var(--c-primary);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	border: 1px solid var(--c-primary);
	background-color: var(--c-white);
	font-size: 1rem;
	color: var(--c-primary);
	margin: 0 0 1rem 0;
}
input[type="submit"] {
	margin: 0 auto 2rem auto;
	display: block;
}
form fieldset a {
	text-decoration: underline;
	color: var(--c-primary);
}
form fieldset a:hover { color: var(--c-black); }
form fieldset a.forgotten {
	text-align: center;
	display: block;
}

/* ============================================================
   CUSTOM CHECKBOXES & RADIOS
   ============================================================ */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type='checkbox'],
	input[type='radio'] {
		--active: var(--c-primary);
		--active-inner: var(--c-white);
		--border: var(--c-black);
		--border-hover: var(--c-black);
		--background: var(--c-white);
		--disabled: #F6F8FF;
		--disabled-inner: #E1E6F9;
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 23px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background .3s, border-color .3s, box-shadow .2s;
	}
	input[type='checkbox']:after,
	input[type='radio']:after {
		content: '';
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}
	input[type='checkbox']:checked,
	input[type='radio']:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}
	input[type='checkbox']:disabled,
	input[type='radio']:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: .9;
	}
	input[type='checkbox']:disabled:checked,
	input[type='radio']:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}
	input[type='checkbox']:disabled + label,
	input[type='radio']:disabled + label { cursor: not-allowed; }
	input[type='checkbox']:hover:not(:checked):not(:disabled),
	input[type='radio']:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); }
	input[type='checkbox']:focus,
	input[type='radio']:focus { box-shadow: 0 0 0 var(--focus); }
	input[type='checkbox']:not(.switch),
	input[type='radio']:not(.switch) { width: 23px; }
	input[type='checkbox']:not(.switch):after,
	input[type='radio']:not(.switch):after { opacity: var(--o, 0); }
	input[type='checkbox']:not(.switch):checked,
	input[type='radio']:not(.switch):checked { --o: 1; }

	input[type='checkbox'] + label,
	input[type='radio'] + label {
		line-height: 23px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		margin-left: 1rem;
		top: 8px;
		font-size: 1rem;
		font-weight: 600;
		width: calc(100% - 60px);
		margin-bottom: 1rem;
	}

	/* Checkbox specifics */
	input[type='checkbox']:not(.switch) { border-radius: 3px; }
	input[type='checkbox']:not(.switch):after {
		width: 7px;
		height: 12px;
		border: 3px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 6px;
		top: 2px;
		transform: rotate(var(--r, 20deg));
	}
	input[type='checkbox']:not(.switch):checked { --r: 43deg; }
	input[type='checkbox'].switch {
		width: 38px;
		border-radius: 11px;
	}
	input[type='checkbox'].switch:checked {
		--ab: var(--active-inner);
		--x: 17px;
	}
	input[type='checkbox'].switch:disabled:not(:checked):after { opacity: .6; }

	/* Radio specifics */
	input[type='radio'] { border-radius: 50%; }
	input[type='radio']:after {
		width: 21px;
		height: 21px;
		border-radius: 50%;
		background: var(--active-inner);
		opacity: 0;
		transform: scale(var(--s, 0.7));
	}
	input[type='radio']:checked { --s: .5; }

	/* Validation state */
	input[type='checkbox'].notok,
	input[type='radio'].notok { border: 1px solid #c00; }
}

@media print {
	input[type='checkbox']:checked,
	input[type='radio']:checked {
		print-color-adjust: exact !important;
		-webkit-print-color-adjust: exact !important;
	}
	input[type='checkbox']:checked:after,
	input[type='radio']:checked:after { opacity: 1 !important; }
	input[type='checkbox']:checked {
		border: 2px solid var(--c-primary) !important;
		background: var(--c-primary) !important;
	}
}

/* ============================================================
   NAV
   ============================================================ */

nav {
	width: 100%;
	min-height: 2rem;
	color: var(--c-gray);
	padding: 0;
	position: relative;
	z-index: 100;
	margin: 1rem 0;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav ul li {
	margin: 0;
	display: inline-block;
}
nav a {
	color: var(--c-gray);
	font-family: var(--font-main);
	font-size: 1em;
	line-height: 1.2em;
	position: relative;
	display: block;
	font-weight: 400;
	padding: 0 0.9rem;
}
nav a:hover,
nav a:active,
nav a:focus,
nav ul li.active a { color: var(--c-primary); }

nav ul li a::before {
	position: absolute;
	bottom: -0.3em;
	left: 0.9rem;
	overflow: hidden;
	width: calc(100% - 1.8rem);
	background-color: var(--c-accent);
	content: "";
	transition: var(--tr-fast);
	display: block;
	height: 2px;
	z-index: -1;
	opacity: 0;
}
nav ul li.active a::before,
nav ul li a:hover::before { opacity: 1; }

/* ============================================================
   HAMBURGER MENU (spinner-master)
   ============================================================ */

#spinner_master_container { display: none; z-index: 999999; position: absolute; top: 0; right: 0; }
#spinner_master_container .columns { padding: 0; }
.spinner-master { position: relative; margin: 10px; height: 30px; width: 40px; float: right; }
.spinner-master * { transition: var(--tr-default); box-sizing: border-box; }
.spinner-master input[type="checkbox"] { display: none; }
.spinner-master input[type="checkbox"] + label:before,
.spinner-master input[type="checkbox"]:checked + label:before { display: none; }
.spinner-master input[type="checkbox"] + label { height: 30px; }
.spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 0; left: 0; margin: 0; text-indent: -999999px; }
.spinner-master .spinner { position: absolute; height: 5px; width: 100%; background-color: var(--c-black); border-radius: 3px; }
.spinner-master .diagonal.part-1 { position: relative; float: left; }
.spinner-master .horizontal { position: relative; float: left; margin-top: 5px; }
.spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 5px; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .horizontal { opacity: 0; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); margin-top: 10px; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg); margin-top: -15px; }
input[type='checkbox'] + label.spinner-spin,
input[type='radio'] + label.spinner-spin { width: 100% !important; }

/* ============================================================
   SEARCH
   ============================================================ */

#rarementor {
	width: 200px;
	display: inline-block;
	float: right;
	padding: 0.3rem 0 0 0.9rem;
}
#rarementor p {
	margin: 0;
	padding: 0;
	color: var(--c-gray);
}

form#search_form {
	padding: 0.5rem 0 0.5rem 0.9rem;
	background: var(--c-white);
	display: inline-block;
	position: relative;
	width: calc(100% - 250px);
}
form#search_form label { display: none; }

#search_form input::placeholder {
	color: var(--c-gray);
	font-weight: 500;
}

.search-container {
	position: relative;
	display: inline-block;
	width: 100%;
}
#search_term {
	width: 100%;
	padding: 0 40px 0 10px;
	height: 40px;
	border: 1px solid var(--c-gray);
	box-sizing: border-box;
	color: var(--c-primary);
	font-weight: 600;
	background: var(--c-white);
	box-shadow: none;
}
#search_term:focus { border-color: var(--c-primary); }

.search_btn {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.search_btn i { font-size: 1.5rem; color: var(--c-gray); }
.search_btn:hover i { color: var(--c-primary); }

/* ============================================================
   CONTENT
   ============================================================ */

.content { color: var(--c-primary); }
.content a { color: var(--c-white); }
.content a:hover { color: var(--c-white); }

.content h2 { font-size: 2.25rem; margin: 0; padding: 0 0 1rem 0; font-weight: 400; color: var(--c-white); }
.content h3 { font-size: 1.5rem; margin: 0; padding: 1rem 0; font-weight: normal; color: var(--c-white); }
.content h4 { font-size: 1.2rem; margin: 0; padding: 1rem 0; font-weight: normal; color: var(--c-white); }
.content h5 { font-size: 1.2rem; margin: 0; padding: 0.5rem 0; font-weight: normal; color: var(--c-white); }
.content h6 { font-size: 1rem; margin: 0; padding: 0.5rem 0; color: var(--c-white); }

.content p, .content ul, .content ol, table td {
	font-size: 1rem;
	line-height: 1.3125em;
	text-align: justify;
	color: var(--c-white);
}

thead, tbody, tfoot {
	background-color: transparent;
	border: 1px solid var(--c-primary);
}
tbody tr:nth-child(even) { background-color: rgba(28, 0, 110, 0.05); }
td { vertical-align: top; }
p.reference { font-size: 0.8rem; margin-bottom: 0; }

/* --- Dark-on-light text override (many containers need primary color text) --- */
.home_text_container h3, .home_text_container h5, .home_text_container p,
.home_text_container ul, .home_text_container ol,
.accordion-content ul li a, .accordion-content ul li a p, .accordion-content ul li a i,
.case_text_container h3, .case_text_container h4, .case_text_container h5,
.case_text_container p, .case_text_container ul, .case_text_container ol,
.story_text h3, .story_text h4, .story_text h5,
.story_text p, .story_text ul, .story_text ol,
.stories_text_container h3, .stories_text_container h4, .stories_text_container h5,
.stories_text_container p,
.events_text_container h3, .events_text_container h4, .events_text_container h5,
.education_text_container h3, .education_text_container h4, .education_text_container h5,
.links_text_container h3, .links_text_container h4, .links_text_container h5,
.links_text_container p, .events_text_container p, .education_text_container p,
.contact h5, .contact p, .contact a,
#sst_holder h2, #sst_holder h3, #sst_holder h4, #sst_holder h5,
#sst_holder p, #sst_holder ul, #sst_holder ol,
.accordion_text_container h3, .accordion_text_container h5,
.accordion_text_container p, .accordion_text_container ul, .accordion_text_container ol {
	color: var(--c-primary);
}

.video-link.active i,
.video-link.active:hover i,
.video-link.active p,
.video-link.active:hover p { color: var(--c-white); }

/* ============================================================
   SHARED CARD COMPONENT
   Used by: home, case, links, events, education, stories
   ============================================================ */

.home_sub_container,
.case_sub_container,
.links_sub_container,
.events_sub_container,
.education_sub_container,
.stories_sub_container {
	display: flex;
	position: relative;
	margin: 3rem 0;
	color: var(--c-primary);
	border: 1px solid var(--c-primary);
	text-align: center;
	height: 80%;
	background-color: var(--c-white);
}
.education_sub_container { height: 90%; }

.home_sub_container:hover,
.case_sub_container:hover,
.links_sub_container:hover,
.events_sub_container:hover,
.education_sub_container:hover,
.stories_sub_container:hover { color: var(--c-black); }

/* Shared text containers */
.home_text_container,
.case_text_container,
.links_text_container,
.events_text_container,
.education_text_container,
.stories_text_container {
	width: 100%;
	display: inline-block;
	padding: 2rem 1rem 3rem 1rem;
	text-align: center;
}
.home_text_container { padding: 2rem 1rem 1rem 1rem; }

.home_text_container h3,
.case_text_container h3,
.links_text_container h3,
.events_text_container h3,
.education_text_container h3,
.stories_text_container h3 {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5rem;
	text-align: center;
}

.home_text_container p,
.case_text_container p,
.links_text_container p,
.events_text_container p,
.education_text_container p,
.stories_text_container p { text-align: center; }

/* Shared reference text (absolute positioned in cards) */
.case_text_container p.reference,
.links_text_container p.reference,
.events_text_container p.reference,
.education_text_container p.reference,
.stories_text_container p.reference {
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1em;
	display: block;
	position: absolute;
	bottom: 2rem;
	left: 0;
	width: 100%;
}

/* Shared "learn more" pill buttons */
.home_learn_more,
.case_learn_more,
.links_learn_more,
.events_learn_more,
.education_learn_more,
.stories_learn_more {
	color: var(--c-white);
	background-color: var(--c-primary);
	border-radius: 1rem;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: auto;
	line-height: 1rem;
	padding: 0 1rem;
	translate: -50% 50%;
}

.home_learn_more p,
.case_learn_more p,
.links_learn_more p,
.events_learn_more p,
.education_learn_more p,
.stories_learn_more p {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	line-height: 2em;
	font-size: 1rem;
	text-align: center;
	white-space: nowrap;
}
.case_learn_more a p,
.links_learn_more a p { color: var(--c-white); }

/* Shared icon containers (round badges) */
.home_icon_container,
.case_icon_container,
.links_icon_container,
.events_icon_container,
.education_icon_container,
.stories_icon_container {
	width: 55px;
	height: 55px;
	display: block;
	background-color: var(--c-primary);
	border: 1px solid var(--c-primary);
	border-radius: 50%;
	background-size: 70% auto;
	background-repeat: no-repeat;
	background-position: center center;
	transition: transform .2s;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
}

/* Per-icon background images */
.case_icon_container   { background-image: url('/assets/img/ico_clinical.svg'); }
.links_icon_container  { background-image: url('/assets/img/ico_links.svg'); }
.events_icon_container,
.education_icon_container { background-image: url('/assets/img/ico_education.svg'); }
.stories_icon_container   { background-image: url('/assets/img/ico_patient.svg'); }

/* Shared icon hover scale */
.home_sub_container:hover .home_icon_container,
.case_sub_container:hover .case_icon_container,
.links_sub_container:hover .links_icon_container,
.events_sub_container:hover .events_icon_container,
.education_sub_container:hover .education_icon_container,
.stories_sub_container:hover .stories_icon_container { transform: scale(1.5); }

.case_sub_container.with_rating { padding-bottom: 100px; }

/* Shared image containers for events/education */
.events_image_container,
.education_image_container {
	width: 60%;
	height: 100px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: relative;
	margin: 0 auto;
}

/* ============================================================
   THERAPEUTIC & SUPPORT (shared card-with-image pattern)
   ============================================================ */

.therapeutic_sub_container,
.support_sub_container {
	background-color: var(--c-primary);
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	padding-bottom: 2rem;
	padding-bottom: calc(2rem + (2.5rem * var(--btn-count)));
}

.therapeutic_image_container,
.support_image_container {
	position: relative;
	width: 100%;
	aspect-ratio: 2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.therapeutic_image_container::after,
.support_image_container::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--c-overlay);
	z-index: 1;
}
.therapeutic_image_container h3,
.support_image_container h3 {
	color: var(--c-primary);
	padding: 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.therapeutic_text_container,
.support_text_container { 
	position: relative; 
	padding-bottom: 2rem;
}
.therapeutic_text_container p {
	color: var(--c-white);
	padding: 1rem;
	text-align: left;
}
.therapeutic_text_container p span.reference {
	display: block;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}
.support_text_container p {
	color: var(--c-white);
	padding: 1rem 1rem 0 1rem;
	text-align: left;
}
.support_text_container p a {
	line-height: 1.5em;
	padding: 0.5rem;
}
.support_text_container p a:hover { color: var(--c-white); }

/* Data-btn-count variants */
.therapeutic_sub_container[data-btn-count="1"] { --btn-count: 1; }
.therapeutic_sub_container[data-btn-count="2"] { --btn-count: 2; }
.therapeutic_sub_container[data-btn-count="3"] { --btn-count: 3; }
.therapeutic_sub_container[data-btn-count="4"] { --btn-count: 4; }
.therapeutic_sub_container[data-btn-count="5"] { --btn-count: 5; }
.therapeutic_sub_container[data-btn-count="6"] { --btn-count: 6; }

.support_sub_container[data-btn-count="0"] { --btn-count: 1; }
.support_sub_container[data-btn-count="1"] { --btn-count: 1; }
.support_sub_container[data-btn-count="2"] { --btn-count: 2; }
.support_sub_container[data-btn-count="3"] { --btn-count: 3; }
.support_sub_container[data-btn-count="4"] { --btn-count: 4; }
.support_sub_container[data-btn-count="5"] { --btn-count: 5; }
.support_sub_container[data-btn-count="6"] { --btn-count: 6; }
.support_sub_container[data-btn-count="7"] { --btn-count: 7; }
.support_sub_container[data-btn-count="8"] { --btn-count: 8; }
.support_sub_container[data-btn-count="9"] { --btn-count: 9; }

/* Shared btn-container pattern */
.btn-container,
.support_btn_container {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: calc(100% - 2rem);
}
.btn-container a.btn,
.support_btn_container a.btn {
	margin: 0;
	padding: 0.3rem 3rem;
	display: block;
	text-align: left;
	line-height: 1.4em;
	color: var(--c-white);
	width: auto;
}
.btn-container a.btn i,
.support_btn_container a.btn i {
	position: absolute;
	width: 2rem;
	height: 2rem;
	background: var(--c-white);
	border-radius: 50%;
	left: 0;
	top: 50%;
	background-position: center center;
	background-size: 80% auto;
	background-repeat: no-repeat;
	transform: translateY(-50%) scale(1);
	transition: transform .2s;
}
.support_btn_container a.btn i { background-size: cover; }
.btn-container a.btn:hover i,
.support_btn_container a.btn:hover i { transform: translateY(-50%) scale(1.5); }

/* Therapeutic multi-btn width/padding overrides */
.therapeutic_sub_container[data-btn-count="2"] .btn-container,
.therapeutic_sub_container[data-btn-count="3"] .btn-container,
.therapeutic_sub_container[data-btn-count="4"] .btn-container,
.therapeutic_sub_container[data-btn-count="5"] .btn-container,
.therapeutic_sub_container[data-btn-count="6"] .btn-container {
	width: calc(100% - 2rem);
}
.therapeutic_sub_container[data-btn-count="0"] .btn-container a.btn,
.therapeutic_sub_container[data-btn-count="1"] .btn-container a.btn {
	padding: 0.3rem 1rem;
	text-align: center;
}
.therapeutic_sub_container[data-btn-count="2"] .btn-container a.btn,
.therapeutic_sub_container[data-btn-count="3"] .btn-container a.btn,
.therapeutic_sub_container[data-btn-count="4"] .btn-container a.btn,
.therapeutic_sub_container[data-btn-count="5"] .btn-container a.btn,
.therapeutic_sub_container[data-btn-count="6"] .btn-container a.btn {
	padding: 0.3rem 1rem 0.3rem 3rem;
}

/* Shared sub-sub container (therapeutic & support detail pages) */
.therapeutic_subsub_container,
.support_subsub_container {
	text-align: center;
	padding: 1rem;
	color: var(--c-primary);
	display: inline-block;
	vertical-align: top;
	margin: 2rem 0;
}
.therapeutic_subsub_container .therapeutic_text_container h3,
.support_subsub_container .support_text_container h3 {
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--c-primary);
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.therapeutic_sub_image_container,
.support_sub_image_container {
	width: 90px;
	height: 90px;
	display: block;
	background-color: var(--c-white);
	border-radius: 50%;
	background-size: 70% auto;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	margin: 0 auto;
}
.therapeutic_back,
.support_back {
	margin: 3rem 0 0 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	width: 50%;
}
.therapeutic_back i,
.support_back i {
	font-size: 2em;
	margin-right: 1rem;
}
.therapeutic_back i,
.therapeutic_back span { color: var(--c-white); }
.support_back span {
	height: 2em;
	line-height: 2em;
}

/* Cases card (similar to therapeutic but simpler) */
.cases_sub_container {
	background-color: var(--c-primary);
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	padding-bottom: 4.5rem;
}
.cases_image_container {
	position: relative;
	width: 100%;
	aspect-ratio: 2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cases_image_container::after {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--c-overlay);
	z-index: 1;
}
.cases_image_container h3 {
	color: var(--c-primary);
	padding: 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.cases_text_container { position: relative; }
.cases_text_container p {
	color: var(--c-white);
	padding: 1rem;
	text-align: left;
}

/* ============================================================
   ACCORDION
   ============================================================ */

.accordion { background-color: transparent; }
.accordion-item { margin-bottom: 0.5rem; }
.content a.accordion-title {
	border: none;
	background-color: var(--c-primary);
	text-transform: uppercase;
	color: var(--c-white);
	font-size: 1rem;
	line-height: 1.2em;
	text-align: left;
	padding: 1rem 3rem 1rem 1rem;
}
.accordion-content {
	background: #F1F1F1;
	color: var(--c-primary);
	border: none;
	padding: 0;
}
.accordion-content ul { list-style-type: none; margin: 0; padding: 0; }
.accordion-content ul li { padding: 0 1rem; }
.accordion-content ul li a {
	font-size: 1rem;
	line-height: 1.2em;
	display: inline-flex;
	align-items: top;
	text-align: left;
	padding: 0.5rem 0;
	width: 100%;
	height: 100%;
}
.accordion-content ul li a i { font-size: 2rem; margin-right: 1rem; }
.accordion-content ul li a span { display: block; }
.accordion-content ul li a p { text-align: left; margin: 0; padding: 0; }
.accordion-content ul li a p span.video_name { font-weight: 600; display: inline-block; width: 100%; }
.accordion-content ul li a p span.video_author { font-weight: 200; display: inline-block; width: 100%; font-size: 1rem; }

.accordion-title::before { top: 0; margin-top: 1rem; }
.video-link.active,
.video-link.active:hover { color: var(--c-white); }
.accordion-content ul li.active-parent { background-color: var(--c-primary); }
:last-child:not(.is-active) > .accordion-title { border-bottom: none; }

.accordion_text_container { padding: 2rem; background: var(--c-white); }
.accordion_text_container img { display: block; margin: 0 auto; }
.content .accordion_text_container table { color: var(--c-primary); margin: 0 !important; border: none; }
.content .accordion_text_container table td { color: var(--c-primary); }
.content .accordion_text_container table tbody { border: none; }
.content .accordion_text_container table tbody tr:nth-child(even) { background-color: transparent; }
.content .accordion_text_container a { color: var(--c-primary); }

/* Responsive video */
.responsive-video-container {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	height: 0;
}
.responsive-video-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.content_image_holder { margin-bottom: 1rem; }
.content_image { margin: 1rem; }

/* ============================================================
   RATING
   ============================================================ */

.rating-section {
	text-align: center;
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	width: 100%;
}
.stars { display: inline-flex; gap: 8px; font-size: 40px; cursor: pointer; }
.star { color: #ddd; transition: var(--tr-fast); user-select: none; }
.star:hover, .star.hover { color: #ffd700; transform: scale(1.15); }
.star.filled { color: #ffd700; }
.star.half-filled {
	background: linear-gradient(90deg, #ffd700 50%, #ddd 50%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.avg-value { font-size: 1.5rem; font-weight: bold; }
.rating-count { color: #666; font-size: 13px; }
.average-info p { margin: 0; padding: 0; }

.message {
	text-align: center;
	margin: 0;
	padding: 0.5rem 0;
	border-radius: 0.4rem;
	font-size: 0.8rem;
	display: none;
	width: calc(100% - 2rem);
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.message.success { background: #d4edda; color: #155724; }
.message.error { background: #f8d7da; color: #721c24; }

/* ============================================================
   LINKS (extra)
   ============================================================ */

.links_img { max-width: 80%; max-height: 150px; }

/* ============================================================
   STORIES (extra)
   ============================================================ */

.stories_image_container {
	width: 60%;
	aspect-ratio: 1/1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	position: relative;
	margin: 0 auto;
	border-radius: 50%;
}

.story {
	position: relative;
	background: url("/assets/img/modal_top.svg") top center no-repeat, url("/assets/img/modal_bottom.svg") bottom center no-repeat;
	background-size: 100% auto, 100% auto;
	min-height: 400px;
	border: none;
	background-color: var(--c-white);
	padding: 5rem 5rem 2rem 5rem;
	margin: 0 auto;
	outline: 0;
	width: 100%;
}
.story h3 {
	margin-bottom: 0.5rem;
	line-height: 1em;
	font-weight: bold;
	color: #262267;
	font-size: 3rem;
	padding: 3rem 0 1rem 0;
}
.story h4 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1em;
	font-weight: bold;
	color: var(--c-red);
	font-size: 2rem;
}
.story_text img {
	float: right;
	margin: 0 0 1em 1em;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	height: auto;
}
.story_text img.story_logo {
	display: inline-block;
	height: auto;
	clear: both;
	float: right;
	width: 200px;
	margin: 2rem 0;
}
.story_img {
	border-radius: 50%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	float: right;
	width: 400px;
	height: 400px;
	margin: 0 0 2rem 2rem;
}
.story_text strong {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	line-height: 1em;
	font-weight: bold;
	color: var(--c-teal);
}
.story_disc {
	line-height: 1.25em;
	text-align: left;
	color: var(--c-white);
	font-weight: normal;
	font-size: 0.8rem;
	margin: 0;
	padding: 7rem 0 0 0;
}

/* ============================================================
   SUPPORT (extra - references)
   ============================================================ */

.support_reference_container { position: relative; }
.support_reference_container p {
	padding: 0 1rem 1rem 1rem;
	text-align: left;
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--c-accent);
}

/* ============================================================
   SST HOLDER
   ============================================================ */

#sst_holder {
	background-color: var(--c-white);
	color: var(--c-primary);
	padding: 3rem 6rem;
	margin-bottom: 2rem;
}
#sst_holder form { padding: 0; }
#sst_holder h1 {
	font-size: 2rem;
	font-weight: 300;
	color: var(--c-primary);
	text-align: center;
	line-height: 1.2;
	margin: 0;
	text-indent: 0;
	padding: 0;
	min-height: 0;
}
#sst_holder h2 {
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--c-primary);
	text-align: left;
	line-height: 1.2;
	margin-top: 50px;
	margin-bottom: 20px;
	padding: 0;
}
#sst_holder h3 {
	font-size: 1.2rem;
	font-weight: 300;
	color: var(--c-primary);
	text-align: left;
	line-height: 1.2;
	margin: 20px 0;
	text-transform: none;
	padding: 0;
}
#sst_holder p {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.3;
	margin: 0;
	text-align: left;
}
#sst_holder p a { text-decoration: underline; }
#sst_holder .flex { display: flex; gap: 30px; align-items: center; }
#sst_holder label.sst {
	margin-bottom: 0.5rem;
	line-height: 2;
	display: flex;
	align-items: center;
}
#sst_holder input[type="checkbox"] {
	min-width: 20px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin: -2px 10px 0 0;
}
#sst_holder ul { text-align: left; margin: 0; }

.hide_form_elements { display: none !important; }
.show_form_elements { display: block; }

#sst_holder table { margin: 0 auto; width: 100%; max-width: 800px; }
#sst_holder thead, #sst_holder tbody, #sst_holder tfoot { border: none; }
#sst_holder tbody th, #sst_holder tbody td { padding: 0; text-align: left; }
#sst_holder table table tbody td { color: inherit; }
#sst_holder table h2 { color:inherit; margin: 0; font-weight: 600; }
#sst_holder table h3 { color: var(--c-white); margin: 0; }
#sst_holder table label { color: inherit; text-align: left; }
#sst_holder table tbody tr:nth-child(even) { background: transparent; }
#sst_holder table:nth-child(3) h2,
#sst_holder table:nth-child(3) h3,
#sst_holder table:nth-child(3) label { color: #8586af; }
#sst_holder table table { font-size: 0.8125rem; }

.content .box_action_btn {
	border: 1px solid var(--c-primary);
	color: var(--c-white);
	font-size: 24px;
	font-weight: 300;
	background: var(--c-primary);
	padding: 10px 20px;
	width: 200px;
	cursor: pointer;
	transition: var(--tr-fast);
	text-decoration: none;
	display: block;
	line-height: 28px;
	margin-bottom: 2rem;
}
.content .box_action_btn:hover,
.content .box_action_btn:active { color: var(--c-white); }

[role="tooltip"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
	visibility: hidden;
	position: absolute;
	top: 30px;
	left: 0;
	background: var(--c-primary);
	color: white;
	padding: 10px;
	font-style: italic;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.15;
}

.sst_logoflex {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-top: 50px;
	flex-wrap: wrap;
}
.sst_logo.sanofi { max-height: 55px; }
.sst_logo.kyowa { width: 300px; }

#sst_holder .box_content h1 {
	color: var(--c-white);
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 600;
	margin: 0.67em 0;
}
#sst_holder .box_content p { font-size: 18px; font-weight: 300; line-height: 1.3; }
#sst_holder .lilabg {
	background-color: var(--c-lilac);
	color: var(--c-white);
	padding: 15px 20px;
}
.mb-10 { margin-bottom: 10px !important; }
#sst_holder .lilabg p { color: var(--c-white); text-align: center; }
#sst_holder .box_content .text-center {
	text-align: center !important;
	margin-bottom: 10px;
}

/* ============================================================
   XLH INFOGRAPHIC
   ============================================================ */

.xlh-infographic #sst_holder .color { font-weight: 600; color: var(--c-lilac); }

.infograph_box_container { display: flex; flex-wrap: wrap; gap: 20px; }
.infograph_bg { background-color: #E6E6E6; padding: 30px 10px; }
.infograph_flex { display: flex; margin-top: 30px; }
.infograph_lead {
	background-color: var(--c-lilac);
	color: var(--c-white) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	padding: 5px 20px;
}

.xlh-infographic #sst_holder p { margin-bottom: 10px; }
.infograph_img_col { flex: 1 1 160px; }
.infograph_img { max-width: 130px; margin: 0 auto; }

#sst_holder .infographic_flex_footer {
	background-color: var(--c-primary);
	color: var(--c-white);
	text-align: center;
	padding: 10px 20px;
	margin-bottom: 20px;
}
#sst_holder .infographic_flex_footer p { color: var(--c-white); text-align: center; }
.infographic_flex_footer p:first-child { font-weight: 600 !important; }

.xlh-infographic #sst_holder h2 {
	text-align: center;
	color: var(--c-lilac);
	font-size: 24px;
	max-width: 800px;
	margin: 0 auto 20px;
	font-weight: 600;
}

.infograph_box {
	flex: 1 1 auto;
	flex-basis: calc(100% - 160px);
	background-color: var(--c-white);
}
.infograph_text { padding: 0 10px; }
.infograph_row {
	margin-bottom: 20px;
	padding: 0 20px;
	display: flex;
}

.xlh-infographic figure { text-align: center; }

.infograph_innerflex { display: flex; }
.infograph_innerflex_left { flex: 1 1 auto; flex-basis: calc(100% - 170px); }
.infograph_innerflex_right { flex: 1 1 170px; padding-left: 10px; }

.infograph_box2 { margin-bottom: 20px; }
.infograph_box_left { flex: 1 1 50%; }
.infograph_box_inner { display: flex; gap: 20px; }
.infograph_box_outer .infograph_box p { padding: 10px; }
.infograph_box2 .infograph_lead { background-color: var(--c-primary); }
.infograph_box2 p:not(.infograph_lead) { background-color: var(--c-white); padding: 20px; }

.infographic_box_radiological_flex { display: flex; flex-wrap: wrap; background: var(--c-white); }
.infographic_box_left { flex: 1 1 50%; background-color: var(--c-white); }
.infograph_lead2 { background-color: var(--c-primary); }
.infographic_box_right,
.infograph_box_right { flex: 1 1 50%; }
.infograph_img_large { margin: 0 auto; display: block; }

/* Infographic table */
#sst_holder .infographic_table {
	margin: 0 auto;
	width: calc(100% - 20px);
	max-width: 100%;
	color: var(--c-primary);
}
#sst_holder .infographic_table th {
	color: var(--c-white);
	font-size: 1.2rem;
	text-align: center;
	padding: 5px;
}
#sst_holder .infographic_table td {
	color: var(--c-primary);
	font-size: 1.2rem;
	font-weight: 300;
	padding: 5px;
}
#sst_holder .infographic_table thead { background-color: var(--c-primary); color: var(--c-white); }
#sst_holder .infographic_table tfoot { border-top: 2px solid var(--c-lilac); font-size: 14px; }
#sst_holder .infographic_table tfoot td { font-size: 14px; }
#sst_holder .infographic_table tr { border-bottom: 2px solid var(--c-primary); }
#sst_holder .infographic_table tr:last-child { border: 0; }

#sst_holder .infograph_box3 {
	background-color: var(--c-lilac);
	color: var(--c-white);
	flex: 1 1 100%;
	padding: 20px;
}
#sst_holder .infograph_box3 p {
	font-weight: 600 !important;
	text-align: center;
	margin-bottom: 0;
	color: var(--c-white);
}

#sst_holder .infographic_footer {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	align-items: flex-end;
}
.xlh-infographic #sst_holder .infographic_footer_text { font-size: 14px; }
#sst_holder .infographic_footer_text { flex: 1 1 70%; }
.infographic_swixx_logo { max-height: 45px; }
.infographic_footer_logo { padding: 0 20px; flex: 1 1 30%; text-align: right; }

.xlh-infographic #sst_holder .infographic_copyright {
	background-color: var(--c-primary);
	color: var(--c-white);
	font-size: 14px !important;
	padding: 10px 20px;
	margin-bottom: 30px !important;
}

/* ============================================================
   CONTACTS
   ============================================================ */

.contacts {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-items: center;
}
.contact {
	background: var(--c-white);
	padding: 1rem;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}
.contact h5 { text-transform: uppercase; font-weight: 400; }
.contact p { margin: 0; padding: 0; }
.contact a { font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
	background: var(--c-primary);
	width: 100%;
	position: relative;
	margin-top: auto;
	padding: 2rem 0;
	color: var(--c-white);
}
#swixx_logo { max-width: 250px; padding: 0.5rem; }
footer nav { width: 100%; }
footer nav ul li a { color: var(--c-white); font-size: 0.75rem; }
footer nav ul li.active a { color: var(--c-white); }
footer p { font-size: 0.75rem; margin: 0; padding: 0 1rem 0.5rem 1rem; }
footer a { color: var(--c-white); font-weight: bold; }
footer a:hover, footer a:focus { color: var(--c-white); }


/* ============================================================
   SLIKE
   ============================================================ */

#imageModal {
  background: #111;
  padding: 0;
  border: none;
  width: auto;
  max-width: 90vw;
}

#imageModal .close-button {
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
}

:last-child > .accordion-content:last-child {
	border-bottom: none;
}
.documents {
	width: 100%;
	height: auto;
	padding: 0 0 1rem 0;
}
.documents ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.documents ul li {
	width: 100%;
	margin: 2px 0;
	position: relative;
	background-color: var(--c-primary);
}
.documents ul li a {
	display: inline-block;
	height: auto;
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.2em;
	font-weight: normal;
	position: relative;
	text-align: left;
}
.documents ul li a p {	
	margin: 0;
	padding: 0;
	display: inline-block;
}
i.fa-sharp {
	margin: 0 1rem 0 0;
	color: #fff;
	width: 2rem;
}
.documents ul li:hover a i.fa-sharp {
	color: #fff;
}
i.fa-arrow-to-bottom {
	float: right;
	margin: 0 0 0 1rem;
}



/* ============================================================
   SST RICKETS — FORM FIXES
   Migrirana forma sa starog Swixx weba oslanja se na CSS reset
   i utility klase kojih nema u app.css. Sve scoped pod #sst_holder
   da ne dira ostatak sitea.
   ============================================================ */

/* Reset margina/padding/border (kompenzira nedostatak Meyer reseta) */
#sst_holder h1, #sst_holder h2, #sst_holder h3,
#sst_holder h4, #sst_holder h5, #sst_holder h6,
#sst_holder p, #sst_holder ul, #sst_holder ol, #sst_holder li,
#sst_holder form, #sst_holder fieldset, #sst_holder label,
#sst_holder table, #sst_holder caption,
#sst_holder thead, #sst_holder tbody, #sst_holder tfoot,
#sst_holder tr, #sst_holder th, #sst_holder td,
#sst_holder img {
	margin: 0;
	padding: 0;
	border: 0;
}
#sst_holder ul, #sst_holder ol { list-style: none; }
#sst_holder table { border-collapse: collapse; border-spacing: 0; }
#sst_holder b, #sst_holder strong { font-weight: bold; }

/* Pusti inline boje sekcija kroz cascade (override globalnih app.css pravila) */
#sst_holder h1, #sst_holder h2, #sst_holder h3,
#sst_holder h4, #sst_holder h5, #sst_holder h6,
#sst_holder p, #sst_holder ul, #sst_holder ol, #sst_holder li,
#sst_holder label, #sst_holder span, #sst_holder a,
#sst_holder div, #sst_holder td, #sst_holder th {
	color: inherit;
}
#sst_holder td, #sst_holder th {
	text-align: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Ukloni globalni table border i zebra-stripe */
#sst_holder thead, #sst_holder tbody, #sst_holder tfoot {
	border: 0;
	background: transparent;
}
#sst_holder tr { background: transparent; }

/* Tabele — auto širina umjesto fiksnih 800px iz app.css */
#sst_holder table { max-width: none; width: auto; }
#sst_holder > form > table { width: 100%; }

/* Header H1 — undo globalnog text-indent: -9999px */
#sst_holder h1 {
	width: auto;
	height: auto;
	min-height: 0;
	text-indent: 0;
	background: none;
	display: block;
}

/* Labeli — manji font, semi-condensed, kompaktan razmak.
   STEP 5 row (table:last-of-type) je inline Yes/No pa bez margine. */
#sst_holder label,
#sst_holder table label {
	font-size: 0.875rem;
	line-height: 1.3;
	font-stretch: 87.5%;
	letter-spacing: -0.005em;
	margin-bottom: 8px;
}
#sst_holder label.sst { margin-bottom: 0.25rem; }
#sst_holder table:last-of-type label { margin-bottom: 0; }

/* Bijeli border na checkbox-ima u STEP 1 (lila #8586af pozadina).
   Default border iz app.css je crn pa se na lila gotovo gubi. */
#sst_holder [style*="background-color: #8586af"] input[type='checkbox'],
#sst_holder [style*="background-color:#8586af"] input[type='checkbox'] {
	border: 1px solid #ffffff !important;
	-webkit-print-color-adjust: exact !important;
	print-color-adjust: exact !important;
}

/* Action buttoni (Download / Print / 1-Pager PDF).
   width:auto + nowrap da naslov stane u jedan red; bijela slova na svim stanjima.
   #sst_one_page_download override-a inline width: 300px. */
#sst_holder .box_action_btn {
	font-weight: 300;
	margin-bottom: 0;
	box-sizing: border-box;
	width: auto;
	white-space: nowrap;
}
#sst_holder .box_action_btn,
#sst_holder a.box_action_btn:link,
#sst_holder a.box_action_btn:visited,
#sst_holder .box_action_btn:hover,
#sst_holder .box_action_btn:active,
#sst_holder .box_action_btn:focus {
	color: var(--c-white) !important;
}
#sst_one_page_download { width: auto !important; }
#sst_holder .flex { flex-wrap: wrap; }

/* Utility klase iz starog Swixx sitea */
.mt-30 { margin-top: 30px !important; }
@media print { .dontprint { display: none !important; } }