@import url("reset.css");@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');@import url("forms.less");@import url("variables.css");@import url("header.css");@import url("mainmenu.css");.buttons { --bHeight:var(--inputHeight); padding:0px; padding-top:var(--gutter); margin-top:var(--gutter); border-top:1px var(--brandColor) solid; margin-bottom:var(--gutter); &:last-child { margin-bottom:0px; } > * { margin-right:var(--gutter); display:inline-block; height:var(--bHeight); line-height:var(--bHeight); margin-bottom:0px; &:last-child { margin-right:0px; } } a, span { line-height:var(--bHeight); } @container page-section (max-width:700px) { text-align:center; display:flex; flex-direction:column; > * { float:none; display:block; margin-left:0px; margin-right:0px; width:100%; margin-bottom:var(--gutter-half); text-align:center; order:10; &.primary { order:1; } } }}::placeholder { color:#ddd;}/* Revealable copied from Foundation */.revealable { transition:max-height 0.2s ease-in, opacity 0.2s ease-in, margin-top 0.2s ease-in, margin-bottom 0.2s ease-in; max-height:0px; overflow:hidden; opacity:0; pointer-events:none; &.not-revealed { margin-bottom:0px !important; margin-top:0px !important; padding-top:0px !important; padding-bottom:0px !important; } &.revealed { pointer-events:auto; max-height:1000px; opacity:1; }}body { color:var(--fontColor); line-height:var(--lineHeight); font-family:var(--fontFamilyBody); background-color:var(--bodyBackgroundColor);}h1, h2, h3, h4 { margin-bottom:1em; font-weight:bold; font-family:var(--fontFamilyHeadings);}h1 { font-size:var(--fontSizeH1);}h2 { font-size:var(--fontSizeH2);}h3 { font-size:var(--fontSizeH3);}h4 { font-size:var(--fontSizeH4);}p { margin-top:0px; margin-bottom:var(--gutter);}table { margin-bottom:var(--gutter);}a { cursor:pointer; color:var(--linkColor);}ul, ol { margin:1em 0; padding:0 0 0 var(--gutter); &.no-bullets { padding-left:0px; li { list-style-type:none; } }}.error-panel { --panelBackgroundColor:var(--errorBackgroundColor); --panelFontColor:var(--errorFontColor); border:none; padding:0px; padding-left:var(--gutter); border-left:var(--panelFontColor) 4px solid; background-color:transparent; color:var(--fontColor); border-radius:0px; padding-top:0.1px; padding-bottom:0.1px; display:inline-block; line-height:1.5em; > h4:first-child { margin-bottom:0px; } > * { &:first-child { margin-top:0px; } &:last-child { margin-bottom:0px; } } button, input[type=submit], input[type=button] { display:block; &:hover { display:block; } } ul { margin-top:0px; } &.solid { background-color:var(--panelBackgroundColor); border:1px var(--panelFontColor) solid; padding:var(--gutter-half); border-radius:var(--inputBorderRadius); width:100%; margin-bottom:var(--gutter); } &:has(> button){ display:flex; justify-content:space-between; flex-direction:row; flex-wrap:nowrap; align-items:center; > span, > p{ order:10; flex:1 1 auto; margin-bottom:0px; } > button{ margin-left:var(--gutter); order:20; flex:0 0 auto; } }}.block { display:block;}.small { font-size:var(--fontSizeSmall);}.nowrap { white-space:nowrap;}.wrap { word-break:break-all;}input[type=button], input[type=submit], button, .button, [button-type="Button"], button[type=submit] { --btnFontSize:inherit; --btnFontColor:var(--primaryButtonBackgroundColor); --btnBackgroundColor:transparent; --btnSidePadding:1em; --btnHeight:var(--inputHeight); --btnBorderWidth:1px; --btnBorderColor:var(--btnFontColor); font-size:var(--btnFontSize); display:inline-block; user-select:none; color:var(--btnFontColor); border:var(--btnBorderWidth) var(--btnBorderColor) solid; background-color:var(--btnBackgroundColor); padding:0px var(--btnSidePadding); text-decoration-line:none; border-radius:var(--inputBorderRadius); position:relative; transition:all var(--transitionDefaultDuration) var(--transitionDefaultStyle); height:var(--btnHeight); line-height:var(--btnHeight); min-width:var(--btnHeight); /* We never our buttons taller than they are higher */ cursor:pointer; &:hover { opacity:0.5; } &.block { display:block; } &.small { --btnHeight:calc(var(--gutter) * 1.5); --btnFontSize:var(--fontSizeVerySmall); font-size:var(--btnFontSize); /* Have to repeat this here as the standalone 'small' class overrides it. Which is surprising because this is more specific, but...whatevs */ } &.primary{ --btnFontColor:var(--primaryButtonTextColor); --btnBorderColor:var(--primaryButtonBackgroundColor); --btnBackgroundColor:var(--primaryButtonBackgroundColor); } &.button-icon{ --btnFontSize:var(--fontSizeVerySmall); --btnBackgroundColor:transparent; --btnColor:var(--primaryButtonBackgroundColor); text-transform:uppercase; } &.btn-error{ --btnFontColor:var(--errorFontColor); &.primary{ --btnFontColor:var(--white); --btnBackgroundColor:var(--errorFontColor); --btnBorderColor:var(--errorFontColor); } } /* a-tags and inputs have an immediate span which contains the actual text */ > span:first-child { transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); opacity:1; line-height:inherit; }}a:not(.button), input[type=button], input[type=submit], button, .button, [button-type="Button"], button[type=submit]{ &.loadable{ position:relative; display:inline-block; &.loading { &:after { content:''; visibility:visible; display:block; width:2px; box-shadow:0px 0px 10px 5px var(--white); top:1px; bottom:1px; background-color:var(--white); position:absolute; opacity:1; pointer-events:none; @keyframes kf_loading { 0% { left:1%; } 100% { left:99%; } } animation-direction:alternate; animation-duration:0.5s; animation-name:kf_loading; animation-iteration-count:infinite; animation-easing:ease-in-out; } } }}.page { --pageMargin:var(--gutter); --pageMaxWidth:var(--pageWidth); container-name:page-section; container-type:inline-size; margin-left:auto; margin-right:auto; max-width:var(--pageMaxWidth); width:calc(100% - var(--pageMargin) - var(--pageMargin)); @container app-container (max-width:900px) { width:auto; margin-left:var(--pageMargin); margin-right:var(--pageMargin); }}h1, h2, h3, h4 { line-height:1.5;}.official-partner { font-size:var(--fontSizeH2); line-height:1.5; text-align:center;}.breadcrumbs { @container app-container (max-width:700px) { margin-bottom:var(--gutter); } > * { display:inline-block; font-size:var(--fontSizeSmall); &:not(:last-child) { margin-right:0.5em; } } a { color:var(--linkColor); } span { font-weight:bold; text-decoration:none; color:var(--linkColor); }}.tick-list { padding-left:var(--gutter); li { list-style-type:none; margin-bottom:1em; position:relative; &:not(.no-tick) { &:before { position:absolute; content:''; --w:0.5em; width:var(--w); height:var(--w); background-color:var(--brandColor); display:inline-block; visibility:visible; margin-top:var(--w); margin-left:calc(var(--gutter) * -1); border-radius:50%; } } &.no-tick { opacity:0.5; } }}.site-header { @container app-container (min-width:800px) { background-image:url('/i/assets/logo.png'); background-position:center; background-size:auto calc(var(--headerHeightMobile) / 2.5); background-repeat:no-repeat; }}.float-right-desktop { float:right; margin-left:var(--gutter); margin-bottom:var(--gutter); @container app-container (max-width:700px) { margin-left:auto; margin-right:auto; display:block; float:none; width:100% !important; }}.intro { font-size:var(--fontSizeH3); line-height:1.5em; font-weight:normal; margin-top:0px; color:var(--gray);}.current-stats-blurb { font-size:var(--fontSizeH1); line-height:1.5; color:var(--gray); font-weight:normal; .val { color:var(--brandColor); font-weight:bold; } @container app-container (max-width:900px) { font-size:var(--fontSizeH2); }}.connector-search-con{ display:grid; grid-gap:calc(var(--gutter) * 2); grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); .connector-con{ background-color:var(--bodyBackgroundColor); border-radius:var(--inputBorderRadius); border:1px var(--brandColor) solid; padding:var(--gutter); cursor:pointer; text-decoration:none; color:var(--fontColor); text-align:center; transition:all 0.2s ease-in-out; scale:1; &:hover { scale:1.1; } .img{ margin-left:auto; margin-right:auto; height:25%; max-width:60%; object-fit:contain; background-repeat:no-repeat; background-position:center; background-size:contain; } > h4{ font-weight:normal; } > a { font-size:var(--fontSizeSmall); } }}.platform-overview-con { &.demarcate-brands { .platform-image-overlay { display:none !important; } } .platform-overview-intro { margin-bottom:calc(var(--gutter) * 2); text-align:center; h2, h3 { margin-bottom:0px; font-size:var(--fontSizeH2); font-weight:normal; } p { font-size:var(--fontSizeH3); line-height:1.5; color:var(--gray); margin-bottom:0px; } } .platform-overview { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); align-items:flex-start; .platform-step { --stepBackgroundColor:#f2f2f2; --stepColor:var(--fontColor); --stepOpacity:0.6; --stepFontWeight:normal; margin-left:var(--gutter); margin-right:var(--gutter); display:flex; flex-wrap:nowrap; justify-content:space-between; flex:1 1 1px; flex-direction:column; margin-top:calc(var(--gutter) * -1); margin-bottom:calc(var(--gutter) * -1); &.step-1 { .title .steps > span:nth-child(1) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } &.step-2 { .title .steps > span:nth-child(2) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } &.step-3 { .title .steps > span:nth-child(3) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } > * { width:auto; margin-top:var(--gutter-half); margin-bottom:var(--gutter-half); } .title { .steps { display:block; font-size:50%; > span { background-color:var(--stepBackgroundColor); color:var(--stepColor); box-shadow:0px 0px 1px 1px var(--stepBackgroundColor); opacity:var(--stepOpacity); font-weight:var(--stepFontWeight); display:inline-block; margin-right:0.5em; width:2em; height:2em; line-height:2em; border-radius:50%; text-align:center; } } } .platform-image { background-size:contain; order:1; background-position:left center; background-repeat:no-repeat; padding-top:50%; height:0px; width:80%; display:block; margin-left:0px; margin-right:auto; position:relative; display:none !important; .platform-image-overlay { --width:var(--gutter-double); background-size:contain; background-position:center; background-repeat:no-repeat; position:absolute; z-index:1; left:var(--gutter); right:var(--gutter); width:var(--width); height:var(--width); display:block; margin-top:-50%; border-radius:50%; background-color:var(--white); border:5px var(--white) solid; box-shadow:0px 0px 5px 5px var(--shadowColor); display:none !important; } } .details { order:2; .title { --fSize:var(--fontSizeH3); --lHeight:calc(var(--fSize) * 1.5); font-size:var(--fSize); line-height:var(--lHeight); min-height:calc(var(--lHeight) * 2); width:90%; max-width:none; } .desc { max-width:none; } } } } @container app-container (max-width:900px) { .platform-overview { flex-direction:column; max-width:500px !important; margin-left:auto !important; margin-right:auto !important; .platform-step { margin-bottom:var(--gutter); margin-top:0px; text-align:center; .details { .title { width:auto; min-height:0px; margin-top:0px; } .desc { font-size:var(--fontSize); } } .platform-image { width:300px; padding-top:230px; margin-left:auto !important; margin-right:auto !important; background-position:bottom center; .platform-image-overlay { left:0; } } } } } @container app-container (max-width:700px) { .platform-overview { .platform-step { .platform-image { width:200px; padding-top:120px; } } } }}.hero-con { &.hero-minor-con { background-color:var(--brandColor); background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative; &:before { position:absolute; top:0; left:0; bottom:0; right:0; background:linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)); visibility:visible; content:''; pointer-events:none; } > .hero { display:flex; flex-direction:row; align-items:center; text-align:center; max-width:1000px; padding:var(--gutter-double) var(--gutter); .hero-title { color:var(--white); flex:1 1 auto; h1 { margin-top:0px; margin-bottom:0px; font-size:calc(var(--fontSizeH1) * 2); line-height:1.5; font-weight:normal; } h2 { font-size:var(--fontSizeH2); font-weight:normal; line-height:1.5em; } } @container app-container (max-width:900px) { .hero-title { h1 { font-size:calc(var(--fontSizeH1) * 1.5); } h3 { font-size:calc(var(--fontSizeH2) / 1.5); } } } @container app-container (max-width:700px) { .hero-title { h1 { font-size:var(--fontSizeH1); } } } } } &.hero-split-con { --icon-width:400px; --heroPadding:calc(var(--gutter) * 4); border-bottom:1px var(--gray) solid; &:not(.demarcate-brands) { button, a { color:var(--fontColor); } a.primary { color:var(--brandColorOffset); text-decoration:none; } } &.demarcate-brands { background-color:var(--bodyBackgroundColor); color:var(--fontColor); } &.has-img { &.img-is-icon { .hero-inner .img-con { flex:0 0 var(--icon-width); margin-left:auto; margin-right:auto; background-color:var(--brand-color); height:var(--icon-width); width:var(--icon-width); border-radius:50%; padding:var(--gutter); position:relative; display:flex; .img{ flex-grow:1; background-size:contain; background-position:center; filter:invert(100%); } } } &:not(.img-is-icon) { .hero-inner .img-con { &:before { z-index:0; position:absolute; display:block; width:2px; height:2px; content:''; visibility:visible; box-shadow:0px 0px 200px 200px var(--white); left:50%; top:50%; transform:translateX(-50%) translateY(-50%); opacity:0.5; } } } } .hero-inner { padding:var(--heroPadding) 0px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; position:relative; .hero-title { flex:1 1 10px; margin-right:var(--heroPadding); h1, h2, h3, h4 { } h1 { line-height:1.5; margin:0px; margin-bottom:var(--gutter-double); font-weight:normal; .underline { display:inline; border-bottom:4px var(--brandColor) solid; } } h2, h3 { font-weight:normal; line-height:1.5; margin:0px; margin-bottom:1em; font-size:var(--fontSizeH3); span { display:block; font-size:var(--fontSizeH4); margin-top:var(--gutter); } } .actions { margin-top:var(--gutter-double); border-top:none; button, a { margin-right:var(--gutter); display:inline-block; border-color:var(--fontColor); } @container app-container (max-width:700px) { text-align:center; select { width:100%; } > button, a { margin-left:var(--gutter-half); margin-right:var(--gutter-half); margin-bottom:var(--gutter-half); display:inline-block; } } } } .img-con { position:relative; flex:1 1 8px; .img { background-size:contain; background-position:center; background-repeat:no-repeat; padding-top:75%; z-index:1; position:relative; max-width:70%; margin-left:auto; margin-right:auto; } } @container app-container (max-width:900px) { --icon-width:300px; .hero-title { h1 { font-size:var(--fontSizeH2); } h3 { font-size:var(--fontSizeH4); } } } @container app-container (max-width:700px) { flex-direction:column-reverse; --icon-width:100px; .hero-title { margin-right:auto; margin-left:auto; text-align:center; } .img-con { margin-bottom:var(--gutter); max-width:calc(100% - var(--gutter) - var(--gutter)); margin-left:auto; margin-right:auto; } } } }}.site-container { container-name:site-container; container-type:inline-size; display:flex; flex-direction:column; min-height:100vh; .header-container { flex:0 0 auto; position:sticky; z-index:100; top:0; } .notification-banner-con { font-size:var(--fontSizeSmall); text-align:center; padding:var(--gutter-half); background-color:var(--brandColor); color:var(--white); a { color:var(--white); text-decoration:underline; } } .app-container { flex:1 1 auto; container-name:app-container; container-type:inline-size; + .footer-container { --footerFontSize:var(--fontSizeH4); flex:0 0 auto; background:var(--fontColor); text-align:center; padding:var(--gutter) 0px; opacity:1; .copywrite { margin-top:var(--gutter); text-align:center; color:var(--white); font-size:var(--fontSizeSmall); display:block; text-decoration:none; } .footer-con { display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:space-around; flex-direction:row; .column { flex:1 1 1px; display:block; a { display:block; text-align:center; margin-bottom:1em; color:var(--white); font-size:var(--footerFontSize); text-decoration:none; } .footer-logo { font-size:var(--fontSizeH3); margin-bottom:var(--gutter-half); color:var(--white); > span { font-weight:bold; } a { font-size:var(--fontSizeVerySmall); } } .btn-c2a { --height:calc(var(--gutter) * 2); font-size:var(--fontSize); line-height:var(--height) !important; height:var(--height) !important; padding:0px 3em !important; display:inline-block; } } @container site-container (max-width:700px) { flex-direction:column-reverse; --footerFontSize:var(--fontSizeSmall); .column { flex:1 1 auto; width:100%; } } } } }}.section-outer { --connectorPadding:calc(var(--gutter) * 4); --connectorPaddingTablet:calc(var(--gutter) * 3); --connectorPaddingMobile:calc(var(--gutter) * 2); padding-top:var(--connectorPadding); padding-bottom:var(--connectorPadding); @container app-container (max-width:900px) { padding-top:var(--connectorPaddingTablet); padding-bottom:var(--connectorPaddingTablet); } @container app-container (max-width:700px) { padding-top:var(--connectorPaddingMobile); padding-bottom:var(--connectorPaddingMobile); } &.size-narrow { .section-inner{ --pageMaxWidth:950px; } } &.size-small { .section-inner{ --pageMaxWidth:750px; } } &:nth-child(2n) { background-color:var(--accentBackgroundColor); } > .section-title { display:inline-block; line-height:1.5em; position:relative; left:50%; transform:translateX(-50%); margin-right:auto; text-align:center; margin-bottom:var(--gutter-double) !important; border-bottom:2px var(--brandColor) solid; padding-bottom:var(--gutter); font-size:var(--fontSizeH2); } > .section-sub-title { display:block; line-height:1.5em; text-align:center; margin-bottom:var(--gutter-double) !important; font-size:var(--fontSizeH3); color:var(--gray); } .section-inner { }}.chart-graphic-con{ --axisWidth:2px; --funnelHeight:calc(var(--gutter) / 3); --funnelWidth:50%; position:relative; width:100%; height:400px; top:0; .chart-piece{ position:absolute; } .bars-con{ display:flex; justify-content:space-between; flex-wrap:nowrap; flex-direction:row; align-items:flex-end; width:100%; position:absolute; height:80%; bottom:0; .bar{ flex:1 1 20%; margin-left:var(--gutter-half); margin-right:var(--gutter-half); background-color:var(--bodyBackgroundColor); border:1px var(--fontColor) solid; position:relative; background-color:rgba(0, 0, 0, 0.01); transition:all 0.2s ease-in-out; &.hit-by-ball{ background-color:var(--brandColor); } &:nth-child(1){ height:5%; } &:nth-child(2){ height:10%; } &:nth-child(3){ height:32%; } &:nth-child(4){ height:38%; } &:nth-child(5), &.bar-40{ height:40%; } &:nth-child(6), &.bar-60{ height:60%; } &:nth-child(7){ height:71%; } &:nth-child(8){ height:88%; } &:nth-child(9){ height:96%; } &:nth-child(10), &.bar-100{ height:100%; } } } .x-axis{ height:var(--axisWidth); background-color:var(--fontColor); bottom:0; left:0; right:0; }}form, fieldset, .fieldset { container-name:form; container-type:inline-size; border:none; margin:0px 0px var(--gutter); padding:0px; max-width:100%; width:100%; &.has-side-bar { } .buttons { padding-top:var(--gutter); margin-top:var(--gutter); border-top:1px var(--brand-color) solid; } &.highlight-optional-elements dl:not([required]):not(.content-type-heading), &.highlight-required-elements dl[required]:not(.content-type-heading) { dt { .form-label { &:after { margin-left:1em; line-height:1; padding:2px; text-transform:uppercase; border:1px transparent solid; font-size:var(--fontSizeVerySmall); border-radius:3px; vertical-align:middle; display:inline-block; visibility:visible; } } } } &.highlight-optional-elements { dl:not([required]):not(.content-type-heading) { dt .form-label:after{ content:'optional'; color:var(--optionalColor); border-color:var(--optionalColor); } } } &.highlight-required-elements { dl[required]:not(.content-type-heading) { dt .form-label:after{ content:'required'; color:var(--compulsoryColor); border-color:var(--compulsoryColor); } } } .form-inner { display:flex; flex-wrap:nowrap; > .elements-con { order:1; flex:1 1 auto; } > .form-side-bar { margin-left:var(--gutter); padding-left:var(--gutter); border-left:1px var(--brand-color) solid; order:2; flex:0 0 30%; min-width:250px; } @container form (max-width:600px) { flex-direction:column; > .elements-con { flex:1 1 100%; } > .form-side-bar { border-left:none; padding-left:0px; margin-left:0px; flex:1 1 100%; } } } .form-side-bar { .side-bar-title { margin-top:0px; } } /*Grid mode makes sure that all columns are the same width, so that anything missing just leaves an empty space*/ .form-group { margin-bottom:var(--gutter); display:flex; flex-wrap:wrap; justify-content:flex-start; container-name:form-group; container-type:inline-size; > dl { margin-bottom:0px; &:not(:last-child){ margin-right:var(--gutter); } flex:1 1 1px; @container form-group (max-width:500px){ &:not(:last-child){ margin-bottom:var(--gutter); } margin-right:0px !important; flex:1 1 100%; } } } dl { margin-bottom:var(--gutter); margin-top:0px; &.display-type-auto { dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:auto; @container form (max-width:700px)) { width:100%; } } } } &.display-type-fill { dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:100% } } } &.display-type-grouped { margin-bottom:0px; dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:100% } } } &.content-type-other { dd { line-height:var(--lineHeight); } } &.content-type-heading { margin-top:var(--gutter); margin-bottom:0px; dt { .form-label-con { .form-label { font-weight:bold; font-size:var(--fontSizeH4); } } } dd { display:none; } } } dt { .form-label-con { display:flex; flex-wrap:nowrap; .form-label { flex:1 1 auto; padding:0px; display:block; margin-bottom:var(--gutter) / 4; @container form (max-width:700px) { overflow:hidden; white-space:nowrap; } text-transform:var(--textTransformFormLabels); font-size:var(--fontSizeFormLabels); } .actions { flex:0 0 auto; font-size:var(--fontSizeSmall); /*.hide-in-print-view();*/ .icon, a, button { font-size:var(--fontSizeFormLabels); line-height:1.5em; min-width:0px; border:none; height:auto; color:var(--primaryButtonBackgroundColor); background-color:transparent; padding:0px; margin-left:var(--gutter); &:after, &:hover:after, &:focus:after { bottom:-1px; } } } } .form-desc { display:block; text-transform:none; font-size:var(--fontSizeSmall); font-weight:normal; margin-bottom:var(--gutter); line-height:var(--lineHeight); } } dd { padding:0px; margin:0px; line-height:var(--inputHeight); &.inline-elements { select, .chk, .rad, input[type="text"] { display:inline-block; margin-right:var(--gutter); width:auto; } } &.text-only { line-height:var(--lineHeight); } }}.ellipsis{ text-overflow:ellipsis; overflow:hidden; width:auto; max-width:100%; white-space:nowrap;}.clickable { transition:opacity 0.2s ease-in-out; &:hover { cursor:pointer; opacity:0.5; }}.flex-justify-space-between { --flexSpaceBetweenItems:var(--gutter); margin-left:calc(var(--flexSpaceBetweenItems) / 2 * -1); margin-right:calc(var(--flexSpaceBetweenItems) / 2 * -1); display:flex; flex-wrap:nowrap; justify-content:space-between; > * { margin-left:calc(var(--flexSpaceBetweenItems) / 2); margin-right:calc(var(--flexSpaceBetweenItems) / 2); }}.drop-shadow{ --level:1; --distance:calc(4px * var(--level)); --spread:calc(20px * var(--level)); --dense:calc(5px * var(--level)); box-shadow:var(--distance) var(--distance) var(--spread) var(--dense) var(--shadowColor);}.icon{ font-size:var(--fontSizeSmall); &:before { visibility:visible; } &.tick { &:before{ content:'\2713'; } } &.cross { &:before{ content:'\2715'; } }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/x.css_False_HTML_32603041946 4 Mar 21:58:28Z */