/* ============================================================================= */
/* ========================== CUSTOMER nordzucker ============================== */
/* ============================================================================= */
/* ========= LAST UPDATE: 09/01/24 / VERSION: v02  / AUTHOR: Taymoor =========== */
/* ============================================================================= */

/* =============================================================================
= GLOBAL SETTINGS ==============================================================
================================================================================ */

html {
    font-family: 'Nunito', 'Open Sans', 'Helvetica Neue', 'Lucida Grande', Helvetica, Arial, sans-serif;
}

/* minimize padding for card mode page ================================== */
.wide:not(.without-page-background) .page.staticPage  .page-content>.scroller {
    padding-top: 2%;
}

.wide:not(.without-page-background) .page.staticPage  .page-content>.scroller .translation-toggle-top-position {
    padding-top: 1px;
}

#breadcrumbs:not(empty) {
    margin-bottom: 10px;
}

/* Remove padding left for widget title on card mode page ======================= */
.wide:not(.without-page-background) .page-content .content-widget-wrapper:not(widget-on-card)>h2.content-widget-title,
.mobile:not(.without-page-background) .page-content .content-widget-wrapper:not(widget-on-card)>h2.content-widget-title span {
    padding-left: 1px;
}

/* Notification bubble ================================== */
a.notification-bell span.notifications__unseen-count,
.item .unread-count,
.mobile .header-button-sidebar::before {
    background-color: #8BBC07;
}

.desktop .app-header .notifications__unseen-count {
    right: -1px 
}

.desktop #mega-menu .second-level-flyout .unread-count {
    left: -10px;
    top: -9px;
}


/* =============================================================================
= Link Tile Widget =============================================================
================================================================================ */

/* Border Radius ====================================================== */
.quick-links-wrapper .quick-links-widget.type-tiles li {
    border-radius: 7px;
}

/* Two links in a row (small column )================================== */
.desktop .column-33 .quick-links-wrapper  .quick-links-widget.type-tiles li:nth-child(odd){
    margin-inline-start: 0;
}

.desktop .column-33 .quick-links-widget.type-tiles li:nth-child(3n+1),
.desktop .column-33 .quick-links-widget.type-tiles.tile-layout-2 li,
.desktop .column-33 .quick-links-widget.type-tiles.tile-layout-5 li:nth-child(-n+3),
.desktop .column-33 .quick-links-widget.type-tiles.tile-layout-7 li:nth-child(6),
.desktop .column-33 .quick-links-widget.type-tiles.tile-layout-3 li {
    margin-inline-start: 2%;
}

.desktop .column-33 .quick-links-widget.type-tiles.tile-layout-7 li:nth-child(5) {
    margin-inline-start: 0%;
}

.desktop .column-33 .quick-links-wrapper  .quick-links-widget.type-tiles li {
    width: 48%;
}

/* Fix branding color (to over-write widget color)================== */
.page .quick-links-wrapper  .quick-links-widget.type-tiles li {
    background-color: #00223C !important;
}

.page .quick-links-wrapper  .quick-links-widget.type-tiles li span,
.page .quick-links-wrapper  .quick-links-widget.type-tiles li a {
    color: #fff !important;
}

/* Two lines of text on mobile devices ============================== */
.compact .quick-links-widget.type-tiles li a{
    white-space: normal;
    line-height: 12px;
    padding-top: 50px;
}

.compact .quick-links-widget.type-tiles li .icon {
    line-height: 38px;
}

.mobile .quick-links-widget.type-tiles .image {
    background-size: 36px 36px;
}

/* Special Tiles  ============================== */

.plugin-65ac278d5f2b263447342e1e .quick-links-widget--tiles .quick-links-widget__list--layout-5 {
  --quick-links-widget-item-size: 17.333%;
}


/* =============================================================================
= NewsStage Widget =============================================================
================================================================================ */
/* Read more link ============================================= */
.news-slider-body-wrapper .news-feed-post-teaser a > .read-more {
    color: #99BAE3;
}

/* Fix the height of news stage widgets ============================ */
.desktop .news-slider-layout-gradient .news-slider-content-wrapper .news-slider-inner-content-wrapper{
    background: linear-gradient(180deg, rgba(0, 34, 60, 0) 0%, rgba(0, 34, 60, 0.9) 70.77%); 
    padding: 36px 16px 12px 16px;
    position: absolute;
    width: 100%;
    margin-bottom: 0;
}

.desktop .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-image::after,
.desktop .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-video div::after,
.desktop .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-media-dummy::after {
    background: linear-gradient(0deg, rgb(0, 34, 60) 0.8%, transparent 35%);   
}

.desktop .news-slider-slide.swiper-slide article {
    background-color: transparent !important;
}

.desktop .news-slider-layout-gradient .news-slider-content-wrapper .news-slider-inner-content-wrapper .news-feed-post-teaser,
.desktop .news-slider-layout-gradient .news-slider-content-wrapper .news-slider-inner-content-wrapper h2.news-feed-post-headline{
    text-shadow: none;  
}

.desktop .swiper-wrapper .news-slider-content-wrapper .feed-post-channel-link, 
.desktop .news-slider-layout-gradient .swiper-wrapper .news-slider-inner-content-wrapper .feed-post-channel-link{
    padding: 3px 8px; 
    font-weight: 800;
}

.desktop .news-stage-wrapper .news-slider-layout-overlay .news-slider-inner-content-wrapper{
    padding: 24px 32px;
}

.desktop .news-stage-wrapper .news-slider-layout-overlay .news-slider-inner-content-wrapper .feed-post-channel-link{
    padding: 3px 0; 
    font-weight: 800; 
}

.desktop .news-stage-wrapper .news-slider-layout-overlay .news-slider-content-wrapper{
    margin-top: 20px; 
}

/* Align Newsstage widgets from different columns ========================== */
.desktop .column-33 .news-stage-wrapper .news-slider-pagination {
    display: none;
}

.desktop .newsstage-section .column-33 {
    width: calc(33.3333% -8px);
    max-width: calc(33.3333% -8px);
    margin-inline-start: 15.9px;
}

.desktop .column-33 .news-stage-wrapper:nth-child(2){
    margin-top: 12.5px !important;
}

/* Gradient for mobile ================================================== */
.mobile .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-image::after,
.mobile .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-video div::after,
.mobile .news-slider-layout-gradient .news-slider-media-wrapper .news-feed-post-media-dummy::after {
    background: linear-gradient(0deg, rgb(0, 34, 60) 0.8%, transparent 35%); 
}

.mobile .news-slider-layout-gradient .slide-post {
    background: rgb(0, 34, 60); 
}

.mobile .news-slider-layout-gradient .news-feed-post-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zoom-in on hover ======================================== */
.content-widget-wrapper .news-stage-wrapper:hover img{
    transform: scale(1.05);
    transition: 0.2s ease 0s;
}

/* Rounded Corner for news stage ================================= */

.desktop .content-widget-wrapper.news-stage-wrapper img,
.desktop .content-widget-wrapper.news-stage-wrapper .news-feed-post-image,
.desktop .content-widget-wrapper.news-stage-wrapper .swiper.swiper-initialized,
.desktop .news-slider-container.news-slider-layout-gradient .news-slider-inner-content-wrapper,
.desktop .news-slider-container.news-slider-layout-gradient .news-slider-content-wrapper,
.desktop .news-slider-container.news-slider-layout-gradient .news-slider-media-wrapper {
    border-radius: 7px;
}

.desktop .column-66 .content-widget-wrapper.news-stage-wrapper img,
.desktop .column-66 .content-widget-wrapper.news-stage-wrapper .news-feed-post-image,
.desktop .column-66 .content-widget-wrapper.news-stage-wrapper .swiper.swiper-initialized,
.desktop .column-66 .news-slider-container.news-slider-layout-gradient .news-slider-inner-content-wrapper,
.desktop .column-66 .news-slider-container.news-slider-layout-gradient .news-slider-content-wrapper,
.desktop .column-66 .news-slider-container.news-slider-layout-gradient .news-slider-media-wrapper {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* =============================================================================
= Buttons ======================================================================
================================================================================ */

/* Fix branding color (to over-write button widget color)============= */
.page .button-wrapper .button-widget a.button-block-link.ui-commons__button-widget {
    background-color: #8BBC07;
    color: #fff;
}

/* Padding for button without card mode ============================ */
.mobile .button-wrapper:not(.button-wrapper.widget-on-card) .button-widget {
    padding: 15px;
}

/* =============================================================================
= Newsfeed Widget  =============================================================
================================================================================ */
/* Highlighted Button (Important) in Newsfeed ===================== */

.page .news-feed-post-badges .news-feed-post-badge.type-highlighted {
    background-color: #8BBC07 !important;
}

/* Newsfeed Widget ======================================== */
.desktop .news-feed-widget .news-feed-list .news-feed-post {
    border-radius: 7px;
}

/* =============================================================================
= User Profile + Avatar ========================================================
================================================================================ */
.user-profile #up-profile-image .ds-avatar.ds-avatar-default,
.page .user-profile-widget span.user-pic,
.page .ui-commons__create-post-widget span.user-pic {
    background: #EF7C00;
    color: #fff;
}

.network-scroller li span.user-pic,
.comments-section span.user-pic,
#staffbase-ui-portal-container span.user-pic,
.profile-header .actor span.user-pic,
[data-menu-item-id="user-settings"] span.user-pic{
    background-color: #EF7C00 !important;
    color: #fff !important;
}

/* =============================================================================
= Plugins Customization ========================================================
================================================================================ */
[data-plugin-id="calendar"].desktop body .iframe iframe{
    width: 80% !important;
    margin-left: 9%;
}

/* =============================================================================
= Hidden Items =================================================================
================================================================================ */
/* Hide icons for drop-down menu items ===================== */
#mega-menu .drop-down-ul .item span span.we-icon{
    display: none;
}

/* =============================================================================
=  ==============   The below CSS is not written by Staffbase   ================
================================================================================ */


/* =============================================================================
= IMS ==========================================================================
================================================================================ */
.imslvl0 > .content-widget-title,
.imslvl1 > .content-widget-title,
.imslvl2 > .content-widget-title,
.imslvl3 > .content-widget-title {
    text-align: center !important;
}
.imslvl1 > div {
    background-color: #007EC3 !important;
}
.imslvl2 > div {
    background-color: #99BAE3 !important;
}
.imslvl3 > div {
    background-color: #405B4B !important;
}
.imslvl1box, .imslvl2box, .imslvl3box {
    padding: 15px !important;
    font-size: 16px !important;
    text-decoration: none !important;
    white-space: normal !important;
}
.imslvl1box {
    background-color: #7D8080 !important;
}

.imslvl2box {
    background-color: #007EC3 !important;
}

.imslvl3box {
    background-color: #8BBC07 !important;
}

/* =============================================================================
= Hide plugins =================================================================
================================================================================ */


/* =============================================================================
= User profile adjustments =====================================================
================================================================================ */

a[role="button"][href^="https://teams.microsoft.com/l/chat/0/0?users="]{
    background-color: #004798 !important;
    color: #FFFFFF !important;
}
a[role="button"][href^="https://teams.microsoft.com/l/chat/0/0?users="]:hover{
    background-color: #00223C !important;
    color: #FFFFFF !important;
}

svg[data-testid="slack-icon"] {
    display:none !important;
} 
svg[data-testid="slack-icon"] > path {
    d: path('M9.57558 6.97671C9.57558 5.22674 10.9942 3.80811 12.7442 3.80811C14.3234 3.80811 15.6328 4.96339 15.8733 6.4749C16.2971 5.76886 17.0701 5.29639 17.9535 5.29639C19.2925 5.29639 20.3779 6.38184 20.3779 7.72081C20.3779 8.39147 20.1056 8.99853 19.6655 9.43745C20.2897 9.60203 20.75 10.1704 20.75 10.8464V14.6108C20.75 16.4601 19.2509 17.9592 17.4017 17.9592H17.3895C17.1343 17.9592 16.8853 17.9306 16.6457 17.8762C15.7933 19.2315 14.299 20.1494 12.5765 20.1915L12.5582 20.192L12.5398 20.1915C10.1067 20.132 8.12662 18.3252 7.77092 16H4.66654C4.29842 16 4 15.7016 4 15.3335V8.66654C4 8.29842 4.29843 8 4.66654 8H9.74445C9.63498 7.67899 9.57558 7.33479 9.57558 6.97671ZM15.6076 8.33522C15.7125 8.73661 15.9176 9.09747 16.1946 9.3894H14.7983C15.1371 9.10065 15.4144 8.74177 15.6076 8.33522ZM15.6016 16.6566C15.0764 17.8255 13.9195 18.651 12.5582 18.6915C10.9517 18.6438 9.63215 17.5028 9.29661 16H11.3335C11.7016 16 12 15.7016 12 15.3335V10.8894H15.9012V15.1573L15.9014 15.166C15.9138 15.6983 15.8052 16.2034 15.6016 16.6566ZM17.4012 10.8894H19.25V14.6108C19.25 15.6316 18.4225 16.4592 17.4017 16.4592H17.3894C17.3437 16.4592 17.2984 16.4575 17.2536 16.4543C17.3592 16.034 17.4109 15.5932 17.4012 15.1402V10.8894ZM11.0756 6.97671C11.0756 6.05517 11.8226 5.30811 12.7442 5.30811C13.6657 5.30811 14.4128 6.05517 14.4128 6.97671C14.4128 7.89826 13.6657 8.64532 12.7442 8.64532C12.4627 8.64532 12.1975 8.57562 11.9649 8.45254C11.8859 8.21935 11.6813 8.04407 11.4317 8.00719C11.2086 7.72347 11.0756 7.36563 11.0756 6.97671ZM17.0291 7.72081C17.0291 7.21026 17.443 6.79639 17.9535 6.79639C18.464 6.79639 18.8779 7.21026 18.8779 7.72081C18.8779 8.23135 18.464 8.64522 17.9535 8.64522C17.443 8.64522 17.0291 8.23135 17.0291 7.72081ZM8.43124 10.5033H9.79497V9.78296H6.20502V10.5033H7.56241V14.2169H8.43124V10.5033Z') !important;
}

a[role="button"][href^="https://www.linkedin.com/in"]{
    background-color: #007EC3 !important;
    color: #FFFFFF !important;
}
a[role="button"][href^="https://www.linkedin.com/in"]:hover{
    background-color: #004798 !important;
    color: #FFFFFF !important;
}
svg[data-testid="linkedin-icon"] > path {
    fill: white !important;
}