:root {
--form-checkbox-width: 1rem;
--form-content-mb: 6rem;
--form-content-title-mb: 1.92rem;
--form-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
--form-grid-gap-vertical: 1.7rem;
--form-grid-gap-horizontal: 2rem;
--form-grid-small-mb: 2.75rem;
--form-grid-medium-mb: 4.65rem;
--form-grid-big-mb: 4.8rem;
--form-grid-label-fs: .8rem;
--form-grid-label-lh: normal;
--form-grid-label-tt: uppercase;
--form-grid-label-mb: .48rem;
--form-grid-placeholder-fs: 1.25rem;
--form-grid-placeholder-lh: 1.4em;
--form-grid-placeholder-vertical-padding: .6rem;
--form-grid-placeholder-horizontal-padding: .96rem;
--form-grid-input-background: linear-gradient(0deg, rgba(75, 87, 111, 0.20) 0%, rgba(75, 87, 111, 0.20) 100%), #FFF;
--form-grid-privacy-text-fs: .95rem;
--form-grid-privacy-text-lh: 1.4em;
}
/* --------------------------------- section -------------------------------- */
#Wrapper .wso-section-form .wso-wrap-content {
margin-bottom: var(--form-content-mb) !important;
}
#Wrapper .wso-section-form .wso-wrap-content .wso-title:not(:last-child) {
margin-bottom: var(--form-content-title-mb) !important;
}
/* -------------------------------- form grid ------------------------------- */
#Wrapper .wso-section-form form {
display: grid;
grid-template-columns: var(--form-grid-columns);
grid-gap: var(--form-grid-gap-vertical) var(--form-grid-gap-horizontal);
}
#Wrapper .wso-section-form form .wso-one {
grid-column: span 6;
}
#Wrapper .wso-section-form form .wso-half {
grid-column: span 3;
}
#Wrapper .wso-section-form form div[data-id^=child-],
#Wrapper .wso-section-form form .wso-third {
grid-column: span 2;
}
#Wrapper .wso-section-form form .wso-message-type {
margin-bottom: calc(var(--form-grid-big-mb) - var(--form-grid-gap-horizontal));
}
#Wrapper .wso-section-form form .wso-message-type > p {
display: flex;
white-space: pre !important;
}
#Wrapper .wso-section-form form .wso-message-type > p > span {
margin-bottom: 0 !important;
margin-left: 2rem;
}
#Wrapper .wso-section-form form .wso-headline {
margin-top: calc(4.65rem - var(--form-grid-gap-horizontal));
text-align: left !important;
margin-bottom: calc(var(--form-grid-small-mb) - var(--form-grid-gap-horizontal));
}
#Wrapper .wso-section-form form .wso-headline:has(+ .wso-third) {
margin-top: calc(var(--form-grid-medium-mb) - var(--form-grid-gap-horizontal));
}
#Wrapper .wso-section-form form .wso-textarea {
margin-top: calc(var(--form-grid-small-mb) - var(--form-grid-gap-horizontal));
}
#Wrapper .wso-section-form form .wso-label {
text-align: left;
font-family: var(--font-3-bold) !important;
font-size: var(--form-grid-label-fs) !important;
line-height: var(--form-grid-label-lh) !important;
text-transform: var(--form-grid-label-tt) !important;
margin-bottom: var(--form-grid-label-mb) !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms {
display: grid;
grid-template-rows: 1fr 1fr;
justify-content: flex-start;
gap: 0.75rem 2rem;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper {
grid-row: 1/2;
display: flex;
justify-content: center;
align-items: center;
width: 7.1rem;
height: 5.55rem;
padding: 0.85rem;
border: 2px solid var(--color-1);
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap {
grid-column: span 5;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control {
display: flex !important;
gap: 2rem !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item {
flex-basis: 25% !important;
margin-right: 0 !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label {
display: flex;
flex-direction: column-reverse;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label .wpcf7-list-item-label {
padding-left: unset !important;
padding-bottom: 1.6rem !important;
text-align: center;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label .wpcf7-list-item-label::before {
inset: 0 !important;
left: 50% !important;
top: calc(100% - var(--form-checkbox-width)) !important;
translate: -50% 0 !important;
}
#Wrapper .wso-section-form form .wso-normal-text textarea,
#Wrapper .wso-section-form form .wso-catering-text textarea {
height: 8.37rem;
}
#Wrapper .wso-section-form form .wso-message-type .wpcf7-radio {
padding-left: 5rem;
}
#Wrapper .wso-section-form form .wpcf7-form-control-wrap[data-name=date-checkin]::before,
#Wrapper .wso-section-form form .wpcf7-form-control-wrap[data-name=date-checkout]::before {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
right: 1.2rem;
top: calc((var(--form-grid-placeholder-lh) + var(--form-grid-placeholder-horizontal-padding)) / 2);
transform: translateY(-50%);
mask: url('data:image/svg+xml,') no-repeat center;
mask-size: contain;
background-color: var(--color-1);
pointer-events: none !important;
}
#Wrapper .wso-section-form form .wpcf7-response-output {
grid-column: span 6;
}
/* -------------------------------- generall -------------------------------- */
.wpcf7-list-item-label::before, .wpcf7-list-item-label::after {
transition: all var(--transition-short) ease-in-out !important;
}
label {
margin-bottom: 0 !important;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url] {
font-family: var(--font-4);
font-size: var(--form-grid-placeholder-fs) !important;
line-height: var(--form-grid-placeholder-lh) !important;
padding: var(--form-grid-placeholder-vertical-padding) var(--form-grid-placeholder-horizontal-padding) !important;
color: var(--color-black) !important;
background: var(--form-grid-input-background) !important;
border: unset !important;
transition: all var(--transition-short) ease-in-out !important;
}
.wpcf7-form-control-wrap:has(select) {
position: relative;
}
.wpcf7-form-control-wrap:has(select)::after {
content: "";
display: block;
width: 0.88rem;
height: 0.44rem;
position: absolute;
top: calc((var(--form-grid-placeholder-lh) + var(--form-grid-placeholder-horizontal-padding)) / 2);
right: var(--form-grid-placeholder-horizontal-padding);
-webkit-mask: url('data:image/svg+xml,') no-repeat center;
mask: url('data:image/svg+xml,') no-repeat center;
background-color: var(--color-1);
-webkit-mask-size: contain;
mask-size: contain;
transform: translateY(-50%);
}
select,
.select2 .select2-selection,
textarea,
.codedropz-upload-wrapper,
.woocommerce .quantity input.qty {
font-family: var(--font-4);
font-size: var(--form-grid-placeholder-fs) !important;
line-height: var(--form-grid-placeholder-lh) !important;
padding: var(--form-grid-placeholder-vertical-padding) var(--form-grid-placeholder-horizontal-padding) !important;
color: var(--color-black) !important;
background: var(--form-grid-input-background) !important;
border: unset !important;
transition: all var(--transition-short) ease-in-out !important;
}
::-webkit-input-placeholder {
color: var(--color-black) !important;
}
::-moz-placeholder {
opacity: 1 !important;
color: var(--color-black) !important;
}
:-ms-input-placeholder,
:-moz-placeholder {
color: var(--color-black) !important;
}
.wpcf7-acceptance,
.wpcf7-checkbox,
.wpcf7-radio {
display: block;
text-align: left;
}
/* ------------------------------- checkboxes ------------------------------- */
#Wrapper span.wpcf7-list-item {
margin: 0;
margin: 0 2rem 0 0 !important;
}
#Wrapper span.wpcf7-list-item label {
font-weight: 400;
}
#Wrapper input[type=checkbox][name=privacy]:not([id*=borlabs]) {
display: block !important;
position: absolute;
}
#Wrapper input[type=checkbox][name=privacy]:not([id*=borlabs]) + span::before, #Wrapper input[type=checkbox][name=privacy]:not([id*=borlabs]) + span::after {
display: none !important;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) {
display: none !important;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) + span {
display: block;
font-size: var(--p-font-size) !important;
line-height: var(--p-line-height) !important;
min-height: var(--p-line-height) !important;
color: var(--color-black);
font-family: var(--font-3-light);
font-size: var(--form-grid-privacy-text-fs) !important;
line-height: var(--form-grid-privacy-text-lh) !important;
min-height: var(--form-grid-privacy-text-lh) !important;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all var(--burger-menu-transition) ease-in-out;
-webkit-transition: all var(--burger-menu-transition) ease-in-out;
-moz-transition: all var(--burger-menu-transition) ease-in-out;
-ms-transition: all var(--burger-menu-transition) ease-in-out;
-o-transition: all var(--burger-menu-transition) ease-in-out;
padding-left: calc(var(--form-checkbox-width) * 1.5);
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) + span:last-child {
margin-bottom: 0;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) + span:before, #Wrapper input[type=checkbox]:not([id*=borlabs]) + span:after {
content: "";
display: inline-block;
position: absolute;
margin-top: 0;
margin-right: 0;
transition: all var(--burger-menu-transition) ease-in-out;
-webkit-transition: all var(--burger-menu-transition) ease-in-out;
-moz-transition: all var(--burger-menu-transition) ease-in-out;
-ms-transition: all var(--burger-menu-transition) ease-in-out;
-o-transition: all var(--burger-menu-transition) ease-in-out;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) + span:before {
inset: calc(var(--form-grid-privacy-text-lh) * 0.35) auto auto 0;
font-size: var(--form-grid-placeholder-fs) !important;
content: "";
border-radius: unset;
border: 2px rgba(75, 87, 111, 0.4) solid;
display: inline-block;
width: var(--form-checkbox-width);
aspect-ratio: 1/1;
position: absolute;
translate: 0 -50%;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]) + span:after {
content: "\e841";
color: var(--color-white);
font-family: "mfn-icons";
/*
Has to be the same font size as the span for calculations to work.
Size should be changed with scale:;
*/
font-size: var(--p-font-size);
font-style: normal;
font-weight: 400;
line-height: 1em;
inset: calc(var(--form-grid-privacy-text-lh) * 0.35) auto auto calc(var(--form-checkbox-width) * 0.5);
translate: -50% -50%;
scale: 0.6;
speak: none;
opacity: 0;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]):checked + span {
color: var(--color-success);
}
#Wrapper input[type=checkbox]:not([id*=borlabs]):checked + span::before {
background-color: var(--color-success);
border-color: var(--color-success);
border-width: 2px;
}
#Wrapper input[type=checkbox]:not([id*=borlabs]):checked + span:after {
opacity: 1;
}
#Wrapper .wpcf7-list-item-label {
cursor: pointer !important;
}
#Wrapper input[type=radio] {
position: absolute;
opacity: 0;
}
#Wrapper .wpcf7-radio span.wpcf7-list-item-label {
position: relative;
padding-left: 1.48rem;
color: var(--color-black);
font-family: var(--font-4);
font-size: var(--form-grid-placeholder-fs) !important;
line-height: var(--form-grid-placeholder-lh) !important;
text-transform: capitalize !important;
min-height: var(--form-grid-placeholder-lh) !important;
}
#Wrapper .wpcf7-radio span.wpcf7-list-item-label::before {
font-size: var(--form-grid-placeholder-fs) !important;
content: "";
border-radius: unset;
border: 2px rgba(75, 87, 111, 0.4) solid;
display: inline-block;
width: var(--form-checkbox-width);
aspect-ratio: 1/1;
inset: 50% auto auto 0;
position: absolute;
translate: 0 -50%;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
#Wrapper input[type=radio]:checked + span.wpcf7-list-item-label::before {
background-color: var(--color-1);
box-shadow: inset 0 0 0 calc(0.1 * var(--form-checkbox-width)) #f9f7f5;
}
#Wrapper input[type=radio]:focus + .wpcf7-list-item-label:before {
outline: none;
}
#Wrapper input[type=radio]:disabled + .wpcf7-list-item-label:before {
box-shadow: inset 0 0 0 calc(0.1 * var(--form-checkbox-width)) #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
#Wrapper input[type=radio] + .wpcf7-list-item-label:empty:before {
margin-right: 0;
}
#Wrapper .column.one.wso-third:has(input[type=submit]) {
display: flex;
}
/*
#Wrapper .wpcf7-radio span.wpcf7-list-item-label {
position: relative;
padding-left: calc(var(--form-checkbox-width) * 1.5);
font-size: var(--p-font-size) !important;
line-height: var(--p-line-height) !important;
min-height: var(--p-line-height) !important;
display: inline-block;
}
#Wrapper .wpcf7-radio span.wpcf7-list-item-label::before {
font-size: var(--p-font-size) !important;
content: '';
border-radius: 100%;
border: calc(0.05 * var(--form-checkbox-width)) solid var(--color-1);
display: inline-block;
width: var(--form-checkbox-width);
aspect-ratio: 1 / 1;
inset: calc(var(--p-line-height) * 0.45) auto auto 0;
position: absolute;
translate: 0 -50%;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
*/
/* ---------------------------------- radio --------------------------------- */
/* -------------------------------- messages -------------------------------- */
/* error */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
color: var(--color-warning);
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--color-success);
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output {
border-color: var(--color-warning);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: var(--color-info);
}
.wpcf7-form-control-wrap {
position: relative;
margin: 0 !important;
}
select.wpcf7-form-control:has(~ .wpcf7-not-valid-tip),
input.wpcf7-form-control:has(~ .wpcf7-not-valid-tip) {
border: 2px solid var(--color-warning) !important;
}
.wpcf7-not-valid-tip {
color: var(--color-warning);
font-size: 1em;
font-weight: normal;
display: block;
}
/* ------------------------------- responsive ------------------------------- */
@media only screen and (max-width: 767px) {
:root {
--form-grid-label-fs: 1.5rem;
--form-grid-label-lh: 1.3em;
--form-grid-label-mb: .53rem;
--form-grid-placeholder-fs: 1.8rem;
--form-grid-placeholder-lh: 1.4em;
--form-grid-placeholder-vertical-padding: .59rem;
--form-grid-placeholder-horizontal-padding: 1.18rem;
--form-grid-privacy-text-fs: 1.6rem;
}
#Wrapper .wso-section-form form {
display: flex;
flex-direction: column;
gap: 2rem;
}
#Wrapper .wso-section-form form .wso-message-type .wpcf7-radio {
padding-left: 1rem !important;
}
#Wrapper .wso-section-form form .wso-message-type > p {
flex-direction: column;
gap: 1rem;
white-space: break-spaces !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms {
position: relative;
display: grid;
grid-template-rows: 22.8fr 3.09fr 13.81fr 6.68fr 22.88fr 3.09fr 27.21fr;
grid-template-columns: 31fr 31fr 22.7fr;
grid-gap: 0rem 1.5rem !important;
height: 24.25rem;
width: 22.9rem;
justify-content: flex-start;
gap: 0.75rem 1.6rem;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper:nth-child(1) {
grid-area: 1/1/2/2;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper:nth-child(2) {
grid-area: 1/2/2/3;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper:nth-child(3) {
grid-area: 1/4/2/3;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper:nth-child(4) {
grid-area: 5/1/6/2;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wso-svg-wrapper:nth-child(5) {
grid-area: 5/2/6/3;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control {
width: 100%;
height: 100%;
display: grid !important;
grid-template-rows: 22.8fr 3.09fr 13.81fr 6.68fr 22.88fr 3.09fr 27.21fr;
grid-template-columns: 31fr 31fr 22.7fr;
grid-gap: 0rem 1.5rem !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item {
width: 7.1rem;
height: 5.55rem;
margin-right: 0 !important;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item:nth-child(1) {
grid-area: 3/1/4/2;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item:nth-child(2) {
grid-area: 3/2/4/3;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item:nth-child(3) {
grid-area: 3/3/4/4;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item:nth-child(4) {
grid-area: 7/1/8/2;
}
#Wrapper .wso-section-form form .wso-seminar-rooms .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item:nth-child(5) {
grid-area: 7/2/8/3;
}
}