Versions Compared

Old Version 441

changes.mady.by.user Virginie MANGELINCK

Saved on

compared with

New Version 442

changes.mady.by.user Virginie MANGELINCK

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
idslider-highlight
classsection

News Slider
filterStartDate
displayTime4000
newsTextexcerpt
colorwhite
showCreatedDatefalse
showStatsfalse
linkfalse
showDatefalse
navigationfalse
showErrortrue
maxResults4
contentTypepage
imageLabels
showCreatorfalse
bulletstrue
height
buttonsColor#0049B0
filterByDatefalse
openLinksInNewWindowfalse
spacesSelected@self
showSpacefalse
showAuthorfalse
timeFrame
filterEndDate
labelsooh-slider-highlight
sortOrderlastmodified desc
width100%
cql

Div
idarchitectural-designvideo
classsection
<div
Html-bobswiftdiv
classcontainer
Div
classcols
Div
Html-bobswift
<h2>Video</h2>
<p
="container"> <div class="cols"> <div
 class="
col
past-insights-
8"> <h2>Introduction
p">Watch this video to learn
the
more about Once-Only
Technical System (OOTS)
.</
h2>
p>
<p
<div class="
mb
video-container-
0
iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fuxJnsrf6BCw" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
Div
idarchitectural-design
classsection
Html-bobswift
<div class="container">

<div class="cols">
<div class="col-8">
<h2>Introduction to the Once-Only Technical System (OOTS)</h2>
<p class="mb-0">The Once-Only Technical System >The Once-Only Technical System is a technical framework for data sharing. As of the end of 2023, citizens and businesses will be able to request official documents (known as “evidence”) to complete administrative procedures allowing people to study, work, live and retire in other EU countries in 7 simple steps. The decentralised architecture connects public authorities, so they can exchange evidence at the citizen's or business' request.</p>
</div>
</div>

<div class="cols">
<div class="col-8"> 
<p>Discover the 21 procedures covered by the SDG Regulation in the scope of Once-Only Technical System and how EU citizens and businesses can benefit from Once-Only Technical System.</p> 
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/About+OOTS"><span>Discover the Once-Only Technical System overview</span><span class="ico-cta-forward"></span></a></p> 
</div>
</div>

<div class="cols gap-lg">
<div class="col-4">
<p><img aria-hidden="true" alt="" class="architectural-design-illu" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-oots-user-journey.png"></p>
<h3 class="h5">Once-Only Technical System - user journey for cross-border procedures</h3>
<p class="opacity-75">The user-journey refers to the steps anyone, a citizen or business, must take when using the Once-Only Technical System with a mind to the overall experience the user has.</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+1+Authentication"><span>Discover the OOTS user journey</span><span class="ico-cta-forward"></span></a></p>  
</div>

<div class="col-4 col-separator-before">
<p><img aria-hidden="true" alt="" class="architectural-design-illu" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-oots-architecture.png"></p> 
<h3 class="h5">Once-Only Technical System architecture</h3>
<p class="opacity-75">The Once-Only Technical System architecture adopts a decentralised approach, integrating and connecting systems through an interoperability layer using reusable "Building Blocks".</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Architecture"><span>Learn about the OOTS architecture</span><span class="ico-cta-forward"></span></a></p>  
</div>
</div>

</div>

...

CSS Stylesheet
/*---------------------------------*/
/*---OOH HOME PAGE - 03-11-2022---*/
/*-------------------------------*/

.mb-0 { margin-bottom: 0;}

@media screen and (max-width: 769px) {
  .img-mobile { width: 180px;}
}  

@media screen and (max-width: 1200px) {
  .not-d-block-mobile  { display:inline !important;}
}    

/*---INTRODUCTION---*/
#introduction .introduction-text { z-index: 3; position: relative;}
#introduction h1 { margin-bottom:2.5rem;}
#introduction p.lead { margin-bottom:0;}  

#introduction .introduction-illu { position: relative;}
.introduction-illu-img { z-index: 2; position: relative; width: 180px;}
.introduction-illu p { margin-bottom:0;}  

@media screen and (max-width: 768px) {
  #introduction { overflow:visible;}
  .introduction-illu-bg { display:none;}
}

@media screen and (min-width: 769px) {
  #introduction { overflow:hidden;}
  .introduction-illu-img { width: 100%; max-width: 390px; height: auto;}
  .introduction-illu-bg { z-index: 1; position:absolute; top: -8%; left:-8%;}
}

/*---ARCHITECTURAL DESIGN---*/
#architectural-design { padding-bottom:16rem; background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}     
#architectural-design .cols:last-child p:last-child { margin-bottom:0;}  
/*hack - remove empty p from confluence*/
#architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}
#architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;}
#architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;}
#architectural-design .technical-system_steps li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px;  color: #3D597A; font-size: 12px;}
#architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);} 
#architectural-design .diagram { margin-top:2.5rem;}

.architectural-design-illu { width: 100px;}

/*
@media screen and (max-width: 768px) {
   #architectural-design .technical-system_steps.mobile { margin-top:-2rem;}  
}
*/        

/*---LATEST NEWS---*/
#latest-news .container .cols > div > h2 { margin-bottom: 2.5rem;}

/*hack margin top 1rem + 1.5rem natural space from the newsteaser = 2.5rem spacing*/
.news-teaser-deprecated ~ p { margin-top:1rem; margin-bottom: 0; text-align:center;}   

/*hack - remove empty p from confluence*/
#latest-news .container > p:first-child, #latest-news .container > p:last-child { border:1px solid red;}  

#latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
#latest-news .news-teaser-root a img {  border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;}
#latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;}
#latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;}
#latest-news .news-teaser-root a:hover { text-decoration: underline;}
#latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; }
#latest-news .news-teaser-root > div > div:last-child button { margin-top:1rem; color: #001832 !important; background-color: transparent; border: 1px solid #B7C2CF; border-radius: 6px;}
#latest-news .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;}

@media screen and (max-width: 768px) {
#latest-news .news-teaser-root > div > div > div  { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
#latest-news .news-teaser-root .aui-group { min-height: auto !important;}
}     

/*---GUIDANCE BOX---*/
#guidance-box { position:relative; margin-top:-13rem; padding-top:0; padding-bottom:0;}

#guidance-box .guidance-box { padding:1.5rem; background-color: #00284A; border-radius:20px;} 
#guidance-box .container .cols { margin-bottom:-1rem;}
#guidance-box .guidance-box-col-illu { margin-bottom:1rem;}
#guidance-box .guidance-box-col-illu img { width: 82px; height:auto;}  

@media screen and (min-width: 769px) {
 #guidance-box { margin-top:-12rem;}  
 #guidance-box .guidance-box { padding:2.5rem;}     
 #guidance-box .guidance-box-cols { display: flex; align-items: center;}
 #guidance-box .guidance-box-col-illu { margin-bottom:0; padding:0 3rem 0 0} 
}  

@media screen and (min-width: 1366px) {
 #guidance-box .guidance-box { padding:5rem;}     
}    

#guidance-box h3, #guidance-box p { color: white;}
#guidance-box p.p-opacity { opacity: 0.75}
#guidance-box p:last-of-type { margin-bottom:0;}

/*hack - remove empty p from confluence*/
#guidance-box .container > p:first-child, #guidance-box .container > p:last-child { display: none; border:1px solid green;} 

/*---DOCUMENTATION AND SERVICES---*/ 
#documentation-services { background-color: #F3F4F7; /*background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-documentation-services.svg") no-repeat 100% 10%*/}  

#documentation-services .common-supporting-services h2 { margin-bottom:2.5rem;}
 
#documentation-services .technical-design-documentation { padding-top: 2.5rem; margin-bottom:-1rem;}
#documentation-services .technical-design-documentation h2 { margin-bottom:2.5rem;}
.technical-design-documentation-illu img { width: 180px;}

@media only screen and (max-width: 768px) {
  #documentation-services .cols:nth-child(2) { display: flex; flex-direction: column-reverse;}
}

@media screen and (min-width: 769px) {
  .technical-design-documentation-illu img { width: 100%; max-width: 270px; height: auto;}
}  

#documentation-services .cols p:last-child { margin-bottom:0;} 
/*hack - remove empty p from confluence*/
#documentation-services .container > p:first-child, #documentation-services .container > p:last-child { display: none; border:1px solid green;} 

@media screen and (min-width: 769px) {
    #documentation-services .technical-design-documentation div:first-child { padding: 1.5rem;} 
}

/*---COLLABORATE WITH US---*/
#collaborate-with-us { position:relative; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { position: relative; padding: 3rem 3rem 9rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
}

@media screen and (min-width: 769px) {
    #collaborate-with-us .container { padding: 6rem 3rem 6rem 0;} 
}  

.collaborate-with-us-img { position: absolute; bottom: 0; right: 1.5rem; width: 100%; max-width: 200px; height: auto;}

@media screen and (min-width: 769px) { 
  .collaborate-with-us-img { max-width: 320px;}
} 
#collaborate-with-us h2 { margin-bottom:2.5rem;}
#collaborate-with-us .col-separator-before:before, 
#collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}  
#collaborate-with-us .opacity-75 { color: rgba(255, 255, 255, 0.75);} 
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}
#collaborate-with-us .p-badge {} 
#collaborate-with-us .badge { margin-bottom:0; color: #995E00; background: #FFEECC;}
#collaborate-with-us a, #collaborate-with-us .restricted-space-link { color: #EC8FFF;}
.collaborate-with-us-list-link { margin:0; padding: 0;}
.collaborate-with-us-list-link li { margin-bottom: 1rem;}
.collaborate-with-us-list-link li:last-child { margin-bottom: 0;}  

/*hack - remove empty p from confluence*/
#collaborate-with-us > p:first-child,  #collaborate-with-us > p:last-child { display:none;}     

/*---SERVICE DESK---*/
#service-desk { position:relative;}  
#service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;}
.service-desk-p-img { margin-bottom:0;}
.service-desk-p-img img { width: 100%; max-width: 200px; height: auto;}  

/*---LATEST NEWS DEPRECATED BACKUP---*/
/*hack - remove empty p from confluence*/
.news-teaser-deprecated > p:first-child, .news-teaser-deprecated > p:last-child { display:none; border:1px solid green;}

.news-teaser-deprecated { padding-top:0; padding-bottom:0;}
.news-teaser-deprecated .newsteaser-entry { display: inline-block; margin-top:0.5rem; box-shadow:none;}
.news-teaser-deprecated .newsteaser-entry .aui-group {  display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
/*LINK*/
.news-teaser-deprecated .newsteaser-entry a,
.news-teaser-deprecated .newsteaser-entry a:link { display:inline-block; background-color: transparent !important; border:none !important; }
.news-teaser-deprecated .newsteaser-entry .news-image a img {  border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.news-teaser-deprecated .newsteaser-entry .news-metadata { font-size:14px !important; line-height: 20px; color: #5E748E !important;}
.news-teaser-deprecated .newsteaser-entry h2 a {  font-size: 20px; line-height: 24px; text-transform: initial; text-decoration:none; color: #001832 !important;}
.news-teaser-deprecated .newsteaser-entry h2 a:hover  { color: #842DB5 !important; text-decoration: underline !important;}
.news-teaser-deprecated .newsteaser-entry p a { font-weight: normal; color: inherit !important;}
.news-teaser-deprecated .newsteaser-entry p a:hover { text-decoration: underline !important;}
/*CONTENT*/
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child { padding: 0;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { padding: 1rem 2.5rem 0 2.5rem;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p { margin-bottom: 0;}

@media screen and (max-width: 768px) {
 .news-teaser-deprecated .newsteaser-entry { position:relative !important; top: 0 !important; left: 0 !important; float: none !important;; display: block !important; width: 100% !important;}
} 

@media screen and (min-width: 769px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { display:flex !important; flex-direction: column !important; justify-content: space-between !important;  padding: 1rem 2.5rem 1rem 2.5rem; min-height: 260px;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p:last-child { display: none; }
}

@media screen and (min-width: 1366px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { min-height: 200px;}
}  

/*---SLIDER HIGHLIGHT---*/
#slider-highlight { padding:0; background-color: #00284A;}
.slider-highlight-bg { padding:6px 1.5rem 36px 1.5rem;}
#slider-highlight > p:first-child, #slider-highlight > p:last-child { display: none; border:1px solid red;}
#slider-highlight .container .cols { margin-top: 0; margin-bottom: 0;}
#slider-highlight .container .cols > div > p:first-child, #slider-highlight .container .cols > div > p:last-child { display: none;}  

#slider-highlight .cols .slider-highlight-content > p:first-child, #slider-highlight .cols .slider-highlight-content > p:last-child{ display: none; border:1px solid green;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:1rem; font-size: 20px; line-height: 24px; color: white;} 

@media screen and (min-width: 1280px) {
  .slider-highlight-bg { padding:36px 1.5rem 60px 1.5rem;}
  #slider-highlight .cols .slider-highlight-content { display: flex; gap:40px; justify-content: space-between;}
  #slider-highlight .cols .slider-highlight-content .slider-highlight-content-left { display: flex; gap:12px; align-items:center; width:70%;}
  #slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:0; margin-bottom:0; }
}

/*MACRO SLIDER*/
#slider-highlight .news-slider-root { width: 100%;}
#slider-highlight .news-slider-root > div { padding:0;}
#slider-highlight .news-slider-root div div { background-color: transparent; box-shadow:none;}
#slider-highlight .aui-group .aui-item:first-child { display: none;}
#slider-highlight .aui-item { padding:0;}
/*heading*/
#slider-highlight h2:first-child, #slider-highlight h2:first-child +div { display: none;}
/*dots*/
#slider-highlight .flickity-page-dots { position:absolute; top:auto; bottom:20px; margin-bottom: 0; height:1rem; text-align: center !important;}
#slider-highlight .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #EC8FFF !important; border:1px solid #EC8FFF;}
#slider-highlight .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #EC8FFF !important; border:1px solid #EC8FFF; border-radius:10px;}
#slider-highlight .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}      

/*---PROJECTATHON---*/ 
#projectathon { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-projectathon.svg") no-repeat bottom left;}

#projectathon h2, #projectathon .p-spacing { margin-bottom:2.5rem;}

.card-upcoming-cols { margin-top: -1rem;}

.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
/*
.card-upcoming-col:nth-child(1) .card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;} margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
*/
/*
.card-upcoming-col:nth-child(12) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-0102.pngjpg"); background-size: cover; border-radius: 100% 0% 47%38% 53%62% / 0% 76%88% 24%12% 100% ;}
*/
/*
.card-upcoming-col:nth-child(21) .card-upcoming-body a { margin:-1rem 0 0 0-3rem; width: 115%140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-0203.jpgpng"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
*/
.card-upcoming-col:nth-child(1) -body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body ap { margin:-1rem 0 0 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% position:relative;}
.card-upcoming-body p.label { margin-bottom:12px; display: inline-block;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-bodyfooter h3 { margin-top:24px; fonttext-sizealign:20px; line-height:24px right;} 
 .card-upcoming-bodyfooter p.label { positiondisplay:relative inline;}  

.card-upcoming-body p.label { margin-bottom: padding: 8px 12px; font-size: 12px; displayline-height: inline-block12px; border-radius: 40px;}
.card-upcoming-body p:last-child { margin-bottom:0 .label.available-soon { color: #842DB5; background: #F2E5F7;}
.card-upcoming .label.past { color: #3D597A; background: #E3E6EB;}
.card-upcoming-date .label.upcoming { font-sizecolor: 14px !important#995E00; colorbackground: #5E748E !important#FFEECC;}

@media screen and (max-width: 991px) {
  .card-upcoming-footercol { margin-top:24px; text-align: right;} 
bottom: 1.5rem;}
}

@media screen and (min-width: 992px) {
  .card-upcoming-footercols .label { display: flex; width: inline 100%; gap:20px;}
  

.card-upcoming .label-col:nth-child(1) { paddingwidth: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;}
.card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;}
.card-upcoming .label.past { color: #3D597A; background: #E3E6EB;}
.card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;}

@media screen and (max-width: 991px) {
  .card-upcoming-col50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  /*.card-upcoming-col:nth-child(3) { width: 29%;}*/
  .card-upcoming-body { flex: 1 1 auto;}
}  

/*---MONITORING---*/
#monitoring { margin-top:-6rem; padding-top:9rem; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-monitoring.svg") no-repeat top right;}
#monitoring .cols { margin-bottom: 1.5rem0;}
}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  /*.card-upcoming-col:nth-child(3) { width: 29%;}*/
  .card-upcoming-body { flex: 1 1 auto;}
}  

/*---MONITORING---*/
#monitoring { margin-top:-6rem; padding-top:9rem#monitoring .cols > div {padding-top:0; padding-bottom:0;}
#monitoring h2, #monitoring h2 + p { margin-bottom:2.5rem;}

/*---MONITORING CARDS---*/
.card-monitoring { position: relative; display: flex; flex-direction: column; gap:24px; min-width: 0; height: 100% !important; padding:24px; background-color: white; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323677518598/bg-illumonitoring-sigle-monitoringcard.svg") no-repeat bottom topleft right;}
#monitoring .cols { margin-bottom: 0;}
#monitoring .cols > div {padding-top:0; padding-bottom:0;}
#monitoring h2, #monitoring h2 + p { margin-bottom:2.5rem;}

/*---MONITORING CARDS---*/
.card-monitoring { position: relative; display: flex; flex-direction: column; gap:24px; min-width: 0; height: 100% !important; padding:24px; background-color: white; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/677518598/bg-monitoring-card.svg") no-repeat bottom left white; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10)white; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10); border-radius: 16px; overflow: hidden;}

.card-monitoring-header h3 { position: relative; margin-bottom: 12px; font-size:20px; line-height:22px;}
.card-monitoring-header h3:after { content:""; position:absolute; bottom: -12px; left: 0; width: 44px; height: 2px; background-color: #5D24A4;}

.card-monitoring-body { display: flex; align-items: center; align-self: stretch; gap:20px;}
div.card-monitoring-body-number { display:flex; align-items:center; flex: 0 160px; padding:16px 24px; height:100px; color: #842DB5; background: #F2E5F7; border-radius: 16px; overflow}
div.card-monitoring-body-number-inner { width: hidden100%;}

div.card-monitoring-body-headernumber h3span { positiondisplay: relativeblock; margin-bottomwidth: 12px100%; fonttext-sizealign:20px; line-height:22px center;}
div.card-monitoring-body-headernumber h3span:afterfirst-child { content:""; position:absolute; bottom: -12px; left: 0; width: 44px; height: 2px; background-color: #5D24A4;}

font-size: 44px; line-height: 32px; font-weight: 700;}
div.card-monitoring-body-number span:last-child { font-size: 14px; line-height: 20px;}
div.card-monitoring-body-content { display: flex; align-items: center; align-self: stretch; gap:flex:1;}
div.card-monitoring-body-content p { margin-bottom: 0; font-size: 14px; line-height: 20px;}
div
.card-monitoring-body-numberfooter { display:flex; align-items:center; flex: 0 160px; padding:16px 24px; height:100px; color: #842DB5; background: #F2E5F7; border-radius: 16px;}
div.card-monitoring-body-number-innertext-align: right;}

@media screen and (max-width: 768px) {
  .card-monitoring-cols { margin-top: 1.5rem;}
}

@media screen and (max-width: 991px) {
  .card-monitoring-col { width: 100%;}
div  .card-monitoring-body-number spancol { display: block; width: 100%; text-align: center;}
div.card-monitoring-body-number span:first-child { font-size: 44px; line-height: 32px; font-weight: 700;}
divmargin-bottom: 1.5rem;}
}

@media screen and (min-width: 992px) {
  .card-monitoring-body-number span:last-child { font-size: 14px; line-height: cols { display: flex; width: 100%; gap:20px;}
div  .card-monitoring-body-contentcol { flexwidth:1 33%;}
div  .card-monitoring-body-content p { margin-bottomflex: 0; font-size: 14px; line-height: 20px;}

.card-monitoring-footer { text-align: right;}

@media screen and (max-width: 768px) {
  .card-monitoring-cols1 1 auto;}
}

/*---MONITORING CARDS---*/
.monitoring-cta { padding-top:2.5rem; text-align:center;}

/*---VIDEO---*/
#video {}
#video h2 { margin-topbottom: 12.5rem;}
}

@media screen and (max-width: 991px) {
  .card-monitoring-col { width: 100%;}
  .card-monitoring-col { margin-bottom: 1.5rem;}
}

@media screen and (min-width: 992px) {
  .card-monitoring-cols { display: flex; width: 100%; gap:20px;}
  .card-monitoring-col { width: 33%;}
  .card-monitoring-body { flex: 1 1 auto;}
}

/*---MONITORING CARDS---*/
.monitoring-cta { padding-top:2.5rem; text-align:center 
/*hack remove empty p from confluence*/
#video .container .cols:first-child p:first-child { display: none; border:1px solid red;}

.video-container-iframe { position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}