/* Custom Pink version */

// Override default variables
/*$primary-500: #00aaaa;
$primary-600: #009696;
$primary-700: #008080;*/

$primary-500: #008989;
$primary-600: #008080;
$primary-700: #006c6c;
$enable-responsive-typography: true;

// Import Pico
@import "./pico/pico";
  

[role="button"] {
    margin: 0.1em 0;
}
[role="button"].large {
    width: 100%;
}

:root {
    --pico-font-size: 80%;
    --spacing: 0.4rem;
    
    h1 {
        --typography-spacing-vertical: 0.6rem;
    }
    h2 {
        --typography-spacing-vertical: 0.6rem;
        --font-size: 1.5rem;
    }
    h3 {
        --typography-spacing-vertical: 0.6rem;
        --font-size: 1.3rem;
    }
    p {
        --typography-spacing-vertical: 0.6rem;
    }
    --transition: 0.1s ease-in-out;

    // Modal (<dialog>)
    --modal-overlay-backdrop-filter: blur(0.05rem);
  
    --background-color-transparent: color-mix(in srgb, var(--background-color), transparent 30%);

    --background-color-transparent-light: color-mix(in srgb, var(--background-color), transparent 80%);
}


body>footer {
    text-align: center;
    font-size: 90%;
    p {
        font-size: 80%;
    }
}

.cat,
.action {
    margin-left: .2em;
    line-height: 1.2em;
    height: 1.2em;
    width: 1.2em;
    border-radius: 0.6em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 80%;
}

.cat[data-tooltip]:not(a, button, input),
.recurrent span[data-tooltip] {
    border: 0;
}


.action {
    color: $primary-500;
    background: var(--secondary-inverse);
}

.cat {
    margin-left: 0;
    margin-right: .2em;   
}

a:hover>.action,
span:hover>.action {
    transition: color var(--transition);
    color: $primary-600;
    background: var(--primary-inverse);
}

nav a>.action {
    color: var(--primary-inverse);
    background: $primary-600;
}

nav a:hover>.action {
    background: $primary-700;
    color: var(--primary-inverse);
}

details {
    border-bottom: 0;
}
details summary[role="button"]  {
    color: var(--contrast);
    [role="button"] {
        margin: -0.2em 0;
    }
    margin-top: 0.5em;
}

details[role="list"] summary + ul li.selected>a{
    background: $primary-600;
    color: var(--secondary-inverse);
}

details[role="list"] summary + ul li.selected>a:hover {
    background: $primary-500;
    color: var(--primary-inverse);
}

#filters {
    .categories {
        [data-tooltip]::before, [data-tooltip]::after {
            display: none;
        }

        a:focus, ::selection {
            background-color: transparent;
        }

        .developpe, .non-developpe {
            background: var(--primary-focus);
            color: var(--contrast);
            border-radius: 1.3em;
            height: 2.4em;
            padding: 0.1em .2em;
            .titre {
                vertical-align: middle;
                margin-right: .2em;
            }
            display: inline-block;
            margin: .1em 0;
            span {
                cursor: pointer;
            }
        }
        .non-developpe {
            background: none;
            padding: 0.1em 0;
        }
        .developpe {
            svg {
                margin-right: .5em;
                vertical-align: middle;
            }           
        } 

    }
    .suggestions {
        font-size: 80%;
    }
}

@media (min-width: 992px) {
    details summary[role="button"]  {
        margin-top: 0;
    }
    #filters .categories {
        width: 50%;
        clear: both;
        float: left;
        text-align: left;
        line-height: 2em;
        [data-tooltip]::before, [data-tooltip]::after {
            display: block;
        }
    }
    #filters .filtres {
        width: 50%;
        float: right;
        summary {
            padding: 0.2em 0.4em;
        }
    }
    
}

#filters .filtres:has(details[open=""]) {
    width: 100%;
    transition: width 0.1s ease-in-out;
    display: block;
    summary {
        padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
        margin-top: 0.5em;
    }
}

.clear {
    clear: both;
}

#main-nav {
    box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2);
}

.small-cat {
    @extend .outline;
    font-size: 90%;
    padding: 0.15em 0.4em 0.3em 0.4em;
    text-align: left;
}

.suggestions .small-cat {
    overflow: visible;
}

.small-location {
    @extend .small-cat;
    border-color: var(--contrast);
    color: var(--contrast);
}

.circ-cat.circ-large {
    height: 2.6em;
    width: 2.6em;
    border-radius: 1.3em;
    line-height: 2.2em;
    img {
        width: 70%;
        margin: .4em 0;
    }
}

.reduced {
    opacity: .3;
}
.reduced:hover {
    opacity: 1;
}

ul {
    margin-left: 1em;
}

span.small-cat {
    cursor: default;
}

.simple-button {
    font-size: 120%;
    margin-left: .1em;
    display: inline;
    text-align: center;
    vertical-align: middle;
    line-height: 1.8em;
}

svg {
    vertical-align: -0.125em;
}

.small-ephemeride {
    font-size: 80%;
    clear: both;
}
.ephemeris {
    float: left;
    font-size: 110%;
    padding: 0.8em 0;
    margin: 0 1em 0 0;
    text-align: center;
    width: 25%;
    min-width: 7em;

    .large {
        font-size: 140%;
        font-weight: bold;
    }

    footer {
        font-size: 140%;
        padding: 0.3em;
        margin: .6em 0 -0.8em 0;
        font-weight: bold;
        color: var(--primary);
    }
}

@media only screen and (min-width: 600px) {
    .details-entete {
        padding-left: 28%;
    }
}

.ephemeris-hour {
    @extend .ephemeris;
    padding: 1.5em 0.1em;
    width: 15%;
    min-width: 5em;
    font-weight: bold;
}

.illustration {
    width: 100%;
    padding: 0.3em;
    margin: 0 0 0.5em 0;
    float: right;
}

@media only screen and (min-width: 992px) {
    .illustration {
        width: 20em;
    }

}

footer {
    clear: both;
}

footer [data-tooltip] {
    position: static;
}


#calendar {
    width: 100%;
    overflow: auto;
    scroll-snap-type: both mandatory;
    scroll-behavior: smooth;
    transition-duration: 200ms;


    .cat {
        margin-right: 0;
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
        min-width: 1840px;
        article {
            scroll-snap-align: start;
        }

    }
    .grid.week-in-month {
        grid-template-columns: 2.5em repeat(auto-fit, minmax(0%, 1fr));
        margin-bottom: .5em;
    }
    .entete-semaine {
        text-orientation: mixed;
        writing-mode: vertical-rl;
        text-align: center;
        background: rgba(0, 137, 137, 0.2);
        padding: 1em 0;
        h2 {
            margin: 0;
        }
    }
    .slider-button {
        @extend [role="button"], .secondary;
        height: 1.8em;
        width: 1.8em;
        padding: 0;
        font-size: 150%;
        border-radius: .9em;
        line-height: 1.8em;
        text-align: center;
        position: fixed;
        top: 65vh;
        z-index: 10;
        opacity: 0.9;
        a {
            color: var(--primary-inverse);
        }
    }
    .slider-button.hidden {
        display: none;
    }
    .slider-button.button-left {
        left: .4em;
    }
    .slider-button.button-right {
        right: .4em;
    }
}

@media only screen and (min-width: 992px) {

    .infos-and-buttons {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }



    .infos-and-buttons .infos {
        flex: 50;
    }

    .infos-and-buttons .buttons {
        flex: auto;
    }


}

article.day {
    margin: 0;
    padding: 0 0 0.3em 0;
    min-height: 12em;
}

article.day>header {
    margin: 0;
    padding: 0.3em 0.3em 0 0.3em;
}

article.day>ul {
    margin: 0 0.2em .8em 0.2em;
    padding: 0;

    >li {
        list-style: none;
    }
}


.right {
    text-align: right;
}
.description {
    padding: 0;
    position: relative;
    .texte {
        padding-bottom: 3.5em;
    }
}
.right.bottom {
    position: absolute;
    bottom: 0.5em;
    right: 0;
}

header .title {
    text-align: center;
}

.title.small h1 {
    font-size: 150%;
}

.navigation {
    margin: 1em 0;
    height: 2.5em;
    @media only screen and (min-width: 992px) {
        margin: -3.4em 0 3.4em 0;
        height: fit-content;
    }
    
    padding: 0;
    div {
        width: fit-content;
        float: left;
        @media only screen and (min-width: 992px) {
            a {
                width: 10em;
            }
        }
    }
    div.right {
        float: right;
    }
    
}


.day.today>header,
.day.today {
    background: rgba(255, 0, 76, 0.1);
}

.day.past>ul>li>:not(dialog), .day.past>header {
    opacity: 0.6;
}

.day.other_month {
    opacity: 0.2;
}


@media only screen and (prefers-color-scheme: light) {
    [data-theme="light"],
    :root:not([data-theme="dark"]) {
        #filters summary:after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }   
    }
}

body > main {
    padding-top: 0.2em;
}

body.authenticated > main {
    padding-top: 0.8em;
}
@media only screen and (min-width: 700px) {
    body.authenticated > main {
        padding-top: 0.2em;
    }    
}

article {
    margin: 1em 0;
}

article form label {
    display: inline-block;
}

article#filters {
    margin-bottom: 0;
    padding-bottom: 0.2em;
    margin-top: 0.4em;
    padding-top: 0.6em;
    
    .buttons-filter {
        float: right;
        text-align: right;
        display: none;
        margin-top: -2em;
    }
    form>label {
        display: inline-block;
    }
    .options-filter {
        clear: both;
        padding: 0.5em;

        [role="button"].small-cat {
            margin: 0.2em;
            height: 2.6em;
            line-height: 2.2em;
            padding-left: 0.6em;
            span {
                margin-right: .6em;
            }
            label {
                display: inline-block;
            }
            .cat {
                border: 0;
            }
    
            &.no-selected {
                @extend .secondary, .outline;

                label {
                    color: var(--secondary);
                }
            }
        }
        [role="button"] input {
            margin-left: 0.3em;
        }

    }
}

.helptext, .subentry-search, .remarque {
    font-size: 80%;
    margin-top: -0.7em;
    ul {
        font-size: 100%;
    }
}
.helptext {
    display: block;
    margin-top: 0;
}


header .remarque {
    font-style: italic;
}


.django-ckeditor-widget {
    width: 100%;
}

.cke_editable {
    font-size: 13px;
    line-height: 1.6;
    background-color: #1C1C1C !important;
    word-wrap: break-word;
}

.slide-buttons {
    float: right;
    max-width: 30em;
    text-align: right;
}
.left-buttons {
    display: inline-block;
}

.highlight {
    color: var(--primary);
    font-weight: bold;
    font-style: italic;
}

.search .description {
    margin-left: 1em;
    font-size: 90%;
    margin-top: -0.5em;
}

.form.recent, .form.main-filter, .search .form {
    #id_status>div, #id_representative>div, #id_pure_import>div, #id_in_recurrent_import>div {
        display: inline-block;
        margin-right: 2em;
    }
}
.form.recent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: .5em;
    :last-child, :nth-last-child(4),
    button {
        grid-column: 1/3;
    }
}
.form.recent.moderation-events {
    :nth-last-child(4) {
        grid-column: 2/3;
    }

}
.form.recent.messages {
    div:nth-child(2) {
        grid-column: 1/2;
    }
    div:nth-last-child(3) {
        grid-column: 2/3;
        grid-row: 1/3;
    }

}

#search {
    form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: .5em;
        :first-child,
        button {
            grid-column: 1/3;
        }
    }
}

/* Basic picocss alerts */



// import some colors from pico _colors.scss
$amber-50: #fff8e1 !default;
$amber-900: #ff6f00 !default;
$green-50: #e8f5e9 !default;
$green-800: #1b5e20 !default;
$red-50: #ffebee !default;
$red-900: #b71c1c !default;
$yellow-50: #ecf4a4 !default;
$yellow-900: #616918 !default;

// simple picocss alerts
// inherit responsive typography, responsive spacing, icons and size
.message {
  $iconsize: calc(var(--font-size) *  1.5); // 24px / 30px if $enable-responsive-spacings
  margin-bottom: var(--spacing); // some default space below alert element
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); // same as forms .input
  border-radius: var(--border-radius);
  //font-weight: 500; // var(--font-weight);
  //font-size: 1rem;
  //line-height: var(--line-height);
  color: var(--color);
  background-color: var(--background-color);
  border: 1px solid var(--background-color); // compensate for 1px border

  // icon
  background-image: var(--icon);
  background-position: center left var(--form-element-spacing-vertical); // use vertical for icon left align
  background-size: $iconsize auto;
  padding-left: calc(var(--form-element-spacing-vertical) * 2 + #{$iconsize});
}
.message.danger, .message.error {
  --background-color: #{$red-50};
  --icon: var(--icon-invalid);
  --color: #{$red-900};
}
.message.warning {
  --background-color: #{$amber-50};
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba(darken($amber-900, 15%), .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --color: #{darken($amber-900, 20%)};
}
.message.success {
  --background-color: #{$green-50};
  --icon: var(--icon-valid);
  --color: #{$green-800};
}
.message.info {
    --background-color: #{$yellow-50};
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba(darken($yellow-900, 15%), .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --color: #{$yellow-900};
}

  
.footer {
    opacity: 0.7;
    font-size: 80%;
}

.errorlist {
    @extend .message, .danger;
    margin-left: 0;
    padding-left: 3.7em;
}

nav>div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-nav {
    display: block;
    >nav {
        position: absolute;
        float: left;
        top: 0;
        z-index: 0;
        left: 0;
        padding-right: 0;
        max-width: 70%;
        padding-top: 0.2em;
        li {
            font-size: 75%;
            padding: 0.1em 0;
            .soustitre {
                font-size: 60%;
                font-style: italic;
            }
    
            img {
                font-size: 130%;
                height: 2em;
            }
        }
        li:first-child {
            padding: 0.2em 0.5em;
        }


        @media only screen and (min-width: 380px) {
            max-width: 80%;
            li {
                font-size: 85%;
                img {
                    font-size: 110%;
                }
            }
        }
        @media only screen and (min-width: 992px) {
            li:first-child {
                padding: 0.5em 0.5em;
            }
        }
    }

    ul, div {
        margin: 0 0 auto 0;
    }

    overflow: hidden;

      /* header */
      .header {
        float: right;
        z-index: 1;  
        position: relative;
        text-align: right;    
        display: block;
      }
      
      .header ul {
        margin: 0.2em 0 0.35em 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        width: 100%;
      }
      .header ul li {
        clear: both;
        float: right;
        padding: .4em .8em;
        width: 100%;
        a {
            width: 100%;
        }
      }
            
      .header .logo {
        display: block;
        float: left;
        font-size: 2em;
        padding: 10px 20px;
        text-decoration: none;
      }
      
      /* menu */
      
      .header .menu {
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;
        display: block;
        float: right;
        margin: 0;
        padding-right: 0.5em;

        li {
            margin: 0;
        }
      }
      
      /* menu icon */
      
      .header .menu-icon {
        cursor: pointer;
        display: block;
        float: right;
        padding: 7px 10px 3px 20px;
        position: relative;
        user-select: none;
        font-size: 24px;
      }
      
      .header .menu-icon .navicon {
        background: #333;
        display: block;
        height: 2px;
        position: relative;
        transition: background .2s ease-out;
        width: 18px;
      }
      
      .header .menu-icon .navicon:before,
      .header .menu-icon .navicon:after {
        background: #333;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
      }
      
      .header .menu-icon .navicon:before {
        top: 5px;
      }
      
      .header .menu-icon .navicon:after {
        top: -5px;
      }
      
      /* menu btn */
      
      .header .menu-btn {
        display: none;
      }
      
      .header .menu-btn:checked ~ .menu {
        max-height: 240px;
      }
      
      .header .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
      }
      
      .header .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
      }
      
      .header .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
      }
      
      .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
      .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
        top: 0;
      }
      
      
      @media only screen and (min-width: 1400px) {
        .header li {
          float: left;
        }
        .header .menu {
          clear: none;
          float: right;
          max-height: none;
        }
        .header .menu-icon {
          display: none;
        }
        .header ul li {
            clear: none;
            float: none;
            display: inline-block;
            padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
            width: auto;
        }
    }
}

.badge, nav .badge {
    @extend [role="button"];
    font-size: 70%;
    padding: 0.2em .8em;
    border-radius: .5em;
}



.badge.error {
    background: #b71c1c;
    border-color: #cb1b1b;
}

.badge.simple {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-inverse);
}

#badges {
    position: absolute;
    font-size: 70%;
    top:3.5em;
    left: 0;
    padding: 0.2em .5em 0.2em 0.2em;
    background: var(--card-sectionning-background-color);
    display: inline-block;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;

    .badge {
        margin: 0;
        border-radius: 0;

    }
    .link {
        margin-left: .5em;
    }
}

@media only screen and (min-width: 700px) {
    #badges {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        padding: 0 .5em .2em .5em;
        z-index: 1000;
    }

}


.tw-badge {
    background: black;
    border-color: black;
    color: #f2f207;
    font-weight: bold;
    padding: 0.2em 0.4em;
    font-size: 60%;
    opacity: 80%;
}

.tw-prefix {
    background: black;
    color: #f2f207;    
    height: 2.1em;
    margin: -0.5em 0 -0.5em -0.5em;
    padding: 0.3em;
    display: inline-block;
}

form [role="button"], form button {
    margin: var(--spacing) 0 var(--spacing) 0;
}

form .buttons [role="button"] {
    margin: 0 0 var(--spacing) 0;
}

.large {
    margin: 2em auto;
}

.min-y-grid {
    min-height: 4em;
}

@media (min-width: 992px) {
    .grid.two-columns {
      grid-column-gap: var(--nav-element-spacing-vertical);
      grid-template-columns: auto 25%;
    }
    .grid.two-columns-2 {
        grid-column-gap: var(--nav-element-spacing-vertical);
        grid-template-columns: 30% auto;
        align-items: center;
    }
    .grid.two-columns.grid-reverse {
        grid-template-columns: 25% auto;
    }
    .grid.two-columns-equal {
        grid-column-gap: var(--nav-element-spacing-vertical);
        grid-template-columns: 50% 50%;
    }
    
  }

aside nav a.selected {
    background: var(--primary-focus);
}
aside nav a.badge {
    z-index: 1;
    margin-top: -2em;
    float: right;
}

aside nav.paragraph li a, aside .no-breakline li a {
    display: inline;
}

.body-fixed {
    max-height: 50vh;
    overflow-y: scroll;
}

.django-ckeditor-widget a[role="button"]:not([href]) {
  opacity: 1;
  pointer-events: all;
}

/* mise en forme pour les récurrences */
article form div .recurrence-widget {
    width: 100%;
    border: 0;

    .panel {
        @extend article;
        .header {
            @extend header;
        }
    }

    .header a, .add-button {
        @extend [role="button"];
        border-color: var(--primary) !important;
        color: var(--primary-inverse) !important;
        margin-right: var(--nav-element-spacing-horizontal);
        span {
            color: var(--primary-inverse);
        }
        


        span.plus {
            margin-right: var(--nav-element-spacing-horizontal);
        }
    }

    li {
        list-style: none;
    }

    .freq, .count, .interval, .until {
        width: 50%;
        float: left;
    }
    .freq, .until {
        padding-right: .2em;
    }
    .interval, .count {
        padding-left: .2em;
    }
    [name="position"], [name="weekday"] {
        width: 49%;
    }
    [name="position"] {
        float: left;
    }
    [name="weekday"] {
        float: right;
    }

    form {
        border: 0;
        input.radio, input.checkbox {
            width: 1.2em;
        }
    }

    .limit, .monthday {
        clear: both;
    }
    [name="freq"], .date-selector {
        margin-left: .4em;
        width: 15em;
    }
    [name="interval"], [name="count"] {
        width: 3em;
        margin: 0 0.4em;
    }
    .control {
        clear: both;
    }

    table.grid {
        border: 0;
        td {
            @extend [role="button"];
            background: transparent;
            color: var(--secondary);
            border-color: var(--secondary);
            
            margin-right: var(--nav-element-spacing-horizontal);
            width: 5em;

            &.active {
                @extend [role="button"];
                width: 5em;
                margin-right: var(--nav-element-spacing-horizontal);
            }
        }
        
    }


}

.large-table {
    overflow-x: scroll;
    width: 100%;

    .center {
        text-align: center;
    }

    .border-left {
        border-left: 1px solid var(--muted-border-color);
    }
}

.container-fluid article form .hidden {
    display: none;
}

article>article {
    margin: 3em 0.5em;
    padding: 0.6em 0.2em;
}


.badge-circle {
    display: block;
    float: left;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    color: var(--secondary-inverse);
    background: $primary-500;
}


.entete-badge {
    grid-template-columns: 2.5em repeat(auto-fit, minmax(0%, 1fr));
    
    .full-columns {
        grid-column: 1 / 3;
    }
    .badge-large {
        @extend .badge-circle;
        font-size: 140%;
    }
    .badge-secondary {
        background-color: var(--secondary);
    }
    li {
        list-style-type: none;
    }
}

.comparison-item {
    margin: 0.4em;   
    .duplicated {
        padding: 0.5em;
        background: rgba(255, 0, 76, 0.1);
        border-radius: 0.5em;
    }
}
.badge-small {
    @extend .badge-circle;
    font-size: 70%;
    width: 2em;
    height: 2em;
    line-height: 2em;
    margin-right: 1em;
}

span.badge-small {
    display: inline-block;
    float: none;
    margin-right: 0;
}

.strike {
    text-decoration: line-through;
}

table .buttons {
    display: flex;
    flex: auto;
    gap: 0.4em;
}

.image {
    text-align: center;
    img {
        width: 800px;
        margin: 4em auto;
    }
}

.image-flottante {
    width: 30%;
    float: right;
    margin: 0 1em;
    img {
        width: 100%;
        margin: -4em 0 0 0;
    }
}


img.preview {
    height: 100px;
}

/** maps ***/
.leaflet-container {
    width: 100%;
    border-radius: var(--border-radius);
    [role="button"].leaflet-marker-icon {
        background: none;
        border: none;
    }

    .leaflet-control {
        a {
        margin: 0;
        padding: 0;
        }
        a:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
          a:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
          }
    }
}

.missing-data {
    color: red;
}

#filters #id_city {
    columns: 4;
}

.vertical-max {
    height: 100vh;
    overflow-y: scroll;
}

.choices[data-type=select-one] {
    .choices__inner {
        @extend [role="button"], .large;
        .choices__item {
            line-height: var(--line-height);
        }
        .choices__item::after {
            display: block;
            width: 1rem;
            height: 1rem;
            margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
            float: right;
            transform: rotate(-90deg);
            background-image: var(--icon-chevron);
            background-position: right center;
            background-size: 1rem auto;
            background-repeat: no-repeat;
            content: "";
            transition: transform var(--transition);
            box-sizing: border-box;
            margin-top: calc(var(--spacing, 1rem) * 0.8);
        }
    }

    .choices__list--dropdown {
        display: none;
        z-index: 1;
        position: absolute;
        width: 100%;
        top: 100%;
        margin-top: -1px;
        overflow: hidden;
        word-break: break-all;
        will-change: display;
        position: relative;
        max-height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
        
        .choices__item {
            line-height: 2.5em;
            padding-left: 0.5em;
        }
        .choices__item.is-selected {
            background: var(--primary);
            color: var(--primary-inverse);
        }
        .choices__item:hover, .choices__item.is-highlighted {
            background: var(--primary-focus);
        }
    }
    .is-active {
        display: block;
    }


}

.choices[data-type=select-one].is-open {
    .choices__inner {
        .choices__item::after {
                transform: rotate(0);
        }
    }
}

.choices[data-type=select-multiple] {
    .choices__input {
        width: 100% !important;
    }
    .choices__item {
        @extend [role="button"];
        background: transparent;
        color: var(--primary);
        font-size: 90%;
        padding: 0.15em 0.4em 0.3em 0.4em;
        display: inline-block;
        margin: 0.2em !important;
        height: 2.6em;
        line-height: 2.2em;

        button {
            @extend .outline;
            display: inline-block;
            border: 0;
            background: transparent;
            text-indent: -9999px;
            padding: 0;
            appearance: none; 
            width: 1.3em;
            height: 1.3em;
            margin-top: 0.25em;
            vertical-align: middle;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($primary-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
            background-position: right;
            background-repeat: no-repeat;
        }
    }
    .choices__list--dropdown {
        font-size: 80%;
        display: block;
        will-change: display;
        background: var(--background-color);
        padding: 0.4em;
        border-radius: 0.2em;
        box-shadow: 0 -1px 0 rgba(115, 130, 140, 0.2);
        position: relative;
        max-height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }
    .choices__list--dropdown .choices__group,
    .choices__list--dropdown .choices__item {
        display: none;
    }

    .choices__list--dropdown .choices__item.visible,
    .choices__list--dropdown.is-active .choices__item {
        display: inline-block;
    }

    .choices__list--dropdown .choices__group.visible,
    .choices__list--dropdown.is-active .choices__group {
        display: block;
    }
}




.stick-bottom {
    background: var(--card-sectionning-background-color);
    margin-right: calc(var(--block-spacing-horizontal) * -1);
    margin-left: calc(var(--block-spacing-horizontal) * -1);
    padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
    margin-bottom: calc(var(--block-spacing-vertical) * -1);
    position: sticky;
    bottom: 0;
    box-shadow: 0 -1px 0 rgba(115, 130, 140, 0.2);
}

/*#menu-rechercher, #menu-ajouter, #menu-configurer {
    display: none;
}*/

#boutons-fixes {
    z-index: 1000;
    li {
        list-style: none;
        @extend [role="button"], .secondary;
        height: 1.8em;
        width: 1.8em;
        padding: 0;
        font-size: 150%;
        border-radius: .9em;
        line-height: 1.8em;
        text-align: center;
        z-index: 10;
        opacity: 0.9;
        a {
            color: var(--primary-inverse);
        }
        float: left;
        clear: both;
    }
    position: fixed;
    bottom: calc(var(--spacing) + .4em);
    right: calc(var(--spacing) + .4em);
}

@media only screen and (min-width: 992px) {
    #boutons-fixes {
        display: none;
    }
    #menu-rechercher, #menu-ajouter, #menu-configurer {
        display: inline-block;
    }

}

.a-venir article.single-event {
    scroll-margin-top: 7em;
}

.a-venir, .place, .tag, .tag-descriptions, .organisation {
    article#filters {
        margin: 2em 0;
    }
    .day-interval>.sticky {
    position: sticky;
    top: 0;
    z-index: 10;    
    }

    @media only screen and (min-width: 600px) {
        .single-event, .tag-description {
            display: grid;
            grid-template-columns: 60% auto;
            grid-column-gap: 1em;
        }
        header {
            grid-column: 1 / 3;
        }
    }

    @media only screen and (min-width: 992px) {
        .resume {
            column-count: 4;
        }
        .single-event, .tag-description {
            grid-template-columns: 30% auto 14em;

            header {
                margin: 0;
                grid-column: 1 / 2;
            }
            .illustration {
                width: auto;
            }
            .description>div {
                max-width: 42em;
            }
        }
        .no-image {
            grid-template-columns: 30% auto;
            .description>div {
                max-width: none;
            }
        }
    }
}

.header-complement {
    float: none;
}

@media only screen and (min-width: 992px) {
    .header-complement {
        float: left;
        clear: both;
    }
}

form.messages { 
    div {
        width: 100%;
        display: block;
        fieldset div {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            margin-right: 1em;
        }
    }
    @media only screen and (min-width: 800px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        :last-child {
            grid-column: 1 / 4;   
        }
        div fieldset div {
            display: block;
        }
    }
    
}

.moderate-preview .event-body {
    max-height: 400px;
    overflow-y: auto;
}

#moderate-form #id_status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

label.required::after {
    content: ' *';
    color: red;
}

.contenu #event_form {
    div#group_start, div#group_end {
        grid-column: auto;
        .body_group {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/* group form */
@media only screen and (min-width: 992px) {
    .contenu #event_form form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;

        >div {
            grid-column: 1 / 3;
        }
        div#group_meta, div#group_meta-admin {
            .body_group {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 10px;
                div {
                    grid-column: auto;
                }
            }
        }
        div#group_meta {
            .body_group {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

.maskable_group  {
    margin: 0.5em 0;
    .body_group.closed {
        display: none;
    }
}

.form-place {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: .5em;
    margin-bottom: 0.5em;
    .map-widget {
        grid-row: 3;
    }
    #group_address .body_group {
        display: grid;
        grid-template-columns: repear(2, 1fr);

        column-gap: .5em;
        #div_id_address, #div_id_location {
            grid-column: 1 / 3;
        }
    
    }
}
@media only screen and (min-width: 992px) {
    .form-place {
        grid-template-columns: repeat(2, 1fr);
        
        .map-widget {
            grid-column: 2 / 3;
            grid-row: 1 / 3;
        }

        #group_other {
            grid-column: 1 / 3;
        }
    }
}

.line-now {
    font-size: 60%;
    div {
        display: grid;
        grid-template-columns: fit-content(2em) auto;
        column-gap: .2em;
        color: red;
        .line {
            margin-top: .7em;
            border-top: 1px solid red;
        }
    }
    margin-bottom: 0;
    list-style: none;
}
.a-venir .line-now {
    margin-left: -2em;

}

#chronology { 
    .entree {
        display: grid;
        grid-template-columns: fit-content(2em) auto;
        column-gap: .7em;
        .texte {
            background: var(--background-color);
            padding: 0.1em 0.8em;
            border-radius: var(--border-radius);
            p {
                font-size: 100%;
            }
            p:last-child {
                margin-bottom: 0.1em;
            }
        }
    }
    font-size: 85%;
    footer {
        margin-top: 1.8em;
        padding: 0.2em .8em;
    }
    .ts {
        @extend .badge-small;
        border-radius: var(--border-radius);
        display: inline-block;
        width: 14em;
        margin-right: 1.2em;
    }
}

.moderation_heatmap {
    overflow-x: auto;
    table {
        max-width: 600px;
        margin: auto;
        .total, .month {
            display: none;
        }
        .label {
            display: none;
        }

        th {
            font-size: 90%;
            text-align: center;
        }
        td {
            font-size: 80%;
            text-align: center;
        }
        tbody th {
            text-align: right;
        }
        .ratio {
            padding: 0.1em;
            a, .a {
                margin: auto;
                border-radius: var(--border-radius);
                color: black;
                padding: 0;
                display: block;
                max-width: 6em;
                width: 3.2em;
                height: 2em;
                line-height: 2em;
                text-decoration: none;
            }
        }
        .score_0 {
            a, .a {
                background: rgb(0, 128, 0);
            }
            a:hover {
                background: rgb(0, 176, 0);
            }
        }
        .score_1 {
            a, .a {
                background: rgb(255, 255, 0);
            }
            a:hover {
                background: rgb(248, 248, 121); 
            }
        }
        .score_2 {
            a, .a {
                background: rgb(255, 166, 0);
            }
            a:hover {
                background: rgb(255, 182, 47);
            }
        }
        .score_3 {
            a, .a {
                background: rgb(255, 0, 0);
            }
            a:hover {
                background: rgb(255, 91, 91);
            }
        }
        .score_4 {
            a, .a {
                background: rgb(128, 0, 128);
                color: white;
            }
            a:hover {
                background: rgb(178, 0, 178);
            }
        }
        @media only screen and (min-width: 1800px) {
            .total, .month {
                display: inline;
                opacity: .35;
            }
            .label {
                display: table-cell;
            }
        }
        @media only screen and (min-width: 1600px) {
            .ratio {
                a, .a {
                    width: 5em;
                    height: 3.2em;
                    line-height: 3.2em;
                }
            }
            font-size: 100%;
        }
    }
}

dialog {
    .h-image {
        background-repeat: no-repeat;  
        background-size: cover;
        background-position: center, center;
    }

    .h-mask {
        background-color: var(--background-color);
        margin: calc(var(--spacing) * -1.5);
        padding: calc(var(--spacing) * 1.5);
    }
    .h-mask.visible {
        background-color: var(--background-color-transparent);
        transition: background-color .8s ease-in;
    }
    .h-mask.visible:hover {
        background-color: var(--background-color-transparent-light);
    }
}

.visible-link {
    text-decoration: underline;
}
.detail-link  {
    text-align: right;
    padding-right: 0.4em;
    .visible-link {
        color: var(--contrast);
    }
}
.week-in-month  {
    article {
        .visible-link {
            color: var(--contrast);
        }
    }
}

.logo-socalmedia {
    height: 1.3em;
    vertical-align: middle;
    margin-bottom: .2em;
}

.status_draft header, .status_draft footer  {
    background: repeating-linear-gradient(
        45deg,
        rgba(80, 80, 80, 0.1),
        rgba(80, 80, 80, 0.1) 10px,
        rgba(80, 80, 80, 0.25) 10px,
        rgba(80, 80, 80, 0.25) 20px
        ),

}

.status_trash header, .status_trash footer  {
    background: repeating-linear-gradient(
        45deg,
        rgba(160, 80, 80, 0.1),
        rgba(160, 80, 80, 0.1) 10px,
        rgba(160, 80, 80, 0.25) 10px,
        rgba(160, 80, 80, 0.25) 20px
        ),

}

.duplicate_tofix header, duplicate_tofix footer {
    background: repeating-linear-gradient(
        45deg,
        rgba(187, 66, 66, 0.1),
        rgba(187, 66, 66, 0.1) 10px,
        rgba(240, 9, 9, 0.25) 10px,
        rgba(240, 9, 9, 0.25) 20px
        ),   
}

.single-event header .buttons [role="button"] {
    font-size: 90%;
}

#cal-heatmap-startday g {
    cursor: pointer;
}

#quand-popup {
    article {
        min-width: 30%;
    }
    .air-datepicker {
        margin: 1em auto;
        max-width: 20em;
    }
    footer {
        text-align: left;
        ul, p {
            font-size: 90%;
        }

        ul {
            margin: 0;
            li {
                display: inline-block;
            }
            li:not(:last-child)::after {
                content: ', ';
            }
        }
    }
}

.air-datepicker {
    border: 0px;
    border-radius: var(--border-radius);
    >div {
        margin: 1em;
    }

    --adp-background-color: var(--dropdown-background-color);
    --adp-background-color-hover: var(--primary-hover);
    --adp-background-color-active: var(--primary-focus);
    --adp-background-color-in-range: rgba(92, 196, 239, .1);
    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
    --adp-background-color-selected-other-month-focused: var(--primary-inverse);
    --adp-background-color-selected-other-month: #0d4259;
    --adp-color: var(--color);
    --adp-color-secondary: var(--color);
    --adp-accent-color: var(--contrast);
    --adp-color-current-date: var(--adp-accent-color);
    --adp-color-other-month: var(--muted-color);
    --adp-color-disabled: #525252;
    --adp-color-disabled-in-range: #6b6b6b;
    --adp-color-other-month-hover: var(--primary-inverse);
    --adp-border-color: var(--form-element-border-color);
    --adp-border-color-inner: #3f3f3f;
    --adp-border-color-inline: var(--form-element-border-color);
    --adp-nav-arrow-color: var(--adp-color-secondary);
    --adp-nav-color-secondary: var(--adp-color-secondary);
    --adp-day-name-color: var(--primary);
    --adp-day-name-color-hover: var(--primary);
    --adp-cell-background-color-hover: var(--primary-hover);
    --adp-cell-background-color-selected: var(--primary);
    --adp-cell-background-color-selected-hover: var(--primary-hover);
    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
    --adp-btn-color: var(--adp-accent-color);
    --adp-btn-color-hover: red;
    --adp-btn-background-color-hover: var(--adp-background-color-hover);
    --adp-btn-background-color-active: var(--adp-background-color-active);
    --adp-time-track-color: RGBA(23, 116, 155, .6);
    --adp-time-track-color-hover: RGBA(23, 116, 155, .9);
    --adp-time-day-period-color: var(--adp-color-secondary);
    
    .air-datepicker-overlay {
    --adp-overlay-background-color: rgba(255, 255,255, .3);
    }
    
    .air-datepicker--pointer:after {
    background:var(--adp-background-color);
    border-top: 1px solid var(--adp-border-color-inline);
    border-right: 1px solid var(--adp-border-color-inline);
    }
    
    .air-datepicker--buttons,
    .air-datepicker--time {
    border-top: 1px solid var(--adp-border-color-inner);
    }
    
    .air-datepicker-nav {
        border: 0;
    }
    .air-datepicker--navigation {
        background-color: var(--dropdown-hover-background-color);
        margin: 0;
        padding: 0.5em;
    }
    
    .air-datepicker-time--row input[type=range]::-ms-thumb{
    background: var(--adp-time-track-color);
    border: 1px solid var(--adp-time-track-color);
    }
    
    .air-datepicker-time--row input[type=range]::-webkit-slider-thumb{
    background: var(--adp-time-track-color);
    border: 1px solid var(--adp-time-track-color);
    }
    
    .air-datepicker-time--row input[type=range]::-moz-range-thumb {
    background: var(--adp-time-track-color);
    border: 1px solid var(--adp-time-track-color);
    }
    
    .air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
    border-color: var(--adp-time-track-color-hover);
    }
    .air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
    border-color: var(--adp-time-track-color-hover);
    }
    
    .air-datepicker-time--row input[type=range]:hover::-ms-thumb {
    border-color: var(--adp-time-track-color-hover);
    }
    
    .air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
    }
    .air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
    }
    .air-datepicker-time--row input[type=range]:focus::-ms-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
    }
    .air-datepicker-nav--title:hover,
    .air-datepicker-cell:hover,
    .air-datepicker-nav--action:hover
     {
        color: var(--primary-inverse);
        svg path {
            stroke: var(--primary-inverse);
        }

    }
}
