﻿/*
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Thin.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Thin_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Thin_italic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraLight.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraLight_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraLight_italic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Light.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Light_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Light_italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Regular.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Regular_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Regular_italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Medium.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Medium_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Medium_italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-SemiBold.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-SemiBold_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-SemiBold_italic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Bold.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Bold_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Bold_italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraBold.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraBold_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-ExtraBold_italic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Heavy.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Blauer Nue';
    src: url('/font/Blauer_Nue/TrueType/BlauerNue-Heavy_italic.woff2') format('woff2'), url('/font/Blauer_Nue/TrueType/BlauerNue-Heavy_italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}
*/



:root {
    --primary-font: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
    --secondary-font: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
    --radio-color: #E3601C;
    --radio-disabled-color: #F4F4F4;
    --modal-label-color: #70706F;
    --scrollbar: hsla(0, 0%, 0%, 0.2);
}


/*Général*/
html {
    scrollbar-gutter: stable;
}

a,
img,
a img {
    border: 0;
    outline: 0;
    text-decoration: none;
}

.navbar {
    margin-top: 15px;
}

form {
    padding: 0;
    margin: 0;
}

input,
select {
    display: inline-block;
    padding: 5px 10px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    color: #727a8e;
    border: 1px solid #dddfe4;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

img {
    max-width: 100%;
}

body {
    background: #fff;
    font-size: 13px;
    font-weight: normal;
    color: #182539;
    padding: 0 !important;
    margin: 0;
    font-family: var(--primary-font);
}

header {
    padding: 0 0 21px 0;
}

.dropdown-menu {
    border-radius: 0 !important;
    margin: 0px !important;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.content {
    padding: 0 0 55px 0;
}

.date {
    letter-spacing: 0.8px;
    padding: 0 0 3px 0;
    font-size: 14px;
    font-family: var(--secondary-font);
    font-weight: normal;
}

.nomar2 {
    margin: 0px;
}

.contenu2Colonne {
    display: flex;
}

.rightColumn-sidebar {
    margin-left: 25px;
    width: 250px;
    min-width: 300px;
}

    .rightColumn-sidebar .inner-sidebar {
        padding-top: 40px;
        min-width: 300px;
        min-height: 660px;
    }

    .rightColumn-sidebar > div {
        max-width: 300px;
    }

section {
    background-color: #FFFFFF;
}

.flexOnShow.show {
    display: flex !important;
}

body .needed-form-element-d-none {
    visibility: hidden !important;
    max-height: 0px !important;
    height: 0px !important;
    min-height: none !important;
    max-width: 0px !important;
    width: 0px !important;
    min-width: none !important;
    padding:0px!important;
    margin:0px!important;
}

.selfAdStandardBorder {
    border-radius: 20px;
    overflow: hidden;
}

.selfAdStandardBorderTopOnly {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}

.selfAdStandardBorderBottomOnly {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.dropdown-menu.selfAdStandardBorder {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.noShadow{
    box-shadow:none!important;
}

.noradius{
    border-radius:0px!important;
}

.font-bold{
    font-weight:bold;
}

.multilines {
    word-break: break-word;
    white-space: pre-line;
}

.white-space-normal{
    white-space:normal;
}

* {
    scrollbar-color: var(--scrollbar) transparent;
}


@media only screen and (min-width: 1200px) {
    .selfAdContainer.container {
        width: 93%;
        max-width: 93%;
    }
}

.selfAdProfileMenu {
    overflow: hidden;
    right: -15px;
    left: auto;
    padding: 5px !important;
    width: 375px;
    max-width: 80vw;
}

    .selfAdProfileMenu > a {
        font-weight: normal;
    }

@media only screen and (max-width: 768px) {
    .selfAdProfileMenu {
        right: 0px;
    }
}

.selfAdProfileMenu .profile-item {
    width: 100%;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

.selfAdProfileMenu > .profile-item {
    border-radius:20px 20px 0px 0px;
}
.selfAdProfileMenu > .profile-item ~ .profile-item {    
    border-radius: 0px;
}
.selfAdProfileMenu > .profile-item ~ .profile-item.profile-item:last-of-type {
    border-radius: 0px 0px 20px 20px;
}

.selfAdHeader {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.logoPublioHeader {
    width: 45px;
    height: 45px;
}

.logoPublioHeader > a {
    width: 45px;
    text-decoration: none;
    color: #000000;
    background-color: #7EB1E2;
    border-radius: 7px;
    overflow: hidden;
}

.LogoImg{
    transform: translateX(-3px);
}

@media only screen and (min-width: 768px) and (max-width: 1527px) {
    .selfAdSideSectionLeftPublication {
        flex-grow: unset !important;
    }

    .selfAdCenterSectionPublication {
        flex-grow: unset !important;
    }
}

@media only screen and (min-width: 768px) {
    .selfAdSideSectionLeftPublication {
        min-width: 0px;
        margin-right: 50px !important;
    }
}


@media only screen and (min-width: 768px) {
    .selfAdSideSectionLeft {
        flex-basis: 300px;
        min-width: 225px;
    }

    .selfAdSideSectionRight {
        flex-basis: 300px;
        min-width: 300px;
        flex-grow: 1;
    }

    .selfAdCenterSection {
        flex-basis: 675px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .selfAdSideSectionRight {
        flex-basis: auto;
        min-width: 0px;
    }    
}

@media only screen and (max-width: 1199px)
{
    .selfAdSideSectionLeftPublication {
        order: 2;
        margin-top: 100px !important;
        flex-grow: unset !important
    }
}


.categorie-widget {
    max-width: 300px;
    background-color: #FFFFFF;
    height: auto;
    padding: 10px;
}

    .categorie-widget ul {
        list-style: none;
        padding: 0px;
    }

    .categorie-widget .nav-link {
        font-size: 16px;
        padding-left: 15px;
        padding-top: 0px;
        padding-bottom: 11px;
    }

.categorie-widget-title {
    font-weight: bold;
    padding-left: 15px;
    font-size: 20px;
    margin: 0px;
}

.search-widget-title {
    font-weight: bold;
    padding-left: 15px;
    font-size: 20px;
    margin: 0px;
}
.list-type-search{
    width:100%;
    padding-left:0px;
    display:flex;
    margin-top: 10px;
}
.list-type-search li {
    list-style: none;
    font-size: 14px;
    font-weight:bold;
    padding: 5px 10px;
    background-color:white;
}
.list-type-search li.active{
    border: 1.5px solid;
}

#search-wrapper.all-mode .searchTab #AdvertisersList .advertiserListingItem:nth-child(n + 6) {
    display: none !important;
}
/*Empêche les trigger de next page*/
#search-wrapper.all-mode #next-page-trigger_Advertiser {
    display: none !important;
}

.searchTab{
    width:100%;
}
.searchTab-title {
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
}

.bottomMobileSearch .SearchTabSelectorWidget {
    margin: 0px !important; /*override un mb-3*/
}
.bottomMobileSearch .list-type-search {
    margin-bottom: 0px;
    margin-top:15px;
    display:flex;
    justify-content:center;
}


.selfAdListingSection {
    max-width: 675px;
}

@media only screen and (max-width: 575px) {
    .PubNeomediaBigBlock, .PubNeomediaBigBlock > * {
        border-radius: 0px !important;
        margin-bottom:10px;
        box-shadow:none;
    }
    .PubNeomediaBigBlock {
        margin-bottom: 10px!important;
    }
    .express-tool-wrapper {
        border-radius:0px!important;
    }
}

.PubNeomediaBigBlock {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-bottom: 30px;
    overflow: hidden;
    width: 100%;
    background-color: #FFFFFF;
}
.PubNeomediaBigBlock.modal-open{
    background-color:#44444499;
    border-radius:0px!important;
}
.PubNeomediaBigBlock.modal-open .annonce-content
{
    max-width:675px;
    overflow:auto;
    max-height:100%;
    padding-bottom:0px;
}

.modal-closer {
    font-size: 20px;
}
.modal-closer {
    display: none;
}
.annonceListingBlock.modal-open .modal-closer {
    display: flex;
}

.sticky-closer {
    position: sticky;
    top: 0;
    z-index: 1;
}

.annonce-content {
    background-color: #FFFFFF;
}
.annonce-padding{
    padding:10px;
}

.PubNeomediaBigBlockData {
    position: relative;
    width: 100%;
    padding: 5px;
}

    .PubNeomediaBigBlockData .description {
        display: -webkit-box;
        font-size: 16px;
        padding-bottom: 20px;
        word-break: break-word;
        white-space: break-spaces;
    }

    .PubNeomediaBigBlockData .descriptionFull {
        height: 0px;
        display: none !important;
        transition: height 4s;
    }

@media only screen and (max-width: 991px) {
    #SelfAdMain {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

#SelfAdMainBackground {
    background-color: transparent;
}

.PubNeomediaBigBlockData a,
.PubNeomediaBigBlock a {
    text-decoration: none !important;
    color: inherit !important;
}

.listing-city a {
    text-decoration:underline!important;
}
.listing-city, .listing-date {
    font-size: 12px;
}


.userData {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.userData .listingAd-companyName {
    margin-right: 35px;
    display:flex;
    font-size:16px;
    font-weight:bold;
    align-items:center;
}


.userData .nom {
    font-size: 16px;
    font-weight: bold;
    font-family: var(--primary-font);
}

.pastilleCompagnie {
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}


.LetterAv {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    font-size: 20px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent linear-gradient(129deg, #D45D1C 0%, var(--unnamed-color-e3601c) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(129deg, #D45D1C 0%, #E3601C 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}
.LetterAv .fa-user-secret {
    font-size: 35px;
}

.profile-item .pastilleCompagnie {
    margin-right: 10px;
    min-width: 25px;
    min-height: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.profile-item .LetterAv {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    font-size: 8px;
}

.profile-menu-label {
    color: #909399;
}

.mobile-menu-search {
    padding-left: 15px;
    padding-right: 15px;
}

    .mobile-menu-search .selfAdSearch {
        box-shadow: none;
    }

    .mobile-menu-search form {
        background-color: transparent;
        margin-bottom: 0px !important;
    }

.selfAdSearch {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-shadow: 0px 3px 20px #0000001A;
}

    .selfAdSearch .rechercheHeader {
        display: flex;
        align-items: center;
    }

        .selfAdSearch .rechercheHeader img {
            margin-right: 10px;
        }

        .selfAdSearch .rechercheHeader h4 {
            font-size: 20px;
            font-family: var(--primary-font);
            font-weight: bold;
            letter-spacing: 0px;
            color: #292929;
            margin: 0px;
        }

    .selfAdSearch input {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: var(--secondary-font);
        color: #3E3E3E;
        height: 40px;
        box-shadow: 0px 0px 10px #00000029;
        border-radius: 30px;
    }

.mosaicDisplay, .mosaicDisplay .d-flex {
    gap: 5px;
    width: 100%;
}

/*SelfAd mosaic*/
#mosaicPreview .mosaic-pic > div {
    display:contents;
}
#mosaicPreview .mosaic-pic > div img{
    object-fit:cover!important;
}

.PreviewDeleteIcon {
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #000000AA;
    width: 30px;
    height: 30px;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}

#MosaicOverflow > div {
    position: relative;
    margin-top: 15px;
}

    #MosaicOverflow > div > div {
        display: flex;
        justify-content: center;
    }

#mosaicDisplay, #mosaicDisplay .d-flex {
    gap: 5px;
    width: 100%;
}


.mosaic-3-pic .bottom-row .mosaic-pic, .mosaic-4-pic .bottom-row .mosaic-pic, .mosaic-4-pic .top-row .mosaic-pic, .mosaic-5-pic .bottom-row .mosaic-pic {
    flex-basis: 50%;
}
.mosaic-5-pic .bottom-row .mosaic-pic {
    flex-basis: 30%;
}

@media screen and (max-width: 991px) {
    .mosaic-1-pic {
        max-height: 90vh;
    }

    .mosaic-1-pic .mosaic-pic img, .mosaic-1-pic .mosaic-pic video, .mosaic-2-pic .mosaic-pic video, .mosaic-3-pic .mosaic-pic video {
        position: relative;
        max-height: 75vh;
        width: 100%;
        height: auto;
        object-fit: contain;
        /*doit override un center de position absolu*/
        left: 0px !important;
        top: 0px !important;
        transform: none !important;
    }
}

@media screen and (min-width: 992px) {
    .mosaic-1-pic {
        height: auto;
        position: relative;
    }

    .mosaic-1-pic .mosaic-pic img, .mosaic-1-pic .mosaic-pic video, .mosaic-2-pic .mosaic-pic video, .mosaic-3-pic .mosaic-pic video {
        position: relative;
        max-height: 75vh;
        width: 100%;
        height: auto;
        object-fit: contain;
        /*doit override un center de position absolu*/
        left: 0px !important;
        top: 0px !important;
        transform: none !important;
    }
}

.mosaic-pic {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    transform: scale(1.005);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mosaic-pic img, .mosaic-pic video {
        background-color: black;
        /*
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) translateX(-50%) scale(1.01);
        */

        object-fit: contain;
        height: 100%;
        width: 100%;
    }

.mosaic-extra-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

@media screen and (max-width: 575px) {
    .mosaic-extra-overlay {
        font-size: 20px;
    }
}

.mosaic-1-pic .mosaic-pic video, .mosaic-2-pic .mosaic-pic video, .mosaic-3-pic .mosaic-pic video {
    min-height: 100%; /*Pour une raison inconnu il laisse toujours quelques pixel en bas sans ça.*/
}

.top-row .mosaic-pic {
    flex-basis:50%;
}

/*
.video-post {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 24px;
}
.video-js {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.video-js, .video-js *{
    padding:0px!important;
}
*/
/* Video.js player fills the entire container */
.video-wrapper, .video-js {
    min-width: 100% !important;
    /*99 sinon il dépasse un peu au bas*/
    min-height: 99% !important;
    height: 99%;
}

.video-js video{
    transform: none;
}

#details-video-tag{
    width:100%;
    height:100%;
}

.mosaic-1-pic .mosaic-pic .video-js, #details-video-tag .video-js {
    position: relative !important;
    padding-top: 0px !important;
}

.mosaic-1-pic .mosaic-pic .video-js *, #details-video-tag .video-js *{
    padding-top:0px!important;
}

.mosaic-pic .video-js {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    position: absolute !important;
    bottom: 0px;
    flex-direction: column;
}

#details-video-tag .video-js * {
    object-fit: contain;
}

/* Make sure the video element itself covers the area */
.video-js video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Contain mode: override object-fit */
.video-post.contain-mode .video-js video {
    object-fit: contain;
}

.shaka-video-container {
    justify-content: center;
    align-items: center;
    height:100%;
}

.mosaic-pic .shaka-controls-button-panel > *, #video-div .shaka-controls-button-panel > * {
    height: 20px !important;
    width: 25px !important;
}
.mosaic-pic .shaka-controls-button-panel .shaka-current-time, #video-div .shaka-controls-button-panel .shaka-current-time {
    width: auto !important;
}

.mosaic-pic .shaka-controls-button-panel .material-svg-icon, #video-div .shaka-controls-button-panel .material-svg-icon {
    width: 0.6em !important;
    height: 0.6em !important;
}

.mosaic-pic .shaka-controls-button-panel .shaka-volume-bar-container, .shaka-controls-button-panel .shaka-volume-bar-container:hover, #video-div .shaka-controls-button-panel .shaka-volume-bar-container {
    background: none !important;
    width: 0px !important;
}
.mosaic-pic .shaka-volume-bar, .shaka-volume-bar-container input, #video-div .shaka-volume-bar {
    writing-mode: vertical-lr; /* or vertical-rl */
    direction: rtl; /* Ensures higher values are higher on the slider */
    width: 16px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    /* Other styling for appearance */
    appearance: auto;
    position: absolute;
    top: -100px;
    left: -35px;
}
.mosaic-pic .shaka-volume-container, #video-div .shaka-volume-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mosaic-pic .shaka-controls-button-panel, #video-div .shaka-controls-button-panel {
    overflow: visible !important;
}

@media screen and (max-width: 449px) {
    .mosaic-5-pic .shaka-current-time, .mosaic-4-pic .shaka-current-time {
        display: none;
    }
}

/*video détails post*/
#video-div .shaka-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.quality-selector {
    top: 10px;
    height: 20px;
    padding: 0px;
    left: 15px;
    position: absolute;
}

.sharedPageData {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    padding: 20px;
    background-color: #E3E3E3;
}

    .sharedPageData div {
        width: 100%;
    }

.sharedPageData-Title {
    font-weight: bold;
}

.sharedPageData-Domain {
    text-transform: uppercase;
    word-break: break-all;
}

.selfad-pubHeader {
    background-color: #B9BABB;
    height: 40px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
}

.rechercheBody input[type='text'] {
    padding-left: 30px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.rechercheBody i {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    top: calc(50% - 7px);
}

.wrap-center a:hover {
    text-decoration: none;
}

.title {
    font-size: 34px;
    font-weight: bold;
}

#cc_div .title {
    font-size: 1em;
}

#btnScrollToTop {
    display: none;
}

#btnScrollToTop {
    position: fixed;
    right: 10px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #484848;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0.6;
    z-index: 600;
}

    #btnScrollToTop:active {
        background: #cc2333;
    }

.no_highlightOrDecoration:hover {
    color: inherit;
    text-decoration: none;
}

#mdiv {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    border: 1px solid #000;
    float: right;
    min-width: 25px;
    min-height: 25px;
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 1;
}

.mdiv {
    height: 15px;
    width: 3px;
    margin-left: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    Z-index: 1;
    margin-top: 4px;
}

.md {
    height: 15px;
    width: 3px;
    background-color: #fff;
    transform: rotate(90deg);
    Z-index: 2;
}

#catfish-container {
    display: none;
}

.pub-static-m32 {
    background-color: rgba(199, 199, 199, 0.95);
    padding: 5px 0px;
}

a {
    color: inherit;
}

button {
    margin: 6px;
}

.dropdown-menu {
    z-index: 50;
}

.selfAdContainer .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("/images/Icon-menu-mobile-gray.svg") !important;
}

.selfAdPanelButton {
    background-color: #3071B9;
    padding: 7px 35px 7px 35px;
    color: #FFFFFF !important;
    font-size: 14px;
}

.selfAdBackground-TemplateBase,
.PubNeomediaBigBlockData .description.selfAdBackground-TemplateBase {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.selfAdBackground-Template-1 {
    background-color: #C90034;
    color: white;
}

.selfAdBackground-Template-2 {
    background-color: #691182;
    color: white;
}

.selfAdBackground-Template-7 {
    background-image: linear-gradient(#67D1B8, #3BA88E, #1F8E73);
    color: white;
}

input[type=checkbox] {
    display: none;
}
.fb_reset {
    background: none;
    border: 0px;
    border-spacing: 0;
    color: #000;
    cursor: auto;
    direction: ltr;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    margin: 0;
    overflow: visible;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    visibility: visible;
    white-space: normal;
    word-spacing: normal;
}

.fb_reset > div {
    overflow: hidden;
}

.fb_reset {
    background: none;
    border: 0px;
    border-spacing: 0;
    color: #000;
    cursor: auto;
    direction: ltr;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    margin: 0;
    overflow: visible;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    visibility: visible;
    white-space: normal;
    word-spacing: normal;
}

.fb_reset > div {
    overflow: hidden;
}
img {
    height: auto;
}
#navdiv {
    top: 0px !important;
}

.navbar-toggler {
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    header .container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/*Page détails*/
    #selfAdDetail, #selfAdDetail section {
    height: 100vh;
}

.self-ad-detail-info {
    min-width: 290px;
    background:white;
}
.self-ad-detail-info .description, .self-ad-detail-info .adUrl{
    word-break: break-word;
    white-space: break-spaces;
}

.mobileSeeMoreDetails{
    display:none;
}

/*Details mobile*/
@media only screen and (max-width: 767px) {
    /*hauteur sans le mobile footer*/
    .fullscreen-on #image-section {
        height: 100%;
    }
    .fullscreen-off #image-section {
        height: calc(100% - 65px);
    }
    /*hauteur avec pour le mobile footer*/
    .layout-mobile .fullscreen-on #image-section {
        height: calc(100% - 45px);
    }
    .layout-mobile .fullscreen-off #image-section {
        height: calc(100% - 110px);
    }
    /*Padding pour les info si besoin*/
    .fullscreen-off .self-ad-element-wrapper {
        height: calc(100% - 65px);
    }
    .fullscreen-off #video-div video {
        max-height: 100% !important;
    }

    .self-ad-detail-info {
        background-color: transparent;
        position: absolute;
        bottom: 0px;
        height: 65px !important;
        color: white;
        overflow: auto;
        background-color: #00000096;
        padding-bottom: 15px;
        z-index: 1000; /*Plus que les controle previous et next*/
    }
    .layout-mobile .self-ad-detail-info {
        bottom: 45px;
    }

    .self-ad-detail-info .btn {
        color: white;
    }
    .self-ad-detail-info.fullHeight {
        height: auto!important;
    }

    .self-ad-detail-info .userData, mobileSeeMoreDetails{
        margin-bottom:0.5rem !important
    }
    .mobileSeeMoreDetails {
        display: block;
    }

    .mobileSeeMoreDetails span:before
    {
        content:"Voir plus";
    }
    .self-ad-detail-info.fullHeight .mobileSeeMoreDetails span:before {
        content: "Voir moins";
    }
}

#selfAdDetail #image-section {
    flex: 1;
    min-width: 1px;
    overflow: hidden; /* to contain zoom/pan */
}
.fullScreen-icon, .fullScreen-icon-off {
    display: block;
    margin: 6px;
    width: 32px;
    height: 32px;
    background: url(/images/royalslider/rs-default.png) 0 0;
    background-color: #00000088;
    border-radius: 999px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index:1000;
}

.fullScreen-icon-off {
    background: url(/images/royalslider/rs-default.png) 0 0;
    background-position: -32px 0;
}

#back-icon {
    display: block;
    margin: 6px;
    width: 32px;
    height: 32px;
    background: url(/images/royalslider/rs-default.png) 0 0;
    background-position: -64px 0;
    background-color: #00000088;
    border-radius: 999px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10;
}

.background-black {
    background-color: #000;
}

#selfAdDetail, #selfAdDetail section {
    height: 100vh;
}

#image-section .self-ad-move {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #484848;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: .6;
    z-index: 600;
}

.self-ad-move-left {
    left: 10px;
}

.self-ad-move-right {
    right: 10px
}

.self-ad-slide-indicator {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 20px;
    background-color: #000000b3;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    z-index: 700;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .self-ad-slide-indicator {
        bottom: 25px;
        font-size: 13px;
        padding: 6px 10px;
    }
}

.self-ad-element {
    display: none;
}

.self-ad-element.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#video-element {
    max-height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/*details fin*/



.PubNeomediaBigBlockImg {
    max-width: 100%;
    max-height: 100%;
}

#selfAdDetail .PubNeomediaBigBlockImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    cursor: zoom-in;
}

a, img, a img {
    border: 0;
    outline: 0;
    text-decoration: none;
}

.navbar {
    margin-top: 15px;
}

form {
    padding: 0;
    margin: 0;
}

input,
select {
    display: inline-block;
    padding: 5px 10px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    color: #727a8e;
    border: 1px solid #dddfe4;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

img {
    max-width: 100%;
}

body {
    background: #fff;
    font-size: 13px;
    font-weight: normal;
    color: #182539;
    padding: 0 !important;
    margin: 0;
    font-family: var(--primary-font);
}

header {
    padding: 0 0 21px 0;
}

.dropdown-menu {
    border-radius: 0 !important;
    margin: 0px !important;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.content {
    padding: 0 0 55px 0;
}

.nomar2 {
    margin: 0px;
}

.contenu2Colonne {
    display: flex;
}

.rightColumn-sidebar {
    margin-left: 25px;
    width: 250px;
    min-width: 300px;
}

    .rightColumn-sidebar .inner-sidebar {
        padding-top: 40px;
        min-width: 300px;
        min-height: 660px;
    }

    .rightColumn-sidebar > div {
        max-width: 300px;
    }


@media only screen and (min-width: 1200px) {
    .selfAdContainer.container {
        width: 93%;
        max-width: 93%;
    }
}

@media (hover: none) {
    .currentAccountIcon a {
        pointer-events: none;
    }
}

.selfAdProfileMenu {
    overflow: hidden;
    right: -15px;
    left: auto;
    padding: 5px !important;
    width: 375px;
    max-width: 80vw;
}

    .selfAdProfileMenu > a {
        font-weight: normal;
    }

@media only screen and (max-width: 768px) {
    .selfAdProfileMenu {
        right: 0px;
    }
}

.selfAdProfileMenu .profile-item {
    width: 100%;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

.activeAdvertiserLabel{
    color:black;
}

.selfAdHeader {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}


.categorie-widget {
    max-width: 300px;
    background-color: #FFFFFF;
    height: auto;
    padding: 10px;
}

    .categorie-widget ul {
        list-style: none;
        padding: 0px;
    }

    .categorie-widget .nav-link {
        font-size: 16px;
        padding-left: 15px;
        padding-top: 0px;
        padding-bottom: 11px;
    }

.categorie-widget-title {
    font-weight: bold;
    padding-left: 15px;
    font-size: 20px;
    margin: 0px;
}

@media only screen and (max-width: 991px) {
    #SelfAdMain {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

#SelfAdMainBackground {
    background-color: transparent;
}

.mobile-menu-search {
    padding-left: 15px;
    padding-right: 15px;
}

    .mobile-menu-search .selfAdSearch {
        box-shadow: none;
    }

    .mobile-menu-search form {
        background-color: transparent;
        margin-bottom: 0px !important;
    }

.selfAdSearch {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-shadow: 0px 3px 20px #0000001A;
}

    .selfAdSearch .rechercheHeader {
        display: flex;
        align-items: center;
    }

        .selfAdSearch .rechercheHeader img {
            margin-right: 10px;
        }

        .selfAdSearch .rechercheHeader h4 {
            font-size: 20px;
            font-family: var(--primary-font);
            font-weight: bold;
            letter-spacing: 0px;
            color: #292929;
            margin: 0px;
        }

    .selfAdSearch input {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: var(--secondary-font);
        color: #3E3E3E;
        height: 40px;
        box-shadow: 0px 0px 10px #00000029;
        border-radius: 30px;
    }
    .selfAdSearch input:focus-visible{
        outline:none;
    }

.SelfAdBusinessHeaderInfoBloc {
    padding: 20px;
}

    .SelfAdBusinessHeaderInfoBloc label {
        font-size: 16px;
        padding-bottom: 5px;
        font-weight: bold;
    }

    .SelfAdBusinessHeaderInfoBloc label span {
        font-weight: normal;
    }

@media only screen and (min-width: 992px) {
    .infoCompany {
        max-width:400px;
    }
}

    .SelfAdBusinessHeaderInfoBloc .schedule {
        flex-basis: 200px;
        flex-shrink: 0;
        flex-grow:0;
    }
        .SelfAdBusinessHeaderInfoBloc .schedule label {
            font-size: 16px;
            padding-bottom: 0px;
            margin: 0px;
            display: flex;
            justify-content: space-between;
        }

        .SelfAdBusinessHeaderInfoBloc .schedule .dayLabel{
            flex-basis:85px;
            flex-shrink:0;
        }

        .SelfAdBusinessHeaderInfoBloc .schedule label span {
            font-size: 16px;
        }


.clikableTooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.clikableTooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.clikableTooltip.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.hoverTooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.hoverTooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.hoverTooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.businessLogoSection {
    margin-right: 30px;
    min-width: 60px;
}

.selfad-pubHeader {
    background-color: #B9BABB;
    height: 40px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
}

.wrap-center a:hover {
    text-decoration: none;
}

.title {
    font-size: 34px;
    font-weight: bold;
}

#cc_div .title {
    font-size: 1em;
}

#btnScrollToTop {
    display: none;
}

#btnScrollToTop {
    position: fixed;
    right: 10px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #484848;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0.6;
    z-index: 600;
}

    #btnScrollToTop:active {
        background: #cc2333;
    }

.no_highlightOrDecoration:hover {
    color: inherit;
    text-decoration: none;
}

#mdiv {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    border: 1px solid #000;
    float: right;
    min-width: 25px;
    min-height: 25px;
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 1;
}

.mdiv {
    height: 15px;
    width: 3px;
    margin-left: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    Z-index: 1;
    margin-top: 4px;
}

.md {
    height: 15px;
    width: 3px;
    background-color: #fff;
    transform: rotate(90deg);
    Z-index: 2;
}

#catfish-container {
    display: none;
}

.pub-static-m32 {
    background-color: rgba(199, 199, 199, 0.95);
    padding: 5px 0px;
}

a {
    color: inherit;
}

button {
    margin: 6px;
}

.dropdown-menu {
    z-index: 50;
}

.selfAdContainer .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("/images/Icon-menu-mobile-gray.svg") !important;
}

input[type=checkbox] {
    display: none;
}

/*Panel User Management*/



.ownerCheckboxLargeLabel {
    flex-basis: 92px;
    min-width: 60px;
}

.loginTextboxInputLargeLabel {
    flex-basis: 222px;
    flex-shrink: 1;
}

.LoginManagementLargeLabels-toolsecph {
    flex-basis: 117px;
    min-width: 60px;
}

.advertiserLoginManagement .toolsec {
    flex-basis: 117px;
    min-width: 60px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 18px;
}

.ownerCheckbox {
    min-width: 50px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .ownerCheckbox .Animated-checkbox {
        position: absolute;
        top: 0;
        bottom: 0px;
        margin: auto;
    }

    .ownerCheckbox input:disabled ~ .Animated-checkbox {
        cursor: default;
    }

.LoginTextInputDiv {
    flex-basis: 222px;
    flex-shrink: 1;
}

.LoginTextInput {
    flex-basis: 222px;
    flex-shrink: 1;
    height: 31px;
    font-size: 14px;
}

    .LoginTextInput:disabled {
        opacity: 0.5;
    }

.loginTextboxInputSmallLabel, .loginOwnerInputSmallLabel {
    display: none;
    margin: 0px;
}

.advertiserLoginManagementItem {
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    padding: 10px;
}

.clearForOwnerAndToolSec {
    display: none;
}

@media only screen and (max-width: 1745px) {
    .clearForOwnerAndToolSec {
        display: block;
        width: 100%;
    }

    .advertiserLoginManagementItem {
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #CCCCCC;
        padding-bottom: 20px;
    }

    .loginTextboxInputSmallLabel,
    .loginOwnerInputSmallLabel {
        display: flex;
    }

    .LoginManagementLargeLabels {
        display: none !important;
    }

    .LoginTextInputDiv {
        margin-top: 1rem;
    }

    .LoginTextInput,
    .LoginTextInputDiv {
        min-width: 50%;
    }

    .loginOwnerInputSmallLabel {
        width: auto;
        margin-right: 10px;
    }

    .ownerCheckbox {
        order: 1;
        margin-right: 15px;
        flex-basis: auto;
    }

    .toolsec {
        order: 2;
    }
}

@media only screen and (max-width: 530px) {

    .LoginTextInput,
    .LoginTextInputDiv {
        min-width: 100%;
    }

    .advertiserLoginManagementItem {
        justify-content: center;
    }
}

@media only screen and (max-width: 991px) {
    #SelfAdMain {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

#SelfAdMainBackground {
    background-color: transparent;
}

@media screen and (max-width:767px) {
    .box {
        margin: 0px !important;
    }
}

#newMemberForm{
    max-width:350px;
}

/*Animated Checkbox*/



.Animated-checkbox {
    height: 21px;
    width: 21px;
    max-width: 21px;
    background-color: transparent;
    border: 2px solid #333333;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
}

    .Animated-checkbox::before,
    .Animated-checkbox::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        height: 0;
        width: 4px;
        background-color: #34b93d;
        display: inline-block;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        border-radius: 5px;
        content: " ";
        -webkit-transition: opacity ease 0.5;
        -moz-transition: opacity ease 0.5;
        transition: opacity ease 0.5;
    }

    .Animated-checkbox::before {
        top: 15px;
        left: 8px;
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .Animated-checkbox::after {
        top: 8px;
        left: 1px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

input[type=checkbox]:checked ~ .Animated-checkbox::after {
    height: 10px;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
}

input[type=checkbox]:checked ~ .Animated-checkbox::before {
    height: 25px;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
}

/*Annonceurs data widget*/


@media screen and (max-width: 767px) {
    .selfAdPanelSideSectionLeft {
        order: 2;
        margin-right: 0px !important;
        margin-top: 50px !important;
    }
}

.SelfAdvertiser-UpdateWidgetPlaceholder .sticky-side-content {
    min-width: 300px;
}

.SelfAdvertiser-UpdateWidgetPlaceholder {
    min-width: 300px;
    max-width: 350px;
    flex-basis: 300px;
    flex-grow: 1;
}

    .SelfAdvertiser-UpdateWidgetPlaceholder .sticky-side-content {
        min-width: 300px;
    }

.SelfAdvertiser-UpdateWidget {
    position: relative;
    overflow: visible!important;
    padding: 20px;
    background-color: #fff;
    min-width: 300px;
    max-width: 350px;
}

.SelfAdvertiser-UpdateWidget .updateWidgetLogo {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: -25px;
    left: 0;
}

.SelfAdvertiser-UpdateWidget.deactivated input {
    border: none !important;
}

    .SelfAdvertiser-UpdateWidget .companyNameHeader {
        font-weight: bold;
        text-align: center;
        font-size: 16px;
    }

    .SelfAdvertiser-UpdateWidget .updateWidgetLogo {
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        top: -25px;
        left: 0px;
    }

.SelfAdvertiser-UpdateWidget .updateWidgetLogo input {
    position: absolute;
    transform: scale(0);
}

.SelfAdvertiser-UpdateWidget input {
    font-size: 14px;
    background-color: transparent;
    color: #000;
    padding: 0;
}


    .SelfAdvertiser-UpdateWidget.deactivated .updateWidgetLogo .editLogoIcon {
        display: none;
    }

    .SelfAdvertiser-UpdateWidget .updateWidgetLogo .editLogoIcon {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        -moz-box-shadow: 0 0 5px #FFFFFF;
        -webkit-box-shadow: 0 0 5px #FFFFFF;
        box-shadow: 0 0 5px #FFFFFF;
        background-color: #FFFFFFCC;
        padding: 2px;
        border-radius: 5px;
    }

.SelfAdvertiser-UpdateWidget .updateWidgetLogo .pastilleCompagnie, .SelfAdvertiser-UpdateWidget .updateWidgetLogo .LetterAv {
    margin: 0px;
}

.SelfAdvertiser-UpdateWidget label {
    font-weight: bold;
    font-size: 14px;
}
    .SelfAdvertiser-UpdateWidget .websiteLink, .SelfAdvertiser-UpdateWidget .websiteInput {
        display:none;
        font-size:14px;
        color:black;
    }
    .SelfAdvertiser-UpdateWidget .websiteLink.show, .SelfAdvertiser-UpdateWidget .websiteInput.show {
        display: inline-block;
    }

    .SelfAdvertiser-UpdateWidget input {
        font-size: 14px;
        background-color: transparent;
        color: black;
        padding: 0px;
    }

    .SelfAdvertiser-UpdateWidget.deactivated input {
        border: none !important;
    }

    .SelfAdvertiser-UpdateWidget.deactivated .scheduleManagementIcon {
        display: none;
    }

.scheduleManagementIcon {
    margin-left: 5px;
    cursor:pointer;
}

.SelfAdvertiser-UpdateWidget .editIcon {
    position: absolute;
    right: 0px;
}

.scheduleDays {
    width: 75px;
    font-size: 14px;
}

.scheduleHours {
    width: 125px;
}

.scheduleHours input {
    font-size: 14px;
    width: 44px;
    text-align: center;
}

.tempus-dominus-widget {
    border-radius: 20px !important;
    box-shadow: 0px 0px 20px #0000001A !important;
    overflow: hidden !important;
}

.TempusTimeOnlyPicker {
    width: 8rem !important;
}
.tempus-dominus-widget.TempusTimeOnlyPicker .time-container {
    margin-bottom: 0px;
}
.TempusTimeOnlyPicker .time-container-clock div:nth-child(-n+3), .TempusTimeOnlyPicker .time-container-clock div:nth-child(n+7) {
    display: none !important;
}

@media screen and (max-width:575px) {
    .tempus-dominus-widget > .td-row {
        flex-wrap:wrap;
        justify-content:center;
    }

    .tempus-dominus-widget > .td-row > .date-container{
        width:100%!important;
    }
}

.selfAdPanelNavigation {
    background-color: #fff;
    padding: 5px;
    min-width: 300px;
    max-width: 350px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin-top: 20px;
    align-items: center;
    font-size: 14px;
}

.selfAdPanelNavigation.active {
    background-color: #3071b9;
    color: #fff;
}

.validation-summary-valid {
    display: none !important;
}

.Animated-checkbox {
    height: 21px;
    width: 21px;
    max-width: 21px;
    background-color: transparent;
    border: 2px solid #333;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease .2s;
    -o-transition: border-color ease .2s;
    -webkit-transition: border-color ease .2s;
    transition: border-color ease .2s;
    cursor: pointer;
}

.image-preview-item {
    position: relative;
    display: inline-block;
}

.image-preview-item img {
    border-radius: 5px;
}

.image-preview-item button {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
}

.selfAdCheckBoxLabel {
    position: relative;
    display: block;
    background: #f8f8f8;
    padding: 0px;
    top: 3px;
    cursor: pointer;
    text-shadow: 0 2px 2px #fff;
}

.selfAdCheckBoxLabel::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.7em;
    width: 3em;
    height: 1.2em;
    border-radius: 0.6em;
    background: #eee;
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.2) inset;
}

.selfAdCheckBoxLabel::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5em;
    width: 1.4em;
    height: 1.4em;
    border: 0.25em solid #fafafa;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #ddd;
    background-image: linear-gradient(to top, #fff 0%, #fff 40%, transparent 100%);
    transform: translateY(-50%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}

.selfAdCheckBoxLabel, .selfAdCheckBoxLabel::before, .selfAdCheckBoxLabel::after {
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.selfAdCheckBoxLabel:hover, .selfAdCheckBox:focus+input+.selfAdCheckBoxLabel {
    color: black;
}

.selfAdCheckBoxLabel:hover::after, .selfAdCheckBox:focus+input+.selfAdCheckBoxLabel::after {
    background-color: #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.selfAdCheckBox:checked+.selfAdCheckBoxLabel::before {
    background: #63BC94;
}

.selfAdCheckBox:checked+.selfAdCheckBoxLabel::after {
    transform: translateX(2em) translateY(-50%);
}

/*
    effacer pour mettre ceux de la pr de guillaume plus tard
*/

.emojiPicker, .backgroundPicker {
    display: none;
    justify-content: end;
    width: 100%;
    position: relative;
}

.emojiPicker.shown, .backgroundPicker.shown {
    display: flex;
}

.interaction-stats-row{
    font-size:14px;
}

.interaction-icons-row {
    display: flex;
    justify-content: space-evenly;
}

.interaction-icon-holder {
    width: 15px;
}
.interaction-icon-holder i{
    font-size:20px;
    width:100%;    
    text-align: center;
    cursor:pointer;
}

.faved-post {
    color: #E3601C;
}

.liked-post {
    color: #E3601C;
}

.add-on-slash{
    position:absolute;
    top:0px;
    left:0px;
}

/*Nouvel Annonceur*/
.new-advertiser-wrapper {
    background-color: #E3601C;
    position: absolute;
    color: white;
    padding: 0px 15px 0px 8px;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: bold;
    display: flex;
}

.annonce-content .new-advertiser-wrapper {
    top: 0px;
    right: 0px;
}

.follow-button {
    color: #0065d1;
    cursor:pointer;
}

/*Commentaires*/
.newMainCommentForm {
    position: sticky;
    bottom: 0px;
    background-color: white;
    width: calc(100% - 0px) !important;
    display: none;
    padding: 5px;
}
.newMainCommentForm.show{
    display:flex;
}
.comment-avatar{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}

.comments-area {
    border-top: 2px solid #70706F;
}
.commentAuthor{
    font-size:12px;
}
.comment-tool .LetterAv, .comments-area .LetterAv {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    font-size: 12px;
}
.comment-tool .LetterAv .fa-user-secret, .comments-area .LetterAv .fa-user-secret{
    font-size:17px;
}

.comment-tool .pastilleCompagnie, .comments-area .pastilleCompagnie {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.no-comment
{
    display:none!important;
}
.commentReply, .comment-replies, .comments-area {
    display: none;
}
.commentReply.show, .comment-replies.show, .comments-area.show {
    display: flex;
    flex-wrap: wrap;
}
.seeMoreReplies.d-none{
    display:none!important;
}

.commentText {
    background-color: #F0F0F0;
    font-size: 15px;
    word-break: break-word;
}

.comments-section, .comment-replies {
    position: relative;
    flex-grow:1;
}

.commentEmojiPicker {
    position: absolute;
    left: 15px;
    width:20px;
    bottom: 15px;
    font-size: 18px!important;
}
.commentImagePicker {
    position: absolute;
    left: 45px;
    width: 20px;
    bottom: 15px;
    font-size: 18px !important;
    margin: 0px;
    height: auto;
    display: flex;
}
.imageComment{
    max-width:250px;
}

.commentSubmitIcon {
    font-size: 18px !important;
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    position: absolute;
    right: 15px;
    bottom: 10px;
    margin: 0px;
}

.commentTextArea {
    border: none;
    outline: none;
    color:black;
}

textarea {
    resize: unset !important;
}

.like-stats-icon-wrapper i {
    background-color: #7Eb1E2;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 16px;
}

/*likeList*/
.likeList {
    list-style: none;
    padding: 0px;
}

.likeList .LetterAv{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    font-size: 12px;
}

.likeList .pastille {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.hover-underline:hover{
    text-decoration:underline;
}

/*SelfAdvertiser data widget*/
@media only screen and (min-width: 576px) {
    .SelfAdBusinessHeaderInfoBloc {
        background-color: #DAE7F5;
        transition: height 5s ease;
    }
}

.collapsedInfoBloc{
    display:none;
}
.collapsedInfoBloc.show {
    display: flex;
}
.expandedInfoBloc {
    display: none;
}
.expandedInfoBloc.show {
    display: flex;
}

.seeMorechevron {
    color: #E3601C;
    font-weight: bold;
    font-size: 15px;
}

/*fix du menu mobile, bypass les règle de hover*/
#BottomMenuMobile .dropdown .selfAdProfileMenu {
    display: none!important;
}
#BottomMenuMobile .dropdown.active .selfAdProfileMenu {
    display: block!important;
}

.overlayMenuMobile{
    display:none;
}
.menuMobileOpen-body .overlayMenuMobile { /*Menu mobile open overlay*/
    display:block;
    height: 100vh;
    background-color: #000000;
    opacity:0.5;
    position: fixed;
    width: 100vW;
    bottom:45px;/*Mobile footer height*/
}

#UserMenu{
    min-width:50px;
}
#UserMenu .pastilleCompagnie{
    margin-right: 0px;
}
#UserMenu .profile-item .pastilleCompagnie{
    margin-right: 10px;
}

#BottomMenuMobile .userMenuCurrentLink {
    pointer-events: none; /*Doit ouvrir le menu déclencher par click sur parent au lieu de suivre le lien*/
}

/*Bottom menu*/
.menuMobileOpen-body {
    overflow: hidden; /*empêche de scoll*/
}

#BottomMenuMobile {
    display: flex;
    position: fixed;
    bottom: 0px;
    height: 45px;
    background-color: #EBEBEB;
    width: 100%;
}


#BottomMenuMobile .icons .icon-wrapper {
    width: 75px;
    display:flex; 
    align-items:center;
    /*Doit overide l'icon user sur mobile*/
    justify-content:center!important; 
    margin:0px!important;
    max-width: 75px;
    min-width: 75px;
    font-size:16px;
}

.userMenuMobile-wrapper {
    position:static;
}
.userMenuMobile-wrapper > div {
    display: flex !important;
    justify-content: center !important;
    margin: 0px !important;
    position: static !important;
}
.userMenuMobile-wrapper .pastilleCompagnie{
    margin:0px!important;
    width:25px;
    height:25px;
}
.userMenuMobile-wrapper .LetterAv {    
    font-size: 12px;
}
.userMenuMobile-wrapper .profile-menu .pastilleCompagnie{
    margin-right: 10px!important;
    width: 35px;
    height: 35px;
}
.userMenuMobile-wrapper .profile-menu .LetterAv {
    font-size: 20px;
}

#BottomMenuMobile .icons .icon {
    height: 20px;
    width: 20px;
}

.bottomMobileSearch {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 45px;
    height: 0px;
    overflow: hidden;
    width: 100%;
    transition: height 0.3s ease;
    z-index: 1001;
    /*Glass like effect*/
    /*
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    */
}
.bottomMobileSearch .list-type-search li, .bottomMobileSearch .list-type-search li.active {
    font-size: 12px;
    color:#3E3E3E;
    border-color:#3E3E3E;
}
.bottomMobileSearch input, .bottomMobileSearch li {
    /*
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    */
    height:30px!important;
    margin-top:0px;
    margin-bottom:0px;
}

.bottomMobileSearch.active{
    height:75px;
    display:flex;
    flex-wrap:wrap;
}

#BottomMenuMobile .selfAdProfileMenu {
    top: auto;
    bottom: 45px;
    max-height: calc(100vh - 115px); /* 45px pour le menu du bas, 70px pour laisser le logo visible, le 70 px donne donne de la marge pour les mobile qui ne réduise pas le vh pour prendre en compte leur propre interface. */
    overflow: auto !important;
    right: 0px;
    left: unset !important;
    max-width: none;
    border-radius: 20px 20px 0px 0px !important;
}

@media screen and (max-width:425px) {
    #BottomMenuMobile .selfAdProfileMenu {
        width: 100%;
    }
}

/*Extra Action modal*/

#extraActionMenu div:first-child {
    margin-top: 0px !important;
}

#extraActionMenu div:last-child {
    margin-bottom: 15px !important;
}

.extraActionLabel {
    color: var(--modal-label-color);
    font-size:14px;
}

.no-hover-style {
    text-decoration: none;
    color: inherit;
  }
  
  .no-hover-style:hover,
  .no-hover-style:focus,
  .no-hover-style:active {
    text-decoration: none;
    color: inherit;
  }

/*Report modal*/
.radio {
    margin: 0.5rem;
}

.reportReasonRadio {
    position: absolute;
    opacity: 0;
}

.reportReasonRadio + .reportReasonLabel:before {
    content: "";
    border-radius: 100%;
    border: 1px solid black;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -0.2em;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.reportReasonRadio:checked + .reportReasonLabel:before {
    background-color: var(--radio-color);
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.reportReasonRadio:focus + .reportReasonLabel:before {
    outline: none;
    border-color: var(--radio-color);
}

.reportReasonRadio:disabled + .reportReasonLabel:before {
    box-shadow: inset 0 0 0 4px var(--radio-disabled-color);
    border-color: black;
    background: white;
}

.reportReasonRadio + .reportReasonLabel:empty:before {
    margin-right: 0;
}

.reportReasonLabel {
    color: var(--modal-label-color);
    font-size: 14px;
}

.reportSubmit {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


/*Pages public*/
.terms-title {
    font-size: 35px;
    line-height: normal;
    text-align: center;
}
.terms-font-size{
    font-size:18px;
}

.cursor-pointer{
    cursor: pointer;
}

.publication-button{
    padding-right: 5px;
    height: 30px;
    font-size: 26px;
    color: grey;
}

.fw-bold{
    font-weight: bold;
}

.pr-xmark {
    position: relative;
    top: 20px;
}

.blue-button {
    border-radius: 10px;
    background-color: #7EB1E2;
    color: #FFFFFF;
    justify-content: center;
    width: 80px;
}

.HomeIconMobile {
    background-image: url("/images/Icon_user_home.svg");
    background-size: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 40px;
    width: 50px;
}


/*Details*/

.fullSizeModalOpen-body {
    overflow: hidden; /*empêche de scoll*/
}

.fullSizeModal {
    position: fixed;
    display: grid;
    place-items: center; /* Center the image */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    overflow: auto;
}

    /*N'est plus utilisé que pour les images commentaire*/
    .fullSizeModal img {
        width: max-content;
        height: max-content;
        max-height: 100vh;
        max-width: 100vw;
        transform-origin: center center;
        will-change: transform;
        cursor: grab;
        user-select: none;
        -webkit-user-drag: none;
        touch-action: none;
    }

/* advertiser listing */
.advertiserListingItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.advertiserListingItem .LetterAv {
    margin-right: 10px;
    width: 35px;
    height: 35px;
    font-size: 12px;
}

.advertiserListingItem .pastilleCompagnie {
    width: 35px;
    height: 35px;
}

#DetailsModal{
    outline:50px solid black;
}
#DetailsModal .modal-content{
    background-color:black;
    border:none!important;
}
/*Modal mobile*/
.layout-mobile .annonceListingBlock.modal.modal-open {
    height: 100%!important;
}

.layout-mobile .annonceListingBlock.modal.modal-open .annonce-content{
    border-radius:0px;
    box-shadow:none;
}

.layout-mobile #DetailsModal {
    height: 100%!important;
}

.description-annonceur, .address-annonceur {
    overflow: hidden;
    height: auto;
    width: 100%;
    margin: unset;
    padding: unset;
    color: black;
    font-size: 14px;
    border: 1px solid #dddfe4;
    &:disabled {
        border: none;
        background-color: transparent;
    }
}

header {
    position: sticky !important;
    top: 0;
    z-index: 999;
    background-color: white;
  }

.category-slider {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.category-slider::-webkit-scrollbar {
    display: none;
}

.category-slider li {
    position: relative;
    flex-shrink: 0;
}

.category-slider li.active span {
    position: relative;
}


/*Loading*/
.node-in-loading {
    min-height:160px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.disablepointer{
    pointer-events:none;
}

.global-loading-overylay {
    position: fixed;
    top: 0px;
    background-color: #44444499;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events:none;
    z-index:1000;
}

.global-loading-overylay > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.loading-message {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 22px;
}
/* 
    Loading par https://css-loaders.com/ modifié pour la marque Publio    
    HTML: <div class="loader"></div> 
*/
.loader {
    width: 100px;
    aspect-ratio: 1;
    color: #7EB1E2;
    background: url("/images/publio_logo.png");
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: center;
    border-radius: 48%;
    position: relative;
    margin: 50px;
}

    .loader:before {
        content: "";
        position: absolute;
        background: radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%) 0 0, radial-gradient(farthest-side at bottom left,#0000 94%,currentColor 96%) 100% 0, radial-gradient(farthest-side at top left,#0000 94%,currentColor 96%) 100% 100%, radial-gradient(farthest-side at top right,#0000 94%,currentColor 96%) 0 100%;
        background-size: 50px 50px;
        background-repeat: no-repeat;
        animation: l39-1 1s infinite, l39-2 1s infinite;
    }

@keyframes l39-1 {
    0%,10%,90%,100% {
        inset: 0
    }

    40%,60% {
        inset: -10px
    }
}

@keyframes l39-2 {
    0%,40% {
        transform: rotate(0)
    }

    60%,100% {
        transform: rotate(90deg)
    }
}
