/* Summary */
/* 01 — Fonts */
/* 02 — Variables */
/* 03 — Global Styles */
/* 04 — Background */
/* 05 — Widgets */
/* 06 — Gadgets */
/* 07 — Footer */

/*=================================================================
                            01 — Fonts
==================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');


/*=================================================================
                            02 — Variables
==================================================================*/
:root {
    /* Custom Font */
    --lumx-custom-typography-font-family: "Poppins", sans-serif;

    /* Custom Font Size */
    --mf-title-page: 40px;
    --lumx-typography-custom-publish-info-font-size: 12px !important;

    /* Custom Logo Size */
    --lumx-app-header-logo-height: 40px !important;

    /* Custom Page Title */
    --lumx-typography-custom-title1-font-family: "Nunito", sans-serif !important;
    --lumx-typography-custom-title1-font-size: 48px !important;
    --lumx-typography-custom-title1-font-weight: 800 !important;

    /* Introduction */
    --lumx-typography-custom-intro-font-size: 20px !important;
    --lumx-typography-custom-intro-font-weight: 500 !important;

    /* Font Weight */
    --lumx-typography-font-weight-bold: 500 !important;
}


/*=================================================================
                            03 — Global Styles
==================================================================*/
/* ========== General Styles ========== */
body,
body.theme-lumapps,
body.front-office {
    font-family: var(--lumx-custom-typography-font-family); 
    background-color: #ffffff;
}

/* ========== Fixed Background ========== */
.component-row--fix-header,
.content-module {
    background-attachment: fixed!important; 
    background-size: cover!important; 
    background-image: url(https://marrel.app.lumapps.com/serve/5816664219518109-2968257231395497/Fond-home.jpg?contentDisposition=inline)!important;  

}
.component-row--fixed-row {
    background-attachment: fixed!important; 
}

/* ========== Content Lists tabs ========== */
.lumx-tabs__link--is-active span,
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) span {
    font-size: 15px !important;
}
.lumx-tabs--theme-light .lumx-tabs__link--is-active:after {
    border-color: #000000 !important;
}

/*=================================================================
                        05 — Widgets
==================================================================*/
/* ========== Widget Titles ========== */
.widget-header__title {
    font-weight: 600 !important;
}

/* ========== Widget Footers ========== */
.widget-footer__label {
    text-transform: uppercase !important;
}

/* ========== Buttons ========== */
.widget--bouton {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.widget--bouton:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-4px);
}
.widget--bouton::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 50% dark overlay */
    z-index: 1;
}
.widget--bouton > .widget-content { /* Make sure the content appears above the overlay */
    position: relative;
    z-index: 2;
}
.widget--bouton .lumx-typography-title {
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 24px !important;
    text-align: center;
}
.widget--bouton .lelab-marketplace-button-image {
    width: 32px !important;
}

/* ========== Title Section ========== */
.widget--shared-titre-section .widget-html div {
    width: fit-content !important;
}
.weconnect-banner {
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    font-family: "Nunito", sans-serif;
    box-sizing: border-box;
}    
.weconnect-wrapper,
.weconnect-wrapper-black {
    display: inline-flex;
    align-items: center;
    padding: 0px 20px;
    border-left: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    border-radius: 10px;
}
.weconnect-wrapper-black {
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;    
}
.weconnect-text,
.weconnect-text-black {
    color: #ffffff;
    font-weight: 800;
    font-size: 48px !important;
    white-space: nowrap;
    outline: none;
}
.weconnect-text-black {
    color: #000000;
}

/* ========== Title Section Petit ========== */
.widget--shared-titre-section-petit p,
.widget--shared-titre-section-petit p span  {
    font-family: "Nunito", sans-serif !important;
    line-height: 1 !important;
}

/* ========== Title Section Souligne ========== */
.widget--shared-titre-section-souligne p {
    font-family: "Nunito", sans-serif !important;
    font-weight: 600 !important;
}

/* ========== Weather ========== */
.widget--weather .lumx-typography-headline {
    font-weight: 500 !important;
}

/* ========== Welcome Message ========== */
.widget-welcome {
    font-size: var(--mf-title-page) !important;
    font-family: "Nunito", sans-serif !important;
    font-weight: 800 !important;
}

/* ========== Widget White Opacity ========== */
.widget--shared-widget-blanc-opacite,
.widget--shared-widget-blanc-opacite-200,
.widget--shared-widget-blanc-opacite-bordure {
    background-color: rgba(255, 255, 255, 0.5) !important; /* White with 50% opacity */
    backdrop-filter: blur(2px) !important; /* Blurs what's behind the element */
    -webkit-backdrop-filter: blur(10px) !important; /* For Safari */    
}
.widget--shared-widget-blanc-opacite-bordure a {
    text-decoration: none !important;
}

/* ========== Widget Grey Opacity ========== */
.widget--shared-widget-gris-opacite {
    background-color: rgba(204, 204, 204, 0.4) !important; /* White with 50% opacity */
    backdrop-filter: blur(2px) !important; /* Blurs what's behind the element */
    -webkit-backdrop-filter: blur(10px) !important; /* For Safari */    
}

/* ========== Communities ========== */
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected {
    background-color: #E2E2E2 !important;
    color: #414141 !important;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:before {
    border-color: #E2E2E2 !important;
}

/* ========== Logos HR Page ========== */
.widget--shared-logos .lumx-thumbnail:not(.lumx-thumbnail--aspect-ratio-original) .lumx-thumbnail__image {
    height: auto !important;
    object-fit: unset !important;
    width: auto !important;
    margin: 0 auto !important;
}
.widget--shared-logos .lumx-thumbnail--aspect-ratio-horizontal:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: unset !important;
}
.widget--shared-logos .lumx-thumbnail__background {
    display: flex;
    justify-content: flex-end; /* Aligns image to the right */    
    width: 260px !important;
    margin: 0 auto !important;
}
.widget--shared-logos .block-page-preview__thumbnail-wrapper {
    margin-bottom: 0 !important;
}

/* ========== Annuaire - Hide Users Funtion ========== */
.user-profile--new .user-profile-header__highlighted-fields {
    display: none;
}
.user-profile--new .lumx-user-block__fields {
    display: none;
}

/* ========== Formulaires et Catalogue d'applications Hide Icons ========== */
.widget--shared-hide-apps-icons .directory-entry-block__thumbnail-wrapper,
.widget--shared-widget-blanc-opacite-bordure .directory-entry-block__thumbnail-wrapper {
    display: none;
}


/*=================================================================
                        06 — Gadgets
==================================================================*/
/* ========== Alert Message / Content List ========== */
.widget--shared-message-alerte .lumx-link__content,
.widget--shared-message-alerte-rh .lumx-link__content,
.widget--smart-content .lumx-link__content {
    font-weight: 700 !important;
    font-size: 18px !important;
}
.widget--smart-content .block-page-preview__title {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    height: 32px;
    padding: 10px 0;
}
.widget--smart-content .block-page-preview__link {
    position: absolute;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}
/* Ensure the link container aligns the icon and text together */
.widget--smart-content .block-page-preview__link {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}
/* Insert the icon inside a perfectly centered circular background */
.widget--smart-content .block-page-preview__link::before {
    content: "";
    display: inline-block;
    width: 32px; /* Size of the circle */
    height: 32px;
    border-radius: 50%; /* Makes it a perfect circle */
    /* Center the icon inside the circle */
    background-image: url("https://marrel.app.lumapps.com/serve/5816664219518109-5615991172140515/warning_circle.svg?contentDisposition=inline");
    background-size: 70%; /* Adjusts the size of the icon inside */
    background-repeat: no-repeat;
    background-position: center; /* Ensures the icon is centered */
}
.widget--shared-message-alerte-rh .block-page-preview__link::before {
    background-image: url("https://marrel.app.lumapps.com/serve/5816664219518109-6478907072313515/warning_circle-black.svg?contentDisposition=inline&isOriginalSize=true");
}

/*=================================================================
                            07 — Footer
==================================================================*/
.mf-footer {
    width: 100%;
    background-color: #000;
    display: flex;
    justify-content: center; /* Center the container */
    align-items: center;
    height: 107px;
    padding: 0 24px;
    box-sizing: border-box;
}
.mf-footer-container {
    width: 100%;
    max-width: 1152px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
}
.mf-footer-column.left {
    display: flex;
    align-items: center;
}
.mf-footer-logo {
    height: 40px;
}
.mf-footer-column.right {
    color: white;
    font-family: "Nunito", sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    text-align: right;
}
@media (max-width: 1280px) {
  .mf-footer-container {
    max-width: 980px;
  }
}
@media (max-width: 1024px) {
  .mf-footer-container {
    max-width: 100%;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 12px 12px;
  }

  .mf-footer-column.right {
    text-align: center;
  }
}