@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;
}
/* HEADER */

#dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 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-success {
    border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12156862745098039);
    box-shadow: 0px 0px 1px #259c08;
    color: #0ad406;
    transition:0.1s;
    cursor:pointer;
    border-radius: 5px;
    padding: 7px 5px;
}
.alert-success:hover {
    background-color: rgba(7, 149, 66, 0.35);
    transition:0.5s;
}
/*.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;
}*/
.alert-danger {
    border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
    box-shadow: 0px 0px 1px #ff0303;
    color: #ff0303;
    transition: 0.1s;
    cursor: pointer;
    border-radius: 5px;
    padding: 7px 5px;
}
.alert-danger:hover {
    background-color: rgba(220, 17, 1, 0.33);
    transition:0.5s;
}
.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);
    color: #c1d1d9;
}
.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);
}
.dialog_modal {
    border-radius: 0.5rem;
    background-color: #F5F8FC;
    border: 1px solid #9E15D9;
}
#passwordConfirm, #password , #login{
    border: 1px solid transparent;
}
#passwordConfirm:hover , #password:hover , #login:hover {
    border: 1px solid transparent;
    box-shadow: 0 3px black ;
}
#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;
}
textarea {
    resize: none;
}
.filter-white {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(110%) contrast(101%);
}

/* BODY */
body {
    background: #F9F9F9;
}
#read-more, #upload:hover ,#update:hover, #viewMore:hover {
    box-shadow: 0 6px 6px -2px #c029f066;
}
#deleteCompte:hover {
    box-shadow: 0 6px 6px -2px #bd1911;
}
#userFormAff:hover, #categoriesFormAff:hover, #commentFormAff:hover, #articlesFormAff:hover {
    box-shadow: 0 6px 6px -2px #a9a8a8;
}
#option13 {
    background: linear-gradient(90deg, #ac1de4 0%, #502cd7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}