...
| CSS Stylesheet |
|---|
#content .rb-option { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
#content .rb-option a { text-decoration: underline; color: #842DB5; font-weight: 600; }
#content .rb-option a:hover { text-decoration: none; }
.section.introduction { padding-top: 100px; padding-bottom: 80px; }
.section.introduction p { margin-bottom: 0; }
#content .mail-box { display: inline-flex!important; gap: 5px; }
#content .mail-box > span:last-child { margin-top: 0.2rem; }
#content .coming-soon { display: inline-flex; align-items: center; gap: 4px; color: #FFA800; font-size: 12px; font-family: var(--font-semi-bold); font-weight: 600; line-height: 12px; }
#main #content.page { overflow: visible !important; }
#main-content > p { margin-bottom: 0; }
.onboarding-main-sec { margin-bottom: -2rem; padding-top: 0; }
.onboarding-main-sec .container { margin: unset; }
.onboarding-main-sec li { list-style: none; }
.onboarding-main-sec p, .onboarding-main-sec ul { margin-bottom: 0; }
.main-wrapper { display: flex; gap: 20px; }
.main-wrapper .side-nav-sec { width: 410px; padding: 0; }
.main-wrapper .side-nav-sec .side-card { position: sticky; top: 0; width: 410px; padding: 40px 40px 40px 40px; display: flex; flex-direction: column; align-items: flex-end; border-radius: 0px 40px 40px 0px; background: #00284A; }
/* ---- */
.side-card > .side-card-info:nth-child(3) { margin-bottom: 0; }
.side-card > .side-card-info:nth-child(5) { margin-top: 8px; }
.side-card > .side-card-info:last-child { margin-bottom: 0; }
/* ---- */
.side-card ul { position: relative; left: 16px; padding: 0; }
.side-card ul li { padding: 12px 0px 12px 40px; max-width: 227px; cursor: pointer; color: rgba(255, 255, 255, 0.75);}
.side-card ul li.active { color: #EC8FFF; opacity: 1; }
.side-card-info { display: flex; width: 225px; padding: 0px; align-items: center; gap: 12px; align-self: end; margin-bottom: 20px; }
.side-card-info img { padding: 8px; }
.side-card-info img.acton { border-radius: 40px; background: rgba(255, 255, 255, 0.25); }
#content .side-card-info p a { color: #FFF; font-size: 18px; font-stylefamily: normalvar(--font-regular); font-weight: 400; line-height: 18px; text-decoration: none; }
#content .side-card-info p.lead a { font-family: var(--font-semi-bold); font-weight: 600; }
/* MAIN */
.diagram-visual { width: 100%; }
.diagram-visual_mobile { max-height: 580px; width: 100%; max-width: 380px; }
.diagram-visual_mobile_ { max-height: 780px; }
.section-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
#main-wrapper .step-label { color: #5D24A4; font-size: 12px; font-stylefamily: normalvar(--font-semi-bold); font-weight: 600; line-height: 12px; letter-spacing: 4.8px; text-transform: uppercase; }
.section-info > div { display: flex; gap: 20px; }
.section-info > div > h3 { margin-bottom: 0; }
.section-label { display: flex; padding: 4px 12px 4px 8px; align-items: center; gap: 4px; border-radius: 4px; font-size: 12px; font-stylefamily: normalvar(--font-semi-bold); font-weight: 600; line-height: 12px; width: fit-content; }
.section-label.required { background: #FFDADA; }
.section-label.required p { color: #C4001F; }
.section-label.strongly-encouraged { background: #F2E5F7; }
.section-label.strongly-encouraged p { color: #842DB5; }
.section-label.voluntary { background: #D0F3F1; }
.section-label.voluntary p { color: #00786F; }
/*--- accordion ---- */
.card-wrapper { margin: 80px 0px; }
.collapse-item { padding: 0px 40px 0px 0px; margin:0; }
#main-wrapper .collapse-panel { background: unset; height: unset; padding: 0; -webkit-animation: unset; border-top: unset; }
#main-wrapper .collapse { display: flex; flex-direction: column; gap: 24px; }
.collapse button { box-shadow: unset; border-radius: unset!important; background: none!important; border-bottom: 1px solid #BBB6C2; padding: 24px 0; }
.collapse button:after { content: none; }
.collapse-icon { right: 11px; border-top: none!important; border-left: none!important; border: 2px solid #001832; width: 0.7rem!important; height: 0.7rem; }
.collapse-panel { box-shadow: unset; padding: 20px 0; height: 500px; }
.collapse-title { padding-left: 40px; }
/* --------------- */
.collapse-item[aria-expanded="true"] { background: #F3F4F7; border-radius: 20px; padding-top: 16px; margin-top: 16px; padding-left: 40px; }
.collapse-item[aria-expanded="true"] .collapse-title { padding-left: 0px; }
.collapse > .collapse-item[aria-expanded="true"]:first-child { margin-top: 16px; }
.collapse button[aria-expanded="true"] { border-bottom: unset!important; }
/* Accordion Item */
/* BTB LINK */
/*.collapse-panel a.btn.primary span.ico-external { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-white.svg"); margin-left: 8px; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: 20px }*/
#main-wrapper .collapse-panel a.btn.primary span { color: white; text-decoration-color: white; }
#main-wrapper .collapse-panel a.btn.primary:hover { text-decoration-color: white; }
#main-wrapper a.btn { color: #3D597A!important; }
#main-wrapper a.btn.ghost .ico-external { margin-left: 8px; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: 20px !important; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary-bis.svg); }
.collapse-panel .section-title { color: #001832!important; font-size: 18px; line-height: 24px; margin-bottom: 16px; }
.collapse-panel .section-description { display: flex; gap: 8px; align-items: center; margin-bottom: 32px; }
#main-wrapper .collapse-panel .section-description > p { color: #3D597A!important; font-family: var(--font-semi-bold); font-weight: 600; line-height: 24px; margin-bottom: 0; }
.collapse-panel .section-wrapper { padding: 40px 0; border-bottom: 1px solid #E3E6EB; }
.collapse-panel > .section-wrapper:last-child { border-bottom: 0; }
.collapse-panel .section-information p { margin-bottom: 12px; color: #3D597A!important; }
#content .mg-12t { margin-top: 12px; }
#content .mg-0b { margin-bottom: 0px; }
#content .mg-8b { margin-bottom: 8px; }
#content .mg-16b { margin-bottom: 16px; }
#content .mg-24b { margin-bottom: 24px; }
#content .mg-32b { margin-bottom: 32px; }
#main-wrapper .collapse-panel .section-description > .desc-label { border-radius: 40px; font-size: 12px; font-stylefamily: normalvar(--font-semi-bold); font-weight: 600; line-height: 12px; padding: 8px 12px; }
#main-wrapper .collapse-panel .section-description > .desc-label.once-only { background: #F2E5F7; color: #842DB5!important; }
#main-wrapper .collapse-panel .section-description > .desc-label.eidas { background: #BFD0E4; color: #004494; }
#main-wrapper .collapse-panel .section-description > .desc-label.member-state { background: #FEC; color: #995E00!important; }
.collapse-panel .more-info { display: flex; align-items: center; }
.collapse-panel > .section-wrapper:first-child { padding-top: 16px; }
.collapse-panel .arrow-listed { display: flex; gap: 12px; margin-bottom: 24px; }
.collapse-panel .r-arr { display: flex; width: 24px; height: 24px; padding: 8px; justify-content: center; align-items: center; gap: 10px; border-radius: 40px; background: #E3E6EB; }
.collapse-panel .section-information { display: flex; flex-direction: column; }
.collapse-panel .section-information > .arrow-listed:last-child { margin-bottom: 0; }
.collapse-panel .section-information p { margin-bottom: 16px; }
.collapse-panel .section-information li { list-style: disc!important; color: #3D597A; }
.section-wrapper .link-cta span.ico-external { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary.svg"); margin-left: 8px; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: 20px; position: relative; top: 5px; }
.section-more { display: flex; padding: 24px; flex-direction: column; align-items: flex-start; gap: 24px; border-radius: 12px; background:#E3E6EB; margin-top: 28px; }
.section-more p { color: #3D597A!important; }
.collapse-panel .section-wrapper .section-more a { margin-top: 0; }
.section-more > div { display: flex; gap: 12px; }
.info-card { display: flex; gap: 8px; padding: 16px 24px; border-radius: 12px; background: #F3F4F7; margin-top: 20px; max-width: 997px; }
.info-card > div:first-child { display: flex; align-items: flex-start; justify-content: flex-start; margin-top: 0.2rem; }
.qa-section { position: relative; background: url("/digital-building-blocks/sites/download/attachments/713524841/bg-cover-section.svg"); background-repeat: no-repeat; background-position: -81px 7px; }
.qa-section .cols { display: flex; gap: 80px; z-index: 3; position: relative; }
.qa-section .col-3 img { width: 100%; max-width: 300px; } |