/* Set the hero heading size and add more spacing on wide screens. */
.h1-hero-c1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .h1-hero-c1 {
        margin-bottom: 3rem;
    }
}

/* Forms.
--------------------------------------------------------------------------- */

/* Keep Select2 dropdowns above surrounding content. */
.select2-dropdown {
    z-index: 4051 !important;
}

@media (min-width: 768px) {
    .c-search-dropdown .select2-results__options:not(.select2-results__options--nested) {
        max-height: none !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .c-search-dropdown .select2-results__message {
        grid-column: 1 / -1;
    }
}

.select2-selection__choice__remove {
    float: right;
    margin-left: 2px;
}

/*
Force the display of `.invalid-feedback` for Duet Date Picker with Bootstrap 4.
See also `duet_date_picker.html`.
https://getbootstrap.com/docs/4.6/components/forms/#server-side
*/
duet-date-picker.is-invalid ~ .invalid-feedback,
duet-date-picker.is-invalid ~ div > .invalid-feedback {
    display: block;
}

/*
Force the display of `.invalid-feedback` for django-bootstrap5 25.2.
*/
.was-validated :invalid ~ div > .invalid-feedback,
.was-validated :invalid ~ div > .invalid-tooltip,
.is-invalid ~ div > .invalid-feedback,
.is-invalid ~ div > .invalid-tooltip {
    display: block;
}
/* Also fix the inline positioning of the div[id$=_error] */
.was-validated :invalid ~ div[id$=_error],
.was-validated :invalid ~ div[id$=_error],
.is-invalid ~ div[id$=_error],
.is-invalid ~ div[id$=_error] {
    width: 100%;
}

/* Give an invalid file drop target the theme's danger border. */
.form-group.is-invalid > .file-dropzone {
    border: 2px dashed var(--bs-danger);
}

/*
The theme only renders the required asterisk on direct .form-label/label children,
so checkbox labels (nested in .form-check) never get it. Restore it here.
*/
.form-group-required-check .form-check-label::after {
    content: " *";
    font-weight: 700;
}

/* Make Select2 form controls fill their form group. */
.form-group > .select2-container--bootstrap-5 {
    width: 100% !important;
}

/* Style the full-width area where users drop files to upload them. */
.file-dropzone {
    width: 100%;
    border: 2px dashed var(--bs-gray-700);
    border-radius: var(--bs-border-radius);
    text-align: center;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

/* Indicate that a file is being dragged over the drop target. */
.file-dropzone.highlighted {
    opacity: 0.5;
}

/* Visually hide the native file input without removing it from screen readers. */
input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: -1;

    /*
     Limit the width the input so that it does not overflow its container.
     Avoids using a zero width as this would remove it from screen readers.
     */
    width: 1px;
}

/* Restore the native input appearance inside the multi-file component. */
.c-multi-file-input input[type="file"] {
    opacity: 1;
    position: static;
    z-index: auto;
    width: auto;
}

/* Dropdown menus.
--------------------------------------------------------------------------- */

/*
Make dropdown menus scrollable in case there are too many items.
Credits go to https://stackoverflow.com/a/19229738
*/
.dropdown-menu {
    max-height: 360px;
    overflow-y: auto;
}

/* Allow long selected values in Select2 controls to wrap onto multiple lines. */
.select2-selection__rendered {
    white-space: break-spaces !important;
}

/* Keep disabled search buttons at full opacity. */
.js-search-button {
    opacity: 100% !important;
}


/* Dim and cover diagnosis forms while their eligibility state is unresolved.
---------------------------------------------------------------------------- */

.js-shroud {
    position: relative;
    opacity: 50%;
}

.js-shroud::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Bootstrap components scale from 0 to 3: https://getbootstrap.com/docs/4.6/extend/approach/#z-index-scales */
    z-index: 4;
}

/* Keep Dropzone upload errors visible and style their error marker.
--------------------------------------------------------------------------- */

/* By default, an error message is displayed only on hover */

.dropzone .dz-preview.dz-error .dz-error-message {
    opacity: 1;
    pointer-events: auto;
    top: -15px;
    background: var(--bs-red);
}

.dz-error-mark {
    background: var(--bs-red);
    border-radius: 50%;
}

.dropzone .dz-preview .dz-error-message::after {
    border-top: 6px solid var(--bs-red);
    border-bottom: 0 solid var(--bs-danger) !important;
    bottom: -5px !important;
    top: auto !important;
}

/* To be integrated to the global theme.
--------------------------------------------------------------------------- */

/* Make list items transparent so the surrounding surface shows through. */
.list-group-item {
    background-color: transparent;
}

/* To be discussed.
--------------------------------------------------------------------------- */

/* Let badges wrap and remove their extra spacing in employee record lists. */
.employee-records-list .badge {
    white-space: normal;
    margin: 0;
}

/* Display the branded FranceConnect button using its provided images. */
.itou-france-connect {
    display: inline-block;
    height: 56px !important;
    width: 209px;
    margin: auto;
    /*margin-bottom: 8px;*/
    background-image: url("../img/franceconnect-bouton.92142f0566ac.svg");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.itou-france-connect:hover {
    background-image: url("../img/franceconnect-bouton-hover.58153abbd396.svg");
}


/* Wizard progress bar widths are completion percentages. */
.progress-bar-20 {
    width: 20%;
}

.progress-bar-25 {
    width: 25%;
}

.progress-bar-33 {
    width: 33%;
}

.progress-bar-40 {
    width: 40%;
}

.progress-bar-50 {
    width: 50%;
}

.progress-bar-60 {
    width: 60%;
}

.progress-bar-66 {
    width: 66%;
}

.progress-bar-75 {
    width: 75%;
}

.progress-bar-80 {
    width: 80%;
}

.progress-bar-100 {
    width: 100%;
}

/* Dashboard
--------------------------------------------------------------------------- */
/* Apply the matching artwork to dashboard card headers. */
.c-box__header--dora {
    background-image: url("../img/dashboard/card-header-bg-dora.05449f0ab753.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.c-box__header--diagoriente {
    background-image: url("../img/dashboard/card-header-bg-diagoriente.fbe18a8f6f35.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.c-box__header--mon-recap {
    background-image: url("../img/dashboard/card-header-bg-mon-recap-booklet.536840f3886f.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

/* Header artwork for the employee record card. */
.c-box__header--immersion-facile {
    background-image: url("../img/dashboard/card-header-bg-immersion-facile.96ef63ed5c94.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

/* Use the statistics banner image as the pilotage page background. */
.c-banner--pilotage {
    background-image: url("../img/dashboard/banner-statistiques-pilotage-bg.d04c7f3ba1c0.jpg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

/* Keep selected values on one line in wide company and job-seeker forms. */
.w-lg-400px .select2-selection__rendered {
    white-space: nowrap !important;
}

/* Make the Select2 control fill the wide job-seeker form. */
.w-lg-400px select + .select2-container--bootstrap-5 {
   width: 100% !important;
}

/* Keep modal content readable when the modal is inside a table cell. */
table.table td > .modal .modal-content {
    text-align: left;
    font-size: var(--bs-body-font-size);
}

/* Add more vertical spacing between checkbox choices in this form. */
.form-checkbox-greater-spacing > .form-check {
    margin-bottom: .75rem;
}

/* Display the branded ProConnect button and its hover image. */
.proconnect-button {
  background-color: transparent !important;
  background-image: url("../img/pro_connect_bouton.affdd9a7f468.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 214px;
  height: 56px;
  display: inline-block;
}

.proconnect-button:hover {
  background-image: url("../img/pro_connect_bouton_hover.ea33bb235d38.svg");
}

/* Keep action and modal tooltips above their surrounding content. */
.c-box--action-tooltip {
  z-index: 1050 !important;
}

.modal-tooltip {
  z-index: 3055 !important;
}

/* Hide important-status badges while a mobile navigation item is expanded. */
#offcanvasNav .offcanvas-body .nav-link[aria-expanded=true] {
    .badge.bg-important,
    .badge.bg-important-lighter {
        display: none !important;
    }
}

/* Login page (pre_login): dark blue background while keeping the white header. */
.p-login .s-main {
    background-color: var(--bs-primary, #000638);
}

.p-login .s-main .s-title-02 {
    background-color: transparent;
    position: static;
}

.p-login .s-main .s-title-02:after {
    display: none;
}

.p-login .s-section hr {
    border-color: rgba(255, 255, 255, .4);
}

.p-login .s-section hr[data-it-text]:after {
    background-color: var(--bs-primary, #000638);
    color: #fff;
}