/******************* bullets **************************/
.bulletAr {
    padding: .25em .5em 0 .5em;
    border: 2px dashed black;
    background-color: white;
}

.bulletAr::before {
    display: inline-block;
    content: "";
    border: solid black;
    border-width: .3em .3em 0 0;
    transform: rotate(45deg);
    padding: .3em;
    transition: 0.3s;
}

.bulletAr.left::before {
    transform: rotate(-135deg);
}

.bulletAr.X2::before{
    display: inline-block;
    content: "";
    border: solid black;
    border-width: .3em .3em 0 0;
    transform: rotate(45deg);
    padding: .3em;
    transition: 0.3s;
}

.bulletAr.X2::after{
    display: inline-block;
    content: "";
    border: solid black;
    border-width: .3em .3em 0 0;
    transform: rotate(45deg);
    /* Defines the bullet's shape */
    padding: .3em;
    /* Arrow size */
    transition: 0.3s;
}

.bulletAr.X2.left::before{
    transform: rotate(-135deg);
}

.bulletAr.X2.left::after{
    transform: rotate(-135deg);
}

.bulletAr.down::before {
    transform: rotate(135deg);
}

.bulletAr.toggled {
    background-color: black;
}

.bulletAr.toggled::before {
    border-color: white;
}

.bulletAr.toggled::after {
    border-color: white;
}

/**********************************************************/