/*-------------------------------------------------------*/
/*---OOH ABOUTCOMMON AND OOTSSUPPORTING PAGESERVICES - 1718-1103-20222024---*/
/*-----------------------------------------------------*/
.hack-remove-p > p:first-child,
.hack-remove-p > p:last-child { display:none; border:1px solid red#main-content { overflow: hidden;}
/*---INTRODUCTION---*/
#introduction h1 { margin-bottom:2.5rem;}
#introduction p { margin-bottom:0;}
#introduction img { width: 100%; max-width: 225px; height: auto;}
@media screen and (maxmin-width: 769px) {
#introduction .img-mobile { max-width: 180px320px;}
}
.remove-on-mobile { display:none !important;}
}
@media screen and (max-width: 1200px) {
.not-d-block-mobile { display:inline !important;}
}
/*hack - remove empty p from confluence*/
#introduction p:first-child ,#introduction p:last-child { display:none; border:1px solid red;}
/*---INTRODUCTIONCOMMON SERVICES---*/
#introduction#common-services h1 { margin-bottom:2.5rem;}
#introduction p { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#introduction p:first-child ,#introduction p:last-child { display:none; border:1px solid red;}
/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { padding-top:0;}
#technical-documentation .container > p:last-child { display:none; border:1px solid red;}
#technical-documentation .card-grid small { color: #5D24A4;}
#technical-documentation .card-grid-footer { text-align: right;}
#technical-documentation .card-grid-footer p:first-child { margin-bottom:1.5rem;}
.technical-documentation-cta { margin-bottom:0 !important;}
@media screen and (min-width: 769px) {
#technical-documentation .card-grid-body p:last-child { margin-bottom: 0;}
.technical-documentation-cta { margin-top:2.5rem !important;}
}
/*---SERVICES---*/
#services { background: #00284A;}
#services h2, #services h3, #services p { color: white;}
#services .card-grid { padding: 0; background: transparent;}
#services .col-separator-before:before,
#services .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}
#services .opacity-75 { opacity: 0.75;}
#services .opacity-50 { opacity: 0.50;}
#services .badge { margin-bottom:0.5rem; color: #995E00; background: #FFEECC;}
/*HACKbackground: rgb(243,244,247);
background: linear-gradient(180deg, rgba(243,244,247,1) 85%, rgba(251,252,255,1) 85%, rgba(251,252,255,1) 100%);}
#common-services h2 { margin-bottom:2.5rem;}
.common-services-card { display: flex; flex-direction: column; gap: 24px; padding: 32px 40px 40px;}
.common-services-card-bg { position: absolute; top: 0; right: 0; width: 100%; }
.common-services-card .card-grid-custom-illu { display: flex; width: 100%; justify-content: end; align-items: center; min-height: 128px;}
.common-services-card .card-grid-custom-illu img { position: relative; top: -21px; width: 100%; max-width: 120px; height: auto;}
.common-services-card .card-grid-custom-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative;}
.common-services-card h3 { margin-bottom: 12px;}
/*to do put in the main CSS*/
.common-services-card .card-grid-footer .card-grid-footer-btns { display: inline-flex; flex-direction: row; gap:12px;}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
.common-services-card .card-grid-footer .card-grid-footer-btns {flex-direction: column;}
}
.wiki-content a.btn { justify-content: flex-start; align-items: left;}
.wiki-content a.btn span[class^="ico-"] { flex-shrink: 0;}
/**/
/*hack - remove empty p from Confluenceconfluence*/
#services.common-services-cards .col-4 > p:first-child, .common-services-cards .col-4 > p:last-child { border:1px solid greenred; display: none;}
@media screen and (min-width: 769px) {
#services { padding-bottom:6rem;}
#services .card-grid-body p:last-child { margin-bottom:0;}
}
/*---SUPPORTING SERVICES---*/
#supporting-services {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/615481586/bg-illu-sigle-supporting-services.svg");
background-position: bottom right;
background-repeat: no-repeat;
}
#supporting-services .cols:last-child { margin-top:-3rem;}
#supporting-services h2 { margin-bottom:2.5rem;}
#supporting-services hr { margin:2rem 0 3rem 0; border:none; border-top:1px solid #E3E6EB; height: 1px;}
/*---TESTING SERVICES---*/
#testing-services h2 { margin-bottom:2.5rem;}
#testing-services .col-7 { position: relative; z-index: 2;}
#testing-services .col-4 { position: relative;}
#testing-services .col-4 p { margin-bottom:0;}
#testing-services .bg { z-index: 1; position: absolute; top:-50px; left: 30px;}
#testing-services .illu { z-index: 2; position: relative; width: 100%; max-width: 200px; height: auto;}
@media screen and (max-width: 768px) {
#testing-services .col-7 { margin-top: -2.5rem;}
}
@media screen and (min-width: 769px) {
.supporting#testing-services-container { display: flex; justify-content: space-between;padding-top:0;}
.supporting#testing-services-container p:first-child .col-4 { widthorder: 70%2;}
.supporting#testing-services-container p:last-child .col-7 { widthorder: 30%; text-align: right;1;}
.supporting#testing-services-container .btnillu { marginmax-leftwidth:1rem 270px;}
}
/*---SERVICESUPPORTING DESKSERVICES---*/
#service#supporting-desk .service-desk-cta {services h2 { margin-topbottom: 2.5rem;}
#supporting-services .supporting-services-cta { margin-bottom:0;} | 