.raccordeon {
    margin-bottom: 10px;

    &.active {
        .raccordeon_title {
            background: var(--main);
            color: var(--npwhite);
            cursor: pointer;
            transition-property: background;
            transition-duration: 0.7s;

            &::after {
                background-color: var(--npwhite);
                transform: rotate(0deg);
                transition-property: transform;
                transition-duration : 0.7s;
            }
        }

        .raccordeon_content {
            display: block;
            transition-property: display;
            transition-duration: 0.4s;
        }
    }
}


.raccordeon_title {
    border: 1px solid rgb(219, 219, 219);
    padding: 15px;
    transition-property: background;
    transition-duration: 0.7s;
    position: relative;
    background: var(--main);
    color: var(--npwhite);
    &:hover{
        cursor: pointer;
    }
}

.raccordeon_title::after {
    content: "";
    -webkit-mask: url("./arrow.svg") no-repeat center / contain;
    mask: url("./arrow.svg") no-repeat center / contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--npwhite);
    position: absolute;
    right: 30px;
    top: 22px;
    transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 0.7s;
}


/*.raccordeon_title.activep::after,*/
.raccordeon_title:hover::after{
    background-color: var(--npwhite);
    transform: rotate(0deg);
    transition-property: transform;
    transition-duration : 0.7s;
}
/*
.raccordeon_title.activep,.raccordeon_title:hover{
    background : var(--rred);
    color : var(--npwhite);
    cursor : pointer;
    transition-property: background;
    transition-duration: 0.7s;
}*/
.raccordeon_content {
    display: none;
    transition-property: display;
    transition-duration: 0.4s;
}

/*
.raccordeon_content.active{
    display: block;
    transition-property: display;
    transition-duration: 0.4s;
}*/