#signPopupBttn {
width: fit-content;
margin-top: 56px;
}
.hidden {
display: none !important;
} .pjaPopup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.pjaPopup .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white);
opacity: 1
}
.pjaPopup form {
position: relative;
background-color: var(--secondary-color);
padding: 70px;
overflow-y: scroll;
max-width: 1440px;
width: 100%;
max-height: 100dvh;
height: 100dvh;
}
.pjaPopup form .formMessages ul {
margin-left: 0;
}
.pjaPopup form .pjaHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 45px;
}
.pjaPopup form .close {
cursor: pointer;
filter: brightness(0) saturate(100%) invert(32%) sepia(50%) saturate(2474%) hue-rotate(311deg) brightness(92%) contrast(99%);
}
.pjaPopup form h3 {
line-height: 36px;
font-weight: 600;
margin: 0;
color: var(--white);
text-transform: uppercase;
}
.pjaPopup form h4:first-letter {
text-transform: uppercase;
}
.pjaPopup form h4 {
font-weight: normal;
margin-bottom: 8px;
color: var(--white);
text-transform: capitalize;
}
.pjaPopup form label {
display: flex;
flex-flow: column;
color: var(--white);
}
.pjaPopup form label input[type="text"], .pjaPopup form label input[type="email"] {
-webkit-appearance: none;
outline: none;
padding: 14px 30px;
border-radius: 0;
border: 0px;
background-color: #F0F0F0;
color: #000000;
margin-top: 10px;
}
.pjaPopup form label input::placeholder {
color: #B6B6B6;
}
.pjaPopup form .fieldsWrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px 30px;
}
.pjaPopup form .fieldsWrapper .col-span-1 {
grid-column: span 1;
}
.pjaPopup form .fieldsWrapper .col-span-2 {
grid-column: span 2;
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer {
margin-top: 30px;
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer label + label {
margin-top: 10px;
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer label {
flex-flow: row;
display: flex;
align-items: center;
cursor: pointer;
}
.pjaPopup form .taxonomy-container {
display: grid;
gap: 0 25px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer input {
-webkit-appearance: none;
outline: none;
width: 30px;
height: 30px;
border: 1px solid #F0F0F0;
background-color: #F0F0F0;
margin-right: 10px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer input:after {
content: url(//careermaker.nl/wp-content/plugins/job-alert-plugin/public/assets/check-regular.svg);
width: 16px;
height: auto;
line-height: 1;
opacity: 0;
transition: opacity 0.2s ease;
}
.pjaPopup form .fieldsWrapper .catCheckboxContainer input:checked:after {
opacity: 1;
}
.pjaPopup form .taxonomy-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} body.pjaPopupShow {
overflow: hidden;
}
.pjaPopupShow .pjaPopup {
pointer-events: auto;
opacity: 1;
}
.pja-toggle-container {
width: 100%;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
grid-gap: 0 25px;
} .pja-toggle-container .toggle-checkbox {
display: none;
}
.pja-toggle-container .toggle-label {
display: inline-block;
width: 40px; height: 20px; background-color: #ccc; border-radius: 20px; position: relative;
cursor: pointer;
box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}
.pja-toggle-container .toggle-checkbox:checked + .toggle-label {
background-color: #4CAF50; } .pja-toggle-container .toggle-checkbox + .toggle-label::before {
content: '';
position: absolute;
width: 20px; height: 20px; background-color: white;
border-radius: 50%; top: 0;
left: 0;
transition: transform 0.2s ease; }
.pja-toggle-container .toggle-checkbox:checked + .toggle-label::before {
transform: translateX(20px);
}
.pja-title-toggle-container {
display: flex;
align-items: flex-start;
}
.pja-title-toggle-container h2 {
width: 100%;
} @media only screen and (max-width: 1600px) {
.pjaPopup form {
max-width: 100%;
}
}
@media only screen and (max-width: 1024px) {
.pjaPopup form .close {
top: 20px;
right: 20px;
bottom: auto;
left: auto;
transform: unset;
}
}
@media only screen and (max-width: 768px) {
.pjaPopup form {
width: 100%;
padding: 70px 30px 30px;
overflow-y: auto;
}
.pjaPopup form .fieldsWrapper .col-span-1 {
grid-column: span 2;
}
}