/* section article */
    /* read article */
        .container_article{
            max-width: 800px;
            margin: 0 auto;
            padding: 0 16px;
        }

        .container_article .post_date{
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16px;
            margin-top: -8px;
        }

        .post_date, .post_date i{
            color: var(--red);
        }

        .container_article .post_substitle{
            font-weight: 700;
            text-align: justify;
            margin-bottom: 16px;
        }

        .container_article .post_img{
            position: relative;
            height: 300px;
            margin-bottom: 16px;
        }

        .container_article .post_img img{
            object-fit: contain;
        }

        .container_article .post_content{
            white-space: pre-line;
            text-align: justify;
        }

        .container_article .post_content:not(:last-child){
            margin-bottom: 32px;
        }

        /* comments share */
            .comment_share{
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 24px;
                font-size: 18px;
                margin-top: 18px;
            }

            .comment_share .comments, .comment_share .share{
                cursor: pointer;
            }

            .comment_share i{
                font-size: 18px;
                transform: translatey(3px);
            }
        /* comments share */

        /* show hide share social */
            .share_social{
                max-width: 800px; 
                margin: 8px auto;
                display: none;
                gap: 16px;
                align-items: center;
                justify-content: center;
            }

            .share_social a i{
                font-size: 35px;
            }

            .share_social.active{
                display: flex;
                justify-content: center;
                align-items: center;
            }
        /* show hide share_social */
    /* read article */            

    /* show hide comments */
        .comments_container{
            max-width: 800px; 
            margin: 0 auto;
            display: none;
        }

        .comments_container.active{
            display: block;
        }
    /* show hide comments */

    /* section commentaire */
        .comments_container .comment_title{
            padding: 14px 0;
            font-size: 20px;
            font-weight: bolder;
            color: var(--blue);
        }

        /* form add comment */
            .comments_container .add_comment{
                margin-bottom: 20px;
                box-shadow: var(--box-shadow);
                border-radius: 5px;
                padding: 20px;
            }

            .comments_container .add_comment .user{
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .comments_container .add_comment .user img{
                width: 33px;
                height: 33px;
                border-radius: 50%;
                object-fit: cover;
            }

            .comments_container .add_comment .user span{
                font-size: 15px;
            }

            .comments_container .add_comment .user span > span{
                text-transform: uppercase;
            }

            .add_comment input, .add_comment textarea{
                width: 100%;
                padding: 10px;
                margin: 10px 0;
                font-size: 15px;
                border: none;
                border-radius: 5px;
                background-color: var(--light-gray);
            }

            .comments_container .add_comment textarea{
                height: 100px;
                resize: none;
            }

            .add_comment input:focus, .add_comment textarea:focus{
                outline: none;
                border: 1px solid var(--blue);
                background: none;
            }
        /* form add comment */

        /* show comments */
            .user_comments_container{
                display: grid;
                gap: 10px;
                padding: 20px;
            }
            
            .comment_user{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .comment_profile_box{
                display: flex;
                align-items: center;
            }

            .profile_comment_user{
                height: 28px;
                width: 28px;
                margin-right: 10px;
            }

            .profile_comment_user img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
            }

            .comment_username{
                font-size: 16px;
                color: var(--blue);
                font-weight: bold;
                text-transform: capitalize;
            }

            .comment_date{
                color: var(--red);
                font-size: 12px;
                margin-bottom: 5px;
                opacity: .8;
            }

            .form_action > .btn_action{
                display: inline;
                border: none;
                background: none;
                margin-right: 12px;
                padding: 0;
            }

            .btn_reply{
                cursor: pointer;
            }

            .form_action > .btn_action, .btn_reply i, .btn_reply span{
                font-size: 13px;
            }

            .form_action > .btn_action:hover, .form_action > .btn_action:hover i, .form_action > .btn_action:hover span{
                color: var(--red);
            }

            .comment_box .comment{
                margin-left: 28px;
                margin-bottom: 10px;
                padding: 0 10px;
                font-size: 15px;
                white-space: pre-line;
            }
        /* show comments */

        /* reply comments */
            .reply{
                display: none;
                margin-bottom: 24px;
            }

            .reply.active{
                display: block;
            }

            /*show-reply_comment*/   
                .show_reply_comments{
                    max-width: 600px;
                    margin: 10px auto;
                    margin-top: 16px;
                }

                .reply_comment_user{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                }

                .reply_comment_profile_box{
                    display: flex;
                    align-items: center;
                }

                .profile_reply_comment_user{
                    height: 28px;
                    width: 28px;
                    margin-right: 10px;
                    border: 1px solid var(--blue);
                    border-radius:50%;
                    padding: 2px;
                }

                .profile_reply_comment_user img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius:50%;
                }

                .reply_comment_username{
                    font-size: 16px;
                    color: var(--blue);
                    font-weight: bold;
                    text-transform: capitalize;
                }

                .reply_comment_date{
                    color: var(--red);
                    font-size: 12px;
                    margin-bottom: 5px;
                    opacity: .8;
                }

                .reply_comment_box .reply_comment{
                    width: 95%;
                    margin-left: 28px;
                    margin-bottom: 10px;
                    padding: 0 10px;
                    font-size: 15px;
                    white-space: pre-line;
                }
            /* show-reply_comment */ 
        /* reply comments */
    /* section commentaire */
/* read blog */