* wikkelt (bv. de kaarten van featurecardsblock, of textimageblock's "boxed"
* variant) - die eigen grid-container zet zijn centrering/padding nog eens
* overheen wat .section-boxed of de omliggende kolom al regelt, en schuift zo
* de tekst extra uit lijn. Deze regels zetten alleen die tweede laag buiten
* werking; ze zijn met opzet niet beperkt tot .with-section-grid, want het
* probleem zit 'm in de dubbele grid-container, niet in de aanwezigheid van
* een kaartengrid eromheen.
* ------------------------------------------------------------------------ */
.section-boxed > .grid-container {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Alleen die buitenste laag hoeft buiten werking te worden gezet. Er stond
* hier eerder ook nog een regel die de marge (en zelfs de breedte) van de
* .grid-x/.cell daarbinnen op nul zette - onschadelijk bij featurecards-
* block's kaart (die heeft daar toch maar één cel per rij, die Foundation
* zelf al 100% breed maakt), maar bij textimageblock's "boxed" variant staan
* daar TWEE cellen naast elkaar (tekst + afbeelding). Die extra regel brak
* Foundation's eigen marge/breedte-samenspel voor zo'n meerkoloms rij, en de
* afbeelding kwam onder de tekst te staan in plaats van ernaast. Zonder die
* regel doet Foundation's normale .grid-margin-x/.cell-mechanisme gewoon zijn
* werk, en dat geeft toevallig (via de negatieve marge van .grid-x die precies
* wegvalt tegen de positieve marge van .cell) ook voor de featurecards-kaart
* al de juiste uitlijning - dus deze regel was voor dat geval nooit nodig. */
/* Met die tweede laag buiten werking blijft, vanaf 1024px, alleen
* .section-boxed's eigen padding-left over als kantlijn - die staat
* verderop in dit bestand default op 3rem (bedoeld voor een vrijstaand
* kader), iets ruimer dan de 35px die .section-content elders als kantlijn
* geeft. Hier gelijkgetrokken aan die 35px, zodat een kaarttekst exact even
* ver inspringt als de sectiekop erboven. Onder 1024px blijft de bestaande
* ".grid-container .section-boxed { padding-inline: 0 }" hierboven gewoon
* gelden: ".with-section-grid .section-content" levert daar zelf al de
* kantlijn (20px / 15px, verderop in dit bestand) - nog een keer padding op
* .section-boxed zou daar dus dubbelop zijn.
*
* Dit lost het op voor een .section-boxed die (net als featurecardsblock's
* kaarten) zelf al ergens binnen een .grid-container zit, zodat "de
* bestaande .grid-container .section-boxed {max-width:100%}"-regel
* hierboven zijn eigen, afwijkende breedte/centreer-formule al buiten
* werking zet. Staat een .section-boxed helemaal los (geen enkele
* .grid-container als voorouder, zoals textimageblock's "boxed"-variant
* standaard rendert), dan volgt zijn eigen centrering een andere
* breakpoint-formule dan .grid-container gebruikt, en komt de tekst op
* sommige breedtes alsnog net niet uit op dezelfde kantlijn. Zie de
* toelichting in textimageblock/frontend.css voor hoe die module dat
* oplost door zichzelf ook in een echte .grid-container te wikkelen. */
@media (min-width: 1024px) {
.with-section-grid .section-boxed {
padding-left: 35px;
padding-right: 35px;
}
}
/* Section-Ups */
.section-up-small {
position: relative;
margin-top: -60px;
z-index: 11;
}
.section-up-medium {
position: relative;
margin-top: -120px;
z-index: 998 !important;
}
.section-up-large {
position: relative;
margin-top: -160px;
z-index: 998 !important;
}
.section-up-xlarge {
position: relative;
margin-top: -190px;
z-index: 998 !important;
}
@media (max-width: 1100px) {
.section-up-large {
position: relative;
margin-top: -120px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -90px;
z-index: 998 !important;
}
}
@media (max-width: 1023px) {
.section-up-large {
position: relative;
margin-top: -115px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -110px;
z-index: 998 !important;
}
}
@media (max-width: 640px) {
.section-up-xlarge {
margin-top: -110px;
}
.section-up-large {
position: relative;
margin-top: -115px;
z-index: 998 !important;
}
.section-up-medium {
position: relative;
margin-top: -70px;
z-index: 998 !important;
}
}
/* Row-Ups */
.row-up-small {
position: relative;
top: -60px;
z-index: 11;
}
.row-up-medium {
position: relative;
top: -120px;
z-index: 998 !important;
}
.row-up-large {
position: relative;
top: -200px;
z-index: 998 !important;
}
/* Section background colour */
.bg-section-colour {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Section background image */
.bg-section-image {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
/* Postition */
.bg-section-image.bottom {
top:auto;
bottom:0;
}
/* Widths */
.bg-section-image.full {
width: 100%;
}
.bg-section-image.width-75 {
width: 75%;
}
.bg-section-image.width-66 {
width: 66.66%;
}
.bg-section-image.width-50 {
width: 50%;
}
.bg-section-image.width-40 {
width: 49%;
}
.bg-section-image.width-33 {
width: 33.333%;
}
.bg-section-image.width-25 {
width: 25%;
}
/* Right */
.bg-section-image.width-75-right {
width: 75%;
left: auto;
right:0;
}
.bg-section-image.width-66-right {
width: 66.66%;
left: auto;
right:0;
}
.bg-section-image.width-50-right {
width: 50%;
left: auto;
right:0;
}
.bg-section-image.width-33-right {
width: 33.333%;
left: auto;
right:0;
}
.bg-section-image.width-25-right {
width: 25%;
left: auto;
right:0;
}
.bg-section-image.height-40 {
height: 40%;
}
.bg-section-image.height-60 {
height: 60%;
}
.bg-section-image.height-70 {
height: 70%;
}
.section-height-small {
min-height: 30vh;
}
.section-height-medium {
min-height: 50vh;
}
.section-height-large {
min-height: 70vh;
}
/* Reapeat */
.bg-section-image.bg-repeat {
background-position: top left;
background-repeat: repeat;
background-size: 160px auto;
}
/* Parallax */
.parallax .parallax-inner {
z-index: 1 !important;
}
.parallax.parallax-opacity-10 .parallax-inner {
opacity: 0.1;
}
.parallax.parallax-opacity-20 .parallax-inner {
opacity: 0.2;
}
.parallax.parallax-opacity-30 .parallax-inner {
opacity: 0.3;
}
.parallax.parallax-opacity-40 .parallax-inner {
opacity: 0.4;
}
.parallax.parallax-opacity-50 .parallax-inner {
opacity: 0.5;
}
.parallax.parallax-opacity-60 .parallax-inner {
opacity: 0.6;
}
.parallax.parallax-opacity-70 .parallax-inner {
opacity: 0.7;
}
.parallax.parallax-opacity-80 .parallax-inner {
opacity: 0.8;
}
.parallax.parallax-opacity-90 .parallax-inner {
opacity: 0.9;
}
/*
---------------------------
SECTION - CONTENT
---------------------------
*/
.vertical-section-name {
overflow: hidden;
width: 1.6em;
position: absolute;
top:50%;
left:40px;
transform: translateY(-55%);
opacity: 0.7;
z-index: 99;
}
.section-up-medium .vertical-section-name {
transform: translateY(-10%);
}
.vertical-section-name-inner {
display: inline-block;
text-align: center;
white-space: nowrap;
transform-origin: 50% 50%;
transform: translate(-3px,0) rotate(-90deg);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 3px;
}
.vertical-section-name-inner:before {
content: "";
float: left;
margin-top: 100%;
}
.vertical-section-name-inner span {
font-weight: 700;
}
.vertical-section-name-inner span:after {
content: "";
display: inline-block;
width: 14px;
height: 1px;
background: #002164;
opacity: 0.3;
margin: 0 4px 3px;
}
.bg-primary .vertical-section-name-inner,
.bg-tertiary .vertical-section-name-inner,
.bg-dark .vertical-section-name-inner {
color: #fff;
}
.bg-primary .vertical-section-name-inner span:after,
.bg-tertiary .vertical-section-name-inner span:after,
.bg-dark .vertical-section-name-inner span:after {
background-color: #fff;
}
@media (max-width: 1500px) {
.vertical-section-name {
left: 20px;
}
}
@media (max-width: 1023px) {
.vertical-section-name {
display: none;
}
}
/* Background Shade */
.bg-section-shade {
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 100%;
z-index: 0;
}
.section-icon-shape {
position: absolute;
top:25%;
left: -10px;
width: 100%;
height: 75%;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
opacity: .2;
z-index: 1;
}
.section-icon-shape .icon-shape {
object-fit: cover;
width: 100%;
max-width: 1200px;
height: auto;
margin-left: 0%;
transform: rotate(-113deg);
}
.section-shade {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 3;
}
.section-shade.top {
top: 0;
}
.section-shade.bottom {
bottom: 0;
}
/* Glows */
.section-glow {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
border-radius: 100%;
transform: scale(1);
z-index: 0;
/* transition-delay: 600ms; */
}
.section-glow.first {
transform: scale(1) translateX(-70%) translateY(-50%);
}
.section-glow.second {
transform: scale(1) translateX(-30%) translateY(-20%);
}
.bg-icon-shape {
position: absolute;
top:0;
left: 0;
min-width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: .08;
}
.bg-icon-shape .icon-shape {
object-fit: cover;
width: 130%;
height: auto;
margin-left: -40%;
}
.section-content {
padding-top: 35px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 35px;
}
.section-content.boxed {
padding-top: 50px;
padding-left: 60px;
padding-right: 60px;
padding-bottom:50px;
border-width: 1px;
border-style: solid;
box-shadow: 0 10px 60px rgba(var(--color-primary-800-rgb), 0.7);
}
.medium-order-1.section-content {
padding-right: 70px;
}
.medium-order-2.section-content {
padding-left: 50px;
}
.with-section-grid .section-content {
padding-inline: 0;
}
/* Dezelfde reden als hierboven bij ".section-boxed > .grid-container": een
* .section-content die zelf binnen een .section-boxed zit (met of zonder
* .with-section-grid eromheen) zou anders zijn EIGEN 35px kantlijn nog eens
* optellen bij de 35px die .section-boxed hierboven al geeft, en zo de tekst
* dubbel laten inspringen. .section-boxed's eigen padding is hier leidend. */
.section-boxed .section-content {
padding-inline: 0;
}
@media (max-width: 1280px) {
.section-content {
}
}
@media (max-width: 1023px) {
.section-content {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
}
.section-content.boxed {
padding-top: 50px;
padding-left: 60px;
padding-right: 60px;
padding-bottom:50px;
border-width: 1px;
border-style: solid;
box-shadow: 0 10px 60px rgba(var(--color-primary-800-rgb), 0.7);
}
.medium-order-1.section-content {
padding-right: 50px;
}
.medium-order-2.section-content {
padding-left: 30px;
}
.with-section-grid .section-content {
/* Was 20px - dat week net af van de 15px die overal elders tussen
* 641px en 1023px als kantlijn geldt (.section-content hierboven,
* wb-faq-head, wb-usp-head, ...), waardoor tekst in een kaart in
* een kaartengrid (bv. featurecardsblock's "full" kaart) op die
* breedtes net iets verder inspringt dan de rest van de pagina.
* Gelijkgetrokken aan die 15px. */
padding-inline: 15px;
}
}
@media (max-width: 640px) {
.section-content {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
}
.section-boxed .section-content {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 25px;
}
.with-section-grid .section-content {
padding-inline: 15px;
}
.section-content.stacked {
padding-top: 2rem;
padding-left:1.5rem;
padding-right:1.5rem;
padding-bottom: 2rem;
margin-top: 20px;
z-index: 9;
}
.medium-order-1.section-content {
padding-right: 10px;
}
.medium-order-2.section-content {
padding-left: 10px;
}
}
.bg-section-content {
position: absolute;
top:0;
left:0;
height: 100%;
z-index: -1;
}
.bg-section-content.full {
width: 100%;
}
.section-heading {
position: relative;
padding-bottom: 1rem;
z-index: 5;
}
.section-heading.text-center {
padding-left: 0rem;
}
.section-icon {
text-align: right;
width: 100%;
font-size: 24px;
}
.section-icon.icon-huge i {
font-size: 72px;
}
.section-icon.on-the-back {
position: absolute;
top:-30px;
left: -30px;
text-align: left;
font-size: 180px;
z-index: -1;
/* opacity: 0.08; */
}
.section-intro {
font-weight: 400;
display: inline-block;
margin-bottom: 25px;
font-size: clamp(0.813rem, 0.6853rem + 0.2098vw, 1.000rem);
color: var(--color-primary-600);
padding: 6px 0px 6px 3px;
text-transform: uppercase;
letter-spacing: 2px;
}
/*
.section-content .section-intro {
margin-left: -30px;
} */
.section-wrapper.bg-primary .section-intro,
.section-wrapper.bg-secondary .section-intro,
.section-wrapper.bg-dark .section-intro,
.section-wrapper.inversed .section-intro {
color: rgba(255, 255, 255, 0.7) !important;
}
.section-introtitle {
font-size: 1.66rem;
display: block;
font-weight: 300;
}
.section-content .section-introtitle {
/* margin-left: 40px; */
}
.section-title {
font-size: 2.2rem;
display: block;
/* font-weight: 600; */
}
.section-content .section-title {
}
.section-content.boxed .section-title {
}
.section-title.title-tiny {
font-size: var(--title-tiny);
}
.section-title.title-small {
font-size: var(--title-small);
}
.section-title.title-medium {
font-size: var(--title-medium);
}
.section-title.title-large {
font-size: var(--title-large);
line-height: 1.2;
}
.section-title.title-xlarge {
font-size: var(--title-xlarge);
line-height: 1.1;
}
.section-title.title-huge {
font-size: var(--title-huge);
line-height: 1;
}
.section-subtitle {
}
.section-lead {
display: block;
/* padding-top: 25px */
}
.section-content .section-lead {
margin-left: 0px;
}
.section-content.boxed .section-lead {
margin-left: 0px;
}
.section-lead p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.7;
}
.section-wrapper.bg-primary .section-lead p,
.section-wrapper.bg-secondary .section-lead p,
.section-wrapper.bg-tertiary .section-lead p,
.section-wrapper.bg-dark .section-lead p,
.section-wrapper.inversed .section-lead p {
color: rgba(255, 255, 255, 0.8) !important;
}
.section-text {
margin-left: 0px;
padding-top: 7px;
display: block;
}
.section-text p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.9;
}
.section-text.p-small p {
font-size: clamp(0.875rem, 0.7054rem + 0.2797vw, 1.125rem);
}
.section-text.p-large p {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
line-height: 1.7;
}
.section-text .button {
margin-top: 10px;
}
.section-wrapper.bg-primary .section-text p,
.section-wrapper.bg-secondary .section-text p,
.section-wrapper.bg-tertiary .section-text p,
.section-wrapper.bg-dark .section-text p,
.section-wrapper.inversed .section-text p {
color: rgba(255, 255, 255, 1) !important;
}
.column-count-2 {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}
.column-count-3 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
@media (max-width: 1280px) {
}
@media (max-width: 1023px) {
}
@media (max-width: 640px) {
}
/* Section Play Button */
.section-play-button {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
z-index: 88;
}
.section-play-button.is-absolute {
position: absolute;
top: 50%;
right: 25%;
transform: translate3d(-50%, -50%, 0);
}
.section-play-button.is-absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.section-play-button:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-40%, -50%, 0);
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;*/
}
.section-play-button:hover:after {
border-color: transparent transparent transparent #fff;
}
/* Section Images */
.section-images {
position: relative;
}
.section-images img {
position: relative;
margin-bottom: 0px;
z-index: 1;
}
.section-images img.image-bg-blur {
position: absolute;
top:0;
left:-0px;
z-index: 0;
filter: blur(30px);
opacity: 0.6;
}
@media (max-width: 1023px) {
.medium-11 .section-images,
.medium-12 .section-images {
margin-top: 20px;
margin-bottom: 30px;
}
}
@media (max-width: 640px) {
.section-images img.radius-top-large {
border-radius: var(--radius-medium);
}
}
/* Expanded */
.section-image.expanded {
position: absolute;
left:0;
width: calc(50% + 50px);
height: 400px;
z-index: 3
}
.section-image img {
border-radius: 10px;
}
.section-boxed .section-image img {
border-radius: 5px;
}
.section-image-absolute {
position: absolute;
bottom: 0;
right:0;
width: 90%;
}
.section-image-absolute figure img {
transform: translate(20%, 10%);
}
.section-image-usp {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-70%) translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 20px;
margin:0;
padding:0;
list-style: none;
z-index: 3;
}
.section-image-usp li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 15px 30px 15px 20px;
border-width: 1px;
border-style: solid;
background: var(--color-white);
border-radius: var(--radius-medium);
box-shadow: 0 10px 30px rgba(var(--color-primary-600-rgb), 0.3);
font-size: clamp(1.000rem, 0.8304rem + 0.2797vw, 1.250rem);
font-weight: 600;
color: var(--color-primary-950);
}
.section-image-usp li:nth-of-type(even) {
transform: translateX(-30px);
}
.section-image-usp li:last-child {
margin-top: 50px;
}
.section-image-usp li .section-image-usp-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.section-image-usp li .section-image-usp-icon img {
object-fit: scale-down;
max-width: 36px;
height: 36px;
}
@media (max-width: 1680px) {
.section-image-absolute figure img {
transform: translate(20%, 10%);
}
}
@media (max-width: 1430px) {
.section-image-absolute figure img {
transform: translate(15%, 10%);
}
}
@media (max-width: 1023px) {
.section-image-absolute {
right: auto;
left: 0;
bottom: 20px;
width: 100%;
}
}
@media (max-width: 1023px) {
.section-image-absolute {
position: relative;
right: auto;
left: 0;
bottom: 60px;
width: 100%;
}
.section-image-usp li {
padding: 10px 20px 10px 10px;
}
.section-image-usp li .section-image-usp-icon {
width: 30px;
height: 30px;
}
.section-image-usp li .section-image-usp-icon img {
object-fit: scale-down;
max-width: 26px;
height: 26px;
}
}
/* VIDEO */
.section-image .section-image-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 60px;
height: 60px;
z-index: 88;
}
.section-image .section-image-play:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-40%, -50%, 0);
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;*/
}
.section-image .section-image-play:hover:after {
border-color: transparent transparent transparent #fff;
}
/* Listing */
.section-listing {
margin: 30px;
margin-left: 30px;
}
.section-listing ul {
list-style: none;
margin-left:0;
margin-top: 10px !important;
}
.section-listing ul li {
position: relative;
padding: 6px;
padding-left: 40px;
}
.section-listing ul li a,
.section-listing ul li div {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
font-weight: 700;
}
.section-listing ul li a:hover {
color: var(--color-primary-400);
}
.section-listing ul li i {
position: absolute;
top:8px;
left: 0px;
font-size: 24px;
}
@media (max-width: 1280px) {
.section-listing ul li {
font-size: 1rem;
padding: 5px;
padding-left: 2.5rem;
}
}
@media (max-width: 1023px) {
.section-listing ul li {
font-size: 1.2rem;
padding: 5px;
padding-left: 2.5rem;
}
}
@media (max-width: 640px) {
.section-listing {
margin: 30px;
margin-left: 10px;
margin-right: 0;
margin-bottom: 10px;
}
}
/* Section Badge */
.section-badge {
position: absolute;
/* bottom: calc(50% - 100px); */
width: 200px;
height: 200px;
border-radius: 1000px;
padding: 12px;
border: 1px solid var(--color-primary-300);
background: var(--color-white);
box-shadow: 0 10px 30px rgba(var(--color-primary-600-rgb), 0.3);
z-index: 98 !important;
text-decoration: none !important;
transition: transform 0.2s ease-in-out;
}
.section-badge.small {
transform: scale(0.7);
}
.section-badge.badge-position-left {
left: -80px;
}
.section-badge.badge-position-right {
right: -80px;
left: auto;
}
/* Position */
.section-badge.badge-position-top-left {
top: -80px;
left: -80px;
}
.section-badge.badge-position-top-center {
top: -80px;
left: 50%;
margin-left: -100px;
}
.section-badge.badge-position-top-right {
top: -80px;
right: -80px;
}
.section-badge.badge-position-bottom-left {
bottom: -80px;
left: -80px;
}
.section-badge.badge-position-bottom-center {
bottom: -100px;
left: 50%;
margin-left: -100px;
}
.section-badge.badge-position-bottom-right {
bottom: -100px;
right: -80px;
}
.section-badge.badge-position-center-left {
top: 50%;
margin-top: -100px;
left: -80px;
}
.section-badge.badge-position-center-center {
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
.section-badge.badge-position-center-right {
top: 50%;
margin-top: -100px;
right: -80px;
}
.section-badge:after {
position: absolute;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
border: 1px dashed #fff;
border-radius: 1000px;
opacity: 0.1;
z-index: 1;
content:'';
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
/* .section-badge:hover {
transform: scale(1.05);
} */
.section-badge .section-badge-icon {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.section-badge .section-badge-icon img{
max-width: 80px;
max-height: 80px;
}
.section-badge .section-badge-icon i {
font-size: 70px;
display: flex;
align-items: center;
}
.section-badge svg {
/* -webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite; */
-webkit-animation: spin 20s linear infinite ;
animation: spin 20s linear infinite;
}
.section-badge text {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 400;
letter-spacing: 8px;
text-transform: uppercase;
fill: var(--color-primary-950);
text-decoration: none !important;
}
@media (max-width: 640px) {
.section-badge {
bottom: 50px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 1000px;
padding: 4px;
}
.section-badge .section-badge-icon-img img {
max-width: 34px;
border-radius: 100px;
}
.section-button {
margin-top: 15px;
}
}
@-webkit-keyframes spin {
0% {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0))";
transform:rotate(0deg)
}
to {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360))";
transform:rotate(1turn)
}
}
@keyframes spin {
0% {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(0), M12=-sin(0), M21=sin(0), M22=cos(0))";
transform:rotate(0deg)
}
to {
zoom: 1;
filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(360), M12=-sin(360), M21=sin(360), M22=cos(360))";
transform:rotate(1turn)
}
}
/* Carousel */
.section-slider-wrapper {
overflow: hidden;
padding-block: 2rem;
padding-bottom: 60px;
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
@media (max-width: 640px) {
.section-slider-wrapper {
overflow: hidden;
padding-block: 2rem;
padding-inline: 1rem;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
}
/*
---------------------------
SUB NAVIGATION
---------------------------
*/
.section-with-sub .grid-container {
position: relative;
z-index: 9;
top: -20px
}
.section-subnav {
position: relative;
padding: 0rem 30px;
margin: 0rem 0 0px;
}
#mobile-subs .section-subnav {
border: 0;
margin-bottom: 0;
}
.section-subnav ul {
padding: 0px 0px;
margin: 0px;
list-style: none;
}
.section-subnav ul li {
padding: 0px 0 0px 0;
margin: 0px 0 0px 0;
}
.section-subnav ul li:last-child {
border:0 !important;
}
.section-subnav ul li a {
padding-left: 0;
color: #002164;
font-weight: 500;
display: block;
padding: 0.3em 1em 0.3em 1rem;
font-size: 1rem !important;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.bg-tertiary .section-subnav ul li a {
color: #fff;
}
.section-subnav ul li a:hover {
color: #008aff;
}
.section-subnav ul li a:before {
position: absolute;
left: 2px;
top:7px;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:13px;
margin-right: 0px;
color: rgba(0, 122, 250, 1);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.section-subnav ul li a:hover:before {
-webkit-transform: translate(3px, 0);
transform: translate(3px, 0);
opacity: 1;
color: #008aff;
}
.section-subnav ul li.item-breadcrumb a:before {
opacity: 1;
color: #008aff
}
.section-subnav ul li.item-breadcrumb a {
color: #056499;
font-weight: 700;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a:hover {
color: #fff !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).section-subnav ul li a:before {
color: #fff !important;
}
.bg-primary.section-subnav ul li a
.bg-secondary.section-subnav ul li a,
.bg-color3.section-subnav ul li a,
.bg-dark.section-subnav ul li a {
color: rgba(255, 255, 255, 0.7) !important;
}
.bg-primary.section-subnav ul li a:hover,
.bg-secondary.section-subnav ul li a:hover,
.bg-color3.section-subnav ul li a:hover,
.bg-dark.section-subnav ul li a:hover {
color: rgba(255, 255, 255,1) !important;
}
.bg-primary.section-subnav ul li a:before,
.bg-secondary.section-subnav ul li a:before,
.bg-color3.section-subnav ul li a:before,
.bg-dark.section-subnav ul li a:before {
color: rgba(255, 255, 255, 1) !important;
}
/* Footer */
.section-footer {
padding-top:1rem;
padding-left:0px;
}
.section-button-absolute {
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%,-100px,0);
z-index: 5;
}
.button.section-button-absolute:active {
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%,-99px,0) !important;
z-index: 5;
}
@media (max-width: 1280px) {
.section-button-absolute {
transform: translate3d(-50%,-50px,0);
}
.section-slider-container .swiper-button-prev,
.section-slider-container .swiper-button-next {
left: 0rem;
opacity: 1;
}
.section-slider-container .swiper-button-next {
left: 50px;
}
.section-carousel .swiper-button-disabled {
opacity: .4;
}
}
@media (max-width: 640px) {
.section-button-absolute {
}
.section-slider-container .swiper-button-prev,
.section-slider-container .swiper-button-next {
left: 0rem;
opacity: 1;
width: 30px;
height: 24px;
bottom:-48px;
}
.section-slider-container .swiper-button-next {
left: 50px;
}
.section-carousel .swiper-button-disabled {
opacity: .4;
}
.swiper-button-prev:before,
.swiper-button-next:before {
font-size: 24px;
color: #22155a
}
}
/* Accordion */
.section-accordion .section-accordion-item {
background: #fff;
border: 1px solid var(--color-primary-100);
border-radius: var(--radius-xlarge) !important;
box-shadow: 0 5px 15px rgba(var(--color-primary-800-rgb), 0.1);
margin: 0 0 10px 0;
}
.section-accordion .section-accordion-item:hover {
border-color: var(--color-primary-600);
background-color: transparent !important;
}
.section-accordion .section-accordion-item.is-active {
}
.section-accordion .section-accordion-title {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
font-weight: 600;
color: var(--color-primary-950);
border:0 !important;
background: transparent !important;
padding: 25px;
padding-left: 60px;
}
.section-accordion .accordion-title:hover {
color: var(--color-primary-950);
background-color: transparent !important;
}
.section-accordion .is-active .accordion-title {
color: var(--color-primary-950);
background-color: transparent !important;
}
.accordion-item:first-child>:first-child {
border: 0;
}
.section-accordion .accordion-title::before {
position: absolute;
top: 22px;
left: 20px;
right: auto;
margin-top: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:24px;
color: var(--color-primary-600);
transition: all 0.2s ease-in-out;
}
.section-accordion .is-active .accordion-title::before {
transform: rotate(180deg);
content: "";
-webkit-mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
}
.section-accordion .section-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 60px;
}
@media (max-width: 640px) {
.section-accordion .section-accordion-title {
padding: 15px;
padding-left: 45px;
line-height: 1.5;
font-weight: 500;
}
.section-accordion .accordion-title::before {
top: 13px;
left: 15px;
font-size:20px;
}
.section-accordion .section-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 45px;
}
}
/* --- /templates/xso/css/categories.css --- */
/*
---------------------------
CATEGORIES
---------------------------
*/
.imagebox {
width: 100%;
display: block;
position: relative;
border: 0px solid #fff;
min-height: 280px;
overflow: hidden;
position: relative;
z-index: 98 !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
[data-whatintent='mouse'] a.imagebox:hover {
z-index: 99 !important;
/* transform: translateY(-5px) */
}
[data-whatintent='mouse'] a.imagebox {
cursor: pointer;
}
.imagebox .imagebox-image {
position: absolute;
top: 0px;
left:0px;
bottom: 0px;
right: 0px;
z-index: 2;
-webkit-backface-visibility: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a.imagebox:hover .imagebox-image {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagebox .imagebox-image.bright:after {
opacity: 0;
}
a.imagebox:hover .imagebox-image:after {
opacity: 0;
}
.imagebox .imagebox-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 3;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
[data-whatintent='mouse'] a.imagebox:hover .imagebox-overlay {
/* opacity: .8 !important; */
opacity: 0.8;
}
/* Shade */
.imagebox .image-shade {
position: absolute;
left: 0;
width: 100%;
height: 60%;
display: block;
z-index: 1;
opacity: .9;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.imagebox .image-shade.bottom {
top: auto;
bottom:0;
height: 80%;
}
[data-whatintent='mouse'] a.imagebox:hover .image-shade {
opacity: 1;
}
.imagebox,
.imagebox.hover-shadow:before,
.imagebox .imagebox-image,
.imagebox .imagebox-overlay,
.imagebox .image-shade {
border-radius: inherit;
}
.small-margin-collapse .imagebox,
.small-margin-collapse .imagebox.hover-shadow:before,
.small-margin-collapse .imagebox .imagebox-image,
.small-margin-collapse .imagebox .imagebox-overlay {
border-radius: 0px !important;
}
.full .imagebox,
.full .imagebox.hover-shadow:before,
.full .imagebox .imagebox-image,
.full .imagebox .imagebox-overlay {
border-radius: 0px !important;
}
.small-margin-collapse .imagebox.hover-shadow:before {
display: none !important;
}
[data-whatintent='mouse'] .small-margin-collapse a.imagebox:hover {
transform: translateY(0)
}
.small-margin-collapse .imagebox.first,
.small-margin-collapse .imagebox.first .imagebox-image,
.small-margin-collapse .imagebox.first .imagebox-overlay {
border-radius: 3px 0 0 3px !important;
}
.small-margin-collapse .imagebox.last,
.small-margin-collapse .imagebox.last .imagebox-image,
.small-margin-collapse .imagebox.last .imagebox-overlay {
border-radius: 0px 3px 3px 0 !important;
}
.imagebox .imagebox-play {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
border-radius: 100px;
line-height: 1;
padding: 0;
background: #fff;
text-align: center;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.21);
z-index: 99;
}
.imagebox .imagebox-play:before {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
content: '';
border-radius: 1000px;
background: #fff;
opacity: 0.4;
}
.imagebox .imagebox-play:after {
position: absolute;
top: 50%;
left: 50%;
content: '';
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 14px 0 14px 26px;
border-color: transparent transparent transparent var(--color-primary-600);
}
.imagebox .imagebox-description {
position: absolute;
top: 0;
left:0;
bottom: 0px;
right: 0px;
z-index: 4;
border-radius: 0;
overflow: hidden;
-webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.imagebox:hover .imagebox-description {
opacity: 1;
}
.imagebox .imagebox-description .imagebox-title-wrap {
position: absolute;
left:0;
right:0;
z-index: 3;
}
.imagebox-description .imagebox-title-wrap {
text-align: left;
padding: 30px 1rem 25px 30px;
}
/* Top */
.imagebox .imagebox-description.top .imagebox-title-wrap {
top:0;
padding-top: 30px;
}
/* Bottom */
.imagebox .imagebox-description.bottom .imagebox-title-wrap {
bottom:0;
}
/* Center */
.imagebox .imagebox-description.center .imagebox-title-wrap {
top: 50%;
transform: translateY(-50%);
left:0;
width: 100%;
text-align: center;
}
.imagebox .imagebox-description .imagebox-intro {
display: inline-block;
font-size: 11px;
line-height: 1;
font-weight: 600;
padding: 5px 10px 5px 30px;
margin-bottom: 5px;
color: #fff;
background: var(--color-primary-600);
transform: translate(-30px);
}
.imagebox .imagebox-description .imagebox-title {
display: block;
font-size: 1.3rem;
line-height: 1.2;
font-weight: 500;
margin: 0;
padding: 0em 0 0px;
}
a.imagebox:hover .imagebox-description .imagebox-title {
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 70%;
}
.imagebox .imagebox-description .imagebox-title.title-small {
font-size: clamp(1.000rem, 0.7456rem + 0.4196vw, 1.375rem);
}
.imagebox .imagebox-description .imagebox-title.title-medium {
font-size: clamp(1.125rem, 0.9432rem + 0.4545vw, 1.625rem);
}
.imagebox .imagebox-description .imagebox-title.title-large {
line-height: 1.1;
font-size: clamp(1.375rem, 1.1477rem + 0.5682vw, 2.000rem);
}
.imagebox .imagebox-description .imagebox-title.title-xlarge {
line-height: 1.1;
font-size: clamp(1.500rem, 1.0455rem + 1.1364vw, 2.750rem);
}
.imagebox .imagebox-description .imagebox-title-wrap.bg-white .imagebox-title {
}
.imagebox .imagebox-description p {
margin: 10px 0 0 0;
font-size: clamp(0.750rem, 0.6591rem + 0.2273vw, 1.000rem);
line-height: 1.3;
-webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.imagebox:hover .imagebox-description p {
visibility: visible;
opacity: 1;
}
.imagebox .imagebox-quote {
padding: 0px 5px 0 0rem;
line-height: 1.3;
font-size: 1.1rem;
font-weight: 500;
}
.imagebox .imagebox-arrow {
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 88;
font-size: 1.2rem;
opacity: 1;
transform: translate(0, 0);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.imagebox .imagebox-arrow i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.imagebox:hover .imagebox-arrow {
opacity: 1;
}
.imagebox .imagebox-button {
margin-top: 15px;
display: inline-flex;
align-items: center;
justify-content: space-around;
z-index: 88;
-webkit-transition: transform 0.2s ease-in-out;
-moz-transition: transform 0.2s ease-in-out;
-ms-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.imagebox .imagebox-footer {
position: absolute;
left: 0;
bottom:0;
width: 100%;
padding: 27px 0px;
z-index: 55;
}
.imagebox .imagebox-footer .imagebox-footer-price {
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 1;
background: var(--color-primary-600);
padding: 5px 15px 2px 30px;
border-radius: 0 3px 3px 0;
}
.imagebox .imagebox-footer .imagebox-footer-info {
margin-top:4px;
display: block;
font-size: 12px;
font-weight: 400;
color: #fff;
padding-left: 30px;
}
/* Badge */
.imagebox-badge {
position: absolute;
top: 10px;
right:-5px;
padding-top: 20px;
width: 120px;
height: 120px;
border-radius: 200px;
text-align: center;
line-height: 1;
color: #fff;
z-index: 88;
transform: rotate(12deg)
}
.imagebox-badge-intro {
font-size: 1rem;
}
.imagebox-badge-intro.striped {
text-decoration: line-through;
}
.imagebox-badge-title {
font-size: 2.2rem;
font-weight: 700;
display: block;
padding: 6px 0;
}
.imagebox-badge-info {
}
/* Imagobox Heights (all) */
.blocks-height-small .imagebox {
min-height: 160px;
}
.blocks-height-medium .imagebox {
min-height: 260px;
}
.blocks-height-large .imagebox {
min-height: 360px;
}
.blocks-height-xlarge .imagebox {
min-height: 400px;
}
.blocks-height-huge .imagebox {
min-height: 460px;
}
/* Imagobox Heights (seperato) */
.imagebox.height-small {
min-height: 160px;
}
.imagebox.height-medium {
min-height: 300px;
}
.imagebox.height-large {
min-height: 380px;
}
.imagebox.height-xlarge {
min-height: 500px;
}
.imagebox.height-huge {
min-height: 660px;
}
/* List */
.imagebox-list ul {
list-style: none;
margin:0;
margin-top: 1rem;
}
.imagebox-list ul li {
color:#fff;
font-size: 1.3rem;
}
.imagebox-list ul li i {
color: var(--color-primary-500);
}
@media (max-width: 1280px) {
.section-slider-container .imagebox {
min-height: 200px;
}
.blocks-height-small .imagebox {
min-height: 100px;
margin-bottom: 0;
}
.imagebox-description .imagebox-title-wrap {
padding-left: 1rem;
padding-bottom: 1rem;
}
.imagebox .imagebox-description.top .imagebox-title-wrap {
padding-top: 1rem;
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 80%;
}
.imagebox .imagebox-description p {
font-size: 1rem;
}
}
@media (max-width: 1023px) {
.section-slider-container .imagebox {
min-height: 170px;
}
.blocks-height-small .section-slider-container .imagebox {
min-height: 100px;
margin-bottom: 0;
}
.section-slider-container .imagebox.height-xlarge {
min-height: 360px;
}
.imagebox.height-huge {
min-height: 460px;
}
.imagebox .imagebox-description.top .imagebox-title,
.imagebox .imagebox-description.bottom .imagebox-title {
max-width: 70%;
}
}
@media (max-width: 640px) {
.blocks-height-medium .imagebox {
min-height: 120px;
}
}
/*
---------------------------
ICON BOX
---------------------------
*/
.iconbox {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 80px;
padding: 4rem 3rem;
backface-visibility: hidden;
}
.iconbox .iconbox-image {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.iconbox .iconbox-image img {
max-width: 80px;
}
.iconbox .iconbox-section {
position: relative;
z-index: 3;
}
.iconbox .iconbox-section .iconbox-title {
}
.iconbox .iconbox-section p {
line-height: 1.5;
}
@media (max-width: 1280px) {
.iconbox .iconbox-section .iconbox-title {
font-size: 1.3rem;
}
.iconbox .iconbox-section p {
font-size: 1.1rem;
}
}
@media (max-width: 1023px) {
.iconbox {
min-height: 100px;
padding: 2rem 1rem;
}
.iconbox .iconbox-image {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.iconbox .iconbox-image img {
max-width: 60px;
}
.iconbox .iconbox-section .iconbox-title {
font-size: 1.2rem;
}
.iconbox .iconbox-section p {
font-size: 1rem;
}
}
/*
---------------------------
COLUMN BOX
---------------------------
*/
.card {
position: relative;
min-height: 100px;
backface-visibility: hidden;
color: var(--color-primary-900);
}
.card-inner {
position: relative;
z-index: 2;
}
@media (max-width: 1100px) {
.card-heading {
padding: 1.5rem 2rem 1rem 1.5rem;
}
}
.card-image {
overflow: hidden;
position: relative;
display: block;
z-index: 1;
}
a.card-image,
.card-image img {
position: relative;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition:transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.card-image:hover img,
.card-image a:hover img {
transform: scale(1.05);
}
.card-image a {
position: relative;
display: block;
margin:0 !important;
padding:0 !important;
}
.card-image a:hover {
display: block;
}
.card-image .card-image-title-wrap {
position: absolute;
bottom: 0;
width: 100%;
display: block;
padding: 0rem 2rem 1rem 1rem;
}
.card-image .card-image-title-wrap .card-image-title {
max-width: 100%;
color: #fff;
font-size: 1.4rem;
margin-bottom:0;
z-index: 3;
}
.card-image .card-image-title-wrap i {
position: absolute;
top: 5px;
right:2rem;
color: #ffffff;
font-size: 1.125rem
}
@media (max-width: 1100px) {
.card-image .card-image-title {
font-size: 1.4rem;
}
}
@media (max-width: 1023px) {
.card-image .card-image-title {
padding: 1rem 1.5rem 0.5rem 1rem;
max-width: 90%;
color: #fff;
font-size: 1.2rem;
}
}
@media (max-width: 640px) {
.card-image .card-image-title {
max-width: 80%;
color: #fff;
font-size: 1.6rem;
line-height: 1.3;
}
}
.card-icon {
border-radius: 0px;
font-size: 1.4rem;
text-align: center;
}
.card-icon.icon-small {
font-size: 1.4rem;
}
.card-icon.icon-medeium {
font-size: 2rem;
}
.card-icon.icon-large {
font-size: 3rem;
}
.card-icon.icon-huge {
font-size: 4rem;
}
.card-section {
position: relative;
display: block;
padding: 25px 25px 25px;
z-index: 2;
}
.card.with-footer .card-section {
padding-bottom: 90px;
}
.card-section .card-title {
font-weight: 500;
line-height: 1.3;
}
.card-lead {
}
.card-lead p {
font-size: 0.96rem;
}
.card-link {
font-weight: 700;
padding-left:0 !important;
}
/* Centered */
.text-center .card-section {
padding: 1rem 2.5rem;
}
/* Listing */
.card-listing {
position: relative;
z-index: 996 !important;
}
.card-listing ul {
list-style: none;
margin:0;
padding:0;
}
.card-listing ul li {
}
.card-listing ul li:last-child {
border:0;
}
.card-listing ul li > a {
padding-left: 0;
font-weight: 600;
display: block;
padding: 0.5em 1em 0.5em 1rem !important;
font-size: 15px;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
color: var(--color-primary-900);
}
.card-listing li > a i {
position: absolute;
top: 10px;
left: 0;
color: var(--color-primary-600);
font-size: 12px
}
.card-listing li > a:hover {
color: var(--color-primary-600);
}
.card-listing li > a:hover i {
transform: translateX(3px);
color: var(--color-primary-600);
}
.card .card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 25px;
}
.card-footer-timestamp {
font-size: 14px;
}
.card-button {
}
/* Card backgrounds */
.card-background {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 1;
}
.card-icon-shape {
position: absolute;
top:0%;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
opacity:1;
z-index: 1;
}
.card-icon-shape .icon-shape {
width: 120%;
height: auto;
margin-left: 0%;
transform: rotate(0deg) translateX(100px)translateY(200px);
}
.card-shade {
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 1;
}
.card-shade.top {
top: 0;
}
.card-shade.bottom {
bottom: 0;
}
@media (max-width: 1100px) {
.card-listing li > a {
text-overflow: ellipsis;
font-weight: 700;
white-space: nowrap;
width: 100%;
padding-right: 2.5rem;
overflow: hidden;
}
.card-listing li > a i {
position: absolute;
top: 12px;
right:3px;
}
.sidebar .card-usp-listing li {
font-size: 0.86rem;
padding-left: 20px;
}
.sidebar .card-usp-listing li i{
font-size: 1rem;
}
.card .card-footer {
padding: 1rem 1rem 1rem;
}
.card-button {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.card-button i {
display: none !important;
}
}
@media (max-width: 1023px) {
.card-section {
padding: 20px 15px 20px;
z-index: 2;
}
.card-listing li > a {
text-overflow: ellipsis;
font-weight: 700;
white-space: nowrap;
width: 100%;
font-size: 0.86rem;
padding: 0.66em 0em 0.66em 0rem;
padding-right: 1rem;
overflow: hidden;
}
.card-listing li > a i {
}
.sidebar .card-usp-listing li {
font-size: 0.96rem;
padding-left: 30px;
}
.sidebar .card-usp-listing li i{
font-size: 1.1rem;
}
.card .card-footer {
padding: 1rem 1rem 1rem;
}
.card-button {
font-size: 0.86rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.card-button i {
display: none !important;
}
}
/* --- /templates/xso/css/brands.css --- */
.brands-slider {
padding-block: 2rem;
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.brand-box {
display: flex;
align-items: center;
justify-content: center;
width: 15vw;
min-height: 100px;
}
.brand-box img {
position: relative;
z-index: 2;
width: 150px;
max-height: 70px;
object-fit: contain;
filter: grayscale(100%) contrast(1.2);
opacity: 0.6;
transition: all 0.2s ease-in-out;
}
.brand-box:hover img {
opacity: 1;
filter: grayscale(0%) contrast(1.2);
}
@media screen and (max-width: 1023px) {
.brand-box {
display: flex;
align-items: center;
justify-content: center;
width: 20vw;
min-height: 100px;
}
.brand-box img {
position: relative;
z-index: 2;
width: 60px;
max-height: 30px;
}
}
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 600px;
left: 50%;
margin-left: -720px;
z-index: 6;
}
.brands-circle-shape {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
opacity: .08;
}
.brands-circle-shape .icon-shape {
object-fit: contain;
width: 100%;
height: auto;
margin-left: 6%;
}
.brands-circle-item {
position: absolute;
/* top: 50%; */
bottom:0;
left: 50%;
transform: translateX(-50%) translateY(0%);
}
.brands-circle-box {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
border: 1px solid var(--color-primary-200);
background: var(--color-white);
border-radius: var(--radius-large);
box-shadow: 0 10px 30px rgba(var(--color-primary-700-rgb), 0.1);
font-size: 20px;
font-weight: 600;
}
.brands-circle-box img {
width: auto;
max-width: auto;
max-height: 60px;
}
/* TimeWriter */
.brands-circle-item.tw {
bottom:0;
left: 50%;
transform: translateX(-50%) translateY(0%);
}
.brands-circle-box.main {
width: 140px;
height: 140px;
border-radius: 100%;
padding: 0;
}
.brands-circle-box.main img {
width: 80px;
max-width: 80px;
height: 80px;
}
/* Exact */
.brands-circle-item.exact {
bottom: 320px;
left: 260px;
transform: translateX(0);
}
/* Nmbrs */
.brands-circle-item.nmbrs {
bottom: 510px;
}
.brands-circle-item.nmbrs img {
max-height: 90px;
}
/* Snelstart */
.brands-circle-item.snelstart {
bottom: 320px;
left: auto;
right: 400px;
transform: translateX(0) scale(0.8);
}
/* Moneybird */
.brands-circle-item.moneybird {
bottom: 130px;
left: 160px;
transform: translateX(0) scale(1);
}
/* e-Boekhouden */
.brands-circle-item.e-boekhouden {
bottom: 80px;
left: auto;
right: 200px;
transform: translateX(0) scale(0.7);
}
/* Stip-t */
.brands-circle-item.stip-t {
bottom: 20px;
left: 410px;
transform: translateX(0) scale(0.8);
}
/* Asperion */
.brands-circle-item.asperion {
bottom: 150px;
left: 510px;
transform: translateX(0) scale(0.6);
}
/* Monix */
.brands-circle-item.minox {
bottom: 340px;
left: auto;
right: 200px;
transform: translateX(0) scale(0.6);
}
.brands-circle-item.minox img{
max-width: 170px;
}
@media screen and (max-width: 1023px) {
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 500px;
left: 50%;
margin-left: -720px;
transform: scale(0.8);
z-index: 6;
}
}
@media screen and (max-width: 640px) {
.brands-circle-wrapper {
position: relative;
min-width: 1440px;
width: 1440px;
min-height: 350px;
left: 50%;
margin-left: -720px;
transform: scale(0.5);
z-index: 6;
}
}
/* --- /templates/xso/css/testimonials.css --- */
/*
---------------------------
TESTIMONIALS
---------------------------
*/
.testimonials-slider {
padding-bottom: 60px;
}
.testimonials-slider .splide__track {
overflow: visible;
}
.testimonial-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-width: 1px;
border-style: solid;
padding: 25px;
background-image: linear-gradient(to bottom, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
/* Ratings */
.testimonial-rating {
display: flex;
align-items: center;
justify-content: flex-start;
gap:0;
}
.testimonial-rating i {
margin: 0;
padding: 0;
}
/* Content */
.testimonial-content {
padding: 20px 0;
border:0;
}
.testimonial-content p {
font-size: 18px;
color: var(--color-primary-950);
}
/* Footer */
.testimonial-footer {
border-top: 3px solid var(--color-primary-200);
display: flex;
align-items: center;
justify-self: flex-end;
gap: 20px;
padding: 20px 0;
}
.testimonial-author-image {
width: 64px;
}
.testimonial-author-image img {
border-radius: 100%;
}
.testimonial-author-name {
font-weight: 700;
}
/* --- /templates/xso/css/breadcrumbs.css --- */
.breadcrumbs-wrapper {
border-bottom: 1px solid rgba(var(--color-primary-700-rgb), 0.1);
padding: 20px 0;
}
.breadcrumbs {
padding: 0 30px 0 35px;
margin: 0 0 0rem 0;
list-style: none;
}
.breadcrumbs::after, .breadcrumbs::before {
display: table;
content: ' ';
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-order: 1;
order: 1
}
.breadcrumbs::after {
clear: both
}
.breadcrumbs li {
float: left;
font-size: .86rem;
cursor: default;
text-transform: none;
color: var(--color-text);
font-weight: 700;
}
.breadcrumbs li:not(:last-child)::after {
position: relative;
margin: 0 .75rem;
opacity: 1;
content: "";
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 10px;
line-height: 1;
color: var(--color-primary-600);
}
.breadcrumbs li:first-child {
/* margin-right: .75rem; */
}
.breadcrumbs li:first-child::after {
/* display: none; */
}
.breadcrumbs a {
font-weight: 400;
color: var(--color-text)
}
.breadcrumbs a:hover {
color: var(--color-primary-600);
text-decoration: none
}
.breadcrumbs .disabled {
color: rgba(255, 255, 255, 0.23);
cursor: not-allowed
}
@media screen and (max-width: 1023px) {
.breadcrumbs-wrapper {
padding: 10px 0;
}
.breadcrumbs {
padding: 0 15px;
}
}
@media screen and (max-width: 640px) {
.breadcrumbs-wrapper {
padding: 10px 0;
}
.breadcrumbs {
padding: 0 15px;
}
}
/* --- /templates/xso/css/usp.css --- */
/*
---------------------------
USP BOX
---------------------------
*/
.uspbox {
position: relative;
backface-visibility: hidden;
}
.uspbox.with-border {
border-width: 1px;
border-style: solid;
padding: 30px;
}
.uspbox .uspbox-title-wrap {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.uspbox .uspbox-title-wrap.align-left {
display: flex;
justify-content: flex-start;
flex-direction: row;
}
.uspbox.hollow {
position: relative;
backface-visibility: hidden;
padding: 30px 30px 30px 30px;
border: 1px solid rgba(0, 33, 100, 0.14);
border-radius: 5px;
}
.uspbox-icon {
padding-bottom: 10px;
}
/* Font Icon */
.uspbox-icon.icon-small i {
font-size: 32px;
}
.uspbox-icon.icon-medium i {
font-size: 40px;
}
.uspbox-icon.icon-large {
padding-bottom: 20px;
}
.uspbox-icon.icon-large i {
font-size: 48px;
}
.uspbox-icon.icon-xlarge {
padding-bottom: 20px;
}
.uspbox-icon.icon-xlarge i {
font-size: 64px;
}
.uspbox-icon.icon-huge {
padding-bottom: 20px;
}
.uspbox-icon.icon-huge i {
font-size: 96px;
}
/* Image Icon */
.uspbox-icon.icon-small img {
width: 32px;
}
.uspbox-icon.icon-medium img {
width: 40px;
}
.uspbox-icon.icon-large img {
width: 48px;
}
.uspbox-icon.icon-xlarge img {
width: 64px;
}
.uspbox-icon.icon-huge img{
width: 96px;
}
.textbox-section {
}
.uspbox .uspbox-title {
font-size: 16px;
font-weight: 600;
margin:0 ;
}
.uspbox .uspbox-title.title-small {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
}
.uspbox .uspbox-title.title-medium {
font-size: clamp(1.063rem, 0.9353rem + 0.2098vw, 1.250rem);
}
.uspbox .uspbox-title.title-large {
font-size: clamp(1.063rem, 0.8505rem + 0.3497vw, 1.375rem);
}
.uspbox .uspbox-title.title-xlarge {
font-size: clamp(1.125rem, 0.7010rem + 0.6993vw, 1.750rem);
}
.uspbox .uspbox-title.title-huge {
font-size: clamp(1.188rem, 0.4668rem + 1.1888vw, 2.250rem);
}
.uspbox-section p {
line-height: 1.4;
}
.textbox-link {
font-weight: 700;
}
/* Centered */
.text-center .textbox-section {
padding: 1rem 2.5rem;
}
@media (max-width: 1280px) {
.uspbox-wrapper {
padding: 0 0rem;
}
.uspbox .uspbox-title {
font-size: 0.86rem;
font-weight: 700;
line-height: 1;
margin:0 ;
}
}
@media (max-width: 640px) {
.section-usp.padding-top-large {
padding-top: 1rem;
}
.section-usp hr {
display: none;
}
.uspbox {
padding: 0 0 5px 0rem;
}
.uspbox i {
font-size: 1rem;
margin-right: 0.5rem ;
}
.cover-caption .uspbox-wrapper {
margin-left:-0.6rem;
}
}
/* --- /templates/xso/css/pricing.css --- */
/*
---------------------------
PRICING Wrapper
---------------------------
*/
.billing-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 700;
}
.switch {
position: relative;
margin-bottom: 0;
outline: 0;
font-size: .875rem;
font-weight: 700;
color: var(--text-color);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 52px;
}
.switch-paddle {
position: relative;
display: block;
width: 86px;
height: 52px;
border-radius: 100px;
background: var(--color-primary-100);
border:1px solid var(--color-primary-200);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
font-weight: inherit;
color: inherit;
cursor: pointer;
}
input:checked~.switch-paddle {
background: var(--color-primary-100);
}
.switch-paddle::after {
position: absolute;
top: 5px;
left: 5px;
display: block;
width: 40px;
height: 40px;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border:1px solid var(--color-primary-700);
background-image: linear-gradient(to bottom, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 1) 100%);
border-radius: 100px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.1),0px 3px 10px rgba(var(--color-primary-500-rgb), 0.3);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
content: "";
}
/* Pricing Box */
.pricingbox {
position: relative;
min-height: 100px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pricingbox.highlight {
/* transform: scale(1.05); */
}
.pricingbox-shade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
z-index: 0;
}
.pricingbox-highlight {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
padding: 5px 20px;
border-radius: 100px;
}
.pricingbox-image {
border-radius: 10px;
position: relative;
display: block;
backface-visibility: hidden;
z-index: 1;
}
a.pricingbox-image,
.pricingbox-image img {
border-radius: 10px;
position: relative;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition:opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.pricingbox-image:hover img,
.pricingbox-image a:hover img {
opacity: 0.9;
}
.pricingbox-image.with-padding img {
border-radius: 5px;
}
.pricingbox-image.round img {
border-radius: 1000px;
}
.pricingbox-image a {
position: relative;
display: block;
margin:0 !important;
padding:0 !important;
}
.pricingbox-image a:hover {
display: block;
}
.pricingbox-section {
position: relative;
display: block;
padding: 25px 35px 25px 35px;
border-radius: 0;
z-index: 2;
}
.pricingbox-section.with-footer {
padding-bottom: 0;
}
.pricingbox-heading {
position: relative;
padding: 40px 35px 10px;
text-align: center;
z-index: 2;
}
.pricingbox-heading .pricingbox-title {
line-height: 1.3;
font-weight: 700;
}
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1.250rem;
}
.pricingbox-heading .pricingbox-title.title-medium {
font-size: 1.6rem;
}
.pricingbox-heading .pricingbox-title.title-large {
font-size: 2.2rem;
line-height: 1;
}
.pricingbox-heading .pricingbox-title.title-xlarge {
font-size: 2.6rem;
}
.pricingbox-heading .pricingbox-title.title-huge {
font-size: 3rem;
}
.pricingbox-heading .pricingbox-title a {
display: block;
color: var(--color-primary-950);
position: relative;
padding-left:0;
}
.pricingbox-heading .pricingbox-title i {
position: relative;
margin-left: 6px;
color: var(--color-primary-600);
font-size: 22px;
-webkit-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.pricingbox-heading .pricingbox-title a:hover i {
transform: translateX(2px)
}
.pricingbox-heading .pricingbox-title a:hover {
opacity: 1;
color: var(--color-primary-950);
}
@media (max-width: 1100px) {
}
@media (max-width: 1023px) {
.pricingbox-section {
padding-top: 15px;
padding-left: 15px;
}
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1rem;
}
}
@media (max-width: 767px) {
.pricingbox-heading .pricingbox-title.title-small {
font-size: 1rem;
}
.pricingbox-heading .pricingbox-title.title-medium {
font-size: 1.250rem;
}
.pricingbox-heading .pricingbox-title.title-large {
font-size: 1.8rem;
line-height: 1;
}
.pricingbox-heading .pricingbox-title.title-xlarge {
font-size: 2.2rem;
}
.pricingbox-heading .pricingbox-title.title-huge {
font-size: 2.4rem;
}
}
.pricingbox-lead {
max-width: 100%;
}
.pricingbox-lead p {
font-size:16px;
}
.pricingbox-link {
font-weight: 700;
padding-left:0 !important;
}
[class*="pricingbox-section bg-"]:not(.bg-white):not(.bg-light) .pricingbox-lead p {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Listing */
.pricingbox-listing {
flex-grow: 2;
position: relative;
z-index: 996 !important;
}
.pricingbox-listing {
position: relative;
list-style: none;
margin:0;
padding:0 35px 0 45px;
}
.pricingbox-listing li:last-child {
border:0;
}
.pricingbox-listing li > .pricingbox-listing-item {
font-weight: 400;
display: flex;
align-items: center;
padding: 10px 1em 10px 35px;
font-size: clamp(0.875rem, 0.7054rem + 0.2797vw, 1.125rem);
letter-spacing: 0px;
position: relative;
line-height: 1.5;
color: var(--text-color);
}
.pricingbox-listing li > a.pricingbox-listing-item {
padding-left: 0;
}
.pricingbox-listing li > .pricingbox-listing-item i {
position: absolute;
top: 12px;
left: 0;
color: var(--color-success);
font-size: 22px;
-webkit-transition: transform 0.1s ease-in-out;
-moz-transition: transform 0.1s ease-in-out;
-ms-transition: transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
}
.pricingbox-listing li > a.pricingbox-listing-item i {
left: auto;
right: 5px;
}
.pricingbox-listing li > a.pricingbox-listing-item:hover {
color: #2748F3;
}
.pricingbox-listing li > a.pricingbox-listing-item:hover i {
transform: translateX(3px);
color: #2748F3;
}
[class*="pricingbox-section bg-"]:not(.bg-white):not(.bg-light) .pricingbox-listing ul li > .pricingbox-listing-item {
color: rgba(255, 255, 255, 1) !important;
}
/* Price */
.pricingbox-price {
position: relative;
z-index: 996 !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px 25px 30px
}
.pricingbox-price .price {
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.pricingbox-price .price-info {
font-size: 14px;
line-height: 1.2;
}
.pricingbox .pricingbox-footer {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
padding: 0rem 35px 35px 35px;
}
.text-center .pricingbox-footer {
display: flex;
justify-content: center;
}
.text-center .pricingbox-footer a {
margin: auto;
}
.pricingbox .pricingbox-footer-extra {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
padding: 0rem 35px 35px 35px;
}
@media (max-width: 640px) {
.pricingbox-listing {
position: relative;
list-style: none;
margin:0;
padding:0 15px 0 25px;
}
.pricingbox-listing li > .pricingbox-listing-item {
padding: 10px 1em 10px 25px;
}
.pricingbox-listing li > .pricingbox-listing-item i {
position: absolute;
top: 12px;
font-size: 18px;
}
.pricingbox .pricingbox-footer {
position: relative;
z-index: 3;
padding: 10px 15px 25px 15px;
}
.pricingbox-price {
position: relative;
z-index: 996 !important;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px 0 20px
}
}
/* --- /templates/xso/css/reviews.css --- */
/*
---------------------------
REVIEWS
---------------------------
*/
.reviewbox {
margin-top: 2rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
padding: 20px;
border: 1px solid rgba(0, 33, 100, 0.17);
border-radius: 5px;
}
.reviewbox-heading {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.reviewbox-author-image {
width: 60px;
height: 60px;
border-radius: 200px;
overflow: hidden;
margin-right: 20px;
}
.reviewbox-author-title {
flex-grow: 1;
}
.reviewbox-author-title h4 {
font-size: 16px;
line-height: 1;
margin:0;
font-weight: 600;
}
.reviewbox-author-title .reviewbox-author-date {
font-size: 13px;
line-height: 1;
margin:0;
}
.reviewbox-heading .object-rating-stars {
margin-top: 10px;
align-self: flex-start;
}
.reviewbox-section {
padding-top:10px;
}
.reviewbox-section p {
font-size: 16px;
font-weight: 400;
}
.reviewbox-text a {
color: #fff;
display: block;
font-weight: 400;
}
.reviews.pagination {
margin-top: 30px;
}
/* Reviews Info */
.reviews-info {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
/* margin-block: 1rem; */
height: 44px;
border-radius: 100px;
padding-right: 20px
}
.cover-heading .reviews-info {
margin-top: 40px;
}
.reviews-info.with-border {
border-width: 1px;
border-style: solid;
}
.review-info-rating-wrapper {
border-width: 1px;
border-style: solid;
height: 44px;
border-radius: 100px;
display: flex;
align-items: center;
padding: 0 20px 0 10px;
}
.reviews-info .g-icon {
display: flex;
align-items: center;
padding-inline: 10px;
height: 44px;
padding: 0px 10px 0 0;
margin-right: 15px;
border-right: 1px solid var(--color-primary-100);
}
.reviews-info .g-icon img {
max-width: 22px;
}
.reviews-info-avatars {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
/* Stars */
.reviews-info-rating {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
}
.reviews-info-rating i {
margin: 0 0px;
padding:0;
}
.reviews-info-rating-number {
font-weight: 700;
margin-left: 5px;
}
/* Avatars */
.reviews-info-avatars img {
width: 50px;
height: 50px;
border-radius: 100px;
border: 2px solid #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
margin: 0 0px 0 -10px;
}
.reviews-info-avatars img:first-child {
margin-left: 0;
}
.reviews-info-avatars .avatar-tiny {
width: 30px;
height: 30px;
}
.reviews-info-text {
font-size: 14px;
padding: 0 10px;
white-space: nowrap;
}
@media (max-width: 640px) {
.reviews-info {
transform-origin: left;
transform: scale(0.7);
}
}
/* --- /templates/xso/css/articles.css --- */
/*
---------------------------
BLOG POST BLOCK
---------------------------
*/
.postblock {
padding: 0rem 0px;
position: relative;
margin-top: 20px;
overflow: hidden;
}
.postblock.with-border {
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.postblock-image {
padding: 2rem;
padding-bottom: 0;
}
.postblock-section {
display: block;
padding: 1rem 0;
margin-bottom: 70px;
}
.postblock-content {
display: block;
}
.postblock-intro {
font-weight: 700;
display: block;
margin-bottom: 5px;
font-size: 0.76rem;
color: #9a9a9a;
padding-left: 2px;
text-transform: uppercase;
letter-spacing: 1px;
}
.postblock-title {
line-height: 1.2;
margin-bottom: 15px;
font-size: 1.6rem;
}
.postblock-title.title-small {
font-size: 1.3rem;
}
.postblock-title.title-medium {
font-size: 2rem;
}
.postblock-title.title-large {
font-size: 3rem;
}
.postblock-title a {
}
.postblock-subtitle {
font-size: 1.2rem;
}
.postblock-meta {
display: block;
padding-top: 1rem;
}
.postblock-meta p{
font-size: 0.86rem;
}
.postblock-lead {
padding-top: 10px;
}
.postblock-lead p {
font-size: 1rem;
font-weight: 400;
}
.postblock-link {
font-weight: 400;
}
.postblock-footer {
position: absolute;
bottom: 0;
left:0;
width: 100%;
padding: 1rem 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.86rem;
}
.postblock-share-buttons .postblock-share-title {
display: inline-block;
padding-top: 4px;
margin-top: 1rem;
margin-right: 10px;
}
.postblock-share-buttons .button{
margin: 10px 5px 0 0;
}
/* Detail */
.postblock-detail .postblock-section {
display: block;
padding: 1rem 0;
margin:auto;
}
.postblock-detail .postblock-detail-intro {
font-weight: 700;
display: block;
margin-bottom: 15px;
font-size: 1.2rem;
color: #989faf;
}
.postblock-detail .postblock-image {
position: relative;
padding: 0rem;
padding-bottom: 0;
}
.postblock-detail .postblock-image.image-size-50.float-left {
margin: 0.66rem 3rem 1rem 0;
}
.postblock-detail .postblock-image .postblock-image-caption {
padding: 10px;
text-align: center;
display: block;
font-size: 0.86rem;
opacity: 0.5;
}
.postblock-detail .postblock-detail-tags {
padding-top: 1rem;
}
.postblock-detail .postblock-detail-tags a {
display: inline-block;
padding: 0 10px;
}
.postblock-detail .postblock-lead p {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 30px;
}
/*
.postblock-detail .postblock-lead p::first-letter {
font-size: 3rem;
}
*/
.postblock-detail .postblock-content p {
font-size: 1.125rem;
font-weight: 400;
margin-bottom: 30px;
}
/* Listing */
.postblock-detail .postblock-content ul {
margin:0;
margin-bottom: 30px;
padding:0;
list-style: none;
}
.postblock-detail .postblock-content ul li {
position: relative;
padding: 0.4rem 0 0 0rem;
font-size: 1.3rem;
font-weight: 400;
}
.postblock-detail .postblock-content ul li a {
}
.postblock-detail .postblock-content ul li a:before {
}
.postblock-detail .postblock-content ul li i.icon-check {
font-size: 1.4rem;
color: #4fb45e;
top: 6px;
left: -2px;
}
.postblock-detail .postblock-content ul li img {
left: -2px;
}
.postblock-detail .postblock-footer {
position: relative;
padding: 1rem 0rem;
margin-top: 1rem;
}
/*
BLOCKQUOTE
---------------------------
*/
.postblock-detail .postblock-content blockquote {
float: right;
max-width:33%;
letter-spacing: 0;
border-left: 0;
text-align: left;
position: relative;
font-style: none;
margin: 0em 0 1.25rem;
margin-top: 40px;
margin-left: 40px;
margin-bottom: 40px;
padding: 0em 0rem 0 0rem;
border-right: 0px solid #ddd;
border-left: 0px solid #ddd;
/* transform: translateX(30%) translateY(0%); */
}
.postblock-detail .postblock-content blockquote:before {
position: absolute;
top: -24px;
left: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.875em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/quote-left.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/quote-left.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
color: #007afa;
font-weight: 700;
font-size: 36px;
line-height: 1;
content: "";
}
.postblock-detail .postblock-content blockquote p {
font-size: 1.8rem;
line-height: 1.4;
font-weight: 700 !important;
color: #002164;
}
.postblock-detail .postblock-content blockquote p strong {
color: rgba(0, 33, 100, 0.47);
font-size: 0.86rem;
font-weight: 700;
font-style: normal;
}
/*
SHARING
---------------------------
*/
.side-share {
position: absolute;
top: 25px;
left: 0;
margin-left: 0px;
width: 80px;
}
.postblock-share-buttons .menu a,
.postblock-share-buttons .menu .button {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- /templates/xso/css/content.css --- */
#page-content {
padding-left: 30px;
padding-right: 6rem;
}
@media (max-width: 1023px) {
#page-content {
padding-left: 15px;
padding-right: 1rem;
}
}
@media (max-width: 640px) {
#page-content {
padding-left: 15px;
padding-right: 15px;
}
}
.textblock {
padding:1rem 0px 3rem;
}
.textblock-intro {
font-weight: 400;
display: block;
margin-bottom: 10px;
font-size: 0.86rem;
padding-left: 2px;
text-transform: uppercase;
letter-spacing: 3px;
}
.textblock-title {
line-height: 1.2;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.textblock-title.title-small {
font-size: var(--title-tiny);
}
.textblock-title.title-medium {
font-size: var(--title-small);
}
.textblock-title.title-large {
font-size: var(--title-medium);
line-height: 1.2;
}
.textblock-title.title-xlarge {
font-size: var(--title-large);
line-height: 1.1;
}
.textblock-title.title-huge {
font-size: var(--title-xlarge);
line-height: 1;
}
.textblock-subtitle {
font-size: 1.2rem;
}
.textblock-meta {
display: block;
padding-top: 0rem;
}
.textblock-meta p{
font-size: 0.86rem;
}
.textblock-lead {
padding-top: 10px;
}
.textblock-lead p {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
font-weight: 600;
line-height: 1.9;
}
.textblock-content P {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
line-height: 1.9;
}
/* Files */
.textblock-files ul {
margin-top: 30px;
}
.textblock-files ul li {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
}
.textblock-files ul.column-2 li {
width: 50%;
float: left;
padding-right: 1rem;
}
.textblock-files ul li a {
display: inline-block;
padding: 10px 20px 10px;
padding-left: 40px;
margin-bottom: 3px;
position: relative;
color: var(--color-primary-950);
border: 1px solid rgba(0, 33, 100, 0.12);
border-radius: var(--radius-medium);
}
.textblock-files ul li a:hover {
color:var(--color-primary-600);
}
.textblock-files ul li a .textblock-file-icon {
position: absolute;
top:8px;
left:15px;
display: flex;
align-items: center;
justify-content: flex-start;
width:30px;
height: 30px;
line-height: 1;
font-size: 20px;
text-align: center;
border-radius: 5px;
/* transform: rotate(-45deg) */
}
.textblock-file-icon i {
color: var(--color-primary-600);
background: transparent !important
}
.textblock-file-icon.doc i{
color: #083582;
}
.textblock-file-icon.pdf i{
color: #e14045;
}
.textblock-file-icon.xls i{
color: #6ab173;
}
.textblock-file-icon.zip i{
color: #ddaa0f;
}
.textblock-files ul li a .file-name {
}
.textblock-files ul li a:hover i {
}
/* Accordion */
.textblock-accordion .textblock-accordion-item {
background: #fff;
border: 1px solid var(--color-primary-300);
border-radius: var(--radius-xlarge) !important;
margin: 0 0 10px 0;
}
.textblock-accordion .textblock-accordion-item:hover {
border-color: var(--color-primary-600);
background-color: transparent !important;
}
.textblock-accordion .textblock-accordion-item.is-active {
}
.textblock-accordion .textblock-accordion-title {
font-size: clamp(1.000rem, 0.8304rem + 0.2797vw, 1.250rem);
font-weight: 500;
color: var(--color-primary-950);
border:0 !important;
background: transparent !important;
padding: 20px;
padding-left: 55px;
}
.textblock-accordion .textblock-accordion-title:hover {
color: var(--color-primary-950);
background-color: transparent !important;
}
.textblock-accordion .is-active .textblock-accordion-title {
color: var(--color-primary-950);
background-color: transparent !important;
}
.textblock-accordion-item:first-child>:first-child {
border: 0;
}
.textblock-accordion .textblock-accordion-title::before {
position: absolute;
top: 18px;
left: 20px;
right: auto;
margin-top: 0;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-plus.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 500;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:22px;
color: var(--color-primary-600);
transition: all 0.2s ease-in-out;
}
.textblock-accordion .is-active .textblock-accordion-title::before {
transform: rotate(180deg);
content: "";
-webkit-mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
mask-image: url(https://www.timewriter.nl/templates/xso/images/icons/ui/circle-minus.svg);
}
.textblock-accordion .textblock-accordion-content {
bordeR:0;
background: transparent;
padding: 0 40px 60px;
padding-left: 60px;
}
.accordion-content .textblock-lead p {
font-size: 1rem;
font-weight: 700;
}
.responsive-embed {
border-radius: var(--radius-medium);
}
@media (max-width: 640px) {
.textblock-accordion .textblock-accordion-title {
padding: 15px;
padding-left: 45px;
font-weight: 600;
}
.textblock-accordion .textblock-accordion-title::before {
position: absolute;
top: 14px;
left: 15px;
font-size:18px;
}
}
/*
---------------------------
TEXT BLOCK IMAGES
---------------------------
*/
.textblock-image {
display: inline-block;
margin: 10px 0 10px 0px;
padding: 0px 0px 0px 0px;
position: relative;
width: 50%;
}
.textblock-image.float-left {
margin-right: 30px;
}
.textblock-image.float-right {
margin-left: 50px;
}
/* Round */
.textblock-image a.round {
border-radius: 100%;
}
/* Sizes */
.image-size-25 {
width: 25%;
}
.image-size-33 {
width: calc(33.33333% - 25px);
}
.image-size-50 {
width: 50%;
}
.image-size-75 {
width: 75%;
}
.image-size-100 {
width: 100%;
margin-bottom: 1em;
margin-left: 0 !important;
}
@media (max-width: 640px) {
.image-size-25 {
width: 50%;
}
.image-size-33,
.image-size-50,
.image-size-75,
.image-size-100 {
width: 100%;
}
}
.textblock-image .textblock-caption {
font-size: 12px;
line-height: 1.1;
color: rgba(var(--color-primary-800-rgb), 0.5) !important;
text-align: center;
width: 100%;
display: block;
font-style: italic;
padding-top: 5px;
}
.textblock-image a.round:before {
border-radius: 100%;
}
.textblock-image a:hover:before {
opacity: 1;
}
.textblock-image.right {
float: right;
margin: 10px 0px 20px 40px;
}
.textblock-image-wide {
float: left;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow:hidden;
position: relative;
}
.textblock-image-wide img {
margin:0px 0px 0px 0px;
border: 0px;
padding: 0px;
display: block;
max-width: 100%;
opacity: 1;
filter: alpha(opacity=100);
}
.image-thumbnails {
display: flex;
margin: 1rem auto 0;
gap: 5px;
padding: 0;
justify-content: center;
}
.image-thumbnail {
width: 70px;
height: 70px;
overflow: hidden;
border-radius: var(--radius-medium);
border: 2px solid#fff;
padding: 5px;
list-style: none;
cursor: pointer;
}
.image-thumbnail.is-active {
border: 2px solid var(--color-primary-600);
}
.image-thumbnail img {
height: 100%;
object-fit: cover;
border-radius: var(--radius-small);
}
/* Hover item */
.gallery-item {
display: block;
position: relative;
}
/*
[class*=' medium-up-'] .gallery-item {
margin-bottom: 40px;
}
*/
.gallery-item img {
/* overflow: hidden; */
border-radius: inherit !important;
}
.gallery-item:before {
position: absolute;
bottom: -15px;
left:-15px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
content:'';
border: 2px solid var(--color-primary-600);
opacity: 0.3;
}
.textblock-image .gallery-item:before,
.textblock-image-gallery .gallery-item:before {
display: none;
}
.gallery-item:after {
position: absolute;
bottom: 10px;
right:10px;
margin-top: 0px;
margin-left: 0px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100px;
opacity: 0;
background-color: #fff;
color: var(--color-primary-600);
text-align: center;
/* Dit blokje is de enige uitzondering op het mask-mechanisme, en met reden:
* het IS al iets - een witte schijf van 40px - en een mask verft het hele
* vlak, dus dan verdwijnt die schijf. De loep ligt hier daarom als
* achtergrondplaatje OP het wit. Prijs daarvan: dit ene icoon heeft zijn
* kleur in het bestand en volgt de huisstijl-skin niet. */
background-image: url(https://www.timewriter.nl/templates/xso/images/icons/decor/magnifying-glass-primary.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
z-index: 88;
transform: translate(130%, 100%);
-webkit-transition: all 0.2s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.2s ease-out; /* FF4+ */
-ms-transition: all 0.2s ease-out; /* IE10? */
-o-transition: all 0.2s ease-out; /* Opera 10.5+ */
transition: all 0.2s ease-out;
}
.gallery-item:hover:after {
opacity: 1;
transform: translate(0, 0);
}
.collapse.textblock-image-gallery a,
.collapse.textblock-image-gallery a.gallery-item,
.collapse.textblock-image-gallery img {
border-radius: 0 !important;
margin-bottom: 0px;
}
.collapse.textblock-image-gallery {
margin-top: 0;
}
/* SLIDES */
.textblock-image-slides {
position: relative;
/* margin-top: 20px; */
}
.textblock-image-slides a {
overflow: hidden;
/* border-radius: 0px; */
margin-bottom: 0px;
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.textblock-image-slides a.radius {
border-radius: 5px;
}
.textblock-image-slides img.radius {
border-radius: 5px;
}
/* CAROUSEL */
.textblock-image-carousel {
}
@media (max-width: 640px) {
.gallery-item:before {
display: none;
}
}
/* --- /templates/xso/css/sidebar.css --- */
.sidebar {
padding-bottom: 3rem;
position: relative;
z-index: 99;
}
.sidebar-content {
/* box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.08), inset 0 -3px 0 0 rgba(0, 0, 0, 0.06); */
box-shadow: inset 0 -2px 0 0 rgba(4, 20, 47, 0.08), 0px 2px 3px rgba(4, 20, 47, 0.08);
border-radius: 10px 10px;
padding-bottom: 2rem;
padding: 2.1rem 1rem 1rem;
}
.sidebar-content .sidebar-title {
font-size: 1.3rem;
padding-left:.5rem;
}
/*
---------------------------
SUB NAVIGATION
---------------------------
*/
.mobile-subnav-button {
display: none;
padding-left:3rem;
float: left;
margin-left: 2rem;
}
.mobile-subnav-button i {
top: 11px;
left: 0.8rem;
right: auto;
color: var(--color-primary-600) !important;
}
#mobile-subs {
display: none;
}
.subnav-title-wrapper {
display: block;
padding: 1rem 1rem;
}
.sidebar-subnav-title {
font-size: 1.4rem;
position: relative;
margin: 0 0 10px;
font-weight: 700;
}
.sidebar-subnav {
position: relative;
padding: 30px;
margin: 0rem 0 30px;
}
#mobile-subs .sidebar-subnav {
border: 0;
margin-bottom: 0;
}
.sidebar-subnav ul {
padding: 0px 0px;
margin: 0px;
list-style: none;
}
.sidebar-subnav ul li {
padding: 5px 0 5px 0;
margin: 0px 0 0px 0;
border:0;
}
.sidebar-subnav ul li:last-child {
border:0 !important;
}
.sidebar-subnav ul li a {
color: var(--color-primary-950);
font-weight: 400;
display: block;
padding: 0.8375em 1em 0.8375em 1.3rem;
padding-left: 40px;
font-size: 1.125rem !important;
border: 1px solid var(--color-primary-300);
border-radius: var(--radius-medium);
position: relative;
line-height: 1.1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar-subnav ul li a:hover {
border-color: var(--color-primary-600);
color: var(--color-primary-600);
}
/* "Titel | Subtitel": alles na de pipe komt als tweede, kleinere regel onder
de titel - dezelfde conventie als in het menupaneel. Zie subnav.php. */
.sidebar-subnav .subnav-label {
display: block;
}
.sidebar-subnav .subnav-sub {
display: block;
margin-top: 3px;
font-size: 0.8em;
font-weight: 400;
line-height: 1.3;
color: var(--color-text);
opacity: 0.8;
}
.sidebar-subnav ul li.menu-current > a .subnav-sub,
.sidebar-subnav ul li.menu-parent > a .subnav-sub {
color: var(--color-primary-900);
opacity: 0.9;
}
.sidebar-subnav ul li a:before {
position: absolute;
left: 20px;
top: 15px;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "";
font-size:18px;
margin-right: 0px;
color: var(--color-primary-400);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.sidebar-subnav ul li a:hover:before {
-webkit-transform: translate(3px, 0);
transform: translate(3px, 0);
opacity: 1;
color: var(--color-primary-600);
}
.sidebar-subnav ul li.is-active a:before {
opacity: 1;
color: var(--color-primary-600)
}
.sidebar-subnav ul li.is-active a {
color: var(--color-primary-600);
font-weight: 700;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a:hover {
color: #fff !important;
}
[class*=" bg-"]:not(.bg-white):not(.bg-light).sidebar-subnav ul li a:before {
color: #fff !important;
}
.sidebar-subnav ul li.invisible {
visibility: visible;
display: block;
}
@media (max-width: 1023px) {
}
@media (max-width: 640px) {
.sidebar-subnav {
padding: 15px;
}
}
/* Tweede niveau */
.sidebar-subnav ul li ul {
margin: 0;
padding: 0;
margin-top: 0px;
padding-left: 0px;
padding-bottom: 20px;
}
.sidebar-subnav ul li ul li {
border: 0px solid #eeedec;
}
.sidebar-subnav ul li ul li > a {
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 15px !important;
padding: 0.3em 0rem 0.3em 20px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.sidebar-subnav ul li ul li > a:hover {
color: rgba(255, 255, 255, 1) !important;
background: none !important;
}
.sidebar-subnav ul li ul li a:before {
display:none;
}
.sidebar-subnav ul li ul li > a:not(.button):hover:before {
color: #fff !important;
}
.sidebar-subnav ul li ul li.is-active > a,
.sidebar-subnav ul li ul li.is-active > a:hover {
background: none !important;
color: rgba(255, 255, 255, 1) !important;
}
.sidebar-subnav ul li ul li.item-leaf > a {
font-weight: 700 !important;
}
/* Derde niveau */
.sidebar-subnav ul li ul ul {
margin: 0;
padding: 0;
margin-top: 0px;
padding-left: 15px;
padding-bottom: 10px;
}
.sidebar-subnav ul li ul ul li {
border: 0px solid #eeedec;
}
.sidebar-subnav ul li ul ul li > a:not(.button) {
font-weight: 400 !important;
color: rgba(78, 78, 81, 1) !important;
font-size: 14px !important;
padding: 0.3em 0rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.sidebar-subnav ul li ul ul li > a:hover {
background: none !important;
color: #22257a !important;
}
.sidebar-subnav ul li ul li > a:hover {
background: none !important;
color: #22257a !important;
}
.sidebar-subnav ul li ul ul li a:before {
top: 5px;
color: rgba(78, 78, 81, 1) !important;
}
.sidebar-subnav ul li ul ul li.is-active > a, .sidebar-subnav ul li ul li.is-active > a:hover {
background: none !important;
color: #22257a !important;
}
/* Listing */
.sidebar-listing {
position: relative;
z-index: 996 !important;
padding: 0.5rem 0rem;
}
.sidebar-listing ul {
list-style: none;
margin:0;
padding:0;
}
.sidebar-listing ul li {
}
.sidebar-listing ul li:last-child {
border:0;
}
.sidebar-listing li > a {
padding-left: 0;
font-weight: 500;
display: block;
padding: 0.375em 1em 0.375em 1rem;
font-size: 14px;
letter-spacing: 0px;
position: relative;
line-height: 1.1;
color: #481c8f;
border-radius: 5px;
}
.sidebar-listing li > a:before {
position: absolute;
top: 8px;
left:0rem;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 12px;
line-height: 1;
content: "";
color: #f8bf05;
-webkit-transition: transform 0.1s ease-in-out;
-moz-transition: transform 0.1s ease-in-out;
-ms-transition: transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
}
.sidebar-listing li > a:hover {
color: #481c8f;
}
.sidebar-listing li > a:hover:before {
color: #f8bf05;
transform: translateX(3px);
}
.sidebar-listing li > a:hover:before {
/* transform: translateX(3px); */
}
@media (max-width: 1023px) {
.sidebar {
margin-bottom: 1rem;
}
.sidebar-content {
padding: 1rem;
}
.sidebar-listing {
display: none;
}
.sidebar-listing.expanded {
display: block;
}
.sidebar-listing ul {
list-style: none;
margin:0;
padding:0;
column-count: 3;
column-gap: 0;
display: block;
margin-bottom: 1rem;
}
.sidebar-listing ul li {
break-inside: avoid;
}
}
/* --- /templates/xso/css/subnav-flyout.css --- */
/*
---------------------------
SUBNAVIGATIE ALS UITKLAPPANE
---------------------------
De subnavigatie stond als kolom rechts naast de content, waardoor de content
maar 8 van de 12 kolommen breed was. In deze modus verhuist die navigatie naar
een pane die vast tegen de rechter vensterrand staat: geminimaliseerd is alleen
een smalle strip zichtbaar, komt de muis daarover dan schuift de pane over de
content naar buiten. De content zelf is daardoor altijd volle breedte.
Aan- of uitzetten: $tw['subnav_flyout'] in settings.php.
Afmetingen: de variabelen hieronder.
*/
:root {
--subnav-flyout-width: 340px; /* breedte van de uitgeklapte pane */
--subnav-flyout-rail: 54px; /* breedte van de geminimaliseerde strip */
--subnav-flyout-gutter: 60px; /* onzichtbare marge links, ruimte voor de slagschaduw */
--subnav-flyout-speed: 0.32s;
}
/* ---------------------------------------------------------------------------
De houder: staat vast in beeld, vangt zelf geen muis (pointer-events: none),
zodat alleen de zichtbare strip en de pane zelf op de muis reageren. De
overflow houdt de ingeklapte pane netjes buiten beeld - er ontstaat dus geen
horizontale schuifbalk.
--------------------------------------------------------------------------- */
.subnav-flyout {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: calc(var(--subnav-flyout-width) + var(--subnav-flyout-gutter));
padding: 2rem 0 2rem var(--subnav-flyout-gutter);
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
pointer-events: none;
z-index: 900;
}
.subnav-flyout-inner {
pointer-events: auto;
display: flex;
align-items: stretch;
width: var(--subnav-flyout-width);
max-height: 100%;
transform: translateX(calc(100% - var(--subnav-flyout-rail)));
transition: transform var(--subnav-flyout-speed) cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Uitgeklapt: met de muis erover, met toetsenbordfocus erin, of vastgezet
(is-open wordt door js/subnav-flyout.js gezet). Zonder JavaScript werkt de
hover-variant dus gewoon. */
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within,
.subnav-flyout.is-open .subnav-flyout-inner {
transform: translateX(0);
}
/* ---------------------------------------------------------------------------
De strip (tevens knop): verticale titel + icoon
--------------------------------------------------------------------------- */
.subnav-flyout-tab {
position: relative;
z-index: 2;
align-self: center;
flex: 0 0 var(--subnav-flyout-rail);
width: var(--subnav-flyout-rail);
min-height: 190px;
margin: 0 -16px 0 0; /* schuift over de afgeronde hoek van de pane heen */
padding: 1.1rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
border: 0;
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
background: var(--color-primary-600);
color: var(--color-white);
cursor: pointer;
box-shadow: 0 6px 26px rgba(var(--color-primary-950-rgb), 0.22);
transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.subnav-flyout-tab:hover,
.subnav-flyout-tab:focus-visible {
background: var(--color-primary-700);
color: var(--color-white);
}
.subnav-flyout-tab:focus-visible {
outline: 3px solid var(--color-primary-300);
outline-offset: 3px;
}
.subnav-flyout-tab i,
.subnav-flyout-tab svg {
font-size: 20px;
width: 20px;
height: 20px;
flex: 0 0 auto;
display: block;
transition: transform var(--subnav-flyout-speed) ease-in-out;
}
/* Het pijltje wijst naar buiten zolang de pane dicht is en draait om zodra
hij open staat - zo is meteen duidelijk dat hij ook weer dicht kan. */
.subnav-flyout-tab .subnav-flyout-chevron {
font-size: 14px;
width: 14px;
height: 14px;
opacity: 0.85;
transform: rotate(180deg);
}
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover .subnav-flyout-chevron,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within .subnav-flyout-chevron,
.subnav-flyout.is-open .subnav-flyout-chevron {
transform: rotate(0deg);
}
.subnav-flyout-tab-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
max-height: 15rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
/* ---------------------------------------------------------------------------
De pane zelf
--------------------------------------------------------------------------- */
.subnav-flyout-panel {
flex: 1 1 auto;
min-width: 0;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-white);
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
box-shadow: -2px 0 0 0 rgba(var(--color-primary-950-rgb), 0.05),
0 10px 44px rgba(var(--color-primary-950-rgb), 0.20);
padding: 1.6rem 1.4rem 1.6rem 1.6rem;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:hover .subnav-flyout-panel,
.subnav-flyout:not(.js-enabled) .subnav-flyout-inner:focus-within .subnav-flyout-panel,
.subnav-flyout.is-open .subnav-flyout-panel {
opacity: 1;
}
/* De navigatie zelf hergebruikt de bestaande zijbalkopmaak; alleen de ruimte
eromheen is anders, want de pane zorgt nu voor de marges. */
.subnav-flyout .sidebar-subnav {
padding: 0;
margin: 0;
border: 0;
}
.subnav-flyout .sidebar-subnav-title {
font-size: 1.15rem;
margin: 0 0 0.9rem;
padding-left: 0.2rem;
color: var(--color-primary-950);
}
.subnav-flyout .sidebar-subnav ul li a {
font-size: 1rem !important;
padding: 0.7em 0.9em 0.7em 34px;
}
.subnav-flyout .sidebar-subnav ul li a:before {
left: 15px;
top: 12px;
font-size: 15px;
}
.subnav-flyout .sidebar-subnav .subnav-sub {
font-size: 0.78em;
margin-top: 2px;
}
.subnav-flyout .sidebar-subnav ul ul {
margin-left: 12px;
}
.subnav-flyout .sidebar-subnav ul ul .subnav-sub {
font-size: 0.8em;
}
.subnav-flyout .sidebar-subnav ul ul li a {
font-size: 0.95rem !important;
padding-top: 0.45em;
padding-bottom: 0.45em;
border-color: transparent;
color: var(--color-text) !important;
}
.subnav-flyout .sidebar-subnav ul ul li a:hover {
color: var(--color-primary-600) !important;
border-color: var(--color-primary-200);
}
.subnav-flyout .sidebar-subnav ul ul li a:before {
display: none;
}
.subnav-flyout .sidebar-subnav ul li a,
.subnav-flyout .sidebar-subnav-title {
text-decoration: none;
}
/* Losse zijbalkcontent die eventueel meeverhuist */
.subnav-flyout .sidebar-content {
box-shadow: none;
padding: 1rem 0 0;
}
/* ---------------------------------------------------------------------------
De ingeklapte strip ligt over de content heen. Op brede schermen valt hij
in de witruimte naast de grid-container en raakt hij niets; wordt het
venster smaller, dan zou hij over de tekst komen. Onderstaande regel houdt
precies zoveel ruimte vrij als er tekortkomt - en geen millimeter meer, dus
op grote schermen blijft de content echt volle breedte.
--------------------------------------------------------------------------- */
body.has-subnav-flyout {
--tw-container: var(--max-width-desktop);
}
@media (max-width: 1500px) {
body.has-subnav-flyout { --tw-container: var(--max-width-medium); }
}
@media (max-width: 1100px) {
body.has-subnav-flyout { --tw-container: var(--max-width-tablet); }
}
@media (max-width: 1023px) {
body.has-subnav-flyout { --tw-container: calc(var(--max-width-tablet) - 40px); }
}
body.has-subnav-flyout #page-content,
body.has-subnav-flyout .page-content-more {
padding-right: max(0px, calc(var(--subnav-flyout-rail) + 14px - max(0px, (100vw - var(--tw-container)) / 2)));
}
/* ---------------------------------------------------------------------------
De knop "naar boven" zou tegen de pane aan kunnen komen; hij schuift een
stukje mee zodra de pane in beeld is.
--------------------------------------------------------------------------- */
body.has-subnav-flyout .scroll-to-top {
right: calc(var(--subnav-flyout-rail) + 20px);
transition: opacity 0.3s ease, right var(--subnav-flyout-speed) ease-in-out;
}
/* ---------------------------------------------------------------------------
Kleinere schermen: de pane is bijna schermbreed en gaat open met een tik op
de strip (hover bestaat daar niet).
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
:root {
--subnav-flyout-width: min(88vw, 340px);
--subnav-flyout-rail: 48px;
--subnav-flyout-gutter: 30px;
}
.subnav-flyout {
padding-top: 1rem;
padding-bottom: 1rem;
}
.subnav-flyout-tab {
min-height: 150px;
}
.subnav-flyout-panel {
padding: 1.2rem 1rem;
}
}
@media (max-width: 640px) {
.subnav-flyout-tab-label {
font-size: 0.875rem;
max-height: 11rem;
}
}
/* Rustige weergave voor wie beweging heeft uitgezet */
@media (prefers-reduced-motion: reduce) {
.subnav-flyout-inner,
.subnav-flyout-panel,
.subnav-flyout-tab i,
.subnav-flyout-tab svg {
transition: none;
}
}
@media print {
.subnav-flyout {
display: none;
}
}
/* --- /templates/xso/css/footer.css --- */
/*
---------------------------
FOOTER
---------------------------
*/
.going-back-up {
margin-top: 12px;
margin-right: 1rem;
z-index: 999 !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 11px !important;
}
.button.going-back-up i {
}
.button.going-back-up:hover i {
transform: translate3d(0px, -50%, 0);
margin-top:-3px;
}
@media (max-width: 640px) {
.going-back-up {
display: none;
}
}
.footer-wrapper .is-relative {
z-index: 9;
}
/*
.footer-wrapper:before {
left: 0;
width: 50%;
transform: translateX(0);
}
*/
.footer-content {
padding: 1rem 0rem 1rem 30px;
}
.footer-content.first {
padding: 1rem 0rem 1rem 30px;
}
.footer-content.helpdesk {
margin-top: -8px;
padding: 1.5rem 1rem 1.5rem 30px;
/* background: #fff; */
border-radius: 5px;
margin-bottom: 20px;
}
.footer-content.helpdesk p {
color: var(--color-primary-950);
}
.footer-content.helpdesk .service-number {
position: relative;
display: inline-block;
font-weight: 700;
font-size: 28px;
line-height: 1;
color: var(--color-primary-950)
}
.footer-content.helpdesk .service-number span {
position: absolute;
top:0;
right: -10px;
width: 8px;
height: 8px;
display: block;
border-radius: 20px;
}
.footer-content.helpdesk .service-info {
display: block;
font-weight: 400;
font-size: 12px;
}
.follow-title {
display: block;
}
@media (max-width: 1280px) {
}
@media (max-width: 1023px) {
.footer-content.first {
}
.footer-logo {
}
.footer-content {
padding-left:30px;
}
.footer-wrapper .columns:last-child {
float: left;
}
}
@media (max-width: 640px) {
}
.footer-content.first .footer-title {
}
.footer-content .footer-title {
font-size: 16px;
margin-bottom: 15px;
font-weight: 700;
}
.footer-content p {
font-size: 16px;
line-height: 1.8;
color: var(--color-primary-950)
}
.footer-content p strong {
font-weight: 700;
margin-right: 5px;
}
.footer-content p a {
color: var(--color-primary-700)
}
.footer-content p a:hover {
color: var(--color-primary-700)
}
/* Table */
.footer-content table tbody,
.footer-content table tfoot,
.footer-content table thead,
.footer-content table,
.footer-content table tr,
.footer-content table tr td {
font-size: 16px;
background: transparent !important;
}
.footer-content table tbody tr:nth-child(even) {
background: transparent !important;
}
.footer-content table tr td {
padding: .2rem .625rem .2rem 0;
color: var(--color-primary-950)
}
/* List items */
.footer-list ul {
list-style: none;
padding:0;
margin:0;
}
.footer-list ul li {
padding:3px;
font-size: 16px;
}
.footer-list ul li a{
position: relative;
padding: 0px 0;
padding-left: 20px;
display: inline-block;
font-size: 16px;
font-weight: 400;
}
.footer-list ul li a:before {
position: absolute;
top: 5px;
left: 0rem;
/* was een glyph uit 'Font Awesome 6 Pro'; nu hetzelfde beeld als
* SVG-mask, zodat kleur (currentColor) en maat (font-size) blijven
* werken zoals ze deden - zie css/icons.css */
width: 0.625em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
mask: url(https://www.timewriter.nl/templates/xso/images/icons/ui/chevron-right.svg) no-repeat center / auto 100%;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-size: 14px;
line-height: 1;
content: "";
color: var(--color-primary-950);
/*-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;*/
}
.footer-list ul li a {
color: var(--color-primary-700);
-webkit-transition: color 0.3s ease-in-out 0s;
transition: color 0.3s ease-in-out 0s;
}
/*
[class*=" bg-"]:not(.bg-white):not(.bg-light) .footer-list ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
*/
.footer-list ul li a:hover {
color: var(--color-primary-800) !important;
}
/*
[class*=" bg-"]:not(.bg-white):not(.bg-light) .footer-list ul li a:hover {
color: rgba(255, 255, 255, 1) !important;
}
*/
.footer-wrapper.bg-primary .footer-list ul li a,
.footer-wrapper.bg-secondary .footer-list ul li a,
.footer-wrapper.bg-color3 .footer-list ul li a,
.footer-wrapper.bg-dark .footer-list ul li a {
color: rgba(255, 255, 255, 0.6) !important;
}
.footer-wrapper.bg-primary .footer-list ul li a:hover,
.footer-wrapper.bg-secondary .footer-list ul li a:hover,
.footer-wrapper.bg-color3 .footer-list ul li a:hover,
.footer-wrapper.bg-dark .footer-list ul li a:hover {
color: rgba(255, 255, 255, 1) !important;
}
/* Social */
.social-list ul {
list-style: none;
padding:0;
margin:0;
}
.social-list li {
padding:0;
}
.social-list li a{
position: relative;
padding-left: 0rem;
padding: 0rem 0;
display: inline-block;
}
.social-list li a {
color: var(--color-primary-700);
/*-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;*/
}
.social-list li a {
position: relative;
padding-left: 25px;
}
.social-list li a:before {
display: none;
}
.social-list li a i {
position: absolute;
top: 6px;
left: 0;
}
.social-list.inline ul{
display: flex;
align-items: center;
justify-content: flex-start;
}
.social-list.inline li .social-title {
float: left;
padding: 10px 5px;
}
.social-list.inline li a {
width: 48px;
height: 48px;
font-size: 24px;
text-align: center;
border-radius: 100px;
background: var(--color-primary-600);
margin-right: 10px;
}
.social-list.inline li a:hover {
background: var(--color-primary-700);
}
.social-list li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 20px;
}
@media (max-width: 1023px) {
}
/* Bottom */
.copyright-wrapper {
padding: 40px 0;
}
.copyright-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 35px;
padding-right: 35px;
}
.copyright-text {
font-size: 14px;
}
.copyright-content .menu {
margin-top: 0px;
}
.copyright-content .menu > li > a {
font-size: 14px;
font-weight: 600;
padding: 0;
margin-right: 15px;
}
/* Payments */
.payment-methods {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.payment-methods > div > img {
height: 26px;
margin: 0 0px;
}
.payment-methods > div.payment-ideal > img {
height: 42px;
}
.payment-methods > div.payment-mastercard > img {
height: 34px;
}
.payment-methods > div.payment-visa > img {
height: 22px;
}
.payment-methods > div.payment-paypal > img {
height: 26px;
}
/* XSO Software */
.xso {
float: right;
margin-top: 5px;
width: 100px;
opacity: 0.5;
-webkit-transition: opacity 0.3s ease-in-out 0s;
transition: opacity 0.3s ease-in-out 0s;
}
.xso svg {
filter: grayscale(100%);
}
.xso:hover svg {
filter: grayscale(0%);
}
.xso:hover {
opacity: 1;
}
@media (max-width: 1023px) {
.copyright-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 20px;
padding-left: 15px;
padding-right: 15px;
}
.xso {
right:1rem;
}
}
@media (max-width: 640px) {
.xso {
float: left;
}
}
/* --- /templates/xso/css/modals.css --- */
/*
---------------------------
REVEAL MODALS
---------------------------
*/
.reveal-overlay {
z-index: 99998 !important;
}
.reveal {
outline: 0;
border:0;
border-radius: 5px;
padding: 0;
box-shadow: 0px 10px 61px rgba(0, 0, 0, 0.2);
background-color: #fff;
z-index: 999999999 !important;
}
.reveal.mini {
width: 25%;
}
.reveal.tiny {
width: 35%;
}
.reveal.small {
width: 680px;
padding: 0 !important;
}
.reveal.medium {
width: 60%;
}
.reveal.large {
max-width: 74rem;
margin-bottom: 100px;
}
@media (max-width: 970px) {
.reveal.small {
width: 90%;
max-width: 680px;
padding: 0 !important;
margin:auto;
}
.reveal.dark {
background-color: #04142f;
}
#topNavigation {
width: 100%;
border-radius: 0;
}
}
@media (max-width: 640px) {
.reveal {
border-radius: 0px;
-webkit-overflow-scrolling: touch;
}
.reveal.mini,
.reveal.tiny,
.reveal.small,
.reveal.small {
width: 100%;
max-width: 640px;
padding: 0 !important;
margin:auto;
border-radius: 0;
}
.reveal.dark {
background-color: #04142f;
}
}
.reveal .close-button {
font-family: 'Poppins', sans-serif;
font-weight: 100 !important;
right: 0rem;
top: 0rem;
width: 80px;
height: 60px;
text-align: center;
padding:0;
z-index: 88;
opacity: 0.3;
-webkit-transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.reveal .close-button span {
position: absolute;
top: 50%;
left: 50%;
display: block;
line-height: 1;
font-size: 34px;
transform: translateX(-50%) translateY(-50%);
color: #002164;
/*-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)*/
}
.reveal .close-button:hover {
opacity: 1;
}
.reveal .close-button:hover span {
}
/* Reveal Header */
.reveal-header {
position: relative;
display: block;
width: 100%;
height: 60px;
z-index: 9;
text-align: left;
background: #fff;
padding-left:2rem;
}
.medium .reveal-header {
padding-left:3rem;
}
.reveal-header:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
.reveal-header .reveal-title {
line-height: 60px;
font-size: 1.2rem;
display: block;
color: #002164;
font-weight: 600;
margin-top: 0rem;
}
.dark.reveal .close-button span {
color: rgba(255, 255, 255, 0.8);
}
.dark .reveal-header {
background: transparent;
}
.dark .reveal-header:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #ffffff;
opacity: 0.08;
content: '';
}
.dark .reveal-header .reveal-title {
line-height: 70px;
font-size: 1.4rem;
display: block;
color: #fff;
font-weight: 900;
margin-top: 0rem;
}
@media (max-width: 640px) {
.reveal-header .reveal-title {
line-height: 70px;
font-size: 1.2rem;
}
}
/* Reveal SubHeader */
.reveal-subheader {
position: relative;
display: block;
width: 100%;
height: 50px;
z-index: 8;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.reveal-subheader:after {
position: absolute;
left:0;
bottom: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
#addObject .reveal-subheader {
/*
position: fixed;
top:80px;
right: 0;
width: 100%;
*/
background: #fff;
}
.reveal-cover {
position: relative;
height: 360px;
}
/* Content */
.reveal-intro {
padding: 0 1rem;
font-weight: 400;
}
.reveal-content {
padding: 0rem 0;
}
.reveal-title {
font-size: 1.3rem;
}
/* Reveal Footer */
.reveal-footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 70px;
z-index: 8;
padding: 0rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08)
}
.reveal-footer:after {
position: absolute;
left:0;
top: -1px;
width: 100%;
height: 1px;
background: #000;
opacity: 0.08;
content: '';
}
.reveal-body {
padding: 2rem 2rem;
background: #fff
}
.reveal.small .reveal-body {
padding: 2rem 1.5rem;
}
.reveal-lead p {
font-family: 'filson-soft', sans-serif;
font-weight: 700;
font-size: 1.1rem;
}
.dark .reveal-body {
background: transparent;
}
@media (max-width: 640px) {
.reveal .reveal-body {
padding: 1rem 1.5rem;
}
}
/*
--------------------------------------
TABS
--------------------------------------
*/
.reveal .tabs {
border:0;
}
.reveal .tabs-title > a {
display: block;
padding: 1.25rem 1.5rem;
font-size: 0.75rem;
line-height: 1;
color: rgba(0, 0, 0, 0.4);
font-weight: 700;
height: 50px;
}
.reveal .tabs-title.is-active > a {
color: #000;
background: transparent;
border-bottom: 4px solid #007afa;
}
.reveal .tabs-panel {
padding:0;
}
.reveal .tabs-content {
border:0;
padding: 2rem 1rem 1rem;
}
.reveal .tabs-content .object-images {
margin: 1rem 0.86rem;
margin-top: 0rem;
}
/*
--------------------------------------
LANGUAGES
--------------------------------------
*/
.languages {
margin: auto;
padding:2rem 2rem;
margin:0;
list-style: none;
}
.languages li {
padding:0;
}
.languages li a {
position: relative;
display: block;
padding: 0.86rem 1rem .76rem 4.5rem;
border: 1px solid rgba(34, 21, 90, 0.1);
margin: 0px 0 6px;
font-size: 14px;
color: #002164;
font-weight: 400;
border-radius: 3px;
}
.languages li.is-active a {
border-color: rgba(0, 33, 100, 1);
font-weight: 600;
}
.languages li a i {
position: absolute;
top:50%;
right: 1.4rem;
font-size: 1.3rem;
transform: translateX(0px) translateY(-50%);
}
/*
.languages li a:before {
position: absolute;
top: 0px;
left:0;
width: 100%;
height: 100%;
content:'';
background-color: #f2f2f2;
opacity: 0;
z-index: -1;
}
*/
.languages li a:hover {
color: #002164;
border-color: rgba(0, 33, 100, 1)
}
.languages li a:after {
position: absolute;
top:50%;
left: 1.9rem;
transform: translateX(0px) translateY(-50%);
content: '';
width: 26px;
height: 26px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 5;
}
.languages li a.nl:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZ5JREFUaAXt271KA1EQBeCZSwhK0EbRynLfQRtLfwo7QyohIiQ+gfoIdoKVQRALG00nBI2lNnkHC8EuYLrEgILjbEgg7nJewHtuk90z29wvhwQSrsrU6pXrWyo/dRNbFdFlH+nU+D9emoh1VbRjEhoLzcbjZJOjjb9VqzPzg+K1P1SZDOJ81dtPKe2vNM+GhRRgrl+8FI0dJZWwyqwNvv1iT3u7tQ1Haacx11jAdDP4p0idIBkBtcPg9VnPxLwVW3MYWaREVkCXUhiuvEAgTB5llBCGMEAAxGwMYYAAiNkYwgABELMxAEYHwy//TYIrK8DGZEXG94QhDBAAMRtDGCAAYjaGMEAAxGwMYYAAiNkYwgABELMxhAECIGZjAEyhfP4ORnHHbAx4/wlDGCAAYjaGMEAAxGwMYYAAiNkYwgABEKeN+QCzaGP/B7IXzOQlWgG0cZPnIMEu0DzWPIg1wsNR8iSqN7Ei5PbtFq2TpD36VioVijV/4C73UHSBNscWf0+XbJ++7mjQAzHx0yeSnj6JYXVdoaNmV63j5H6y4V8Q6UlLHgzLPAAAAABJRU5ErkJggg==');
}
.languages li a.uk:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAC3xJREFUaAXtWwtYjdkafvely64QxSQjlxjk1kiki8oMGtNxi0LRuIUZhmbOOSa7yE6Gmcck41aRTA1pcsghd9GFphRJlGESKinX9q1d7X3W2p2d/Te2qTSmmafveer/17/W+tb63tb/re//3hULahJ3LN8lOu76IllVrQ15/A75YalVt9jtif3uSl1P3H1eq7NTXLiy3mVm3GvbvUGlgvQt47BZ6VNd+4UtmDX0hEoXm94UfvKJ7mMPn9iPy3OO7xQ4T7Yc2MWEPP5DQFEN3EquLPMehiahgjGTPfVKjj/x/DT2/nRfHp0bl/5qJ9SOAEvhIT12BnqZVyFY4Ikkux6IiLkKobiaNvnbibY2B7OmWGDqID1IwrZDfPc+tdGDp6ihBs9mS/97ahxbV9tLZbn8UQWE60Nhf+M8wgWOsBvxrqrqb3MdPKAzdgQ5Y6LoJoQBX6O2DhSlfSw2vIRRsePYkRXGi3TW+0NriAXD8KoLl8AODMbKEVoI8LWFUUflCmO0+asV9HhaWDrPCuvdTGGw6TtIE4hLqZXXm8HpTp4L/o2Txu8v5iac/GV0enYJ6eCOIfZ3If7hJyiEImVj+fNKCEMjMMRqKHaucseuxLs4db4QCuqy/mJiY2WKZTMtoHssEZW7UsAwgssFb+oElA23xepd2Si482QUdb7GZeUiBGxMRWgeB5wgPrRHDWeYXZ2Vgxp+ED7tKcZGviNMTQwY9a25YNheB37LbLDK0QAcwQZUnUlmgMLt2xv6wasQJ++JpQHnKCjUnC5K56sy7FxqEbKuPcTiOS6wcxgJ8a4fIX/yTFmtkEghIuWe/ftg+wovxKSV41DiLdTWtt7lM3Z0TyycZA72gXgIL2WpzFReWbo64M2cgl97D8bmbVm4V/xCvZ6t3K7Vnzx/UYWNW9MRdPYFZPyvoDPOkWzcL3fumvzbkKwKhqduMUIDnUG2O/XureL+nc76CPZzwNL+1aj1XwdZA1C0hg6ETrA/IssM8eXa8w1BUdrAWDHqVmVeLcWignLMmzESLmusIQ6LRm1pmbKJoroaktjD6HzpMkJ85uDwTSliDuZBJqtVV/HW71nkDzjZpS9mO3dF7d79EF27wZgDq50+9Lw9cK19D3z/TSYeVYgZ9eqF36wY9UqJpAbb9mRj5YEHeP6FL3hTJgCcl11qix6Q7W4DXJ/lYofACXQb/LOkx7sdELLGCd5GFahatQ7VDUDRtrMGW8BHaC6L+NOU14JCbdC4YtQNvHGrAp8RxzRjkgWmrRuGql3RqLlTVNdELof06Gnok8AweKEXzpDAcPe+HIjeUmDI5bIxY/IAuA9rD2nELohvF6pPHWyjjtBfMAup0o7YKUgDdRWNkUYBQxVVV8sRHX8dKT93wIoFPuhZcAWSuCNQVMmU48jLyiEM3gxHJ1uMFLhiW2w+Ll4ubswcmt2mf18j+M6zRJeMNAj5JCapqXmpi7xWOmNHQ+TyEb7bl4eMKwUv6xpx12hgVLru3n8O38Dzynd5DgkMa/bsQ/X1/LpqEuBUJaWBk52Lr+bNxM/2ttgelY2nz6Sq7i1y5ely4e0+GB/3ZkEcugWS4lKGXo6pCfR8vHDiARuRq8+DuoSmSpOBoQMoCACHjt/CpaxiLJs/E4Mcfq0LDEV1zkz+/AWEIWF439oS4fxpiDhWhNMXWiYwtBpigs+9BqHdmVOojEpixCTU//EmuqDC1hGCPVeQV1DRVDzq2zcLGFXvh49E4H+dAmW8sM4f7Nh4yH7OVlVDRvwOK68An3m5YYzdaIRGZKGU9GmOtDfQxsLZlnBqJ4To628grVAGYvWquOY9oEN83H9yRNgXcFb56tdXNuPmjYBRjXc6+S7o9r7EewJGjbYhgeE+yJ/+PzAUSyAKj0HvAX2x/QtPxKSUq7o1+upoa4Ylbn3BPZiAypR0Rj+WthZ4HpNwr/8whIRlo/Be3biMRs0osMbPOKBoRj+NXUYOq/sm4SUmouos85uEGqHr5kq2/Y+U/RubqJKlZkAUdQCKF5WMcbUG9gN3rieikx/i8PFfIJe3nCks4i9aThtj2r9faCwwv6+p5Vu8jNZaXvdfWiPr8fSFf9qKac3Ita0YDX+dNmDagNGAgIbHbSumDRgNCGh43LZi2oDRgICGx22RrwZg2l4lDcBwW/IkQS8zQ5LdG4Ye+dmQHEiAQsbkvbUdbFAzdRIMuxlpmM6rH9+6XYHuuZmQHjzK1EmzdB84QDJhArYos3TMhNWrtTXuaYusGC0tNsmoDcLmxQPQNTIM4uh4hgFs405o5/c50oeOgU8g+eJuovgGJuFHsSl46/ngkvRFvdCMISHQuEEb4O/cDl8RYo0SbC0hb5yPGdjPGMvnWqLzxWSIVpG8qxoXTPko3fFOqBw7Ht/GXCdkHpPOaKwBlNSLP1qAtIwHWE7omgGlBRDHHISC5Hqo0NyP8NvtGG5jhfDVbth5+A4oefgm0mxgeDwu4ZyGwKW7AuKQzZCUPGTMg9OtK/QWz8axXxXYS/Ou0qbnXRkKSYFm//yCL2CcUy8sWMcHaz/JGJIsoUpk6Vlg5d7E8jnT8YGDA7YQHprSz82RZgFjbdkVyzwHQv/EcVTuTmbmXSlBPmk8Ho20x5rIq8j/5XFz5qWxD80enUwqJFn/UiydOxHW9oRKjtwPmmemoiB5Z9GOvXhvUH/s+Ocs/HC+FAknbivz1BqVvqKiST6mA3l/Vy61weqxhtAO3oiqUxcYoHD79IJBsB8OcvsQHiqpxUFRnz9lHoJCLmLDRSlqA/2g42zHoJIpc1HFX4dPOpYriThKyDVFGr1inO3MsHhKH3DiD6EyLZMxBkuHEOQeE3G3ryVCtmej6MFzRv0fWaDc1bUbjzDf0wEf2I2AOCIGlOOiQjkvuhGYmmdiy5I5iL9Sif2HbxD66eWZGE1z+90V08VYD0ErHeA7lDi51cGQNQCFHjiiB4/2PukMX0KQv01QVEbR43ChEZfhn1AG8b++hK7rWAaVTFlTET8YU2W3sC3IGRbvGau6arxqXDGUIHcda465H3ZDbXQshFfzGEpY+nrQI07uulFvbPn2crOdHEPpGxboyllMXmEvt8GYLLCGJPwHUH5dKWS3lBxKhCGhdzYSMi7xfndExeZq3BReCYxZt/ZYvsAK5oWkI38PFFIm36s9ygpyj2nYmnAHp5ObHpe8of2v7U5PXETuv4bkXh2xYtGn6HYtgwSGx0BPaFCpJbtn5dpN+JDQt6MEH+F7EhhS6qehMIDhEiZv+sT+mGFtiKrISIgL7jDaszsaQo8Q5JeqO2HH2lQ8ayRBzlDylgq3C59iOQkM3T7uh1kkMJTtjgE926MUGhiSjUP7cg4CyAnVVOI/w6KvMgh/CgzlMY37mXfCivnvwyTrEnkfE39LkJPQW0pC7/WxN5CedatugFb+mwaGcUfykZphQD5VvNGvOB/iH0lgSE6HUaGnxYTfbMMIW2tYBUwhgeFtJKXdo1WPuTo67BTv6UOmuPbhQLJtKyT3imlFvXBMukBv0WycLOESgvwCxBLm9099w1Z8U/JQiJUkMHRx7o15wQFg7YuDjKwWlcguZoJFovIV3u4YY2+PLbuzk1kl9x6P63DuzElp4llGTEIJcurdnzo4Y3NUDnJvNp1aVQ3c8PpnHpmnx3I/mzcMw6tKII6KJYFhA3aT7LJs71kubFMzo1OSo2dj1I93cnp2h0GQH47oW2CJf1KLgtIQpLddfvxUAsGmNGzMqIYikA8dx1GMKchybsYYmL1zUul8JSx9Hz2FUJulo+XOm/YPPBhsjRByMuFOUcsQ5IyRW0mBfpDm5D3CQk8nONPPChoYllf8JIG+8j8/lMB0/ymEfqZ6SIuKY6JTKuYfWnPOhjgu+t8nf2sRimQICc8sS7Lokv75yi8iu5l1PqIy+H/nD5Bh/G1MzwAAAABJRU5ErkJggg==');
}
.languages li a.de:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZ5JREFUaAXt279KA0EQBvDdTYp4ZyOIvoo2Ek6Mf8BOSSVEBPWRDIJY2JjrLMRTNKCFvoqglSYphFtnTweWCfMCuW8hmd1v0+wvk61y1kRjfWd/i5YnxvgVqsv0stH2LE49HeqdjvlGtf94m9/xIauDt9u9ViP5uqQPdHmjntVfj1N3+Jrnk2YAaCTf50AJErabjPwPTQ5str3XsdYUIcb4E/DebDq6RehOwYgF6H45dfS2FoeYk4A1q47KIjCmBJYCDMa0gAPMNEqVAAYwioASo2MAowgoMToGMIqAEqNjFJjmIF1Qtuodo2OU7x8wgFEElBgdAxhFQInRMYBRBJQYHQMYRUCJ0TGAUQSUGB0DGEVAidExgFEElNiOH7LwHxEMIYCfkgDhJWBYQlTACBBeAoYlRAWMAOElYFhCVMAIEF4ChiVEDTAfIsPSmM/wr80XSAgBa56dK82ZiGu/LL3vu1bn6Z665qr2GgxAFvMbw6K6fOeSyTHlA96rbbUm/7egXonGqMh2rbNH0dMn0e7MTqunT7wvL9LO8IZP+Qu9kT3vV8z9KwAAAABJRU5ErkJggg==');
}
.languages li a.ru:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZBJREFUaAXt27FOQkEQBdCZDSQk2KHxV/wCtbFEKwtDFL/HSnwJsbARrKzEUhu+w0qiWEke8UXGWQjRR7g/4N5tYO/Q7OECCfBU/qzPabGvIm2x2Y6IbvvIt/96mYiNRMPQ73Q2atWH5WnnBzez2mRaXPvmaDlI8dZxbuu16omq5pUIkE+LLHWU6BAN3KLwu8fqL59dNRvEAddCwFT3giu1CVIWcJNzneRfbx5vlkep7+w1wvh7DteKwCysBNwuBAJhQBUIQxggAGI2hjBAAMRsDGGAAIjZGABTaV68gFHaMRsDnn/CEAYIgJiNIQwQADEbQxggAGI2hjBAAMRsDGGAAIjZGMIAARCzMQBGx81T/uC2BoeNWYMSI8IQBgiAmI0hDBAAMRtDGCAAYjaGMEAAxLEx72CWcGzjCPOcsAA4uj4FMb0E03RjlU5o3F09mulNugrlk0eLRi8bzD+Vcq2fiUmv/JAEdyr9uYUf3f8E/bs+DlsHYqHl30P41ScSrz5JYY0cYfgt0t3qZ/fLA/8AkaNVEm24aEUAAAAASUVORK5CYII=');
}
.languages li a.au:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAABmJJREFUaAXlW3tQVFUY/927i8v6AIEATQRR1EAc6SGTYGWNgj0cZRpeadOUU1pOUz6mnGzyMWX6h5M5Wj7SHmOKj3KSJsGmdHRQQ83KdISUEpeMeAkaIAts9zvsXe7u3rt7L7uIXs4MnMd3Ht/343yPc86Fgz21WCxJdYEhG85fqBq/ekNxgM1mE0ksL9iZhdqsl1g5dPdmTM3d7USnSmz0QHy8Oo2131i7BS3HTrLyM4bJLL8Nf5GQlbDhBHhuU+HOrAKRR54KV7JennXtjZWnwxrrUialxgS8/foEcBwn9lGVK4HSZ8IDqsb3UCcSchA4zIDNdiA9Jy8vM3O3mXjhaaeYjNznBquVr1/8HtquVCA1OQpawPEESv/5HbushwTXuCyXXW+wbWbAXDOFrA9d9RaPACNgbYVWcPQDSgeGwhaaNSU7L40/V1qdbBg6BMGrlkArOGpAeWXxQY1/tZ7vLpiRuYbKppQVsUODEZMQhT7JSbh5qIjtHMqpTu1Ejx4ShKY9+Yxrc+Y0FJ2skDW0ZFNE9SFQyi5f63lJNXIg7JoQnrzPu2uPo6jYAk87x3VuOe/T3aC8OGucKxvdVY9gXkkNOHIcSF1yd4Ny96D+yHh8FMJCmdOQY8efbbwhLjFzmTjj0Z8sTG3k1Mo0+SE053fYC1KlWwXKYxNjMGZ0OHIz4hEZ3g9j48MRNMCEuNgQlFysFVn3e+4EDM2uBI71zFnYGm4wBvigAWjeX8jK3b1TYqKC8ers+zE4sj9bLyzEjPiRYTjwQxkq/unghxH8/IsT1Mg5xHVZoL2+AdeXr0Gb5WonxR789X0hB4Hpj3a2K5TkomSFrrLNuRkJeC4r0UHb8OnPyD940VFXKpBN2rL9VyWyx3ajGOZ77OVKtGPZuHUn6Mdr8vFIYLW2sSVqapuYjTH1MXhdUrRJX39XChqnNQlR3e2fSMgVa4pw7FQFEu8Jx7gx4YpMk03qaw7ApJSh4HkOSxemCh63As03W/FNwR+K41wJXlWJBtwsPIz/tgk7Q6J1hqjBGLB0IfjgINc53eq+qpLbhB4aJqVEY+HcZAQEMIfLehIoKz88juIzEnPgYQ4icek5u9xsjGxES3bFDgyBwmyOcIygiJniH4qDKB7yYrK8sOMfcldtknT1TljtrbKgCDQytGKinaJ0fKDt29NJapOIFzU2yZVnJ2CGx8jfp5BLlnofUh+ls9WS1yYw3XZd6FbWRZs0c14+Fi0/BJPJu7F25c8BDIHy0Sr3SyZpnCId7HZ8eLPzysJXcHwN/dd9cpoZauL39wtV+PKr81LWVZUZME6gfLDZcfOmBArN7Ha2ahWuLPwAjuhmb1HorwgS7wbK8VOssxQUuasD2YOnD+CQm31qShwWzBnvcLPZ0+MxfepIRea7k8A71Id2igIoclcHigdPGXDUCNDebsOcZ5NYnEL9Rw0PZeejq5XdF/Z74oup0g2NoIgTqgVH7O8pP3ysHDv2OduCrTt+0xR7eJpfK43vKijiQmrAEft6y/3hZr2toZbOa1EfpUm9gaM0zrXdH27Wdc6u1mUj365O1tPjZj6d0CXXLMf3HXGIlGNc2jYooh+GCffSuTMS8Gd5PSqrGnHprzppF81lR4CneeRtNODJySOwbNFEGI083lmQinvHRvjMnS6AIe8l3rlY/r6OvfklPgOjC1Uym40ouVSLfetLMeXhYezKwWpt9wkcXRlfn5BwGawLVXKRyS9VzcDQVxDzhfOM3pNmYEaPCEXaI8NAzxh6TpqBoTtV2jX0KqjnpMr4znv+PgwMMmFgcCA7/dqflVBuaUBzSysuX2nAmo3FusJJ1Y6hk29SYiR7HhVBIRSio4QrTuG5dE/+BV2BQsKoAuZcSTWWvH/ETfiWljZ2p1pe0eBGu9MbVAFDQpaW1aKpudVJ3pq6JlTVNDq16aWiGpghwmugOdAIulHb+20Jsy/00B5xV1+9YOEkh+ojweg44QuDH8uw6Ytf2HPnZ3lnkfHEKPZpxr/V+ts1qrySE5S9pEKqVN1LZNUiZg0vPFwf1TKiN/QVMDlCHydu7A3CapGR57GJ/35XzkEBoe1aBuq5L2FRsCO7kLnr4DaOvmt3/68JPSMgJxvH7bFjIfx7gSSl5e6axtm42cKHMA8KzZESkp6LlcJnQicEILYV5GXtFwX9H+3E/7nnYPXgAAAAAElFTkSuQmCC');
}
.languages li a.at:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAZhJREFUaAXt271KA0EUBeB7BwlK0Gb9qXwPbSzVxs6YSogEs76NrTEgFjZmrayMpTZ5C2vBtTIGFL3OLAkkm5wXcM402TmzzXwcNjAwKhMjr6X7Kr+piW2J6IZf0onl//hoIvaqon0T106y9sN4k8XGXxqNxZVB5dq/VB8vxPmrt59SPdnMzocLAWD5o9IRjR0lSFh9yQbf/uFY88PWrkfphZhjJGC65/xXJCVISUDtzPn67JRiTsW2PYysUqIsoOsBhmNWwBFmFqVICEMYIABiNoYwQADEbAxhgACI2RgAo4Phlz+T4CgLsDFlkdGcMIQBAiBmYwgDBEDMxhAGCICYjSEMEAAxG0MYIABiNoYwQADEbAyA0bx2ymOHOThszByUEBGGMEAAxGwMYYAAiNkYwgABELMxhAECIA6NeQNrEceWB5jniAXA1vXJiekFWI03Vmm75O7y0Uxv4lWY3nmwSLqdXvGvNNRqS0y6069EOFPJCgu/9anbJe9HzQMx1/TnEP72iYTbJzEMf/tE+j8iV2tZ53684T+h600K0j8TdgAAAABJRU5ErkJggg==');
}
.languages li a.sa:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAB7NJREFUaAXdW1lwFEUY/mZnMnskYXMRQUJOICSAIBJUUAQBsVCLioUEBbyP8kGrfLPKlzz7YvlglZSWFyggxW1UEOVIGZFDjRRIERJCKhBISAiE7D07/v/E3oBudGeymEn+qqU7vT093d/+/fXXfzcSbrDXa958eM0dT7wyK2/mPVR8G30kvec6fF/uRHDvQUCL3lB7RGR1QL8kQTqkw7E2e/Pab8WoJM48+/GzLr9b/oSyVfx3eW4pVs9YgeLMAv7TMK21Df4vtiJ0tF4UjcBU2uRD6nPjN7/jl3l0k1fe9TEkPCVG2tHbiR8aa9HWcxEl2UXwpLjhGJUOde5sKOWToLWch959VVQfSelURQ8XvH3y2DapauPzD9GM2T3Q6FRZxSOli7GsbClcirOvmq4juL8O/o3bEb0yAgHSpSXy1OUz36bRlg0EjKZrONXRgP3NPyJVTUVhxnhIkgSlKB/OxQ8Yea2xeWTxj4Q0BuY9AsUzEDCiPBAJ4tj533DsQj1uTx+D0ak5kBQFKVMnwznvXujXe40pJuoP71TPFB6T8Di6A1dxoLkO5662ojirAGnkRZLHDXX2nVBnTUe07RKiHZ0Jt2fPipKHgam20rkL19qwt/EAfGEfigggJ3GRI9ML5/w5kAvyoDW1GF5kpW0bPCPJH7w2ubor4gB/zFpUj+J0ZyOtYAchO2TDgxySA/K4sXAtnkee5EGE+SccNtv0kNeXOg6v0LOVKOp6UrChw4XLFgASoxiTlotV05ejIm+mKAILRP+WGgT2HAAikVi53TMGMDkEDFtIl7C9y4mvulQjb7XzLBCfnlGFwsz8WBPaxXb4129B6PCvsTI7Z2R1VFn12ExgtBeQSQdP8URwvzeMq+Q5rSFD/5nuPwvE75sOorO3CxOyiuBKccGRlgp1TsWwEYhyxtjy6l2HgdbLQOk4INVFa7dDx93pYUxPjaA1KFviH0azubvFIGjakKAkq9DgITk3B65F98MxOhusf/RA0DTw/8cDcmlZeXWYpv7ZS8BXR2g6UX5yHpBCzpKt6FjgDeF2NYqmgAxf1NhamepXJKrhRPsp1Db/hHRXOvK9424WiKSFtKZzxD+aqXZvdeUYMPwi3jwfbwZ2/wKku+lXHkubBcIi3xnFooywMdXOEEAabazMmi/sx5HWX/4pEKeU0hI/F3qvD9q5VrPN3rL6NwEj3uIPAXWngJ/oM340MIY4iPmnPAn8E1cgul1QK2bYSiBKjz2+XPcFBCTx0/vKgZeWAOOy+79vIM/5rN0NTq2a4lDw8MQHUTnlUaSm/OeuxOprLD0X12P+3lJLRx//9BJPMv+oSnL4RwjEfU21xs69kOI/Dp67NrCEPObGfnrph31mIbB0FqD85Sysf1j7sAbi/EgwuWRSebWZiGWQ1P3Pp4F9x/u0Tz5xEPNPmUcbtP6xE6ByQUl5tZUO9fiB/QRO/dm+1SsrPXn6x0p/kv2MXDzRGjCiI5e6gZqjQDsF8ph/3BTkS4b+Ee0PVTpoYETHz7T1ETRFPQ0Fzfwj9I9KSrqBwstW9I9o//9OkwYMd5zF629NwN56IDMNKMwlgmb+cQ8//kkqMOJX7SVdVHsC8NHyXjGxr1TsvzwU9qn30Xpvc7slPczNAF6ks4cF0/pH3x2RsK7DbcR9+kvtm0sqMG4VWDkPWD4XcKb0DZp1Tc0VFTtI4wQsbEKHCrqkAMNidQkF7Z5fBPCyzcahhmREBY3GhuCfQQMzvQh4dSkwgXbiwpKxjxJtDVWqqOTyIQuxat5Q8saSN5jCOKD+OcWN2VPYYxK1dGcanpi6DAtLHiAVbT4on+h7zNRTWG+YAWYU7ZWeJB6pvPfmvZIVHrHz7jrhqcQAMhir5gNpFP5kGwyP8EkCnyjwyYKwxuYrWLuuHr+fbBdFQ5YmBEwy4zF8csAnCHySIKyrO4BPNx3HngMUA2bpbAP7V2CYUJlYmWCF8bkTnz+Z5ZEMtxdV0yoxv3CuEfPl9gLBCLZ93YAvd/4Bf4CCzTayuMDwkstLLy/BIm5kVY/w1RG+QsJXSfhKCRt7BXsHewl7ix3tJmBYlLE4Y5HGYo3NKo/wVRH2DvYS9hZhzB/MI8wndjYDGPYKlu8s41nOC7OqR+KdRF64eB0fflGPuiPnRfO2TpU7iD9WkYeUje/vp1UeiXd2fa0niE07TmHH7gY6uo72v8TmuX+cXbMe2d7pRNBE7JYj/Bzp54g/axM2BoHB2LD1JK77LCjIIQbOGIVVHuGrHwuL5xmqldWrMJ4uPG14+gxXUziy9u4Vj+nzIbsLtMH+IMq7bR46zkdOog3FE2jtl31Yv+UEvqMl2C4CLdHxDFCvU9ElqVbS9coBKsSK4wk0FmUszrbUnEYoZK9D+VjHLWSIWg4qkh59n2TcgMDEu+c7HASaBTxijzgcWEsKhgTdhhfW0SK0OvYNZeh+PebkV+BJ2ujleLJiXw0XgRbrsMkMecv6PRur1hirkiZfe1nWvKou6Su4nUk5JVhDG72J2cWxZltar+ETkvB1R4eHQIt13ExGkjZ7I3iZHzE8Rjz7xq63Hls5o/KF2Xl33UNl/L9PwALts80n8M0PjdA0XthHnNGVKekQAfHRtxtX7BSj+xOl7xohbf/dcQAAAABJRU5ErkJggg==');
}
.languages li a.nz:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAABX5JREFUaAXtm2tsVEUUgM/M9kVDW1qlxfSVNhCVoJKIjW1jogm0+IOIJrst2l+Y+IqJIokSMVGJmvIDIUZUaiCaqNuWxBA0YVsTNZICUghRI2lqgGqXQANCW2tLaXvHOcPe7ezuzN57u9tu3e4k7cw987hnvp45c2ZySyCQbvr9q69n5e8923PlgZ17T6Yzxswqkfu8HrjmeUaUC9pbYP2m9pB6fKgoWwIf76wT8pE9n8LNY92i/KRrrcjn4S+c5AAwOAGU7OvwenymjhQL/Z7nmwZffe/0baPXax6uLU9/4+VqIISYbWzlOigZ1Wts9U9QI5zkMiCwERg7Ut/Y2up2ty9CXShaSmYa+dw1MUGHtr0LU/0XobaqBJzAiQZl8ZZbVpagiTt8LWkYcrEWAWYwM//DgubXKaSnAUxMglM4yQPlFkNuQk3rGlrr6O+9V6tcpcWQ17wdnMKxA+WFbZ0O/2qJb87dyHOugbGaHRWleVC+sgQyqlbD+A9dwnIwx2eUY31ZcS6MHfxGaL3IvQG6ui8qHS36FHP5IJTzfw4mfqYONeBWk09x93lnz3HoOumHaJYTPrZq95ltKE8Zf4SrMVvPhWJXsgNHpYG8Jc82lCIYhUfZX1AA4ypV4i2jAgyOagXHGBoOeflcQalll2Ed88OzxlmgPOB4xfgFHmN9sJ71h+gT7wfX8lXut+RBj/7sFz4l3OdMnPkN2PCIaEpzc+DG4Q5Rnm1LKYUR2Gz0QBGMifflc4tZwYbge1IMl0m2rHpcy4RbSmiIGzY8Wso/b++CKf+l6ZpA8Je9uRGy6h+ZlmtKqihZ01QpfpxdALdxLlj3Gb0TOklp8FlXQJ/0JV2hq44qTzPD/KitwisDLEf3ewF/LFOMR4IJvogwXYNM4WMywLB8pemTjkCZ6GfZIawBj+rmfypkY7CL3genyVK4iw3CSj5VXUKflA2TUM1z0yd1k0K+AF3gs2Fl5riWSwkbjnf8CP8e4JYhrTpXyR2Q8+ZWoHm55ljaPNalpB1YUVHDgaCjTpesCqF8QO+BM+R2RQ+1iNQ3tkX4GGVEi34lAAahCJ/DjxEYMWP8g3EQxkMWLkutRZylM/VJshrB7doUKqHwSnS0ZkJL0R0fKOUAE5xkn4Sq2PFJ4SqHgKksV9+n4JYs7z64fHRnq+0vVUOi4RSxUXif+6QXXQ/BDrqGg5kKn7flcxAMQvmoOfKSSY5T5NEijg+vTV9ZxAon1tB/P70bTnFHjamHLIGvSaWsuq2yABMCZXdL8OZNBwVHjjhbTfIrizjAMbfZOQr9tZBoBJTjp0RjGYrq6kB58IwBTqJCfx0ZGlw+aCkaKKqrA+3ZSgFH93JZjltjk9Er4hSUV7Jh2Ghc4Bey4qZRbjonZbGURhxCMTWzC8dsHy0/RpbBIVoR0sRLlzuKPUI6x/hAZwrFfK8dOGZbqzwe26zVO+zWUyfLRzeoFRxdv3B5PLbZ8DFn+qyMfGc6WKL7PcHOz2hrVun9vzhEqhSXZUv5XU0ZG+HOug/66WK4wh12H8mRmzguBwM8xz3nUYe1hh+28pu9NH5w3GL8CquinL7tqp0UYLz8MgrvajBd4pcO35Jyu/PXtksKMFn8LHSO5PFz0f3Qy48A8pWDduYWFUnhY27w+5bd9F4x1R6SbzFle9VJYTH2puqsVQqMhlcKTAqMhoBGnLKYFBgNAY04ZTEpMBoCGnHKYlJgNAQ04pTFRAFzVVO3kMV/U347f3QhE1DNnTP5CT9O/ERVuZBl/AO8ffS7tsZOTuiLhQxCnjuy8H3V0CGcb94Uwe/aI/9rQu6xEMqEHAyw4P9eIKW6TW0bCCNP8w9hHuTiIqkqmYsDAOQEB3HA1+o5bE70P74wvmvc5a9pAAAAAElFTkSuQmCC');
}
.languages li a.ca:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAA6dJREFUaAXtm11IFFEUx/9nZnYzTM3PirJ6CKKohx6CojDLEKGH7EPFsFAEDYSohyDwMQh6iCIIMiEiDNGVConIfOhDCEH6oCAIKs0QK9I0XTfXnb3dO6KOriOaemeW5jzs3jn34/zPb8+dndllCCbrySvPIYTLGdgOgFbwLjJ1z7kZc/vanOfMdsKfExWzHTrTOAaw7wRqZVCqkn1Vj8YGa6LRXlwcE+/33gLCBXwkt3nxMFaIkheeKK3kOefy3HN78srqhhBbku67HDDAxA16q0GsIEqSWUSZrGAp84/wAMeVnqNl2USsaBGjRdXSgoVgovBdUx5VymWIJXZS4SefDBmxoisG28nBICW6RMtQS2kCjGuRBBQXTCQUw+OCccFYELBwuxXjgrEgYOF2K8bJYNiPnxg+XQnx7hRzRMWEGhrBevsQqrvnFC4w7q7tUMMGBqE3PwPFLYPe+tKQoLe9gdL0BCwQgJqVYfTZoU3EtA0MQjpC9x9G5D1yp8HwqZm7IvpkOmzbSpSYYFkRoopoeYJMDhGxpIMJf+oA8w8ZQmjtmghBwkHrRv1inBhvh0nZSnrba4TfvQelpkBvaQU8Hngrz4BSkqbNmZISgaEAgheuAMPDxvmGdX+DsnUz1O3bpp2z0E4pYMIfPkJ/+mKS9uD5S6Al3km+sQM26Efw4lWwr12GK1R7d7RL80gDI2UrqVs2jeU8/s66uhH+/GX82NwIv3qLcHun2WW0FYutFzFwARxSwLBgcAGk8iVUKXINrVIi6Q+aFwSMuO6RZVLAeM5WQNm4YV45ifliHVkmBYy4LvGeOwV17+5/ykvME/PFOrJMyreSkYyqwlNSCFqVhlAtvydio/95zpgoEbTCw9By9s04bDE6pVSMWbiWkwUtO9Pssmyr+/fYAkUIklcx5vR5JQijhDhQIr+Yi48D6+gEpa8G/H6wX31g/QMgXmV2mS1gtGNHoOUf5B/LRPiRGh88RXkTHEKhSf0THXJa0rfSeFomKMJHU47N0MbnSGzYB2ZKkqz/9xSPvYfOAcNvGp1kjgGjrE93Ehc4Box26IALxlEELMQ4pmIs9NnmdsFYoHfBuGAsCFi4RcU4539RC5Hy3axHgGmRH9jpEem5AkbXnS5Tuj5ClZLccOMxY1QjPbhDAwoWyfXVTca3UoBiy8BQ71Ct8mQRfAYLHtH4QUQ8VMDbBb35pTVgSin/0ZE/fQLx9Mn/YPzpE7TqwM3U+urGsYT/AqrN5GiBA6PBAAAAAElFTkSuQmCC');
}
.languages li a.sw:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAAjBJREFUaAXt2z9PAjEUAPD3Lko0RI3in8lv4OKmi6O6uIlORg0R+DaOgiRGjIuck5M46uLm4u5s4iEaTwYitb1AUk6KAz5KvNeF3utRrj9e7l4gRdCal8ysIzQyAsQSAM7JIdSG/2NXAIhnBLwX4OQTbv66tchg4U97eyPjfuxUnrTdGojmK158Qnx/3j2sDSmAsY9YATDqKEpCbI8Kvy47O+htplclSlmFuTUFBK458i6SYZCQAIqsI9NnJRTmQxDLEgamWSIsgLMKhttPAYdhfqIEEYZhGIOAIcwZY4AJKl/DGHl4eHEB4tldcCYn2j6r8foGfq4I9YfHtng/D6xmTCcUtXgFpcZsNqsw4UzRIbqN6edR9a3CUC3qL+ZlGIMiwzCMQcAQ5owxwKCXPJC/e9I0U53S66f1o84hzRhTndIrTD/qHFIYylqEcm71xZHC9JoZNt/PMAZ9hrEBo54eVK1RfaeaOpiXNGP83BlQLKBRqYJ/VCSFIa1jfrvyqdJx11MqW+mu45SDpBlDeeHUczOMQZhhGMYgYAhzxgwiTLc6h+IxbzDoGLaaMaY6px91SkcNLWi1jtGuY+C6VjNm4DS0C2IYDUPvMoyuofUZRsPQuwrmRQ9wXwkIT8HcMUZYAG8dEJgLhyN/jJB3EpfHN0LgeeQxmgDKIlEqlIObbw3jaRBQijwOghtYSIi23SWVrdQGCCcl/5qUu09A7T6JQpO7T+D+C+Bkxi1ctRb8DXpmh3Y7jGgDAAAAAElFTkSuQmCC');
}
.languages li a.us:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAvCAYAAABe1bwWAAAAAXNSR0IArs4c6QAAA4xJREFUaAXtm0toE0EYgP9Z05hsWmxNH/SFpUVrfRwEq63iAxEfBW/VnqpIUQueBA8ePOjBgxUUDz5ioahV0caDFJFWER+lUEERVBTagqjFWttU+0jTR5JxZtOFbOgks6GG3WZ+2OzOP/9O/v/LPzv/blgEYVLV0LsHMBwjqgqy5ZANhXXP62Hz2/PzOl6cg2EAPIAAdWGQXE63q00dRwl8+5mvNtkeuEmUNWrH/94bBExEmOjBBDgOF7ov+Sy0R5aDjSRTEgYlwhsDNXGNHXtniEO1aG9Dzy6EUXuivTNmxsxSwGi3RKDQa4qQcAII10ukvTVcJ44pAVxJwWTGAyMvIwXOVufGc6oJzkHZFExcsrnUAeuLZaCAFqBIcYMpL3YoPLaVpS5ALgBxgUmzSVCWb1OA7FidtiDBKHWM3sgqljtAmq2J6VRaW2iHjz98uoax3b6iyz7RxrozpsCZArVblmr8PFGVDaW5oQzSdJi4ETVj6ndmgjPVAvLiED86hYqyrLBITZfZwHOWWOBibT74poMQCAL4Zsg+gGFw1A+n7v80JZ6oYKb9GDatCF1keaKzW0MAUwnAGQKm6aWH5zRD2kSdSjQw1/MhCJJ7UD0yNhmE0y390Nnt1XOaoWyjgqGetr4bgXOPfoGfZACPDI354eTdPvik82LMM3YibWKCoc509XjhVscwl18XHv+GPg+9QTW3cIGhIXZ8GY8Z6TiZQmbPFDVIbjA8z/KsFgSWiBVL/SKz7aOuSuHBrMyLXadQMKsKbPDhe+xib/Lg8fDhDXfMDWYNCViVP94A3Oscht6BKViWaYWaygzITQ/dTJaXyFxg1LGMuucHQ8p+Km96vXC5bRBGJgJKu7t/Cl6R6w+FU70hHdYVyURv3vpFCYp8cIOhRdvVZ4Pw5P0oeTysFVoINpNV68XnMdhYwl8QakcxVosbzKFr32J6TpfpPs/fmHZmMOBflcwQzTz6KMAwYAowAgyDAEMtMoYBBnl905GrL8M0udQiYxi/twAjwDAIMNQiYwQYBgGGWmSMAMMgwFAjz/4joo6ZA46YSnNAoSoBRoBhEGCoacYMMfqSWI09FExHEhNghI5eS4DRdUZv8qoRuCTnwxtPMUZ3kpeCNnLKwtnS2K6sSj7kOEr+E2nRmiRhC4FbYUFC17xdMnygbh9gqY5UfOrbJ8lAh7x9Al3k78OmLHdjqxrwP4Rt25EdYEyOAAAAAElFTkSuQmCC');
}
/* --- /templates/xso/css/utilities.css --- */
/* Background Utilities */
.bg-primary-50 { background-color: rgba(var(--color-primary-50-rgb), 1); }
.bg-primary-50\/10 { background-color: rgba(var(--color-primary-50-rgb), 0.10); }
.bg-primary-50\/20 { background-color: rgba(var(--color-primary-50-rgb), 0.20); }
.bg-primary-50\/30 { background-color: rgba(var(--color-primary-50-rgb), 0.30); }
.bg-primary-50\/40 { background-color: rgba(var(--color-primary-50-rgb), 0.40); }
.bg-primary-50\/50 { background-color: rgba(var(--color-primary-50-rgb), 0.50); }
.bg-primary-50\/60 { background-color: rgba(var(--color-primary-50-rgb), 0.60); }
.bg-primary-50\/70 { background-color: rgba(var(--color-primary-50-rgb), 0.70); }
.bg-primary-50\/80 { background-color: rgba(var(--color-primary-50-rgb), 0.80); }
.bg-primary-50\/90 { background-color: rgba(var(--color-primary-50-rgb), 0.90); }
.bg-primary-100 { background-color: rgba(var(--color-primary-100-rgb), 1); }
.bg-primary-100\/10 { background-color: rgba(var(--color-primary-100-rgb), 0.10); }
.bg-primary-100\/20 { background-color: rgba(var(--color-primary-100-rgb), 0.20); }
.bg-primary-100\/30 { background-color: rgba(var(--color-primary-100-rgb), 0.30); }
.bg-primary-100\/40 { background-color: rgba(var(--color-primary-100-rgb), 0.40); }
.bg-primary-100\/50 { background-color: rgba(var(--color-primary-100-rgb), 0.50); }
.bg-primary-100\/60 { background-color: rgba(var(--color-primary-100-rgb), 0.60); }
.bg-primary-100\/70 { background-color: rgba(var(--color-primary-100-rgb), 0.70); }
.bg-primary-100\/80 { background-color: rgba(var(--color-primary-100-rgb), 0.80); }
.bg-primary-100\/90 { background-color: rgba(var(--color-primary-100-rgb), 0.90); }
.bg-primary-200 { background-color: rgba(var(--color-primary-200-rgb), 1); }
.bg-primary-200\/10 { background-color: rgba(var(--color-primary-200-rgb), 0.10); }
.bg-primary-200\/20 { background-color: rgba(var(--color-primary-200-rgb), 0.20); }
.bg-primary-200\/30 { background-color: rgba(var(--color-primary-200-rgb), 0.30); }
.bg-primary-200\/40 { background-color: rgba(var(--color-primary-200-rgb), 0.40); }
.bg-primary-200\/50 { background-color: rgba(var(--color-primary-200-rgb), 0.50); }
.bg-primary-200\/60 { background-color: rgba(var(--color-primary-200-rgb), 0.60); }
.bg-primary-200\/70 { background-color: rgba(var(--color-primary-200-rgb), 0.70); }
.bg-primary-200\/80 { background-color: rgba(var(--color-primary-200-rgb), 0.80); }
.bg-primary-200\/90 { background-color: rgba(var(--color-primary-200-rgb), 0.90); }
.bg-primary-300 { background-color: rgba(var(--color-primary-300-rgb), 1); }
.bg-primary-300\/10 { background-color: rgba(var(--color-primary-300-rgb), 0.10); }
.bg-primary-300\/20 { background-color: rgba(var(--color-primary-300-rgb), 0.20); }
.bg-primary-300\/30 { background-color: rgba(var(--color-primary-300-rgb), 0.30); }
.bg-primary-300\/40 { background-color: rgba(var(--color-primary-300-rgb), 0.40); }
.bg-primary-300\/50 { background-color: rgba(var(--color-primary-300-rgb), 0.50); }
.bg-primary-300\/60 { background-color: rgba(var(--color-primary-300-rgb), 0.60); }
.bg-primary-300\/70 { background-color: rgba(var(--color-primary-300-rgb), 0.70); }
.bg-primary-300\/80 { background-color: rgba(var(--color-primary-300-rgb), 0.80); }
.bg-primary-300\/90 { background-color: rgba(var(--color-primary-300-rgb), 0.90); }
.bg-primary-400 { background-color: rgba(var(--color-primary-400-rgb), 1); }
.bg-primary-400\/10 { background-color: rgba(var(--color-primary-400-rgb), 0.10); }
.bg-primary-400\/20 { background-color: rgba(var(--color-primary-400-rgb), 0.20); }
.bg-primary-400\/30 { background-color: rgba(var(--color-primary-400-rgb), 0.30); }
.bg-primary-400\/40 { background-color: rgba(var(--color-primary-400-rgb), 0.40); }
.bg-primary-400\/50 { background-color: rgba(var(--color-primary-400-rgb), 0.50); }
.bg-primary-400\/60 { background-color: rgba(var(--color-primary-400-rgb), 0.60); }
.bg-primary-400\/70 { background-color: rgba(var(--color-primary-400-rgb), 0.70); }
.bg-primary-400\/80 { background-color: rgba(var(--color-primary-400-rgb), 0.80); }
.bg-primary-400\/90 { background-color: rgba(var(--color-primary-400-rgb), 0.90); }
.bg-primary-500 { background-color: rgba(var(--color-primary-500-rgb), 1); }
.bg-primary-500\/10 { background-color: rgba(var(--color-primary-500-rgb), 0.10); }
.bg-primary-500\/20 { background-color: rgba(var(--color-primary-500-rgb), 0.20); }
.bg-primary-500\/30 { background-color: rgba(var(--color-primary-500-rgb), 0.30); }
.bg-primary-500\/40 { background-color: rgba(var(--color-primary-500-rgb), 0.40); }
.bg-primary-500\/50 { background-color: rgba(var(--color-primary-500-rgb), 0.50); }
.bg-primary-500\/60 { background-color: rgba(var(--color-primary-500-rgb), 0.60); }
.bg-primary-500\/70 { background-color: rgba(var(--color-primary-500-rgb), 0.70); }
.bg-primary-500\/80 { background-color: rgba(var(--color-primary-500-rgb), 0.80); }
.bg-primary-500\/90 { background-color: rgba(var(--color-primary-500-rgb), 0.90); }
.bg-primary-600 { background-color: rgba(var(--color-primary-600-rgb), 1); }
.bg-primary-600\/10 { background-color: rgba(var(--color-primary-600-rgb), 0.10); }
.bg-primary-600\/20 { background-color: rgba(var(--color-primary-600-rgb), 0.20); }
.bg-primary-600\/30 { background-color: rgba(var(--color-primary-600-rgb), 0.30); }
.bg-primary-600\/40 { background-color: rgba(var(--color-primary-600-rgb), 0.40); }
.bg-primary-600\/50 { background-color: rgba(var(--color-primary-600-rgb), 0.50); }
.bg-primary-600\/60 { background-color: rgba(var(--color-primary-600-rgb), 0.60); }
.bg-primary-600\/70 { background-color: rgba(var(--color-primary-600-rgb), 0.70); }
.bg-primary-600\/80 { background-color: rgba(var(--color-primary-600-rgb), 0.80); }
.bg-primary-600\/90 { background-color: rgba(var(--color-primary-600-rgb), 0.90); }
.bg-primary-700 { background-color: rgba(var(--color-primary-700-rgb), 1); }
.bg-primary-700\/10 { background-color: rgba(var(--color-primary-700-rgb), 0.10); }
.bg-primary-700\/20 { background-color: rgba(var(--color-primary-700-rgb), 0.20); }
.bg-primary-700\/30 { background-color: rgba(var(--color-primary-700-rgb), 0.30); }
.bg-primary-700\/40 { background-color: rgba(var(--color-primary-700-rgb), 0.40); }
.bg-primary-700\/50 { background-color: rgba(var(--color-primary-700-rgb), 0.50); }
.bg-primary-700\/60 { background-color: rgba(var(--color-primary-700-rgb), 0.60); }
.bg-primary-700\/70 { background-color: rgba(var(--color-primary-700-rgb), 0.70); }
.bg-primary-700\/80 { background-color: rgba(var(--color-primary-700-rgb), 0.80); }
.bg-primary-700\/90 { background-color: rgba(var(--color-primary-700-rgb), 0.90); }
.bg-primary-800 { background-color: rgba(var(--color-primary-800-rgb), 1); }
.bg-primary-800\/10 { background-color: rgba(var(--color-primary-800-rgb), 0.10); }
.bg-primary-800\/20 { background-color: rgba(var(--color-primary-800-rgb), 0.20); }
.bg-primary-800\/30 { background-color: rgba(var(--color-primary-800-rgb), 0.30); }
.bg-primary-800\/40 { background-color: rgba(var(--color-primary-800-rgb), 0.40); }
.bg-primary-800\/50 { background-color: rgba(var(--color-primary-800-rgb), 0.50); }
.bg-primary-800\/60 { background-color: rgba(var(--color-primary-800-rgb), 0.60); }
.bg-primary-800\/70 { background-color: rgba(var(--color-primary-800-rgb), 0.70); }
.bg-primary-800\/80 { background-color: rgba(var(--color-primary-800-rgb), 0.80); }
.bg-primary-800\/90 { background-color: rgba(var(--color-primary-800-rgb), 0.90); }
.bg-primary-900 { background-color: rgba(var(--color-primary-900-rgb), 1); }
.bg-primary-900\/10 { background-color: rgba(var(--color-primary-900-rgb), 0.10); }
.bg-primary-900\/20 { background-color: rgba(var(--color-primary-900-rgb), 0.20); }
.bg-primary-900\/30 { background-color: rgba(var(--color-primary-900-rgb), 0.30); }
.bg-primary-900\/40 { background-color: rgba(var(--color-primary-900-rgb), 0.40); }
.bg-primary-900\/50 { background-color: rgba(var(--color-primary-900-rgb), 0.50); }
.bg-primary-900\/60 { background-color: rgba(var(--color-primary-900-rgb), 0.60); }
.bg-primary-900\/70 { background-color: rgba(var(--color-primary-900-rgb), 0.70); }
.bg-primary-900\/80 { background-color: rgba(var(--color-primary-900-rgb), 0.80); }
.bg-primary-900\/90 { background-color: rgba(var(--color-primary-900-rgb), 0.90); }
.bg-primary-950 { background-color: rgba(var(--color-primary-950-rgb), 1); }
.bg-primary-950\/10 { background-color: rgba(var(--color-primary-950-rgb), 0.10); }
.bg-primary-950\/20 { background-color: rgba(var(--color-primary-950-rgb), 0.20); }
.bg-primary-950\/30 { background-color: rgba(var(--color-primary-950-rgb), 0.30); }
.bg-primary-950\/40 { background-color: rgba(var(--color-primary-950-rgb), 0.40); }
.bg-primary-950\/50 { background-color: rgba(var(--color-primary-950-rgb), 0.50); }
.bg-primary-950\/60 { background-color: rgba(var(--color-primary-950-rgb), 0.60); }
.bg-primary-950\/70 { background-color: rgba(var(--color-primary-950-rgb), 0.70); }
.bg-primary-950\/80 { background-color: rgba(var(--color-primary-950-rgb), 0.80); }
.bg-primary-950\/90 { background-color: rgba(var(--color-primary-950-rgb), 0.90); }
.bg-text { background-color: rgba(var(--color-text-rgb), 1); }
.bg-text\/10 { background-color: rgba(var(--color-text-rgb), 0.10); }
.bg-text\/20 { background-color: rgba(var(--color-text-rgb), 0.20); }
.bg-text\/30 { background-color: rgba(var(--color-text-rgb), 0.30); }
.bg-text\/40 { background-color: rgba(var(--color-text-rgb), 0.40); }
.bg-text\/50 { background-color: rgba(var(--color-text-rgb), 0.50); }
.bg-text\/60 { background-color: rgba(var(--color-text-rgb), 0.60); }
.bg-text\/70 { background-color: rgba(var(--color-text-rgb), 0.70); }
.bg-text\/80 { background-color: rgba(var(--color-text-rgb), 0.80); }
.bg-text\/90 { background-color: rgba(var(--color-text-rgb), 0.90); }
.bg-success { background-color: rgba(var(--color-success-rgb), 1); }
.bg-success\/10 { background-color: rgba(var(--color-success-rgb), 0.10); }
.bg-success\/20 { background-color: rgba(var(--color-success-rgb), 0.20); }
.bg-success\/30 { background-color: rgba(var(--color-success-rgb), 0.30); }
.bg-success\/40 { background-color: rgba(var(--color-success-rgb), 0.40); }
.bg-success\/50 { background-color: rgba(var(--color-success-rgb), 0.50); }
.bg-success\/60 { background-color: rgba(var(--color-success-rgb), 0.60); }
.bg-success\/70 { background-color: rgba(var(--color-success-rgb), 0.70); }
.bg-success\/80 { background-color: rgba(var(--color-success-rgb), 0.80); }
.bg-success\/90 { background-color: rgba(var(--color-success-rgb), 0.90); }
.bg-warning { background-color: rgba(var(--color-warning-rgb), 1); }
.bg-warning\/10 { background-color: rgba(var(--color-warning-rgb), 0.10); }
.bg-warning\/20 { background-color: rgba(var(--color-warning-rgb), 0.20); }
.bg-warning\/30 { background-color: rgba(var(--color-warning-rgb), 0.30); }
.bg-warning\/40 { background-color: rgba(var(--color-warning-rgb), 0.40); }
.bg-warning\/50 { background-color: rgba(var(--color-warning-rgb), 0.50); }
.bg-warning\/60 { background-color: rgba(var(--color-warning-rgb), 0.60); }
.bg-warning\/70 { background-color: rgba(var(--color-warning-rgb), 0.70); }
.bg-warning\/80 { background-color: rgba(var(--color-warning-rgb), 0.80); }
.bg-warning\/90 { background-color: rgba(var(--color-warning-rgb), 0.90); }
.bg-danger { background-color: rgba(var(--color-danger-rgb), 1); }
.bg-danger\/10 { background-color: rgba(var(--color-danger-rgb), 0.10); }
.bg-danger\/20 { background-color: rgba(var(--color-danger-rgb), 0.20); }
.bg-danger\/30 { background-color: rgba(var(--color-danger-rgb), 0.30); }
.bg-danger\/40 { background-color: rgba(var(--color-danger-rgb), 0.40); }
.bg-danger\/50 { background-color: rgba(var(--color-danger-rgb), 0.50); }
.bg-danger\/60 { background-color: rgba(var(--color-danger-rgb), 0.60); }
.bg-danger\/70 { background-color: rgba(var(--color-danger-rgb), 0.70); }
.bg-danger\/80 { background-color: rgba(var(--color-danger-rgb), 0.80); }
.bg-danger\/90 { background-color: rgba(var(--color-danger-rgb), 0.90); }
.bg-light { background-color: rgba(var(--color-light-rgb), 1); }
.bg-light\/10 { background-color: rgba(var(--color-light-rgb), 0.10); }
.bg-light\/20 { background-color: rgba(var(--color-light-rgb), 0.20); }
.bg-light\/30 { background-color: rgba(var(--color-light-rgb), 0.30); }
.bg-light\/40 { background-color: rgba(var(--color-light-rgb), 0.40); }
.bg-light\/50 { background-color: rgba(var(--color-light-rgb), 0.50); }
.bg-light\/60 { background-color: rgba(var(--color-light-rgb), 0.60); }
.bg-light\/70 { background-color: rgba(var(--color-light-rgb), 0.70); }
.bg-light\/80 { background-color: rgba(var(--color-light-rgb), 0.80); }
.bg-light\/90 { background-color: rgba(var(--color-light-rgb), 0.90); }
.bg-white { background-color: rgba(var(--color-white-rgb), 1); }
.bg-white\/10 { background-color: rgba(var(--color-white-rgb), 0.10); }
.bg-white\/20 { background-color: rgba(var(--color-white-rgb), 0.20); }
.bg-white\/30 { background-color: rgba(var(--color-white-rgb), 0.30); }
.bg-white\/40 { background-color: rgba(var(--color-white-rgb), 0.40); }
.bg-white\/50 { background-color: rgba(var(--color-white-rgb), 0.50); }
.bg-white\/60 { background-color: rgba(var(--color-white-rgb), 0.60); }
.bg-white\/70 { background-color: rgba(var(--color-white-rgb), 0.70); }
.bg-white\/80 { background-color: rgba(var(--color-white-rgb), 0.80); }
.bg-white\/90 { background-color: rgba(var(--color-white-rgb), 0.90); }
/* Border Utilities */
.border-primary-50 { border-color: rgba(var(--color-primary-50-rgb), 1); }
.border-primary-50\/10 { border-color: rgba(var(--color-primary-50-rgb), 0.10); }
.border-primary-50\/20 { border-color: rgba(var(--color-primary-50-rgb), 0.20); }
.border-primary-50\/30 { border-color: rgba(var(--color-primary-50-rgb), 0.30); }
.border-primary-50\/40 { border-color: rgba(var(--color-primary-50-rgb), 0.40); }
.border-primary-50\/50 { border-color: rgba(var(--color-primary-50-rgb), 0.50); }
.border-primary-50\/60 { border-color: rgba(var(--color-primary-50-rgb), 0.60); }
.border-primary-50\/70 { border-color: rgba(var(--color-primary-50-rgb), 0.70); }
.border-primary-50\/80 { border-color: rgba(var(--color-primary-50-rgb), 0.80); }
.border-primary-50\/90 { border-color: rgba(var(--color-primary-50-rgb), 0.90); }
.border-primary-100 { border-color: rgba(var(--color-primary-100-rgb), 1); }
.border-primary-100\/10 { border-color: rgba(var(--color-primary-100-rgb), 0.10); }
.border-primary-100\/20 { border-color: rgba(var(--color-primary-100-rgb), 0.20); }
.border-primary-100\/30 { border-color: rgba(var(--color-primary-100-rgb), 0.30); }
.border-primary-100\/40 { border-color: rgba(var(--color-primary-100-rgb), 0.40); }
.border-primary-100\/50 { border-color: rgba(var(--color-primary-100-rgb), 0.50); }
.border-primary-100\/60 { border-color: rgba(var(--color-primary-100-rgb), 0.60); }
.border-primary-100\/70 { border-color: rgba(var(--color-primary-100-rgb), 0.70); }
.border-primary-100\/80 { border-color: rgba(var(--color-primary-100-rgb), 0.80); }
.border-primary-100\/90 { border-color: rgba(var(--color-primary-100-rgb), 0.90); }
.border-primary-200 { border-color: rgba(var(--color-primary-200-rgb), 1); }
.border-primary-200\/10 { border-color: rgba(var(--color-primary-200-rgb), 0.10); }
.border-primary-200\/20 { border-color: rgba(var(--color-primary-200-rgb), 0.20); }
.border-primary-200\/30 { border-color: rgba(var(--color-primary-200-rgb), 0.30); }
.border-primary-200\/40 { border-color: rgba(var(--color-primary-200-rgb), 0.40); }
.border-primary-200\/50 { border-color: rgba(var(--color-primary-200-rgb), 0.50); }
.border-primary-200\/60 { border-color: rgba(var(--color-primary-200-rgb), 0.60); }
.border-primary-200\/70 { border-color: rgba(var(--color-primary-200-rgb), 0.70); }
.border-primary-200\/80 { border-color: rgba(var(--color-primary-200-rgb), 0.80); }
.border-primary-200\/90 { border-color: rgba(var(--color-primary-200-rgb), 0.90); }
.border-primary-300 { border-color: rgba(var(--color-primary-300-rgb), 1); }
.border-primary-300\/10 { border-color: rgba(var(--color-primary-300-rgb), 0.10); }
.border-primary-300\/20 { border-color: rgba(var(--color-primary-300-rgb), 0.20); }
.border-primary-300\/30 { border-color: rgba(var(--color-primary-300-rgb), 0.30); }
.border-primary-300\/40 { border-color: rgba(var(--color-primary-300-rgb), 0.40); }
.border-primary-300\/50 { border-color: rgba(var(--color-primary-300-rgb), 0.50); }
.border-primary-300\/60 { border-color: rgba(var(--color-primary-300-rgb), 0.60); }
.border-primary-300\/70 { border-color: rgba(var(--color-primary-300-rgb), 0.70); }
.border-primary-300\/80 { border-color: rgba(var(--color-primary-300-rgb), 0.80); }
.border-primary-300\/90 { border-color: rgba(var(--color-primary-300-rgb), 0.90); }
.border-primary-400 { border-color: rgba(var(--color-primary-400-rgb), 1); }
.border-primary-400\/10 { border-color: rgba(var(--color-primary-400-rgb), 0.10); }
.border-primary-400\/20 { border-color: rgba(var(--color-primary-400-rgb), 0.20); }
.border-primary-400\/30 { border-color: rgba(var(--color-primary-400-rgb), 0.30); }
.border-primary-400\/40 { border-color: rgba(var(--color-primary-400-rgb), 0.40); }
.border-primary-400\/50 { border-color: rgba(var(--color-primary-400-rgb), 0.50); }
.border-primary-400\/60 { border-color: rgba(var(--color-primary-400-rgb), 0.60); }
.border-primary-400\/70 { border-color: rgba(var(--color-primary-400-rgb), 0.70); }
.border-primary-400\/80 { border-color: rgba(var(--color-primary-400-rgb), 0.80); }
.border-primary-400\/90 { border-color: rgba(var(--color-primary-400-rgb), 0.90); }
.border-primary-500 { border-color: rgba(var(--color-primary-500-rgb), 1); }
.border-primary-500\/10 { border-color: rgba(var(--color-primary-500-rgb), 0.10); }
.border-primary-500\/20 { border-color: rgba(var(--color-primary-500-rgb), 0.20); }
.border-primary-500\/30 { border-color: rgba(var(--color-primary-500-rgb), 0.30); }
.border-primary-500\/40 { border-color: rgba(var(--color-primary-500-rgb), 0.40); }
.border-primary-500\/50 { border-color: rgba(var(--color-primary-500-rgb), 0.50); }
.border-primary-500\/60 { border-color: rgba(var(--color-primary-500-rgb), 0.60); }
.border-primary-500\/70 { border-color: rgba(var(--color-primary-500-rgb), 0.70); }
.border-primary-500\/80 { border-color: rgba(var(--color-primary-500-rgb), 0.80); }
.border-primary-500\/90 { border-color: rgba(var(--color-primary-500-rgb), 0.90); }
.border-primary-600 { border-color: rgba(var(--color-primary-600-rgb), 1); }
.border-primary-600\/10 { border-color: rgba(var(--color-primary-600-rgb), 0.10); }
.border-primary-600\/20 { border-color: rgba(var(--color-primary-600-rgb), 0.20); }
.border-primary-600\/30 { border-color: rgba(var(--color-primary-600-rgb), 0.30); }
.border-primary-600\/40 { border-color: rgba(var(--color-primary-600-rgb), 0.40); }
.border-primary-600\/50 { border-color: rgba(var(--color-primary-600-rgb), 0.50); }
.border-primary-600\/60 { border-color: rgba(var(--color-primary-600-rgb), 0.60); }
.border-primary-600\/70 { border-color: rgba(var(--color-primary-600-rgb), 0.70); }
.border-primary-600\/80 { border-color: rgba(var(--color-primary-600-rgb), 0.80); }
.border-primary-600\/90 { border-color: rgba(var(--color-primary-600-rgb), 0.90); }
.border-primary-700 { border-color: rgba(var(--color-primary-700-rgb), 1); }
.border-primary-700\/10 { border-color: rgba(var(--color-primary-700-rgb), 0.10); }
.border-primary-700\/20 { border-color: rgba(var(--color-primary-700-rgb), 0.20); }
.border-primary-700\/30 { border-color: rgba(var(--color-primary-700-rgb), 0.30); }
.border-primary-700\/40 { border-color: rgba(var(--color-primary-700-rgb), 0.40); }
.border-primary-700\/50 { border-color: rgba(var(--color-primary-700-rgb), 0.50); }
.border-primary-700\/60 { border-color: rgba(var(--color-primary-700-rgb), 0.60); }
.border-primary-700\/70 { border-color: rgba(var(--color-primary-700-rgb), 0.70); }
.border-primary-700\/80 { border-color: rgba(var(--color-primary-700-rgb), 0.80); }
.border-primary-700\/90 { border-color: rgba(var(--color-primary-700-rgb), 0.90); }
.border-primary-800 { border-color: rgba(var(--color-primary-800-rgb), 1); }
.border-primary-800\/10 { border-color: rgba(var(--color-primary-800-rgb), 0.10); }
.border-primary-800\/20 { border-color: rgba(var(--color-primary-800-rgb), 0.20); }
.border-primary-800\/30 { border-color: rgba(var(--color-primary-800-rgb), 0.30); }
.border-primary-800\/40 { border-color: rgba(var(--color-primary-800-rgb), 0.40); }
.border-primary-800\/50 { border-color: rgba(var(--color-primary-800-rgb), 0.50); }
.border-primary-800\/60 { border-color: rgba(var(--color-primary-800-rgb), 0.60); }
.border-primary-800\/70 { border-color: rgba(var(--color-primary-800-rgb), 0.70); }
.border-primary-800\/80 { border-color: rgba(var(--color-primary-800-rgb), 0.80); }
.border-primary-800\/90 { border-color: rgba(var(--color-primary-800-rgb), 0.90); }
.border-primary-900 { border-color: rgba(var(--color-primary-900-rgb), 1); }
.border-primary-900\/10 { border-color: rgba(var(--color-primary-900-rgb), 0.10); }
.border-primary-900\/20 { border-color: rgba(var(--color-primary-900-rgb), 0.20); }
.border-primary-900\/30 { border-color: rgba(var(--color-primary-900-rgb), 0.30); }
.border-primary-900\/40 { border-color: rgba(var(--color-primary-900-rgb), 0.40); }
.border-primary-900\/50 { border-color: rgba(var(--color-primary-900-rgb), 0.50); }
.border-primary-900\/60 { border-color: rgba(var(--color-primary-900-rgb), 0.60); }
.border-primary-900\/70 { border-color: rgba(var(--color-primary-900-rgb), 0.70); }
.border-primary-900\/80 { border-color: rgba(var(--color-primary-900-rgb), 0.80); }
.border-primary-900\/90 { border-color: rgba(var(--color-primary-900-rgb), 0.90); }
.border-primary-950 { border-color: rgba(var(--color-primary-950-rgb), 1); }
.border-primary-950\/10 { border-color: rgba(var(--color-primary-950-rgb), 0.10); }
.border-primary-950\/20 { border-color: rgba(var(--color-primary-950-rgb), 0.20); }
.border-primary-950\/30 { border-color: rgba(var(--color-primary-950-rgb), 0.30); }
.border-primary-950\/40 { border-color: rgba(var(--color-primary-950-rgb), 0.40); }
.border-primary-950\/50 { border-color: rgba(var(--color-primary-950-rgb), 0.50); }
.border-primary-950\/60 { border-color: rgba(var(--color-primary-950-rgb), 0.60); }
.border-primary-950\/70 { border-color: rgba(var(--color-primary-950-rgb), 0.70); }
.border-primary-950\/80 { border-color: rgba(var(--color-primary-950-rgb), 0.80); }
.border-primary-950\/90 { border-color: rgba(var(--color-primary-950-rgb), 0.90); }
.border-text { border-color: rgba(var(--color-text-rgb), 1); }
.border-text\/10 { border-color: rgba(var(--color-text-rgb), 0.10); }
.border-text\/20 { border-color: rgba(var(--color-text-rgb), 0.20); }
.border-text\/30 { border-color: rgba(var(--color-text-rgb), 0.30); }
.border-text\/40 { border-color: rgba(var(--color-text-rgb), 0.40); }
.border-text\/50 { border-color: rgba(var(--color-text-rgb), 0.50); }
.border-text\/60 { border-color: rgba(var(--color-text-rgb), 0.60); }
.border-text\/70 { border-color: rgba(var(--color-text-rgb), 0.70); }
.border-text\/80 { border-color: rgba(var(--color-text-rgb), 0.80); }
.border-text\/90 { border-color: rgba(var(--color-text-rgb), 0.90); }
.border-success { border-color: rgba(var(--color-success-rgb), 1); }
.border-success\/10 { border-color: rgba(var(--color-success-rgb), 0.10); }
.border-success\/20 { border-color: rgba(var(--color-success-rgb), 0.20); }
.border-success\/30 { border-color: rgba(var(--color-success-rgb), 0.30); }
.border-success\/40 { border-color: rgba(var(--color-success-rgb), 0.40); }
.border-success\/50 { border-color: rgba(var(--color-success-rgb), 0.50); }
.border-success\/60 { border-color: rgba(var(--color-success-rgb), 0.60); }
.border-success\/70 { border-color: rgba(var(--color-success-rgb), 0.70); }
.border-success\/80 { border-color: rgba(var(--color-success-rgb), 0.80); }
.border-success\/90 { border-color: rgba(var(--color-success-rgb), 0.90); }
.border-warning { border-color: rgba(var(--color-warning-rgb), 1); }
.border-warning\/10 { border-color: rgba(var(--color-warning-rgb), 0.10); }
.border-warning\/20 { border-color: rgba(var(--color-warning-rgb), 0.20); }
.border-warning\/30 { border-color: rgba(var(--color-warning-rgb), 0.30); }
.border-warning\/40 { border-color: rgba(var(--color-warning-rgb), 0.40); }
.border-warning\/50 { border-color: rgba(var(--color-warning-rgb), 0.50); }
.border-warning\/60 { border-color: rgba(var(--color-warning-rgb), 0.60); }
.border-warning\/70 { border-color: rgba(var(--color-warning-rgb), 0.70); }
.border-warning\/80 { border-color: rgba(var(--color-warning-rgb), 0.80); }
.border-warning\/90 { border-color: rgba(var(--color-warning-rgb), 0.90); }
.border-danger { border-color: rgba(var(--color-danger-rgb), 1); }
.border-danger\/10 { border-color: rgba(var(--color-danger-rgb), 0.10); }
.border-danger\/20 { border-color: rgba(var(--color-danger-rgb), 0.20); }
.border-danger\/30 { border-color: rgba(var(--color-danger-rgb), 0.30); }
.border-danger\/40 { border-color: rgba(var(--color-danger-rgb), 0.40); }
.border-danger\/50 { border-color: rgba(var(--color-danger-rgb), 0.50); }
.border-danger\/60 { border-color: rgba(var(--color-danger-rgb), 0.60); }
.border-danger\/70 { border-color: rgba(var(--color-danger-rgb), 0.70); }
.border-danger\/80 { border-color: rgba(var(--color-danger-rgb), 0.80); }
.border-danger\/90 { border-color: rgba(var(--color-danger-rgb), 0.90); }
.border-light { border-color: rgba(var(--color-light-rgb), 1); }
.border-light\/10 { border-color: rgba(var(--color-light-rgb), 0.10); }
.border-light\/20 { border-color: rgba(var(--color-light-rgb), 0.20); }
.border-light\/30 { border-color: rgba(var(--color-light-rgb), 0.30); }
.border-light\/40 { border-color: rgba(var(--color-light-rgb), 0.40); }
.border-light\/50 { border-color: rgba(var(--color-light-rgb), 0.50); }
.border-light\/60 { border-color: rgba(var(--color-light-rgb), 0.60); }
.border-light\/70 { border-color: rgba(var(--color-light-rgb), 0.70); }
.border-light\/80 { border-color: rgba(var(--color-light-rgb), 0.80); }
.border-light\/90 { border-color: rgba(var(--color-light-rgb), 0.90); }
.border-white { border-color: rgba(var(--color-white-rgb), 1); }
.border-white\/10 { border-color: rgba(var(--color-white-rgb), 0.10); }
.border-white\/20 { border-color: rgba(var(--color-white-rgb), 0.20); }
.border-white\/30 { border-color: rgba(var(--color-white-rgb), 0.30); }
.border-white\/40 { border-color: rgba(var(--color-white-rgb), 0.40); }
.border-white\/50 { border-color: rgba(var(--color-white-rgb), 0.50); }
.border-white\/60 { border-color: rgba(var(--color-white-rgb), 0.60); }
.border-white\/70 { border-color: rgba(var(--color-white-rgb), 0.70); }
.border-white\/80 { border-color: rgba(var(--color-white-rgb), 0.80); }
.border-white\/90 { border-color: rgba(var(--color-white-rgb), 0.90); }
/* Text (color) Utilities */
.c-primary-50 { color: rgba(var(--color-primary-50-rgb), 1); }
.c-primary-50\/10 { color: rgba(var(--color-primary-50-rgb), 0.10); }
.c-primary-50\/20 { color: rgba(var(--color-primary-50-rgb), 0.20); }
.c-primary-50\/30 { color: rgba(var(--color-primary-50-rgb), 0.30); }
.c-primary-50\/40 { color: rgba(var(--color-primary-50-rgb), 0.40); }
.c-primary-50\/50 { color: rgba(var(--color-primary-50-rgb), 0.50); }
.c-primary-50\/60 { color: rgba(var(--color-primary-50-rgb), 0.60); }
.c-primary-50\/70 { color: rgba(var(--color-primary-50-rgb), 0.70); }
.c-primary-50\/80 { color: rgba(var(--color-primary-50-rgb), 0.80); }
.c-primary-50\/90 { color: rgba(var(--color-primary-50-rgb), 0.90); }
.c-primary-100 { color: rgba(var(--color-primary-100-rgb), 1); }
.c-primary-100\/10 { color: rgba(var(--color-primary-100-rgb), 0.10); }
.c-primary-100\/20 { color: rgba(var(--color-primary-100-rgb), 0.20); }
.c-primary-100\/30 { color: rgba(var(--color-primary-100-rgb), 0.30); }
.c-primary-100\/40 { color: rgba(var(--color-primary-100-rgb), 0.40); }
.c-primary-100\/50 { color: rgba(var(--color-primary-100-rgb), 0.50); }
.c-primary-100\/60 { color: rgba(var(--color-primary-100-rgb), 0.60); }
.c-primary-100\/70 { color: rgba(var(--color-primary-100-rgb), 0.70); }
.c-primary-100\/80 { color: rgba(var(--color-primary-100-rgb), 0.80); }
.c-primary-100\/90 { color: rgba(var(--color-primary-100-rgb), 0.90); }
.c-primary-200 { color: rgba(var(--color-primary-200-rgb), 1); }
.c-primary-200\/10 { color: rgba(var(--color-primary-200-rgb), 0.10); }
.c-primary-200\/20 { color: rgba(var(--color-primary-200-rgb), 0.20); }
.c-primary-200\/30 { color: rgba(var(--color-primary-200-rgb), 0.30); }
.c-primary-200\/40 { color: rgba(var(--color-primary-200-rgb), 0.40); }
.c-primary-200\/50 { color: rgba(var(--color-primary-200-rgb), 0.50); }
.c-primary-200\/60 { color: rgba(var(--color-primary-200-rgb), 0.60); }
.c-primary-200\/70 { color: rgba(var(--color-primary-200-rgb), 0.70); }
.c-primary-200\/80 { color: rgba(var(--color-primary-200-rgb), 0.80); }
.c-primary-200\/90 { color: rgba(var(--color-primary-200-rgb), 0.90); }
.c-primary-300 { color: rgba(var(--color-primary-300-rgb), 1); }
.c-primary-300\/10 { color: rgba(var(--color-primary-300-rgb), 0.10); }
.c-primary-300\/20 { color: rgba(var(--color-primary-300-rgb), 0.20); }
.c-primary-300\/30 { color: rgba(var(--color-primary-300-rgb), 0.30); }
.c-primary-300\/40 { color: rgba(var(--color-primary-300-rgb), 0.40); }
.c-primary-300\/50 { color: rgba(var(--color-primary-300-rgb), 0.50); }
.c-primary-300\/60 { color: rgba(var(--color-primary-300-rgb), 0.60); }
.c-primary-300\/70 { color: rgba(var(--color-primary-300-rgb), 0.70); }
.c-primary-300\/80 { color: rgba(var(--color-primary-300-rgb), 0.80); }
.c-primary-300\/90 { color: rgba(var(--color-primary-300-rgb), 0.90); }
.c-primary-400 { color: rgba(var(--color-primary-400-rgb), 1); }
.c-primary-400\/10 { color: rgba(var(--color-primary-400-rgb), 0.10); }
.c-primary-400\/20 { color: rgba(var(--color-primary-400-rgb), 0.20); }
.c-primary-400\/30 { color: rgba(var(--color-primary-400-rgb), 0.30); }
.c-primary-400\/40 { color: rgba(var(--color-primary-400-rgb), 0.40); }
.c-primary-400\/50 { color: rgba(var(--color-primary-400-rgb), 0.50); }
.c-primary-400\/60 { color: rgba(var(--color-primary-400-rgb), 0.60); }
.c-primary-400\/70 { color: rgba(var(--color-primary-400-rgb), 0.70); }
.c-primary-400\/80 { color: rgba(var(--color-primary-400-rgb), 0.80); }
.c-primary-400\/90 { color: rgba(var(--color-primary-400-rgb), 0.90); }
.c-primary-500 { color: rgba(var(--color-primary-500-rgb), 1); }
.c-primary-500\/10 { color: rgba(var(--color-primary-500-rgb), 0.10); }
.c-primary-500\/20 { color: rgba(var(--color-primary-500-rgb), 0.20); }
.c-primary-500\/30 { color: rgba(var(--color-primary-500-rgb), 0.30); }
.c-primary-500\/40 { color: rgba(var(--color-primary-500-rgb), 0.40); }
.c-primary-500\/50 { color: rgba(var(--color-primary-500-rgb), 0.50); }
.c-primary-500\/60 { color: rgba(var(--color-primary-500-rgb), 0.60); }
.c-primary-500\/70 { color: rgba(var(--color-primary-500-rgb), 0.70); }
.c-primary-500\/80 { color: rgba(var(--color-primary-500-rgb), 0.80); }
.c-primary-500\/90 { color: rgba(var(--color-primary-500-rgb), 0.90); }
.c-primary-600 { color: rgba(var(--color-primary-600-rgb), 1); }
.c-primary-600\/10 { color: rgba(var(--color-primary-600-rgb), 0.10); }
.c-primary-600\/20 { color: rgba(var(--color-primary-600-rgb), 0.20); }
.c-primary-600\/30 { color: rgba(var(--color-primary-600-rgb), 0.30); }
.c-primary-600\/40 { color: rgba(var(--color-primary-600-rgb), 0.40); }
.c-primary-600\/50 { color: rgba(var(--color-primary-600-rgb), 0.50); }
.c-primary-600\/60 { color: rgba(var(--color-primary-600-rgb), 0.60); }
.c-primary-600\/70 { color: rgba(var(--color-primary-600-rgb), 0.70); }
.c-primary-600\/80 { color: rgba(var(--color-primary-600-rgb), 0.80); }
.c-primary-600\/90 { color: rgba(var(--color-primary-600-rgb), 0.90); }
.c-primary-700 { color: rgba(var(--color-primary-700-rgb), 1); }
.c-primary-700\/10 { color: rgba(var(--color-primary-700-rgb), 0.10); }
.c-primary-700\/20 { color: rgba(var(--color-primary-700-rgb), 0.20); }
.c-primary-700\/30 { color: rgba(var(--color-primary-700-rgb), 0.30); }
.c-primary-700\/40 { color: rgba(var(--color-primary-700-rgb), 0.40); }
.c-primary-700\/50 { color: rgba(var(--color-primary-700-rgb), 0.50); }
.c-primary-700\/60 { color: rgba(var(--color-primary-700-rgb), 0.60); }
.c-primary-700\/70 { color: rgba(var(--color-primary-700-rgb), 0.70); }
.c-primary-700\/80 { color: rgba(var(--color-primary-700-rgb), 0.80); }
.c-primary-700\/90 { color: rgba(var(--color-primary-700-rgb), 0.90); }
.c-primary-800 { color: rgba(var(--color-primary-800-rgb), 1); }
.c-primary-800\/10 { color: rgba(var(--color-primary-800-rgb), 0.10); }
.c-primary-800\/20 { color: rgba(var(--color-primary-800-rgb), 0.20); }
.c-primary-800\/30 { color: rgba(var(--color-primary-800-rgb), 0.30); }
.c-primary-800\/40 { color: rgba(var(--color-primary-800-rgb), 0.40); }
.c-primary-800\/50 { color: rgba(var(--color-primary-800-rgb), 0.50); }
.c-primary-800\/60 { color: rgba(var(--color-primary-800-rgb), 0.60); }
.c-primary-800\/70 { color: rgba(var(--color-primary-800-rgb), 0.70); }
.c-primary-800\/80 { color: rgba(var(--color-primary-800-rgb), 0.80); }
.c-primary-800\/90 { color: rgba(var(--color-primary-800-rgb), 0.90); }
.c-primary-900 { color: rgba(var(--color-primary-900-rgb), 1); }
.c-primary-900\/10 { color: rgba(var(--color-primary-900-rgb), 0.10); }
.c-primary-900\/20 { color: rgba(var(--color-primary-900-rgb), 0.20); }
.c-primary-900\/30 { color: rgba(var(--color-primary-900-rgb), 0.30); }
.c-primary-900\/40 { color: rgba(var(--color-primary-900-rgb), 0.40); }
.c-primary-900\/50 { color: rgba(var(--color-primary-900-rgb), 0.50); }
.c-primary-900\/60 { color: rgba(var(--color-primary-900-rgb), 0.60); }
.c-primary-900\/70 { color: rgba(var(--color-primary-900-rgb), 0.70); }
.c-primary-900\/80 { color: rgba(var(--color-primary-900-rgb), 0.80); }
.c-primary-900\/90 { color: rgba(var(--color-primary-900-rgb), 0.90); }
.c-primary-950 { color: rgba(var(--color-primary-950-rgb), 1); }
.c-primary-950\/10 { color: rgba(var(--color-primary-950-rgb), 0.10); }
.c-primary-950\/20 { color: rgba(var(--color-primary-950-rgb), 0.20); }
.c-primary-950\/30 { color: rgba(var(--color-primary-950-rgb), 0.30); }
.c-primary-950\/40 { color: rgba(var(--color-primary-950-rgb), 0.40); }
.c-primary-950\/50 { color: rgba(var(--color-primary-950-rgb), 0.50); }
.c-primary-950\/60 { color: rgba(var(--color-primary-950-rgb), 0.60); }
.c-primary-950\/70 { color: rgba(var(--color-primary-950-rgb), 0.70); }
.c-primary-950\/80 { color: rgba(var(--color-primary-950-rgb), 0.80); }
.c-primary-950\/90 { color: rgba(var(--color-primary-950-rgb), 0.90); }
.c-text { color: rgba(var(--color-text-rgb), 1); }
.c-text\/10 { color: rgba(var(--color-text-rgb), 0.10); }
.c-text\/20 { color: rgba(var(--color-text-rgb), 0.20); }
.c-text\/30 { color: rgba(var(--color-text-rgb), 0.30); }
.c-text\/40 { color: rgba(var(--color-text-rgb), 0.40); }
.c-text\/50 { color: rgba(var(--color-text-rgb), 0.50); }
.c-text\/60 { color: rgba(var(--color-text-rgb), 0.60); }
.c-text\/70 { color: rgba(var(--color-text-rgb), 0.70); }
.c-text\/80 { color: rgba(var(--color-text-rgb), 0.80); }
.c-text\/90 { color: rgba(var(--color-text-rgb), 0.90); }
.c-success { color: rgba(var(--color-success-rgb), 1); }
.c-success\/10 { color: rgba(var(--color-success-rgb), 0.10); }
.c-success\/20 { color: rgba(var(--color-success-rgb), 0.20); }
.c-success\/30 { color: rgba(var(--color-success-rgb), 0.30); }
.c-success\/40 { color: rgba(var(--color-success-rgb), 0.40); }
.c-success\/50 { color: rgba(var(--color-success-rgb), 0.50); }
.c-success\/60 { color: rgba(var(--color-success-rgb), 0.60); }
.c-success\/70 { color: rgba(var(--color-success-rgb), 0.70); }
.c-success\/80 { color: rgba(var(--color-success-rgb), 0.80); }
.c-success\/90 { color: rgba(var(--color-success-rgb), 0.90); }
.c-warning { color: rgba(var(--color-warning-rgb), 1); }
.c-warning\/10 { color: rgba(var(--color-warning-rgb), 0.10); }
.c-warning\/20 { color: rgba(var(--color-warning-rgb), 0.20); }
.c-warning\/30 { color: rgba(var(--color-warning-rgb), 0.30); }
.c-warning\/40 { color: rgba(var(--color-warning-rgb), 0.40); }
.c-warning\/50 { color: rgba(var(--color-warning-rgb), 0.50); }
.c-warning\/60 { color: rgba(var(--color-warning-rgb), 0.60); }
.c-warning\/70 { color: rgba(var(--color-warning-rgb), 0.70); }
.c-warning\/80 { color: rgba(var(--color-warning-rgb), 0.80); }
.c-warning\/90 { color: rgba(var(--color-warning-rgb), 0.90); }
.c-danger { color: rgba(var(--color-danger-rgb), 1); }
.c-danger\/10 { color: rgba(var(--color-danger-rgb), 0.10); }
.c-danger\/20 { color: rgba(var(--color-danger-rgb), 0.20); }
.c-danger\/30 { color: rgba(var(--color-danger-rgb), 0.30); }
.c-danger\/40 { color: rgba(var(--color-danger-rgb), 0.40); }
.c-danger\/50 { color: rgba(var(--color-danger-rgb), 0.50); }
.c-danger\/60 { color: rgba(var(--color-danger-rgb), 0.60); }
.c-danger\/70 { color: rgba(var(--color-danger-rgb), 0.70); }
.c-danger\/80 { color: rgba(var(--color-danger-rgb), 0.80); }
.c-danger\/90 { color: rgba(var(--color-danger-rgb), 0.90); }
.c-light { color: rgba(var(--color-light-rgb), 1); }
.c-light\/10 { color: rgba(var(--color-light-rgb), 0.10); }
.c-light\/20 { color: rgba(var(--color-light-rgb), 0.20); }
.c-light\/30 { color: rgba(var(--color-light-rgb), 0.30); }
.c-light\/40 { color: rgba(var(--color-light-rgb), 0.40); }
.c-light\/50 { color: rgba(var(--color-light-rgb), 0.50); }
.c-light\/60 { color: rgba(var(--color-light-rgb), 0.60); }
.c-light\/70 { color: rgba(var(--color-light-rgb), 0.70); }
.c-light\/80 { color: rgba(var(--color-light-rgb), 0.80); }
.c-light\/90 { color: rgba(var(--color-light-rgb), 0.90); }
.c-white { color: rgba(var(--color-white-rgb), 1); }
.c-white\/10 { color: rgba(var(--color-white-rgb), 0.10); }
.c-white\/20 { color: rgba(var(--color-white-rgb), 0.20); }
.c-white\/30 { color: rgba(var(--color-white-rgb), 0.30); }
.c-white\/40 { color: rgba(var(--color-white-rgb), 0.40); }
.c-white\/50 { color: rgba(var(--color-white-rgb), 0.50); }
.c-white\/60 { color: rgba(var(--color-white-rgb), 0.60); }
.c-white\/70 { color: rgba(var(--color-white-rgb), 0.70); }
.c-white\/80 { color: rgba(var(--color-white-rgb), 0.80); }
.c-white\/90 { color: rgba(var(--color-white-rgb), 0.90); }
/* Fill Utilities */
.fill-primary-50 { fill: rgba(var(--color-primary-50-rgb), 1); }
.fill-primary-50\/10 { fill: rgba(var(--color-primary-50-rgb), 0.10); }
.fill-primary-50\/20 { fill: rgba(var(--color-primary-50-rgb), 0.20); }
.fill-primary-50\/30 { fill: rgba(var(--color-primary-50-rgb), 0.30); }
.fill-primary-50\/40 { fill: rgba(var(--color-primary-50-rgb), 0.40); }
.fill-primary-50\/50 { fill: rgba(var(--color-primary-50-rgb), 0.50); }
.fill-primary-50\/60 { fill: rgba(var(--color-primary-50-rgb), 0.60); }
.fill-primary-50\/70 { fill: rgba(var(--color-primary-50-rgb), 0.70); }
.fill-primary-50\/80 { fill: rgba(var(--color-primary-50-rgb), 0.80); }
.fill-primary-50\/90 { fill: rgba(var(--color-primary-50-rgb), 0.90); }
.fill-primary-100 { fill: rgba(var(--color-primary-100-rgb), 1); }
.fill-primary-100\/10 { fill: rgba(var(--color-primary-100-rgb), 0.10); }
.fill-primary-100\/20 { fill: rgba(var(--color-primary-100-rgb), 0.20); }
.fill-primary-100\/30 { fill: rgba(var(--color-primary-100-rgb), 0.30); }
.fill-primary-100\/40 { fill: rgba(var(--color-primary-100-rgb), 0.40); }
.fill-primary-100\/50 { fill: rgba(var(--color-primary-100-rgb), 0.50); }
.fill-primary-100\/60 { fill: rgba(var(--color-primary-100-rgb), 0.60); }
.fill-primary-100\/70 { fill: rgba(var(--color-primary-100-rgb), 0.70); }
.fill-primary-100\/80 { fill: rgba(var(--color-primary-100-rgb), 0.80); }
.fill-primary-100\/90 { fill: rgba(var(--color-primary-100-rgb), 0.90); }
.fill-primary-200 { fill: rgba(var(--color-primary-200-rgb), 1); }
.fill-primary-200\/10 { fill: rgba(var(--color-primary-200-rgb), 0.10); }
.fill-primary-200\/20 { fill: rgba(var(--color-primary-200-rgb), 0.20); }
.fill-primary-200\/30 { fill: rgba(var(--color-primary-200-rgb), 0.30); }
.fill-primary-200\/40 { fill: rgba(var(--color-primary-200-rgb), 0.40); }
.fill-primary-200\/50 { fill: rgba(var(--color-primary-200-rgb), 0.50); }
.fill-primary-200\/60 { fill: rgba(var(--color-primary-200-rgb), 0.60); }
.fill-primary-200\/70 { fill: rgba(var(--color-primary-200-rgb), 0.70); }
.fill-primary-200\/80 { fill: rgba(var(--color-primary-200-rgb), 0.80); }
.fill-primary-200\/90 { fill: rgba(var(--color-primary-200-rgb), 0.90); }
.fill-primary-300 { fill: rgba(var(--color-primary-300-rgb), 1); }
.fill-primary-300\/10 { fill: rgba(var(--color-primary-300-rgb), 0.10); }
.fill-primary-300\/20 { fill: rgba(var(--color-primary-300-rgb), 0.20); }
.fill-primary-300\/30 { fill: rgba(var(--color-primary-300-rgb), 0.30); }
.fill-primary-300\/40 { fill: rgba(var(--color-primary-300-rgb), 0.40); }
.fill-primary-300\/50 { fill: rgba(var(--color-primary-300-rgb), 0.50); }
.fill-primary-300\/60 { fill: rgba(var(--color-primary-300-rgb), 0.60); }
.fill-primary-300\/70 { fill: rgba(var(--color-primary-300-rgb), 0.70); }
.fill-primary-300\/80 { fill: rgba(var(--color-primary-300-rgb), 0.80); }
.fill-primary-300\/90 { fill: rgba(var(--color-primary-300-rgb), 0.90); }
.fill-primary-400 { fill: rgba(var(--color-primary-400-rgb), 1); }
.fill-primary-400\/10 { fill: rgba(var(--color-primary-400-rgb), 0.10); }
.fill-primary-400\/20 { fill: rgba(var(--color-primary-400-rgb), 0.20); }
.fill-primary-400\/30 { fill: rgba(var(--color-primary-400-rgb), 0.30); }
.fill-primary-400\/40 { fill: rgba(var(--color-primary-400-rgb), 0.40); }
.fill-primary-400\/50 { fill: rgba(var(--color-primary-400-rgb), 0.50); }
.fill-primary-400\/60 { fill: rgba(var(--color-primary-400-rgb), 0.60); }
.fill-primary-400\/70 { fill: rgba(var(--color-primary-400-rgb), 0.70); }
.fill-primary-400\/80 { fill: rgba(var(--color-primary-400-rgb), 0.80); }
.fill-primary-400\/90 { fill: rgba(var(--color-primary-400-rgb), 0.90); }
.fill-primary-500 { fill: rgba(var(--color-primary-500-rgb), 1); }
.fill-primary-500\/10 { fill: rgba(var(--color-primary-500-rgb), 0.10); }
.fill-primary-500\/20 { fill: rgba(var(--color-primary-500-rgb), 0.20); }
.fill-primary-500\/30 { fill: rgba(var(--color-primary-500-rgb), 0.30); }
.fill-primary-500\/40 { fill: rgba(var(--color-primary-500-rgb), 0.40); }
.fill-primary-500\/50 { fill: rgba(var(--color-primary-500-rgb), 0.50); }
.fill-primary-500\/60 { fill: rgba(var(--color-primary-500-rgb), 0.60); }
.fill-primary-500\/70 { fill: rgba(var(--color-primary-500-rgb), 0.70); }
.fill-primary-500\/80 { fill: rgba(var(--color-primary-500-rgb), 0.80); }
.fill-primary-500\/90 { fill: rgba(var(--color-primary-500-rgb), 0.90); }
.fill-primary-600 { fill: rgba(var(--color-primary-600-rgb), 1); }
.fill-primary-600\/10 { fill: rgba(var(--color-primary-600-rgb), 0.10); }
.fill-primary-600\/20 { fill: rgba(var(--color-primary-600-rgb), 0.20); }
.fill-primary-600\/30 { fill: rgba(var(--color-primary-600-rgb), 0.30); }
.fill-primary-600\/40 { fill: rgba(var(--color-primary-600-rgb), 0.40); }
.fill-primary-600\/50 { fill: rgba(var(--color-primary-600-rgb), 0.50); }
.fill-primary-600\/60 { fill: rgba(var(--color-primary-600-rgb), 0.60); }
.fill-primary-600\/70 { fill: rgba(var(--color-primary-600-rgb), 0.70); }
.fill-primary-600\/80 { fill: rgba(var(--color-primary-600-rgb), 0.80); }
.fill-primary-600\/90 { fill: rgba(var(--color-primary-600-rgb), 0.90); }
.fill-primary-700 { fill: rgba(var(--color-primary-700-rgb), 1); }
.fill-primary-700\/10 { fill: rgba(var(--color-primary-700-rgb), 0.10); }
.fill-primary-700\/20 { fill: rgba(var(--color-primary-700-rgb), 0.20); }
.fill-primary-700\/30 { fill: rgba(var(--color-primary-700-rgb), 0.30); }
.fill-primary-700\/40 { fill: rgba(var(--color-primary-700-rgb), 0.40); }
.fill-primary-700\/50 { fill: rgba(var(--color-primary-700-rgb), 0.50); }
.fill-primary-700\/60 { fill: rgba(var(--color-primary-700-rgb), 0.60); }
.fill-primary-700\/70 { fill: rgba(var(--color-primary-700-rgb), 0.70); }
.fill-primary-700\/80 { fill: rgba(var(--color-primary-700-rgb), 0.80); }
.fill-primary-700\/90 { fill: rgba(var(--color-primary-700-rgb), 0.90); }
.fill-primary-800 { fill: rgba(var(--color-primary-800-rgb), 1); }
.fill-primary-800\/10 { fill: rgba(var(--color-primary-800-rgb), 0.10); }
.fill-primary-800\/20 { fill: rgba(var(--color-primary-800-rgb), 0.20); }
.fill-primary-800\/30 { fill: rgba(var(--color-primary-800-rgb), 0.30); }
.fill-primary-800\/40 { fill: rgba(var(--color-primary-800-rgb), 0.40); }
.fill-primary-800\/50 { fill: rgba(var(--color-primary-800-rgb), 0.50); }
.fill-primary-800\/60 { fill: rgba(var(--color-primary-800-rgb), 0.60); }
.fill-primary-800\/70 { fill: rgba(var(--color-primary-800-rgb), 0.70); }
.fill-primary-800\/80 { fill: rgba(var(--color-primary-800-rgb), 0.80); }
.fill-primary-800\/90 { fill: rgba(var(--color-primary-800-rgb), 0.90); }
.fill-primary-900 { fill: rgba(var(--color-primary-900-rgb), 1); }
.fill-primary-900\/10 { fill: rgba(var(--color-primary-900-rgb), 0.10); }
.fill-primary-900\/20 { fill: rgba(var(--color-primary-900-rgb), 0.20); }
.fill-primary-900\/30 { fill: rgba(var(--color-primary-900-rgb), 0.30); }
.fill-primary-900\/40 { fill: rgba(var(--color-primary-900-rgb), 0.40); }
.fill-primary-900\/50 { fill: rgba(var(--color-primary-900-rgb), 0.50); }
.fill-primary-900\/60 { fill: rgba(var(--color-primary-900-rgb), 0.60); }
.fill-primary-900\/70 { fill: rgba(var(--color-primary-900-rgb), 0.70); }
.fill-primary-900\/80 { fill: rgba(var(--color-primary-900-rgb), 0.80); }
.fill-primary-900\/90 { fill: rgba(var(--color-primary-900-rgb), 0.90); }
.fill-primary-950 { fill: rgba(var(--color-primary-950-rgb), 1); }
.fill-primary-950\/10 { fill: rgba(var(--color-primary-950-rgb), 0.10); }
.fill-primary-950\/20 { fill: rgba(var(--color-primary-950-rgb), 0.20); }
.fill-primary-950\/30 { fill: rgba(var(--color-primary-950-rgb), 0.30); }
.fill-primary-950\/40 { fill: rgba(var(--color-primary-950-rgb), 0.40); }
.fill-primary-950\/50 { fill: rgba(var(--color-primary-950-rgb), 0.50); }
.fill-primary-950\/60 { fill: rgba(var(--color-primary-950-rgb), 0.60); }
.fill-primary-950\/70 { fill: rgba(var(--color-primary-950-rgb), 0.70); }
.fill-primary-950\/80 { fill: rgba(var(--color-primary-950-rgb), 0.80); }
.fill-primary-950\/90 { fill: rgba(var(--color-primary-950-rgb), 0.90); }
.fill-text { fill: rgba(var(--color-text-rgb), 1); }
.fill-text\/10 { fill: rgba(var(--color-text-rgb), 0.10); }
.fill-text\/20 { fill: rgba(var(--color-text-rgb), 0.20); }
.fill-text\/30 { fill: rgba(var(--color-text-rgb), 0.30); }
.fill-text\/40 { fill: rgba(var(--color-text-rgb), 0.40); }
.fill-text\/50 { fill: rgba(var(--color-text-rgb), 0.50); }
.fill-text\/60 { fill: rgba(var(--color-text-rgb), 0.60); }
.fill-text\/70 { fill: rgba(var(--color-text-rgb), 0.70); }
.fill-text\/80 { fill: rgba(var(--color-text-rgb), 0.80); }
.fill-text\/90 { fill: rgba(var(--color-text-rgb), 0.90); }
.fill-success { fill: rgba(var(--color-success-rgb), 1); }
.fill-success\/10 { fill: rgba(var(--color-success-rgb), 0.10); }
.fill-success\/20 { fill: rgba(var(--color-success-rgb), 0.20); }
.fill-success\/30 { fill: rgba(var(--color-success-rgb), 0.30); }
.fill-success\/40 { fill: rgba(var(--color-success-rgb), 0.40); }
.fill-success\/50 { fill: rgba(var(--color-success-rgb), 0.50); }
.fill-success\/60 { fill: rgba(var(--color-success-rgb), 0.60); }
.fill-success\/70 { fill: rgba(var(--color-success-rgb), 0.70); }
.fill-success\/80 { fill: rgba(var(--color-success-rgb), 0.80); }
.fill-success\/90 { fill: rgba(var(--color-success-rgb), 0.90); }
.fill-warning { fill: rgba(var(--color-warning-rgb), 1); }
.fill-warning\/10 { fill: rgba(var(--color-warning-rgb), 0.10); }
.fill-warning\/20 { fill: rgba(var(--color-warning-rgb), 0.20); }
.fill-warning\/30 { fill: rgba(var(--color-warning-rgb), 0.30); }
.fill-warning\/40 { fill: rgba(var(--color-warning-rgb), 0.40); }
.fill-warning\/50 { fill: rgba(var(--color-warning-rgb), 0.50); }
.fill-warning\/60 { fill: rgba(var(--color-warning-rgb), 0.60); }
.fill-warning\/70 { fill: rgba(var(--color-warning-rgb), 0.70); }
.fill-warning\/80 { fill: rgba(var(--color-warning-rgb), 0.80); }
.fill-warning\/90 { fill: rgba(var(--color-warning-rgb), 0.90); }
.fill-danger { fill: rgba(var(--color-danger-rgb), 1); }
.fill-danger\/10 { fill: rgba(var(--color-danger-rgb), 0.10); }
.fill-danger\/20 { fill: rgba(var(--color-danger-rgb), 0.20); }
.fill-danger\/30 { fill: rgba(var(--color-danger-rgb), 0.30); }
.fill-danger\/40 { fill: rgba(var(--color-danger-rgb), 0.40); }
.fill-danger\/50 { fill: rgba(var(--color-danger-rgb), 0.50); }
.fill-danger\/60 { fill: rgba(var(--color-danger-rgb), 0.60); }
.fill-danger\/70 { fill: rgba(var(--color-danger-rgb), 0.70); }
.fill-danger\/80 { fill: rgba(var(--color-danger-rgb), 0.80); }
.fill-danger\/90 { fill: rgba(var(--color-danger-rgb), 0.90); }
.fill-light { fill: rgba(var(--color-light-rgb), 1); }
.fill-light\/10 { fill: rgba(var(--color-light-rgb), 0.10); }
.fill-light\/20 { fill: rgba(var(--color-light-rgb), 0.20); }
.fill-light\/30 { fill: rgba(var(--color-light-rgb), 0.30); }
.fill-light\/40 { fill: rgba(var(--color-light-rgb), 0.40); }
.fill-light\/50 { fill: rgba(var(--color-light-rgb), 0.50); }
.fill-light\/60 { fill: rgba(var(--color-light-rgb), 0.60); }
.fill-light\/70 { fill: rgba(var(--color-light-rgb), 0.70); }
.fill-light\/80 { fill: rgba(var(--color-light-rgb), 0.80); }
.fill-light\/90 { fill: rgba(var(--color-light-rgb), 0.90); }
.fill-white { fill: rgba(var(--color-white-rgb), 1); }
.fill-white\/10 { fill: rgba(var(--color-white-rgb), 0.10); }
.fill-white\/20 { fill: rgba(var(--color-white-rgb), 0.20); }
.fill-white\/30 { fill: rgba(var(--color-white-rgb), 0.30); }
.fill-white\/40 { fill: rgba(var(--color-white-rgb), 0.40); }
.fill-white\/50 { fill: rgba(var(--color-white-rgb), 0.50); }
.fill-white\/60 { fill: rgba(var(--color-white-rgb), 0.60); }
.fill-white\/70 { fill: rgba(var(--color-white-rgb), 0.70); }
.fill-white\/80 { fill: rgba(var(--color-white-rgb), 0.80); }
.fill-white\/90 { fill: rgba(var(--color-white-rgb), 0.90); }
/* Shade Gradient Utilities (Linear + Radial) */
.shade-primary-50.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 100%);
}
.shade-primary-50.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-50-rgb), 1) 0%, rgba(var(--color-primary-50-rgb), 0) 70%);
}
.shade-primary-100.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 100%);
}
.shade-primary-100.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-100-rgb), 1) 0%, rgba(var(--color-primary-100-rgb), 0) 70%);
}
.shade-primary-200.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 100%);
}
.shade-primary-200.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-200-rgb), 1) 0%, rgba(var(--color-primary-200-rgb), 0) 70%);
}
.shade-primary-300.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 100%);
}
.shade-primary-300.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-300-rgb), 1) 0%, rgba(var(--color-primary-300-rgb), 0) 70%);
}
.shade-primary-400.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 100%);
}
.shade-primary-400.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-400-rgb), 1) 0%, rgba(var(--color-primary-400-rgb), 0) 70%);
}
.shade-primary-500.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 100%);
}
.shade-primary-500.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 1) 0%, rgba(var(--color-primary-500-rgb), 0) 70%);
}
.shade-primary-600.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 100%);
}
.shade-primary-600.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-600-rgb), 1) 0%, rgba(var(--color-primary-600-rgb), 0) 70%);
}
.shade-primary-700.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 100%);
}
.shade-primary-700.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-700-rgb), 1) 0%, rgba(var(--color-primary-700-rgb), 0) 70%);
}
.shade-primary-800.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 100%);
}
.shade-primary-800.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-800-rgb), 1) 0%, rgba(var(--color-primary-800-rgb), 0) 70%);
}
.shade-primary-900.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 100%);
}
.shade-primary-900.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-900-rgb), 1) 0%, rgba(var(--color-primary-900-rgb), 0) 70%);
}
.shade-primary-950.to-t {
background-image: linear-gradient(to top, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-l {
background-image: linear-gradient(to left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-r {
background-image: linear-gradient(to right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 100%);
}
.shade-primary-950.radial {
background-image: radial-gradient(circle, rgba(var(--color-primary-950-rgb), 1) 0%, rgba(var(--color-primary-950-rgb), 0) 70%);
}
.shade-text.to-t {
background-image: linear-gradient(to top, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-l {
background-image: linear-gradient(to left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-r {
background-image: linear-gradient(to right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 100%);
}
.shade-text.radial {
background-image: radial-gradient(circle, rgba(var(--color-text-rgb), 1) 0%, rgba(var(--color-text-rgb), 0) 70%);
}
.shade-success.to-t {
background-image: linear-gradient(to top, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-l {
background-image: linear-gradient(to left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-r {
background-image: linear-gradient(to right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 100%);
}
.shade-success.radial {
background-image: radial-gradient(circle, rgba(var(--color-success-rgb), 1) 0%, rgba(var(--color-success-rgb), 0) 70%);
}
.shade-warning.to-t {
background-image: linear-gradient(to top, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-l {
background-image: linear-gradient(to left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-r {
background-image: linear-gradient(to right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 100%);
}
.shade-warning.radial {
background-image: radial-gradient(circle, rgba(var(--color-warning-rgb), 1) 0%, rgba(var(--color-warning-rgb), 0) 70%);
}
.shade-danger.to-t {
background-image: linear-gradient(to top, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-l {
background-image: linear-gradient(to left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-r {
background-image: linear-gradient(to right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 100%);
}
.shade-danger.radial {
background-image: radial-gradient(circle, rgba(var(--color-danger-rgb), 1) 0%, rgba(var(--color-danger-rgb), 0) 70%);
}
.shade-light.to-t {
background-image: linear-gradient(to top, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-l {
background-image: linear-gradient(to left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-r {
background-image: linear-gradient(to right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 100%);
}
.shade-light.radial {
background-image: radial-gradient(circle, rgba(var(--color-light-rgb), 1) 0%, rgba(var(--color-light-rgb), 0) 70%);
}
.shade-white.to-t {
background-image: linear-gradient(to top, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-b {
background-image: linear-gradient(to bottom, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-l {
background-image: linear-gradient(to left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-r {
background-image: linear-gradient(to right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-tl {
background-image: linear-gradient(to top left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-tr {
background-image: linear-gradient(to top right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-bl {
background-image: linear-gradient(to bottom left, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.to-br {
background-image: linear-gradient(to bottom right, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 100%);
}
.shade-white.radial {
background-image: radial-gradient(circle, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-white-rgb), 0) 70%);
}
/* Box Shadow Utilities */
.shadow-primary-50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 1);
}
.shadow-primary-50\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.10);
}
.shadow-primary-50\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.20);
}
.shadow-primary-50\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.30);
}
.shadow-primary-50\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.40);
}
.shadow-primary-50\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.50);
}
.shadow-primary-50\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.60);
}
.shadow-primary-50\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.70);
}
.shadow-primary-50\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.80);
}
.shadow-primary-50\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-50-rgb), 0.90);
}
.shadow-primary-100 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 1);
}
.shadow-primary-100\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.10);
}
.shadow-primary-100\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.20);
}
.shadow-primary-100\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.30);
}
.shadow-primary-100\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.40);
}
.shadow-primary-100\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.50);
}
.shadow-primary-100\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.60);
}
.shadow-primary-100\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.70);
}
.shadow-primary-100\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.80);
}
.shadow-primary-100\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-100-rgb), 0.90);
}
.shadow-primary-200 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 1);
}
.shadow-primary-200\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.10);
}
.shadow-primary-200\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.20);
}
.shadow-primary-200\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.30);
}
.shadow-primary-200\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.40);
}
.shadow-primary-200\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.50);
}
.shadow-primary-200\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.60);
}
.shadow-primary-200\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.70);
}
.shadow-primary-200\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.80);
}
.shadow-primary-200\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-200-rgb), 0.90);
}
.shadow-primary-300 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 1);
}
.shadow-primary-300\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.10);
}
.shadow-primary-300\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.20);
}
.shadow-primary-300\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.30);
}
.shadow-primary-300\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.40);
}
.shadow-primary-300\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.50);
}
.shadow-primary-300\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.60);
}
.shadow-primary-300\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.70);
}
.shadow-primary-300\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.80);
}
.shadow-primary-300\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-300-rgb), 0.90);
}
.shadow-primary-400 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 1);
}
.shadow-primary-400\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.10);
}
.shadow-primary-400\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.20);
}
.shadow-primary-400\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.30);
}
.shadow-primary-400\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.40);
}
.shadow-primary-400\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.50);
}
.shadow-primary-400\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.60);
}
.shadow-primary-400\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.70);
}
.shadow-primary-400\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.80);
}
.shadow-primary-400\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-400-rgb), 0.90);
}
.shadow-primary-500 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 1);
}
.shadow-primary-500\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.10);
}
.shadow-primary-500\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.20);
}
.shadow-primary-500\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.30);
}
.shadow-primary-500\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.40);
}
.shadow-primary-500\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.50);
}
.shadow-primary-500\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.60);
}
.shadow-primary-500\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.70);
}
.shadow-primary-500\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.80);
}
.shadow-primary-500\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-500-rgb), 0.90);
}
.shadow-primary-600 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 1);
}
.shadow-primary-600\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.10);
}
.shadow-primary-600\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.20);
}
.shadow-primary-600\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.30);
}
.shadow-primary-600\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.40);
}
.shadow-primary-600\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.50);
}
.shadow-primary-600\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.60);
}
.shadow-primary-600\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.70);
}
.shadow-primary-600\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.80);
}
.shadow-primary-600\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-600-rgb), 0.90);
}
.shadow-primary-700 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 1);
}
.shadow-primary-700\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.10);
}
.shadow-primary-700\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.20);
}
.shadow-primary-700\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.30);
}
.shadow-primary-700\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.40);
}
.shadow-primary-700\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.50);
}
.shadow-primary-700\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.60);
}
.shadow-primary-700\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.70);
}
.shadow-primary-700\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.80);
}
.shadow-primary-700\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-700-rgb), 0.90);
}
.shadow-primary-800 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 1);
}
.shadow-primary-800\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.10);
}
.shadow-primary-800\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.20);
}
.shadow-primary-800\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.30);
}
.shadow-primary-800\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.40);
}
.shadow-primary-800\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.50);
}
.shadow-primary-800\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.60);
}
.shadow-primary-800\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.70);
}
.shadow-primary-800\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.80);
}
.shadow-primary-800\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-800-rgb), 0.90);
}
.shadow-primary-900 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 1);
}
.shadow-primary-900\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.10);
}
.shadow-primary-900\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.20);
}
.shadow-primary-900\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.30);
}
.shadow-primary-900\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.40);
}
.shadow-primary-900\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.50);
}
.shadow-primary-900\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.60);
}
.shadow-primary-900\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.70);
}
.shadow-primary-900\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.80);
}
.shadow-primary-900\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-900-rgb), 0.90);
}
.shadow-primary-950 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 1);
}
.shadow-primary-950\/10 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.10);
}
.shadow-primary-950\/20 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.20);
}
.shadow-primary-950\/30 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.30);
}
.shadow-primary-950\/40 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.40);
}
.shadow-primary-950\/50 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.50);
}
.shadow-primary-950\/60 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.60);
}
.shadow-primary-950\/70 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.70);
}
.shadow-primary-950\/80 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.80);
}
.shadow-primary-950\/90 {
box-shadow: 0 4px 28px rgba(var(--color-primary-950-rgb), 0.90);
}
.shadow-text {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 1);
}
.shadow-text\/10 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.10);
}
.shadow-text\/20 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.20);
}
.shadow-text\/30 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.30);
}
.shadow-text\/40 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.40);
}
.shadow-text\/50 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.50);
}
.shadow-text\/60 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.60);
}
.shadow-text\/70 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.70);
}
.shadow-text\/80 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.80);
}
.shadow-text\/90 {
box-shadow: 0 4px 28px rgba(var(--color-text-rgb), 0.90);
}
.shadow-success {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 1);
}
.shadow-success\/10 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.10);
}
.shadow-success\/20 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.20);
}
.shadow-success\/30 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.30);
}
.shadow-success\/40 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.40);
}
.shadow-success\/50 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.50);
}
.shadow-success\/60 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.60);
}
.shadow-success\/70 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.70);
}
.shadow-success\/80 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.80);
}
.shadow-success\/90 {
box-shadow: 0 4px 28px rgba(var(--color-success-rgb), 0.90);
}
.shadow-warning {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 1);
}
.shadow-warning\/10 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.10);
}
.shadow-warning\/20 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.20);
}
.shadow-warning\/30 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.30);
}
.shadow-warning\/40 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.40);
}
.shadow-warning\/50 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.50);
}
.shadow-warning\/60 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.60);
}
.shadow-warning\/70 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.70);
}
.shadow-warning\/80 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.80);
}
.shadow-warning\/90 {
box-shadow: 0 4px 28px rgba(var(--color-warning-rgb), 0.90);
}
.shadow-danger {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 1);
}
.shadow-danger\/10 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.10);
}
.shadow-danger\/20 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.20);
}
.shadow-danger\/30 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.30);
}
.shadow-danger\/40 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.40);
}
.shadow-danger\/50 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.50);
}
.shadow-danger\/60 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.60);
}
.shadow-danger\/70 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.70);
}
.shadow-danger\/80 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.80);
}
.shadow-danger\/90 {
box-shadow: 0 4px 28px rgba(var(--color-danger-rgb), 0.90);
}
.shadow-light {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 1);
}
.shadow-light\/10 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.10);
}
.shadow-light\/20 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.20);
}
.shadow-light\/30 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.30);
}
.shadow-light\/40 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.40);
}
.shadow-light\/50 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.50);
}
.shadow-light\/60 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.60);
}
.shadow-light\/70 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.70);
}
.shadow-light\/80 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.80);
}
.shadow-light\/90 {
box-shadow: 0 4px 28px rgba(var(--color-light-rgb), 0.90);
}
.shadow-white {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 1);
}
.shadow-white\/10 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.10);
}
.shadow-white\/20 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.20);
}
.shadow-white\/30 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.30);
}
.shadow-white\/40 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.40);
}
.shadow-white\/50 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.50);
}
.shadow-white\/60 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.60);
}
.shadow-white\/70 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.70);
}
.shadow-white\/80 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.80);
}
.shadow-white\/90 {
box-shadow: 0 4px 28px rgba(var(--color-white-rgb), 0.90);
}
/* Text Shadow Utilities */
.text-shadow-primary-50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 1);
}
.text-shadow-primary-50\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.10);
}
.text-shadow-primary-50\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.20);
}
.text-shadow-primary-50\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.30);
}
.text-shadow-primary-50\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.40);
}
.text-shadow-primary-50\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.50);
}
.text-shadow-primary-50\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.60);
}
.text-shadow-primary-50\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.70);
}
.text-shadow-primary-50\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.80);
}
.text-shadow-primary-50\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-50-rgb), 0.90);
}
.text-shadow-primary-100 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 1);
}
.text-shadow-primary-100\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.10);
}
.text-shadow-primary-100\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.20);
}
.text-shadow-primary-100\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.30);
}
.text-shadow-primary-100\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.40);
}
.text-shadow-primary-100\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.50);
}
.text-shadow-primary-100\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.60);
}
.text-shadow-primary-100\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.70);
}
.text-shadow-primary-100\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.80);
}
.text-shadow-primary-100\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-100-rgb), 0.90);
}
.text-shadow-primary-200 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 1);
}
.text-shadow-primary-200\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.10);
}
.text-shadow-primary-200\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.20);
}
.text-shadow-primary-200\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.30);
}
.text-shadow-primary-200\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.40);
}
.text-shadow-primary-200\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.50);
}
.text-shadow-primary-200\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.60);
}
.text-shadow-primary-200\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.70);
}
.text-shadow-primary-200\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.80);
}
.text-shadow-primary-200\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-200-rgb), 0.90);
}
.text-shadow-primary-300 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 1);
}
.text-shadow-primary-300\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.10);
}
.text-shadow-primary-300\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.20);
}
.text-shadow-primary-300\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.30);
}
.text-shadow-primary-300\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.40);
}
.text-shadow-primary-300\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.50);
}
.text-shadow-primary-300\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.60);
}
.text-shadow-primary-300\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.70);
}
.text-shadow-primary-300\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.80);
}
.text-shadow-primary-300\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-300-rgb), 0.90);
}
.text-shadow-primary-400 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 1);
}
.text-shadow-primary-400\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.10);
}
.text-shadow-primary-400\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.20);
}
.text-shadow-primary-400\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.30);
}
.text-shadow-primary-400\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.40);
}
.text-shadow-primary-400\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.50);
}
.text-shadow-primary-400\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.60);
}
.text-shadow-primary-400\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.70);
}
.text-shadow-primary-400\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.80);
}
.text-shadow-primary-400\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-400-rgb), 0.90);
}
.text-shadow-primary-500 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 1);
}
.text-shadow-primary-500\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.10);
}
.text-shadow-primary-500\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.20);
}
.text-shadow-primary-500\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.30);
}
.text-shadow-primary-500\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.40);
}
.text-shadow-primary-500\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.50);
}
.text-shadow-primary-500\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.60);
}
.text-shadow-primary-500\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.70);
}
.text-shadow-primary-500\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.80);
}
.text-shadow-primary-500\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-500-rgb), 0.90);
}
.text-shadow-primary-600 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 1);
}
.text-shadow-primary-600\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.10);
}
.text-shadow-primary-600\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.20);
}
.text-shadow-primary-600\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.30);
}
.text-shadow-primary-600\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.40);
}
.text-shadow-primary-600\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.50);
}
.text-shadow-primary-600\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.60);
}
.text-shadow-primary-600\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.70);
}
.text-shadow-primary-600\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.80);
}
.text-shadow-primary-600\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-600-rgb), 0.90);
}
.text-shadow-primary-700 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 1);
}
.text-shadow-primary-700\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.10);
}
.text-shadow-primary-700\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.20);
}
.text-shadow-primary-700\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.30);
}
.text-shadow-primary-700\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.40);
}
.text-shadow-primary-700\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.50);
}
.text-shadow-primary-700\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.60);
}
.text-shadow-primary-700\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.70);
}
.text-shadow-primary-700\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.80);
}
.text-shadow-primary-700\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-700-rgb), 0.90);
}
.text-shadow-primary-800 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 1);
}
.text-shadow-primary-800\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.10);
}
.text-shadow-primary-800\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.20);
}
.text-shadow-primary-800\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.30);
}
.text-shadow-primary-800\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.40);
}
.text-shadow-primary-800\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.50);
}
.text-shadow-primary-800\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.60);
}
.text-shadow-primary-800\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.70);
}
.text-shadow-primary-800\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.80);
}
.text-shadow-primary-800\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-800-rgb), 0.90);
}
.text-shadow-primary-900 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 1);
}
.text-shadow-primary-900\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.10);
}
.text-shadow-primary-900\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.20);
}
.text-shadow-primary-900\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.30);
}
.text-shadow-primary-900\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.40);
}
.text-shadow-primary-900\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.50);
}
.text-shadow-primary-900\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.60);
}
.text-shadow-primary-900\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.70);
}
.text-shadow-primary-900\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.80);
}
.text-shadow-primary-900\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-900-rgb), 0.90);
}
.text-shadow-primary-950 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 1);
}
.text-shadow-primary-950\/10 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.10);
}
.text-shadow-primary-950\/20 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.20);
}
.text-shadow-primary-950\/30 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.30);
}
.text-shadow-primary-950\/40 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.40);
}
.text-shadow-primary-950\/50 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.50);
}
.text-shadow-primary-950\/60 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.60);
}
.text-shadow-primary-950\/70 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.70);
}
.text-shadow-primary-950\/80 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.80);
}
.text-shadow-primary-950\/90 {
text-shadow: 0 2px 4px rgba(var(--color-primary-950-rgb), 0.90);
}
.text-shadow-text {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 1);
}
.text-shadow-text\/10 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.10);
}
.text-shadow-text\/20 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.20);
}
.text-shadow-text\/30 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.30);
}
.text-shadow-text\/40 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.40);
}
.text-shadow-text\/50 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.50);
}
.text-shadow-text\/60 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.60);
}
.text-shadow-text\/70 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.70);
}
.text-shadow-text\/80 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.80);
}
.text-shadow-text\/90 {
text-shadow: 0 2px 4px rgba(var(--color-text-rgb), 0.90);
}
.text-shadow-success {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 1);
}
.text-shadow-success\/10 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.10);
}
.text-shadow-success\/20 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.20);
}
.text-shadow-success\/30 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.30);
}
.text-shadow-success\/40 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.40);
}
.text-shadow-success\/50 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.50);
}
.text-shadow-success\/60 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.60);
}
.text-shadow-success\/70 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.70);
}
.text-shadow-success\/80 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.80);
}
.text-shadow-success\/90 {
text-shadow: 0 2px 4px rgba(var(--color-success-rgb), 0.90);
}
.text-shadow-warning {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 1);
}
.text-shadow-warning\/10 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.10);
}
.text-shadow-warning\/20 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.20);
}
.text-shadow-warning\/30 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.30);
}
.text-shadow-warning\/40 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.40);
}
.text-shadow-warning\/50 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.50);
}
.text-shadow-warning\/60 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.60);
}
.text-shadow-warning\/70 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.70);
}
.text-shadow-warning\/80 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.80);
}
.text-shadow-warning\/90 {
text-shadow: 0 2px 4px rgba(var(--color-warning-rgb), 0.90);
}
.text-shadow-danger {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 1);
}
.text-shadow-danger\/10 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.10);
}
.text-shadow-danger\/20 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.20);
}
.text-shadow-danger\/30 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.30);
}
.text-shadow-danger\/40 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.40);
}
.text-shadow-danger\/50 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.50);
}
.text-shadow-danger\/60 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.60);
}
.text-shadow-danger\/70 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.70);
}
.text-shadow-danger\/80 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.80);
}
.text-shadow-danger\/90 {
text-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.90);
}
.text-shadow-light {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 1);
}
.text-shadow-light\/10 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.10);
}
.text-shadow-light\/20 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.20);
}
.text-shadow-light\/30 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.30);
}
.text-shadow-light\/40 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.40);
}
.text-shadow-light\/50 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.50);
}
.text-shadow-light\/60 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.60);
}
.text-shadow-light\/70 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.70);
}
.text-shadow-light\/80 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.80);
}
.text-shadow-light\/90 {
text-shadow: 0 2px 4px rgba(var(--color-light-rgb), 0.90);
}
.text-shadow-white {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 1);
}
.text-shadow-white\/10 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.10);
}
.text-shadow-white\/20 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.20);
}
.text-shadow-white\/30 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.30);
}
.text-shadow-white\/40 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.40);
}
.text-shadow-white\/50 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.50);
}
.text-shadow-white\/60 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.60);
}
.text-shadow-white\/70 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.70);
}
.text-shadow-white\/80 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.80);
}
.text-shadow-white\/90 {
text-shadow: 0 2px 4px rgba(var(--color-white-rgb), 0.90);
}
/* Radius Utilities */
/* Algemene border-radius classes */
.radius-tiny { border-radius: var(--radius-tiny); }
.radius-small { border-radius: var(--radius-small); }
.radius-medium { border-radius: var(--radius-medium); }
.radius-large { border-radius: var(--radius-large); }
.radius-xlarge { border-radius: var(--radius-xlarge); }
.radius-huge { border-radius: var(--radius-huge); }
.radius-full { border-radius: var(--radius-full); }
/* Alleen bovenkant afgerond */
.radius-top-tiny { border-radius: var(--radius-tiny) var(--radius-tiny) 0 0; }
.radius-top-small { border-radius: var(--radius-small) var(--radius-small) 0 0; }
.radius-top-medium { border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.radius-top-large { border-radius: var(--radius-large) var(--radius-large) 0 0; }
.radius-top-xlarge { border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0; }
.radius-top-huge { border-radius: var(--radius-huge) var(--radius-huge) 0 0; }
/* Alleen rechterkant afgerond */
.radius-right-tiny { border-radius: 0 var(--radius-tiny) var(--radius-tiny) 0; }
.radius-right-small { border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.radius-right-medium { border-radius: 0 var(--radius-medium) var(--radius-medium) 0; }
.radius-right-large { border-radius: 0 var(--radius-large) var(--radius-large) 0; }
.radius-right-xlarge { border-radius: 0 var(--radius-xlarge) var(--radius-xlarge) 0; }
.radius-right-huge { border-radius: 0 var(--radius-huge) var(--radius-huge) 0; }
/* Alleen linkerkant afgerond */
.radius-left-tiny { border-radius: var(--radius-tiny) 0 0 var(--radius-tiny); }
.radius-left-small { border-radius: var(--radius-small) 0 0 var(--radius-small); }
.radius-left-medium { border-radius: var(--radius-medium) 0 0 var(--radius-medium); }
.radius-left-large { border-radius: var(--radius-large) 0 0 var(--radius-large); }
.radius-left-xlarge { border-radius: var(--radius-xlarge) 0 0 var(--radius-xlarge); }
.radius-left-huge { border-radius: var(--radius-huge) 0 0 var(--radius-huge); }
/* Alleen onderkant afgerond */
.radius-bottom-tiny { border-radius: 0 0 var(--radius-tiny) var(--radius-tiny); }
.radius-bottom-small { border-radius: 0 0 var(--radius-small) var(--radius-small); }
.radius-bottom-medium { border-radius: 0 0 var(--radius-medium) var(--radius-medium); }
.radius-bottom-large { border-radius: 0 0 var(--radius-large) var(--radius-large); }
.radius-bottom-xlarge { border-radius: 0 0 var(--radius-xlarge) var(--radius-xlarge); }
.radius-bottom-huge { border-radius: 0 0 var(--radius-huge) var(--radius-huge); }
/** None **/
/* Padding - All sides */
.padding-none { padding: 0 !important; }
.padding-tiny { padding: var(--space-tiny); }
.padding-xsmall { padding: var(--space-xsmall); }
.padding-small { padding: var(--space-small); }
.padding-medium { padding: var(--space-medium); }
.padding-large { padding: var(--space-large); }
.padding-xlarge { padding: var(--space-xlarge); }
.padding-huge { padding: var(--space-huge); }
/* Padding - Top */
.padding-top-none { padding-top: 0 !important; }
.padding-top-tiny { padding-top: var(--space-tiny); }
.padding-top-xsmall { padding-top: var(--space-xsmall); }
.padding-top-small { padding-top: var(--space-small); }
.padding-top-medium { padding-top: var(--space-medium); }
.padding-top-large { padding-top: var(--space-large); }
.padding-top-xlarge { padding-top: var(--space-xlarge); }
.padding-top-huge { padding-top: var(--space-huge); }
/* Padding - Bottom */
.padding-bottom-none { padding-bottom: 0 !important;}
.padding-bottom-tiny { padding-bottom: var(--space-tiny); }
.padding-bottom-xsmall { padding-bottom: var(--space-xsmall); }
.padding-bottom-small { padding-bottom: var(--space-small); }
.padding-bottom-medium { padding-bottom: var(--space-medium); }
.padding-bottom-large { padding-bottom: var(--space-large); }
.padding-bottom-xlarge { padding-bottom: var(--space-xlarge); }
.padding-bottom-huge { padding-bottom: var(--space-huge); }
/* Padding - Left */
.padding-left-none { padding-left: 0 !important; }
.padding-left-tiny { padding-left: var(--space-tiny); }
.padding-left-xsmall { padding-left: var(--space-xsmall); }
.padding-left-small { padding-left: var(--space-small); }
.padding-left-medium { padding-left: var(--space-medium); }
.padding-left-large { padding-left: var(--space-large); }
.padding-left-xlarge { padding-left: var(--space-xlarge); }
.padding-left-huge { padding-left: var(--space-huge); }
/* Padding - Right */
.padding-right-none { padding-right: 0 !important; }
.padding-right-tiny { padding-right: var(--space-tiny); }
.padding-right-xsmall { padding-right: var(--space-xsmall); }
.padding-right-small { padding-right: var(--space-small); }
.padding-right-medium { padding-right: var(--space-medium); }
.padding-right-large { padding-right: var(--space-large); }
.padding-right-xlarge { padding-right: var(--space-xlarge); }
.padding-right-huge { padding-right: var(--space-huge); }
/* Margin - All sides */
.margin-none { margin: 0 !important; }
.margin-tiny { margin: var(--space-tiny); }
.margin-xsmall { margin: var(--space-xsmall); }
.margin-small { margin: var(--space-small); }
.margin-medium { margin: var(--space-medium); }
.margin-large { margin: var(--space-large); }
.margin-xlarge { margin: var(--space-xlarge); }
.margin-huge { margin: var(--space-huge); }
/* Margin - Top */
.margin-top-none { margin-top: 0 !important; }
.margin-top-tiny { margin-top: var(--space-tiny); }
.margin-top-xsmall { margin-top: var(--space-xsmall); }
.margin-top-small { margin-top: var(--space-small); }
.margin-top-medium { margin-top: var(--space-medium); }
.margin-top-large { margin-top: var(--space-large); }
.margin-top-xlarge { margin-top: var(--space-xlarge); }
.margin-top-huge { margin-top: var(--space-huge); }
/* Margin - Bottom */
.margin-bottom-none { margin-bottom: 0 !important; }
.margin-bottom-tiny { margin-bottom: var(--space-tiny); }
.margin-bottom-xsmall { margin-bottom: var(--space-xsmall); }
.margin-bottom-small { margin-bottom: var(--space-small); }
.margin-bottom-medium { margin-bottom: var(--space-medium); }
.margin-bottom-large { margin-bottom: var(--space-large); }
.margin-bottom-xlarge { margin-bottom: var(--space-xlarge); }
.margin-bottom-huge { margin-bottom: var(--space-huge); }
/* Margin - Left */
.margin-left-none { margin-left: 0 !important; }
.margin-left-tiny { margin-left: var(--space-tiny); }
.margin-left-xsmall { margin-left: var(--space-xsmall); }
.margin-left-small { margin-left: var(--space-small); }
.margin-left-medium { margin-left: var(--space-medium); }
.margin-left-large { margin-left: var(--space-large); }
.margin-left-xlarge { margin-left: var(--space-xlarge); }
.margin-left-huge { margin-left: var(--space-huge); }
/* Margin - Right */
.margin-right-none { margin-right: 0 !important; }
.margin-right-tiny { margin-right: var(--space-tiny); }
.margin-right-xsmall { margin-right: var(--space-xsmall); }
.margin-right-small { margin-right: var(--space-small); }
.margin-right-medium { margin-right: var(--space-medium); }
.margin-right-large { margin-right: var(--space-large); }
.margin-right-xlarge { margin-right: var(--space-xlarge); }
.margin-right-huge { margin-right: var(--space-huge); }
/* Margin - Horizontal / Vertical shorthand */
.margin-y-small { margin-top: var(--space-small); margin-bottom: var(--space-small); }
.margin-x-small { margin-left: var(--space-small); margin-right: var(--space-small); }
/* Opacity */
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }
/* Position */
.position-top-left {
position: absolute;
top: 0;
left: 0;
}
.position-top-center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.position-top-right {
position: absolute;
top: 0;
left: 0;
}
.position-bottom-left {
position: absolute;
top: 0;
left: 0;
}
.position-bottom-center {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.position-bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
.position-center-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.position-center-center {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.position-center-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
/* Backdrop filter blur */
.with-blur:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
filter: brightness(1.3) contrast(1.4);
border-radius: inherit;
z-index: -1;
}
/* --- /templates/xso/css/wbce.css --- */
/*
---------------------------
WBCE - aanvullingen op de TimeWriter opmaak
---------------------------
Dit bestand bevat uitsluitend regels die nodig zijn omdat de navigatie en de
content nu uit het CMS komen. De originele stylesheets zijn ongewijzigd
gebleven, zodat een update van de vormgeving hier niet in de weg zit.
*/
/* Actieve pagina in de hoofdnavigatie (a of button, zie $tw['menu_click']) */
.topnav > li > a.is-active,
.topnav > li > button.is-active {
color: var(--color-primary-600);
}
/* De streep onder het item is in deze template de taal voor "hier ben je":
* topbar.css laat hem bij hover omhoog schuiven en houdt hem staand bij
* .item-breadcrumb en .hover. De actieve pagina hoorde daarbij, maar kreeg
* hem niet. Nu wel. */
.topnav > li > a.is-active:before,
.topnav > li > button.is-active:before {
transform: translateY(0px);
visibility: visible;
opacity: 1;
}
/* ---------------------------------------------------------------------------
Actieve pagina in de bovenbalk en in het copyrightmenu
show_menu2 zet class="is-active" op het
van de huidige pagina. Foundation
pakt dat op met .menu .is-active > a en zet daar een vol blok #1779ba achter:
zijn eigen standaard-primary, een kleur die in dit palet niet voorkomt. Die
achtergrond werd nergens overschreven, de labelkleur uit topbar.css wel - die
heeft dezelfde specificiteit en staat later, dus die wint. Het resultaat was
antracietgrijze tekst (--color-text) op middenblauw: 2,7:1, ruim onder de
4,5:1 die gewone tekst nodig heeft, en een blok dat op een bijna witte balk
harder roept dan de knop ernaast.
Hieronder gaat het blok weg en komt de taal van de template ervoor terug:
het label in het donkere blauw van het palet (7,3:1 op de balk) met dezelfde
accentstreep eronder die de hoofdnavigatie gebruikt.
--------------------------------------------------------------------------- */
.topbar-extra-content .menu li.is-active > a,
.topbar-extra-content .menu li.active > a {
background: transparent;
color: var(--color-primary-900);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--color-primary-600);
}
.topbar-extra-content .menu li.is-active > a:hover,
.topbar-extra-content .menu li.active > a:hover {
color: var(--color-primary-600);
}
/* Hetzelfde menu staat onderaan bij het copyright. Daar alleen het blok weg;
* kleur en gewicht blijven van de footer zelf. */
.copyright-content .menu li.is-active > a,
.copyright-content .menu li.active > a {
background: transparent;
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Afbeelding op de kaart in het menupaneel
De promokaart in de mega-dropdown toonde de afbeelding op de grootte die het
bestand zelf meebracht: een icoon van 128 px werd 128 px, een foto liep over
de volle kaartbreedte. Daardoor sprong de kaart van formaat zodra iemand een
andere afbeelding koos. Hij staat nu vast op 100 x 100.
Ander formaat? Pas alleen --menupaneel-afbeelding hieronder aan.
object-fit: contain laat de hele afbeelding zien, met ruimte eromheen als
hij niet vierkant is - goed voor iconen en logo's. Zet je er een foto op en
wil je het vierkant helemaal gevuld hebben (bijgesneden), vervang contain
dan door cover.
--------------------------------------------------------------------------- */
.mega-dropdown .card-image {
--menupaneel-afbeelding: 100px;
width: var(--menupaneel-afbeelding);
height: var(--menupaneel-afbeelding);
flex: 0 0 auto;
}
.mega-dropdown .card-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* ---------------------------------------------------------------------------
Subnavigatie in de zijbalk
show_menu2 kan meerdere niveaus diep gaan; hieronder de inspringing.
--------------------------------------------------------------------------- */
.sidebar-subnav ul ul {
margin-left: 15px;
border-left: 1px solid var(--color-primary-100);
}
.sidebar-subnav li.menu-current > a,
.sidebar-subnav li.menu-parent > a {
font-weight: 600;
color: var(--color-primary-600);
}
/* ---------------------------------------------------------------------------
Content uit de WYSIWYG-editor
Basisopmaak voor content zonder .textblock-classes, zodat een gewone
pagina er meteen goed uitziet.
--------------------------------------------------------------------------- */
#page-content > ul,
#page-content > ol {
margin-bottom: 20px;
line-height: 1.9;
}
#page-content img {
max-width: 100%;
height: auto;
}
#page-content table {
width: 100%;
margin-bottom: 25px;
}
#page-content iframe {
max-width: 100%;
}
#page-content > *:last-child {
margin-bottom: 0;
}
/* Meldingen van modules (bijv. formulieren) */
#page-content .message,
#page-content .error {
padding: 15px 20px;
border-radius: 10px;
background: var(--color-primary-50);
margin-bottom: 20px;
}
#page-content .error {
background: rgba(var(--color-alert-rgb), 0.1);
}
/* ---------------------------------------------------------------------------
Toegankelijkheid: link naar de inhoud
--------------------------------------------------------------------------- */
.show-on-focus {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.show-on-focus:focus {
left: 0;
top: 0;
z-index: 999;
width: auto;
height: auto;
clip: auto;
padding: 12px 20px;
background: var(--color-white);
color: var(--color-primary-950);
border-radius: 0 0 10px 0;
}
/* ---------------------------------------------------------------------------
Naar boven
--------------------------------------------------------------------------- */
.scroll-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary-600);
color: var(--color-white);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
body.is-scrolled .scroll-to-top {
opacity: 1;
pointer-events: auto;
}
.scroll-to-top:hover {
background: var(--color-primary-700);
color: var(--color-white);
}
/* ---------------------------------------------------------------------------
* Homepage (modulegebouwde hero) - toegevoegd voor de modulaire homepage.
* De homepage (bovenste pagina, body.is-home) krijgt een doorlopende lichte
* achtergrond die naar wit vervaagt, zodat een hero uit blok 10 (bv. de
* Cover-module met achtergrond op "transparant") naadloos aansluit op de nav.
* Op de homepage staat bovendien geen kruimelpad (zie index.php / IS_HOME).
* ------------------------------------------------------------------------ */
body.is-home {
background: linear-gradient(180deg, #e7f1ff 0%, #eef5ff 26%, #f6faff 48%, #ffffff 70%);
background-repeat: no-repeat;
}
/* ---------------------------------------------------------------------------
* Blok 'Brede secties (volle breedte)' - .page-content-full
*
* Wordt door index.php gebruikt voor blok 5: de secties lopen edge-to-edge en
* bepalen zelf hun ruimte. Losse tekst die je ertussen typt zou dan tot de schermrand lopen;
* onderstaande regels vangen dat op door gewone tekstelementen alsnog in de
* standaard containerbreedte te zetten (75rem, zelfde gutter als
* .grid-container). Elementen met een eigen class - dus de opmaak van de
* template en de sectiemodules - blijven onaangeroerd volle breedte.
* ------------------------------------------------------------------------ */
/* Zorg dat dit blok zelf nooit zij-padding krijgt, zodat een sectie met een
achtergrond (bv. het CTA-bannerblok) echt tegen de schermranden staat. */
.page-content-full {
padding-left: 0;
padding-right: 0;
}
.page-content-full > p,
.page-content-full > h1,
.page-content-full > h2,
.page-content-full > h3,
.page-content-full > h4,
.page-content-full > h5,
.page-content-full > h6,
.page-content-full > ul,
.page-content-full > ol,
.page-content-full > dl,
.page-content-full > table,
.page-content-full > blockquote,
.page-content-full > pre,
.page-content-full > address,
.page-content-full > form,
.page-content-full > hr,
.page-content-full > figure,
.page-content-full > iframe,
.page-content-full > img,
.page-content-full > div:not([class]) {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
box-sizing: border-box;
}
/* wat lucht boven/onder losse tekst, zodat die niet tegen een sectie plakt */
.page-content-full > p:first-child,
.page-content-full > h1:first-child,
.page-content-full > h2:first-child,
.page-content-full > h3:first-child,
.page-content-full > ul:first-child,
.page-content-full > ol:first-child,
.page-content-full > table:first-child,
.page-content-full > div:not([class]):first-child {
margin-top: 2.5rem;
}
.page-content-full > p:last-child,
.page-content-full > h1:last-child,
.page-content-full > h2:last-child,
.page-content-full > h3:last-child,
.page-content-full > ul:last-child,
.page-content-full > ol:last-child,
.page-content-full > table:last-child,
.page-content-full > div:not([class]):last-child {
margin-bottom: 2.5rem;
}
/* Staat er tekst zowel voor als na een volle-breedte sectie in hetzelfde blok,
dan krijgt elk vervolgstuk dezelfde inspringing als #page-content
(zie content.css), zodat alles netjes op een lijn blijft. */
.page-content-more {
padding-left: 30px;
padding-right: 6rem;
}
@media (max-width: 1023px) {
.page-content-more { padding-left: 15px; padding-right: 1rem; }
}
@media (max-width: 640px) {
.page-content-more { padding-left: 15px; padding-right: 15px; }
}
/* ---------------------------------------------------------------------------
* Achtergronddecoratie achter een eigen hero (blok 'Cover / hero')
*
* De automatische cover-placeholder heeft een kleurvlak, twee gloedcirkels en
* de grote sierlijke cirkels. Vul je blok 10 zelf (bv. met de Cover-module),
* dan rendert die placeholder niet en zou de achtergrond vlak worden. Deze
* laag brengt dezelfde decoratie terug, achter de hero.
* ------------------------------------------------------------------------ */
.cover-decor {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* de cirkels zijn standaard onzichtbaar tot een slider ze activeert */
.cover-decor .circle-wrapper {
opacity: 1 !important;
}
/* de hero zelf boven de decoratie houden */
.cover-wrapper > *:not(.cover-decor) {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------
* Opmaak gelijktrekken: gewone WYSIWYG-content vs. de eigen modules
*
* Een kale / die je in een standaard WYSIWYG-blok typt viel tot nu
* toe terug op de algemene kopregel in basics.css (donker,
* var(--color-primary-950)), terwijl regel 1 van een moduletitel zijn
* zachtere kleur krijgt via "h1 span { color: rgba(0,33,100,0.6) }" (ook
* basics.css) - de modules zetten hun titeltekst namelijk in een .
* Ook de broodtekst verschilde: .textblock-content P (content.css) is
* clamp(1rem -> 1.125rem), een kale (basics.css) blijft 1rem.
*
* Onderstaande regels geven kale koppen en alinea's in de leeskolom
* (#page-content, .page-content-more en het volle-breedte blok
* .page-content-full) dezelfde waarden als de modules. Bewust alleen
* elementen ZONDER class (:not([class])): alles wat al een eigen class
* draagt - moduletitels, c-primary-600-koppen uit de editor
* ("Kop 1 lichtblauw"), sectie-opmaak - blijft volledig ongemoeid.
* :where() houdt de specificiteit laag, zodat bestaande, specifiekere
* regels (bv. .accordion-content .textblock-lead p) blijven winnen.
* ------------------------------------------------------------------------ */
:where(#page-content, .page-content-more, .page-content-full) :is(h3, h4, h5, h6):not([class]) {
color: rgba(0, 33, 100, 0.6); /* zelfde kleur als moduletitel regel 1 */
}
/* Een kale
of is automatisch tweekleurig, net als de tweeregelige
* moduletitels: de eerste GETOONDE regel in de normale kopkleur, alles
* daarna in de lichtblauwe accentkleur. Je hoeft daar in de editor dus geen
* stijl voor te kiezen - typ de kop, breek af met Shift+Enter (of laat de
* browser hem zelf afbreken) en de tweede regel kleurt vanzelf mee. Past de
* kop op een regel, dan oogt hij gewoon als een normale kop.
*
* De h2 hoorde hier vanaf v2.9 bij, maar stond nog in de rij hierboven
* (h2 t/m h6 = een kleur). Die twee regels spreken elkaar tegen en zijn even
* specifiek, dus won de laatste - en dat was de eenkleurige. Daarom staat de
* h2 nu hier en niet meer daar.
*
* Alleen een h1/h2 ZONDER class: moduletitels (.textblock-title) regelen hun
* eigen twee kleuren al met .tw-title-line1/.tw-title-line2 en blijven
* daardoor volledig ongemoeid. Koppen die de stijl "Kop 1/2 tweekleurig"
* uit de editor dragen, hebben class="kop-duo" en krijgen hetzelfde beeld
* verderop in dit bestand.
*
* .cover-wrapper staat er sinds 2.9.2 bij. Dat is de kopband uit index.php,
* met daarin blok 10 - dus de hero. De kop daarvan is de grootste van
* de pagina en viel als enige buiten deze regels, omdat de opsomming
* hierboven alleen de leeskolom noemt; hij bleef daardoor eenkleurig terwijl
* dezelfde kop in een gewoon tekstblok wel tweekleurig werd. */
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class]) {
color: var(--color-primary-600);
}
:where(#page-content, .page-content-more, .page-content-full, .cover-wrapper) :is(h1, h2):not([class])::first-line {
color: rgba(0, 33, 100, 0.6);
}
:where(#page-content, .page-content-more, .page-content-full) p:not([class]) {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem); /* zelfde als .textblock-content P */
line-height: 1.9;
}
/* De leadtekst van de modules (Intro Block e.d.) staat als kale tekst in de
* .textblock-lead-span, meestal zonder
eromheen - de bestaande regel
* ".textblock-lead p { line-height: 1.9 }" (content.css) doet dan niets en
* de tekst valt terug op de krappere standaard-regelafstand van de browser.
* Zelfde waarden als de WYSIWYG-alinea's hierboven, op de span zelf, zodat
* lead- en hoofdtekst dezelfde regelafstand hebben. Staat er wel een
in
* de lead, dan blijven de eigen p-regels (o.a. font-weight 600) gewoon
* gelden - de regelafstand is daar al 1.9. */
.textblock-lead {
font-size: clamp(1.000rem, 0.9152rem + 0.1399vw, 1.125rem);
line-height: 1.9;
}
/* Tweekleurige kop voor de WYSIWYG-editor ("Kop 1 tweekleurig" in de
* Stijl-lijst, zie wb_config/editor.styles.js): regel 1 in de normale
* kopkleur, elke volgende regel in de lichtblauwe accentkleur - hetzelfde
* beeld als de tweeregelige moduletitels (regel 1 via de "h1 span"-regel in
* basics.css, regel 2 in c-primary-600). ::first-line pakt de eerste
* GETOONDE regel: een nieuwe regel maak je in de editor met Shift+Enter
* (of de kop breekt vanzelf af); past de kop op een regel, dan oogt hij
* gewoon als een normale kop. */
.kop-duo {
color: var(--color-primary-600);
}
.kop-duo::first-line {
color: rgba(0, 33, 100, 0.6); /* zelfde als moduletitel regel 1 */
}
/* ---------------------------------------------------------------------------
* Kopband zonder tekst (v2.5)
*
* De automatische paginatitel + omschrijving in de kopband zijn vervallen
* (zie index.php). Die tekst gaf de band vanzelf hoogte; nu is de sectie
* alleen nog zijn eigen padding hoog. .cover-wrapper trekt zichzelf 160px
* omhoog onder de vaste menubalk, terwijl .cover-placeholder in cover.css
* per breekpunt 160px/180px/110px padding-top heeft. Op smalle schermen
* (110px) zou de band die -160px dus niet meer volledig opvangen en zou de
* eerste content onder de menubalk schuiven. Deze ondergrens houdt de band
* altijd minstens even hoog als de verschuiving.
* ------------------------------------------------------------------------ */
.cover-placeholder {
min-height: 240px;
}
/* --- /templates/xso/css/skins/timewriter.css --- */
/**
* Huisstijl: TimeWriter
* ---------------------------------------------------------------------------
* Wordt na alle basis-CSS geladen. De basis-CSS (css/variables.css e.a.) heeft
* al de TimeWriter-waarden, dus dit bestand hoeft in principe niets te
* overschrijven. De variabelen staan hier toch expliciet, zodat beide
* huisstijlen op dezelfde plek te vinden en aan te passen zijn - pas je hier
* een kleur aan, dan verandert alleen TimeWriter mee.
*/
:root {
/* Primair kleurenpalet */
--color-primary-950: #133358;
--color-primary-900: #185490;
--color-primary-800: #1562B8;
--color-primary-700: #1175D9;
--color-primary-600: #1994F7; /* Primary */
--color-primary-500: #30B0FF;
--color-primary-400: #57CCFF;
--color-primary-300: #8DE0FF;
--color-primary-200: #BBEBFF;
--color-primary-100: #D9F3FF;
--color-primary-50: #EEFAFF;
--color-primary-950-rgb: 19, 51, 88;
--color-primary-900-rgb: 24, 84, 144;
--color-primary-800-rgb: 21, 98, 184;
--color-primary-700-rgb: 17, 117, 217;
--color-primary-600-rgb: 25, 148, 247; /* Primary */
--color-primary-500-rgb: 48, 176, 255;
--color-primary-400-rgb: 87, 204, 255;
--color-primary-300-rgb: 141, 224, 255;
--color-primary-200-rgb: 187, 235, 255;
--color-primary-100-rgb: 217, 243, 255;
--color-primary-50-rgb: 238, 250, 255;
/* Signaalkleuren */
--color-warning: #f7b731;
--color-warning-rgb: 247, 183, 49;
--color-alert: #e74c3c;
}
/* --- Logo in de navigatie ------------------------------------------------ */
.logo {
width: 240px;
background-size: contain;
background-position: 50% 50%;
background-image: url('https://www.timewriter.nl/templates/xso/images/logo-timewriter.svg');
}
/* --- /modules/introblock/frontend.css --- */
/* Intro Block - frontend
*
* INTENTIONALLY (almost) EMPTY.
*
* This module outputs the markup and CSS classes of the TimeWriter template
* itself (.textblock / .textblock-intro / .textblock-title / .textblock-lead
* / .textblock-content, css/content.css) - the same classes the static
* design demo already used for this kind of page heading + body text. All
* styling therefore comes from the template stylesheets, which guarantees a
* pixel-perfect match with the original design.
*
* Do not add a module-specific design system here - if something needs
* restyling, do it in the template CSS or via the "extra CSS class" field.
*/
/* Geen eigen titelopmaak meer (v1.0.6). De titel is een kale
en wordt
* volledig door het template opgemaakt (css/basics.css voor grootte en
* gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
* blok er exact hetzelfde uit als een kop uit elke andere module of uit de
* editor - de eerdere .tw-title-line2-regel en de vijf titelgroottes gaven
* dit blok een eigen kopopmaak, en juist dat verschil was het probleem.
* Wil je de kopopmaak wijzigen, doe dat in het template.
*/
/* Extra ruimte tussen de leadtekst en de WYSIWYG-hoofdtekst erna - specifiek
* gevraagd voor dit blok. Scoped op "article[id^='introblock-'] .textblock-
* lead" (een afstammeling van dit blok's eigen root-element, zie view.php)
* in plaats van kaal op .textblock-lead: die class wordt elders in het
* template ook hergebruikt (bv. in de FAQ-accordion-antwoorden van de
* statische demo) en deze regel mag daar niet in doorlekken. Een
* afstammeling-selector (spatie), geen kind-selector (>): staat er een
* afbeelding bij dit blok, dan zit .textblock-lead een niveau dieper, in de
* tekst-cel van het grid hieronder.
*
* De leadtekst van dit blok komt uit een gewoon