:root { --font: Inter; --alt-font: Poppins; --accent-color: #0029ff; --secondary-color: #000000; --link-color: #0029ff; --accent-highlight-color: #0025e6; --accent-highlight-background-color: #e5eaff; --accent-tinted-color-70: #b3bfff; --accent-tinted-color-80: #ccd4ff; --accent-tinted-color-90: #e6eaff; --accent-contrast-color: #fff; --accent-contrast-tinted-background-color: #b3b3b3; --accent-hover-color: #3354ff; --secondary-hover-color: #1a1a1a; --secondary-contrast-color: #fff; --link-hover-color: #667fff; } .company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/ps7xrropt8d9-AcademyLogo2025_white_8001.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;} :root{ /* --- PLATFORM --- */ /* Typography */ --typography-font-family: Poppins; --typography-font-weight: 400; /* Headings */ --typography-platform-heading-XL-size: 61px; --typography-platform-heading-XL-line-height: 72px; --typography-platform-heading-L-size: 44px; --typography-platform-heading-L-line-height: 48px; --typography-platform-heading-M-size: 32px; --typography-platform-heading-M-line-height: 40px; --typography-platform-heading-S-size: 24px; --typography-platform-heading-S-line-height: 32px; /* Paragraphs */ --typography-paragraph-font-size-M: 17px; --typography-paragraph-line-height: 22px; --typography-paragraph-font-size-S: 14px; /* new variant */ --typography-paragraph-font-size-XL: 18px; /* new variant */ /* Colors */ --color-brand-white: #FFFFFF; --color-brand-black: #000000; --color-brand-blue: #0029FF; --color-brand-green: #5CFE50; --color-paragraph-dark-grey: #666666; --color-background-default-grey: #F5F5F5; --color-background-hover-grey-lighter: #E5E5E5; --color-background-hover-grey-darker: #CBCBCB; /* Shapes */ --card-border-radius: 4px; --buttons-border-radius: 2px; --buttons-padding: 8px 32px; --card-title-XS-size: 18px; /* new variant */ /* --- COURSES --- */ /* Colors */ --color-background-blue: #E5E9FF; --color-background-light-red: #FFDDDD; --color-text-red: #8e0000; /* Borders */ --border-blue: 1px solid var(--color-brand-blue); --border-grey: 1px solid var(--color-background-default-grey); --border-red: 1px solid var(--color-text-red); /* Padding */ --snippets-spacing-S-vertical: 20px 0; --snippets-spacing-M-vertical: 40px 0; --snippets-spacing-L-vertical: 60px 0; } /* New logo in courses body.course.lesson .company-logo__container{ background-image: url("https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_lfill,h_150/v1/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/1vlen5q2ov40-Asset2_withBG.png"); background-repeat: no-repeat; background-size: contain; } body.course.lesson .company-logo__container img{ opacity: 0; } */ /*.header--student .company__beta-logo img { content: url ("https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_lfill,h_150/v1/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/k0epxfx6k6n3-WhiteAcademyHat_widerforsmallNavBar.png"); } */ .less-padding{ padding-top:10px !important; padding-bottom:10px !important; } .less-padding details { margin-left: 2em; } /*test on faq arrows */ .losfaqs details[open] h6::before { transform: rotate(90deg); color:#0029FF; font-size:1.2rem; } .losfaqs details h6::before { content: "\27A4"; display: inline-block; transform: rotate(0); transition: .40s transform ease; margin-right:.4rem; } .losfaqs details[open] summary ~ * { animation: sweepfaqs .3s ease-in-out forwards; } @keyframes sweepfaqs { 0% {opacity: 0; margin-left: -10px} 100% {opacity: 1; margin-left: 1.3rem} } .losfaqheader p.muted { font-size: 22px; font-weight: 700; line-height: 38px; font-family: var(--alt-font); } .losfaqs summary h6{ margin-left: 1rem; text-indent: -0.7rem; } /* .dashboard-account-tabs > .dashboard-account-tab:nth-of-type(2), .dashboard-account-tabs >.dashboard-account-tab:nth-of-type(6) { display: none; } .dashboard-account-tabs>.dashboard-account-tab:first-of-type { order: 1; } .dashboard-account-tabs > .dashboard-account-tab:nth-of-type(3) { order: 2; } .dashboard-account-tabs>.dashboard-account-tab:nth-of-type(4) { order: 4; } .dashboard-account-tabs>.dashboard-account-tab:nth-of-type(5) { order: 3; } */ /* #dashboard-header-dropdown a[href^="/learn/account"] { display: block !important; } #dashboard-header-dropdown a[href^="/learn/account"] { display: block !important; } #dashboard-header-dropdown a[href^="/learn/transcript"] { display: block !important; } #dashboard-header-dropdown a[href^="/learn/transcript"] { display: block !important; } */ #dashboard-header-dropdown>li:nth-of-type(3) a[href^=“/learn/transcript”] { display: none!important; } /* highlighting the active page */ .syllabus__topic.syllabus__topic--active a span.syllabus__topic--non-expandable-title-text{ font-weight:900; padding-right: 0.4em; border-left: 1px solid black; } .dashboard-access__title:after { content: "In Progress"; color: inherit; /* Match the color of the existing text */ font-size: inherit; /* Match the font size of the existing text */ } .dashboard-access__title { color: transparent; position: relative; } .dashboard-access__title:before { content: ""; position: absolute; background: white; width: 100%; height: 100%; z-index: 1; } /* remove certifications content from Learner activity widget -- HERE .dashboard-access-tabs .dashboard-access-tab--certifications { display: none; } */ /* adding translated in on catalog tiles */ /* https://d3i9g4671ronu3.cloudfront.net/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/wkl2kidrpxny-Earth_real_blue.svg https://d3i9g4671ronu3.cloudfront.net/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/fcaydjbmx1ag-image.png */ p.featured-content-item__authors::before { background: url(https://d3i9g4671ronu3.cloudfront.net/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/fcaydjbmx1ag-image.png) no-repeat; content: ''; display: inline-block; height: 25px; width: 25px; vertical-align: middle; margin-right: 5px; } p.featured-content-item__authors { margin-bottom: 1rem; } p.language-detail-page::before { background: url(https://d3i9g4671ronu3.cloudfront.net/course-uploads/f86bfb1e-f628-483b-9811-046e663bd680/fcaydjbmx1ag-image.png) no-repeat; content: ''; display: inline-block; height: 25px; width: 25px; vertical-align: middle; margin-right: 5px; } .course__detail__content div:last-child.row .tabs-content { padding-top: 32px!important; } /* authors (languages) on TT tiles */ @media only screen and (min-width: 40.063em) { .learning-path-detail-milestone-item .learning-path-detail-milestone-item__content-type, .learning-path-detail-milestone-item .learning-path-detail-milestone-item__content-type strong { font-weight: 400!important; color: #4b4444; font-size: .9rem!important; } } .catalog-filters__selections, .catalog-filters__sort { font-style: normal!important; } .catalog-filters__sort select#sort-options { padding-bottom: 0px!important; padding-top: 0px!important; height: 44px!important; } /* Video titles */ h1.article-content__header { font-size: 2.6em; line-height: 1.4em; padding-bottom: 16px; } /* NAVIGATION BAR */ .global-nav__container .nav.nav--global-links>a:hover{ text-decoration: underline; } /* NAVIGATION BAR - MOBILE DROPDOWN */ @media only screen and (max-width: 48em){ section.top-bar-section{ height: calc(100% - 80px)!important; z-index: 3!important; overflow: scroll; } .top-bar.expanded section.top-bar-section .has-dropdown>a:after { margin-left: 6px; transform: rotate(270deg); } .top-bar.expanded section.top-bar-section .has-dropdown.open>a:after { top: 5px!important; transform: rotate(180deg)!important; } } /* Language selector */ .txlive-langselector.txlive-langselector-bottomleft{ z-index: 1!important; } /* Hide SOURCE in videos */ div.article-content__info{ display: none!important; } /* Hide SHARE */ a .ember-view.btn--link.btn--right-margin.btn.btn--email{ display: none!important; } /* Titles sizes in courses */ .learner-section__title{ font-size: 22px!important; margin-bottom: 8px!important; } .learner-lesson__title{ font-size: 36px!important; } .learner__content .topic__container { padding-top: 24px!important; } /* Titles inside COURSES */ h1.courseTitle{ font-size: 34px!important; line-height: 44px; } h2.courseTitle{ font-size: 30px!important; line-height: 38px; } h3.courseTitle{ font-size: 26px!important; line-height: 38px; } h4.courseTitle{ font-size: 20px!important; } h5{ font-size: 18px!important; } /* Header */ body.course .relative.header.header--student.header--learner{ height: 42px!important; padding: 10px 24px; } .header .company__beta-logo { max-height: unset; max-width: unset; height: 100%; } .header .company__beta-logo .company-logo__container { margin-top: 0!important; margin-left: 0!important; height: 100%; } .course__container .header .company__beta-logo .company-logo__container img { max-height: unset!important; /*max-width: unset!important;*/ width: unset; /*height: 100%; width: auto;*/ } @media only screen and (min-width: 64.063em){ body.course .relative.header.header--student.header--learner{ height: 60px!important; padding: 14px 100px!important; } } @media only screen and (min-width: 48em) and (max-width: 64.063em){ body.course .relative.header.header--student.header--learner{ height: 60px!important; padding: 14px 32px!important; } } /* List roll */ .list-roll__content .h3.heading.heading--primary{ font-size: 32px; font-weight: 700; line-height: 34px; } .topic__list__item .topic__list__info .btn { margin-top: 26px; } .topic__list__info{ padding-left: 3%; } @media only screen and (min-width: 48.063em){ .topic__list__item .topic__list__info span.topic__list__title span.h3{ font-size: 24px; font-weight: 600; } .topic__list__item .topic__list__info .btn{ margin-top: 26px; } } @media only screen and (max-width: 48.063em){ .topic__list__item .topic__list__info .btn { margin-top: 14px; } } /* ----- NEW SNIPPETS ----- */ /* 01. INFOBOX snippet */ .infobox-container{ width: 100%; display: flex; justify-content: center;} .infobox-note{ display: flex; padding: 30px; border: 1px solid #0029FF; border-radius: 10px; background-color: #0029FF1A; width: 75%; } .infobox-iconContainer .icon-info{ margin-right: 20px; color: #0029FF; font-size: 3rem; } .infobox-note p{display: inline;} @media screen and (max-width:600px){ .infobox-note{ display: flex; flex-direction: column; padding: 20px 30px; } .infobox-iconContainer .icon-info{ margin-right: 0; margin-bottom: 20px; display:flex; justify-content:center; } } .infobox-title h1, .infobox-title h2, .infobox-title h3, .infobox-title h4, .infobox-title h5, .infobox-title h6 { margin-bottom: 6px; } /* 02. TITLE + DESCRIPTION snippet */ .tdContainer{ margin: 10px 0; display: grid; grid-template-columns: 25% 0 75%; align-items: center; justify-items: center; -webkit-box-shadow: none; box-shadow: none; } .tdTitle{ padding: 2% 20px; text-align: right; } .tdTitle p{ font-weight: 700; margin: 0; } .line{ height: 100%; border: 1px solid #e5e5e5; } .tdDescription{ padding: 20px 50px; } @media screen and (max-width:1000px){ .tdContainer{ align-items: start; } .tdTitle{ padding: 20px; } } @media screen and (max-width:600px){ .tdContainer{ grid-template-columns: 15% 0 85%; } .tdTitle{ writing-mode: vertical-rl; transform: rotate(180deg); } .tdDescription{ padding: 20px 30px; } } /* 03. ACCORDION snippet v1 (OLD) */ .accordionSnippet{ width: 100%; } .accordionSnippet-tile{ margin-bottom: 20px; } .accordionSnippet-title{ padding: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 1.4em; font-weight: 800; background-color: #e2e2e2; color: #000000; cursor: pointer; } .accordion-titleExpand{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .accordionSnippet-title:hover{ background-color: #0029ff; color: #ffffff; } .accordionSnippet-arrow{ transform: rotate(0); margin-left: 20px; } .accordionSnippet-arrow::after{ content: "\276F"; } .accordionSnippet-animation{ transform: rotate(90deg); } .accordionSnippet-text{ } .accordionSnippet-text{ padding: 20px; display: block; border: 1px solid #CCCCCC; border-top: none; background-color: #FFFFFF; color: #000000; } .accordionSnippet-text p{ color: #000000; } .hide{ display: none; } /* 03. ACCORDION snippet v2 (NEW) */ div.accordion-wrapper2{margin-bottom: 8px;} .accordion-label2 {width: 100%; margin: 0px !important; padding: 14px 30px; display: flex!important; align-items: center; justify-content: space-between; color:#000000; background-color: #e2e2e2; font-size: 26px; font-weight: bold; line-height: 30px!important; cursor: pointer;} .accordion-label2 span{white-space: nowrap;moverflow: hidden; text-overflow: ellipsis;} .accordion-label2:hover, .accordion-label2.open, .accordion-label2:hover h3.courseTitle{background: #0029FF;color: #FFFFFF;} .accordion-label2.open .icon-navigateright{transform: rotate(90deg);transition: all 0.3s;} .accordion-content:not(.accordion-wrapper .accordion .accordion-content){display: none!important; padding: 20px 30px 8px 30px!important;}; .accordion-content{ color: #000000;background: #ffffff; border: 1px solid #e2e2e2; transition: max-height 0.2s ease-out;} .accordion-content.show, .redactor-box .redactor-styles .accordion-content{display: block!important; max-height: unset!important; } //.redactor-box .redactor-styles .accordion-content{display: block!important;} .redactor-box .redactor-styles .accordion-label2{background: #0029FF;color: #FFFFFF;} /*To delete when all accordions are updated*/ .accordion-label2 h3{margin-bottom: 0;} div.accordion-arrow2{transform: rotate(0deg);transition: all 0.3s;} .accordion-arrow2::after{content: "\276F";} input.accordion-check {position: absolute;opacity: 0;z-index: -1;margin-left: 0px !important;display: flex;} input:checked + .accordion-label2, input:checked + .accordion-label2 h3.courseTitle{background: #0029FF;color: white;} input:checked + .accordion-label2 div.accordion-arrow2 {transform: rotate(90deg);} /* .accordion-wrap {display: flex;flex-direction: column;} .accordionSnippet2 {width: 100%;color: white;overflow: hidden;margin-bottom: 16px;} input:checked + .accordion-label2 h3.courseTitle{white-space: normal;} input:checked ~ .accordion-content{max-height: 9999vh;padding: 20px 30px;} input:checked ~ .accordion-content p{display: inline;}*/ /* 04. TABS snippet v1 (OLD) */ .tabSnippet{ margin: 0; padding: 0; width: 100%; max-width: unset; display: flex; flex-direction: column; flex-wrap: nowrap; border: none; box-shadow: none; } .tabsSnippet-container{ display: flex; width: 100%; border: none; cursor: pointer; margin-bottom: 10px; } .tabsSnippet-tab{ padding: 20px 5%; width: 100%; background-color: #E2E2E2; color: #606060; text-align: center; font-weight: 700; display: flex; justify-content:center; align-items:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabsSnippet-tab:nth-child(2){ margin: 0 10px; } .show{ background-color:#0029FF; color: #FFFFFF; overflow: unset; text-overflow: unset; white-space: break-spaces; } .tabsSnippet-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabsSnippet-text{ display:none; padding: 15px 25px; border: 1px solid #0029FF30; border-radius: 10px; } .showText{ display: block; } @media screen and (min-width:48.063em){ .tabsSnippet-tab{ border-bottom: 0; } } @media screen and (max-width:600px){ .show{ width: 80rem; } .show .tabsSnippet-title{ width: 100%; white-space: unset; overflow: unset; } } /* 04. TABS snippet v2 (NEW) */ .tabSnippet-1{display: grid; /*padding: 20px 0;*/ column-gap: 5px; row-gap: 10px} .tabSnippet-1 label{/*padding: 15px; background-color: #e2e2e2; color: #606060; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight:500;*/ margin:0!important; align-content:center;} .tabSnippet-1 label:nth-child(2){grid-column: 1/2;} .tabSnippet-1 label:nth-child(5){grid-column: 2/3;} .tabSnippet-1 label:nth-child(8){grid-column: 3/4;} /*.tabSnippet-1 input{display: none;} .tabSnippet-1 input:checked + label{font-weight: 900; background-color: #0029ff; color: #ffffff; white-space: normal;}*/ .tabSnippet-1 .tabSnippet-1-tab{ grid-row: 2/3; grid-column: 1/4; /*display: none; padding: 16px 24px 8px 24px; background-color: #ffffff; border: 1px solid #0029FF30; border-radius: 7px;*/} /* .tabSnippet-1 input:checked + label + .tabSnippet-1-tab {display: block;} */ /* ------ ------ ------ */ .tabsSnippet /* -> */, .tabSnippet-1{padding: 20px 0;} .tabsSnippet .tabs{display: flex; margin-bottom: 10px;} .tabsSnippet .tabs button{width:100%;} .tabsSnippet .tabs button/* -> */, .tabSnippet-1 label{padding: 15px; border: 1px solid #767676; background-color: var(--color-background-hover-grey-lighter); color: #000000; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight:500;} .tabsSnippet .tabs button:not(:first-child, :last-child){margin: 0 5px;} .tabsSnippet .tabs button:first-child{margin-right: 5px;} .tabsSnippet .tabs button:last-child{margin-left: 5px;} .tabsSnippet .tabs button.tabSelected/* -> */, .tabSnippet-1 input:checked + label{font-weight: 900; background-color: #0029ff; color: #ffffff; border-color: #0027ff; white-space: normal; overflow: unset;} .tabsSnippet .tabSnippet-1-tab/* -> */, .tabSnippet-1 .tabSnippet-1-tab{padding: 16px 24px 8px 24px; background-color: #ffffff; border: 1px solid #0029FF; border-radius: 7px;} .tabsSnippet .tabSnippet-1-tab .tab-content/* -> */, .tabSnippet-1 input, .tabSnippet-1 .tabSnippet-1-tab{display: none;} .tabsSnippet .tabSnippet-1-tab .tab-content.showtab/* -> */, .tabSnippet-1 .tabSnippet-1-tab, .tabSnippet-1 input:checked + label + .tabSnippet-1-tab{display: block;} /* 05. IMAGE NEXT TO TEXT (intt) snippet */ body.learn.course.lesson .inttSnippet{ padding: 10px 0; } body.learn.course.lesson .inttImageContainer{ width: 30%; } body.learn.course.lesson .inttImageContainer.left{ float: left; margin-right: 3%; } body.learn.course.lesson .inttImageContainer.right{ float: right; margin-left: 3%; } body.learn.course.lesson .inttImageContainer.center{ width: 100%!important; display:flex; justify-content:center;} body.learn.course.lesson .inttImageContainer img{ width: 100%; cursor: pointer; } body.learn.course.lesson .inttGallery{ display:none; position: fixed!important; right:0; top:60px; z-index:1; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 88%); width: 100%; height: calc(100vh - 60px); cursor: zoom-in; } body.learn.course.lesson .inttGallery p{ position: sticky; top: 10vh; width: 100%; font-size: 1.4em; font-weight: 600; color: #000000; text-align: right; } body.learn.course.lesson .inttGallery div{/* position: sticky; top: 14vh; height: 80vh;*/ height: 100%;} body.learn.course.lesson .inttGallery div p{ height: 90%; } body.learn.course.lesson .inttGallery div p img{ max-height: 100%; } body.learn.course.lesson .inttGallery.hide{ display: none; } body.learn.course.lesson .inttGallery img{height: 100%;} /* Gallery button */ body.learn.course.lesson .inttGallery button{position: absolute; z-index: 2; top: 12px; right: 4%; background-color: #0029ff; color: #ffffff; border-radius: 50px; border: 2px solid #0029ff; font-size: 18px; font-weight: 600; font-family: poppins;} body.learn.course.lesson .inttGallery button:hover{background-color: #ffffff; color:#0029ff;} body.learn.course.lesson .inttGallery .imgZoom{width: 85%; height: 90%; display: flex; justify-content: center; align-items: center;} body.learn.course.lesson .inttGallery .imgZoom img{/*width: 90%; height: 90%; */object-fit: contain; /*object-position: 0 0;*/} body.learn.course.lesson .inttGallery .imgZoom:before{ display:var(--display); position: absolute; content: ''; width: 85%; height: 90%; background-color: #ffffff; background-image: var(--url); background-size: 150%; background-position: var(--zoom-x) var(--zoom-y); background-repeat: no-repeat;} @media only screen and (max-width: 900px){ body.learn.course.lesson .inttSnippet{ display: flex; flex-direction: column; } body.learn.course.lesson .inttImageContainer{ width: 100%; margin-bottom: 18px; display: flex; justify-content: center; } body.learn.course.lesson .inttImageContainer.left{ margin-right: 0; } body.learn.course.lesson .inttImageContainer.right{ margin-left: 0; } body.learn.course.lesson .inttGallery button{ } } /* ----- END new snippets ----- */ /* Slideshow snippet */ .topic__contained__wrapper.topic__contained__wrapper--slideshow{ display: flex; position: unset; height: 500px; margin-bottom: 0; border: none; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content{ position: unset; z-index: 0; display: flex; justify-content: center; float: unset; width: 60%; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content picture{ display: inline-flex; /*THIS might be block*/ justify-content: center; align-items: center; height: 100%; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content picture img{ max-width: 100%; max-height: 100%; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar{ float: unset; width: 40%; overflow-y: unset; position: unset; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar .slide__detail{ padding: 25px; } .slide-show__controls{ display: flex; justify-content:space-between; align-items: center; margin: 4px 0; } .slide-show__controls .slide-show__count{ padding: 10px; text-align: center; line-height: normal; } .slide-show__controls .btn.btn--primary.btn--no-margin.slide-show__button{ display: flex; align-items: center; padding: 10px 30px; } .slide-show__controls .btn.btn--primary.btn--no-margin.slide-show__button i{ padding-right: 0; } .slide-show__controls .btn.btn--primary.btn--no-margin.slide-show__button span{ padding: 0 6px; line-height: normal; } @media only screen and (min-width: 64.063em){ .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar .slide__detail .topic__sidebar__title { padding-right: 0; } } @media only screen and (min-width: 48.063em){ .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar .slide__detail{ position: unset; overflow: scroll!important; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar .slide__detail::-webkit-scrollbar{ width: 6px; height: 6px; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar .slide__detail .topic__sidebar__caption { padding-bottom: 0; } } @media only screen and (max-width: 48.063em){ .topic__contained__wrapper.topic__contained__wrapper--slideshow{ flex-direction: column; height: 600px; overflow: scroll; } .topic__contained__wrapper.topic__contained__wrapper--slideshow::-webkit-scrollbar{ width: 6px; height: 6px; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content{ width: 100%; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content picture{ height: 350px; } .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__sidebar{ width: 100%; } } @media only screen and (max-width: 600px){ .topic__contained__wrapper.topic__contained__wrapper--slideshow .topic__contained__content picture{ height: 250px; } .slide-show__controls .btn.btn--primary.btn--no-margin.slide-show__button{ padding: 10px 4%; } } /* Highlight zones SNIPPET */ .topic__image.topic__image--highlight-zone .image__zone{ border: 4px solid #0029ff; } .topic__image.topic__image--highlight-zone .image__zone .btn.btn--link.btn--inherit-font.image-tag__toggle__button{ display: none; } @media only screen and (min-width: 48.063em){ .image-tag__popup.image-tag__popup--grow .btn.btn--icon.btn--close{ left: unset; } .btn.btn--icon.btn--close.close-popup{ right: 0; } } @media only screen and (max-width: 48.063em){ .image-tag__popup{ position: relative; } .topic__image.topic__image--highlight-zone .image__zone{ left: 0; width: 100%; } } /* Catalogue mobile view */ @media only screen and (max-width: 48.063em){ body.catalog .widget--catalog.widget--catalog_standard .ember-view .row{ margin: 0; } body.catalog .catalog-search-bar { margin-bottom: 16px!important; } body.catalog .catalog-filters div.catalog-filters__sort.small-6.medium-2.columns{ width: 100%!important; } body.catalog .widget--catalog .ember-view .row .columns{ padding-left:0; padding-right:0; } body.catalog .widget--catalog .js-results-holder ul { padding-top: 16px!important; margin: 0; } body.catalog .widget--catalog .ember-view .row .columns .ember-view .row .columns.js-results-holder ul li{ padding-left:0; padding-right:0; } body.catalog .widget--catalog .ember-view .row .columns .ember-view .row .columns.js-results-holder ul li a .catalog-grid-item .row .column{ padding-left:0; padding-right:0; } body.catalog ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li a.catalog-item div.catalog-grid-item .row{ margin: 0; } body.catalog li a.catalog-item div.catalog-grid-item .row{ flex-direction: row!important; align-items: center; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12:first-child{ width: 0.5%; height: 100%; display: flex; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body{ padding-bottom: 32px; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .catalog-grid-item__source{ margin-bottom: 6px; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .featured-content-item__authors{ display: flex; align-items: center; line-height: 10px;} body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .featured-content-item__authors::before{ height: 15px; width: 15px; background-size: contain; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__asset-container{ display: none;} body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .catalog-grid-item__cta-container .grid.grid-cols-3.gap-2{ display: flex; flex-direction: column; gap: 0; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .catalog-grid-item__cta-container .grid.grid-cols-3.gap-2 .col-span-2 .grid.grid-rows-3.gap-2{ display: flex; flex-direction: column; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .catalog-grid-item__cta-container .grid.grid-cols-3.gap-2 .col-span-2 .grid.grid-rows-3.gap-2 .row-span-2{ margin-bottom: 10px; } body.catalog li a.catalog-item div.catalog-grid-item .row .column.medium-12 .catalog-grid-item__body .catalog-grid-item__cta-container .grid.grid-cols-3.gap-2 .place-self-top span.btn.btn--link.btn--right.btn--primary{ margin-top: 0; } } /*.widget.widget--two-column.widget--two-column_standard.cta-thin div div.row{ margin: 0!important; } @media only screen and (min-width: 48.063em){ .widget.widget--two-column.widget--two-column_standard.cta-thin div.ember-view div.row .medium-6.columns{ //padding-right: 20px!important; width: 25%!important; } }*/ @media only screen and (min-width: 48.063em){ .medium-6 { width: 40%!important; } } /* arrows in mobile widgets - NOT FINISHED */ @media only screen and (max-width: 64em) { .featured-content-multi-carousel__nav-left, .featured-content-multi-carousel__nav-right { display: inline-block; right: unset; /*-.75em*/ } } /* Navigation - homepage */ @media only screen and (max-width: 48em) { .global-nav__container{ display:block!important; /*HERE maybe remove display:block in order for the JS to work*/ overflow:auto; height: auto!important; padding: 5px 24px 5px 24px; mask-image: linear-gradient(to right, rgba(0,0,0,0) 1%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 91%, rgba(0,0,0,0) 99%); } .global-nav__container .nav.nav--global-links{display:inline-flex; white-space: nowrap;} .global-nav__container::-webkit-scrollbar{display: none;} } .catalog-display-type button, .catalog-display-type button.btn--primary { border: 1px solid #000; color: black!important; } .catalog-display-type button:hover, .catalog-display-type button.btn--primary:hover { border: 1px solid #0029FF; color: #0029FF!important; } .catalog-display-type button[aria-selected="true"] { border: 1px solid #0029FF; color: #0029FF!important; } /* Webcast ? - Detail page */ /*body.course-group .course__detail__container, body.learning-path*/ .course__detail__container{display: grid; grid-template-columns: 70% 30%; } /*body.course-group .course__detail__container .course__detail__content, body.learning-path*/ .course__detail__container .course__detail__content{width: unset; padding: 0; display: grid; grid-template-columns: 60% 35%; column-gap: 5%;} .course__detail__container .course__detail__content .course__detail__header{grid-column: 1/2;} /*body.course-group*/ .course__detail__container .course__detail__content div.row:nth-child(1){grid-column: 2/3;} /*body.course-group*/ .course__detail__container .course__detail__content div.row .course__detail__asset{margin: 0;} /*body.course-group*/ .course__detail__container .course__detail__content div.row .course__detail__asset picture img, .course__detail__container .course__detail__content .course__detail__asset picture img {max-width: 100%;} /*body.course-group*/ .course__detail__container .course__detail__content div.row:nth-child(2){grid-column: 1/3; grid-row: 2/3;} /*body.course-group*/ .tabs-content--meetings section .heading--primary{display: none;} /*body.course-group*/ .event-sidebar__meeting .event-sidebar__meeting__date{display: none;} /* Learning path */ body.learning-path .course__detail__container{grid-template-rows: 0.1fr repeat(4, auto);} .course__detail__container .course__detail__content .course__detail__asset{grid-row:1/3; grid-column: 2/3; margin: 0;} .course__detail__container .course__detail__content .course__detail__asset picture{height: 240px;} body.learning-path .course__detail__container .course__detail__content .row, .course__detail__container .course__detail__content .collection__courses{grid-column: 1/3;} /* DP - Sidebar */ .course__detail__container div .course__detail__sidebar, .course__detail__container .course__detail__sidebar{width: unset;} .course__detail__sidebar .layout__content--sidebar{display: grid;} .course__detail__sidebar .layout__content--sidebar .widget--course-purchase.widget--course-purchase_standard{grid-row:1/2;} .course__detail__sidebar .layout__content--sidebar .widget--course-purchase.widget--course-purchase_standard div .panel{padding: 0; background: transparent;} .course__detail__sidebar .layout__content--sidebar .widget--course-benefits.widget--course-benefits_standard{grid-row:2/3;} .course__detail__sidebar .layout__content--sidebar .widget--course-related .widget--course-related_standard{grid-row:3/4;} .course__detail__sidebar .layout__content--sidebar .widget--course-social.widget--course-social_standard{grid-row:4/5;} .course__detail__social.share__container{display:flex; align-items: center;} .course__detail__social.share__container .h6.heading.heading--alt{margin: 0; text-wrap: nowrap;} .layout__content--sidebar .course__detail__social>div{width: 100%; justify-content: space-between; margin-left: 30px;} .layout__content--sidebar .course__detail__social>div .btn--social{margin: 0;} @media only screen and (min-width: 48.063em){ /* .course__detail__content{width: 100%;}*/} /* NEW DROPDOWN */ /* Catalog tab */ .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown.hover ul.dropdown{display: grid; border: 1px solid #000000;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown.hover ul.dropdown li{-webkit-box-shadow: none; box-shadow:none; padding:0;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown.hover ul.dropdown li:hover a{background-color: #0029ff!important; color: #ffffff!important;} /* left column - main */ .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(4), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(7), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(10), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(13), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(16), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(19), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(22), header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(25), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(28), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(31), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(34){grid-column:1/2;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(4) a::after, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(7) a::after{content:"\276F";} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(4) a, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(7) a{display: flex; justify-content: space-between;} /* right column - hover to display */ .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(31), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(34), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(37), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(40), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(43), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(46){position:absolute; grid-column: 2/3; width:149px; display:none; border: 1px solid #000000;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(31){grid-row:1/2; border-bottom: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(34){grid-row:2/3; border-top: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(37){grid-row:3/4; border-top: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(40){grid-row:4/5; border-top: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(43){grid-row:2/3; border-top: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(46){grid-row:3/4; border-top: none;} /* CHECK THIS ONCE WE ADD THE HOVER TILES !!! - This is supposed to be bg blue when hovering over appearing items - NOT WORKING ATM .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(25):hover a + .top-bar-section .left li .dropdown li a, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(28):hover a + .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(4) a, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(31):hover a + .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(7) a, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(34):hover a + .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(6) ul.dropdown li:nth-child(7) a {background-color: #0029ff!important;}*/ /* end catalog dropdown */ /* Role dropdown*/ .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown{grid-template-columns: repeat(2, 1fr); grud-template-columns: repeat(9, 1fr)} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(4) a, .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(7) a{background-color: #000000!important; color: #FFFFFF!important; border: 2px solid #FFFFFF; pointer-events: none;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(10), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(13), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(16), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(19), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(22), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(25), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(28), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(31){grid-column: 1/2;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(34), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(37), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(40), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(43), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(46), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(49), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(52), .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(55){grid-column: 2/3; border-left: 1px solid #333; background: #FFF!important} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(58){grid-column: 1/3; border-top: 1px solid #333;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(34){grid-row: 2/3;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(37){grid-row: 3/4;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(40){grid-row: 4/5;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(43){grid-row: 5/6;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(46){grid-row: 6/7;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(49){grid-row: 7/8;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(52){grid-row: 8/9;} .header.header--microsite .header__inner .top-bar .top-bar-section ul li.has-dropdown:nth-child(9) ul.dropdown li:nth-child(55){grid-row: 9/10; pointer-events:none;} /* END Role dropdown */ /* Mobile view */ @media only screen and (max-width: 48.063em) { ul.left ul:nth-child(8).dropdown.active, ul.left ul:nth-child(12).dropdown.active{display: grid!important; grid-template-columns: .1fr 1fr;} ul.left ul:nth-child(8).dropdown.active li:nth-child(4) a, ul.left ul:nth-child(8).dropdown.active li:nth-child(7) a, ul.left ul:nth-child(12).dropdown.active li:nth-child(4) a, ul.left ul:nth-child(12).dropdown.active li:nth-child(7) a{color: #858585!important; rotate: 180deg; text-wrap: nowrap; line-height: 38px;} ul.left ul:nth-child(8).dropdown.active li:nth-child(4), ul.left ul:nth-child(8).dropdown.active li:nth-child(7), ul.left ul:nth-child(12).dropdown.active li:nth-child(4), ul.left ul:nth-child(12).dropdown.active li:nth-child(7){padding-top: 20px;padding-left: 0px!important; writing-mode: vertical-rl; grid-column: 1/2; height: auto;} ul.left ul:nth-child(8).dropdown.active li:nth-child(4){grid-row: 1/4;} ul.left ul:nth-child(8).dropdown.active li:nth-child(7){grid-row: 4/6;} ul.left ul:nth-child(8).dropdown.active li:nth-child(31){grid-row: 1/2;} ul.left ul:nth-child(8).dropdown.active li:nth-child(34){grid-row: 2/3;} ul.left ul:nth-child(8).dropdown.active li:nth-child(37){grid-row: 3/4;} ul.left ul:nth-child(8).dropdown.active li:nth-child(40){grid-row: 4/5;} ul.left ul:nth-child(8).dropdown.active li:nth-child(43){grid-row: 5/6;} ul.left ul:nth-child(12).dropdown.active li:nth-child(4){grid-row:1/10;} ul.left ul:nth-child(12).dropdown.active li:nth-child(7){grid-row:10/16;} ul:not(.dropdown.active).left li:not(ul.dropdown li), nav.nav.nav--top ul li:not(ul.dropdown li):nth-child(1), nav.nav.nav--top ul li:not(ul.dropdown li):nth-child(4), ul.left ul:nth-child(4).dropdown.active li:nth-child(4), ul.left ul:nth-child(4).dropdown.active li:nth-child(7), ul.left ul:nth-child(4).dropdown.active li:nth-child(10), ul.left ul:nth-child(8).dropdown.active li:nth-child(10), ul.left ul:nth-child(8).dropdown.active li:nth-child(13), ul.left ul:nth-child(8).dropdown.active li:nth-child(16), ul.left ul:nth-child(8).dropdown.active li:nth-child(19), ul.left ul:nth-child(8).dropdown.active li:nth-child(22), ul.left ul:nth-child(8).dropdown.active li:nth-child(25){border-bottom: none;} ul.left ul:nth-child(8).dropdown.active li:nth-child(31), ul.left ul:nth-child(8).dropdown.active li:nth-child(34), ul.left ul:nth-child(8).dropdown.active li:nth-child(37), ul.left ul:nth-child(8).dropdown.active li:nth-child(40), ul.left ul:nth-child(8).dropdown.active li:nth-child(43), ul.left ul:nth-child(12).dropdown.active li:nth-child(10), ul.left ul:nth-child(12).dropdown.active li:nth-child(13), ul.left ul:nth-child(12).dropdown.active li:nth-child(16), ul.left ul:nth-child(12).dropdown.active li:nth-child(19), ul.left ul:nth-child(12).dropdown.active li:nth-child(22), ul.left ul:nth-child(12).dropdown.active li:nth-child(25), ul.left ul:nth-child(12).dropdown.active li:nth-child(28), ul.left ul:nth-child(12).dropdown.active li:nth-child(31), ul.left ul:nth-child(12).dropdown.active li:nth-child(34), ul.left ul:nth-child(12).dropdown.active li:nth-child(37), ul.left ul:nth-child(12).dropdown.active li:nth-child(40), ul.left ul:nth-child(12).dropdown.active li:nth-child(43), ul.left ul:nth-child(12).dropdown.active li:nth-child(46), ul.left ul:nth-child(12).dropdown.active li:nth-child(49), ul.left ul:nth-child(12).dropdown.active li:nth-child(52){grid-column: 2/3; border-left: 1px solid #e5e5e5; border-bottom: none;} ul.left ul:nth-child(8).dropdown.active li:nth-child(10), ul.left ul:nth-child(8).dropdown.active li:nth-child(13), ul.left ul:nth-child(8).dropdown.active li:nth-child(16), ul.left ul:nth-child(8).dropdown.active li:nth-child(19), ul.left ul:nth-child(8).dropdown.active li:nth-child(22), ul.left ul:nth-child(8).dropdown.active li:nth-child(25), ul.left ul:nth-child(8).dropdown.active li:nth-child(28), ul.left ul:nth-child(12).dropdown.active li:nth-child(58){grid-column: 1/3;} ul.left ul:nth-child(8).dropdown.active li:nth-child(37), ul.left ul:nth-child(8).dropdown.active li:nth-child(43), ul.left ul:nth-child(12).dropdown.active li:nth-child(4), ul.left ul:nth-child(12).dropdown.active li:nth-child(34), ul.left ul:nth-child(12).dropdown.active li:nth-child(52), ul.left ul:nth-child(12).dropdown.active li:nth-child(58){border-bottom: 1px solid #e5e5e5;} ul.left ul:nth-child(12).dropdown.active li:nth-child(55){display: none;} ul.left ul.dropdown.active li a{font-weight: 700!important;} ul.left li:not(.has-dropdown.open) a, nav ul li a span, nav ul li button span{font-weight: 500!important;} } /* END Mobile view */ /* --- END New dropdown --- */ /* Widgets Black Background */ .blackbg{background-color: #000; color: #ffffff;} .blackbg .h2.widget__title,.blackbg .widget__subtitle{color: #ffffff;} /* --- NEW CATALOG DESIGN --- */ .widget--catalog .row{margin:0;} .widget--catalog .row .medium-12.columns{padding-left: 0; padding-right: 0;} /* Search Bar */ .widget--catalog .row .medium-12.columns .catalog-search-bar{margin-top: 0; margin-bottom: 20px; height: unset;} .widget--catalog .catalog-search-bar .catalog-filters{display: grid; grid-template-columns: 82% 18%; background: unset; border: unset;} .widget--catalog .catalog-filters input, .widget--catalog .catalog-filters form button, .widget--catalog .catalog-filters form button i, .widget--catalog .catalog-filters .columns{padding: unset;} .widget--catalog .catalog-filters__search, .widget--catalog .catalog-filters__sort{border: 1px solid #000;} .widget--catalog .catalog-filters form{display: flex; padding: 0 20px;} .widget--catalog .catalog-filters form button{margin:unset; position: unset;} .widget--catalog .catalog-display-type{padding: unset; display: none;} .widget--catalog .catalog-display-type button{height: unset; width: unset;} .widget--catalog .catalog-filters .catalog-filters__selections{grid-area:2/1/3/3; border: unset; margin-top:10px;} .widget--catalog .catalog-filters__search, .widget--catalog .catalog-filters__sort, .widget--catalog .catalog-filters__selections, .widget--catalog .catalog-filters__selections .catalog-active-filters{width: unset;} .widget--catalog span.catalog-active-filter{margin: unset; padding: unset;} .widget--catalog span.catalog-active-filter .catalog-active-filter__remove{margin: unset; display: block; color: #0029ff; border-color: #0029ff; line-height: 24px;} /* END Search Bar*/ /* Side bar (tags) */ .widget--catalog .row .medium-12.columns .row .medium-3.columns{padding: 1em 0 1em 1em; width: 18%; border: 1px solid #000; position: sticky; top: 120px; max-height: 80vh; overflow-y: scroll;} .widget--catalog .row .medium-12.columns .row .medium-3.columns::-webkit-scrollbar{width: 8px; padding: 0;} .widget--catalog .catalog-aggregation{border-top: none;} .widget--catalog .catalog-aggregation.catalog-aggregation--expanded{background-color: transparent; } .widget--catalog .catalog-aggregation button{margin-bottom: 0!important; -webkit-transition-duration: unset; transition-duration: unset;} .widget--catalog .catalog-aggregation:hover button.catalog-aggregation__header div span{color: #0027ff;} .widget--catalog .catalog-aggregation button.catalog-aggregation__header .row.collapse{display: flex; flex-direction: row-reverse; justify-content: flex-end;} .widget--catalog .catalog-aggregation button.catalog-aggregation__header .catalog-aggregation__header--label, .widget--catalog .catalog-aggregation ul li button.catalog-aggregation__value{padding-left: 0;} .widget--catalog .catalog-aggregation ul li:hover button.catalog-aggregation__value{font-weight: 600; color: #0027ff;} .widget--catalog .catalog-aggregation.catalog-aggregation--expanded ul li{padding-right: 0;} /* Catalog */ .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder{padding-left: 0; padding-right: 0; width: 82%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2{margin:0;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li{padding-right: 0; width: 25%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li .row .column{padding-left: 0; padding-right: 0;} /* Responsive*/ @media only screen and (min-width: 64em) and (max-width: 90em){ .widget--catalog .row .medium-12.columns .row .medium-3.columns{width: 22%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder{width: 78%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li{width: 33.333%;} } @media only screen and (min-width: 48.063em) and (max-width: 64em){ .widget--catalog .row .medium-12.columns .row .medium-3.columns{padding:1em; width: 27%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder{width: 73%;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li{width: 50%;} } @media only screen and (max-width: 48.063em){ .widget--catalog .row .medium-12.columns .catalog-search-bar, .widget--catalog .catalog-filters__search, .widget--catalog .catalog-filters__sort{margin-bottom: 0!important;} .catalog-filters__sort select#sort-options{height: unset!important;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder ul.small-block-grid-1.large-block-grid-3.medium-block-grid-2 li{width: 100%;} .widget--catalog .row .medium-12.columns .row .medium-3.columns{width: 100%; position: relative; display: flex; justify-content: space-between; max-height: unset; top: unset; padding: 0; float: none; } .widget--catalog .row .medium-12.columns .row .medium-3.columns::-webkit-scrollbar{height: 6px;} .widget--catalog .catalog-aggregation{display: flex; flex-direction: column;} .widget--catalog .catalog-aggregation.catalog-aggregation--expanded{margin: 0!important; padding: 12px;} .widget--catalog .catalog-aggregation.catalog-aggregation--expanded ul li{text-wrap: nowrap;} .widget--catalog .row .medium-12.columns .row .medium-9.columns.js-results-holder{width: 100%;} } /* --- END new catalog design --- */ /* --- MY ACTIVITY --- */ .widget--dashboard-access.widget--dashboard-access_standard .row{margin:0;} .widget--dashboard-access.widget--dashboard-access_standard .row .small-12.columns{padding:0;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center{gap:0; grid-template-columns: 90% 10%; grid-template-rows: 1fr .1fr;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-4{grid-column: unset;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-4 button{display: flex;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-4 button .icon-navigatedown, .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-4 button .icon-navigateright{padding-right: 18px; padding-top: 6px;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-3{grid-column: unset; grid-row: 2/3; display: flex; font-size: 14px; padding-left: 18px; line-height: 16px;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-3 strong, .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-span-3 .catalog-list-item__source{font-size: 14px; padding: 0 10px; margin: 0; line-height: 16px;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-start-11.col-span-2.text-right{grid-column: 2/3; grid-row: 1/3;} .widget--dashboard-access .dashboard-access section .grid.grid-cols-12.gap-4.items-center .col-start-11.col-span-2.text-right .btn.btn--primary.btn--small.m-0{width: 100%;} .dashboard-access-list-item .dashboard-access-list-item-expansion .row .medium-4.columns{display: none;} .dashboard-access-list-item .dashboard-access-list-item-expansion .row .medium-8.columns{width: unset; padding-left: 26px;} /* --- END my activity --- */ /*--- Headings in courses --- body.learn.course.lesson h1, body.learn.article h1{ font-size: 34px!important; line-height: 44px; } body.learn.course.lesson h2, body.learn.article h2{ font-size: 30px!important; line-height: 38px; } body.learn.course.lesson h3, body.learn.article h3{ font-size: 26px!important; line-height: 38px; } body.learn.course.lesson h4, body.learn.article h4{ font-size: 20px!important; } body.learn.course.lesson h5, body.learn.article h5{ font-size: 18px!important; } --- END Headings in courses ---*/ body.learn .editor-content h1{ font-size: 34px; line-height: 44px; } body.learn .editor-content h2{ font-size: 30px; line-height: 38px; } body.learn .editor-content h3{ font-size: 26px; line-height: 38px; } body.learn .editor-content h4{ font-size: 20px; } body.learn .editor-content h5{ font-size: 18px; } .re-dropdown-box-textcolor span:not(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)){ display: none; /*background-color: #0027ff!important;*/} .re-dropdown-box-backcolor span:not(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)){ display: none;} /**/ ul.featured-content-block-grid.small-block-grid-1.medium-block-grid-5{ margin-top: 0; } /* Tabs -- Accessible -- Test */ .snippet--tabs-wrapper{padding: var(--snippets-spacing-M-vertical);} .snippet--tabs-top-wrapper{position: relative;} .snippet--tabs-buttons-wrapper{ display: flex; overflow: auto hidden; scrollbar-width: none;} .snippet--tabs-buttons-wrapper button{ padding: 1rem; margin: 0; max-width: 25%; color: var(--color-paragraph-dark-grey); background-color: var(--color-brand-white); border: none; border-top-left-radius: var(--buttons-border-radius); border-top-right-radius: var(--buttons-border-radius); text-align: center; cursor: pointer;} .snippet--tabs-buttons-wrapper button:hover{ background-color: var(--color-background-hover-grey-lighter);} .snippet--tabs-buttons-wrapper button .tab-title{ font-size: var(--typography-paragraph-font-size-M); font-weight: var(--typography-font-weight);} .snippet--tabs-buttons-wrapper button.tab-selected{ color: var(--color-brand-white); background-color: var(--color-brand-blue); border-color: var(--color-brand-blue); font-weight: 900;} .snippet--tabs-content{ display: none; padding: 16px 24px 8px 24px; background-color: var(--color-brand-white); border-top: 1px solid var(--color-brand-blue); border-bottom: 1px solid var(--color-brand-blue); } .snippet--tabs-content.tab-content-show, .redactor-styles .snippet--tabs-content{display: block;} @media only screen and (max-width: 48.063em){ .snippet--tabs-buttons-wrapper button{ min-width: 40%;} .snippet--tabs-buttons-wrapper{scrollbar-width: unset; padding-bottom: 3px;} .snippet--tabs-buttons-wrapper::-webkit-scrollbar{height: 4px;} .snippet--tabs-buttons-wrapper::-webkit-scrollbar-thumb{background: var(--color-brand-blue);} } /* Sandbox adjustments (navbar-related) */ button.insided-conversational-trigger-button.insided-conversational-trigger-button--right, div.QSIFeedbackButton{ z-index: 9!important; } /* NEW HEADER TEST */ .header:not(.header--tools):not(.header--secondary-manager):not(.header--subtitle){ background-color: var(--color-brand-white)!important; } @media only screen and (min-width: 64.063em) { .header:not(.header--tools):not(.header--secondary-manager):not(.header--subtitle) { padding: 0 100px!important; } } header.header.header--microsite .header__inner{ height: 100%; } nav.new-navbar-wrap{ display: flex; background-color: var(--color-brand-white); } .material-symbols-outlined{ font-family: 'Material Symbols Outlined'!important; } /* --- NAVIGATION BAR TEST --- */ .global-nav__container{ border-bottom: 1px solid #D9D9D9; } header.header:not(.header--tools):not(.header--secondary-manager):not(.header--subtitle){ background: var(--color-brand-white)!important; border-bottom: 1px solid #D9D9D9; box-shadow: unset; } nav.new-navbar-wrap{ font-family: Poppins; } /* General */ .new-navbar-wrap{ display: flex; justify-content: space-between; color: var(--color-brand-black); height: 100%; } .new-navbar-wrap .image-navbar-group{ display: flex; } .new-navbar-wrap ul{ list-style: none; padding: 0; margin: 0; } .new-navbar-wrap a{ text-decoration: none; color: unset; } .new-navbar-wrap li a{display: flex;} /* Logo */ .new-navbar-wrap .navbar-logo{ margin-right: 73px; display: flex; align-items: center; } .new-navbar-wrap .navbar-logo img{ max-width: 250px;} .item-hover-main{ border-bottom: 2px solid var(--color-brand-black); } .item-hover-firstlevel{ background-color: var(--color-brand-black); } /* Main navbar */ .navbar-items-main{ margin: 0; display: flex; align-items: center; color: var(--color-brand-black); } .new-navbar-wrap span.material-symbols-outlined{ margin-left: 8px; } .navbar-items-main li button{ color: unset; } .navbar-items-main li.navbar-item-wrap{ height: 100%; } .navbar-items-main li.navbar-item-wrap button.navbar-item{ padding: 0 12px; margin:0; display: flex; align-items: center; font-size: var(--typography-paragraph-font-size-M); background-color: var(--color-brand-white); border: none; border-radius: unset; } .navbar-items-main li.navbar-item-wrap button.navbar-item span.material-symbols-outlined{ background-color: var(--color-background-default-grey); } /* First level - Open dropdown */ ul.navbar-item-dropdown{ display: none; } ul.navbar-item-dropdown li{ background-color: var(--color-brand-white); } /* Second level - Catalog > By topic, process, exams */ ul.navbar-item-dropdown.dropdown-open{ display: block; position: absolute; } ul.navbar-item-dropdown li.item-sidelevel{ position: relative; } ul.navbar-item-dropdown li.item-sidelevel button{ display: flex; justify-content: space-between; background-color: transparent; margin: unset; border: none; font-size: 16px; -webkit-transition-duration: unset; } /* Language button */ .new-navbar-wrap .language-wrap { position: relative; display: flex; align-items: center; } button.language-btn{ margin: 0; padding: 8px 16px; display: flex; align-items: center; border: 1px solid var(--color-background-hover-grey-darker); border-radius: var(--buttons-border-radius)!important; color: var(--color-brand-black); background-color: var(--color-brand-white); font-size: 15px; } button.language-btn:hover, button.language-btn:focus-within{ background-color: var(--color-background-default-grey); } button.language-btn span.material-symbols-outlined{ color: var(--color-background-hover-grey-darker); } button.language-btn span.material-symbols-outlined:first-child{ margin-left: 0; margin-right: 8px; } /* navbar - buttons on the right (log in, manager) */ nav.nav--top{ height: 100%; display: flex; align-items: center; } nav.nav--top ul{ height: auto; } nav.nav--top ul li a{ margin-left: 8px; border: 1px solid var(--color-brand-black); border-radius: var(--buttons-border-radius)!important; background-color: var(--color-brand-black); font-weight: 400; } nav.nav--top ul li a:hover{ border-color: var(--color-brand-black); } nav.nav--top ul li a:hover span{ color: var(--color-brand-black)!important; } /* Hover + keyboard styling interactions */ /* - Getting started + Catalog dropdown */ ul.navbar-item-dropdown.item-firstlevel li:hover:not(.item-role-dropdown li), ul.navbar-item-dropdown.item-firstlevel li:focus-within:not(.item-role-dropdown li){ background-color: var(--color-brand-black); color: var(--color-brand-white); } ul.navbar-item-dropdown.item-firstlevel li:hover:not(.item-role-dropdown li) ul, ul.navbar-item-dropdown.item-firstlevel li:focus-within:not(.item-role-dropdown li) ul{ color: var(--color-brand-black) } ul.navbar-item-dropdown.item-firstlevel li:hover a:not(ul.navbar-item-dropdown.item-secondlevel li a, .item-role li a){ color: var(--color-brand-white); } /* - Roles dropdown */ ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li:last-child:hover, ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li ul.item-role li:hover, ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li ul.item-role li:focus-within{ background-color: var(--color-brand-black); } ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li ul.item-role li:hover a, ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li ul.item-role li:focus-within{ color: var(--color-brand-white); } /* Responsive */ /* -- Desktop view -- */ @media only screen and (min-width: 1200px){ /* Logo */ header .header__inner .navbar-logo:not(header .header__inner .new-navbar-wrap .image-navbar-group .navbar-logo){display: none;} /* Main nav bar */ .navbar-items-main li.navbar-item-wrap button.navbar-item{ height: 100%; border-bottom: 2px solid var(--color-brand-white); } .navbar-items-main li.navbar-item-wrap button.navbar-item:hover, .navbar-items-main li.navbar-item-wrap button.navbar-item:focus-within{ border-bottom-color: var(--color-brand-black); } button:focus:not(.tw-override){ -webkit-box-shadow: unset; box-shadow: unset; outline: unset; } .mobile-menu-wrap, button.mobile-menu{display: none;} /* Language button */ .new-navbar-wrap .language-wrap #language-selector-header { top: 68px; } /* Quick links */ ul.navbar-items-main .navbar-item-wrap.mobile-view{ display: none; } /* All dropdown first level */ ul.navbar-item-dropdown.item-firstlevel{ border: 1px solid #BEBEBE; } ul.navbar-item-dropdown.item-firstlevel:not(.item-role-dropdown) li{ width: 240px; /* Elements size */ } .new-navbar-wrap li a /* all links */, ul.navbar-item-dropdown li.item-sidelevel button /* buttons */, ul.navbar-item-dropdown li .menu-title /* role titles*/{ padding: 14px 16px; line-height: 1.5; } /* CATALOG dropdown */ /* - First level */ ul.navbar-item-dropdown li.item-sidelevel{ display: flex; } ul.navbar-item-dropdown li.item-sidelevel button{ width: 240px; } ul.navbar-item-dropdown li.item-sidelevel button:hover, ul.navbar-item-dropdown li.item-sidelevel button:hover span.material-symbols-outlined{ color: var(--color-brand-white); } /* - Second level */ ul.navbar-item-dropdown.item-secondlevel{ position: absolute; left: 240px; height: 521.5px; border: 1px solid #BEBEBE; background-color: var(--color-brand-white); } ul.navbar-item-dropdown.item-firstlevel li.item-sidelevel ul.navbar-item-dropdown.item-secondlevel li:hover a{ color: var(--color-brand-white); } .item-sidelevel:nth-child(1) .navbar-item-dropdown.item-secondlevel{ top: -1px; } .item-sidelevel:nth-child(2) .navbar-item-dropdown.item-secondlevel{ top: -53px; } .item-sidelevel:nth-child(3) .navbar-item-dropdown.item-secondlevel{ top: -105px; } /* ROLE dropdown */ /* - Titles */ .navbar-item-dropdown.item-firstlevel .menu-title{ text-transform: uppercase; border-bottom: 1px solid #BEBEBE; } /* - Layout */ ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown.dropdown-open{ display: grid; grid-template-columns: repeat(2, 240px); } ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li:nth-child(3):not(ul.item-role li){ grid-column: 1/3; border-top: 1px solid #BEBEBE; } ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li:first-child .menu-title, ul.navbar-item-dropdown.item-firstlevel.item-role-dropdown li:first-child ul.item-role{ border-right: 1px solid #BEBEBE; } ul.item-role li.mobile-version{ display: none; } } /* -- Tablet view -- */ @media only screen and (max-width: 1200px) and (min-width: 1024px){ nav.new-navbar-wrap{ padding-left: 80px; padding-right: 80px; } } /* -- Mobile view -- */ @media only screen and (max-width: 1200px){ /* Logo */ .navbar-logo{ margin-right: auto; display: flex; align-items: center; } .header__inner a.navbar-logo img{max-width: 170px;} /* Quick links */ .global-nav__container{display: none!important;} /* Navbar*/ header.header.header.header--microsite .header__inner{ display: flex; justify-content: flex-end; } .new-navbar-wrap .navbar-logo{ display: none; /* Hiding logo */ } /* Manager button */ nav.nav--top ul li a{ height: 44px; padding: 10px; margin-left: 36px; display: flex; align-items: center; justify-content: center; text-align: center; } /* Menu button */ .mobile-menu-wrap{ height: 100%; display: flex; align-items: center; } button.mobile-menu{ margin: 0; margin-left: 8px; padding: 10px; border: none; background-color: unset; color: var(--color-paragraph-dark-grey); background-color: var(--color-background-default-grey); } button.mobile-menu:hover{ background-color: var(--color-background-hover-grey-lighter); } button.mobile-menu span{ display: none; } button.mobile-menu span.menu-visible{ display: block; } /* Navigation bar */ nav.new-navbar-wrap{ position: absolute; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); padding-bottom: 24px; display: none; flex-direction: column; justify-content: space-between; background-color: var(--color-brand-white); overflow: scroll; } nav.new-navbar-wrap::-webkit-scrollbar{width: 8px;} nav.new-navbar-wrap.menu-visible{ display: flex;} .navbar-items-main{ width: 100%; flex-direction: column; align-items: flex-start; } nav.new-navbar-wrap ul.navbar-items-main li.navbar-item-wrap ul.item-firstlevel li.item-sidelevel button span.material-symbols-outlined{ margin-right: 4px; padding: 2px; } .navbar-items-main li.navbar-item-wrap{ width:100%; } .navbar-items-main li.navbar-item-wrap button.navbar-item{ padding: 16px 20px; width: 100%; justify-content: space-between; font-size: var(--typography-platform-heading-S-size); } /* First level dropdown */ ul.navbar-item-dropdown.dropdown-open { position: relative; } ul.navbar-item-dropdown li, ul.navbar-item-dropdown li.item-sidelevel button{ width: 100%; font-size: var(--typography-paragraph-font-size-XL); } .new-navbar-wrap li a /* all links */, ul.navbar-item-dropdown li.item-sidelevel button /* buttons */{ padding: 12px 16px 12px 52px; } ul.navbar-item-dropdown li.item-sidelevel:hover button.sidelevel-trigger span, ul.navbar-item-dropdown li.item-sidelevel:focus-within button.sidelevel-trigger span{ transform: rotate(90deg); transition-duration: .25s; transition-timing-function: ease-in-out; } ul.navbar-item-dropdown li .menu-title /* role titles*/{ padding: 20px 16px 20px 52px; text-transform: uppercase; } /* ROLE dropdown */ /* - Titles */ .navbar-item-dropdown.item-firstlevel .menu-title{ font-size: var(--typography-paragraph-font-size-M); color: var(--color-brand-black); } .navbar-item-dropdown.item-secondlevel li /*catalog*/, .navbar-item-dropdown.item-firstlevel ul.item-role li /* role */{ padding-left: 30px; } ul.navbar-item-dropdown.item-firstlevel li.desktop-version{ display: none; } /* Language button */ .language-wrap{ padding: 50px 24px 0; justify-content: center; flex-direction: column-reverse; } .language-wrap #language-selector-header{ position: relative; } button.language-btn{ width: 100%; justify-content: center; } } /* FOOTER STUFF */ footer[role=contentinfo] { display: block !important; } .footer_company_info { display: none !important; } footer.footer { padding: 0 !important; margin: 0 !important; } /* Custom footer wrapper */ .custom-footer { background-color: var(--color-brand-black); display: block !important; width: 100%; padding: 0 100px; margin: 0; box-sizing: border-box; padding-top: 20px; } .custom-footer *, .custom-footer *::before, .custom-footer *::after { box-sizing: inherit; } /* newsletter + columns */ .custom-footer .footer-container { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 80px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* locale + legal links */ .custom-footer .footer-bottom { border-top: 2px solid var(--color-paragraph-dark-grey); margin-top: 10px; padding-left: 0; padding-right: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; } /* Newsletter */ .custom-footer .footer-newsletter { flex: 0 0 50%; max-width: 50%; min-width: 0; } .custom-footer .footer-newsletter h2 { font-size: 36px; font-weight: var(--typography-font-weight); margin-bottom: 0; color: var(--color-brand-white); padding-bottom: 0; } .custom-footer .footer-newsletter p.subtitle { font-size: 32px; color: var(--color-paragraph-dark-grey); font-weight: var(--typography-font-weight); margin-top: 0; max-width: 600px; } .footer-newsletter p.subtitle{ line-height: 48px; } .custom-footer .footer-newsletter form { display: flex; border: 1px solid var(--color-paragraph-dark-grey); border-radius: 8px; overflow: hidden; margin-bottom: 12px; margin-top: 55px; max-width: 600px; width: 100%; box-sizing: border-box; } .custom-footer .footer-newsletter #subscribeForm #emailInput{ flex: 1; padding: 12px 16px !important; border: none; font-size: 16px; background-color: transparent !important; color: var(--color-brand-white); transform: translateY(10px); } .custom-footer .footer-newsletter #subscribeForm #emailInput { background-color: transparent !important; color: var(--color-brand-white) !important; border: none !important; } .custom-footer .footer-newsletter input:focus { outline: none; box-shadow: none; } .custom-footer .footer-newsletter button { display: inline-flex; align-items: center; padding: 0 10px; background: transparent; border: none; font-size: 20px; color: var(--color-paragraph-dark-grey); cursor: pointer; } .custom-footer .footer-newsletter button svg { display: block; transform: translateY(10px); } .custom-footer .footer-newsletter button svg:focus { outline: none !important ; box-shadow: none !important; } /* Privacy notice */ .custom-footer .footer-newsletter .privacy-note { font-size: 14px; color: var(--color-background-hover-grey-lighter); line-height: 1.6; max-width: 600px; width: 100%; box-sizing: border-box; } .custom-footer .footer-newsletter .privacy-note a { color: var(--color-brand-white); text-decoration: underline; } .custom-footer .footer-newsletter .privacy-note a:hover { text-decoration: none; } /* Columns / links */ .custom-footer .footer-links { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: row; justify-content: space-between; gap: 30px; align-items: flex-start; min-width: 0; box-sizing: border-box; } .custom-footer .footer-links > div { flex: 1 1 0; min-width: 0; } .custom-footer .footer-links h4 { font-size: var(--typography-paragraph-font-size-M); color: var(--color-background-hover-grey-darker); font-weight: var(--typography-font-weight); text-transform: uppercase; margin-bottom: 4px; } .custom-footer .footer-links ul { list-style: none; padding: 0; margin: 0; line-height: 2; } /*.custom-footer .footer-links .material-symbols-outlined { display: inline-block; line-height: 1; transform: translateY(8px); margin-left: 4px; color:var(--color-background-hover-grey-darker) !important; font-weight: var(--typography-font-weight); font-variation-settings: 'FILL' 1; } */ .rrss ul{ padding-left: 30px; } .custom-footer .footer-links a { font-size: var(--typography-paragraph-font-size-M); color: var(--color-brand-white); cursor: pointer; text-decoration: none; } .custom-footer .footer-links a:hover { text-decoration: underline; } /* Bottom row */ .custom-footer .footer-locale { display: flex; align-items: center; gap: 8px; } .custom-footer .footer-locale button { display: inline-flex; align-items: center; gap: 8px; background-color: #1d1d1d; color: var(--color-brand-white); padding: 12px 20px; font-weight: var(--typography-font-weight); border: none; cursor: pointer; transition: background-color 0.2s ease-in-out; margin-bottom: 0; margin-top: 20px; } .custom-footer .footer-locale button:hover { background-color: var(--color-background-hover-grey-lighter); color: var(--color-brand-black); } /* iconos blancos dentro de los botones */ .custom-footer .footer-locale button svg, .custom-footer .footer-locale button .material-symbols-outlined { color: var(--color-brand-white) !important; fill: var(--color-brand-white) !important; stroke: var(--color-brand-white) !important; } .custom-footer .footer-locale button:hover svg, .custom-footer .footer-locale button:hover .material-symbols-outlined { color: #000000 !important; fill: #000000 !important; stroke: #000000 !important; } .term{ max-width: 150px; } .custom-footer .footer-strings { display: flex; gap: 20px; color: var(--color-paragraph-dark-grey); flex-wrap: wrap; justify-content: flex-end; transform: translateY(12px); } .custom-footer .footer-strings a { text-decoration: none; color: var(--color-brand-white); font-size: var(--typography-paragraph-font-size-S); } .custom-footer .footer-strings a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 1284px) { .custom-footer { padding: 0 32px; } .custom-footer .footer-newsletter p.subtitle { max-width: 900px; } .custom-footer .footer-links ul li a { white-space: nowrap; } .custom-footer .footer-newsletter form { max-width: 900px; } .custom-footer .footer-newsletter .privacy-note { max-width: 900px; } .custom-footer .footer-links h4 { margin-top: 20px; } .custom-footer .footer-container { flex-direction: column; gap: 24px; } .custom-footer .footer-newsletter { max-width: 100%; flex: 0 0 100%; } .custom-footer .footer-links { flex-direction: row; width: 100%; max-width: 100%; gap: 220px; } .custom-footer .footer-links > div { flex: 1 1 200px; } .custom-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 0; } .custom-footer .footer-strings { justify-content: flex-start; transform: translateY(0); } } @media (max-width: 768px) { .custom-footer { padding: 0 24px; } .custom-footer .footer-links { flex-direction: column; flex-wrap: nowrap; gap: 12px; width: 100%; } .custom-footer .footer-links > div { flex: 1 1 100%; width: 100%; } } @media (max-width: 1450px) { .custom-footer .footer-container { gap: 40px;} } @media (max-width: 1700px) { .custom-footer .footer-links .term a { white-space: normal; display: inline-block; line-height: 1.4; word-break: break-word; } } .custom-footer .footer-links a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; color: var(--color-brand-white); } .custom-footer .footer-links a:hover { text-decoration: underline; } .custom-footer .footer-links .material-symbols-outlined { display: inline-block; transform: none; position: relative; top: 1px; color: var(--color-background-hover-grey-darker) !important; font-variation-settings: 'FILL' 1; } .custom-footer .footer-links li { display: flex; align-items: center; } /* Legacy hidden */ .footer__company__info { display: none; } /* Footer locale container */ .footer-locale { position: relative; display:inline-block; } #transpicker:hover{ background: #f9f9f9; border-color: #ccc; } #language-current, #language-current-header { text-wrap: nowrap; } .language-list { position: absolute; top: 100%; left: 0; display: block; /* siempre block para tab */ opacity: 0; pointer-events: none; /* no interactuable mientras no está abierto */ transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; } .language-list.open { opacity: 1; pointer-events: auto; /* interactuable */ transform: translateY(0); } /* footer dropwdown up */ .footer-locale { position: relative; } #language-selector { bottom: 32px; } ul#language-selector{ margin-left: unset; } /* UNIFIED LANGUAGE DROPDOWNS - HEADER & FOOTER */ #language-selector, #language-selector-header { position: absolute; list-style: none; margin: 0; padding: 4px 0; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); background-color: var(--color-brand-white); min-width: 160px; z-index: 100; color: #333; } #language-selector li, #language-selector-header li, #language-selector li button, #language-selector-header li button { all: unset; display: block; text-align: left; padding: 8px 14px; font-size: 16px; font-family: inherit; color: #333; cursor: pointer; line-height: 1.5; transition: background 0.2s ease, color 0.2s ease; } #language-selector-header li #language-selector li:hover, #language-selector-header li:hover, #language-selector li button:hover, #language-selector-header li button:hover, #language-selector li button:focus, #language-selector-header li button:focus { color: #0056d2; outline: none; } /* Idioma activo */ #language-selector li.active, #language-selector-header li.active, #language-selector li button[aria-selected="true"], #language-selector-header li button[aria-selected="true"] { font-weight: 600; color: #0056d2; } /* Footer: abrir hacia arriba */ .footer-locale #language-selector { bottom: 100%; margin-bottom: 8px; } /* Header: abrir hacia abajo */ .language-wrap #language-selector-header { top: 100%; margin-top: 8px; } /* Animación uniforme */ .language-list { opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; } .language-list.open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* FOOTER old one*/ /* .footer__links{ margin-right: 0!important; } .footer .link{ padding-right: 0; } .footer__links .link:first-child{ display: none; } .footer__links .link:nth-child(3){ padding-left: 20px; } .footer a:hover{ text-decoration: underline; }*/ .footer__company__info{ display: none; }/* @media only screen and (max-width: 48em){ body{ min-width: 320px; } .footer__inner{ padding-bottom: 24px!important; text-align: end; } .footer__company__info { padding-left: 40px; margin-bottom: 0!important; } .footer__company__info, .footer__links { width: unset!important; } } @media only screen and (max-width: 31em){ .footer__inner{ flex-direction: column-reverse; align-items: flex-end!important; } .footer__links{ padding-bottom: 10px; } } /*STEPS SNIPPET .steps-snippet { display: flex; justify-content: center; padding: 0; box-sizing: border-box; width: 100%; overflow: hidden; } .steps-wrapper { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 1rem; box-sizing: border-box; } .step { background-color: var(--color-background-default-grey); padding: 1rem; text-align: left; border-radius: var(--card-border-radius); box-sizing: border-box; flex: 1 1 0; min-width: 0; } .card-title { font-size: var(--card-title-XS-size); font-weight: var(--typography-font-weight); font-family: var(--typography-font-family); margin-bottom: 0.5rem; } .step p { margin: 0; font-size: var(--typography-paragraph-font-size-M); color: var(--color-brand-black); font-family: var(--typography-font-family); } .arrow { font-size: 40px; color: var(--color-brand-black); flex-shrink: 0; } @media (max-width: 900px) { .steps-wrapper { flex-wrap: wrap; justify-content: center; } .step { flex: 1 1 100%; min-width: 140px; } .arrow { display: block; transform: rotate(90deg); margin: 0.5rem auto; } } /*TABLE RESPONSIVE */ .table-container{ min-width: 800px; max-width: 100%; } .scroll-top { overflow-x: scroll; overflow-y: hidden; transform: rotateX(180deg); } .scroll-top table { transform: rotateX(180deg); width: max-content; min-width: 1500px; width: 100%; } /* WebKit scroll styling */ .scroll-top::-webkit-scrollbar { height: 12px; } .scroll-top::-webkit-scrollbar-track { background: transparent; } .scroll-top::-webkit-scrollbar-thumb { background-color: #888; border-radius: 6px; } a{ /*text-decoration: underline;*/ color: var(--color-brand-blue); } /* FORM FILTER */ .specialselect input[type="text"] { width: 100%; height: 50px; border: 1px solid #ccc; border-radius: var(--card-border-radius); padding: 0 12px; font-size: var(--typography-paragraph-font-size-M); box-sizing: border-box; text-align: center; } /* select */ .specialselect { height: 50px !important; padding: 0 36px 0 12px; /* right padding extra for the icon */ font-size: var(--typography-paragraph-font-size-M); text-align: center; border: 1px solid #ccc; border-radius: var(--card-border-radius); box-sizing: border-box; cursor: pointer; /* native icon */ appearance: auto; -webkit-appearance: auto; } /* Main container */ .main-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; gap: 20px; width: 100%; max-width: 900px; padding: 0 10px; } /* First (label + input) */ #searchEntire { display: flex; width: 100%; gap: 20px; } /* First label */ #searchEntire label { flex: 1; /* 50% width */ display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; padding: 0 12px; /* it simulated the input padding */ box-sizing: border-box; font-size: var(--typography-paragraph-font-size-M); color: var(--color-brand-black); } /* Firt input */ #searchEntire input { flex: 1; /* 50% width */ min-width: 0; height: 50px; padding: 0 12px; font-size: var(--typography-paragraph-font-size-M); text-align: center; border: 1px solid #ccc; border-radius: var(--card-border-radius); box-sizing: border-box; } /* Second (label + input | label + select) */ .specialp-two { display: flex; width: 100%; } .specialp-two .input-group { flex: 1; } /* labels centered */ .specialp-two .input-group label { display: block; font-size: var(--typography-paragraph-font-size-M); margin-bottom: 6px; color: var(--color-brand-black); text-align: center; } .specialp-two .input-group + .input-group { margin-left: 20px; } /* labels above inputs */ .specialp-two.inline-labels .input-group { display: flex; align-items: center; gap: 10px; } .specialp-two.inline-labels .input-group label { margin: 0; text-align: left; } /* Responsive mobile phone */ @media (max-width: 600px) { .specialp-two { flex-direction: column; } .specialp-two .input-group + .input-group { margin-left: 0; margin-top: 20px; } #searchEntire { flex-direction: column; align-items: flex-start; } #searchEntire input { height: 50px !important; } } /* Placeholder */ .main-container input[type="text"]::placeholder { font-size: var(--typography-paragraph-font-size-M); color: var(--color-paragraph-dark-grey); font-style: normal; text-align: center; } .divider { font-weight: bold; } .main-container [type="text"]:focus, .specialselect:focus { border-color: var(--color-brand-blue); outline: none; } #entireSearch:focus { border-color: var(--color-brand-blue); outline: none; } @media (max-width: 600px) { #searchEntire { flex-direction: column; align-items: stretch !important; gap: 8px; } #searchEntire > label { height: auto !important; /* deja que el alto lo determine el texto */ min-height: auto !important; margin-bottom: 2px; /* un pequeño margen opcional */ border: none; /* opcional: quita borde si no lo quieres */ padding: 0; /* quita padding extra */ } #searchEntire input { margin-top: 0; margin-bottom: 0; /* asegura que el input no meta espacio extra */ } #searchEntire > .search-label, #searchEntire > p, #searchEntire > h3 { width: 100%; height: 50px !important; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; box-sizing: border-box; margin: 0; border: 1px solid #ccc; border-radius: var(--card-border-radius); background: transparent; } #searchEntire > *:first-child { width: 100%; height: 50px; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80; box-sizing: border-box; margin: 0; border: none; } #searchEntire input, #searchEntire .specialselect { width: 100%; height: 50px !important; min-height: 50px; -webkit-appearance: none; appearance: none; text-align: center; box-sizing: border-box; } }