*
{
    margin: auto;
    /*font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;*/
    /*font-family: "Roboto","Arial",sans-serif;*/
    font-family: Arial, sans-serif;

}


input,textarea,select,button
{
    border-style: none;
    outline: none !important;
    resize: none;
    background: white;
    overflow: auto;
}

p
{
    margin: 0;
}

table
{
    margin: 0;
    padding: 0;
    border: none;
}
body
{
    background: #fff;
}


body, html {
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    background: linear-gradient(45deg, #03A9F4, #4CAF50);
}


.hide
{
    display: none !important;
}










/*Accueil*/

    #home_session
    {
        width: 100%;
        height: 100%;
        /*background: white;*/
        display: grid;
    }


    .presentation_accueil
    {
        width: 100%;
        height: 100%;
        overflow: auto;
    }


    #connexion_administrateur
    {
        overflow: auto;
        background: #fff;
        border-radius: 20px;
        /*margin-left: 0;*/
    }


    #connexion_administrateur div
    {
        padding: 30px;
        color: black;
        text-align: center;
    }

    #connexion_administrateur h1
    {
        text-align: left;
        font-size: 35px;
        font-weight: lighter;
    }

    #connexion_administrateur p
    {
        /*margin: 40px 0;*/
        margin-top: 10px;
        margin-bottom: 40px;
        font-size: 17px;
    }

    #connexion_administrateur b
    {
        display: block;
        text-align: left;
        font-size: 13px;
    }

    #connexion_administrateur input
    {
        width: 95%;
        height: 40px;
        padding: 5px;
        font-weight: lighter;
        font-size: 17px;
        display: block;
        margin-left: 0;
        background: transparent;
        border-bottom: 2px solid black;
        margin-bottom: 25px;
        color: black;
    }

    #connexion_administrateur input::placeholder
    {
        color: #ffffff80;
        font-size: 14px;
    }

    #connexion_administrateur button
    {
        width: 80%;
        height: 35px;
        background: #9e9e9e30;
        color: black;
        font-weight: bold;
        font-size: 17px;
        cursor: pointer;
        border-radius: 30px;
    }


    #connexion_administrateur button:hover
    {
        transition: .4s;
        width: 90%;
        color: white;
        background: linear-gradient(45deg, #03A9F4, #4CAF50);
        border-radius: 10px;
    }



/*Membre connecté*/

    #membre_connecte
    {
        width: 100%;
        height: 100%;
    }

    .container
    {
        width: 100%;
        height: 100%;
    }

/*Menu*/
    #menu_
    {
        /*width: 95%;*/
        height: 100%;
        width: 95%;
        display: grid;
    }

    #menu_ aside
    {
        max-width: 1230px;
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
    }


    #menu_ section
    {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        height: 100%;
        /*background: red;*/
    }

    #menu_ div
    {
        /*height: 300px;*/
        /*width: 100%;*/
        margin: 0;
        padding: 15px;
        background: #ffffffa1;
        margin: 20px;
        border-radius: 20px;
        position: relative;
    }

    #menu_ div img
    {
        margin-top: 10px;
        height: 50px;
        display: grid;
        margin-bottom: 10px;
    }

    #menu_ div b
    {
        position: absolute;
        top: -20px;
        left: -20px;
        background: white;
        padding: 10px;
        border-radius: 30px;
        font-size: 15px;
        text-align: center;
        margin-bottom: 10px;
    }

    #menu_ div nav
    {
        /*width: 95%;*/
        display: inline-block;
        background: white;
        color: grey;
        padding: 10px;
        border-radius: 30px;
        font-size: 13px;
        text-align: center;
        margin-left: 0;
        margin-bottom: 10px;
        font-weight: bold;
        cursor: pointer;
    }


    #menu_ div nav.ajout
    {
        background: #2196F3;
        color: #fff;
    }

    #menu_ div nav.top
    {
        background: #50cfc3;
        color: #fff;
    }

    #menu_ div nav.danger
    {
        background: #ff9800;
        color: #fff;
    }


    #menu_ div:hover {
        background: white;
        cursor: pointer;
        transition: .5s;
    }

    #menu_ div:hover img {
        animation: bounce 0.6s infinite alternate;
    }

    @keyframes bounce {
        from { transform: translateY(0); }
        to { transform: translateY(-10px); }
    }







    /* Modal Styles */
        .modal-container {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }

        .modal {
          background-color: white;
          padding: 20px;
          border-radius: 10px;
          width: 600px;
          /*width: 90%;*/
          height: 90%;
          /*margin-right: 10px;*/
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          transform: scale(0);
          transition: transform 0.3s ease;
          /*overflow: auto;*/
        }



        .section-title {
            font-size: 1.5em;
            margin-top: 20px;
        }
        .field-title {
            font-weight: bold;
        }



        .modal.show {
          transform: translateX(0);
        }


        .close-btn {
          font-size: 24px;
          cursor: pointer;
          position: absolute;
          top: 10px;
          right: 10px;
        }


        .section_hide
        {
            width: 30px;
            height: 30px;
            background: orangered;
            color: white;
            border-radius: 50%;
            font-size: 17px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }



    /*Modal detail*/

        .modal_element
        {
            height: 100%;

        }

        .gridTop
        {
            width: 100%;
        }

        .gridBotom
        {
            height: 100%;
            width: 100%;
            overflow: auto;
        }

        .modal_element h1
        {
            font-size: 25px;
            font-weight: lighter;
            text-transform: uppercase;
            position: relative;
            margin-bottom: 30px;
        }


        .modal_element h1::before {
            content: '';
            position: absolute;
            bottom: -10px;
            width: 30px;
            border-bottom: 5px solid #2196f3;
        }


        .modal_element img
        {
            display: grid;
            height: 100px;
            margin-bottom: 50px;
        }

        .form-modal
        {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 20px;
        }


        .navinput
        {
            width: 100%;
            margin-bottom: 30px;
            margin-top: 0;
        }

        .navinput b
        {
            font-size: 14px;
            display: block;
        }

        .navinput-up input, .navinput-up select, .navinput input, .navinput select
        {
            font-size: 15px;
            border-bottom: 2px solid grey;
            width: 90%;
            height: 35px;
        }


        .navinput-up textarea, .navinput textarea
        {
            font-size: 15px;
            border-bottom: 2px solid grey;
            width: 90%;
            height: 55px;
        }

        .navinput-up button, .navinput button
        {
            font-size: 15px;
            padding: 10px 30px;
            background: #2196f3;
            color: white;
            border-radius: 30px;
            font-weight: bold;
        }




        /*Modal list*/


            .search-container {
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 0;
                display: flex;
            }

            .search-container input
            {
                padding: 10px;
                border-bottom: 1px solid #ccc;
                border-radius: 4px;
                margin-left: 10px;
            }

            .search-container select
            {
                padding: 10px;
                border-bottom: 1px solid #ccc;
                border-radius: 4px;
                margin-right: 10px;
            }

            .user-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .user-item {
                cursor: pointer;
                margin-left: 0;
                width: 92%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px;
                border-bottom: 1px solid #eee;
                transition: background-color 0.3s ease, transform 0.3s ease;
            }

            .user-item:hover {
                background-color: #f9f9f9;
                transform: scale(1.02);
            }

            .user-item .emoji {
                font-size: 1.5em;
            }

            .user-item .name {
                flex: 1;
                margin-left: 10px;
            }

            .user-item .number, .user-item .gender, .user-item .status {
                margin-left: 10px;
                font-weight: bold;
            }



        .astuce
        {
            position: absolute;
            top: 10px;
            height: max-content;
            width: 350px;
            background: white;
            border-radius: 10px;
            overflow: auto;
            padding: 10px;
        }


        .astuceA
        {
            left: -400px;
            width: 350px;
        }


        .astuceB
        {
            left: 105%;
            width: 350px;
        }



        .astuce h1
        {
            font-size: 17px;
            font-weight: lighter;
            text-transform: uppercase;
            position: relative;
            margin-bottom: 30px;
        }

        .astuce h2
        {
            font-size: 15px;
            text-align: center;
            margin-bottom: 10px;
        }

        .astuce h3
        {
            font-size: 13px;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .astuce p
        {
            font-size: 13px;
        }


        /*Update*/
            .update-container
            {
                position: absolute;
                top: 20px;
                height: 90%;
                width: calc(100% - 20px);
                overflow: auto;
                background: #fff;
                border-radius: 10px;
                overflow: auto;
                padding: 10px;
                left: 10%;
                z-index: 2;
                /*transform: scale(0);*/
            }



            .update-client-container.active {
                transform: scale(1);
            }


            .update-form
            {
                padding: 20px;
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .update-form nav
            {
                width: 100%;
                margin-bottom: 30px;
                margin-top: 0;
            }



        /*Lien*/


            /*Nouveau lien*/

                #ajout-lien-form
                {

                }

            /*Liste de lien*/



                .modal.change
                {
                    transition: 1s;
                    margin-left: 5%;
                }

                .lien-list-container
                {
                    height: 100%;
                    display: grid;
                    grid-template-rows: max-content 1fr;
                }

                .lien-list-container.lien
                {
                    opacity: .2;
                    
                }

                .lien-details-container
                {
                    position: absolute;
                    top: 50px;
                    height: 90%;
                    width: calc(100% - 20px);
                    overflow: auto;
                    background: #e4e4e4;
                    border-radius: 10px;
                    overflow: auto;
                    padding: 10px;
                    left: 50%;
                    z-index: 2;
                    transform: scale(0);
                }



                .lien-details-container.active {
                    transform: scale(1);
                }


                .lien-details h3, .lien-details p {
                    margin: 10px 0;
                }
                .lien-actions {
                    margin-top: 20px;
                }
                .lien-actions button {
                    padding: 10px 20px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #edit-lien {
                    background-color: #4caf50; /* Green background for edit */
                    color: white;
                }
                #delete-lien {
                    background-color: #f44336; /* Red background for delete */
                    color: white;
                }



        /*Artilce*/


                .article-list-container
                {
                    height: 100%;
                    display: grid;
                    grid-template-rows: max-content 1fr;
                }

                .article-list-container.article
                {
                    opacity: .2;
                    
                }

                .article-details-container
                {
                    position: absolute;
                    top: 50px;
                    height: 90%;
                    width: calc(100% - 20px);
                    overflow: auto;
                    background: #e4e4e4;
                    border-radius: 10px;
                    overflow: auto;
                    padding: 10px;
                    left: 50%;
                    z-index: 2;
                    transform: scale(0);
                }



                .article-details-container.active {
                    transform: scale(1);
                }


                .article-item img
                {
                    margin: 5px 20px;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }

                .article-details h3, .article-details p {
                    margin: 10px 0;
                }
                .article-actions {
                    margin-top: 20px;
                }
                .article-actions button {
                    padding: 10px 20px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #edit-article {
                    background-color: #4caf50; /* Green background for edit */
                    color: white;
                }
                #delete-article {
                    background-color: #f44336; /* Red background for delete */
                    color: white;
                }




            /*Flyer*/


                .flyer-list-container
                {
                    height: 100%;
                    display: grid;
                    grid-template-rows: max-content 1fr;
                }

                .flyer-list-container.flyer
                {
                    opacity: .2;
                    
                }

                .flyer-details-container
                {
                    position: absolute;
                    top: 50px;
                    height: 90%;
                    width: calc(100% - 20px);
                    overflow: auto;
                    background: #e4e4e4;
                    border-radius: 10px;
                    overflow: auto;
                    padding: 10px;
                    left: 50%;
                    z-index: 2;
                    transform: scale(0);
                }



                .flyer-details-container.active {
                    transform: scale(1);
                }


                .flyer-details h3, .flyer-details p {
                    margin: 10px 0;
                }
                .flyer-actions {
                    margin-top: 20px;
                }
                .flyer-actions button {
                    padding: 10px 20px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #edit-flyer {
                    background-color: #4caf50; /* Green background for edit */
                    color: white;
                }
                #delete-flyer {
                    background-color: #f44336; /* Red background for delete */
                    color: white;
                }


            /*Artilce*/


                .contact-list-container
                {
                    height: 100%;
                    display: grid;
                    grid-template-rows: max-content 1fr;
                }

                .contact-list-container.contact
                {
                    opacity: .2;
                    
                }

                .contact-details-container
                {
                    position: absolute;
                    top: 50px;
                    height: 90%;
                    width: calc(100% - 20px);
                    overflow: auto;
                    background: #e4e4e4;
                    border-radius: 10px;
                    overflow: auto;
                    padding: 10px;
                    left: 50%;
                    z-index: 2;
                    transform: scale(0);
                }



                .contact-details-container.active {
                    transform: scale(1);
                }


                .contact-details h3, .contact-details p {
                    margin: 10px 0;
                }
                .contact-actions {
                    margin-top: 20px;
                }
                .contact-actions button {
                    padding: 10px 20px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #edit-contact {
                    background-color: #4caf50; /* Green background for edit */
                    color: white;
                }
                #delete-contact {
                    background-color: #f44336; /* Red background for delete */
                    color: white;
                }


            /*Artilce*/


                .admin-list-container
                {
                    height: 100%;
                    display: grid;
                    grid-template-rows: max-content 1fr;
                }

                .admin-list-container.admin
                {
                    opacity: .2;
                    
                }


                .admin-details h3, .admin-details p {
                    margin: 10px 0;
                }
                .admin-actions {
                    margin-top: 20px;
                }
                .admin-actions button {
                    padding: 10px 20px;
                    margin-right: 10px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #edit-admin {
                    background-color: #4caf50; /* Green background for edit */
                    color: white;
                }
                #delete-admin {
                    background-color: #f44336; /* Red background for delete */
                    color: white;
                }
                

/*Les skills*/


    .inner {
        position: absolute;
        top: 50px;
        left: 50px;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 3px solid black;
        border-top: none;
        animation: spin 1s linear infinite;
        font-size: 13px;
        z-index: 99;
        display: none;
    }

    .inner b
    {
        color: black;
    }
 

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }

    }









/* Alert */
#alert-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

.alert {
  padding: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 300px;
  margin-bottom: 10px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.alert.success {
  background-color: white;
  color: #4CAF50;
  font-weight: bold;
}

.alert.error {
  background-color: white;
  color: #F44336;
  font-weight: bold;
}

.alert.load {
  background-color: white;
  color: #9E9E9E;
  font-weight: bold;
}

.close-btn {
  cursor: pointer;
  font-size: 18px;
  margin-left: 10px;
}

.alert.show {
  opacity: 1;
  transform: scale(1);
}








/* Media queries for responsive design */
@media (max-width: 768px) {
    #menu_ section
    {
        grid-template-columns:1fr;
    }
}

@media (max-width: 480px) {
    #menu_ section
    {
        /*grid-template-columns: repeat(2,1fr);*/
    }
}