@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

li {
    list-style: none;
}
/* HEADER */

#dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.filter-white {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(110%) contrast(101%);
}

/* Message d'erreur */
.alert-success {
    color: #fff;
    background: #238636;
    /*    border: 1px solid rgba(240,246,252,0.1);*/
    box-shadow: 0 0 transparent;
    padding: 5px;
    border-radius: 5px;
}
.alert-danger {
    color: #fff;
    background: #f85149;
    border: 1px solid rgba(240,246,252,0.1);
    box-shadow: 0 0 transparent;
    padding: 5px;
    border-radius: 5px;
}
.messageAlert {
    background-image: linear-gradient(rgba(56, 139, 253, 0.15), rgba(56, 139, 253, 0.15));
    padding: 13px;
    border: 1px solid rgba(56,139, 253, 0.4);
    border-radius: 0.5rem;
    color: #526866a3;
}
.hidden-text {
    transition: ease-out 1.5s;
    opacity: 0;
}

/* Article */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    z-index: 10;
    transition: 0.25s ease-in-out;
}
.modal.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#overlay {
    position: fixed;
    opacity: 0;
    transition: 0.25s ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
#overlay.active {
    opacity: 1;
    pointer-events: all;
}
#formCreateArticle {
     display: none;
 }
#passwordConfirm, #password , #login{
    border: 1px solid transparent;
}
#passwordConfirm:hover , #password:hover , #login:hover {
    border: 1px solid transparent;
    box-shadow: 0 3px black ;
}

/* Bouton ajout Commentaires */
#commentForm , #zone_recherche, #NotConnected{
    box-shadow: 0 6px 6px -2px #c029f066;
}
#buttonCreateArticle:hover {
    box-shadow: 0 4px 4px -2px #2d313a;
}
textarea {
    resize: none;
}
#comment, #content {
    resize: none;
}

/* Color of SVG */
.green-reply, .blue-edit, .red-delete {
    filter: invert(29%) sepia(2%) saturate(4623%) hue-rotate(184deg) brightness(98%) contrast(73%);
}

#subCommentReplyButton:hover > .green-reply {
    filter: invert(70%) sepia(49%) saturate(564%) hue-rotate(95deg) brightness(97%) contrast(96%);
}

#subCommentEditButton:hover > .blue-edit {
    filter: invert(80%) sepia(63%) saturate(1356%) hue-rotate(140deg) brightness(95%) contrast(89%);
}
#subCommentDeleteButton:hover > .red-delete {
    filter: invert(31%) sepia(69%) saturate(4555%) hue-rotate(347deg) brightness(89%) contrast(114%);
}
/* Color Button Comment */
#commentReplyButton:hover > .green-reply {
    filter: invert(70%) sepia(49%) saturate(564%) hue-rotate(95deg) brightness(97%) contrast(96%);
}
#commentEditButton:hover > .blue-edit {
    filter: invert(80%) sepia(63%) saturate(1356%) hue-rotate(140deg) brightness(95%) contrast(89%);
}
#commentDeleteButton:hover > .red-delete {
    filter: invert(31%) sepia(69%) saturate(4555%) hue-rotate(347deg) brightness(89%) contrast(114%);
}

/* BODY */
body {
    background: #F9F9F9;
}