#container {
    font-size: 12px;
  }

#container :focus {
    outline: none;
  }

.leaflet-fade-anim .leaflet-tile,
.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: auto !important
}


.leaflet-top.leaflet-right {
    padding: 2px 4px;
    margin: 5px;
    background: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: left;
    top: 25px;
    font-size: 13px;
}

.leaflet-tooltip{
    font-size: 13px;
}

.container {
    --apic_com_2: #FF00DE;
    --apic_com_1: #8300FF;
    --apic_com_i: #787878;
    --com_non_surv: #dddddd;
    --vf_com_2: #f989ae;
    --vf_com_1: #bb854b;
    --vf_com_i: #787878;
    --vf_tr_2: #F55B8F;
    --vf_tr_1: #8E6536;
    --vf_tr_i: #4D4D4D;
    --vf_tr: #5050FF;
    --backcolor: #E0E1E8;
    --vigipink: #DB0084;
    --vigipinklight: #DB008430;
    align-items: inherit
}

#carto {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0.5px 0.9px 6px 0 rgba(0, 0, 0, 0.3);
    height: calc(100vh - 142px - 30px);
    position: relative;
    display: flex;
    min-height: 400px
}

#apic_info_button{
    position:absolute;
    top:24px;
    left:300px;
}

#modal_band{
    height: 0px;
}

#modal_apic{
    position: relative;
    top: 50px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: auto;
    font-size: medium;
    border-radius: 20px;
    padding: 14px;
    border-style: solid;
    color: rgb(39,80,136);
    display: none;
}
#modal_apic a:link{
    color: rgb(39,80,136);
}
#modal_apic a:visited{
    color: rgb(39,80,136);
}

#modal_apic_close{
position: absolute;
  right: 10px;
  top: 5px;
  font-size: x-large;
  cursor: pointer;
}

.marker_cluster {
    width: 40px;
    height: 40px;
    background-color: transparent;
    text-align: center;
}

.granu_popup > .leaflet-popup-content-wrapper{
    max-height: 204px;
    min-width: 302px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
}

.granu_popup > .leaflet-popup-tip-container > .leaflet-popup-tip{
    height: 10px;
    width: 10px;
    margin: -7px auto 0;
}

.img_vp1 img {
    height: 50px;
}

.img_vp2 img {
    height: 50px;
}

#nom_granu {
    display: inline;
    cursor: default;
    color:#2c2a7dff;
    font-family: "marianne", serif;
    font-weight: bold;
    font-size: large;
}

#insee_bulle {
    display: inline;
    cursor: default;
    color:#2c2a7dff;
    font-family: "marianne", serif;
    font-size: medium;
}

#img_infobulle{
    display: inline;
    position: relative;
    top: 3px;
}


#img_infobulle > img {
    height: 20px;
    width: 20px;
}

#custom-tooltip{
    cursor: pointer;
    position:absolute;
    display:none;
    background-color:white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.leaflet-popup-content > .alert_none {
    cursor: default;
    color: #2c2a7dff;
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.leaflet-popup-content > .alert_indispo {
    cursor: default;
    color: var(--apic_com_i);
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.leaflet-popup-content > .alert_apic1 {
    cursor: default;
    color: var(--apic_com_1);
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.leaflet-popup-content > .alert_apic2 {
    cursor: default;
    color: var(--apic_com_2);
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.leaflet-popup-content > .alert_vf1 {
    cursor: default;
    color: var(--vf_com_1);
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.leaflet-popup-content > .alert_vf2 {
    cursor: default;
    color: var(--vf_com_2);
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

.pp_time_alert {
    cursor: default;
    font-family: "marianne", serif;
    font-size: 15px;
    font-weight: 410;
}

#forecast_table > tbody > tr > td {
    min-width: 57px;
}

#rain_predict {
    cursor: default;
    font-family: "marianne", serif;
    font-size: 16px;
    font-weight: normal;
}

.predict_hour {
    cursor: default;
    font-family: "marianne", serif;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    position: relative;
    right: -17px;
}

.confidence_index {
    cursor: default;
    font-family: "marianne", serif;
    font-size: 10px;
}

#confidence_line{
  position: relative;
  top: -14px;
}

.confidence_1, .confidence_2 {
    cursor: default;
    font-family: "marianne", serif;
    font-size: 13px;
    text-align: center;
    font-weight: normal;
    font-weight: normal
}

#overflow-row {
    display: flex
}

#map {
    width: 100%;
    height: calc(100% - 75px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #c2e1f0;
    position: absolute;
    top: 0px;
    z-index: 0
}

#logo-vf {
    display: none;
}

#logo-mf {
    display: none;
}

#nav-reseau {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    background-color: #fff;
    box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
    width: 344px;
    position: relative;
    left: 0px;
    height: calc(100% - 75px);
    border-top-left-radius: 10px
}

#nav-reseau.hidden {
    display: none;
}

.animate-left {
    animation: animateleft 0.4s
}

.translate-left {
    animation: translateleft 0.4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

@keyframes translateleft {
    from {
        left: -300px;
    }

    to {
        left: 0;
    }
}

#nav-reseau-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 40px;
    top: calc(40%);
    z-index: 2;
    cursor: pointer;
    position: relative;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
    background-color: #fff
}

#nav-reseau-arrow img {
    width: 20px
}

#nav-reseau-arrow.opened img {
    transform: rotate(180deg)
}

#nav-reseau-title {
    padding-left: 19px;
    padding-top: 18px;
    padding-bottom: 14px
}

#nav-reseau-title p {
    margin: auto
}

#nav-reseau-sstitre {
    display: none
}

.filete {
    padding-top: 25px;
    border-top: 1px solid var(--backcolor)
}

#legend {
    padding-bottom: 19px;
    padding-left: 29px
}

#legend-container {
    opacity: 1;
    max-height: auto;
    transition: opacity 1s, max-height 0s
}

#legend-container.collapsed {
    opacity: 0.01;
    max-height: 0px;
    transition: opacity 0s, max-height 0s 1s
}

#legend-title {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 16px;
    height: 17px
}

#legend-title img {
    transform: rotate(-90deg);
    width: 12px;
    margin-right: 30px;
    transition: all ease-in-out 300ms
}

#legend-title.collapsed {
    margin-bottom: 0px
}

#legend-title.collapsed img {
    transform: rotate(+90deg)
}

.hidden {
    display: none
}

.legend-row {
    display: flex;
    margin-bottom: 9px
}

.legend-text {
    width: 50%
}

.legend-centered{
    align-content: center;
}

.legend-marker{
    width: 44px;
    height: 40px;
  align-content: center;
  text-align: center;
}

.svgtext {
    fill: white;
    stroke: none;
    font-size: 1.4rem
}

.svgtext.mediumf {
    font-size: 1.4rem
}

.svgtext.smallf {
    font-size: 1.25rem
}

.vf-svg {
    stroke-width: 3
}

#rafraich {
    padding-left: 33px;
    display: flex;
    align-content: center
}

#rafraich img {
    margin: auto 10px auto auto;
    height: 1.6rem
}

#rafraich:hover>span {
    color: var(--vigipink)
}

#list-reseaux {
    display: flex;
    flex-direction: column;
    min-height: 0px
}

#list-reseaux-choice {
    display: flex;
    flex: 1;
    min-height: 0px;
    width: 100%
}

.selectres {
    background-color: var(--backcolor)
}

#list-reseaux-choice dd:hover {
    background-color: var(--vigipinklight)
}

.interact {
    cursor: pointer
}

#footer-carto {
    display: flex;
    flex-flow: column;
    position: absolute;
    bottom: 0px;
    width: 100%
}

#footer-carto-date {
    text-align: center
}

#footer-carto-block {
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    margin: 5px auto;
    width: 266px
}

.footer-block {
    margin: auto;
    cursor: pointer
}

.ffoot a {
    margin-top: -15px;
    padding-right: 15px;
    float: right;
    text-decoration: none;
    color: inherit
}

#div-search {
    z-index: 1;
    position: relative;
    margin-top: 5px;
    margin-left: -24px;
    display: flex;
    flex-direction: column;
    flex: 0 1 220px;
    height: max-content;
}

#div-search-bar{
    display: flex;
}

.searchlocationresult {
    width: 216px;
    height: 30px;
    border: 1px solid lightgrey;
    background-color: white;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 11px;
    cursor: pointer;
    box-sizing: border-box
}

.searchlocationresult:hover {
    background-color: lightgrey
}

#search-location-input {
    flex: 1;
    border: 1px solid transparent;
    height: 26px;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    outline: 0;
    font-size: 12px
}

#searchlocationresults {
    margin-block-start: 0;
    padding-inline-start: 0;
    margin-block-end: 0
}

#searchlocationresults li.selected {
    background-color: lightgrey
}

.search-in-progress {
    background: url("../images/ui-anim_basic_16x16.5a474bcbd8d2.gif") no-repeat 4px 4px #fff !important
}

.rejeu-exit-btn{
    box-shadow: 0 1px 1px 0 rgba(128, 0, 0, 0.2);
    border-radius: 8px;
    background-color: rgb(194, 0, 0);
    font-family: "marianne", serif;
    font-weight: bold;
    margin-top: 51px;
    height: 79px;
    max-width: 75px;
    cursor: pointer;
}
.rejeu-exit-btn > a {
    color: white;
    text-decoration: none;
    padding: 21px 0px;
}

.rejeu-exit-btn:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}

#search-button {
    display: flex;
    width: 26px;
    height: 26px;
    background: url("../images/search-icon.549b33bab724.png") no-repeat 2px 2px #fff;
    border: 1px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px 1px;
    pointer-events: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box
}

dl {
    overflow-y: scroll;
    width: 100%
}

dt {
    padding-left: 54px;
    position: sticky;
    top: -1px;
    scroll-snap-type: y proximity;
    background-color: #fff
}

dd {
    display: flex;
    margin-left: 25px;
    padding-left: 29px;
    height: 32px;
    scroll-snap-align: start;
    align-items: center
}

dd span {
    flex: 0;
    flex-basis: 0%;
    flex-basis: 80px
}

dl::-webkit-scrollbar {
    width: 12px
}

dl {
    scrollbar-width: thin;
    scrollbar-color: #55576E var(--backcolor)
}

dl::-webkit-scrollbar-track {
    background: var(--backcolor)
}

dl::-webkit-scrollbar-thumb {
    background-color: #55576E;
    border-radius: 4px;
    border: 1px solid #fff;
    height: 40px
}

.pastille.mediumf {
    font-size: 1.4rem
}

.pastille.smallf {
    font-size: 1.1rem;
    line-height: 1.8rem;
    letter-spacing: -0.05rem
}

.pastille {
    font-size: 1.4rem;
    color: #fff;
    width: 34px;
    height: 18px;
    margin: 0px 3px;
    text-align: center;
    border-radius: 4px
}

.pastille[data-val="0"] {
    height: 2px;
    font-size: 0
}

.n2-apic {
    background-color: var(--apic_com_2)
}

.n1-apic {
    background-color: var(--apic_com_1)
}

.n2-vf {
    background-color: var(--vf_com_2);
    stroke: var(--vf_tr_2)
}

.n1-vf {
    background-color: var(--vf_com_1);
    stroke: var(--vf_tr_1)
}

.ni-apic {
    background-color: var(--apic_com_i)
}

.ni-vf {
    background-color: var(--vf_com_i);
    stroke: var(--vf_tr_i)
}

.nc {
    background-color: var(--com_non_surv)
}

.underData {
    height: 10px;
    display: flex;
    position: sticky;
    top: 15px;
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0))
}

.watermark {
    max-height: 60px;
    max-width: 150px;
    margin: 0 !important;
    left: 344px;
    transition: all 0.4s
}

.watermark.bord {
    left: 0px
}

@media (min-width:1051px) {
    #map {
        position: absolute
    }

}

@media (max-width:1050px) {
    #nav-reseau-sstitre {
        display: block
    }

    #carto {
        height: calc(100vh - 112px - 30px)
    }

    #apic_info_button{
        position:absolute;
        top:3px;
        left:300px;
    }

    .rejeu-exit-btn{
        height: 50px;
    }

    .rejeu-exit-btn > a {
        padding: 6px 0px;
    }
}

@media (max-width:740px) {
    .container {
        margin: 3px, 0px, 0px, 0px
    }

    #carto {
        height: calc(100vh - 155px - 30px)
    }

    #apic_info_button{
        position:absolute;
        top:3px;
        left:280px;
    }
    #nav{
        max-width: 550px;
    }

    #nav-reseau {
        width: 320px
    }

    #nav-reseau-title {
        padding-top: 10px;
        padding-bottom: 6px
    }

    .rejeu-exit-btn{
        margin-top: 0px;
        height: 42px;
    }
    .rejeu-exit-btn > a {
        padding: 0px 0px;
    }

    .filete {
        padding-top: 5px;
        padding-bottom: 5px
    }

    #div-search {
        margin-left: 10px;
    }

    .watermark {
        max-height: 50px;
        max-width: 120px;
        left: 320px
    }
}