@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Biryani:wght@400;600&display=swap";

* {
    margin:0;
    padding:0;
    box-sizing:border-box
}

body {
    background-color:#E8DFCA
}

.nav {
    width:100%;
    height:10vh;
    background-color:#AEBDCA;
    display:flex;
    align-items:center
}

.nav > .nav-header {
    flex:.95;
    padding-left:1rem
}

.nav > .nav-header > .nav-title {
    font-size:22px;
    color:#fff
}

.nav > .nav-list {
    display:flex;
    gap:2rem
}

.nav > .nav-list > li {
    list-style-type:none
}

.nav > .nav-list > li a {
    text-decoration:none;
    color:#efefef;
    cursor:pointer
}

.nav > #nav-check {
    display:none
}

@media (max-width: 480px) {
    .nav {
        padding:1rem;
        height:5vh
    }

    .nav > .nav-btn {
        display:inline-block;
        position:absolute;
        right:0;
        top:0;
        padding-top:.2rem
    }

    .nav > .nav-btn > label {
        display:inline-block;
        width:50px;
        height:50px;
        padding:13px
    }

    .nav > .nav-btn > label > span {
        display:block;
        width:25px;
        height:10px;
        border-top:2px solid #eee
    }

    .nav > .nav-list {
        position:absolute;
        display:flex;
        flex-direction:column;
        gap:1rem;
        width:100%;
        background-color:#AEBDCA;
        height:0;
        transition:all .3s ease-in;
        top:40px;
        left:0;
        overflow:hidden
    }

    .nav > .nav-list > li {
        width:100%;
        margin-top:1.5rem
    }

    .nav > #nav-check:checked ~ .nav-list {
        height:calc(100vh - 50px)
    }
}

.presentation_card {
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}

.footer {
    background-color:#AEBDCA;
    color:#fff;
    padding:20px;
    display:flex;
    align-items:end;
    justify-content:space-around;
    flex-wrap:wrap
}

.column {
    flex:1;
    min-width:200px;
    margin:10px
}

.column h2 {
    color:#7895B2
}

@media (max-width: 768px) {
    .column {
        flex:1 0 100%
    }
}

.form {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-left:2em;
    padding-right:2em;
    padding-bottom:.4em;
    background-color:#F5F2EC;
    border-radius:25px;
    transition:.4s ease-in-out;
    margin:5% auto;
    width:30%
}

.form:hover {
    transform:scale(1.05)
}

#heading {
    text-align:center;
    margin:2em;
    color:#252525;
    font-size:1.2em;
    font-family:'Bebas Neue',sans-serif;
    font-size:30px
}

.content {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.field-head {
    font-family:'Biryani',sans-serif;
    display:flex;
    justify-content:space-between;
    gap:1em;
    border-radius:25px;
    margin-bottom:1em;
    padding:.6em;
    color:#000;
    background-color:#AEBDCA;
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10);
    width:90%
}

.field {
    font-family:'Biryani',sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5em;
    border-radius:25px;
    margin-bottom:1em;
    padding:.6em;
    color:#000;
    background-color:#AEBDCA;
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10)
}

.input-icon {
    height:1.3em;
    width:1.3em;
    fill:#000
}

.input-field {
    background:none;
    border:none;
    outline:none;
    width:100%;
    color:#000
}

.form .btn {
    display:flex;
    justify-content:center;
    flex-direction:row;
    margin-top:2.5em
}

.button1,.button2 {
    font-family:'Biryani',sans-serif;
    padding:.5em;
    padding-left:1.1em;
    padding-right:1.1em;
    border-radius:5px;
    margin-right:.5em;
    border:none;
    outline:none;
    transition:.4s ease-in-out;
    background-color:#AEBDCA;
    color:#000
}

.button1:hover,.button2:hover {
    background-color:#4f4f4f;
    color:#fff
}

.button3 {
    font-family:'Biryani',sans-serif;
    margin-bottom:3em;
    padding:.5em;
    color:var(--dark,#4F4F4F);
    display:flex;
    justify-content:center
}

.button3:hover {
    text-decoration:underline
}

.parents {
    display:grid;
    grid-template-columns:minmax(100px,15%) 1fr
}

.Sidebar_items {
    color:#4F4F4F;
    text-decoration:none;
    width:100%;
    padding:1rem
}

.Sidebar_items:hover {
    background-color:#AEBDCA;
    color:#fff;
    padding:1rem
}

.image-compte {
    display:flex;
    justify-content:center;
    margin:10%
}

.fond-rond {
    width:150px;
    height:150px;
    border-radius:50%;
    background-color:#AEBDCA;
    display:flex;
    justify-content:center;
    align-items:center
}

.text-align {
    text-align:center
}

.icone {
    display:flex;
    align-items:center;
    margin-top:5%
}
.mythem{padding:5px;
    border-color: #313131;
    margin: 1%;
}

.moden .toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    line-height : 34px;
    color:#fff;
}

/* Hide default HTML checkbox */
.moden input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.moden .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    background-color: #000;
    border-radius: 34px;
    white-space : nowrap;
}

.moden .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
}

.moden input:checked + .slider {
    background-color: #fff;
}

.moden input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
    color:#000;
}

.moden input:checked + .slider:before {
    right:4px;
    left:auto;
    background-color: #000;
}

/* DARK MODE */
.mode-dark{
    background-color: #4F4F4F;
}

.mode-dark .mise-en-page-lien .bloc-mise-en-page{
    background-color: #232323;
}
.mode-dark a:link,.mode-dark .bloc-lien a:visited,.mode-dark .bloc-lien a{
    color:#fff;
}
.contenaire-grid {
    display:grid;
    grid-template-columns:65% auto;
    gap:2em
}

.grid-central {
    margin:5%
}

.form-search {
    --input-bg:#FFf;
    --padding:1.5em;
    --rotate:80deg;
    --gap:2em;
    --height:70px;
    width:100%;
    padding-inline-end:1em;
    background:var(--input-bg);
    position:relative;
    border-radius:4px
}

.form-search label {
    display:flex;
    align-items:center;
    width:100%;
    height:var(--height)
}

.form-search input {
    width:100%;
    padding-inline-start:calc(var(--padding) + var(--gap));
    outline:none;
    background:none;
    border:0
}

.form-search svg {
    color:#111;
    position:absolute;
    height:20px
}
#searchResults{
    overflow: scroll;
    max-height: 15vh;
}
.icon {
    position:absolute;
    left:var(--padding);
    transition:.3s cubic-bezier(.4,0,.2,1);
    display:flex;
    justify-content:center;
    align-items:center
}

.form-search input:valid ~ .icon {
    transform:scale(1.3) rotate(var(--rotate))
}

.calendrier-hebdomadaire {
    display:flex;
    justify-content:center;
    padding:5%;
    margin-top:3%;
    border-radius:20px;
    background:var(--Beige,#F5F2EC);
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10);
    height:50vh
}

.card-grid_central {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2em
}

.total {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:15%;
    margin-top:5%;
    border-radius:20px;
    background:#F5F2EC;
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10)
}

.titre-total {
    color:#8E8A8A;
    font-family:Bebas Neue;
    font-size:30px;
    font-style:normal;
    font-weight:400;
    line-height:normal
}

.grid-right {
    margin:5%
}

.calendrier-mensuel {
    padding:5%;
    margin-top:3%;
    border-radius:20px;
    background:#F5F2EC;
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10);
    height:40vh;
}

.evenement {
    margin-top:3%;
    border-radius:20px;
    background:var(--Beige,#F5F2EC);
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10)
}

.Bouton-evenement {
    display:flex;
    justify-content:end
}

.back {
    min-width:100px;
    max-width:150px;
    padding:8px;
    margin:1%;
    border-radius:5px;
    border:2.5px solid #E0E1E4;
    box-shadow:0 0 20px -20px;
    cursor:pointer;
    background-color:#fff;
    transition:all .2s ease-in-out 0ms
}

.back:hover {
    background-color:#F2F2F2;
    box-shadow:0 0 20px -18px
}

.back:active {
    transform:scale(0.95)
}

.ajout {
    padding:5px 10px;
    max-width:150px;
    background:#7895B2;
    color:#fff;
    margin:1%
}

.ajout:hover {
    background:#4F4F4F
}

.container-page-ajout-Bouton {
    display:flex;
    justify-content:space-between
}

.container-page-ajout {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:50px;
    padding:2%
}

.ajout-field {
    font-family:'Biryani',sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:25px;
    margin-bottom:2.5em;
    padding:1em;
    color:#000;
    background-color:#F5F2EC;
    box-shadow:5px 10px 11px 0 rgba(0,0,0,0.10)
}

.statue-buttons input[type="radio"] {
    display:none
}

.statue-buttons label {
    display:block;
    padding:10px 20px;
    border:1px solid #ddd;
    border-radius:4px;
    cursor:pointer;
    background-color:#f9f9f9
}

.statue-buttons input[type="radio"]:checked + label {
    background-color:#4CAF50;
    color:#fff
}

.ajout-check input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0
}

.ajout-check {
    display:flex;
    cursor:pointer;
    font-size:20px;
    user-select:none
}

.checkmark {
    margin-left:5px;
    position:relative;
    top:0;
    left:0;
    height:1.3em;
    width:1.3em;
    background:#F5F2EC;
    border-radius:5px;
    box-shadow:0 0 1px rgba(0,0,0,0.30),0 1px 1px rgba(0,5)
}

.ajout-check input:checked ~ .checkmark {
    background-image:linear-gradient(#b9e9b3,#a8e4a0)
}

.checkmark:after {
    content:"";
    position:absolute;
    display:none
}

.ajout-check input:checked ~ .checkmark:after {
    display:block
}

.ajout-check .checkmark:after {
    left:.45em;
    top:.25em;
    width:.25em;
    height:.5em;
    border:solid #fff;
    border-width:0 .15em .15em 0;
    transform:rotate(45deg)
}
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 4px solid #44515e;
}

th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #7795b2;

}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

.actions a {
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
    padding: 5px 10px;
    background-color: #7795b2;
    color: #fff;
    border-radius: 3px;
}

.actions a:hover {
    background-color: #5c7489;
}

.no-records {
    text-align: center;
    font-style: italic;
    color: #888;
}

.create-new {
    display: inline-block;
    margin-top: 20px;
    text-align: center;
    background-color: #7795b2;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 3px;
}

.create-new:hover {
    background-color: #5c7489;
}
@media screen and (max-width: 800px) {
    .container-page-ajout,.contenaire-grid {
        grid-template-columns:1fr
    }

    .parents {
        grid-template-columns:1fr
    }

    .form {
        width:100%
    }
}