.panel-btn-logout {
    cursor: pointer;
    transition: 0.5s ease;
}

.panel-btn-logout, .p1, .p2, .p3, .p3:after {
    transition: 0.5s ease;
}

    .panel-btn-logout:hover .p1,
    .panel-btn-logout:hover .p2,
    .panel-btn-logout:hover .p3,
    .panel-btn-logout:hover .p3:after {
        border-color: var(--pattern-bg-color-bronze) !important;
    }

    .panel-btn-logout .p1, .panel-btn-logout .p1 .p2 {
        width: 50px;
        height: 50px;
        border: 1px solid var(--pattern-txt-color-branco);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .panel-btn-logout .p1 .p2 {
            border-style: dashed;
            width: 40px;
            height: 40px;
            justify-content: flex-start;
        }

            .panel-btn-logout .p1 .p2 .border-p3 {
                height: 25px;
                width: 40px;
                position: absolute;
                margin-left: 15px;
                display: flex;
                align-items: center;
                background-color: var(--pattern-bg-color);
            }

            .panel-btn-logout .p1 .p2 .p3 {
                border: 1px solid var(--pattern-txt-color-branco);
                width: 32px;
                height: 0;
                position: absolute;
            }

                .panel-btn-logout .p1 .p2 .p3:after {
                    content: '';
                    border-width: 0 2px 2px 0;
                    border-style: solid;
                    border-color: var(--pattern-txt-color-branco);
                    width: 8px;
                    height: 8px;
                    position: absolute;
                    transform: rotate(-45deg);
                    margin-top: -4px;
                    right: -2px;
                }