// >>-- 106 Bullet css start --<<
@mixin bullet_mixin($name, $color) {
    .square-bullet-#{$name} {
        &:before {
            background-color: rgba(#{$color}, 1) !important;
        }
    }

    .circle-bullet-#{$name} {
        &:before {
            background-color: rgba(#{$color}, 1) !important;
            outline: 1px solid rgba(#{$color}, 1);
        }
    }

    .triangle-bullet-#{$name} {
        &:before {
            border-bottom: 10px solid rgba(#{$color}, 1);

        }
    }

    .arrow-bullet-#{$name} {
        &:before {
            border: 1px solid rgba(#{$color}, 1);


        }
    }

    .line-bullet-#{$name} {
        &:before {
            border-top: 4px solid rgba(#{$color}, 1);


        }
    }

    .plus-bullet-#{$name} {

        &:before,
        &:after {
            background-color: rgba(#{$color}, 1) !important;
        }

    }
    .diamond-bullet-#{$name} {

        &:before
        {
            border-bottom-color: rgba(#{$color}, 1) !important;
        }
        &:after{
            border-top-color: rgba(#{$color}, 1) !important;
        }

    }
    .burst-bullet-#{$name} {

        &:before,
        &:after {
            background-color: rgba(#{$color}, 1) !important;
        }

    }
    .heart-bullet-#{$name} {

        &:before,
        &:after {
            background-color: rgba(#{$color}, 1) !important;
        }

    }
    .curved-round-bullet-#{$name} {

        &:before
        {
            border-right: 9px solid rgba(#{$color}, 1); 
        }
        &:after{
            border-top: 3px solid rgba(#{$color}, 1); 
        }

    }
    

}

@each $name, $color in $colors {
    @include bullet_mixin("#{$name}", map-get($colors, $name));
}

// suare bullet start //
.square {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }

    &:before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        inset-inline-start: 0;
        top: 7px;
    }
}

// sqare bullet end //

// circle bullet start //
.circle {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }

    &:before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 100%;
        inset-inline-start: 0;
        top: 7px;
        outline-offset: 2px;
    }
}

// circle bullet end //

// triangle bullet start //
.triangle {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 7px;
        width: 0;
        height: 0;
        border-inset-inline-start: 5px solid transparent;
        border-right: 5px solid transparent;

    }
}

// triangle bullet end //
// arrow bullet start //
.arrow {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: "";
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 7px;
        height: 8px;
        width: 8px;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);

    }
}

// arrow bullet end //

// line bullet start //
.line {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 10px;
        width: 10px;
        display: block;


    }
}
// line bullet end //

// plus bullet start //
.plus {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 9px;
        height: 2px;
        width: 8px;


    }

    &:after {
        content: "";
        position: absolute;
        inset-inline-start: 3px;
        top: 5px;
        height: 10px;
        width: 2px;
    }
}
// plus bullet end //

// diamond bullet start //
.diamond {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: "";
        position: absolute; 
        inset-inline-start: 0px; 
        top: 2px; 
        width: 0; 
        height: 0; 
        border: 5px solid transparent; 
     


    }

    &:after {
        content: ""; 
        position: absolute; 
        inset-inline-start: 0px; 
        top: 12px; 
        width: 0; 
        height: 0; 
        border: 5px solid transparent; 
      
    }
}
// diamond bullet end //

// burst bullet start //
.burst {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before {
        content: ""; 
        position: absolute; 
        inset-inline-start: 0; 
        top: 8px;
        width: 10px; 
        height: 10px;
        text-align: center; 
        transform: rotate(0deg);
     


    }

    &:after {
        content: ""; 
        position: absolute; 
        top: 8px; 
        inset-inline-start: 0; 
        height: 10px; 
        width: 10px; 
        transform: rotate(45deg); 
      
    }
}
// burst bullet end //

// heart bullet start //
.heart {
    position: relative;
    padding-inline-start: 1.25rem;

    &+ {
        li {
            margin-top: 1rem;
        }
    }


    &:before , &:after {
    content: ""; 
      position: absolute; 
      inset-inline-start: 7px; 
      top: 7px; 
      width: 7px; 
      height: 12px; 
      -moz-border-radius: 50px 50px 0 0; 
      border-radius: 50px 50px 0 0; 
      transform: rotate(-45deg); 
      transform-origin: 0 100%;


    }

    &:after{
        content: ""; 
      position: absolute; 
      top: 7px; 
      inset-inline-start: 0;  
      transform: rotate(45deg); 
      transform-origin :100% 100%;
    }
}
// heart bullet end //

// >>-- 106 Bullet css end --<<


.card-placeholder{
    .card-body{
        border: none !important;
    }

}