body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'clig' off, 'liga' off;
font-style: normal;
padding-top: 140px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
.admin-bar & {
top: var(--wp-admin--admin-bar--height, 32px);
}
& .employee_number {
color: var(--wp--preset--color--accent, #005293);
font-size: 16px;
font-weight: 500;
line-height: 26px; /* 162.5% */
& .employee_number_value {
font-weight: 700;
}
}
}
h1 {
margin-bottom: 30px;
& ~ h1 {
display: none;
visibility: hidden;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
a,
button,
.button,
input[type="submit"] {
cursor: pointer;
}
.icon {
&:before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-position: left center;
vertical-align: middle;
}
&:not(:empty):before {
margin-right: 1em;
}
&.icon-home:before {
width: 22px;
height: 24px;
background-image: url('data:image/svg+xml,');
}
&.icon-user:before {
width: 22px;
height: 22px;
background-image: url('data:image/svg+xml,');
}
&.icon-warning:before {
width: 23px;
height: 23px;
background-image: url('data:image/svg+xml,');
}
&.icon-help:before {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,')
}
&.icon-money:before {
width: 22px;
height: 22px;
background-image: url('data:image/svg+xml,');
}
&.icon-calendar:before {
width: 18px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
&.icon-date:before {
width: 21px;
height: 24px;
background-image: url('data:image/svg+xml,');
}
&.icon-chart:before {
width: 43px;
height: 26px;
background-image: url('data:image/svg+xml,');
}
&.icon-document:before {
width: 17px;
height: 22px;
background-image: url('data:image/svg+xml,');
}
&.icon-form:before {
width: 21px;
height: 22px;
background-image: url('data:image/svg+xml,');
}
&.icon-link:before {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
&.icon-security:before {
width: 22px;
height: 26px;
background-image: url('data:image/svg+xml,')
}
&.icon-support:before {
width: 20px;
height: 18px;
background-image: url('data:image/svg+xml,')
}
&.icon-star:before {
width: 22px;
height: 22px;
background-image: url('data:image/svg+xml,')
}
&.icon-star.is_favorite:before {
width: 22px;
height: 22px;
background-image: url('data:image/svg+xml,')
}
&.icon-it:before {
width: 27px;
height: 24px;
background-image: url('data:image/svg+xml,')
}
}
section.login-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
align-items: flex-start;
justify-content: center;
gap: 50px;
margin: 30px 0;
border-radius: 15px;
background-color: var(--wp--preset--color--light, #E6ECF0);
padding: 50px;
& p.login-username,
& p.login-password {
display: block;
position: relative;
& label { /* hide */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
& input {
display: block;
transition: all 0.3s ease-out;
padding: 10px 16px;
color: var(--wp--preset--color--primary, #093D6B);
/* Body 2/Regular */
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
border-radius: 8px;
background-color: var(--wp--preset--color--white, #FFFFFF);
border: 2px solid var(--wp--preset--color--white, #FFFFFF);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
&::placeholder {
color: currentColor;
}
&:active,
&:focus,
&:focus-visible {
outline: none;
border-color: var(--wp--preset--color--accent, #005293);
}
}
}
& p.login-remember {
display: none;
}
& p.login-submit {
& input[type="submit"] {
padding: 8px 20px;
border: 0 none transparent;
border-radius: 100px;
background-color: var(--wp--preset--color--primary, #093D6B);
color: var(--wp--preset--color--white, #FFFFFF);
text-align: center;
/* Body 2/Medium */
font-size: 16px;
font-weight: 500;
line-height: 24px; /* 150% */
}
}
}
.entry-content {
& > *:not(:empty):not(.gform_wrapper):not(.wp-block-heading):not(.pdf-embed):not(.wp-block-columns),
& > .wp-block-columns > .wp-block-column {
border-radius: 15px;
background-color: var(--wp--preset--color--light, #E6ECF0);
padding: 50px ! important;
margin: 30px 0;
&.is-vertically-aligned-stretch {
display: flex;
flex-direction: column;
justify-content: center;
}
&.button {
display: block;
width: fit-content;
border-radius: 12px;
color: var(--wp--preset--color--black, #000000);
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 26px; /* 162.5% */
padding: 20px ! important;
text-decoration: none;
}
& .gform_wrapper {
& .gform_heading {
& h2.gform_title,
& h3.gform_title {
margin-top: 0;
}
}
& form {
padding: 0;
}
}
}
& > .wp-block-columns {
margin: 30px 0;
&:first-child {
margin-block-start: 30px;
}
& > .wp-block-column {
margin: 0;
}
}
& > .pdf-embed {
margin: 30px 0 ! important;
}
& > .wp-block-columns {
gap: 30px;
}
}
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none;
}
section.general-alert {
border-radius: 15px;
background: var(--wp--preset--color--light, #E6ECF0);
padding: 20px 100px;
margin: 30px 0;
background-image: url('data:image/svg+xml,');
background-position: 50px 20px;
background-repeat: no-repeat;
color: var(--wp--preset--color--black, #000000);
font-size: 16px;
font-weight: 400;
line-height: 22.5px; /* 140.625% */
& p:first-child {
margin-top: 0;
}
& p:last-child {
margin-bottom: 0;
}
}
aside.documents-list,
aside.favorites-list,
aside.recently-viewed {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
margin: 30px 0;
border-radius: 15px;
background: var(--wp--preset--color--light, #E6ECF0);
padding: 40px;
&:before {
content: attr(data-title);
display: block;
color: var(--wp--preset--color--black, #000000);
font-size: 18px;
font-weight: 400;
line-height: 12px; /* 66.667% */
width: 100%;
}
&[data-title=""] {
&:before {
content: none;
display: none;
position: absolute;
}
}
& .button {
display: block;
border-radius: 12px;
background-color: var(--wp--preset--color--white, #FFFFFF);
color: var(--wp--preset--color--primary, #093D6B);
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 26px; /* 162.5% */
padding: 20px;
text-decoration: none;
}
}
.wp-block-buttons.is-layout-flex,
aside.documents-list {
display: grid;
gap: 20px 40px;
& .wp-block-button > a,
& .button {
width: 100%;
text-align: left;
box-sizing: border-box;
}
}
a.ajax-favorite:is(.wp-block-column-is-layout-flow:has(a.ajax-favorite + h1) > a.ajax-favorite) {
height: 38px;
display: flex;
align-items: center;
}
a.ajax-favorite.alignright:before {
margin-right: 0;
}
.wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh; /* Fill page height */
.admin-bar & {
min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
& > .wp-block-columns {
flex-grow: 1;
& aside.wp-block-template-part {
height: 100%;
& .wp-block-group.is-vertical.is-content-justification-stretch {
height: 100%;
}
& footer {
position: sticky;
top: calc(100vh - var(--footer-height, 208px) - 50px);
}
}
}
}
.wp-block-navigation__container:not(.is-vertical) {
gap: 30px;
& .wp-block-navigation-item__content {
padding: 18px 0;
box-sizing: content-box;
}
& ul.wp-block-navigation__submenu-container {
& .wp-block-navigation-item__content {
padding: 18px;
}
}
}
.wp-block-navigation__container.is-vertical {
gap: 15px;
& .wp-block-navigation-item__content {
padding: 10px 20px;
background-color: var(--wp--preset--color--light, #E6ECF0);
border-radius: 12px;
color: var(--wp--preset--color--black, #000000);
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 26px; /* 162.5% */
}
& .wp-block-navigation-item {
&.icon {
position: relative;
&:before {
position: absolute;
left: 20px;
pointer-events: none;
}
& > .wp-block-navigation-item__content {
padding-left: calc(42px + 1em);
}
}
}
}
.wp-block-home-link__content {
display: block;
font-size: 0;
color: transparent;
width: 22px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center center;
}
ul.wp-block-page-list {
list-style: none;
padding: 0;
}
ul.wp-block-page-list li.wp-block-pages-list__item a {
display: block;
color: var(--wp--preset--color--white, #FFFFFF);
font-size: 18px;
font-weight: 500;
line-height: 1;
text-decoration: none;
padding: 15px 0;
/*transition: all 0.3s ease-out;*/
}
ul.wp-block-page-list li.wp-block-pages-list__item.current-menu-item > a {
font-weight: 900;
}
ul.wp-block-page-list:hover li.wp-block-pages-list__item.current-menu-item > a {
font-weight: 500;
}
ul.wp-block-page-list:hover li.wp-block-pages-list__item a:hover {
font-weight: 900;
}
.gform_wrapper {
& .gform_heading {
.gform_description:not(:empty) {
border-radius: 8px;
padding: 20px 50px;
background-color: var(--wp--preset--color--light, #E6ECF0);
background-image: url('data:image/svg+xml;utf8,');
background-position: 20px 20px;
background-repeat: no-repeat;
margin-bottom: 50px;
}
.gform_description {
margin: 0;
color: var(--wp--preset--color--black, #000000);
font-size: 16px;
font-weight: 400;
line-height: 22.5px;
}
}
& form {
background-color: var(--wp--preset--color--light, #E6ECF0);
border-radius: 8px;
padding: 50px;
}
& fieldset {
border: 0;
padding: 0;
}
& .gfield_repeater_item {
display: grid;
grid-template-columns: repeat(12, calc((100% - 25px * 11) / 12));
gap: 14px 25px;
& > .gfield_repeater_cell {
grid-column: span 12;
&:has(>.gfield--width-half) {
grid-column: span 6;
}
}
& > .gfield_repeater_buttons {
display: flex;
justify-content: flex-end;
gap: 14px 25px;
grid-column: span 12;
& > .gform-theme-button {
padding: 8px 20px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border: 0 none transparent;
border-radius: 100px;
background: #093D6B;
color: var(--wp--preset--color--white, #FFFFFF);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 24px;
&.remove_repeater_item {
&:after {
content: " Above";
}
}
&.gfield_icon_disabled {
display: none;
}
}
}
&:only-of-type {
& > .gfield_repeater_buttons {
& > .gform-theme-button {
&.remove_repeater_item {
display: none;
}
}
}
}
}
& .gform_fields {
display: grid;
grid-template-columns: repeat(12, calc((100% - 25px * 11) / 12));
gap: 14px 25px;
& .gfield_repeater_cell > .gfield,
& > .gfield {
/* Grid layouts */
grid-column: span 12;
&.gfield--width-half {
grid-column: span 6;
}
&.gfield--width-third {
grid-column: span 4;
}
&.gfield--width-quarter {
grid-column: span 3;
}
& .ginput_complex {
display: flex;
align-items: flex-start;
width: 100%;
gap: 14px 25px;
&.ginput_container_address {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
& > .ginput_full {
grid-column: 1 / span 2;
}
}
& .gform-grid-col--size-auto {
flex: 1;
}
}
/* Section Heading */
& .gfield_repeater > .gfield_label,
& .gsection_title {
color: var(--wp--preset--color--black, #oooooo);
font-size: 18px;
font-weight: 400;
line-height: 12px;
}
&.gfield_html {
&:not(:has(p)):not(:has(li)):not(:has(table)) {
white-space: pre-line;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 22.5px;
}
}
/* Consistent label styling - Field Labels, sub field labels and radio/checkbox option labels. */
& .gform-field-label,
& .gfield_description {
display: block;
color: var(--wp--preset--color--primary, #093D6B);
padding: 10px 0;
/* Body 2/Regular */
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
& .gfield_label {
font-size: 16px;
}
&.hidden_label {
& .gfield_label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
/* Checkboxes and Radio buttons */
&.checkbox-columns-2,
&.checkbox-columns-3,
&.checkbox-columns-4 {
--grid-layout-gap: 1em;
--grid-column-count: 1;
--grid-item--min-width: 300px;
& .gfield_radio,
& .gfield_checkbox {
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
display: grid;
grid-template-columns: repeat(auto-fill, max(var(--grid-item--min-width), var(--grid-item--max-width)));
column-gap: var(--grid-layout-gap);
}
}
&.checkbox-columns-2 {
--grid-column-count: 2;
}
&.checkbox-columns-3 {
--grid-column-count: 3;
}
&.checkbox-columns-4 {
--grid-column-count: 4;
}
& .gchoice,
& .ginput_container_consent {
display: flex;
align-items: center;
gap: 1em;
&:has(input + label) {
& input {
display: none;
+ label {
display: flex;
align-items: center;
gap: 1em;
&:before {
content: "";
width: 18px;
height: 18px;
border: 2px solid var(--wp--preset--color--primary, #093D6B);
border-radius: 2px;
background: transparent;
transition: all 0.3s ease-out;
box-sizing: border-box;
}
}
&:checked {
+ label {
&:before {
background-color: var(--wp--preset--color--secondary, #0098DA);
}
}
}
}
}
}
/* Date Fields */
&.gfield--datepicker-default-icon {
.ginput_container_date {
position: relative;
}
input.datepicker_with_icon {
padding-left: 50px;
}
img.ui-datepicker-trigger {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
}
}
& .textarea {
&.small {
height: 5em;
}
&.medium {
height: 10em;
}
}
}
}
/* Consistent input styles */
input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="range"]) {
/* This may have too much specificity... */
}
input[type="text"], input[type="date"], input[type="number"], input[type="datetime-local"], input[type="email"], input[type="tel"], input[type="time"],
select,
textarea {
width: 100%;
border: 0 none transparent;
border-radius: 8px;
background-color: var(--wp--preset--color--white, #FFFFFF);
padding: 10px 16px;
box-sizing: border-box;
color: var(--wp--preset--color--primary, #093D6B);
/* Body 2/Regular */
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
&:active,
&:focus,
&:focus-visible {
outline: none;
border-color: var(--wp--preset--color--accent, #005293);
}
}
input::placeholder {
color: currentColor;
}
/* Submit button */
.gform_footer {
padding-top: 30px;
& input[type="submit"],
& input[type="button"],
& button {
padding: 8px 20px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border: 0 none transparent;
border-radius: 100px;
background: #093D6B;
color: var(--wp--preset--color--white, #FFFFFF);
text-align: center;
/* Body 2/Medium */
font-size: 16px;
font-weight: 500;
line-height: 24px; /* 150% */
}
}
}
.ginput_container {
&:has(>input[placeholder="%"]),
&:has(>input[placeholder="cm"]),
&:has(>input[placeholder="kg"]) {
display: flex;
& > input {
border-radius: 8px 0 0 8px;
&::placeholder {
color: transparent;
}
}
& > .instruction {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
&:after {
display: flex;
align-items: center;
padding: 8px;
border-radius: 0 8px 8px 0;
background-color: white;
white-space: nowrap;
border-left: 1px solid var(--wp--preset--color--light, #E6ECF0);
}
}
&:has(>input[placeholder="%"]) {
&:after {
content: "%";
}
}
&:has(>input[placeholder="cm"]) {
&:after {
content: "cm";
}
}
&:has(>input[placeholder="kg"]) {
&:after {
content: "kg";
}
}
}
@media screen and (min-width: 768px){
.wp-block-buttons,
aside.documents-list {
grid-template-columns: 1fr 1fr;
&:before {
grid-column: span 2;
}
}
}