.mainWrapper {
	--color__blue: #25408f;
		--color__blue--light: #25408F;
		--color__blue--lightest: #dedfe9;
		--color__blue--pastel: #8D9FCC;
	--color__silver: #f2f2f2;
	--color__gray: #dedfe9;
	--color__orange: #ff974a;
	--color__salmon: #f17988;
	--color__black: #231F20;
	--color__turkiz: #00AA9D;
	
	display: flex;
	flex-direction: column-reverse;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.mainWrapper__intro h1 {
	color: var(--color__blue--light);
}

.mainWrapper--fixed {
	
}

.mainWrapper__column {
}

.mainWrapper__intro {
	padding: 1em;
}

.mainWrapper__column--sidebar {
	padding: 1em;
	
	background-color: var(--color__blue);
	color: #fff;
}

.backLink {
	display: flex;
	gap: 0.5em;
	align-items: center;
	justify-content: flex-start;
	padding: 0.2em 1.5em 0.25em 0.5em;
	
	background-color: var(--color__orange);
	color: #fff;
	font-weight: 400;
    font-size: 1.1em;
    font-family: 'Patrick Hand SC', cursive;
}

	.backLink .more {
		all: unset;
		
		width: 1em;
		height: 1em;
		transform: rotate(180deg);
		fill: #fff;
	}
	
	.backLink .more svg {
		display: block;
	}

.sidebarContact {
	margin-top: 3em;
	text-transform: uppercase;
	font-family: 'Patrick Hand SC', cursive;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.6;
}

	.sidebarContact strong {
		font-weight: normal;
		color: var(--color__turkiz);
	}
	
	.sidebarContact a {
		text-decoration: underline;
		text-decoration-color: rgba(255, 255, 255, 0.3);
		text-underline-offset: 3px;
		
		transition: background-color .3s;
	}
	
		.sidebarContact a:hover {
			background-color: var(--color__turkiz);
			text-decoration: none;
		}
	
	.sidebarContact img {
		max-width: 8em;
		margin-top: 3em;
	}

.form__header h2 {
	margin: 0;
	color: var(--color__orange);
}

.form__required {
	font-size: 0.8em;
	color: var(--color__black);
}

form {
	--flow-space: 2em;
	
	max-width: 36em;
	accent-color: var(--color__blue--light);
}

.mainWrapper__form {
	padding: 1em 1em 4em 1em;
	background-color: var(--color__silver);
}



form p {
	margin: 0;
}

fieldset {
	
	padding: 0;
	border: 0;
}

fieldset.separator {
	padding-bottom: 2em;
	border-bottom: 3px solid var(--color__gray);
}

.form__group, .form__row {
	--flow-space: 0.8em;
}

.form__group .input__wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.4em 1rem;
	/* align-items: baseline; */
}

.form__group label {
	color: var(--color__blue--light);
}
.form__group label span {
	font-size: 0.8em;
	color: var(--color__blue--pastel);
}

.form__group input[type="text"],
.form__group input[type="password"],
.form__group input[type="email"],
.form__group input[type="tel"],
.form__group textarea 
{
	padding: 0.5em;
	width: 100%;
	max-width: 100%;
	
	color: var(--color__blue--light);
	border: 1px solid transparent;
	border-radius: 0;
}

	.form__group input[type="text"]:focus,
	.form__group input[type="password"]:focus,
	.form__group input[type="email"]:focus,
	.form__group input[type="tel"]:focus,
	.form__group textarea:focus 
	{
		border-color: var(--color__blue--pastel);
	}
	
	.form__group input[type="text"]::placeholder,
	.form__group input[type="password"]::placeholder,
	.form__group input[type="email"]::placeholder,
	.form__group input[type="tel"]::placeholder,
	.form__group textarea::placeholder {
		color: var(--color__blue--pastel);
		opacity: 1;
	}

	.form__group input[type="radio"],
	.form__group input[type="checkbox"] {
		width: 1.3em;
		height: 1.3em;
		flex: 0 0 auto;
	}
	
	.form__group input[type="radio"]:focus,
	.form__group input[type="checkbox"]:focus
	{
		outline: 1px solid var(--color__blue--pastel);
		outline-offset: 2px;
	}

.form__group textarea {
	resize: vertical;
	min-height: 8em;
	max-height: 20em;
}

.form__group--checkboxes .input__wrapper {
	flex-direction: row;
	--flow-space: 0.5em;
}

	.form__group--checkboxes > label {
		margin-bottom: 0.6em;
	}

.form__group--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 2rem;
	
	--flow-space: 1em;
}

	.form__group--inline label {
		width: 100%;
	}

	.form__group--inline > label {
		margin-bottom: 0.3em;
	}

	.form__group--inline .input__wrapper {
		flex-direction: row;
	}
	
.form__group--tos label {
	font-size: 0.8em;
	color: var(--color__black);
	line-height: 1.6;
}
	
	.form__group--tos a {
		text-decoration: underline;
		text-decoration-color: var(--color__salmon);
		text-underline-offset: 3px;
	}
	
	.form__group--tos a:hover {
		color: var(--color__blue);
	}

.form__row {
	display: flex;
	gap: 1em;
	flex-direction: column;
}

	.form__row .form__group {
		flex: 1 1 auto;
	}


.form__group.error textarea, 
.form__group.error input {
	border-color: red;
}

.form__group--checkboxes.error, 
.form__group--checkbox.error, 
.form__group--radios.error {
	outline: 1px solid red;
	outline-offset: 3px;
}

.form__group--radios {
	margin-top: 1.5em;
}

.attachments.error .attachmentsDropzone {
	border-color: red;
}

.form__hint {
	font-size: 0.8em;
}

.form__status {
	display: none;
	margin: 1em 0;
}

	.form__status.error {
		display: block;
		color: red;
	}
	
	.form__status.loading, 
	.form__status.success {
		display: block;
	}
	
button[type="submit"] {
	margin-top: 2em;
}

.narocilnica__animal_castrated80 {
	display: none;
}

form .bWrap {
	display: flex;
	justify-content: center;
}


.b {
	margin: 0;
	padding: 0.6em 1.5em;
	
	background-color: var(--color__blue);
	color: #fff;
	border: none;
	line-height: 1.2;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	
	transition: background-color .3s;
}

	.b:hover {
		background-color: var(--color__turkiz);
	}



.attachmentsDropzone {
	position: relative;
	min-height: 4em;
	margin-top: 1em;
	
	border: 2px dashed var(--color__blue);
	
}

	.attachmentsDropzone.over {
		border-color: var(--color__blue--light);
	}
	
	.attachmentsDropzone:hover .b {
		background-color: var(--color__turkiz);
	}
	
.attachmentsDropzone > div:first-child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	
	opacity: 0;
}
	
.attachmentsDropzone form {
	margin: 0;
	width: 100%;
	height: 100%;
}



.attachmentsDropzone form input[type=file] {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.attachmentsHint {
	position: relative;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	margin: 1em;

	height: 100%;
	z-index: 1;
	padding: 2em 1em;
	
	color: var(--color__text);
	background-color: var(--color__blue--lightest);
}

.attachmentsStatus {
	display: none;
	margin: 1em 0;
}

	.attachmentsStatus.success {
		display: block;
		color: green;
	}
	
	.attachmentsStatus.error {
		display: block;
		color: red;
	}

#attachmentsList {
	margin-top: 1em;
}

#attachmentsList > * + * {
	margin-top: 0.3em;
}

.attachment {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
}

	.attachment span {
		word-wrap: anywhere;
	}

	.attachment button {
		all: unset;
		cursor: pointer;
		color: var(--color__black);
		font-size: 0.9em;
		text-decoration: underline;
		text-decoration-color: var(--color__salmon);
		text-underline-offset: 3px;
	}

.form__thankYou h2 {
	margin-bottom: 0.3em; 
	color: var(--color__blue);
}

@media (min-width: 768px) {
	.form__row {
		flex-direction: row;
	}
}

@media (min-width: 1025px) {
	.form__row {
		flex-direction: row;
	}
	
	.mainWrapper {
		flex-direction: row;
	}
	
	.mainWrapper--fixed {
		height: calc(100dvh - 6em);
	}
	
	.mainWrapper--fixed .inner-wrap {
		height: calc(100% - 3em);
		margin-top: 3em;
	}
	
	.mainWrapper--fixed .scrollable-area {
		height: 100%;
		position: relative;
		padding-left: 4em;
	}
	
	.mainWrapper--fixed .ps-container > .ps-scrollbar-y-rail {
		left: 2em;
		right: auto;
		
		border-radius: 0;
		background-color: var(--color__silver);
	}
						
	.mainWrapper--fixed .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
		background-color: var(--color__turkiz);
		border-radius: 0;
	}
	
	.mainWrapper__column--sidebar {
		width: 35%;
		flex: 0 0 auto;
	}
	
	.mainWrapper__column--main {
		max-width: 1096px;
		font-size:0.88em;
	}
	
	.form__group--inline {
		gap: 0.4em 3rem;
	}
	
	.form__header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 2em;
	}
	
	.mainWrapper__intro {
		padding: 0 2em 2em 0;
	}
	
	.mainWrapper__form {
		padding: 2em;
	}
	
	.mainWrapper__column--sidebar {
		padding: 3em;
	}
	
	.sidebarContact a[href^="tel"] {
		text-decoration: none;
	}
}

@media (min-width: 1200px) {
	.mainWrapper__form {
		padding: 2em 4em;
	}
	
	.mainWrapper__column--sidebar {
		padding-left: calc((100vw - 86rem) / 2);
	}
}

@media (min-width: 1925px) {
	.mainWrapper__column--sidebar {
		padding-left: calc((100vw - 99rem) / 2);
	}
}