*
* Intro
*That's an introduction of the page
*
*
*
*
*
*
*
*
*
* @file row.less
*/
.row-pricing.align-items {
display: flex;
justify-content: flex-end;
align-items: center;
/* Keeps text and icon aligned */
gap: 12px;
/* Uses existing spacing variable */
margin-top: -1.5vh;
}
.row-products {
padding-bottom: 0.7em;
}
.row-menu.spacing-items {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background-color: #F9FAFA;
padding: 1rem 2.2rem;
list-style: none;
border-radius: 999px;
}
@media screen and (max-width: 880px) {
.row-menu.spacing-items {
flex-direction: column;
align-items: flex-start;
align-items: center;
max-width: 30%;
margin: 0 auto;
text-align: center;
white-space: nowrap;
border-radius: 25px;
}
}
.row-menu.spacing-items li {
margin-bottom: 0rem;
}
.row-menu.spacing-items a {
color: #25282A;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.row.wrapping {
flex-wrap: wrap;
}
.row.wrapping-reverse {
flex-wrap: wrap-reverse;
}
.row.growing .column {
flex-grow: 1;
}
.row.growing > * {
flex-grow: 1;
}
.row.shrinking .column {
flex-shrink: 1;
}
.row.centered {
justify-content: center;
}
.row.spacing {
justify-content: space-around;
}
.row.spacing-between {
justify-content: space-between;
}
.row.fixed-width {
max-width: 82rem;
width: 90%;
margin: 0 auto;
}
.row.vert-center {
align-items: center;
}
@media screen and (max-width: 880px) {
.row.mobile-wrap {
flex-wrap: wrap;
}
}
.row.fixed-spacing {
gap: 32px;
}
@media screen and (max-width: 880px) {
.row.fixed-spacing {
gap: 16px;
}
}
.row.fixed-spacing.small-spacing {
gap: 12px;
}
.row.fixed-spacing.large-spacing {
gap: 64px;
}
.row .column {
flex-grow: 0;
flex-shrink: 0;
}
.row .column.size-1 {
flex-basis: 100%;
}
.row .column.size-2 {
flex-basis: 50%;
}
@media screen and (max-width: 880px) {
.row .column.size-2 {
flex-basis: 100%;
}
}
.row .column.size-3 {
flex-basis: 33.3%;
}
@media screen and (max-width: 880px) {
.row .column.size-3 {
flex-basis: 100%;
}
}
.row .column.size-2-3 {
flex-basis: 66.6%;
}
@media screen and (max-width: 880px) {
.row .column.size-2-3 {
flex-basis: 100%;
}
}
.row .column.size-4 {
flex-basis: 25%;
}
@media screen and (max-width: 880px) {
.row .column.size-4 {
flex-basis: 100%;
}
}
.row .column.size-3-4 {
flex-basis: 75%;
}
@media screen and (max-width: 880px) {
.row .column.size-3-4 {
flex-basis: 100%;
}
}
.row .column.size-5 {
flex-basis: 16.6%;
}
@media screen and (max-width: 880px) {
.row .column.size-5 {
flex-basis: 100%;
}
}
.row .column.inline-elements {
display: inline-flex;
align-items: center;
}
.row .row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.row .row.wrapping {
flex-wrap: wrap;
}
.row .row.wrapping-reverse {
flex-wrap: wrap-reverse;
}
.row .row.growing .column {
flex-grow: 1;
}
.row .row.growing > * {
flex-grow: 1;
}
.row .row.shrinking .column {
flex-shrink: 1;
}
.row .row.centered {
justify-content: center;
}
.row .row.spacing {
justify-content: space-around;
}
.row .row.spacing-between {
justify-content: space-between;
}
.row .row.fixed-width {
max-width: 82rem;
width: 90%;
margin: 0 auto;
}
.row .row.vert-center {
align-items: center;
}
@media screen and (max-width: 880px) {
.row .row.mobile-wrap {
flex-wrap: wrap;
}
}
.row .row.fixed-spacing {
gap: 32px;
}
@media screen and (max-width: 880px) {
.row .row.fixed-spacing {
gap: 16px;
}
}
.row .row.fixed-spacing.small-spacing {
gap: 12px;
}
.row .row.fixed-spacing.large-spacing {
gap: 64px;
}
.column {
flex-grow: 0;
flex-shrink: 0;
}
.column.size-1 {
flex-basis: 100%;
}
.column.size-2 {
flex-basis: 50%;
}
@media screen and (max-width: 880px) {
.column.size-2 {
flex-basis: 100%;
}
}
.column.size-3 {
flex-basis: 33.3%;
}
@media screen and (max-width: 880px) {
.column.size-3 {
flex-basis: 100%;
}
}
.column.size-2-3 {
flex-basis: 66.6%;
}
@media screen and (max-width: 880px) {
.column.size-2-3 {
flex-basis: 100%;
}
}
.column.size-4 {
flex-basis: 25%;
}
@media screen and (max-width: 880px) {
.column.size-4 {
flex-basis: 100%;
}
}
.column.size-3-4 {
flex-basis: 75%;
}
@media screen and (max-width: 880px) {
.column.size-3-4 {
flex-basis: 100%;
}
}
.column.size-5 {
flex-basis: 16.6%;
}
@media screen and (max-width: 880px) {
.column.size-5 {
flex-basis: 100%;
}
}
.column.inline-elements {
display: inline-flex;
align-items: center;
}
.column.growing {
flex-grow: 1;
}
/*
* Class for flex columns
*
*
* @file column.less
*/
.column {
display: flex;
flex-direction: column;
}
.column.fixed-spacing {
gap: 32px;
}
@media screen and (max-width: 880px) {
.column.fixed-spacing {
gap: 16px;
}
}
.column.fixed-spacing.small-spacing {
gap: 12px;
}
.column.centered {
align-items: center;
}
/*
* The keyframes for animations.
*
* Keyframes.less
*/
/*
* Clockwise and anticlockwwise rotation
*/
@keyframes turning_cw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes turning_acw {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes backgroundMove {
0% {
background-position: 14% 0;
}
50% {
background-position: 87% 100%;
}
to {
background-position: 14% 0;
}
}
.list > * {
display: block;
}
.list.list-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
}
.list.list-grid > * {
flex-grow: 0;
flex-shrink: 1;
}
.list.list-grid.list-grid-2-4 > * {
flex-basis: 75%;
}
.list.list-grid.list-grid-2 > * {
flex-basis: 50%;
}
.list.list-grid.list-grid-3 > * {
flex-basis: 33%;
}
.list.list-grid.list-grid-4 > * {
flex-basis: 25%;
}
@media screen and (max-width: 880px) {
.list.list-grid.list-grid-mobile-2 > *,
.list.list-grid.list-grid-2.list-grid-mobile-2 > *,
.list.list-grid.list-grid-3.list-grid-mobile-2 > * {
flex-basis: 50%;
}
}
@media screen and (min-width: 55em) and (max-width: 1024px) {
.list.list-grid.list-grid-tablet-2 > *,
.list.list-grid.list-grid-3.list-grid-tablet-2 > *,
.list.list-grid.list-grid-4.list-grid-tablet-2 > * {
flex-basis: 50%;
}
}
@media screen and (max-width: 880px) {
.list.list-grid.list-grid-mobile-1 > *,
.list.list-grid.list-grid-2.list-grid-mobile-1 > *,
.list.list-grid.list-grid-3.list-grid-mobile-1 > *,
.list.list-grid.list-grid-4.list-grid-mobile-1 > * {
flex-basis: 100%;
}
}
@media screen and (max-width: 32em) {
.list.list-grid.list-grid-mobile-portrait-1 > *,
.list.list-grid.list-grid-2.list-grid-mobile-portrait-1 > *,
.list.list-grid.list-grid-3.list-grid-mobile-portrait-1 > *,
.list.list-grid.list-grid-4.list-grid-mobile-portrait-1 > * {
flex-basis: 100%;
}
}
@media screen and (min-width: 55em) and (max-width: 1024px) {
.list.list-grid.list-grid-mobile-landscape-2 .list.list-grid.list-grid-mobile-portrait-1.list-grid-mobile-landscape-2 > *,
.list.list-grid.list-grid-2.list-grid-mobile-landscape-2 > *,
.list.list-grid.list-grid-3.list-grid-mobile-landscape-2 > *,
.list.list-grid.list-grid-4.list-grid-mobile-landscape-2 > * {
flex-basis: 50%;
}
}
/*
* General styles for zig-zag layout.
* This layout can be used in several pages
* when for example we need to use sections like that:
* text on the left - image on the right,
* text on the right - image on the left, etc..
*
* How to use it - example :
*
* @file Properties.less
*/
.properties {
list-style: none;
background: none;
margin: 0 0 1rem 0;
padding: 0;
width: 100%;
border: 1px solid #F5F6F6;
}
.properties > li {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid #F5F6F6;
}
.properties > li:last-child {
border-bottom: 0;
}
.properties > li > .fa {
display: inline-block;
padding-top: 0.875em;
order: 1;
flex-basis: 2em;
text-align: center;
border-right: 1px solid #F5F6F6;
}
.properties > li .value,
.properties > li .label {
padding: 0.7em;
}
.properties > li > .label {
order: 2;
flex-basis: 10rem;
flex-grow: 1;
flex-shrink: 0;
border-right: 1px solid #F5F6F6;
}
.properties > li > .value {
order: 3;
flex-basis: 10rem;
flex-grow: 3;
flex-shrink: 1;
word-break: break-word;
}
.properties.zebra-list .label,
.properties.zebra-list .fa {
background-color: #fdfdfd;
}
.properties.zebra-list .label.bold,
.properties.zebra-list .fa.bold {
font-weight: 600;
}
/*
* @file FileUpload.less
* input[type="file"] in a container,
*/
div.upload-container p {
margin-bottom: 0;
}
div.upload-container div.upload-input-row {
display: flex;
align-items: center;
}
div.upload-container div.upload-input-row span.status {
line-height: 35px;
margin-left: 10px;
font-size: 0.875rem;
}
div.upload-container div.upload-input-row .file-upload {
position: relative;
overflow: hidden;
padding: 0.4rem 0.4rem;
background-color: #eceaea;
color: #25282A;
border: 1px solid #F5F6F6;
}
div.upload-container div.upload-input-row .file-upload i {
margin-right: 0.4rem;
}
div.upload-container div.upload-input-row .file-upload:hover {
background-color: #d8d8d8;
filter: brightness(1);
}
div.upload-container input[type="file"] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
min-height: 2rem;
}
/**
* Styles for the page navigation, which contain previous/next indicators
* and optionally numbers with pages that can be clicked to navigate to.
* This component can be used as follows:
* The root elemnt is required, but the children are optional. If navigation
* should span the whole width (as the elements should position themselfs over
* whole width), use `wide` class on the root element.
*
* @file PageNavigation.less
*/
.page-navigation {
display: flex;
flex-direction: row;
align-items: baseline;
margin-top: 2rem;
margin-bottom: 2rem;
}
.page-navigation.wide {
justify-content: space-between;
}
.page-navigation .page-navigation-number {
width: 1.5rem;
text-align: center;
transition: background-color 0.2s, color 0.2s;
cursor: pointer;
}
.page-navigation .page-navigation-number.selected {
border-radius: 0.25rem;
color: white;
background-color: #25A149;
}
.page-navigation .page-navigation-next,
.page-navigation .page-navigation-prev {
cursor: pointer;
}
.page-navigation .page-navigation-next.disabled,
.page-navigation .page-navigation-prev.disabled {
visibility: hidden;
cursor: default;
}
.page-navigation .page-navigation-next::after,
.page-navigation .page-navigation-prev::after,
.page-navigation .page-navigation-next::before,
.page-navigation .page-navigation-prev::before {
font-family: FontAwesome;
font-size: smaller;
color: inherit;
margin: 0 0.2rem;
}
.page-navigation .page-navigation-next::after,
.page-navigation .page-navigation-prev::after {
margin-left: 0.5rem;
}
.page-navigation .page-navigation-next::before,
.page-navigation .page-navigation-prev::before {
margin-right: 0.5rem;
}
.page-navigation .page-navigation-next {
margin-left: 1rem;
}
.page-navigation .page-navigation-prev {
margin-right: 1rem;
}
.page-navigation .page-navigation-next::after {
content: '\f04e';
}
.page-navigation .page-navigation-prev::before {
content: '\f04a';
}
/*
* ImageContainer.less
*/
.image-container {
display: block;
max-width: 100%;
box-sizing: border-box;
}
.image-container.xsmall {
min-width: 2em;
max-width: 3em;
}
.image-container.small {
min-width: 4em;
max-width: 6em;
}
.image-container.medium {
min-width: 7em;
max-width: 10em;
}
.image-container.space {
padding-bottom: 0.8em;
}
.image-container.large {
min-width: 11em;
max-width: 16em;
}
.image-container img,
.image-container object {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
display: block;
}
.image-container.bordered {
border: 1px solid #F5F6F6;
border-radius: 0.3rem;
padding: 0.5rem;
}
.image-container.centered {
margin: 0 auto;
}
.image-container .no-stretch {
width: auto;
height: auto;
max-width: 100%;
}
/*
* VideoContainer.less
*/
.video-container {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.video-container.rounded iframe {
border-radius: 1rem;
overflow: hidden;
}
.video-container.widescreen iframe {
aspect-ratio: 1.77777778;
}
.video-container.full-width iframe,
.video-container.full-width video {
width: 100%;
}
/*
* Generic styles for cards
* @Todo delete this solution and use one grid/column system
* @file cards.less
*
*/
.card {
background-color: #F9FAFA;
border-radius: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card img {
display: block;
width: 100%;
object-fit: cover;
height: 220px;
}
.card .card-content {
padding: 1rem 2rem;
color: #25282A;
display: flex;
flex-direction: column;
gap: 0.75rem;
justify-content: space-between;
}
.card.card-homepage {
color: #25282A;
display: flex;
flex-direction: column;
gap: 0.75rem;
justify-content: center;
height: 100%;
box-shadow: none !important;
text-align: center;
}
.card.card-homepage p {
text-align: left;
}
.card .image-wrapper {
position: relative;
display: inline-block;
}
.card .card-solutions {
padding: 1rem 2rem;
color: #25282A;
display: flex;
flex-direction: column;
gap: 0.75rem;
justify-content: space-between;
text-align: left;
}
.card footer,
.card section footer {
padding: 2rem;
padding-top: 0px;
margin-top: auto;
}
.card:hover {
cursor: pointer;
box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease-in-out;
text-decoration: none;
}
.card:hover footer {
text-decoration: underline;
}
.card.special-card {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/Resources/Images/Homepage/VacancyBackdrop.jpg');
background-size: cover;
color: #F9FAFA;
}
.card.special-card .card-content {
padding-top: 2rem;
color: #F9FAFA;
}
.card.special-card .card-content .article-tags span {
background-color: #D8DBDC;
color: #25282A;
}
.card.special-card footer {
color: #FFC600;
}
/*
* General styles of an svg icon
* Icon.less
*/
.icon {
display: block;
}
.icon.xx-small {
width: 1.5rem;
height: 1.5rem;
}
.icon.x-small {
width: 3rem;
height: 3rem;
}
.icon.small {
width: 6rem;
height: 6rem;
}
.icon.medium {
width: 9rem;
height: 9rem;
}
.icon.large {
width: 15rem;
height: 15rem;
}
.icon.x-large {
width: 20rem;
height: 20rem;
}
.icon.xx-large {
width: 25rem;
height: 25rem;
}
.icon.centered {
margin: 0 auto;
}
/*
* Invoice.less
*
* Styles for all the invoices no matter in which page they are shown.
*
* They should look the same as the invoices in the pdf.
*/
.invoice table {
border: none;
margin: 0;
background-color: initial;
}
.invoice table tr {
border: none;
}
.invoice table td {
background-color: initial;
padding: 0;
overflow: auto;
text-overflow: initial;
white-space: initial;
}
.invoice table th {
cursor: default;
}
.invoice table th:hover {
background-color: initial;
}
/*
* RibbonMenu.less
* It is a menu with tab elements next to each other.
* We usually use it to navigate inside similar pages/categories
*
* How to use it:
*
*
*/
.ribbon-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
border-radius: 64px;
}
@media screen and (max-width: 880px) {
.ribbon-menu {
background-color: transparent;
}
}
.ribbon-menu a {
padding: 12px 16px;
transition: all 0.15s ease-in-out;
border-radius: 32px;
background-color: #F9FAFA;
color: #25282A;
}
.ribbon-menu a:hover {
background: #007AC4;
color: #fff;
text-decoration: none;
}
.ribbon-menu a.active {
background-color: #00426A;
color: #fff;
}
/**
* sidebar.less
*/
.inner-sidebar h2 {
font-weight: 600;
font-size: 1.2rem;
}
.inner-sidebar label {
font-size: 0.875rem;
}
.inner-sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.inner-sidebar .sidemenu ul li {
padding: 0.5rem 0;
border-bottom: 1px solid #F5F6F6;
}
.inner-sidebar .sidemenu ul li a {
color: #25282A;
}
.inner-sidebar .sidemenu ul li a:hover {
text-decoration: none;
color: #C8102E;
}
/**
* THE NOT SO FAMOUS GRAFFELGRID SYSTEM
* @author: Waldemar Graffelkaas 2014 (walter.greefkes@copernica.com)
* @version: 1.0
*/
/**
* Use the .rows-X class or .row(@param; @param) mixin to make a
* steady row that spans the given steps of its parent element.
* The .rows-X class does not have left or right padding.
* Postfix the class with -gut to add a default 2% padding-left and right.
*
* @param: int (the number of columns)
* @param: int (the padding)
*/
/**
* Use the .cols-X class or .cols(@param) mixin to give an element a
* a width in percentages.
* Wrap cols in a row for the best results.
*
* @param: int (the number of columns)
*/
/**
* The .tiles(@param; @param) mixin allows you to create a grid of list items
* that are equally spread out over the width of its parent element.
* Always use this in conjunction with the &:nth-child(Xn+X) pseudo class
* to remove the right margin of each utter most right item in the list.
* (where X's should represent the number of tiles per row)
* Ideally for creating thumbnail galleries and so and so and so.
*
* @param: int (number of columns)
* @param: int (the space between each list item)
*/
/**
* Use class .push-X if you want to push an element X grid steps
* to the right. Use it as an additional class on an element that already
* has a .cols-X or .row-X class.
*/
/**
* Use class .pull-X if you want to force an element X grid steps
* to the left. Use it as an additional class on an element that already
* has a .cols-X or .row-X class.
*/
/*
* These classes can be used in case we want to hide something
* for example depending on the screen size
* @file Hidden.less
*/
.desktop-hidden {
display: none;
}
@media screen and (max-width: 880px) {
.desktop-hidden {
display: block;
}
}
.mobile-hidden {
display: block;
}
@media screen and (max-width: 880px) {
.mobile-hidden {
display: none;
}
}
/**
* These are the styles for a simple annotation classed element.
* These are elements that are not necessarily important by
* themselves but enforce the state of another element.
* Often used with the element.
*
* @author Tycho Atsma
* @file annotation.less
* @documentation public
*/
.annotation {
color: #ababab;
font-style: italic;
font-weight: 600;
}
/**
* This file declares the intention of how documents should behave.
* In this context, a document is an element that contains content
* that represents some kind of document. Think about an email
* (e.g. ticket response) or something similar.
*
* @author Tycho Atsma
* @file Resouces/Style/Common/documents.less
*/
.document {
word-wrap: break-word;
white-space: pre-wrap;
padding: 0.5rem;
margin: 0.5rem;
}
/*
* @file ContentBox.less
*
* ContentBox is a box that shows any kind of content,
* like text images, videos, buttons etc.
* The class will be used when we need to put these
* in a box.
*
*
*
*/
.sliding-box {
position: fixed;
bottom: 50%;
right: -320px;
transition: all 0.15s ease-in-out;
}
@media screen and (max-width: 880px) {
.sliding-box {
bottom: 0;
right: 0;
}
}
.sliding-box.show {
right: 0;
}
@media screen and (max-width: 880px) {
.sliding-box.show {
bottom: 50vh;
}
}
.sliding-box .fa.fa-times {
position: absolute;
right: 1rem;
bottom: 8rem;
color: #25282A;
cursor: pointer;
}
@media screen and (max-width: 880px) {
.sliding-box .fa.fa-times {
bottom: -15px;
}
}
.sliding-box .slidingbox-container {
display: flex;
align-items: center;
color: #25282A;
position: relative;
width: 320px;
}
@media screen and (max-width: 880px) {
.sliding-box .slidingbox-container {
flex-direction: column;
}
}
.sliding-box *[data-slidingboxpart="title"] {
cursor: pointer;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
transform: rotate(-90deg);
text-align: center;
background-color: #FFC600;
padding: 12px 12px;
position: absolute;
left: -195px;
width: 320px;
}
@media screen and (max-width: 880px) {
.sliding-box *[data-slidingboxpart="title"] {
transform: rotate(0deg);
left: 0;
top: -45px;
}
}
.sliding-box *[data-slidingboxpart="content"] {
background-color: #FFC600;
padding: 28px 32px;
position: absolute;
right: 0;
height: 18rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 880px) {
.sliding-box *[data-slidingboxpart="content"] {
display: block;
height: auto;
}
}
.sliding-box *[data-slidingboxpart="content"] .inputset {
border: 0;
}
.sliding-box *[data-slidingboxpart="content"] .inputset input {
background-color: #F9FAFA;
padding: 16px 16px;
margin-bottom: 16px;
}
.sliding-box *[data-slidingboxpart="content"] .inputset input,
.sliding-box *[data-slidingboxpart="content"] .inputset button {
border-radius: 6px;
}
/*
* @file TitleBox.less
*
* This is a box that looks like all the other containers
* with the difference that it has a separated area
* for the title. This box is spltted into two,
* the title container and the content and this is how it is created:
*
*
*/
.title-box {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1rem;
overflow: hidden;
background-color: #fff;
margin-bottom: 2rem;
}
.title-box .title {
background: linear-gradient(45deg, #00426A 0%, #007AC4 100%);
color: #fff;
padding: 40px 48px;
}
.title-box .title * {
margin: 0;
}
.title-box .content {
padding: 40px 48px;
}
/*
* Class for containers, that we use to show a tag
*
* @ file Tag.less
*/
.tag {
display: inline-block;
overflow: hidden;
padding: 0.75rem 1rem;
border-radius: 999rem;
margin-right: 0.75rem;
text-transform: uppercase;
font-size: 0.75rem;
line-height: 1.25rem;
}
.tag.dark-base {
background-color: #00426A;
color: #F9FAFA;
}
.tag.light-base {
background-color: #EBEDED;
color: #25282A;
}
.tag.white-base {
background-color: #F9FAFA;
color: #25282A;
}
/**
* This is a class that can be used to for displaying a longer, curated piece
* of text. Like a blog article or a documentation article. This class will
* define the typography and looks of elements inside the editorial, but will
* not modify the container.
*
* @author Paweł Kuźnik
* @author Tymofii Oberukhtin
*/
.editorial header {
padding-bottom: 2rem;
}
.editorial p,
.editorial ul,
.editorial h1,
.editorial h2,
.editorial h3,
.editorial img,
.editorial ol,
.editorial table,
.editorial pre {
padding: 0;
margin-bottom: 0.75rem;
}
.editorial h1:not(:first-child),
.editorial h2:not(:first-child),
.editorial h3:not(:first-child) {
margin-top: 1.5rem;
}
@media screen and (max-width: 880px) {
.editorial h1:not(:first-child),
.editorial h2:not(:first-child),
.editorial h3:not(:first-child) {
margin-top: 1rem;
}
}
.editorial p,
.editorial li {
text-decoration: none;
color: #25282A;
}
.editorial strong {
font-weight: bold;
}
.editorial small {
font-size: smaller;
}
.editorial pre {
box-sizing: border-box;
padding: 1rem;
font-size: 16px;
}
.editorial ul,
.editorial ol {
padding-left: 2rem;
}
.editorial img,
.editorial svg {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
/**
* These are styles for any kind of header that can be used inside of articles, or blog / post like
* elements that contain some kind of thumbnail (eg. author image).
*/
.post-header::after {
content: '';
display: block;
clear: both;
width: 100%;
}
.post-header h1,
.post-header h2 {
margin-bottom: 0;
}
.post-header .thumbnail {
float: left;
margin-left: 0;
margin-right: 1rem;
}
/**
* This is a class that is used in a container of articles
* usually displayed on different pages.
*
* @file FeaturedArticles.less
*/
.featured-articles .featured-event {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/Resources/Images/Homepage/VacancyBackdrop.jpg');
background-size: cover;
color: #F9FAFA;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.featured-articles .featured-event a:not(.button) {
color: #FFC600;
}
.featured-articles .featured-event .article-tags span {
background-color: #25282A;
}
.featured-articles .article-tags span {
display: inline-block;
background-color: #F5F6F6;
padding: 12px 16px;
border-radius: 80px;
overflow: hidden;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
.featured-articles .article-date {
color: #B1B7BA;
}
.featured-articles a {
font-weight: bold;
}
/**
* The container class is a class that can and should be user for global
* container elements on a page. Using this class will display a nice
* centered container element, that can have a sidebar or not.
* If a page has a sidebar, we can extend this class with
* a container-sidebar class.
*
* @author Tycho Atsma
* @file container.less
* @documentation public
*/
/**
* The main container without a sidebar
*/
.container {
max-width: 82rem;
width: 90%;
margin: 0 auto;
}
/**
* Container that can be used to display small amount of data at once.
*/
.container-slim {
max-width: 40rem;
}
/**
* The main container with a sidebar
*/
.container.container-withsidebar {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
/**
* The main content container
*/
/**
* The sidebar container
*/
/**
* Mobile state
*/
}
.container.container-withsidebar.nowrap {
flex-wrap: nowrap;
}
.container.container-withsidebar .container-content {
flex-basis: 75%;
width: 75%;
}
@media screen and (max-width: 880px) {
.container.container-withsidebar .container-content {
width: 100%;
}
}
.container.container-withsidebar .container-sidebar {
flex-basis: 23%;
}
@media screen and (max-width: 880px) {
.container.container-withsidebar {
flex-flow: column nowrap;
/**
* The main container and sidebar
*/
}
.container.container-withsidebar > .container-content,
.container.container-withsidebar > .container-sidebar {
flex-basis: 100%;
margin: 0;
margin-bottom: 0.5rem;
}
}
.container-solutions {
display: flex;
flex-direction: column;
gap: 3rem;
padding: 0 2rem;
max-width: 82rem;
margin: 0 auto;
border-radius: 1em;
}
.container-solutions .content-box {
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(2rem, 4vw, 18rem);
max-width: 95%;
margin: 0 auto;
}
.container-solutions .content-box .image-container {
flex: 0 0 auto;
max-width: 560px;
}
.container-solutions .content-box .image-container img {
width: 100%;
height: auto;
display: block;
border-radius: 2em;
}
.container-solutions .content-box > div:not(.image-container) {
flex: 1 1 auto;
max-width: 40rem;
text-align: left;
}
.container-solutions .content-box:nth-child(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 880px) {
.container-solutions {
padding: 0 1rem;
}
.container-solutions .content-box {
flex-direction: column;
gap: 2rem;
align-items: flex-start;
}
.container-solutions .content-box .image-container,
.container-solutions .content-box > div:not(.image-container) {
max-width: 100%;
}
.container-solutions .content-box:nth-child(even) {
flex-direction: column;
}
}
.blur-active {
filter: blur(6px);
pointer-events: none;
transition: filter 0.3s ease;
}
/*
* These are styles that can be used in different cases to
* define the way that containers and their children should behave
* in a two dimensional layout system.
* The .section-grid class will be used in the parent container and
* can be combined with other classes for different results,
* for example in alignment.
*
* Example
* .
*
* There can be different possibilities, for example we
* usually add a background color to the section or we
* want to have space around the content. For these options,
* we have created in this file a couple of classes that can
* be used in the tag.
*
* @file Section.less
*/
section .spacing {
padding: 64px 0;
}
section .spacing-top {
padding-top: 64px;
}
section .white-background {
background-color: #F9FAFA;
}
section .light-background {
background-color: #EBEDED;
}
section .dark-background {
background-color: #D8DBDC;
}
section .image-background {
background: url(Images/Homepage/homepage-bg.jpg);
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
section .highlighted {
background-color: #25282A;
}
section .highlighted h2,
section .highlighted p {
color: #F9FAFA;
}
section .highlighted > a {
color: #FFC600;
}
section .special {
background: linear-gradient(45deg, #00426A 0%, #007AC4 100%);
}
section .special h2 {
color: #F9FAFA;
}
section .section-header {
margin-bottom: 64px;
}
section .section-header .onMobile {
margin-bottom: 32px;
}
section .section-header.dark-base {
color: #F9FAFA;
}
/*
* These are styles that can be used in different cases to
* define the way that containers and their children should behave
* in a two dimensional layout system.
* The .section-grid class will be used in the parent container and
* can be combined with other classes for different results,
* for example in alignment.
*
* Example
*
* @file Form.less
*/
form > div,
.form > div {
margin-bottom: 0.5rem;
}
form > div:last-child,
.form > div:last-child {
margin-bottom: 0;
}
form.form-vertical label,
.form.form-vertical label {
display: block;
margin-bottom: 0.2rem;
}
form.form-vertical .input,
.form.form-vertical .input,
form.form-vertical input:not([type="checkbox"]):not([type="radio"]),
.form.form-vertical input:not([type="checkbox"]):not([type="radio"]),
form.form-vertical textarea,
.form.form-vertical textarea,
form.form-vertical select,
.form.form-vertical select {
width: 100%;
display: block;
margin-top: 0.2rem;
}
form.form-horizontal label,
.form.form-horizontal label {
margin-right: 0.2rem;
}
form.form-horizontal .input,
.form.form-horizontal .input,
form.form-horizontal input:not([type="checkbox"]):not([type="radio"]),
.form.form-horizontal input:not([type="checkbox"]):not([type="radio"]),
form.form-horizontal textarea,
.form.form-horizontal textarea,
form.form-horizontal select,
.form.form-horizontal select {
margin-right: 0.875rem;
}
form.form-horizontal .input:last-child,
.form.form-horizontal .input:last-child,
form.form-horizontal input:not([type="checkbox"]):not([type="radio"]):last-child,
.form.form-horizontal input:not([type="checkbox"]):not([type="radio"]):last-child,
form.form-horizontal textarea:last-child,
.form.form-horizontal textarea:last-child,
form.form-horizontal select:last-child,
.form.form-horizontal select:last-child {
margin-right: 0;
}
@media screen and (max-width: 32em) {
form.form-horizontal .input,
.form.form-horizontal .input,
form.form-horizontal input:not([type="checkbox"]):not([type="radio"]),
.form.form-horizontal input:not([type="checkbox"]):not([type="radio"]),
form.form-horizontal textarea,
.form.form-horizontal textarea,
form.form-horizontal select,
.form.form-horizontal select {
margin-bottom: 0.5rem;
margin-right: 0;
width: 100%;
}
}
form .end-aligned,
.form .end-aligned {
text-align: right;
}
form .vertically-center,
.form .vertically-center {
align-self: center;
}
form .vertically-center label,
.form .vertically-center label {
display: inline-block;
}
form .notice,
.form .notice {
margin: 0.5rem 0;
}
form.compact,
.form.compact {
max-width: 30rem;
margin: 0 auto;
}
/*
* General styles for labels
* Check /Resources/Style/Common/Forms/formsguide.txt
*
* Labels example :
*
*
* or
*
*
* @file Label.less
*/
label {
font-weight: 600;
font-size: 1rem;
}
label.nowrap-label {
white-space: nowrap;
}
@media screen and (max-width: 880px) {
label {
white-space: normal;
}
}
label span {
display: block;
margin-bottom: 0.2rem;
}
/*
* A form block is a container of related form elements.
* Labels, inputs, checkboxes, buttons, whatever could be in a form,
* can be wrapped in this class
* It is a useful class if you want to group or seperate in a form
* inputs/radio buttons etc of the same or different category
*
* Check /Resources/Style/Common/Forms/formsguide.txt
*
*
* Example :
*
*
* @file ErrorMessage.less
*
*/
.error-message,
.warning-message {
font-weight: normal;
font-size: 14px;
margin: 0.25rem 0;
display: block;
}
.error-message:before,
.warning-message:before {
content: "\f071";
margin-right: 0.5rem;
font-family: FontAwesome;
}
.error-message {
color: #C8102E;
}
.warning-message {
color: #F8B006;
}
/**
* Special styles of forms. Eventually these styles will
* replace the general form styles. For now we use the class
* .form-container.
* It's a form that contains input fields that have labels seated
* within them until you focus into it. As soon as you focus on the
* input field, the label moves smoothly to the top and the input
* field is revealed.
*
* You just need to add the class to the form element.
*
*
* @author Marianna Kavvadia
* @file FormContainer.less
*/
.form-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.form-container label {
width: 100%;
margin-bottom: 12px;
position: relative;
border: 1px solid #D8DBDC;
border-radius: 6px;
overflow: hidden;
}
.form-container input,
.form-container textarea,
.form-container select {
border: none;
outline: none;
background: transparent;
box-sizing: border-box;
font-size: 20px;
width: 100%;
caret-color: #007AC4;
}
.form-container input,
.form-container textarea {
padding: 16px 16px 0 16px;
position: relative;
}
.form-container select {
padding: 12px;
box-shadow: inset 0px 0px 0px 1px #D8DBDC;
border-radius: 6px;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #B1B7BA 50%), linear-gradient(135deg, #B1B7BA 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
}
.form-container select:focus {
box-shadow: inset 0px 0px 0px 1px #007AC4;
background-image: linear-gradient(45deg, transparent 50%, #007AC4 50%), linear-gradient(135deg, #007AC4 50%, transparent 50%);
}
.form-container select option:first-child {
color: #B1B7BA;
}
.form-container input::placeholder,
.form-container textarea::placeholder {
opacity: 0;
}
.form-container input:-webkit-autofill,
.form-container input:-webkit-autofill:hover,
.form-container input:-webkit-autofill:focus,
.form-container textarea:-webkit-autofill,
.form-container textarea:-webkit-autofill:hover,
.form-container textarea:-webkit-autofill:focus,
.form-container select:-webkit-autofill,
.form-container select:-webkit-autofill:hover,
.form-container select:-webkit-autofill:focus {
-webkit-text-fill-color: #25282A;
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
box-shadow: 0 0 0px 1000px transparent inset;
transition: background-color 5000s ease-in-out 0s;
}
.form-container label span {
position: absolute;
top: 0;
left: 15px;
transform: translateY(10px);
transition-duration: 300ms;
font-size: 20px;
line-height: 24px;
color: #B1B7BA;
font-weight: 400;
}
.form-container label span.error-message {
position: relative;
left: 0;
font-size: 14px;
color: #C8102E;
}
.form-container label:focus-within > span,
.form-container input:not(:placeholder-shown) + span,
.form-container textarea:not(:placeholder-shown) + span {
color: #007AC4;
caret-color: #007AC4;
font-size: 12px;
line-height: 24px;
transform: translateY(0px);
}
.form-container label:focus-within {
border: 1px solid #007AC4;
}
.form-container label.error-field {
border: 1px solid #C8102E;
}
.form-container button {
font-size: 20px;
}
/**
* Special styles for newsletter checkboxes. This is used when you want to include
* a checkbox for subscribing to the newsletter on the Copernica homepage for example.
*
* @author Dylan Vermeulen
* @file NewsletterCheckbox.less
*/
.newsletter-checkbox input#newsletter {
width: 20px;
height: 20px;
margin-bottom: 18px;
}
.newsletter-checkbox label {
border: none;
font-size: 20px;
padding-left: 8px;
}
.newsletter-checkbox .warning small {
width: 100%;
}
/*
* Styles for the layout of all the pages
* Main.less
*/
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main .main-content {
flex: 1;
}
/*
* Styles of the content in frontpage.
* The frontpage is splitted into sections
* that have different styles and content
*
* @file main-content.less
*/
.main-content .section-big {
padding: 10rem 0;
}
/*
* Styles for footer
* MainFooter.less
*/
.main-footer {
padding-top: 32px;
background-color: #25282A;
color: #7D8284;
}
.main-footer ul {
list-style-type: none;
padding-left: 0;
}
.main-footer ul li a {
color: #7D8284;
font-size: 16px;
line-height: 20px;
}
.main-footer ul li a i {
margin-left: 0.5rem;
}
.main-footer h4 a {
color: #7D8284;
margin: 0;
}
.main-footer .section-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.main-footer .social-icons img {
max-width: 0.9em;
}
.main-footer .social-icons a {
text-decoration: none;
}
.main-footer .footer-newsletter .inputset {
border: none;
flex-direction: row;
align-items: stretch;
}
.main-footer .footer-newsletter .inputset input {
background-color: #34383B;
color: #B1B7BA;
width: 100%;
}
/**
* FooterBottom.less
*/
.footer-bottom {
background: #191B1D;
margin-top: 2rem;
padding: 1rem;
text-align: center;
color: #666E74;
font-size: 16px;
}
.footer-bottom ul {
margin: 0;
padding: 0;
}
.footer-bottom ul li {
display: inline-block;
border-right: 1px solid #666E74;
margin-right: 5px;
padding-right: 8px;
line-height: 14px;
}
.footer-bottom ul li:last-child {
border-right: none;
}
/*
* Styles of the layout of most of the pages
* except for the frontpage
*
* Example of a layout of a simple page:
*
*
*/
.main-header {
position: sticky;
top: 0;
width: 100%;
z-index: 99;
}
/*
* Styles for the main navigation of the website.
* For small screens a menu button appears and when clicked expands the
* navigation with an accordion style. (ToggleMenu.less)
*
* @file MainNavigation.less
* @author Marianna Kavvadia
*/
.main-navigation {
background-color: #F9FAFA;
}
.main-navigation .header-container {
width: 90%;
margin: 0 auto;
}
.main-navigation .user-menu {
display: flex;
min-width: 200px;
}
.main-navigation .main-nav-list {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
justify-content: space-between;
width: 70%;
}
.main-navigation .main-nav-list .main-menu {
margin-bottom: 0;
padding: 0;
flex-shrink: 0;
}
.main-navigation .main-nav-list .main-menu .separate-box {
border-left: 1px solid #B1B7BA;
padding-left: 32px;
flex-shrink: 1;
}
.main-navigation .main-nav-list .main-menu .bottom-box {
border-top: 1px solid #B1B7BA;
padding: 16px 0;
}
.main-navigation .main-nav-list .main-menu .bottom-box.one-item {
justify-content: flex-end;
}
@media screen and (max-width: 880px) {
.main-navigation .main-nav-list .main-menu .bottom-box.one-item {
justify-content: flex-start;
}
}
.main-navigation .main-nav-list .main-menu .card {
background-color: #EBEDED;
}
.main-navigation .main-nav-list .main-menu .card img {
height: 120px;
}
.main-navigation .main-nav-list .main-menu li {
margin-bottom: 0;
list-style: none;
}
.main-navigation .main-nav-list .main-menu li a {
color: #25282A;
line-height: 2rem;
word-break: normal;
}
.main-navigation .main-nav-list .main-menu li a.not-dropdown {
padding-left: 1rem;
}
.main-navigation .main-nav-list .main-menu li a i {
margin-left: 0.5rem;
}
.main-navigation .main-nav-list .main-menu li a:hover {
text-decoration: none;
color: #007AC4;
}
@media screen and (max-width: 1224px) {
.main-navigation .main-nav-list .main-menu li a {
position: initial;
}
}
.main-navigation .main-nav-list .secondary-menu {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.main-navigation .main-nav-list .navigation-contact-details {
display: none;
}
@media screen and (min-width: 1224px) {
.main-navigation .main-nav-list .mobile-languageswitch {
display: none;
}
}
@media screen and (max-width: 1224px) {
.main-navigation .main-nav-list {
visibility: hidden;
right: -17rem;
transition: right 0.2s linear;
height: 100vh;
max-height: 100%;
position: fixed;
top: 60px;
z-index: 999;
background: #F9FAFA;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
}
}
.main-navigation .main-nav-list.expand {
visibility: visible;
transition: right 0.2s linear;
right: 0rem;
width: 17rem;
padding: 2rem;
overflow-y: auto;
justify-content: flex-start;
}
.main-navigation .main-nav-list.expand ul {
order: 4;
width: 100%;
margin: 0;
padding: 0;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.main-navigation .main-nav-list.expand li {
width: 100%;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-label {
padding: 0;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-label span::after {
right: 15px;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content {
position: relative;
top: 0;
left: 0;
min-width: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
padding-top: 0.5rem;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box {
flex-direction: column;
gap: 0;
padding: 0;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box h4 {
padding-top: 8px;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box .section-grid {
gap: 0;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box.aboutus-dropdown .card {
background-color: transparent;
text-align: left;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box.aboutus-dropdown .card img {
display: none;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box.aboutus-dropdown .card .card-content {
padding: 0;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box.aboutus-dropdown .card:hover {
box-shadow: none;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box.aboutus-dropdown .contact-details {
display: none;
}
.main-navigation .main-nav-list.expand li .dropdown .dropdown-content .content-box .separate-box {
border-left: none;
padding: 0;
}
.main-navigation .main-nav-list.expand li a.not-dropdown {
padding: 0;
}
.main-navigation .main-nav-list.expand .secondary-menu {
flex-direction: column;
align-items: flex-start;
}
@media only screen and (max-height: 550px) {
.main-navigation .main-nav-list.expand {
max-height: 86vh;
}
}
@media only screen and (max-height: 300px) {
.main-navigation .main-nav-list.expand {
max-height: 77vh;
}
}
.main-navigation .main-nav-list.expand .search-nav {
order: 3;
}
.main-navigation .main-nav-list.expand .language-nav {
display: none;
}
.main-navigation .main-nav-list.expand .accordion {
display: block;
order: 2;
color: #25282A;
width: 100%;
}
.main-navigation .main-nav-list.expand .accordion a {
width: 49%;
display: inline-block;
text-align: center;
border-bottom: 3px solid #F5F6F6;
padding: 0.5rem 0;
}
.main-navigation .main-nav-list.expand .accordion a.active {
border-bottom: 3px solid #007AC4;
background-color: #F5F6F6;
text-decoration: none;
}
.main-navigation .main-nav-list.expand .navigation-contact-details {
order: 5;
display: block;
}
.main-navigation .main-nav-list.expand .navigation-contact-details a,
.main-navigation .main-nav-list.expand .navigation-contact-details span {
display: block;
}
.main-navigation .navigation-login {
color: #25282A;
display: block;
}
.main-navigation .navigation-login:hover {
text-decoration: none;
}
.main-navigation .accordion {
display: none;
}
.main-navigation .navigation-register {
border-left: 1px solid #25282A;
padding: 0 0.5rem;
margin-left: 0.5rem;
color: #007AC4;
}
.main-navigation .navigation-register:hover {
text-decoration: none;
}
.main-navigation div[data-widget="switchlanguage"] a:hover,
.main-navigation div[data-widget="switchlanguage"] a.active {
text-decoration: underline;
}
@media screen and (max-width: 1224px) {
.main-navigation div[data-widget="switchlanguage"] a:hover,
.main-navigation div[data-widget="switchlanguage"] a.active {
text-decoration: none;
}
}
.main-navigation .fa-search {
color: #25282A;
font-size: 1.5rem;
cursor: pointer;
transition: transform 0.4s ease-in-out;
}
.main-navigation .fa-search.active {
transform: rotate(1turn);
}
@media screen and (max-width: 1224px) {
.main-navigation .fa-search {
padding: 0.75rem;
position: absolute;
z-index: 1;
pointer-events: none;
}
}
@media screen and (max-width: 20em) {
.main-navigation .fa-search {
margin-right: 0.5rem;
}
}
/*
* Styles for toggle menu
* It is the main navigation of the website in smaller screen sizes
* like in a mobile
*
* @file ToggleMenu.less
*
*/
/* The toggle to show or hide the main menu. In this case: a hamburger menu */
.toggle-menu {
display: none;
width: 2rem;
margin: 2rem 0;
position: relative;
}
.toggle-menu span {
position: relative;
display: block;
width: 100%;
height: 5px;
background-color: #25282A;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
cursor: pointer;
}
.toggle-menu span:after,
.toggle-menu span:before {
content: "";
position: absolute;
left: 0;
top: -9px;
width: 100%;
height: 5px;
background-color: #25282A;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
cursor: pointer;
}
.toggle-menu span:after {
top: 9px;
}
.toggle-menu.active span {
background-color: transparent;
}
.toggle-menu.active span:before {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-ms-transform: rotate(45deg) translate(5px, 5px);
transform: rotate(45deg) translate(5px, 5px);
}
.toggle-menu.active span:after {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-ms-transform: rotate(-45deg) translate(7px, -8px);
transform: rotate(-45deg) translate(7px, -8px);
}
@media only screen and (max-width: 1224px) {
.toggle-menu {
/* The Hamburger menu icon */
display: block;
}
}
/*
* @file SwitchBar.less
*
*/
.switch-bar {
display: none;
padding: 1rem;
margin-bottom: 0;
color: white;
text-align: center;
position: fixed;
bottom: 1rem;
left: 15vw;
max-width: 70vw;
z-index: 20000;
background-color: cornflowerblue;
border-radius: 2px;
box-shadow: 0 2px 1px #34383B;
}
.switch-bar p {
word-break: break-word;
line-height: 2;
}
.switch-bar p,
.switch-bar a {
display: inline;
margin: 0 0.25rem;
}
.switch-bar a {
font-weight: bold;
color: white;
padding: 0.5rem;
border: 2px solid white;
}
.switch-bar.active {
display: block;
}
/*
* Styles for a warning bar that appears
* only in internet explorer 9 or less
*
* BrowserWarningBar.less
*
*/
.browser-warningbar {
padding: 1rem;
margin: 0;
}
.browser-warningbar p {
padding: 0;
font-weight: normal;
margin: 0;
text-align: center;
font-size: 1rem;
}
.browser-warningbar p:first-child {
font-weight: 600;
}
/*
* Styles for the search form in main navigation
*
* @file SearchMainNavigation.less
*/
.main-navigation-searchform {
position: absolute;
right: 0;
max-width: 0px;
opacity: 0;
box-sizing: border-box;
background-color: #F9FAFA;
border-radius: 5px;
padding: 0.5rem 0.5rem 0.5rem 3rem;
}
@media screen and (max-width: 1224px) {
.main-navigation-searchform {
position: relative;
max-width: 100%;
opacity: 1;
background-color: #F5F6F6;
border-radius: 5px;
padding: 0.5rem 0.5rem 0.5rem 3rem;
}
}
.main-navigation-searchform input {
padding: 0;
height: 2rem;
}
.main-navigation-searchform input::placeholder {
color: #25282A;
font-size: 16px;
}
.main-navigation-searchform input:-webkit-autofill,
.main-navigation-searchform input:-webkit-autofill:hover,
.main-navigation-searchform input:-webkit-autofill:focus {
-webkit-text-fill-color: #25282A;
-webkit-box-shadow: 0 0 0px 1000px #F9FAFA inset;
transition: background-color 5000s ease-in-out 0s;
}
.main-navigation-searchform input::-webkit-search-cancel-button {
display: none;
}
.main-navigation-searchform.opened {
animation: close 0.4s ease-in-out;
animation-fill-mode: initial;
}
.main-navigation-searchform.show {
animation: search 0.4s ease-in-out;
animation-fill-mode: forwards;
padding: 0.25rem 0.75rem;
}
@media screen and (max-width: 1020px) {
.main-navigation-searchform.show {
top: -0.25rem;
}
}
.main-navigation-searchform form {
margin: 0;
}
.main-navigation-searchform form input {
font-size: 1em;
border: none;
width: 100%;
color: #25282A;
background-color: transparent;
}
@keyframes search {
0% {
max-width: 0;
transform: translateY(0rem);
padding: 0.25rem 0;
}
25% {
opacity: 0;
padding: 0.25rem 0;
}
45% {
opacity: 1;
padding: 0.25rem 0.75rem;
}
65% {
max-width: 0;
min-width: 0;
transform: translateY(1.5rem);
opacity: 1;
}
100% {
max-width: 300px;
min-width: 300px;
transform: translateY(1.5rem);
opacity: 1;
}
}
@keyframes close {
0% {
max-width: 300px;
min-width: 300px;
transform: translateY(1.5rem);
opacity: 1;
padding: 0.25rem 0;
}
65% {
max-width: 0;
min-width: 0;
opacity: 1;
transform: translateY(1.5rem);
padding: 0.25rem 0;
}
85% {
opacity: 0;
}
100% {
max-width: 0;
opacity: 0;
transform: translateY(0rem);
padding: 0.25rem 0.75rem;
}
}
/*
* Jobpositions.less
*/
.job-details p {
font-size: 1rem;
line-height: 1.25rem;
margin-bottom: 0.5rem;
background-repeat: no-repeat;
padding-left: 2rem;
}
.job-details p.job-feature-location {
background-image: url(/Resources/Images/Jobs/Icon_Location.svg);
}
.job-details p.job-feature-salary {
background-image: url(/Resources/Images/Jobs/Icon_Money.svg);
}
.job-details p.job-feature-hours {
background-image: url(/Resources/Images/Jobs/Icon_Time.svg);
}
/*
* Styles for the profile page of each partner
*
* @file PartnerProfile.less
*/
.partner-profile .partner-introduction .image-container {
margin-bottom: 32px;
}
.partner-profile .partner-reviews .reviews-list {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
.partner-profile .partner-reviews .reviews-list .content-box {
margin-bottom: 0;
}
.partner-profile .partner-reviews .review .reviewer {
color: #B1B7BA;
}
/*
* Partners.less
*
*/
.partners-page .search-section .form-container {
flex-direction: row;
}
.partners-page .search-section .form-container .input,
.partners-page .search-section .form-container select,
.partners-page .search-section .form-container label {
background-color: #fff;
}
.partners-page .search-section .form-container label,
.partners-page .search-section .form-container select {
flex-basis: 20rem;
margin-bottom: 0;
margin-right: 1rem;
}
@media screen and (max-width: 880px) {
.partners-page .search-section .form-container label,
.partners-page .search-section .form-container select {
flex-basis: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
}
@media screen and (max-width: 880px) {
.partners-page .search-section .form-container button {
width: 100%;
}
}
.partners-page .partneroftheyear .image-container {
margin-bottom: 0;
max-height: 14rem;
}
.partners-page .partneroftheyear span {
color: #FFC600;
}
.partners-page .partner-list .partner-container {
color: #25282A;
transition: all 0.3s ease-in;
margin-bottom: 0;
}
.partners-page .partner-list .partner-container:hover {
text-decoration: none;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
}
.partners-page .partner-list .partner-container:hover span {
text-decoration: underline;
}
.partners-page .partner-list .partner-container .image-container {
height: 4.5rem;
margin-bottom: 1rem;
}
.partners-page .partner-list .partner-container p {
margin: 0;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.partners-page .partner-list .partner-container span {
color: #007AC4;
display: block;
margin-top: 1rem;
}
.partners-page .partner-usps {
grid-template-columns: repeat(2, minmax(320px, 1fr));
}
@media screen and (max-width: 880px) {
.partners-page .partner-usps {
grid-template-columns: repeat(1, minmax(320px, 1fr));
}
}
.partners-page .integration-logos .image-container {
width: 10rem;
}
.partners-page iframe {
aspect-ratio: 1.77777778;
width: 100%;
}
.partners-page .privacy-statement {
margin-bottom: 16px;
}
/*
* Styles of support page. A page where we shoow the options that the user has
* when he needs help with something.
*
* @file Support.less
*
*/
.support-container .content-box {
margin-bottom: 0;
}
.support-container .content-box.documentation-block {
grid-row: span 4;
}
.support-container .content-box.documentation-block .inputset {
margin-bottom: 1rem;
width: 70%;
}
.support-container .support-training {
background-image: url('/Resources/Images/Support/bg-training.jpg');
background-size: cover;
background-position: 100% 70%;
}
/**
* These are the styles for our shadow-cards, formerly known as knowledge-base
*
* @author Tycho Atsma
* @author Thijs van Diessen
* @file shadow-cards.less
*/
.shadow-cards {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
@supports (display: grid) {
.shadow-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-gap: 1rem;
}
.shadow-cards section:first-child {
grid-row: 1/3;
}
.shadow-cards section:first-child img {
height: 80%;
min-height: 20rem;
}
.shadow-cards section:first-child h3 {
padding-top: 0.5rem;
font-size: 1.7em;
}
.shadow-cards section.small-section {
grid-row: 1/1;
}
.shadow-cards .subscribeNewsletter {
grid-row: 3/3;
grid-column-start: 1;
grid-column-end: -1;
}
}
.shadow-cards > section {
display: flex;
flex-direction: column;
align-content: flex-start;
flex-basis: 30%;
overflow: hidden;
}
@media screen and (max-width: 880px) {
.shadow-cards > section {
flex-basis: 100%;
}
}
@supports (display: grid) {
.shadow-cards > section {
box-shadow: 1px 1px 2px 1px #EBEDED;
}
}
.shadow-cards > section h1 a,
.shadow-cards > section h2 a,
.shadow-cards > section h3 a {
color: #25282A;
}
.shadow-cards > section img {
min-width: 100%;
object-fit: cover;
object-position: 50% 10%;
max-height: 7rem;
min-height: 7rem;
background-color: #79b2c3;
}
.shadow-cards .section-content {
padding: 0 1rem;
}
.shadow-cards footer {
padding: 0 1rem;
margin-top: auto;
}
/*
* @file Documentation-nav.less
*
* Styles for the documentation navigation
*/
.documentation-nav ul {
list-style: none;
padding-left: 0;
font-weight: 300;
}
.documentation-nav ul > li > ul > li {
margin-left: 2rem;
}
.documentation-nav li {
position: relative;
}
.documentation-nav li > span {
position: absolute;
cursor: pointer;
}
.documentation-nav li > span::before {
content: "\229E";
font-family: FontAwesome;
margin-right: 0.5rem;
}
.documentation-nav li.expanded > span::before {
content: "\229F";
}
.documentation-nav li.expanded > ul {
display: block;
}
.documentation-nav li.last-level > span::before {
content: "\25CB";
cursor: default;
}
.documentation-nav li > ul {
display: none;
}
.documentation-nav > ul > li > a {
font-weight: 400;
}
.documentation-nav li > a.active {
color: #fff;
font-weight: 400;
background-color: #007AC4;
}
.documentation-nav a {
color: #25282A;
font-size: 1rem;
line-height: 1.5rem;
display: block;
margin-left: 1.5rem;
padding: 0.1rem 0.25rem;
}
.documentation-nav a:hover {
background: #007AC4;
color: white;
text-decoration: none;
font-weight: 400;
cursor: pointer;
}
.documentation-nav select {
display: none;
width: 100%;
margin: 1rem 0;
}
@media screen and (max-width: 880px) {
.documentation-nav ul {
display: none;
}
.documentation-nav select {
display: block;
}
}
/*
* Post.less
*
*/
.post-container {
padding: 3rem 0;
margin: 0 auto;
}
@media (min-width: 53rem) {
.post-container {
max-width: 50rem;
}
}
.post-container article div p img {
width: 100%;
}
.post-container article div p:has(img) {
color: #B1B7BA;
}
/*
* AuthorProfile.less
*
*/
.author-profile .profile-header {
background: url("/Resources/Images/Hero/IJ_header.jpg");
background-repeat: no-repeat;
background-position: 10% bottom;
background-size: cover;
margin-bottom: 6rem;
padding-top: 4rem;
}
.author-profile .profile-header .profile-image {
float: left;
position: relative;
top: 2rem;
width: 8rem;
height: 8rem;
overflow: hidden;
background-color: white;
border: 0.5rem solid white;
}
.author-profile .profile-header .profile-image img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 1224px) {
.author-profile .more-articles-container {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 1rem;
}
}
.author-profile .more-articles-container article {
max-width: 40rem;
padding: 2rem 0;
border-bottom: 1px solid #f1f1f1;
}
.author-profile .more-articles-container article p {
padding: 0;
}
.author-profile .more-articles-container article:last-child {
border: none;
padding-bottom: 5rem;
}
/*
* @file TermsConditions.less
*
* Styles for the block that contains terms and conditions
*/
.terms_conditions {
height: 10rem;
overflow: auto;
margin-bottom: 1rem;
border: 1px solid #F5F6F6;
padding: 1rem;
}
.terms_conditions p {
padding-bottom: 0rem;
}
.terms_conditions h3 {
padding-top: 1.5rem;
padding-bottom: 0.3rem;
}
.terms_conditions dd {
margin-bottom: 0.15rem;
}
.terms_conditions dd em {
margin-bottom: 0rem;
}
.terms_conditions.big {
height: 30rem;
}
/**
* Styles for the page that contain our terms and conditions
*/
.terms-of-service header {
margin-bottom: 1rem;
}
.terms-of-service .title {
margin-bottom: 0;
}
.terms-of-service ul {
padding: 0;
margin: 0;
list-style: none;
}
.terms-of-service ul li {
margin: 2rem 0;
}
.terms-of-service ul li a {
background-color: cornflowerblue;
color: white;
border-radius: 20rem;
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.terms-of-service ul li a:hover {
text-decoration: none;
opacity: 0.9;
}
.terms-of-service ul li a .fa {
margin-left: 0;
margin-right: 0.5rem;
}
.terms-of-service ul li small {
margin-left: 1rem;
}
.terms-of-service ul li small .fa {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1rem;
color: cornflowerblue;
}
.terms-of-service ul li small .fa:hover + .changelog {
display: inline-block;
}
.terms-of-service ul li small .changelog {
font-style: italic;
display: none;
margin: 0;
}
/*
* Pricing.less
*
* Pricing page
*
*/
.pricing-page section {
padding: 4rem 0;
}
.pricing-page section.colored {
background-color: #F5F6F6;
}
.pricing-page section .intro-text {
margin-bottom: 4rem;
padding: 0 4rem;
}
.pricing-page section .content-box .widget_tooltip.fa {
color: #D8DBDC;
}
.pricing-page section .content-box.special .widget_tooltip.fa {
color: #007AC4;
}
.pricing-page section .column.size-2 {
flex-basis: 48.8%;
}
@media screen and (max-width: 880px) {
.pricing-page section .column.size-2 {
flex-basis: 100%;
}
}
.pricing-page section.main-pricing {
padding-bottom: 2rem;
}
.pricing-page section.main-pricing .pricing-table {
flex-basis: 47%;
}
.pricing-page section.main-pricing .pricing-table table td:first-child {
width: 60%;
}
.pricing-page section.main-pricing .pricing-table table td:last-child {
text-align: center;
}
@media screen and (max-width: 880px) {
.pricing-page section.main-pricing .pricing-table {
flex-basis: 100%;
}
}
.pricing-page section.main-pricing .fa.fa-check {
color: #25A149;
}
.pricing-page table.two-columns td,
.pricing-page table.two-columns th {
width: 50%;
}
.pricing-page table.two-columns td:first-child,
.pricing-page table.two-columns th:first-child {
text-align: right;
}
.pricing-page table th {
cursor: inherit;
}
.pricing-page table .tooltip-cell {
width: 32px;
}
.pricing-page .pricing-customers {
background-color: #EBEDED;
text-align: center;
}
.pricing-page .pricing-customers h2 {
padding: 0 4rem;
}
.pricing-page .pricing-customers img {
width: 100%;
max-width: 70rem;
}
/**
* These are the styles for an integration page
* @file Integration.less
*/
.integration-page {
background-color: #f5f6f6;
}
.integration-page .inner-content-container {
margin-bottom: 0;
}
.integration-page .inner-content-container .content-box {
margin-bottom: 4rem;
}
@media screen and (max-width: 1024px) {
.integration-page .inner-content-container .content-box {
margin-bottom: 2rem;
}
}
.integration-page .inner-sidebar .contact-form .form-field button {
width: 100%;
}
.integration-page .inner-sidebar .contact-form textarea {
resize: vertical;
}
/*
* Styles of the page, which contains types and logos of integrations
*
* Integrations.less
*/
.integrations-page {
background-color: #F5F6F6;
}
.integrations-page header {
background: radial-gradient(at bottom, #007AC4 0%, #00426A 100%);
text-align: center;
color: #ffffff;
}
.integrations-page ul {
list-style: none;
padding: 0;
margin: 0;
}
.integrations-page .column-sidebar {
flex-basis: 30%;
}
.integrations-page .column-content {
flex-basis: 68%;
}
@media screen and (max-width: 880px) {
.integrations-page .column-sidebar,
.integrations-page .column-content {
flex-basis: 100%;
}
}
.integrations-page .integrations-container {
padding: 4rem 0;
}
.integrations-page .integrations-menu {
background: #EBEDED;
padding: 3rem;
border-radius: 1rem;
position: sticky;
top: 25px;
}
.integrations-page .integrations-menu li {
margin-bottom: 12px;
}
.integrations-page .integrations-menu a {
display: block;
color: #25282A;
}
.integrations-page .integrations-menu a:hover {
text-decoration: none;
color: #007AC4;
}
.integrations-page .integrations-logos-container {
margin-bottom: 4rem;
}
.integrations-page .integrations-logos-container:last-child {
margin-bottom: 0;
}
.integrations-page .integrations-logos-container h2 {
margin-bottom: 0;
}
.integrations-page .integrations-logos-container ul {
margin-top: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
@supports (display: grid) {
.integrations-page .integrations-logos-container ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-rows: auto;
grid-gap: 1rem;
}
@media screen and (max-width: 32em) {
.integrations-page .integrations-logos-container ul {
width: 100%;
}
}
.integrations-page .integrations-logos-container ul a {
display: block;
background-color: #ffffff;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s linear;
padding: 1.3rem;
max-width: 100%;
height: 5.5rem;
}
.integrations-page .integrations-logos-container ul a img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
}
.integrations-page .integrations-logos-container ul a svg {
height: 60px;
}
.integrations-page .integrations-logos-container ul a:hover {
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
}
}
.integrations-page .integrations-cta {
background-color: #EBEDED;
padding: 4rem 0 2rem;
}
.integrations-page .integrations-cta .cta-integration {
flex-basis: 30%;
}
@media screen and (max-width: 880px) {
.integrations-page .integrations-cta .cta-integration {
flex-basis: 100%;
}
}
.integrations-page .integrations-cta .cta-demo {
flex-basis: 68%;
}
@media screen and (max-width: 880px) {
.integrations-page .integrations-cta .cta-demo {
flex-basis: 100%;
}
}
.integrations-page .integrations-cta .cta-demo .button.cta {
padding: 0.75rem 2rem;
color: #25282A;
}
/*
* @file MapRoute.less
*
* Styles for the map container
*
*/
#map-route #map.scrolloff {
pointer-events: none;
}
/*
* Styles for icons that we use as links to the social media platforms
*
* SocialIcons.less
*/
.social-icons {
margin: 1rem 0;
}
.social-icons a {
font-size: 1.8rem;
margin-right: 0.5rem;
transition: all 0.2s ease-in-out;
}
.social-icons a.fa-github {
color: #333333;
}
.social-icons a.fa-facebook {
color: #3B5998;
}
.social-icons a.fa-twitter {
color: #00ACEE;
}
.social-icons a.fa-google {
color: #DB4437;
}
.social-icons a.fa-linkedin {
color: #0E76A8;
}
.social-icons a.fa-rss {
color: #F26522;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover {
transform: scale(1.1);
}
/*
* @file Rating.less
*
*/
.rating {
position: relative;
display: inline-block;
}
.rating .rating-values {
position: absolute;
top: 0;
left: 0;
}
.rating .rating-values,
.rating .rating-background {
word-spacing: 0;
}
.rating .rating-values .rating-star::before,
.rating .rating-background .rating-star::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2223%22%20viewBox%3D%220%200%2024%2023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12%201.76587L15.09%208.01587L22%209.02587L17%2013.8959L18.18%2020.7659L12%2017.5159L5.82%2020.7659L7%2013.8959L2%209.02587L8.91%208.01587L12%201.76587Z%22%20stroke%3D%22%23FFC600%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 0 0;
display: inline-block;
width: 1em;
height: 1em;
content: '';
margin-right: 4px;
padding-right: 0.1em;
}
.rating .rating-values .rating-star::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%200.765869L13.09%207.01587L20%208.02587L15%2012.8959L16.18%2019.7659L10%2016.5159L3.82%2019.7659L5%2012.8959L0%208.02587L6.91%207.01587L10%200.765869Z%22%20fill%3D%22%23FFC600%22%2F%3E%0A%3C%2Fsvg%3E%0A");
opacity: 0;
transition: opacity 0.5s;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(6)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(7)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(8)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(9)::before {
opacity: 1;
}
.rating[data-rate="10"] .rating-values .rating-star:nth-child(10)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(6)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(7)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(8)::before {
opacity: 1;
}
.rating[data-rate="9"] .rating-values .rating-star:nth-child(9)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(6)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(7)::before {
opacity: 1;
}
.rating[data-rate="8"] .rating-values .rating-star:nth-child(8)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(6)::before {
opacity: 1;
}
.rating[data-rate="7"] .rating-values .rating-star:nth-child(7)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="6"] .rating-values .rating-star:nth-child(6)::before {
opacity: 1;
}
.rating[data-rate="5"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="5"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="5"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="5"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="5"] .rating-values .rating-star:nth-child(5)::before {
opacity: 1;
}
.rating[data-rate="4"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="4"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="4"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="4"] .rating-values .rating-star:nth-child(4)::before {
opacity: 1;
}
.rating[data-rate="3"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="3"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="3"] .rating-values .rating-star:nth-child(3)::before {
opacity: 1;
}
.rating[data-rate="2"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
.rating[data-rate="2"] .rating-values .rating-star:nth-child(2)::before {
opacity: 1;
}
.rating[data-rate="1"] .rating-values .rating-star:nth-child(1)::before {
opacity: 1;
}
/*
* Special styles for the page where we show the search results
* Changes to fonts,colors and spacings to look more like google search results
*
* @file SearchResults.less
*/
.search-results .inner-introduction {
padding: 5rem 0 1rem 0;
}
.search-results .inner-introduction .inputset {
max-width: 500px;
}
.search-results .search-result-item {
margin: 1rem 0;
padding: 0.5rem 0;
border-bottom: 1px solid #efefef;
}
.search-results .search-result-item h2 {
margin-bottom: 0;
padding-bottom: 0;
}
.search-results .search-result-item p {
margin-top: 0.25rem;
}
/**
* Styles for login, register and forgot password forms
*
* @file Login.less
* @author Paweł Kuźnik
*/
@keyframes loginerror-show {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.login {
position: relative;
max-height: 100vh;
max-width: 30rem;
}
.login .login-error {
padding: 0.7rem;
margin-bottom: 1rem;
border-top: 2px solid #003b5e;
border-radius: 3px;
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.4);
background: #007AC4;
animation-name: loginerror-show;
animation-duration: 400ms;
animation-iteration-count: 1;
color: #fff;
font-weight: bold;
}
.login .login-error::before {
content: '\f071';
font-family: FontAwesome;
margin-right: 0.5rem;
}
.login .login-error:empty {
display: none;
}
.login .login-content form .forgot-password {
font-size: 0.875rem;
}
.login .login-alternativeaction {
margin-top: 2rem;
text-align: center;
}
/**
* These are the styles for the profile menu
*
* @author Tycho Atsma
* @file profilemenu.less
*/
/**
* The data part container
*/
[data-part="UserMenu"] img.profile-avatar {
cursor: pointer;
}
/**
* The modal window
*/
.profile-menu .profile-header img {
border-radius: 999rem;
border: 0.2rem solid #EBEDED;
width: 8rem;
height: 8rem;
background-color: white;
}
.profile-menu .profile-menu,
.profile-menu .profile-information,
.profile-menu .profile-actions,
.profile-menu .product-information {
margin-bottom: 2rem;
}
@media screen and (max-width: 880px) {
.profile-menu .profile-header img {
left: calc(50vw - 3rem);
}
}
/*
* Thumbnail.less
*/
.thumbnail {
max-width: 100%;
box-sizing: border-box;
object-fit: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 100%;
}
.thumbnail.x-small {
min-width: 3rem;
max-width: 3rem;
height: 3rem;
}
.thumbnail.small {
min-width: 4rem;
max-width: 4rem;
height: 4rem;
}
.thumbnail.medium {
min-width: 6rem;
max-width: 6rem;
height: 6rem;
}
.thumbnail.large {
min-width: 8rem;
max-width: 8rem;
height: 8rem;
}
@media screen and (max-width: 880px) {
.thumbnail.large {
min-width: 6rem;
max-width: 6rem;
height: 6rem;
}
}
/*
* Mask.less
*
*/
.mask {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
}
/*
* Article's keywords, style them to look like tags
* they're the reason why the article is related with other articles
* KeywordTag.less
*
*/
.keyword-tag {
padding-bottom: 1rem;
}
.keyword-tag span {
background: #04a0ff;
color: #fff;
padding: 0.2rem 0.5rem;
border-radius: 3px;
}
/*
* Icontitle.less
* Special class for a title container.
* This class can be used when we want to use an icon/image before a title.
*
* Example:
*
* @copyrights Copernica BV 2019
*/
/**
* Main wrapper for the calendar.
*/
.ms-calendar {
/**
* Month
* This container contains information about a single month and navigation
* elements.
*/
}
.ms-calendar .ms-calendar-month {
/**
* Header
*/
/**
* Days grid
* Styling for the grid in which the days are displayed.
* It depends on the width how many times we want to repeat
*/
/**
* Days grid
* Styling for the grid in which the days are displayed.
*/
}
.ms-calendar .ms-calendar-month > header {
display: grid;
grid-template-columns: 1fr repeat(2, min-content);
align-items: center;
}
.ms-calendar .ms-calendar-month > header h3 {
margin: 0;
text-transform: capitalize;
}
.ms-calendar .ms-calendar-month > header button {
background-color: transparent;
color: #25282A;
font-size: 12px;
}
.ms-calendar .ms-calendar-month > header button.disabled {
color: #B1B7BA;
}
.ms-calendar .ms-calendar-month > div[width="5"] {
grid-template-columns: repeat(5, 1fr);
}
.ms-calendar .ms-calendar-month > div[width="7"] {
grid-template-columns: repeat(7, 1fr);
}
.ms-calendar .ms-calendar-month > div {
display: grid;
grid-gap: 12px;
max-width: 100%;
grid-template-rows: auto;
grid-auto-rows: 1fr;
justify-items: center;
align-items: center;
margin-top: 1rem;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-weekday {
text-transform: capitalize;
color: #B1B7BA;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day {
text-align: center;
cursor: default;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.ms-calendar-month-day-clickable {
cursor: pointer;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day span {
line-height: 2.5;
display: block;
width: 2.5em;
height: 2.5em;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.today span {
font-weight: bold;
position: relative;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.today span::after {
content: '\002E';
position: absolute;
bottom: -0.65em;
right: 0.65em;
font-size: 32px;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.marked {
background-color: #D7F0FF;
border-radius: 6px;
overflow: hidden;
transition: all ease;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.marked:hover {
background: #00426A;
color: #fff;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.selected {
background: #00426A;
color: #fff;
}
.ms-calendar .ms-calendar-month > div .ms-calendar-month-day.disabled span {
cursor: not-allowed;
}
/**
* Widget style definitions
*/
.widget_markdowneditor {
width: 96%;
/**
* for conversions sake terms and conditions are now packed
* within overflowing div
*/
}
.widget_markdowneditor div.preview {
width: 100%;
overflow: auto;
height: 500px;
border: 1px solid #F5F5F5;
padding: 5px 6px;
color: #595959;
display: none;
}
.widget_markdowneditor textarea {
height: 500px !important;
width: 100% !important;
}
.widget_markdowneditor span {
float: right;
}
.widget_markdowneditor label {
float: left;
}
/**
* Styles for the widget datefield.
* It consists of an input that we can choose the date and the time and a button.
*
* How to use it - an example:
*
* {datefield name="activefrom" type="datetime" label="{text}Active from{/text}" placeholder="{text}Active from...{/text}"}
*
* @file datefield.less
*/
div[data-widget='datefield'] .input-wrapper {
border-radius: 0.2rem;
border: 1px solid #dadede;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
}
div[data-widget='datefield'] .input-wrapper:focus::placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
div[data-widget='datefield'] .input-wrapper:focus {
border: 1px solid #b2baba;
outline: none;
}
div[data-widget='datefield'] .input-wrapper.small {
max-width: 5rem;
min-width: 4rem;
}
div[data-widget='datefield'] .input-wrapper.medium {
max-width: 10rem;
min-width: 7rem;
}
div[data-widget='datefield'] .input-wrapper.large {
max-width: 17rem;
min-width: 12rem;
}
@media screen and (max-width: 880px) {
div[data-widget='datefield'] .input-wrapper.small,
div[data-widget='datefield'] .input-wrapper.medium,
div[data-widget='datefield'] .input-wrapper.large {
max-width: 100%;
}
}
div[data-widget='datefield'] .input-wrapper.full-width {
width: 100%;
}
div[data-widget='datefield'] .input-wrapper.block {
display: block;
width: 100%;
}
div[data-widget='datefield'] .input-wrapper.block {
display: flex;
}
div[data-widget='datefield'] .input-wrapper > * {
padding: 0.5rem;
font-size: 1rem;
}
div[data-widget='datefield'] .input-wrapper .input,
div[data-widget='datefield'] .input-wrapper input {
border: none;
border-radius: 0;
flex-basis: 0;
flex-grow: 9;
flex-shrink: 1;
overflow: unset;
}
div[data-widget='datefield'] .input-wrapper button {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
border: none;
border-radius: 0;
overflow: unset;
}
div[data-widget='datefield'] .input-wrapper > input:not([type="checkbox"]):not([type="radio"]) {
font-size: 0.9rem;
margin-top: 0;
}
div[data-widget='datefield'] .input-wrapper > button {
padding: 0;
}
div[data-widget='datefield'] .input-wrapper .fa-calendar::before {
font-size: 0.8rem;
margin-top: -0.2rem;
display: block;
}
.widget_edittariff .tariff {
cursor: pointer;
}
.widget_edittariff .tariff td.inline-control {
width: auto;
}
.widget_edittariff tfoot div.error {
max-width: 60%;
display: none;
}
.widget_edittariff tfoot span.force-decend {
float: right;
}
/*
* Styles for formstep widget
* @file FormStep.less
*/
/**
* This class is used mainly in wizard-like forms.
* Initially we want to hide the widget
*/
.widget_formstep:not(.visible) {
display: none;
}
/**
* General styles for the copernica dashboard.
*
* @file Dashboard.less
*/
.dashboard {
background: #EBEDED;
padding: 4rem 0 1rem 0;
}
@media screen and (max-width: 880px) {
.dashboard {
padding: 0;
}
}
.dashboard > .container {
width: 100%;
}
/*
* The sidebar of the dashboard contains a header and a menu
*
* @file DashboardSidebar.less
*/
.dashboard .container-sidebar {
/**
* The dashboard links
*/
}
.dashboard .container-sidebar .sidebar-header .background-overlay {
background: rgba(0, 0, 0, 0.6);
position: relative;
text-align: center;
}
.dashboard .container-sidebar .sidebar-header .background-overlay .profile-image-container {
display: inline-block;
padding: 1rem;
}
.dashboard .container-sidebar form {
margin: 0.5rem 0;
}
.dashboard .container-sidebar form input {
box-sizing: border-box;
}
.dashboard .container-sidebar .dashboard-buttons .button {
background: #ffffff;
color: #25282A;
border-radius: 0;
font-size: 0.875rem;
width: 100%;
margin-top: 0.25rem;
padding: 0.5rem 1rem;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.dashboard .container-sidebar .dashboard-buttons .button img {
width: 1rem;
margin-right: 1rem;
}
.dashboard .container-sidebar .dashboard-buttons .button .fa {
margin-left: auto;
}
.dashboard .container-sidebar .dashboard-buttons .button:hover {
background: #D8DBDC;
color: #fff;
}
.dashboard .container-sidebar .dashboard-buttons .button:hover img {
filter: brightness(1);
}
.dashboard .container-sidebar .dashboard-buttons.copernica-button {
padding: 0.5rem;
margin-right: 0.5rem;
font-size: 0.8rem;
font-weight: bold;
background-color: blue;
color: #5c5c5c;
}
.dashboard .container-sidebar .dashboard-buttons.copernica-button:hover {
background-color: #34383B;
}
.dashboard .container-sidebar .dashboard-buttons.copernica-button img {
height: 1rem;
width: 1rem;
margin-right: 0.5rem;
}
/*
* Styles for tables that are being used in the dashboard
*
* DashboardTable.less
*/
.dashboard-table {
max-width: 100%;
}
.dashboard-table td:first-child {
max-width: 20rem;
width: 20%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@media screen and (min-width: 1024px) and (max-width: 1224px) {
.dashboard-table td:first-child {
max-width: 10rem;
}
}
@media screen and (min-width: 55em) and (max-width: 1024px) {
.dashboard-table td:first-child {
max-width: 7rem;
}
}
@media screen and (max-width: 880px) {
.dashboard-table td:first-child {
max-width: 3rem;
}
}
/**
* These are the styles for the dashboard navigation menu.
*
* @author Tycho Atsma
* @file dashboard-menu.less
* @documentation public
*/
/**
* Styles for a menu link
*/
/**
* The dashboard toggle button for mobile
*/
.dashboard-menu-toggle {
width: 100%;
display: none;
border-radius: 0;
}
@media screen and (max-width: 880px) {
.dashboard-menu-toggle {
display: block;
}
.dashboard-menu-toggle[aria-expanded="false"] + .dashboard-menu {
display: none;
}
.dashboard-menu-toggle[aria-expanded="true"] + .dashboard-menu {
display: block;
}
}
/**
* The dashboard menu
*/
.dashboard-menu {
background-color: white;
border: 1px solid #B1B7BA;
margin-top: 0.5rem;
/**
* The menu links
*/
/**
* The dropdown links
*/
}
.dashboard-menu > a,
.dashboard-menu .accordion a {
display: block;
padding: 0.5rem 1rem;
color: #25282A;
text-decoration: none;
transition: color 0.3s ease;
border-bottom: 1px dashed #F5F6F6;
/**
* The log out link should be a little different
*/
}
.dashboard-menu > a:hover,
.dashboard-menu .accordion a:hover {
color: #007AC4;
}
.dashboard-menu > a i.fa,
.dashboard-menu .accordion a i.fa {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
}
.dashboard-menu > a.logout-link,
.dashboard-menu .accordion a.logout-link {
color: #007AC4;
border-top: 1px solid #007AC4;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.dashboard-menu > .accordion {
/**
* The dropdown label
*/
/**
* The dropdown links
*/
}
.dashboard-menu > .accordion *[data-accordionpart="title"] {
display: block;
padding: 0.5rem 1rem;
color: #25282A;
text-decoration: none;
transition: color 0.3s ease;
border-bottom: 1px dashed #F5F6F6;
}
.dashboard-menu > .accordion *[data-accordionpart="title"]:hover {
color: #007AC4;
}
.dashboard-menu > .accordion a {
display: block;
padding: 0.5rem 1rem;
color: #25282A;
text-decoration: none;
transition: color 0.3s ease;
color: #8e8e8e;
border-bottom: 1px dashed #F5F6F6;
}
.dashboard-menu > .accordion a:hover {
color: #007AC4;
}
@media screen and (max-width: 880px) {
.dashboard-menu {
width: 100%;
}
}
/**
* Here you can find useful classes that are being used
* for the structure of the dashboard content.
*
* A title: Every page has a h1 title, which is wrapped in a container:
*
* @file dashboard-tabs.less
*/
.dashboard-tabs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3rem;
display: flex;
}
.dashboard-tabs + * {
margin-top: 3rem;
}
.dashboard-tabs .button-tab {
height: 3rem;
flex: 1 1 50%;
box-sizing: border-box;
}
.dashboard-tabs .button-tab:hover {
background-color: #EBEDED;
color: #5c5c5c;
filter: initial;
}
/**
* These are the styles for partner management tool
*
* @author Tycho Atsma
* @file partnermanagement.less
*/
.dashboard .container-content [data-part="PartnerManagement"] {
padding: 0;
}
.dashboard .container-content [data-part="PartnerManagement"] .button-tab {
border-radius: 0;
}
.dashboard .container-content [data-part="PartnerManagement"] .button-tab[data-active="true"] {
background-color: white;
font-weight: bold;
}
.dashboard .container-content [data-part="PartnerManagement"] .button-tab:not([data-active="true"]) {
color: #bdbdbd;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners {
margin-top: 3rem;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners .form-field {
padding: 1rem;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners:not([data-tab="health"]) .form-field {
display: none;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners > button {
margin: 1rem;
margin-top: 0;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners p {
padding: 1rem;
display: none;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners p.active {
display: block;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners table {
table-layout: fixed;
margin: 0;
}
.dashboard .container-content [data-part="PartnerManagement"] #partners table td,
.dashboard .container-content [data-part="PartnerManagement"] #partners table th {
line-height: 2.5;
padding: 0.25rem 0.75rem;
border: 1px solid #EBEDED;
}
/**
* Styles for the view-gdpr-agreement page in the company dashboard.
* In this page an iframe is used to preview the agreement someone has signed.
*
* @author Thomas Kamps
* @file ViewGDPRAgreement.less
* @copyright 2018 Copernica BV
*/
/**
* The styles
*/
.view-gdpr-agreement > iframe {
width: 100%;
height: 1000px;
margin-top: 20px;
}
/**
* These are the styles for training blocks.
*
* @author Tycho Atsma
* @file training-block.less
*/
.dashboard .container-content .training-block {
padding: 0;
border: none;
}
.dashboard .container-content .training-block td,
.dashboard .container-content .training-block th {
padding: 0.5rem 1rem;
line-height: 2.5;
}
.dashboard .container-content .training-block th {
padding: 0.25rem 1rem;
}
.dashboard .container-content .training-block th:hover {
background-color: initial;
cursor: initial;
}
.dashboard .container-content .training-block .button {
padding: 0.5rem;
width: 100%;
}
/**
* These are the styles for the trial accounts page / dashboard component
*
* @author Tycho Atsma
* @fil trials.less
*/
.ms-dashboard-trials form,
.ms-dashboard-trials form > div {
display: inline-block;
margin-right: 1rem;
}
.ms-dashboard-trials form label {
display: block;
}
.ms-dashboard-trials form input,
.ms-dashboard-trials form select {
padding: 0.5rem;
}
/**
* These are the styles for partner commissions
*
* @author Tycho Atsma
* @file partnercommissions.less
*/
.partner-commissions .chart {
margin-bottom: 1rem;
border: 1px solid #efefef;
}
.partner-commissions header {
display: flex;
flex-flow: row wrap;
margin-bottom: 1rem;
}
.partner-commissions header .filters {
margin-right: 1rem;
}
.partner-commissions header .filters .fa {
margin-right: 0.5rem;
}
.partner-commissions header .table-info {
background-color: #fdfdfd;
padding: 1rem;
margin-top: 1rem;
}
.partner-commissions header .table-info[data-open="true"] {
display: block;
}
.partner-commissions header .table-info[data-open="false"] {
display: none;
}
.partner-commissions .commissions-table td {
min-width: 100px;
max-width: 100px;
}
.partner-commissions .commissions-table td:first-child {
min-width: 50px;
max-width: 50px;
}
/**
* These are the styles for the chart helper
*
* @author Tycho Atsma
* @file charthelper.less
*/
.chart .line {
stroke: #00426A;
fill: none;
}
.chart .bar {
fill: #00426A;
}
.chart .data-point {
fill: #00426A;
cursor: pointer;
}
.chart .data-point.highlighted {
fill: #C8102E;
r: 5;
}
.chart .chart-tooltip {
text-anchor: middle;
}
.chart .chart-tooltip rect {
fill: white;
stroke: #efefef;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}
.chart .chart-tooltip text {
font-weight: lighter;
font-size: 14px;
}
.chart .grid path.domain {
stroke: #f9f9f9;
}
.chart .grid .tick line {
stroke: #f9f9f9;
}
/**
* These are styles that can be applied on a chart.
*
* @author Paweł Kuźnik
*/
.chart .bar-color-1 {
fill: #79bd9a;
}
.chart .bar-color-2 {
fill: #f54b06;
}
.chart .bar-color-3 {
fill: #4f86a0;
}
.dashboard .container-content .dashboard-content .dashboard-block.chart {
padding: 0;
}
/**
* These are the styles for the google captcha badge.
*
* @author Tycho Atsma
* @file Resources/Style/Widgets/recaptcha.less
*/
.grecaptcha-badge {
opacity: 0;
}
/**
* These are the styles for the white paper pages.
*
* @file WhitePapers.less
*/
.white-paper-page .wp-content {
background: url('/Resources/Images/WhitePaper/wood-texture.jpg');
background-size: cover;
background-position: bottom;
padding-top: 64px;
}
@media screen and (max-width: 1024px) {
.white-paper-page .wp-content .image-container {
grid-row: 2;
}
}
.white-paper-page .wp-content .image-container img {
display: block;
}
/**
* Styles for the pages that are being used to display surveys.
*
* @file Resources/Style/Pages/SurveyPage.less
* @copyright Copernica BV 2020
*/
/**
* Root class.
*/
.survey-page .survey-page-hero {
background-image: url("/Resources/Images/Hero/pattern.png");
}
/* Homepage.less - Specific styles for the homepage */
.homepage .hero-container {
padding-top: 58px;
padding-bottom: 96px;
min-height: 40vh;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 880px) {
.homepage .hero-container {
padding-top: 35.2px;
padding-bottom: 35.2px;
}
}
@media (min-width: 1600px) {
.homepage .hero-container {
min-height: 50vh;
}
}
.homepage .hero-container h1 {
font-size: 3.015rem;
line-height: 4.95rem;
font-weight: 800;
margin-bottom: 1.5rem;
}
@media screen and (max-width: 880px) {
.homepage .hero-container h1 {
font-size: 1.7875rem;
line-height: 2rem;
}
}
.homepage .hero-container p {
font-size: 2rem;
line-height: 2.475rem;
max-width: 35rem;
margin: 0 auto;
}
@media screen and (max-width: 880px) {
.homepage .hero-container p {
font-size: 1.375rem;
max-width: 24rem;
line-height: 2rem;
max-width: 22rem;
padding-top: 0.4rem;
padding-bottom: 0.7rem;
}
}
.homepage .hero-container .gradient {
background: linear-gradient(45deg, #fff47e, #fcca15, #ebb800, #ffc600);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
user-select: text;
/* Ensures the text is selectable */
}
.homepage .hero-container .gradient.name-with-comma::after {
content: ",";
background: none;
/* remove gradient */
color: white;
user-select: text;
}
.homepage .hero-container .gradient::selection {
background: rgba(0, 0, 0, 0.27);
/* Subtle selection highlight */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.homepage .hero-container .button {
font-size: large;
}
.homepage .hero-container .spacinghero {
margin-bottom: 3.5rem;
}
.homepage .news-container {
display: flex;
justify-content: center;
align-items: center;
padding-top: 2em;
}
.homepage .news-list {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
color: black;
gap: 1.2rem;
align-content: center;
padding-top: 10px;
padding-bottom: 5px;
background-color: white;
box-shadow: 0 1px 4px rgba(231, 231, 231, 0.568);
/* subtle shadow */
border-radius: 25px;
padding-right: 2rem;
padding-left: 1.5rem;
}
@media screen and (max-width: 880px) {
.homepage .news-list {
gap: 0rem;
padding-top: 0.4rem;
flex-direction: column;
padding-bottom: 0.4rem;
}
.homepage .news-list li,
.homepage .news-list li p {
margin: 0;
padding: 0;
line-height: 1.8;
}
}
.homepage .news-list p {
margin: 0;
padding: 0;
line-height: 1.2;
font-size: medium;
}
@media screen and (max-width: 880px) {
.homepage .news-list p {
font-size: small;
line-height: 2rem;
}
}
.homepage .news-list a {
text-decoration: none;
color: inherit;
}
.homepage .news-container a,
.homepage .news-container a p {
text-decoration: none;
color: inherit;
}
.homepage .news-container a::selection,
.homepage .news-container a *::selection {
background: transparent;
color: inherit;
}
@media screen and (max-width: 880px) {
.homepage .news-list img {
width: 2.4rem;
display: none;
}
}
.homepage .solutions {
font-size: 1rem;
font-weight: 500;
padding-bottom: 1em;
}
.homepage .section h2 {
font-weight: 700;
font-size: 30px;
}
.homepage .partnerlogos .logos-container img {
max-height: 85px;
width: 100%;
min-width: 12rem;
}
@media screen and (max-width: 880px) {
.homepage .partnerlogos .logos-container img {
max-height: 57px;
}
}
.homepage .email-register {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2em;
}
.homepage .email-register p {
color: #ff3e30;
text-align: center;
font-size: 1.05em;
margin-top: 0.2em;
font-style: normal;
}
@media screen and (max-width: 880px) {
.homepage .email-register p {
font-size: 0.9em;
}
}
.homepage .email-register .email-input {
display: inherit;
width: 100%;
display: flex;
justify-content: center;
}
.homepage .email-register .email-input input {
width: 35vh;
max-width: 23em;
padding: 0.4em;
padding-left: 1em;
font-size: 1.2em;
border-radius: 1em 0 0 1em;
border: none;
align-items: center;
height: 2.1em;
line-height: 3em;
background-color: #004a79;
color: white;
}
@media screen and (max-width: 880px) {
.homepage .email-register .email-input input {
width: 15em;
height: 2.1em;
line-height: 2em;
}
}
.homepage .email-register .email-input input::placeholder {
color: rgba(255, 255, 255, 0.705);
font-style: normal;
font-size: 0.95em;
align-items: center;
}
@media screen and (max-width: 880px) {
.homepage .email-register .email-input input::placeholder {
font-size: 0.8em;
}
}
.homepage .email-register .email-input .button-register {
border-radius: 0 1em 1em 0;
background-color: #004a79;
border: none;
cursor: pointer;
padding: 5px 30px 5px 12px;
height: 39.9px;
display: flex;
align-items: center;
justify-content: center;
}
.homepage .email-register .email-input .button-register .arrow {
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
margin-left: 6px;
}
.homepage .hero-logged-in {
max-height: 5vh;
}
/**
* These are the styles for the cancelpartnership page/
*
* @author Tycho Atsma
* @file cancelpartnership.less
*/
.cancelpartnership section,
.cancelpartnership form {
margin: 1rem 0;
}
.cancelpartnership h3 {
font-weight: bold;
}
.cancelpartnership p {
padding-bottom: 0;
}
.cancelpartnership .current-partner {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.cancelpartnership .current-partner img.logo {
max-width: 100%;
margin-right: 1rem;
}
.cancelpartnership .current-partner p {
padding-bottom: 0;
padding-top: 0.5rem;
}
.cancelpartnership .current-partner p i {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
}
.cancelpartnership textarea {
border: none;
background-color: #B1B7BA;
display: block;
width: 100%;
min-height: 5rem;
}
.cancelpartnership .form-field:last-child {
display: flex;
margin-top: 1rem;
}
/*
* ListInvoices.less
*
*/
.list-invoices-page .invoices-list .invoice-container {
color: #25282A;
transition: all 0.3s ease-in;
}
.list-invoices-page .invoices-list .invoice-container:hover {
text-decoration: none;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
}
.list-invoices-page .invoices-list .invoice-container:hover .url {
text-decoration: underline;
}
.list-invoices-page .invoices-list .invoice-container .invoice {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.list-invoices-page .invoices-list .invoice-container .invoice div.invoice-tags span {
margin: 0 0.5rem;
width: 12rem;
text-align: center;
display: inline-block;
background-color: #F5F6F6;
padding: 12px 16px;
border-radius: 80px;
overflow: hidden;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
.list-invoices-page .invoices-list .invoice-container .invoice span.amount {
width: 12rem;
}
.list-invoices-page .invoices-list .invoice-container .invoice span.url {
color: #007AC4;
display: block;
}
.list-invoices-page .invoice-warning {
text-align: center;
}
/*
* Styles for ShowInvoice page
*
* @file ShowInvoice.less
*/
.show-invoice-page {
/**
* A form field
*
*
* @file highlight.less
*/
.highlight-box {
border: 1px solid #f1f1f1;
background: #fff;
margin-bottom: 1rem;
padding: 1em;
text-align: left;
}
.highlight-box .highlight-box-image {
float: left;
max-width: 4rem;
max-height: 4rem;
}
.highlight-box .highlight-box-image ~ * {
margin-left: 5rem;
}
.highlight-box::after {
content: '';
display: block;
clear: both;
}
.highlight-box.small {
padding: 0.3rem;
border: none;
}
.highlight-box.small p {
margin-bottom: 0;
}
.highlight-box.colored {
background: #f9f9f9;
}
/*
* Products.less
* Specific styles for the product pages
*/
.products-page .box-followup {
background: url(Images/Homepage/followup-bg.jpg);
}
.products-page .section-integrations .content-box {
margin-bottom: 0;
}
/**
* These are the styles for the contact page
*
* @file contact.less
*/
.contact-page .contact-container .content-box {
margin-bottom: 0;
}
.contact-page .contact-details .container {
border-radius: 1rem;
overflow: hidden;
background-color: #fff;
}
.contact-page .contact-details .container ul {
list-style: none;
margin: 0;
padding: 0;
}
.contact-page .contact-details .container ul li {
margin: 0;
padding: 0.5rem 0;
}
.contact-page .contact-details .container .text-container {
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-page .contact-details iframe {
display: block;
width: 100%;
min-height: 800px;
}
/**
* These are the styles for the aboutus page team section
*
* @file team.less
*/
.page-ourteam .team-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
justify-content: space-between;
grid-gap: 32px;
}
.page-ourteam .copernican-container h4 {
margin-bottom: 0;
}
.page-ourteam .copernican-container span {
color: #D8DBDC;
}
.page-ourteam .profile-image img {
border-radius: 1rem;
overflow: hidden;
}
/**
* This quarter's target information e.g.
* Sell 25 licenses with an combined est. value of EUR xxx
*/
.quarter-target {
background-image: url('/Resources/Images/Tools/quarter3-header.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-y: 20%;
width: 100%;
height: 100%;
color: #D8DBDC;
box-sizing: border-box;
padding: 0;
margin-bottom: 8px;
min-height: 300px;
/* The title of the quarter target message */
/* List of targets, e.g. EURO 10.500 from at least 25 licenses */
}
.quarter-target h2 {
font-size: 36px;
margin-bottom: 30px;
}
.quarter-target span {
font-weight: 600;
}
.quarter-target ul {
margin: 0 !important;
padding: 0px;
}
.quarter-target ul li {
display: inline-block;
margin-top: 100px;
padding-left: 30px;
/*padding: 3em 0;*/
text-shadow: 2px 2px 1px #000000;
/*&:last-child
{
padding-left: 20px;
margin-left: 10px;
}*/
/* Target est. value */
/* Target name e.g. licenses or media packs */
}
.quarter-target ul li h3 {
font-size: 30px;
margin: 0;
}
.quarter-target ul li span {
text-transform: uppercase;
}
/**
* Styling for the admin dashboard revenues tools
*
*/
div.admin-revenues div.chart-wrapper {
display: flex;
flex-direction: row;
}
div.admin-revenues div.chart-wrapper div.year-overview {
padding: 20px;
}
div.admin-revenues div.chart-wrapper div.year-overview select {
width: 100%;
}
div.admin-revenues div.chart-wrapper div.year-overview div > * {
margin-bottom: 10px;
}
div.admin-revenues div.chart-wrapper div.donut {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 21px;
}
div.admin-revenues div.chart-wrapper div.donut .information {
text-align: center;
}
div.admin-revenues div.chart-wrapper div.help {
padding-top: 10px;
text-align: right;
color: #0e67bf;
cursor: help;
}
div.admin-revenues div.chart-wrapper div.help i.fa {
color: #0e67bf;
}
div.admin-revenues .widget_chart div#franchiser-revenues-overview-container {
height: 250px !important;
}
div.admin-revenues .widget_chart table.zebra-table .numerical-value {
text-align: right;
}
/**
* @TODO
* This file should be improved/removed.
* It uses an old grid system with float but at the same time also flex..
* That causes an odd behaviour and breaks also the parent layout!!
*
* Styling for contact reports
*/
table[id="reports"] tr[id] td {
padding: 0;
position: relative;
}
table[id="reports"] tr[id] td div.header {
height: 48px;
background: #dddddd;
position: relative;
color: #5d5d5d;
display: flex;
justify-content: space-between;
box-shadow: inset 0px 15px 15px -20px;
border-bottom: 1px solid #c2c2c2;
padding: 0 10px;
}
table[id="reports"] tr[id] td div.header .subject {
align-self: center;
}
table[id="reports"] tr[id] td div.header .button-container {
align-self: center;
}
table[id="reports"] tr[id] td div.header .button-container button {
min-width: 105px;
margin-right: 0.5rem;
}
table[id="reports"] tr[id] td div.header .button-container .button {
min-width: 95px;
}
table[id="reports"] tr[id] td div.contact-details {
overflow: auto;
padding: 0;
}
table[id="reports"] tr[id] td div.contact-details .row-12:nth-child(even) {
background: #e3e3e3;
}
table[id="reports"] tr[id] td div.contact-details .row-12:nth-child(even) .cols-9 {
background: #D8DBDC;
}
table[id="reports"] tr[id] td div.contact-details .row-12:nth-child(odd) {
background: #f1f1f1;
}
table[id="reports"] tr[id] td div.contact-details .row-12:nth-child(odd) .cols-9 {
background: white;
}
table[id="reports"] tr[id] td div.contact-details .row-12 {
position: relative;
z-index: 2;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .textarea {
white-space: normal;
}
table[id="reports"] tr[id] td div.contact-details .row-12 select,
table[id="reports"] tr[id] td div.contact-details .row-12 input {
height: 37px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 select,
table[id="reports"] tr[id] td div.contact-details .row-12 input,
table[id="reports"] tr[id] td div.contact-details .row-12 textarea {
border-radius: 0;
border: 0;
font-size: 16px;
margin: 0;
}
table[id="reports"] tr[id] td div.contact-details .row-12:not(:last-of-type) {
border-bottom: 1px solid #dbdbdb;
}
table[id="reports"] tr[id] td div.contact-details .row-12:last-of-type {
box-shadow: inset 0 -12px 10px -15px;
}
table[id="reports"] tr[id] td div.contact-details .row-12:last-of-type .cols-9 {
box-shadow: inset 0 -12px 10px -15px;
}
table[id="reports"] tr[id] td div.contact-details .row-12:last-of-type .cols-9 textarea {
box-shadow: inset 0 -12px 10px -15px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 > * {
min-height: 37px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .value {
padding: 7px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .edit {
padding: 0;
display: none;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .edit textarea {
font-size: 15px;
line-height: 1.5rem;
width: 100%;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-2 {
padding: 7px 10px;
text-align: right;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-9 {
border-left: 1px solid #c7c7c7;
border-right: 1px solid #c7c7c7;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-9:not(.textarea) {
height: 37px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-9 [data-widget="datefield"] button {
border-radius: 0;
border: 1px solid #07345f;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-1 {
padding: 7px 13px;
text-align: center;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-1 i.fa {
cursor: pointer;
line-height: 23px;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-1 i.fa.fa-pencil {
color: #0e67bf;
}
table[id="reports"] tr[id] td div.contact-details .row-12 .cols-1 i.fa.fa-times {
color: red;
}
table[id="reports"] tr[id] td div.contact-details .row-12 span.empty {
font-style: italic;
}
table[id="reports"] tr[id] td div.contact-details div.button-container {
clear: both;
margin: 1rem 0.5rem;
}
table[id="reports"] pre {
white-space: pre-line;
max-height: 500px;
}
/**
* These are the styles for the notification center
*
* @author Tycho Atsma
* @file notificationcenter.less
*/
.notification-center {
bottom: 0;
right: 0;
}
.notification-center,
.notification-center > .inyourface-container {
position: fixed;
}
.notification-center > .notification {
border-radius: 0.2rem;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
font-weight: 600;
border-radius: 2em;
height: 3rem;
padding: 0.5rem 1rem;
box-sizing: border-box;
font-size: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
transform: translateX(12rem);
margin: 1rem;
animation: slideIn 0.3s ease-in-out;
animation-fill-mode: forwards;
}
.notification-center > .notification .notification-content {
display: flex;
justify-content: center;
align-items: center;
}
.notification-center > .notification.notification-info {
background-color: cornflowerblue;
color: white;
}
.notification-center > .notification.notification-success {
background-color: #50ca92;
color: white;
}
.notification-center > .notification.notification-error {
background-color: tomato;
color: white;
}
.notification-center > .notification i.fa {
font-size: 1.5rem;
margin-right: 0.5rem;
}
.notification-center > .inyourface-container {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
animation: fadeIn 0.3s ease-in-out;
background-color: hsla(201, 71%, 61%, 0.89);
color: white;
}
.notification-center > .inyourface-container .notification-content {
text-align: center;
}
.notification-center > .inyourface-container,
.notification-center > .inyourface-container i.fa {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.notification-center > .inyourface-container i.fa {
width: 10rem;
height: 10rem;
font-size: 5rem;
border: 0.5rem solid white;
border-radius: 100%;
animation: slideUp 0.3s ease-in-out;
animation-fill-mode: forwards;
}
.notification-center > .inyourface-container h1 {
font-size: 3rem;
}
.notification-center > .inyourface-container.error {
background-color: hsla(0, 100%, 66%, 0.89);
}
.notification-center > .inyourface-container.warning {
background-color: rgba(226, 190, 85, 0.89);
}
@media screen and (max-width: 880px) {
.notification-center > .inyourface-container h1 {
font-size: 2rem;
}
.notification-center > .inyourface-container i.fa {
width: 8rem;
height: 8rem;
margin-bottom: 1rem;
}
}
.notification-center.removing {
animation: fadeOut 0.3s ease-in-out;
}
@media screen and (max-width: 880px) {
.notification-center {
bottom: auto;
top: 0;
}
.notification-center:not(.notification-inyourface) > .notification {
margin: 0.5rem;
font-size: 0.9rem;
}
}
@keyframes slideIn {
from {
transform: translateX(12rem);
}
to {
transform: translateX(0rem);
}
}
@keyframes slideUp {
from {
transform: translateY(5rem);
}
to {
transform: translateY(0rem);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/**
* These are stules that will create an overlay that will cover the parent
* element.
*
* @author Paweł Kuźnik
*/
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid white;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
}
.overlay.overlay-loader {
display: flex;
align-items: center;
}
.overlay.overlay-centered .overlay-inner {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/**
* These are the styles for elements that you want to display as
* loader elements.
* It should be added to an empty div element, and be removed
* when loading is not needed anymore.
*
* @author Tycho Atsma
* @file loader.less
*/
.loader {
position: relative;
margin: 2rem auto;
}
.loader,
.loader::before,
.loader::after {
height: 0.75rem;
width: 0.75rem;
border-radius: 100%;
box-sizing: border-box;
background-color: #007AC4;
animation: loaderAnimation 0.6s linear alternate infinite;
animation-delay: 0.2s;
}
.loader::before,
.loader::after {
content: '';
position: absolute;
bottom: 0;
}
.loader::before {
left: -1.5rem;
animation-delay: 0s;
}
.loader::after {
right: -1.5rem;
animation-delay: 0.4s;
}
.loader span {
position: absolute;
bottom: -1.5rem;
left: -1rem;
color: #9e9e9e;
}
@keyframes loaderAnimation {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
/**
* These are the styles for the product chooser data part
*
* @author Tycho Atsma
* @file copernicaproducts.less
*/
.copernica-products h3 {
text-align: center;
}
.copernica-products .copernica-product .preview {
position: relative;
}
.copernica-products .copernica-product .preview object {
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}
.copernica-products .copernica-product .preview .cta {
position: absolute;
bottom: 1.5rem;
right: calc(50% - 5rem);
}
.copernica-products .copernica-product.ms .cta,
.copernica-products .copernica-product.smtpeter .cta {
right: calc(50% - 5rem);
}
@media screen and (min-width: 480px) {
.copernica-products .copernica-product.ms .cta,
.copernica-products .copernica-product.smtpeter .cta {
right: calc(50% - 5rem);
}
}
@media screen and (min-width: 870px) {
.copernica-products .copernica-product.ms .cta,
.copernica-products .copernica-product.smtpeter .cta {
right: calc(50% - 7rem);
}
}
/**
* These are the styles for a newsletter subscription block.
* It's a call to action , which invites the user to subscribe to our newsletter.
* It can be placed everywhere like this:
*
*
*
*
* @file subscribeNewsletter.less
*/
.subscribeNewsletter {
color: #003251;
background-color: #d0edff;
padding: 1rem;
}
.subscribeNewsletter .subscribe-text {
max-width: 35rem;
}
.subscribeNewsletter .subscribe-text h2 {
font-size: 2em;
margin-top: 0;
}
.subscribeNewsletter .subscribe-form {
max-width: 25rem;
flex: auto;
}
.subscribeNewsletter .subscribe-form input {
padding: 0.875rem;
}
/**
* These are the styles for modal windows. These windows are
* created by the modalhelper object.
*
* @author Tycho Atsma
* @file modalhelper.less
*/
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.modal-overlay[data-overlay="true"] {
animation: fadeIn 0.3s ease-in-out;
}
.modal-overlay[data-overlay="true"].neutral {
background-color: hsla(0, 0%, 0%, 0.6);
}
.modal-overlay[data-overlay="true"].warning {
background-color: rgba(255, 178, 82, 0.8);
}
.modal-overlay .modal-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal-overlay .modal-window {
animation: slideInTop 0.3s ease-in-out;
animation-fill-mode: forwards;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #F9FAFA;
padding: 2rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 2px 1px #34383B;
min-width: 20rem;
position: relative;
}
@media screen and (max-width: 880px) {
.modal-overlay .modal-window {
min-width: 15rem;
}
}
.modal-overlay .modal-window.closing {
animation: slideOutBottom 0.2s ease-in-out;
animation-fill-mode: forwards;
}
.modal-overlay .modal-window .fa-times {
color: #00426A;
font-size: 1rem;
border: 2px solid #00426A;
border-radius: 100%;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
@media screen and (max-width: 880px) {
.modal-overlay .modal-window .fa-times {
top: 1rem;
right: 1rem;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInTop {
from {
transform: translateY(6rem);
}
to {
transform: translateY(0rem);
}
}
@keyframes slideOutBottom {
from {
transform: translateY(0rem);
}
to {
transform: translateY(6rem);
}
}
/**
* These are the styles for the confirm window.
*
* @author Tycho Atsma
* @file confirm.less
*/
.confirm {
max-width: 25rem;
box-shadow: 0 2px 1px #34383B;
}
.confirm .confirm-title {
padding: 1rem;
margin: 0;
text-align: center;
font-weight: bold;
color: white;
background-color: #e26262;
border-bottom: 5px solid #c54545;
}
.confirm .confirm-title.neutral {
background-color: cornflowerblue;
border-bottom: 5px solid #3c77de;
}
.confirm .confirm-content {
padding: 1rem;
padding-bottom: 0;
}
.confirm .button-group {
display: flex;
padding: 0.5rem;
}
.confirm .button-group .button-confirm {
flex: 1 1 5rem;
margin: 0.5rem;
background-color: white;
color: white;
position: relative;
font-weight: bold;
}
.confirm .button-group .button-confirm:first-child {
background-color: #55b555;
}
.confirm .button-group .button-confirm:last-child {
background-color: #c54545;
}
/*
* Styles for the hero container.
* A hero container is the use of a hero image, text and/or cta buttons at the top of any page.
* The hero headers can be used in a variety of ways: as a full width image, background image with text and button,
* video, animation etc.
*
* For example:
*
* ![]()
*
*
*
*
*
* ![]()
*
*
* @file ZigzagLayout.less
*
*/
.zigzag-layout {
width: 100%;
}
.zigzag-layout > * {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.zigzag-layout > *:nth-child(2n) {
flex-direction: row-reverse;
}
.zigzag-layout > *:nth-child(2n) > *:last-child {
margin-left: 0;
}
.zigzag-layout > *:nth-child(2n) > *:first-child {
margin-right: 0;
}
.zigzag-layout > *:nth-child(2n+1) > *:first-child {
margin-left: 0;
}
.zigzag-layout > *:nth-child(2n+1) > *:last-child {
margin-right: 0;
}
.zigzag-layout > * > * {
flex-basis: 1px;
flex-grow: 1;
margin-right: 1rem;
margin-left: 1rem;
}
@media screen and (max-width: 880px) {
.zigzag-layout > * > * {
flex-basis: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: 0;
margin-right: 0;
}
}
@media screen and (min-width: 1224px) {
.zigzag-layout > * img,
.zigzag-layout > * object {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
}
}
@media screen and (max-width: 1224px) {
.zigzag-layout > * img,
.zigzag-layout > * object {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
}
}
@media screen and (min-width: 55em) and (max-width: 1024px) {
.zigzag-layout > * img,
.zigzag-layout > * object {
width: 80%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
}
}
@media screen and (max-width: 880px) {
.zigzag-layout > * img,
.zigzag-layout > * object {
width: 60%;
display: block;
margin: 0 auto;
}
}
.zigzag-layout.zigzag-layout-spaced > * {
padding-top: 5rem;
}
.zigzag-layout.zigzag-layout-spaced > *:first-child {
padding-top: 0;
}
@media screen and (max-width: 880px) {
.zigzag-layout.zigzag-layout-spaced > * {
padding-top: 2rem;
}
}
/*
* Styles for containers, that we use tio show a message, notification, warning etc
* Reason to use it : to grab user's attention
*
* @ file Notice.less
*/
.notice {
background-color: #fbd069;
padding: 32px;
margin: 16px 0;
width: 100%;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1rem;
overflow: hidden;
white-space: normal;
}
.notice.centered-box {
width: 50%;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 880px) {
.notice.centered-box {
width: 100%;
}
}
.notice.info {
background-color: rgba(0, 66, 106, 0.25);
color: #00426A;
}
.notice.error {
background-color: #ff7575;
color: white;
}
.notice.success {
background-color: rgba(37, 161, 73, 0.25);
color: #1b7836;
}
.notice.message {
background-color: #EBEDED;
}
.notice.status {
padding: 0;
background: none;
font-weight: bold;
}
.notice.warning {
background-color: #F7F4D5;
}
.notice i.fa {
display: inline-block;
font-size: 1rem;
margin-right: 0.5rem;
}
div.notice i,
div.notice p {
display: inline-block;
}
div.notice p {
margin-bottom: 0;
padding-bottom: 0;
}
/*
* Styles for pop-up container
*
* How can be used:
*
*
*
*
*
*
*
* @file Popup.less
*/
.pop-up {
position: fixed;
left: 35%;
top: 9rem;
width: 40%;
max-width: 35rem;
z-index: 9999;
background: #fff;
border-radius: 5px;
border: 1px solid #007AC4;
box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1224px) {
.pop-up {
width: 60%;
left: 20%;
}
}
@media screen and (max-width: 880px) and (min-width: 32em) {
.pop-up {
top: 4rem;
width: 80%;
left: 12%;
}
}
@media screen and (max-width: 32em) {
.pop-up {
top: 2rem;
left: 0;
width: 100%;
}
}
.pop-up header {
background: #007AC4;
color: #fff;
padding: 1rem 2rem;
text-align: center;
}
.pop-up header h1,
.pop-up header h2,
.pop-up header h3,
.pop-up header h4 {
margin-bottom: 0;
padding-bottom: 0;
}
.pop-up .popup-content {
padding: 2rem;
border-bottom: none;
}
.pop-up footer {
padding: 1rem 2rem;
}
.pop-up i.fa-times {
cursor: pointer;
position: absolute;
right: 20px;
}
/*
* @file Table.less
*
* General styles for tables
*/
table {
border-collapse: collapse;
margin: 0.5rem 0;
text-align: left;
width: 100%;
background-color: transparent;
}
table thead {
border-bottom: 2px solid #D8DBDC;
}
table td:first-child {
border-left-style: solid;
border-radius: 0.5rem 0px 0px 0.5rem;
}
table td:last-child {
border-right-style: solid;
border-radius: 0px 0.5rem 0.5rem 0px;
}
table tbody tr:nth-child(odd) td {
background: #F2F3F3;
}
table th,
table td {
padding: 0.5rem;
display: table-cell;
}
table th button,
table td button,
table th .button,
table td .button {
padding: 0.5rem;
}
table th.a-right,
table td.a-right {
text-align: right;
}
table th.a-center,
table td.a-center {
text-align: center;
}
table th {
position: relative;
}
table th[data-sorting="desc"]::after,
table th[data-sorting="asc"]::after {
position: absolute;
right: 0.5rem;
font-family: FontAwesome;
}
table th[data-sorting="desc"]::after {
content: '\f0d7';
}
table th[data-sorting="asc"]::after {
content: '\f0d8';
}
table td .notice {
margin-bottom: 0;
}
table td .fa.fa-check {
color: #25A149;
}
table tr.clickable {
color: #007AC4;
cursor: pointer;
outline: 0 !important;
text-decoration: none;
/* do not show blue borders around image hyperlinks */
/* show underline on hover */
}
table tr.clickable img {
border: 0;
}
table tr.clickable:hover {
text-decoration: underline;
}
table th {
font-weight: bold;
font-weight: 600;
}
/*
* @file NoScroll.less
*/
.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
/*
* Styles for a list that looks like a table.
* It contains labels and values, and this is how you can use it:
*
*
*
*
* -
*
- * * * *
...
*
*/
/* Variables for the spacing around the content within the box.
* The values of top & bottom are slightly different than the
* ones of left & right because when we have a text container like
* a title or a paragraph there is some extra spacing by default
*/
.content-box {
color: #25282A;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1rem;
overflow: hidden;
background-color: #F9FAFA;
padding: 40px 48px;
margin-bottom: 2rem;
}
@media screen and (max-width: 880px) {
.content-box {
padding: 28px 32px;
}
}
.content-box.special {
background: linear-gradient(45deg, #00426A 0%, #007AC4 100%);
height: fit-content;
color: #F9FAFA;
}
.content-box.special a:not(.button) {
color: #FFC600;
}
.content-box.special table {
background-color: transparent;
}
.content-box.special table thead {
border-bottom: none;
}
.content-box.special table th {
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.content-box.special table th:hover {
background-color: transparent;
}
.content-box.special table tr {
border: none;
}
.content-box.special table tr:nth-child(odd) td {
background-color: #0000001A;
}
.content-box.special table tr:nth-child(even) td {
background-color: transparent;
}
.content-box.special .form-container label {
background-color: #F9FAFA;
}
.content-box.colored {
background-color: #F5F6F6;
}
.content-box.bordered {
border: 1px solid #D8DBDC;
}
.content-box.transparent {
background-color: transparent;
}
.content-box.solutions-page h3 {
font-size: 1.8rem;
line-height: 1.3;
font-weight: bold;
}
.content-box.solutions-page p {
max-width: 40rem;
}
.content-box.small {
padding: 16px 20px;
margin-bottom: 0;
}
.content-box.small p {
font-size: smaller;
}
.content-box.medium {
margin-bottom: 0;
padding: 28px 32px;
}
.content-box.hoverable {
transition: all 0.15s ease-in-out;
}
.content-box.hoverable svg {
width: 98%;
transition: all 0.15s ease-in-out;
}
.content-box.hoverable:hover {
cursor: pointer;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.075);
text-decoration: none;
}
.content-box.hoverable:hover svg {
width: 100%;
}
.content-box.hoverable:hover footer {
text-decoration: underline;
}
.content-box.hoverable footer {
color: #007AC4;
font-weight: bold;
}
.content-box.featured-event footer {
color: #FFC600;
}
.content-box.bottom-image {
padding-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box.bottom-image .image-container:last-child img,
.content-box.bottom-image .video-container:last-child img,
.content-box.bottom-image .image-container:last-child iframe,
.content-box.bottom-image .video-container:last-child iframe {
display: block;
}
.content-box.top-image {
padding: 0;
display: flex;
flex-direction: column;
}
.content-box.top-image .text-container {
padding: 32px 48px;
}
.content-box.top-image .image-container-top {
display: block;
max-width: 100%;
box-sizing: border-box;
}
.content-box.top-image .image-container-top.small {
height: 8rem;
}
.content-box.top-image .image-container-top.medium {
height: 12rem;
}
.content-box.top-image .image-container-top.large {
height: 16rem;
}
.content-box.top-image .image-container-top img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.content-box.top-image footer {
padding: 0px 48px 40px 48px;
color: #007AC4;
}
.content-box.box-image {
padding: 0;
}
.content-box.box-image .text-container {
padding: 40px 48px;
}
.content-box.box-image .text-container.small {
padding: 16px 20px;
}
.content-box.box-image .image-container img {
object-fit: cover;
}
.content-box.box-image img,
.content-box.box-image iframe {
display: block;
}
.content-box.box-video {
padding: 0;
gap: 0;
}
.content-box.box-video .text-container {
padding: 28px 32px;
}
@media screen and (max-width: 880px) {
.content-box.box-video .text-container {
padding: 28px 32px;
}
}
.content-box.box-video iframe {
aspect-ratio: 1.77777778;
width: 100%;
display: block;
}
.content-box.icon-list {
max-width: 52rem;
}
.content-box.icon-list .icon-list-item {
display: flex;
flex-direction: row;
gap: 2rem;
}
.content-box.icon-list .image-container img {
width: 8rem;
}
@media screen and (max-width: 880px) {
.content-box.icon-list .image-container {
display: none;
}
}
.content-box.homepage-box {
gap: 20px;
}
.navbox {
width: 100vw;
background-color: #F9FAFA;
z-index: 1000;
overflow-y: hidden;
padding-top: 0.5rem;
padding-bottom: 2rem;
}
.main-navigation .dropdown-label span::after {
content: none;
}
/*
* @file SlidingBox.less
*
* SlidingBox is a container that is slides into the screen.
* The title/button of the container is always visible and when
* the user clicks on it the content is visible too. It slides into the screen
*
* This box can contain anything. How to use it:
Title
...
*
*
* @file SectionGrid.less
*/
.section-grid {
display: grid;
gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/*
* The class .reverse will affect only the behaviour of the element on the mobile screen
* This is needed when we use a 'zig-zag' layout on desktop screen,
* for example we place an image on the left (order:1) and text on the right(order:2),
* in the next row we have the text on the left and the image on the right,
* third row the opposite again etc..
* On mobile screen the rows wrap the containing elements so the one is on top of the other.
* By default the element in the left side of the row will go on top of the right element
* but we usually want all the rows to show the elements in the same order,
* for example all the text containers on top of the images.
* In this case we will use reverse class in the row that has the image to the first position (left)
*/
}
.section-grid.spacing-between {
justify-content: space-between;
}
.section-grid.vert-center {
align-items: center;
}
.section-grid.vert-top {
align-items: start;
}
.section-grid.big-spacing {
gap: 64px;
}
.section-grid.small-spacing {
gap: 16px;
}
@media screen and (max-width: 880px) {
.section-grid.reverse-mobile :first-child {
order: 2;
}
}
.section-grid .wide {
grid-column: span 2;
}
@media screen and (max-width: 880px) {
.section-grid .wide {
grid-column: span 1;
}
}
.section-grid .tall {
grid-row: span 2;
}
.section-grid.small-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media screen and (max-width: 32em) {
.section-grid.small-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 16px;
}
}
.section-grid.xsmall-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media screen and (max-width: 32em) {
.section-grid.xsmall-grid {
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
grid-gap: 16px;
}
}
.section-grid.medium-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media screen and (max-width: 32em) {
.section-grid.medium-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
grid-gap: 16px;
}
}
.section-grid.large-grid {
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
@media screen and (max-width: 32em) {
.section-grid.large-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
grid-gap: 16px;
}
}
.four-blocks-container {
display: flex;
gap: 0.5rem;
padding: 0 14vw;
box-sizing: border-box;
margin-top: 0;
padding-bottom: 0;
max-width: 150rem;
align-items: flex-start;
}
@media screen and (max-width: 2000px) {
.four-blocks-container {
padding: 0 10vw;
}
}
.four-blocks-container > div h3 {
font-size: 1rem;
color: grey;
font-weight: 400;
}
.four-blocks-container > div h4 {
font-size: 1.3rem;
margin-bottom: 0;
line-height: 0.5rem;
}
.four-blocks-container > div h5 {
font-size: 1rem;
font-weight: 450;
margin-bottom: 0;
line-height: 2rem;
}
.four-blocks-container > div {
flex: 1 1 10%;
min-width: 0;
border-radius: 6px;
padding: 1rem;
box-sizing: border-box;
}
.four-blocks-container > div:nth-child(-n+3) {
flex: 1 1 20%;
min-width: 0;
}
.four-blocks-container > div:not(:first-child):not(:last-child)::before {
content: "";
display: block;
height: 3rem;
}
.four-blocks-container > div:last-child {
position: relative;
flex-basis: 12%;
min-width: 100px;
box-shadow: none;
padding-left: 3rem;
}
.four-blocks-container > div:last-child h3 {
margin-bottom: 1.1rem;
}
.four-blocks-container > div:last-child p.menu-description {
font-weight: normal;
font-size: 1.1rem;
padding-top: 1.4rem;
}
.four-blocks-container > div:last-child::before {
content: "";
position: absolute;
top: -50%;
left: 0;
width: 4px;
height: 200%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
pointer-events: none;
}
.checklist {
list-style: none;
padding-left: 0;
margin: 0 0 1.4em 0;
}
.checklist li {
position: relative;
padding-left: 1.8rem;
margin-bottom: 0.15rem;
font-size: 1.2rem;
line-height: 1.7;
}
.checklist li::before {
content: "";
position: absolute;
top: 0.2rem;
left: 0;
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%238FCAB9' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
}
.image-nav {
margin-top: 1rem;
}
.image-nav img {
width: 18rem;
}
.onMobile {
display: flex;
}
@media screen and (max-width: 1000px) {
.mobile-hidden {
display: none !important;
}
}
.solution-nav {
position: relative;
display: inline-block;
}
.solution-nav img {
width: 15vw;
border-radius: 5px;
display: block;
}
@media screen and (max-width: 2000px) {
.solution-nav img {
width: 17vw;
/* or whatever value you prefer */
}
}
.solution-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
padding: 6px 10px;
border-radius: 4px;
width: 80%;
text-align: center;
}
.solution-text h4 {
line-height: 1.5 !important;
word-break: break-word;
margin: 0;
}
.list-sol {
font-weight: normal;
font-size: 1.1rem;
margin-bottom: 0;
}
.solutions-container h3 {
margin-bottom: 1.23rem;
}
.mobile-line-break {
word-break: break-word;
white-space: normal;
text-align: left;
max-width: 180px;
}
.helpnav > div h3 {
margin-bottom: 1.2rem;
}
.helpnav > div p {
margin-top: 1rem;
font-weight: normal !important;
font-size: 1.1rem !important;
}
.whitepapers-block {
margin-top: 2.6rem;
}
.trainings-block {
margin-top: 1rem;
}
.helpnav > div:last-child p.menu-description {
font-weight: normal;
font-size: 1.1rem;
padding-top: 0.4rem !important;
}
.pricing-nav > div p {
margin-top: 0.5rem;
font-weight: normal !important;
font-size: 1.1rem !important;
}
.pricing-nav > div:last-child p.menu-description {
margin-top: 0rem !important;
}
.aboutus-nav img {
width: 16vw;
border-radius: 5px;
margin-top: 1.5rem;
/* instead of padding */
display: block;
/* avoid inline image spacing */
object-fit: cover;
}
.aboutus-nav > div:not(:first-child) h4 {
margin-top: 3rem;
/* push these h4s down */
}
.aboutus-nav h3 {
margin-bottom: 1.2rem;
}
/**
* Here we define the styles of the
*
*
* @file SectionGrid.less
*/
.aboutus-nav {
display: flex;
gap: 0.5rem;
padding: 0 14vw;
box-sizing: border-box;
margin-top: 0;
padding-bottom: 0;
max-width: 150rem;
align-items: flex-start;
}
@media screen and (max-width: 2000px) {
.aboutus-nav {
padding: 0 10vw;
}
}
.aboutus-nav > div h3 {
font-size: 1rem;
color: grey;
font-weight: 400;
}
.aboutus-nav > div h4 {
font-size: 1.3rem;
margin-bottom: 0;
line-height: 0.5rem;
}
.aboutus-nav > div h5 {
font-size: 1rem;
font-weight: 450;
margin-bottom: 0;
line-height: 2rem;
}
.aboutus-nav > div {
flex: 1 1 10%;
min-width: 0;
border-radius: 6px;
padding: 1rem;
box-sizing: border-box;
}
.aboutus-nav img {
width: 15vw;
border-radius: 5px;
margin-top: 1.5rem;
/* instead of padding */
display: block;
/* avoid inline image spacing */
object-fit: cover;
}
.aboutus-nav > div:not(:first-child) h4 {
margin-top: 3rem;
/* push these h4s down */
}
.aboutus-nav h3 {
margin-bottom: 1.2rem;
}
/**
* General styles of forms. The form can be horizontal or vertical
* Horizontal form is a form with the labels before the inputs:
* ________
* Label |________|
*
* and vertical forms have the labels on top of the inputs:
*
* Label
* _______
* |_______|
*
* You just need to add the class to the form element.
* Check also /Resources/Style/Common/Forms/formsguide.txt
*
* Helper classes in a form :
*
* end-aligned : used for horizontal alignment
* vertically-center : used for vertical alignment
* (More details below)
*
* @author Marianna Kavvadia
*
*
*
*
* or with multiple rows:
*
*
*
*
* @file FormBlock.less
*/
.form-block {
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.form-block > div {
margin-bottom: 0.5rem;
}
.form-block > div:last-child {
margin-bottom: 0;
}
.form-block:last-of-type {
border-bottom: none;
}
.form-block.act {
background-color: #EBEDED;
border: 1px solid #B1B7BA;
padding: 0.5rem 1rem;
}
/**
* A form field
*
*
*
*
*
*
*
*
*
*/
.form-field {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0.5rem 0;
}
.form-field label {
flex-basis: 30%;
}
.form-field > input,
.form-field > select,
.form-field > textarea,
.form-field > .inputs-row {
flex-basis: 65%;
box-sizing: border-box;
}
.form-field input,
.form-field select,
.form-field textarea {
background-color: transparent;
border: none;
transition: outline 4s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border: none;
}
.form-field textarea {
padding: 0.5rem;
}
.form-field textarea.large {
height: 20rem;
resize: none;
}
.form-field .upload-container {
flex-basis: 65%;
}
.form-field.vertical {
align-items: stretch;
}
.form-field.vertical label,
.form-field.vertical input,
.form-field.vertical textarea,
.form-field.vertical select {
flex-basis: 100%;
}
@media screen and (max-width: 880px) {
.form-field {
flex-direction: column;
align-items: stretch;
}
}
.form-field .error-message {
margin-left: auto;
}
/*
* Styles for inputs
* Part of the form ,
* Check /Resources/Style/Common/Forms/formsguide.txt
*
* @file Input.less
*/
.input,
input {
border-radius: 0.2rem;
border: 1px solid #dadede;
padding: 0.5rem;
color: #25282A;
box-sizing: border-box;
}
.input:focus::placeholder,
input:focus::placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
.input:focus,
input:focus {
border: 1px solid #b2baba;
outline: none;
}
.input.small,
input.small {
max-width: 5rem;
min-width: 4rem;
}
.input.medium,
input.medium {
max-width: 10rem;
min-width: 7rem;
}
.input.large,
input.large {
max-width: 17rem;
min-width: 12rem;
}
@media screen and (max-width: 880px) {
.input.small,
input.small,
.input.medium,
input.medium,
.input.large,
input.large {
max-width: 100%;
}
}
.input.full-width,
input.full-width {
width: 100%;
}
.input.block,
input.block {
display: block;
width: 100%;
}
select {
border-radius: 0.2rem;
border: 1px solid #dadede;
padding: 0.5rem;
color: #25282A;
box-sizing: border-box;
padding: 0.44rem;
background: #fff;
}
select:focus::placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
select:focus {
border: 1px solid #b2baba;
outline: none;
}
select.small {
max-width: 5rem;
min-width: 4rem;
}
select.medium {
max-width: 10rem;
min-width: 7rem;
}
select.large {
max-width: 17rem;
min-width: 12rem;
}
@media screen and (max-width: 880px) {
select.small,
select.medium,
select.large {
max-width: 100%;
}
}
select.full-width {
width: 100%;
}
select.block {
display: block;
width: 100%;
}
/*
* @file InputsRow.less
*
* Inputs row is a container that holds all the elements in one row
* We need this class to be able to align properly all the elements
* that are in the same row and add the spacing betweenn them.
* These elements can be anything that you could use in a form as inputs,
* checkboxes, select, radio buttons and also some text.
*
* Example :
*
*
*
*/
.inputs-row {
display: inline-flex;
flex-wrap: wrap;
align-items: flex-start;
}
.inputs-row > * {
flex-grow: 1;
}
.inputs-row > * {
margin-left: 0.2em;
margin-right: 0.2em;
}
.inputs-row > *:first-child {
margin-left: 0;
}
.inputs-row > *:last-child {
margin-right: 0;
}
@media screen and (max-width: 880px) {
.inputs-row > * {
margin-bottom: 0.5rem;
}
}
@media screen and (max-width: 32em) {
.inputs-row > * {
margin-right: 0;
margin-left: 0;
}
}
.inputs-row.full-width {
width: 100%;
}
@media screen and (max-width: 32em) {
.inputs-row {
width: 100%;
}
}
/*
* Input-set is a combination of an input and a button
* that we use next and sticked to each other.
* The button should be attached to the input with perfect height alignment
*
* This input set is used for example in subscription forms or search forms, etc..
*
* Example :
*
*
*
*
*
* -- > for more info check Form.less
* and a number:
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* @file InputSet.less
*
*/
.inputset {
border-radius: 0.2rem;
border: 1px solid #dadede;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
}
.inputset:focus::placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
.inputset:focus {
border: 1px solid #b2baba;
outline: none;
}
.inputset.small {
max-width: 5rem;
min-width: 4rem;
}
.inputset.medium {
max-width: 10rem;
min-width: 7rem;
}
.inputset.large {
max-width: 17rem;
min-width: 12rem;
}
@media screen and (max-width: 880px) {
.inputset.small,
.inputset.medium,
.inputset.large {
max-width: 100%;
}
}
.inputset.full-width {
width: 100%;
}
.inputset.block {
display: block;
width: 100%;
}
.inputset.block {
display: flex;
}
.inputset > * {
padding: 0.5rem;
font-size: 1rem;
}
.inputset .input,
.inputset input {
border: none;
border-radius: 0;
flex-basis: 0;
flex-grow: 9;
flex-shrink: 1;
overflow: unset;
}
.inputset button {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
border: none;
border-radius: 0;
overflow: unset;
}
/*
* Sometimes we need to show to the user that something went wrong.
* Maybe an input value was wrong or an input that needed to be filled is empty, etc..
* To achieve that, we create class 'error-message', that gives the proper
* styles to the element.
*
* @author Marianna Kavvadia
*
*
* @file MainContentInner.less
*/
.main-content-inner {
min-height: 70vh;
background-color: #ffffff;
}
.main-content-inner .inner-content-container {
margin-top: 4rem;
margin-bottom: 4rem;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.main-content-inner .inner-content-container .inner-content {
flex-basis: 70%;
flex-grow: 0;
width: 70%;
max-width: 70%;
}
@media screen and (max-width: 1024px) {
.main-content-inner .inner-content-container .inner-content {
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
.main-content-inner .inner-content-container .inner-sidebar {
flex-basis: 28%;
flex-grow: 0;
word-break: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
@media screen and (max-width: 1024px) {
.main-content-inner .inner-content-container .inner-sidebar {
flex-basis: 100%;
margin-bottom: 1rem;
}
}
/*
* Styles for header of the website.
*
* @file Header.less
* @author Marianna Kavvadia
* ![]()
*
*
*/
.icon-title > * {
display: inline-block;
}
.icon-title.small img {
width: 1rem;
}
.icon-title.right img {
margin-left: 0.5rem;
}
.icon-title img {
margin-right: 0.5rem;
}
.icon-title.top-aligned {
display: flex;
align-items: flex-start;
}
@media screen and (max-width: 880px) {
.icon-title.top-aligned {
align-items: center;
}
}
/*
* Styles for accordion component
*
* @file Accordion.less
*
*/
.accordion {
cursor: pointer;
position: relative;
}
.accordion *[data-accordionpart="title"] {
margin-bottom: 0;
}
.accordion *[data-accordionpart="title"]::after {
font-family: FontAwesome;
position: absolute;
right: 0.5rem;
padding-right: 0.5rem;
content: "\f0d7";
}
.accordion *[data-accordionpart="title"].active::after {
content: "\f0d8";
}
.accordion *[data-accordionpart="content"] {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion *[data-accordionpart="content"] ul {
padding: 0px;
z-index: 1;
}
.accordion *[data-accordionpart="content"] ul li {
margin-bottom: 0;
}
.accordion *[data-accordionpart="content"].show {
opacity: 1;
max-height: 1000px;
}
/*
* @file Tabs.less
*
*/
.tabs {
width: 100%;
}
.tabs nav {
gap: 12px;
}
.tabs nav.horizontal-tabs {
margin-bottom: 32px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.tabs nav.horizontal-tabs a {
display: inline-block;
padding: 12px 32px;
}
.tabs nav.vertical-tabs {
display: flex;
flex-direction: column;
}
.tabs nav a {
transition: all 0.15s ease-in-out;
background: #D8DBDC;
color: #25282A;
}
.tabs nav a:hover {
background: #FFF;
text-decoration: none;
}
.tabs nav a.round-box {
border-radius: 32px;
overflow: hidden;
}
.tabs nav *[data-switchTo].active {
box-shadow: inset 0px 0px 0px 2px #007AC4;
background: #FFF;
text-decoration: none;
}
/*
* General styles for the slider component
*
* Slider.less
*
*/
.slider {
position: relative;
overflow: hidden;
min-height: 30rem;
}
@media screen and (max-width: 880px) {
.slider {
min-height: 50rem;
}
}
.slider .bullets {
position: absolute;
}
.slider .bullets > li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
background: #494f53;
}
.slider .bullets > li.active {
background: #C8102E;
}
.slider *[data-sliderpart="content"] {
position: absolute;
box-sizing: border-box;
top: 0;
bottom: 0;
width: 100%;
}
.slider *[data-indicator] {
z-index: 1;
padding: 0.5rem;
background: #F9FAFA;
color: #25282A;
opacity: 0.8;
cursor: pointer;
transition: opacity 0.2s ease;
position: absolute;
top: 40%;
}
.slider *[data-indicator]:hover {
opacity: 1;
text-decoration: none;
}
.slider *[data-indicator="prev"] {
left: 0;
border-radius: 0 0.2rem 0.2rem 0;
}
.slider *[data-indicator="next"] {
right: 0;
border-radius: 0.2rem 0 0 0.2rem;
}
/*
* Tooltip.less
*
*/
.widget_tooltip {
cursor: help;
}
.widget_tooltip.fa {
margin-left: 3px;
}
.tooltip {
position: absolute;
margin-top: 30px;
margin-left: 30px;
z-index: 1000000;
padding: 20px;
width: 256px;
font-family: 'Lato', sans-serif;
line-height: 24px;
font-size: 16px;
text-align: left;
background: #FFC600;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
color: #25282A;
border-radius: 10px;
}
/*
* @file DisabledProduct.less
*
*/
.disabled-product {
position: relative;
}
.disabled-product i.fa {
left: 40%;
bottom: 20%;
font-size: 1.5rem;
position: absolute;
color: rgba(0, 0, 0, 0.7);
}
.disabled-product:hover i.fa-lock:before {
content: "\f09c";
}
.disabled-product img {
filter: grayscale(100%);
}
/**
* These are styles for the Calendar widget.
*
* @author Joël Bosch
*
* The content: The content is wrapped in a container,
* so it will be easier to define all the special styles that we're using for the dashboard content
*
-> for example h2 here will be red
*
* Dashboard block: Class that helps to seperate the sections in the dashboard content
*
* @file DashboardContent.less
*
*/
.dashboard .container-content .dashboard-title {
color: #fff;
background: #25282A;
padding: 1rem;
font-weight: bold;
margin-top: 0;
}
.dashboard .container-content .button-dashboard {
background-color: #B1B7BA;
border-bottom: 2px solid #ccc;
color: #5c5c5c;
}
.dashboard .container-content .button-dashboard:hover {
background-color: #D8DBDC;
filter: initial;
}
.dashboard .container-content .button-dashboard i {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.dashboard .container-content .button-dashboard div.icn-external {
float: right;
display: block;
}
.dashboard .container-content .button-dashboard.remove {
color: #C8102E;
}
.dashboard .container-content .button-dashboard.confirm {
color: #25A149;
}
.dashboard .container-content .block-title {
background-color: #EBEDED;
color: #5c5c5c;
font-weight: bold;
padding: 1rem;
}
.dashboard .container-content .block-title > a,
.dashboard .container-content .block-title > i {
float: right;
font-size: 1rem;
margin-left: 0.5rem;
overflow: auto;
}
.dashboard .container-content .block-title > a::after,
.dashboard .container-content .block-title > i::after {
content: '';
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.dashboard .container-content .block-title > a,
.dashboard .container-content .block-title > i {
float: initial;
display: block;
}
}
.dashboard .container-content .block-title > i {
font-size: 1.5rem;
line-height: 1.5em;
}
.dashboard .container-content .dashboard-block {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #F5F6F6;
background: #fff;
position: relative;
}
.dashboard .container-content .dashboard-block > *:first-child {
margin-top: 0;
}
.dashboard .container-content .dashboard-block.block-table {
padding: 0;
}
.dashboard .container-content .dashboard-block.block-table > table {
margin: 0;
}
.dashboard .container-content .dashboard-block.disabled .notice {
filter: blur(0px);
}
.dashboard .container-content .dashboard-block.disabled::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
.dashboard .container-content .dashboard-block:empty {
display: none;
}
.dashboard .container-content .dashboard-block > p:not(.notice):last-child {
padding-bottom: 0;
}
.dashboard .container-content .dashboard-block .block-links {
margin-top: 1rem;
box-sizing: border-box;
background-color: #EBEDED;
border-top: 1px solid #B1B7BA;
display: flex;
flex-flow: row wrap;
}
.dashboard .container-content .dashboard-block .block-links a {
text-align: left;
flex-grow: 1;
margin: 0.5rem;
}
.dashboard .container-content .dashboard-block .block-links a i.fa {
margin-right: 0.5rem;
}
/*
* @file ToggleEdit.less
*
* It's a hidded block that we show it when the user clicks on the edit button.
* It could contain a form and it should have different styles from the block/list that is shown
*/
.toggle-edit {
background: #fdfdfd;
}
.toggle-edit .hidden-content {
padding: 1rem;
}
/*
* Pxemail.less
*
*/
#pxemail {
overflow: hidden;
width: 100%;
height: inherit;
position: relative;
}
#pxemail #pxmailheader {
font-size: 12px;
background-color: #eee;
overflow: hidden;
padding: 5px 10px;
border-bottom: solid 1px #ccc;
text-shadow: white 0 1px;
}
#pxemail #pxmailheader .pxrow {
min-height: 18px;
margin-top: 2px;
clear: both;
}
/**
* HighCharts and table combo
*/
.chart-legend {
width: 10px;
height: 10px;
border-radius: 4px;
display: inline-block;
border: 1px solid white;
margin-bottom: -1px;
}
/**
* These are the styles for dashboard block tabs
*
* @author Tycho Atsma
*
*
*
*/
display: block;
width: 100%;
}
.show-invoice-page .invoice-collapsed {
display: flex;
justify-content: space-between;
}
.show-invoice-page .invoice-collapsed strong {
display: inline-block;
width: 64rem;
}
.show-invoice-page .invoice-collapsed:hover {
cursor: pointer;
}
.show-invoice-page .invoice-expanded-closer {
display: flex;
justify-content: end;
}
.show-invoice-page .invoice-expanded-closer:hover {
cursor: pointer;
}
.show-invoice-page .hidden {
display: none;
}
.show-invoice-page .form-block {
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.show-invoice-page .form-block > div {
margin-bottom: 0.5rem;
}
.show-invoice-page .form-block > div:last-child {
margin-bottom: 0;
}
.show-invoice-page .form-block:last-of-type {
border-bottom: none;
}
.show-invoice-page .form-block.act {
background-color: #EBEDED;
border: 1px solid #B1B7BA;
padding: 0.5rem 1rem;
}
.show-invoice-page .container .form-field,
.show-invoice-page .form-field {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0.5rem 0;
}
.show-invoice-page .container .form-field .paymentmethods,
.show-invoice-page .form-field .paymentmethods {
width: 100%;
}
.show-invoice-page .container .form-field .paymentmethod,
.show-invoice-page .form-field .paymentmethod {
border-radius: 1em;
flex-grow: 1;
border: 1px solid #f1f1f1;
background: #fff;
margin-bottom: 1rem;
padding: 1em;
text-align: left;
cursor: pointer;
transition: border-color 0.8s, box-shadow 0.8s;
/**
* We want to make the icon and the label centered to the middle baseline.
* We can achieve that with complex paddings, or we can use the flexbox
* for it. We will go with the flexbox.
*/
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
/**
* Before each payment method there is a
*/
}
.show-invoice-page .container .form-field .paymentmethod .highlight-box-image,
.show-invoice-page .form-field .paymentmethod .highlight-box-image {
float: left;
max-width: 4rem;
max-height: 4rem;
}
.show-invoice-page .container .form-field .paymentmethod .highlight-box-image ~ *,
.show-invoice-page .form-field .paymentmethod .highlight-box-image ~ * {
margin-left: 5rem;
}
.show-invoice-page .container .form-field .paymentmethod::after,
.show-invoice-page .form-field .paymentmethod::after {
content: '';
display: block;
clear: both;
}
.show-invoice-page .container .form-field .paymentmethod.small,
.show-invoice-page .form-field .paymentmethod.small {
padding: 0.3rem;
border: none;
}
.show-invoice-page .container .form-field .paymentmethod.small p,
.show-invoice-page .form-field .paymentmethod.small p {
margin-bottom: 0;
}
.show-invoice-page .container .form-field .paymentmethod.colored,
.show-invoice-page .form-field .paymentmethod.colored {
background: #f9f9f9;
}
.show-invoice-page .container .form-field .paymentmethod::before,
.show-invoice-page .form-field .paymentmethod::before {
font-family: "FontAwesome";
font-size: 1.8rem;
margin-right: 1rem;
color: #ccc;
transition: color 0.8s;
}
.show-invoice-page .container .form-field .paymentmethod.ideal::before,
.show-invoice-page .form-field .paymentmethod.ideal::before {
content: url(/Resources/Images/ideal.svg);
}
.show-invoice-page .container .form-field .paymentmethod.paypal::before,
.show-invoice-page .form-field .paymentmethod.paypal::before {
content: '\f1ed';
}
.show-invoice-page .container .form-field .paymentmethod.creditcard::before,
.show-invoice-page .form-field .paymentmethod.creditcard::before {
content: '\f09d';
}
.show-invoice-page .container .form-field .paymentmethod.bank-transfer::before,
.show-invoice-page .form-field .paymentmethod.bank-transfer::before {
content: '\f0d6';
}
.show-invoice-page .container .form-field .paymentmethod.active,
.show-invoice-page .form-field .paymentmethod.active {
border-color: #00426A;
box-shadow: 0px 0px 3px 2px #ddd;
}
.show-invoice-page .container .form-field .paymentmethod.active::before,
.show-invoice-page .form-field .paymentmethod.active::before {
filter: brightness(60%);
}
.show-invoice-page .container .form-field .paymentmethod .paymentmethod-details,
.show-invoice-page .form-field .paymentmethod .paymentmethod-details {
flex-basis: 100%;
cursor: default;
}
.show-invoice-page .container .form-field .paymentmethod .paymentmethod-details table,
.show-invoice-page .form-field .paymentmethod .paymentmethod-details table {
margin-top: 1rem;
}
.show-invoice-page .container .form-field label,
.show-invoice-page .form-field label {
flex-basis: 30%;
}
.show-invoice-page .container .form-field > input,
.show-invoice-page .form-field > input,
.show-invoice-page .container .form-field > select,
.show-invoice-page .form-field > select,
.show-invoice-page .container .form-field > textarea,
.show-invoice-page .form-field > textarea,
.show-invoice-page .container .form-field > .inputs-row,
.show-invoice-page .form-field > .inputs-row {
flex-basis: 65%;
box-sizing: border-box;
}
.show-invoice-page .container .form-field input,
.show-invoice-page .form-field input,
.show-invoice-page .container .form-field select,
.show-invoice-page .form-field select,
.show-invoice-page .container .form-field textarea,
.show-invoice-page .form-field textarea {
background-color: #D8DBDC;
border: none;
transition: outline 4s;
}
.show-invoice-page .container .form-field input:focus,
.show-invoice-page .form-field input:focus,
.show-invoice-page .container .form-field select:focus,
.show-invoice-page .form-field select:focus,
.show-invoice-page .container .form-field textarea:focus,
.show-invoice-page .form-field textarea:focus {
border: none;
outline: 1px solid #b1b1b1;
}
.show-invoice-page .container .form-field textarea,
.show-invoice-page .form-field textarea {
padding: 0.5rem;
}
.show-invoice-page .container .form-field textarea.large,
.show-invoice-page .form-field textarea.large {
height: 20rem;
resize: none;
}
.show-invoice-page .container .form-field .upload-container,
.show-invoice-page .form-field .upload-container {
flex-basis: 65%;
}
.show-invoice-page .container .form-field.vertical,
.show-invoice-page .form-field.vertical {
align-items: stretch;
}
.show-invoice-page .container .form-field.vertical label,
.show-invoice-page .form-field.vertical label,
.show-invoice-page .container .form-field.vertical input,
.show-invoice-page .form-field.vertical input,
.show-invoice-page .container .form-field.vertical textarea,
.show-invoice-page .form-field.vertical textarea,
.show-invoice-page .container .form-field.vertical select,
.show-invoice-page .form-field.vertical select {
flex-basis: 100%;
}
@media screen and (max-width: 880px) {
.show-invoice-page .container .form-field,
.show-invoice-page .form-field {
flex-direction: column;
align-items: stretch;
}
}
.show-invoice-page .container .form-field .error-message,
.show-invoice-page .form-field .error-message {
margin-left: auto;
}
/**
* This is a class that should be used when there is a section of the page that
* need to be highlighted. This class should be used on a block element that
* has content inside.
*
* @author Paweł Kuźnik
*
*
*
* * * {tr}Subscribe to our newsletter{/tr} *
** {tr} * Once a month we send product updates in combination with * our most important blog posts, straight to your inbox. * {/tr} *
*
* {subscribenewsletter}
*
*
*
* How a hero container should look like :
*
*
*/
.hero-container {
background: radial-gradient(at bottom, #007AC4 0%, #00426A 100%);
color: #F9FAFA;
min-height: 30vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.hero-container.features-hero {
max-height: 60vh;
overflow: hidden;
}
@media screen and (max-width: 880px) {
.hero-container.features-hero {
max-height: fit-content;
}
}
.hero-container .hero-content {
padding: 32px 0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.hero-container .hero-content h2,
.hero-container .hero-content .subheader {
font-size: 1.25rem;
line-height: 30px;
font-weight: lighter;
}
.hero-container .hero-content p a {
color: #FFC600;
}
.hero-container img,
.hero-container iframe {
margin: 0 auto;
display: block;
max-width: 40rem;
}
/**
* These are the styles for payment fields
*
* @author Tycho Atsma
* @file paymentfield.less
*/
.payment-field label {
border: 1px solid #B1B7BA;
box-shadow: 0 2px 1px #34383B;
cursor: pointer;
line-height: 2;
padding: 0.5rem;
transition: border 0.2s ease-in-out;
}
.payment-field label:hover {
border: 1px solid cornflowerblue;
}
.payment-field label span {
display: inline;
}
.payment-field label i.fa {
width: 2rem;
font-size: 1.5rem;
margin-right: 1rem;
margin-left: 0.5rem;
}
.payment-field input[type="checkbox"] {
display: none;
}
.payment-field input[type="checkbox"]:checked + i.fa {
color: cornflowerblue;
}
/**
* These are the styles for the contact task window
*
* @author Tycho Atsma
* @file contacttask.less
* @documentation private
* @copyright 2017 - 2018 Copernica BC
*/
.contact-task {
padding: 2rem;
min-width: 35rem;
}
.contact-task textarea {
padding: 0.5rem;
min-height: 15rem;
line-height: 1.38;
}
/**
* These are the styles for the contact reports
*
* @author Tycho Atsma
* @file contact-reports.less
* @documentation private
* @copyright 2017 - 2018 Copernica BC
*/
.dashboard .container-content .dashboard-block.contact-reports {
padding: 0;
}
.dashboard .container-content .dashboard-block.contact-reports > h3 {
padding: 1rem;
font-weight: bold;
}
.dashboard .container-content .dashboard-block.contact-reports table {
margin: 0;
}
.dashboard .container-content .dashboard-block.contact-reports table tr {
line-height: 2.5;
}
.dashboard .container-content .dashboard-block.contact-reports table tr td {
background-color: inherit;
}
.dashboard .container-content .dashboard-block.contact-reports table tr:nth-of-type(odd) {
background-color: #EBEDED;
}
.dashboard .container-content .dashboard-block.contact-reports table td button {
margin-right: 0.5rem;
}
/**
* This is a special widget to display a logout page.
*
* @author Paweł Kuźnik
* @copyright Copernica BV 2018
*/
.logout-page .navigation-options {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.logout-page .navigation-options > li {
border: 1px solid #ddd;
padding: 1rem;
flex-basis: 20rem;
min-height: 8rem;
margin-right: 1rem;
}
/**
* These are the styles for a list of events that a user registered for.
*
* @author Tycho Atsma
* @file user-calendar.less
* @documentation ignore
* @copyright Copernica BV 2018
*/
.ms-usercalendar {
list-style: none;
margin: 0;
padding: 0;
}
.ms-usercalendar li {
margin: 0;
padding: 0.25rem;
}
.ms-usercalendar li:nth-of-type(even) {
background-color: #f9f9f9;
}
.ms-usercalendar > li:first-child {
font-weight: bold;
border-bottom: 1px solid #ccc;
}
/**
* These are the styles for a list of events that a user registered for.
*
* @author Tycho Atsma
* @file user-calendar.less
* @documentation ignore
* @copyright Copernica BV 2018
*/
.ms-usercalendar-event {
display: grid;
grid-template-columns: 10rem 6rem 4rem 1fr 4rem 2rem;
grid-gap: 1rem;
align-items: center;
font-size: 0.9em;
}
.ms-usercalendar-event span {
padding: 0.25rem;
}
.ms-usercalendar-event .fa {
display: none;
cursor: pointer;
color: tomato;
}
.ms-usercalendar-event .fa:hover {
color: darkred;
}
.ms-usercalendar-event:hover .fa {
display: block;
}
/**
* These are the styles for the dashboard event registrations component.
*
* @author Tycho Atsma
* @file Resources/Style/Widgets/eventregistrations.less
* @documentation ignore
* @copyright Copernica BV 2018
*/
.ms-eventregistrations .ms-eventregistrations-controls {
display: flex;
}
.ms-eventregistrations .ms-eventregistrations-controls .button {
margin: 0.5rem 0;
margin-right: 0.5rem;
}
/**
* These are the styles for the user inside of a copernica event registration object.
*
* @author Tycho Atsma
* @file Resources/Style/Widgets/eventregistrations-user.less
* @documentation ignore
* @copyright Copernica BV 2018
*/
.ms-eventregistrations-user {
display: flex;
justify-content: space-between;
}
.ms-eventregistrations-user .user-unregister {
opacity: 0;
color: tomato;
font-size: 1.2rem;
cursor: pointer;
margin: 0 0.5rem;
}
.ms-eventregistrations-user:hover .user-unregister {
opacity: 1;
}
/**
* These are the styles for a css-only class that is meant to give an element
* dialogbox-like visuals. This is meant for elements that you want to show
* on a public page, are slightly disruptive, and overlap everything (when
* the elements are appended to the end of the document body).
*
* @file Resources/Style/Widgets/DialogBox.less
* @author Tycho Atsma
* @copyright 2020 Copernica BV
*/
/**
* Root class.
*/
.dialogbox {
position: sticky;
z-index: 1;
width: 100%;
background-color: white;
}
.dialogbox.top {
top: 0;
box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.2);
}
.dialogbox.bottom {
bottom: 0;
box-shadow: 0 -0.15rem 0.35rem rgba(0, 0, 0, 0.2);
}
.dialogbox .dialogbox-content {
width: 60em;
max-width: calc(100% - 2rem);
margin: 0 auto;
padding-top: 1em;
padding-bottom: 1em;
}
.dialogbox .dialogbox-button {
display: inline-block;
}
/**
* These are the styles for the cookie preferences modal.
*
* @author Luuk Jonker
* @file Resources/Style/Widgets/CookiePreferencesModal.less
* @copyright Copernica BV 2025
*/
.cookie-preferences-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.cookie-preferences-modal.active {
display: flex;
}
.cookie-preferences-modal-content {
background-color: white;
padding: 20px;
width: 400px;
}
/**
* These are the styles for the cookie consent website part.
*
* @author Tycho Atsma
* @file Resources/Style/Widgets/CookieConsent.less
* @copyright Copernica BV 2020
*/
/**
* Root class.
*/
[data-part="CookieConsent"] {
display: none;
}
/**
* These are the styles for the FreeTrial page.
*
* @author Damian Wantzing
* @file NewUser.less
*/
.challenge-form-block {
display: flex;
justify-content: center;
}
.challenge-form-block input[type="text"],
.challenge-form-block input[type="email"],
.challenge-form-block input[type="password"],
.challenge-form-block input[type="tel"],
.challenge-form-block input[type="url"],
.challenge-form-block input[type="number"],
.challenge-form-block input[type="file"] {
width: 100%;
}
.challenge-form-block .content-box {
width: 100vw;
max-width: 35rem;
margin-top: -10rem;
margin-bottom: 5rem;
/* add vertical spacing to divs that contain a form element */
}
.challenge-form-block .content-box div:has(a, input, button) {
margin-block: 1rem;
}
*
*
*
* .hero-content In this container we add the content(text/button..)
*
* @file HeroContainer.less
* @author Marianna Kavvadia