/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: Marianne;
    src: url(../font/Marianne-Regular.woff2);
}

@font-face {
    font-family: Marianne;
    src: url(../font/Marianne-Bold.woff2);
    font-weight: bold;
}

@font-face {
    font-family: Marianne;
    src: url(../font/Marianne-Medium_Italic.woff2);
    font-style: italic;
}

:root {
    /* ===== Colors ===== */
    --body-color: #FFF;
    --sidebar-color: #FFF;
    --primary-color: #9a6e3c;
    --primary-lite-color: #d38328;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --gray-color: #495057;
    --red-color: #c92e19;
    --green-color: #3b8855;
    --blue-color: #197aa0;
    --light-gray-color: #cacaca;
    --light-red-color: #ec8072;
    --light-green-color: #85dda1;
    --light-blue-color: #8dd9fa;
    --dark-color: #000;
    --white-color: #FFF;
    /* ====== Transition ====== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Marianne, Arial;
}

body {
    height: 100vh;
    background: var(--body-color);
}

a:hover {
    text-decoration: none !important;
}

#py-4-no-margin {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.hide {
    display: none;
}

/* ===== Inputs  ===== */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0px 0px 5px var(--blue-color);
    border: 1px solid var(--blue-color);
}

input:hover,
select:hover,
textarea:hover {
    border: 1px solid var(--primary-color);
    box-shadow: 0px 0px 5px var(--primary-color);
    border-radius: 5px;
}

input:focus:hover,
select:focus:hover,
textarea:focus:hover {
    outline: none;
    box-shadow: 0px 0px 5px var(--blue-color);
    border: 1px solid var(--blue-color);
    border-radius: 0;
}

.inputs {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 30px;
}

.btnPerso {
    width: 200px;
    height: 40px;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 15px;
}

.checkBoxStyle {
    margin-top: 20px;
}

.btnPerso:active {
    box-shadow: 0 5px var(--light-gray-color);
    transform: translateY(4px);
}

.hypButton {
    width: 100px !important;
    height: 35px !important;
}

#row_date_picker {
    margin-left: 1vw;
    margin-bottom: 2vh;
    display: none;
}

.date_range_filter {
    margin-bottom: 10px;
}

.popupbutton {
    margin-top: 2px;
    width: 100%;
}

.btn-info {
    color: var(--body-color) !important;
}

#stock {
    margin-bottom: 15px;
}

.main-container {
    margin: 3vw 10vw;
}

.list-container {
    margin-top: 3vh;
}

#choice_productWithMarginBottom,
#choice_productEdit,
#historiqueProduit {
    margin-bottom: 30px;
}

#historiqueBtn {
    margin-bottom: 10px;
}

#search-button {
    padding-left: 0;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color);
    width: 70px !important;
    height: 70px;
    border-radius: 50%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/VisualEditor_-_Icon_-_Search-big_-_white.svg');
    background-size: contain;
}

input[type=button] {
    margin-top: 5px;
    width: 8%;
    height: 28px;
    font-size: 12px;
}

.searchField {
    height: 70px !important;
    min-width: 90% !important;
    margin-top: 30px !important;
}

#tab_citoyen_filter>label>input[type=text] {
    height: 30px
}

#new_marq {
    margin: 0.1vw;
}

#new_lamp {
    margin: 0.1vw;
}

.hypButton {
    max-width: 23vw;
}

.checkbox_category,
.checkbox_incident_history {
    width: 1vw;
}

.iconIncident {
    display: block;
}

.iconIncidentImg {
    max-width: 60px;
    max-height: 60px;
    width: 15vw;
    height: 15vw;
    margin-bottom: 1vw;
}

#cancelIncident,
#submitIncident,
#supressIncident {
    margin-top: 2px;
}

.form-check {
    margin-top: 20px;
}

.form-check-label {
    margin: 5px;
}

#hyperviseurButton {
    left: 50%;
    transform: translate(-50%, 0);
    position: fixed;
    bottom: 5vh;
    z-index: 3;
    height: 3vh;
}

#hyperviseurButton>[type="button"] {
    max-width: 30vw;
}

/* ===== Left  Navbar ===== */
.sidebar .text {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: var(--tran-04);
}

.sidebar.close .toggle {
    transform: translateY(-50%) rotate(0deg);
}

.sidebar.close .text {
    opacity: 0;
    transition: var(--tran-04);
}

.sidebar .image {
    min-width: 60px;
    display: flex;
    align-items: center;
}

.sidebar {
    display: block;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
}

.sidebar.close {
    width: 74px;
    transition: var(--tran-04);
    opacity: 1;
}

.sidebar.close:not(:disabled):not(.disabled):hover, .sidebar.close:not(:disabled):not(.disabled):focus {
    opacity: 1;
}

.sidebar li {
    margin-top: 10px;
    list-style: none;
    display: flex;
    align-items: center;
}

.sidebar .icon {
    padding: 0;
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.sidebar .nav-link {
    padding: 0;
}

.sidebar .icon,
.sidebar .text {
    color: var(--gray-color);
    transition: var(--tran-04);
}

.sidebar header {
    position: relative;
}

.sidebar .image-text img {
    width: 40px;
    border-radius: 6px;
}

.sidebar header .image-text {
    display: flex;
    align-items: center;
}

.sidebar header .image,
.sidebar .icon {
    min-width: 60px;
    border-radius: 6px;
}

header .image-text .header-text {
    display: flex;
    flex-direction: column;
    z-index: 0;
}

.header-text .name {
    font-weight: 600;
    overflow: hidden;
}

.header-text .profession {
    margin-top: -2px;
    overflow: hidden;

}

.sidebar header .toggle {
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
    z-index: 1000;
}

.sidebar a {
    text-decoration: none;
}

.sidebar li a {
    padding: 10px;
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover {
    background-color: var(--primary-color);
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text {
    color: var(--sidebar-color);
}

.sidebar .menu-bar {
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
    scrollbar-width: none;
}

.menu-bar::-webkit-scrollbar {
    display: none;
}

#main_div {
    position: absolute;
    top: 0;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    transition: var(--tran-05);
}

.sidebar.close~#main_div {
    left: 74px;
    height: 100vh;
    width: calc(100% - 74px);
}

.sidebar ul {
    padding-left: 0;
}

#cit-pdf {
    margin-bottom: 20px;
}

.buttonMenu {
    display: inline-block;
    padding: 0.7em 1.7em;
    margin: 0 0.3em 1em 0;
    border-radius: 0.2em;
    box-sizing: border-box;
    text-decoration: none !important;
    font-family: Marianne, Arial;
    font-weight: 400;
    text-align: center;
    position: relative;
    background-color: white;
}

.buttonOverFlow {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.buttonMenu:active {
    box-shadow: inset 0 0.6em 2em -0.3em rgba(0, 0, 0, 0.15), inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12);
}

@media all and (max-width:30em) {
    a.buttonMenu {
        display: block;
        margin: 0.4em auto;
    }
}

.buttonVert, .buttonVertAdd {
    background-color: var(--body-color);
    color: var(--green-color);
    border: 1px solid;
}

.buttonBleu {
    background-color: var(--body-color);
    color: var(--blue-color);
    border: 1px solid;
}

.buttonRouge, .buttonRougeAdd {
    background-color: var(--body-color);
    color: var(--red-color);
    border: 1px solid;
}

.buttonGris {
    background-color: var(--body-color);
    color: var(--gray-color);
    border: 1px solid;
}

.buttonVert:hover,
.buttonBleu:hover,
.buttonRouge:hover,
.buttonGris:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* ===== Sections ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
    font-size: 16px;
}

section .heading {
    text-align: center;
    padding-bottom: 20px;
    margin-top: 50px;
}

#home .heading h1 {
    color: var(--dark-color);
    font-size: 24px;
}

.heading h2 {
    margin-top: 5px;
    color: var(--primary-color);
    text-transform: uppercase;
}

#home {
    margin-top: 50px;
}

.card {
    margin-top: 50px;
}

#menu {
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    width: 90vw;
    text-align: center;
    margin-bottom: 10vh;
}

.center {
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    width: 90vw;
    text-align: center;
}

#titlehyper {
    margin-bottom: 10vh;
    text-transform: uppercase;
}

#details {
    margin: 10px auto 50px;
    width: 90%;
    text-align: center;
}

#new {
    position: relative;
    margin-top: 50px;
    text-align: center;
}

#newChoice {
    text-align: center;
    padding-bottom: 20px;
    margin-top: 100px;
}

.formindexbtn {
    height: 50px;
    margin: 10px;
}

#map {
    height: calc(100%);
    width: calc(100%);
    margin: 0;
    z-index: 0;
}

#menu {
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    width: 90vw;
    text-align: center;
    margin-bottom: 10vh;
}

.center {
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    width: 90vw;
    text-align: center;
}

#stats {
    position: absolute;
    /* postulat de départ */
    left: 50%;
    /* à 50%/50% du parent référent */
    transform: translate(-50%,
            0);
    /* décalage de 50% de sa propre taille */
    bottom: 15vh;
}

.container-flex-left {
    margin: 5px;
    width: 200px;
}

.annonce_container {
    width: 90vw;
    text-align: center;
    background-color: var(--body-color);
    margin: 5px 5px 2vh 2vh;
}

#tdannonce {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 7vh;
    padding-top: 7vh;
}

#tdannonce:hover * {
    color: var(--dark-color) !important;
}

#main_actualites {
    margin: 10px 5vw 10vh 5vw;
}

#actualites {
    width: 90vw;
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    text-align: center;
    padding: 10px;
    color: var(--primary-color);
    border-radius: 10px;
    margin-top: 10px;
}

.topBar {
    background-color: var(--primary-color);
    width: 100vw;
    height: 1vh;
    position: fixed;
    top: 0;
    z-index: 2;
}

#formulaire {
    margin-top: 3vh;
}

#command {
    background: none;
    position: absolute;
    right: 1vw;
    top: 10vh;
}

/* ===== Lists ===== */
ul,
ol {
    list-style: none;
}

ul {
    padding-inline-start: 0px;
}

.nav-link {
    color: var(--body-color) !important;
}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    text-decoration: none;
    color: initial;
}

.list-group-item {
    border: none !important;
}

.custom_td_history_incident {
    width: 15vw;
}

.greenTD {
    color: var(--green-color);
}

.redTD {
    color: var(--red-color);
}

#liste {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.listhyper {
    text-decoration: none !important;
    width: 50vw;
}

.center_search {
    margin-left: 10vw;
    margin-right: 10vw;
}

/* ===== Tables ===== */
table.custom_table {
    text-align: center !important;
    margin: auto 0;
    margin-bottom: 70px !important;
}

.tableAnnonce td:first-child {
    padding-left: 40px;
    padding-right: 0;
}

.tableAnnonce td:last-child {
    padding-right: 40px;
    padding-left: 0;
}

tr :hover {
    color: var(--primary-color);
}

#tab_citoyen {
    margin-bottom: 125px;
}

/* ===== Footer ===== */
footer {
    text-align: center;
    background-color: var(--primary-color);
    width: 100%;
    height: 1vh;
    position: fixed;
    bottom: 0;
    z-index: 2;
}

/* ===== Mobile ===== */
@media only screen and (max-width: 600px) {

    #getstats,
    #stats {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .btnPerso:hover {
        box-shadow: 0 5px var(--light-gray-color);
        transform: translateY(4px);
    }
}

/* ===== autoComplete ===== */
.autoComplete_wrapper>input,
.autoComplete_wrapper>input:focus {
    background-image: none !important;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray-color);
    background-color: var(--body-color);
    background-clip: padding-box;
    border: 1px solid var(--light-gray-color);
    border-radius: 0.25rem;
}

.autoComplete_wrapper>input::placeholder,
.autoComplete_wrapper:hover::placeholder {
    color: var(--gray-color) !important;
}

.autoComplete_wrapper, #autoComplete {
    width: 100% !important;
}

/* ===== Leaflet ===== */
.leaflet-right {
    padding: 5px 20px 20px;
    margin: 10px;
}

.leaflet-control-attribution {
    display: none;
}

.leaflet-popup {
    max-width: 30vw;
    min-width: 15vw;
}

.leaflet-top,
.leaflet-right {
    margin: 0;
}

/* ===== Datatable ===== */
#datatable_wrapper,
#tab_citoyen_wrapper,
#tab_produit_wrapper,
#tab_foyer_wrapper,
#tab_one_foyer_wrapper,
#tab_category_wrapper {
    margin-left: 10px;
    margin-right: 10px;
}

table.dataTable {
    width: 100% !important;
}


.slaask-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    text-align: center;
}

#slaask-message-bubble-nq8am7a6rbc4w1vt0h59 {
    display: none !important;
}

.leaflet-tooltip {
    padding: 0 !important;
    margin: 0 !important;
    max-width: px;
    overflow: hidden;
}

.my-label {
    font-size: 7px;
}


.my-label-rouge {
    color: red!important;
    border: 1px solid red;
}

.my-label-vert {
    color: green!important;
    border: 1px solid green;
}

.my-label-gris {
    color: gray!important;
    border: 1px solid gray;
}