/*
 * SPDX-FileCopyrightText: 2023 Syndicat mixte Gironde Numérique
 *
 * SPDX-License-Identifier: Apache-2.0
 */

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

a:not(.fr-btn) {
    box-shadow: none !important;
}

/* Reset bootstrap reset... */
a:hover {
    text-decoration: initial;
    color: initial;
}

body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

body>main {
    flex-grow: 1;
}

/** fix footer position on modal opened */
:root[data-fr-scrolling] body {
    position: unset;
}

/** fixed footer position */

/* .fr-header__body {
    background: #407797;
    background: linear-gradient(90deg, #407797 0%, #ffffff 80%);
} */

.gn-logo {
    background-image: url(../img/gn_logo_court.svg);
    background-repeat: no-repeat;
    background-size: 250px 92px;
    background-position: -20px -10px;
    height: 70px;
    width: 210px;
}

@media screen and (min-width: 78em) {

    .fr-container,
    .fr-container-lg,
    .fr-container-md,
    .fr-container-sm {
        max-width: 95rem !important;
    }
}

.bootstrap-table .form-control-sm.search-input {
    width: 350px;
}

.bootstrap-table .fixed-table-toolbar .columns-right {
    height: 31px;
}

.bootstrap-table .fr-badge {
    font-size: 12px !important;
}

.fr-tag .badge-light {
    font-size: 15px;
}

.fr-tag .spinner-border {
    width: 12px !important;
    height: 12px !important;
}

.btn-sm {
    padding: 0.1rem 0.6em !important;
}

.fr-error-text {
    display: none;
}

label {
    margin-bottom: 0 !important;
}

.bootstrap-table .fixed-table-toolbar input[type="checkbox"] {
    appearance: auto;
}

.fr-footer__brand .fr-logo:before {
    background-image: url(../img/gn_puce.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
}

.fr-footer__brand .fr-logo.none:before {
    background: none;
}

.fr-footer__brand .fr-logo:after {
    background: none;
}

/** fix barre horizontale dans les liens de pagination suite à dsfr 1.4.1 */
[href="javascript:void(0)"] {
    background-image: none;
}

.pagination .page-item:not(.active) .page-link:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/** fix checkboxes in bootstrap-table after dsfr styles */
.bs-checkbox input[type="checkbox"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    height: auto;
    width: auto;
}

.fr-btn.gn-btn-enable:not([disabled]) {
    background-color: var(--background-flat-success);
}

.fr-btn.gn-btn-disable:not([disabled]) {
    background-color: var(--background-flat-error);
}

.gn-text--lower {
    text-transform: lowercase;
}

.bootstrap-table .fixed-table-loading {
    min-height: 5rem;
}

.bootstrap-table [href] {
    background-image: none;
}

#message-area:empty {
    display: none;
}

/** spiner GN */
.gn-spinner {
    color: var(--background-action-high-blue-france);
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gn-spinner 0.75s linear infinite;
}

@keyframes gn-spinner {
    to {
        transform: rotate(360deg);
    }
}

.gn-ajax-loading--message {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
}

.fr-header__logo img.domain-logo {
    height: 70px;
}

h5.fr-card__title {
    order: 0 !important;
    margin-bottom: 2rem !important;
}

.gn-main-content>header {
    justify-content: space-between;
    padding: 2rem;
    background-color: var(--background-contrast-info);
    border: 1px solid var(--border-default-grey);
    border-bottom: none;
}

.gn-main-content>header h1 {
    margin-bottom: 0;
}

.gn-tabs {
    border: 1px solid var(--border-default-grey) !important;
    border-bottom: 4px solid var(--background-action-high-blue-france) !important;
}

.gn-tabs .fr-tabs__list {
    padding: 0;
    background-color: var(--background-contrast-info);
    overflow: initial;
}

.gn-tabs .fr-tabs__list li:first-of-type .fr-tabs__tab {
    margin-left: 0;
}

.gn-tabs .fr-tabs__panel {
    padding: 1.5rem 0 0;
}

.gn-tabs .fr-tabs__tab:not([aria-selected="true"]) {
    background-color: var(--grey-1000-50);
}

.gn-main-content .table-bordered {
    table-layout: fixed;
}

.gn-main-content .table-bordered,
.gn-main-content .table-bordered th,
.gn-main-content .table-bordered td {
    color: var(--text-default-grey);
    border: 0;
}

.gn-main-content .table-bordered th {
    font-size: 0.75rem;
    line-height: 1.7;
}

.gn-main-content .table-bordered td {
    font-size: 0.75rem;
    line-height: 1;
}

.gn-main-content .table-bordered thead {
    background-color: var(--background-contrast-info);
    border-bottom: 1px solid var(--border-default-grey);
}

.gn-main-content .bootstrap-table .fixed-table-container .table.table-sm .th-inner {
    padding: 1rem 0 0.35rem 0.5rem;
}

.gn-main-content .table-bordered tr {
    border-bottom: 1px solid var(--border-default-grey);
}

.gn-main-content .table-bordered td {
    padding: 0.63rem 1.5rem 0.63rem 0.5rem;
}

.gn-main-content .table-bordered td.has-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gn-main-content .table-bordered td:last-of-type {
    padding-right: .5rem;
    background-color: var(--background-contrast-info);
}

.gn-main-content .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-]),
.gn-main-content .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-]),
.gn-main-content .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-]),
.gn-main-content .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-]),
.gn-main-content .fr-btn--sm[class*=" gn-icon-copy-file-line"] {
    flex-shrink: 0;
    max-width: 1.5rem;
    max-height: 1.5rem;
    min-height: 0;
    padding: 4px;
    border-radius: 50%;
}

.gn-main-content .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-])::before,
.gn-main-content .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before,
.gn-main-content .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-])::before,
.gn-main-content .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before {
    vertical-align: baseline;
}

.gn-main-content button.fr-btn--tertiary-no-outline {
    background-color: var(--grey-1000-50)
}

.gn-priority [class*="icon-star-fill"]::before {
    background-color: var(--background-action-high-blue-france)
}

.gn-priority [class*="icon-star-line"]::before {
    background-color: var(--background-disabled-grey)
}

.gn-channels,
.gn-actions {
    display: flex;
    gap: 0.25rem;
}

.gn-channels [class*="fr-icon"]::before {
    background-color: var(--background-disabled-grey)
}

.gn-channels [class*="fr-icon"][class*="--active"]::before {
    background-color: var(--background-action-high-blue-france)
}

.gn-actions {
    justify-content: center;
}

.gn-main-content .page-link {
    color: var(--text-action-high-grey);
    border: none;
}

.gn-main-content .page-item.active .page-link {
    background-color: var(--background-action-high-blue-france);
    border-color: var(--background-action-high-blue-france)
}

.gn-main-content .fr-badge--new::before {
    /* -webkit-mask-image: url(../dist/icons/system/timer-fill.svg);
    mask-image: url(../dist/icons/system/timer-fill.svg); */
}

.gn-quick-access {
    --text-spacing: 0;
    --title-spacing: 0 0 0.5rem;
    --hover: var(--background-default-grey-hover);
    --active: var(--background-default-grey-active);
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    height: 100%;
    background-color: var(--background-default-grey);
    box-shadow: inset 0 0 0 1px var(--border-default-grey), inset 0 -.25rem 0 0 var(--border-plain-blue-france);
}

/**
 * Test to change spacing in .quick-acccess_wrapper
.gn-quick-access__wrapper {
    margin: -4rem;
}

.gn-quick-access__wrapper>[class*="fr-col"] {
    padding: 4rem
}*/

.gn-quick-access__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: 1rem;
}

.gn-quick-access__title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.gn-quick-access__title [class^="fr-icon-"] {
    --icon-size: 3rem;
    color: var(--background-action-high-blue-france)
}

.gn-quick-access__title h2 {
    margin-bottom: 0;
    font-size: 1.125rem;
    line-height: 1.33;
    text-transform: uppercase;
}

.gn-quick-access__title p {
    font-size: .75rem;
    line-height: 1.75
}

.gn-quick-access__content {
    font-size: .875rem;
}

.gn-quick-access__content ul {
    padding-left: 0;
    list-style-type: none;
}

.gn-quick-access__content a {
    color: var(--text-action-high-blue-france);
    background: none;
}

.gn-modal-tabs {
    border-bottom: none;
}

.gn-modal-tabs::after {
    content: none;
}

.gn-modal-tabs .fr-tabs__list {
    background: none;
}

.gn-modal-tabs .fr-tabs__tab::after {
    background: none;
    border-bottom: 2px solid var(--background-action-high-blue-france);
}

.gn-modal-tabs .fr-tabs__tab:not([aria-selected="true"]) {
    color: var(--text-disabled-grey);
}

.gn-modal-tabs .fr-tabs__tab:not([aria-selected="true"])::after {
    border-bottom-color: var(--background-disabled-grey);
}

/**
 * Pourquoi vouloir réduire ?
.gn-modal-tabs .fr-tabs__panel .fr-input-group {
    width: 75%;
}
*/

.gn-small {
    font-size: .75rem;
}

/* uploader */
.gn-uploader {
    text-align: center;
    border: 1px solid var(--border-default-grey);
}

.gn-uploader.active {
    background-color: var(--background-contrast-grey);
}

.gn-uploader-content {
    max-width: 80%;
    margin: 2rem auto;
}

.gn-uploader [class^="fr-icon-"]::before {
    background-color: var(--background-action-high-blue-france);
}

.gn-uploader h2,
.gn-uploader p {
    margin-bottom: 0;
}

.gn-uploader h2 {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 500;
}

.gn-uploader p {
    position: relative;
    margin: .75rem 0;
}

.gn-uploader p::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin: auto;
    background-color: var(--border-default-grey);
}

.gn-uploader p span {
    position: relative;
    padding: .5rem;
    background-color: var(--background-default-grey);
    z-index: 2;
}

.gn-uploader-button label {
    position: relative;
}

.gn-uploader-button label:hover {
    cursor: pointer;
    background-color: var(--hover-tint);
}

.gn-uploader [type=file] {
    display: none;
}

/* checkboxes image only */
.gn-styled-checkboxes {
    display: flex;
    /* gap: 3.75rem; */
    gap: 1rem;
}

.gn-styled-checkboxes.fr-fieldset {
    margin-bottom: 0;
}
.gn-styled-checkboxes .fr-fieldset__legend {
    margin-bottom: 0;
}

.gn-styled-checkboxes [class^=fr-icon-]:before {
    --icon-size: 3.5rem;
}

.gn-styled-checkboxes>div {
    min-width: 1.25rem;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked),
.gn-styled-checkboxes [type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked)+label,
.gn-styled-checkboxes [type="checkbox"]:checked+label {
    position: relative;
    cursor: pointer;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked)+label .gn-styled-checkboxes__text,
.gn-styled-checkboxes [type="checkbox"]:checked+label .gn-styled-checkboxes__text {
    display: block;
    text-indent: -9999px;
    height: 0;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked)+label [class^="fr-icon"],
.gn-styled-checkboxes [type="checkbox"]:checked+label [class^="fr-icon"] {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    --icon-size: 20px;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked)+label [class^="fr-icon"]::before,
.gn-styled-checkboxes [type="checkbox"]:checked+label [class^="fr-icon"]::before {
    vertical-align: initial;
}

.gn-styled-checkboxes [type="checkbox"]:not(:checked)+label [class^="fr-icon"]::before {
    background-color: var(--background-disabled-grey);
}

.gn-styled-checkboxes [type="checkbox"]:checked+label [class^="fr-icon"]::before {
    background-color: var(--background-action-high-blue-france);
}

/* styled radios as star rating */

.gn-styled-radios {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.75rem;
}

.gn-styled-radios>label {
    min-width: 1.25rem;
}

.gn-styled-radios [type="radio"]:not(:checked),
.gn-styled-radios [type="radio"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
}

.gn-styled-radios [type="radio"]:not(:checked)+label,
.gn-styled-radios [type="radio"]:checked+label {
    position: relative;
    cursor: pointer;
}

.gn-styled-radios [type="radio"]:not(:checked)+label .gn-styled-radios__text,
.gn-styled-radio [type="radio"]:checked+label .gn-styled-radios__text {
    display: block;
    text-indent: -9999px;
}

.gn-styled-radios [class^="fr-icon"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    --icon-size: 20px;
}

.gn-styled-radios [class^="fr-icon"]::before {
    background-color: var(--background-disabled-grey);
    vertical-align: initial;
}

.gn-styled-radios>label:hover [class^="fr-icon"]::before,
.gn-styled-radios>label:hover~label [class^="fr-icon"]::before,
.gn-styled-radios>input:checked~label [class^="fr-icon"]::before {
    background-color: var(--background-action-high-blue-france);
}

.gn-styled-radios:hover>input:checked~label:before {
    opacity: 0.4;
}

.gn-cards-list section:not(:first-of-type) {
    margin-top: 4rem;
}

.gn-card .fr-card__header .gn-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.gn-card .fr-card__title {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.33;
}

.gn-card .gn-priority {
    display: flex;
    justify-content: flex-end;
}

.gn-btns-group--spaced {
    justify-content: space-between;
}

.gn-content--spaced {
    padding: 1.5rem 2rem;
}

.gn-icon-copy-file-line {
    overflow: hidden;
}

.gn-icon-copy-file-line::before {
    content: "";
    --icon-size: 1rem;
    flex: 0 0 auto;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: .5rem;
    margin-left: 0;
    background-color: currentColor;
    -webkit-mask-image: url(../img/file-copy-line.svg) !important;
    mask-image: url(../img/file-copy-line.svg) !important;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.gn-sidemenu {
    padding-right: 0;
}


.gn-sidemenu .fr-sidemenu__inner {
    box-shadow: none;
}

.gn-sidemenu .fr-sidemenu__item [class*="fr-icon"] {
    margin-right: .75rem;
}

.gn-sidemenu .fr-sidemenu__link {
    padding: .25rem .5rem;
}

.gn-sidemenu .fr-sidemenu__btn[aria-current]::after,
.gn-sidemenu .fr-sidemenu__link[aria-current]::after {
    content: none;
}

.gn-sidemenu .fr-sidemenu__btn[aria-current]:before,
.gn-sidemenu .fr-sidemenu__link[aria-current]:before {
    top: 0.125rem;
    bottom: 0.125rem;
}

.gn-sidemenu__categories {
    margin-top: 3rem;
}

.gn-sidemenu__categories>div {
    display: flex;
    align-items: center;
}

.gn-sidemenu__categories h3 {
    margin-right: .5rem;
    padding-left: .5rem;
    font-size: 1rem;
    font-weight: 700;
}

.gn-sidemenu__categories .fr-sidemenu__item,
.gn-sidemenu__categories .fr-sidemenu__item>div {
    display: flex;
    align-items: center;
}

.gn-sidemenu__categories .fr-sidemenu__item {
    justify-content: space-between;
}

.gn-sidemenu__categories .fr-sidemenu__item [class*="fr-icon"] {
    margin-right: 0;
}

.gn-sidemenu__categories .fr-sidemenu__item [class*="fr-icon-delete"] {
    color: var(--background-action-high-red-marianne)
}

article [class*="fr-icon-delete"] {
    position: absolute;
    top: 20px;
    right: 10px;
    color: var(--background-action-high-red-marianne)
}

.gn-sidemenu__categories .fr-sidemenu__link {
    display: block;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gn-sidemenu__categories .fr-sidemenu__link[aria-current] {
    font-weight: 700 !important;
}

.gn-modal--distribution-list thead {
    background-color: var(--background-contrast-info);
}

.gn-modal--distribution-list th,
.gn-modal--distribution-list td {
    padding: .625rem 1.5rem .625rem .5rem;
    border-bottom: 1px solid var(--border-default-grey);
}

.gn-tabs .fr-tabs__list [class*="fr-icon"] {
    margin-right: .5rem;
}

.gn-wrapper {
    width: 100%;
}

ul.fr-tabs__list .badge-light {
    font-size: 15px;
    margin-right: 5px;
}

ul.fr-tabs__list .badge .spinner-border {
    width: 12px !important;
    height: 12px !important;
}

span#characters {
    float: right;
    font-size: 14px;
}

div.sms textarea {
    height: 200px;
}

div#email-preview {
    border: 1px solid #ccc;
}

button#preview-email-communication,
div#edit-email-textarea {
    display: none;
}

div#email-preview hr {
    padding: 0;
}

div#sms-preview {
    background-image: url(../img/smartphone.png);
    margin: auto;
    width: 400px;
    height: 402px;
}

div#sms-preview span {
    display: block;
    margin: 15px 0 0 25px;
    width: 305px;
    height: 360px;
    padding: 130px 0px 0 80px;
    font-size: 15px;
    word-break: break-all;
}

div#sms-preview span a {
    font-weight: bold;
    color: dodgerblue;
}

.fr-modal footer {
    position: relative;
}

/** tinymce styling */
textarea+div.tox-tinymce {
    margin-top: 0.5rem;
}

textarea+div.tox-tinymce .tox-statusbar {
    border-top: unset;
}

textarea+div.tox-tinymce .tox-editor-container {
    border-bottom: 2px solid var(--border-plain-grey);
}

textarea+div.tox-tinymce .tox-edit-area__iframe {
    background-color: var(--background-contrast-grey);
}

textarea.fr-input--error+div.tox-tinymce .tox-editor-container {
    border-bottom: 2px solid var(--border-plain-error);
}

textarea.fr-input--valid+div.tox-tinymce .tox-editor-container {
    border-bottom: 2px solid var(--border-plain-success);
}

/** end tinymce styling */

/* hover state on a.fr-btn (no thanks to bootstrap css reset) */
main a.fr-btn:not(.fr-btn--secondary, .fr-btn--tertiary, .fr-btn--tertiary-no-outline):hover {
    color: var(--text-inverted-blue-france);
}

main a.fr-btn.fr-btn--secondary:hover,
main a.fr-btn.fr-btn--tertiary:hover {
    color: var(--text-action-high-blue-france);
}

/* end hover state on a.fr-btn */

li.send-button {
    position: absolute;
    right: 25px;
}

.gn-card .fr-card__img img {
    object-fit: contain !important;
}

/** WIP WBL Pour style les listes de media / et l'uploader */

.content-medias input[type=checkbox] {
    visibility: hidden;
    display: none;
}

.content-medias li {
    --hover-tint: var(--background-default-grey-hover);
    padding: 0.5rem 0.5rem 0.1rem 0.5rem;
}

.content-medias li:hover {
    background-color: var(--hover-tint);
}

.content-medias textarea {
    background-color: var(--white);
    border: 1px solid var(--border-default-grey);
}

.content-medias div.media-line {
    font-size: 14px;
}

.content-medias input:checked+li div.media-line {
    text-decoration: line-through;
    opacity: 0.3;
    filter: blur(1px);
}

.content-medias span.mime {
    font-size: 12px;
    margin-bottom: 0;
}

.content-medias .media-action {
    display: flex;
}

.content-medias .media-action label {
    margin: auto;
    cursor: pointer;
}

.content-medias div.media-line .has-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-medias input:not(:checked)+li .undoDeleteMedia {
    display: none;
}

.content-medias input:checked+li .undoDeleteMedia {
    display: block;
}

.content-medias input:not(:checked)+li .deleteMedia {
    display: block;
}

.content-medias input:checked+li .deleteMedia {
    display: none;
}

/** FIN WIP WBL Pour style les listes de media / et l'uploader */

#illustration-sample input:checked+img {
    text-decoration: line-through;
    opacity: 0.3;
    filter: blur(1px);
}

#illustration-sample input#delete-illustration {
    display: none;
}

#illustration-sample input:not(:checked)~.undoDeleteIllustration {
    display: none;
}

#illustration-sample input:checked~.undoDeleteIllustration {
    display: block;
    margin: auto;
}

#illustration-sample input:not(:checked)~.deleteIllustration {
    display: block;
    margin: auto;
}

#illustration-sample input:checked~.deleteIllustration {
    display: none;
}

.fr-download--card {
    padding: 1.5rem 1.5rem 4rem !important;
}

a.mime,
span.mime {
    --blend-position: 0% !important;
    background-repeat: no-repeat;
    background-size: 30px;
    padding: 4px 0 4px 40px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    bottom: 1.5rem !important;
    left: 1.5rem !important;
}

.mime.folder {
    background-image: url(../img/folder.png);
    background-size: 40px;
    padding: 6px 0 6px 40px;
}

.mime.pdf {
    background-image: url(../img/mime_pdf.png);
}

.mime.doc {
    background-image: url(../img/mime_doc.png);
}

.mime.docx {
    background-image: url(../img/mime_docx.png);
}

.mime.jpg,
.mime.jpeg {
    background-image: url(../img/mime_jpg.png);
}

.mime.png {
    background-image: url(../img/mime_png.png);
}

.mime.gif {
    background-image: url(../img/mime_gif.png);
}

.mime.html {
    background-image: url(../img/mime_html.png);
}

.mime.odg {
    background-image: url(../img/mime_odg.png);
}

.mime.odp {
    background-image: url(../img/mime_odp.png);
}

.mime.ods {
    background-image: url(../img/mime_ods.png);
}

.mime.odt {
    background-image: url(../img/mime_odt.png);
}

.mime.ppt {
    background-image: url(../img/mime_ppt.png);
}

.mime.pptx {
    background-image: url(../img/mime_pptx.png);
}

.mime.txt {
    background-image: url(../img/mime_txt.png);
}

.mime.xls {
    background-image: url(../img/mime_xls.png);
}

.mime.xlsx {
    background-image: url(../img/mime_xlsx.png);
}

.mime.vsd {
    background-image: url(../img/mime_vsd.png);
}

.mime.rtf {
    background-image: url(../img/mime_rtf.png);
}

.mime.xml {
    background-image: url(../img/mime_xml.png);
}

.mime.csv {
    background-image: url(../img/mime_csv.png);
}

.mime.json {
    background-image: url(../img/mime_json.png);
}

.mime.audio {
    background-image: url(../img/file_audio.png);
}

.mime.video {
    background-image: url(../img/file_video.png);
}

.mime.image {
    background-image: url(../img/file_image.png);
}

.mime.base {
    background-image: url(../img/file_base.png);
}

.gn-label--mandatory {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.gn-label--mandatory:after {
    content: '(obligatoire)';
    padding-left: 0.375em;
    font-size: small;
    font-family: monospace;
    font-style: italic;
    font-weight: bolder;
}

.gn-label--mandatory:has(span.fr-hint-text):after {
    order: 1;
}

.gn-label--mandatory span.fr-hint-text {
    order: 2;
    flex-basis: 100%;
}

.home-intro {
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

.home-img {
    display: flex;
    justify-content: center;
}

.right {
    float: right;
}

.social-network-preview * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.social-network-preview.twitter {
    background-color: rgb(253, 253, 253);
    border: 1px #dde7ef solid;
    border-radius: 8px;
    padding: 15px;
    margin: auto 15px;
    position: sticky;
    top: 16px;
    z-index: 10;
    max-width: 600px;
}

.social-network-preview.facebook {
    background-color: rgb(255, 255, 255);
    border: 1px #c5cfd7 solid;
    border-radius: 8px;
    position: sticky;
    top: 16px;
    z-index: 10;
}

.social-network-preview .head {
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.social-network-preview .head .title {
    display: flex;
    align-items: center;
}

.social-network-preview .head .title img {
    display: inline-block;
    border-radius: 50%;
    margin-right: 12px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

.social-network-preview .head .title .text p:first-child {
    font-weight: 700;
    display: flex;
    align-items: center;
}

.social-network-preview.twitter .head .title .text p:nth-child(2) {
    color: #536471;
}

.social-network-preview .head .dots {
    color: #536471;
}

.social-network-preview .content .message {
    padding: 15px;
}

.social-network-preview.twitter .content .message {
    font-size: 23px;
}

.social-network-preview .content-illustration {
    height: 300px;
    overflow: hidden;
}

.social-network-preview .content .content-url {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: rgba(0, 0, 0, .05);
    padding: 10px;
}

.social-network-preview .content .content-url a {
    text-transform: capitalize;
}

.social-network-preview.twitter .content .tweet_info {
    color: #536471;
    padding: 16px 0;
    display: flex;
}

.social-network-preview.twitter .stats {
    border-top: 1px #eff3f4 solid;
    color: #536471;
    padding: 16px 4px;
    display: flex;
    flex-wrap: wrap;
}

.social-network-preview.twitter .stats .stat {
    margin-right: 24px;
}

.social-network-preview.twitter .stats .stat .count {
    font-weight: 700;
    color: #0f1419;
}

.social-network-preview .tail {
    border-top: 1px #eff3f4 solid;
    padding: 12px 0;
    display: flex;
    justify-content: space-around;
}

.social-network-preview .tail svg {
    color: #536471;
}