@charset "UTF-8";

/*
Theme Name: Lewica Formularz
Author: Hedea
Author URI: https://hedea.pl
Requires at least: 6.6.1
Tested up to: 6.6
Requires PHP: 8.2
Version: 1.0
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper sapien lacus, id vestibulum libero malesuada eu. Vestibulum eget elit nec lorem rhoncus blandit nec sit amet justo. Ut suscipit viverra hendrerit. Quisque tincidunt placerat efficitur. Maecenas vitae ultrices risus. Aliquam sit amet risus quis purus mollis ultricies. Nam condimentum nisl quam, sed lacinia enim dignissim et. Proin quis efficitur massa. Integer maximus accumsan urna sed luctus. Maecenas eget imperdiet magna, in hendrerit neque. 
*/

:root {
    --red-color: #D62545;
    --red-transparent-color: #D62545EF;
    --white-color: #FBFBFB;
    --black-color: #202020;
    --black-transparent-color: #202020AA;
    --placeholder-color: #bebebe;
    --yellow-color: #F2CB05;
    --green-color: #388e3c;
    --default-input-background: #FBFBFB;
    --disabled-input-background: #EEE;
    --valid-input-background: #E7ECE7;
    --invalid-input-background: #F5EAEC;
    --font-family-default: "Poppins", sans-serif;
    --slow-transition: .5s;
    --fast-transition: .3s;
    --transition-default: .3s;
    --hover-opacity: .6;
    --padding-horizontal: 10px;
    --default-radius: 10px;
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(190, 190, 190, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

button { all: unset; }
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

@layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -webkit-appearance: none;
        -moz-appearance: textfield;
        appearance: textfield;
    }
}

@font-face {
	font-family: 'Font_Awesome_Brands';
	font-style: normal;
	font-weight: normal;
	src: url("assets/fonts/fontawesome/fa-brands-400.eot");
	src: url("assets/fonts/fontawesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("assets/fonts/fontawesome/fa-brands-400.ttf") format("truetype"), url("assets/fonts/fontawesome/fa-brands-400.svg#fontawesome") format("svg"); 
}

@font-face {
	font-family: 'Font_Awesome_Regular';
	font-style: normal;
	font-weight: 400;
	src: url("assets/fonts/fontawesome/fa-regular-400.eot");
	src: url("assets/fonts/fontawesome/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("assets/fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-regular-400.woff") format("woff"), url("assets/fonts/fontawesome/fa-regular-400.ttf") format("truetype"), url("assets/fonts/fontawesome/fa-regular-400.svg#fontawesome") format("svg"); 
}

@font-face {
	font-family: 'Font_Awesome_Solid';
	font-style: normal;
	font-weight: 900;
	src: url("assets/fonts/fontawesome/fa-solid-900.eot");
	src: url("assets/fonts/fontawesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("assets/fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-solid-900.woff") format("woff"), url("assets/fonts/fontawesome/fa-solid-900.ttf") format("truetype"), url("assets/fonts/fontawesome/fa-solid-900.svg#fontawesome") format("svg"); 
}

@font-face {
	font-family: 'Font_Awesome_Light';
	font-style: normal;
	font-weight: 900;
	src: url("assets/fonts/fontawesome/fa-light-300.eot");
	src: url("assets/fonts/fontawesome/fa-light-300.eot?#iefix") format("embedded-opentype"), url("assets/fonts/fontawesome/fa-light-300.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-light-300.woff") format("woff"), url("assets/fonts/fontawesome/fa-light-300.ttf") format("truetype"), url("assets/fonts/fontawesome/fa-light-300.svg#fontawesome") format("svg"); 
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

*, *::after, *::before { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-family-default); background-color: var(--white-color); background-image: url('assets/images/background.png'); background-repeat: no-repeat; background-size: auto 100%; background-position: center top; background-attachment: fixed;  }

.section-container { max-width: 1500px; width: 100%; padding: 0 10px; margin: 0 auto; }

i.ico::before { font-style: normal!important; }
a.close-ico::before { content: '\f00d'; font-family: 'Font_Awesome_Light'; }
i.chevron-right-ico::before { content: '\f324'; font-family: 'Font_Awesome_Light'; }

/* header START */
header { position: fixed; top: 0; left: 0; width: 100%; padding-top: 35px; padding-bottom: 35px; z-index: 1; }
header.scroll { background: var(--white-color); background-image: url('assets/images/background.png'); background-repeat: no-repeat; background-size: auto 100%; background-position: center top; background-attachment: fixed; }
/* ADMIN */
header.admin-margin-top { top: 32px; }
@media only screen and (max-width: 782px) { header.admin-margin-top { top: 46px; } }
/* ADMIN */
.header-content { display: flex; justify-content: end; align-items: center; min-height: 75px; position: relative; }
/* header END */

main { margin-top: 110px; /* padding-top from header PLUS min-height .header-content */ padding-top: 60px; }

/* logo START */
.logo-container { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 263px; width: 100%; }

.logo { display: flex; justify-content: center; align-items: center; padding: 5px; display: inline-block; border-radius: var(--default-radius); cursor: pointer; transition: var(--fast-transition) linear!important; text-decoration: none; }

/* .logo h1 { line-height: 1; margin: 0; font-size: 55px; text-transform: uppercase; } */

.logo img { width: 100%; height: auto; }

.logo:hover { opacity: var(--hover-opacity)!important; }

body.primary-menu-open .logo-container { z-index: 1; }
body.primary-menu-open .logo { background-color: var(--white-color); color: var(--red-color); }
/* logo END */

/* Nav hamburger START */
.nav-toggle-container { display: flex; align-items: center; justify-content: center; height: 25px; gap: 15px; cursor: pointer; transition: var(--slow-transition); padding-right: 15px; }
.nav-toggle { display: flex; flex-direction: column; justify-content: space-around; height: 25px; width: 30px; }
.nav-toggle .bar { height: 3px; width: 100%; background-color: var(--red-color); transition: all var(--fast-transition) ease-in-out; }
.nav-toggle-container.active .nav-toggle { justify-content: space-between; height: 25px; width: 25px; }
.nav-toggle-container.active .nav-toggle .bar:nth-of-type(1) { transform: rotate(45deg); transform-origin: top left; width: 33px; }
.nav-toggle-container.active .nav-toggle .bar:nth-of-type(2) { transform-origin: center; width: 0; }
.nav-toggle-container.active .nav-toggle .bar:nth-of-type(3) { transform: rotate(-45deg); transform-origin: bottom left; width: 33px; }
.nav-toggle-container > span { font-weight: 700; transition: var(--fast-transition); }

body.primary-menu-open .main-site-header { position: absolute; top: 0; left: 0; }
body.primary-menu-open .nav-toggle-container { position: relative; z-index: 2; }
body.primary-menu-open .nav-toggle .bar { background-color: var(--white-color); }
body.primary-menu-open .nav-toggle-container > span { color: var(--white-color); }
/* Nav hamburger END */

/* Menu START */
.primary-menu-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--red-transparent-color); transition: var(--slow-transition); z-index: 0; }
body:not(.primary-menu-open) .primary-menu-container { pointer-events: none; scale: 0; }
body.primary-menu-open .primary-menu-container { scale: 1; }

ul.primary-menu { list-style-type: none; padding-left: 0; display: flex; flex-direction: column; gap: 25px; }
ul.primary-menu li { margin: 0; padding: 0; text-align: center; }
ul.primary-menu li a { color: var(--white-color); text-decoration: none; display: inline-block; text-align: center; font-size: 32px; position: relative; padding-bottom: 10px; transition: var(--fast-transition); line-height: 1; }
ul.primary-menu li a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; border-bottom: 3px solid var(--white-color); width: 0; transition: var(--fast-transition); }
ul.primary-menu li a:hover::after,
ul.primary-menu li.current-menu-item a::after { width: 100%; }
/* Menu END */

/* page START */
.page-container .section-container { display: flex; justify-content: space-between; gap: 15px; }
.page-container .section-container > div { max-width: 660px; width: 100%; }
.page-container .section-container h2,
.page-container .section-container h3 { margin: 0; line-height: 1; color: var(--black-color); }

.page-container .section-container .left-side h2 { font-size: 72px; font-weight: bold; margin-bottom: 15px; }
.page-container .section-container .left-side h3 { font-size: 36px; font-weight: 300; display: inline-block; padding-bottom: 15px; margin-bottom: 25px; position: relative; z-index: -1; }
.page-container .section-container .left-side h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 5px solid var(--red-color); }
.page-container .section-container .left-side p { font-size: 18px; font-weight: 400; margin: 0; color: var(--black-color); }
.page-container .section-container .left-side p.strong { font-size: 19px; font-weight: bold; text-transform: uppercase; }

.page-container .section-container .right-side h2 { margin-bottom: 25px; padding-bottom: 10px; display: inline-block; position: relative; font-size: 28px; }
.page-container .section-container .right-side h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 3px solid var(--red-color); }
.page-container .section-container .right-side h3 { margin-top: 10px; }
.page-container .section-container .right-side p { font-size: 14px; font-weight: 400; text-align: justify; margin: 25px 0; }
.page-container .section-container .wp-block-file { margin-bottom: 15px; }
.page-container .section-container .wp-block-file a { text-decoration: none; font-size: 14px; font-weight: 400; color: var(--black-color); display: flex; justify-content: start; align-items: center; transition: var(--fast-transition); }
/*.page-container .section-container .wp-block-file a::before { content: '\f1c1'; font-family: 'Font_Awesome_Solid'; color: var(--red-color); font-size: 160%; padding-right: 15px; }*/
.page-container .section-container .wp-block-file a::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url('assets/images/pdf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    margin-left: 5px;
    /*opacity: var(--hover-opacity);*/
    transition: var(--fast-transition);
}

.page-container .section-container .wp-block-file a:hover { color: var(--red-color); }
/*.page-container .section-container .wp-block-file a:hover::before { opacity: 1; }*/
/* page END */

/* footer START */
footer { margin-top: 5px; padding: 15px 0 30px 0; }
.footer-container { display: flex; justify-content: end; align-items: center; gap: 20px; }
.footer-container a { color: var(--red-color); text-decoration: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; transition: var(--fast-transition); }
.footer-container a:hover { opacity: var(--hover-opacity); }

/*.footer-container a.facebook-ico::before { content: url('assets/images/fb.svg'); width: 25px; fill: var(--red-color); }*/
.footer-container a.facebook-ico {
    width: 25px;
    height: 25px;
    background-image: url('assets/images/fb.svg');
    background-size: contain;
    background-repeat: no-repeat;;
}

.footer-container a.ig-ico {
    width: 25px;
    height: 25px;
    background-image: url('assets/images/ig.svg');
    background-size: contain;
    background-repeat: no-repeat;;
}

/*.footer-container a.youtube-ico::before { content: url('assets/images/yt.svg'); width: 25px; fill: var(--red-color); }*/
.footer-container a.youtube-ico {
    width: 30px;
    height: 25px;
    background-image: url('assets/images/yt.svg');
    background-size: contain;
    background-repeat: no-repeat;;
}

/*.footer-container a.x-twitter-ico::before { content: url('assets/images/x-twitter.svg'); width: 25px; fill: var(--red-color); }*/
.footer-container a.x-twitter-ico {
    width: 25px;
    height: 25px;
    background-image: url('assets/images/x-twitter.svg');
    background-size: contain;
    background-repeat: no-repeat;;
}

.footer-container p { font-size: 14px; font-weight: 400; margin: 0; padding: 0; }
/* footer END */

/* form START */
form[name="zgloszenie"] { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
form[name="zgloszenie"] .form-field { display: flex; flex-direction: column; position: relative; }
form[name="zgloszenie"] .form-field .field-area-container { position: relative; width: 100%; }

form[name="zgloszenie"] .form-field i.field-info { font-style: normal; background: var(--placeholder-color); color: var(--white-color); padding: 5px; font-size: 12px; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin: auto; cursor: help; opacity: .5; transition: var(--fast-transition); font-family: sans-serif; position: absolute; top: 0; bottom: 0; right: 13px; margin-top: auto; margin-bottom: auto; }
form[name="zgloszenie"] .form-field i.field-info:hover { opacity: 1; background-color: var(--red-color); }

form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
form[name="zgloszenie"] .form-field .field-area-container > select,
.select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field .field-area-container > textarea {
    background: var(--default-input-background);
    border: 1px solid var(--placeholder-color);
    padding: 10px 40px 10px 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    display: block;
    font-family: var(--font-family-default);
    transition: background-color var(--fast-transition);
    line-height: 1;
    height: 43px;
    line-height: 1.6;
}

.select2.select2-container { width: 100%!important; }
form[name="zgloszenie"] .form-field .field-area-container > select,
.select2.select2-container .select2-selection .select2-selection__rendered { padding: 10px 65px 10px 10px; }
.select2.select2-container .select2-selection .select2-selection__rendered { width: unset; }
.select2-container--default .select2-selection--single { all: unset; }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
form[name="zgloszenie"] .form-field .field-area-container > select,
.select2.select2-container .select2-selection .select2-selection__rendered {
    background-image: var(--icon-chevron);
    background-position: right 40px center;
    background-repeat: no-repeat;
    appearance: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--red-color); color: var(--white-color); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--placeholder-color); border-radius: 5px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible { border-color: var(--red-color); outline: 0; }

form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
form[name="zgloszenie"] .form-field .field-area-container > select:focus,
.select2.select2-container.select2-container--open .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field .field-area-container > textarea:focus {
    outline: 0;
    border: 1px solid var(--red-color);
}

form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])::placeholder,
form[name="zgloszenie"] .form-field .field-area-container > textarea::placeholder { 
    color: var(--placeholder-color); opacity: 1; font-family: var(--font-family-default)!important; 
}

form[name="zgloszenie"] .form-field .field-area-container > select,
.select2.select2-container .select2-selection .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--placeholder-color); }

form[name="zgloszenie"] .form-field .field-area-container > select option,
form[name="zgloszenie"] .form-field .field-area-container > select:has(option:checked:not([value])),
form[name="zgloszenie"] .form-field .field-area-container > select:has(option:checked:not([value=""])),
form[name="zgloszenie"] .form-field:has(select option:checked:not([value])) .select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field:has(select option:checked:not([value=""])) .select2.select2-container .select2-selection .select2-selection__rendered { color: var(--black-color); opacity: 1; }

form[name="zgloszenie"] .form-field .field-area-container > select option[value=""] { color: var(--placeholder-color); opacity: .4; }

form[name="zgloszenie"] .form-field label:not(.error) { color: var(--black-color); font-size: 12px; padding-left: 3px; white-space: nowrap; }

/* form-submit */
form[name="zgloszenie"] .form-submit-container { grid-column: span 2; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px; }
/*form[name="zgloszenie"] .form-submit-container button:only-child { margin-right: 0; margin-left: auto; }*/
.button-generic,
.form-submit-container button { background-color: var(--red-color); color: var(--white-color); padding: 10px 25px; border-radius: var(--default-radius); transition: var(--fast-transition); cursor: pointer; text-transform: uppercase; font-weight: 500; font-size: 15px; }
.button-generic:hover,
.form-submit-container button:hover { -webkit-box-shadow: inset 0 0 30px var(--black-transparent-color); -moz-box-shadow: inset 0 0 30px var(--black-transparent-color); box-shadow: inset 0 0 30px var(--black-transparent-color); }

/* checkbox start */

form[name="zgloszenie"] .form-checkbox-field > label { display: flex; gap: 15px; align-items: start; font-size: 12px; }
form[name="zgloszenie"] .form-checkbox-field span.term-content-wrapper > * { display: block; }
form[name="zgloszenie"] .form-checkbox-field span.term-content { font-size: 12px; text-align: justify; color: var(--black-color); width: 100%; transition: var(--transition-default); }
form[name="zgloszenie"] .form-checkbox-field span.term-content a { color: var(--black-color); text-decoration: none; position: relative; padding-bottom: 3px; transition: var(--fast-transition); }
form[name="zgloszenie"] .form-checkbox-field span.term-content a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border: 1px solid var(--placeholder-color); transition: var(--fast-transition); }
form[name="zgloszenie"] .form-checkbox-field span.term-content a:hover { color: var(--red-color); }
form[name="zgloszenie"] .form-checkbox-field span.term-content a:hover::after { transform: translateY(-100%); opacity: 0; }

.form-checkbox-field {
    --size: 20px;
}
  
.form-checkbox-field .checkbox-container {
    position: relative;
    background: var(--placeholder-color);
    line-height: 0;
    perspective: 400px;
    font-size: var(--size);
    display: inline-block;
    border-radius: var(--size);
    border: 0;
    transition: .35s ease-in-out;
    box-sizing: border-box;
    cursor: pointer;
    min-width: calc(1.70 * var(--size));
    min-height: var(--size);
}
  
.form-checkbox-field input[type="checkbox"] {
    appearance: none;
    position: absolute;
    z-index: 1;
    width: calc(.8 * var(--size));
    height: calc(.8 * var(--size));
    top: calc(.1 * var(--size));
    left: calc(.1 * var(--size));
    background: linear-gradient(45deg, #dedede, #ffffff);
    box-shadow: 0 6px 7px rgba(0,0,0,0.3);
    outline: none;
    margin: 0;
    border-radius: var(--size);
    cursor: pointer;
    transition: .35s ease-in-out;
}
  
.form-checkbox-field input[type="checkbox"]:checked {
    left: calc(0.8 * var(--size));
}
    
.form-checkbox-field .checkbox-container:has(input[type="checkbox"]:checked) {
    /*background: linear-gradient(90deg, #f19af3, #f099b5);*/
    background: var(--red-color);
}

/* checkbox end */

/* disabled */
form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):disabled,
form[name="zgloszenie"] .form-field .field-area-container > textarea:disabled,
.select2.select2-container.select2-container--disabled .select2-selection .select2-selection__rendered,
.select2.select2-container.select2-container--disabled .select2-selection--single .select2-selection__placeholder { background-color: var(--disabled-input-background); cursor: not-allowed; }

/********* errors ************/

form[name="zgloszenie"] .form-field label.error,
form[name="zgloszenie"] .form-checkbox-field label.error { color: var(--red-color); font-size: 11px; }

form[name="zgloszenie"] .form-field label.error { padding-left: 3px; }
form[name="zgloszenie"] .form-checkbox-field label.error { display: inline-block; }

form[name="zgloszenie"] .form-checkbox-field .checkbox-container:has(input[type=checkbox].error) { outline: 2px solid var(--red-color); }

form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.valid)[aria-invalid=true],
form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.valid).error,
form[name="zgloszenie"] .form-field .field-area-container > select:not(.valid)[aria-invalid=true],
form[name="zgloszenie"] .form-field .field-area-container > select:not(.valid).error,
form[name="zgloszenie"] .form-field:has(select[aria-invalid=true]) .select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field:has(select.error) .select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field .field-area-container > textarea:not(.valid).error[aria-invalid=true],
form[name="zgloszenie"] .form-field .field-area-container > textarea:not(.valid).error {
    border: 1px solid var(--red-color);
    background-color: var(--invalid-input-background);
    background-image: var(--icon-invalid);
    background-position: right 40px center;
    background-repeat: no-repeat;
}

/********* valid ************/

form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.error)[aria-invalid=false],
form[name="zgloszenie"] .form-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.error).valid,
form[name="zgloszenie"] .form-field .field-area-container > select:not(.error)[aria-invalid=false],
form[name="zgloszenie"] .form-field .field-area-container > select:not(.error).valid,
form[name="zgloszenie"] .form-field:has(select[aria-invalid=false]) .select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field:has(select.valid) .select2.select2-container .select2-selection .select2-selection__rendered,
form[name="zgloszenie"] .form-field .field-area-container > textarea:not(.error)[aria-invalid=false],
form[name="zgloszenie"] .form-field .field-area-container > textarea:not(.error).valid {
    border-color: var(--green-color);
    background-color: var(--valid-input-background);
    background-image: var(--icon-valid);
    background-position: right 40px center;
    background-repeat: no-repeat;
}


form[name="zgloszenie"] .cityField,
form[name="zgloszenie"] .form-checkbox-field { grid-column: span 2; }

/* form END */

/**************
*
* Tooltips
*
***********/

.tooltip-content { font-size: 12px; text-align: center; line-height: 1.3; display: block; font-weight: 300; }
.tooltip-content strong { font-weight: 700; }

.tippy-box[data-animation=scale][data-placement^=top] { transform-origin:bottom }
.tippy-box[data-animation=scale][data-placement^=bottom] { transform-origin:top }
.tippy-box[data-animation=scale][data-placement^=left] { transform-origin:right }
.tippy-box[data-animation=scale][data-placement^=right] { transform-origin:left }
.tippy-box[data-animation=scale][data-state=hidden] { transform:scale(.5); opacity:0 }

/*****************
 *
 * Scroll to top
 *
 ****************/

#scroll-to-top { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; position: fixed; bottom: 10px; right: 10px; background: var(--red-color); border-radius: 50px; text-decoration: none; color: var(--white-color); opacity: 0; transition: var(--fast-transition); z-index: 99999; box-shadow: 0 4px 16px rgba(0,0,0,.35); transform: translateY(100%); }
#scroll-to-top:not(.show) { pointer-events: none; }
#scroll-to-top.show { opacity: .5; transform: translateY(0); }
#scroll-to-top:before { content: '\f077'; font-family: 'Font_Awesome_Light'; font-size: 24px; }
#scroll-to-top:hover { opacity: 1; }

/*****************
 *
 * Spinner
 *
 ****************/

 #spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); display: flex; flex-direction: column; gap: 25px; justify-content: center; align-items: center; z-index: 9998; opacity: 0; transition: var(--transition-default); }
 #spinner:not(.show) { pointer-events: none; }
 #spinner.show { opacity: 1; }
 #spinner .spinner-svg { 
    animation: rotate 2s linear infinite;
    position: absolute;
    width: 100px;
    height: 100px;
}
#spinner .spinner-svg .path-svg { 
    stroke: var(--white-color);
    /* stroke: linear-gradient(338deg, rgba(215,14,30,1) 0%, rgba(79,44,134,1) 100%); */
    /* stroke with gradient: https://gist.github.com/mbostock/4163057 */
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
 
 /*****************
  *
  * Snackbar
  *
  ****************/
 
 #snackbar { max-width: 450px; width: auto; position: fixed; z-index: 9999; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: 20px; transition: .6s; display: flex; justify-content: center; align-items: center; }
 #snackbar:not(.show) { transform: translateY(150%); opacity: 0; pointer-events: none; }
 #snackbar .snackbar-inside { text-align: center; border-radius: var(--default-radius); padding: 15px 30px 15px 15px; font-size: 14px; line-height: 1.1; display: inline-block; position: relative; transition: .6s; margin: 0 5px; -webkit-box-shadow: 0px 0px 30px -7px rgba(0, 0, 0, .7); -moz-box-shadow: 0px 0px 30px -7px rgba(0, 0, 0, .7); box-shadow: 0px 0px 30px -7px rgba(0, 0, 0, .7); }
 
 #snackbar.success .snackbar-inside { background-color: var(--green-color); color: var(--white-color); }
 #snackbar.error .snackbar-inside { background-color: var(--red-color); color: var(--white-color); }
 #snackbar.warning .snackbar-inside { background-color: var(--yellow-color); color: var(--black-color); }
 #snackbar.info .snackbar-inside { background-color: var(--blue-color); color: var(--white-color); }
 
 #close_snackbar { position: absolute; top: 0; right: 2px; bottom: 0; margin-top: auto; margin-bottom: auto; cursor: pointer; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; }
 #close_snackbar::before { content: '\f00d'; font-family: 'Font_Awesome_Light'; opacity: .5; transition: var(--transition-default); }
 #close_snackbar:hover::before { opacity: 1; }

/*****************
 *
 * Modals
 *
 ****************/

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); display: flex; justify-content: center; align-items: center; z-index: 9997; transition: var(--fast-transition); opacity: 0; }
.modal:not(.show) { pointer-events: none; }
.modal.show { opacity: 1; }
 
.modal .modal-area-close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }
 
.modal .modal-content { max-width: 465px; width: 100%; z-index: 2; position: relative; margin: 0 var(--padding-horizontal); background-color: var(--white-color); border-radius: var(--default-radius); }
.modal .modal-content a.close { position: absolute; top: 5px; right: 10px; color: var(--black-color); opacity: .4; transition: var(--fast-transition); z-index: 1; cursor: pointer; line-height: 1; font-size: 21px; }
.modal .modal-content a.close:hover { opacity: 1; }

.modal .modal-content .modal-content-inside { margin: 25px 25px; }
.modal .modal-content .modal-content-inside h2 { margin: 0 0 25px 0; position: relative; padding-bottom: 5px; display: inline-block; }
.modal .modal-content .modal-content-inside h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 2px solid var(--red-color); }
.modal .modal-content .modal-content-inside .title-container { text-align: center; }
.modal .modal-content .modal-content-inside p { text-align: justify; margin: 0; font-size: 14px; }
.modal .modal-content .modal-content-inside .button-container { margin-top: 25px; text-align: center; }


/* only when desktop and 2 columns */
@media only screen and ((min-width: 1201px) and (min-height: 701px)) { /* and maybe min height */
    .left-side-content,
    .right-side-content { 
        position: sticky; top: 172px; /* height of header (with padding-top) 112px PLUX padding-top <main> 60px */ 
    }
}

@media only screen and (max-height: 980px) {
    #default-page .left-side-content { overflow-y: auto; height: 80vh; }
    #default-page .left-side { padding-bottom: 50px; }
}

@media only screen and ((max-width: 1200px) or (max-height: 700px)) {
    .page-container .section-container { flex-direction: column-reverse; align-items: center; }
    #home-page.page-container .section-container { flex-direction: column; }
    .footer-container { justify-content: center; }

    #default-page .left-side-content { overflow-y: unset; height: unset; }
    #default-page .left-side { padding-bottom: unset; }
}

@media only screen and (max-width: 720px) {
    header { padding-top: 25px; padding-bottom: 25px; }
    .header-content { justify-content: space-between; }
    .logo-container { position: static; margin: 0; justify-content: start; max-width: 180px; }
}

@media only screen and (max-width: 680px) {
    .page-container .section-container .right-side .title-container { text-align: center; }
    .page-container .section-container .right-side h2 { font-size: 24px; }
}

@media only screen and (max-width: 630px) {
    header { padding-top: 25px; }
    .logo h1 { font-size: 45px; }
    main { margin-top: 100px; }
}

@media only screen and (max-width: 590px) {
    .page-container .section-container .left-side h2 { text-align: center; font-size: 65px; }
    .page-container .section-container .left-side h3 { text-align: center; }
    .page-container .section-container .left-side .subtitle-container { text-align: center; }
    .page-container .section-container .left-side p { font-size: 14px; text-align: center; line-height: 1; }
    .page-container .section-container .left-side p.strong { font-size: 15px; margin-bottom: 10px; }
}

@media only screen and (max-width: 565px) {
    form[name="zgloszenie"] { grid-template-columns: 1fr; gap: 10px; }
    form[name="zgloszenie"] .cityField,
    form[name="zgloszenie"] .form-checkbox-field,
    form[name="zgloszenie"] .form-submit-container { grid-column: span 1; justify-content: center; }

    form[name="zgloszenie"] .form-field,
    form[name="zgloszenie"] .form-checkbox-field { max-width: 300px; width: 100%; margin: 0 auto; }
    form[name="zgloszenie"] .termOneField { margin-top: 10px; }
}

@media only screen and (max-width: 510px) {
    header { padding-top: 10px; padding-bottom: 10px; }
    .logo h1 { font-size: 30px; }
    main { margin-top: 70px; }
}

@media only screen and (max-width: 430px) {
    .page-container .section-container .left-side h2 { font-size: 45px; }
    .page-container .section-container .left-side h3 { font-size: 28px; }
}

@media only screen and (max-width: 410px) {
    .logo-container { max-width: 140px; }
    ul.primary-menu li a { font-size: 24px; }
}

@media only screen and (max-width: 360px) {
    .nav-toggle-container > span { display: none; }
}

@media only screen and (max-width: 310px) {
    .page-container .section-container .left-side h2 { font-size: 35px; margin-bottom: 10px; }
    .page-container .section-container .left-side h3 { font-size: 24px; }
    .page-container .section-container .left-side p { font-size: 11px; }
    .page-container .section-container .left-side p.strong { font-size: 12px; }
}

@media only screen and (max-width: 290px) {
    header { padding-top: 5px; padding-bottom: 5px; }
    .header-content { min-height: unset; }
    .logo h1 { font-size: 24px; }
    main { margin-top: 20px; }
}

@media only screen and (max-width: 260px) {
    .logo-container { max-width: 100px; }
    .logo { background: transparent; color: var(--red-color); padding: 0; }
    body.primary-menu-open .logo { background-color: transparent; color: var(--white-color); }
    .nav-toggle-container { padding-right: 0; }
    main { margin-top: 10px; }
}