/* ============================================================================================================================================= */
/* Unsorted Licts styling                                                                                                                        */
/* ============================================================================================================================================= */

/* HTML & CSS: numbered list with numbers inside of circles!
   https://codepen.io/Cr0up13r/pen/VeeaMR
  ------------------------------------------------------------------------------------------------------------------------------------------------
  <ul class="numbered-list-circle-not-filled-primary">
      <li>AngularJS</li>
      <li>Yii</li>
      <li>Symfony</li>
      <li>Ruby on Rails</li>
      <li>Laravel</li>
  </ul>
------------------------------------------------------------------------------------------------------------------------------------------------ */

/* 1. NUMBERED LISTS
------------------------------------------------------------------------------------------------------------------------------------------------ */

/* primary
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-primary {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-primary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-primary li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #007bff;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-primary {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-primary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-primary li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #007bff;
            background-color: #007bff;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* secondary
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-secondary {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-secondary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-secondary li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #6c757d;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-secondary {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-secondary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-secondary li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #6c757d;
            background-color: #6c757d;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* success
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-success {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-success li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-success li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #28a745;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-success {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-success li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-success li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #28a745;
            background-color: #28a745;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* danger
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-danger {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-danger li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-danger li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #dc3545;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-danger {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-danger li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-danger li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #dc3545;
            background-color: #dc3545;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* warning
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-warning {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-warning li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-warning li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #ffc107;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-warning {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-warning li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-warning li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #ffc107;
            background-color: #ffc107;
            border-radius: 50%;
            color: #000;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* info
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-info {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-info li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-info li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #17a2b8;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-info {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-info li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-info li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #17a2b8;
            background-color: #17a2b8;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* light
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-light {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-light li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-light li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #f8f9fa;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-light {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-light li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-light li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #f8f9fa;
            background-color: #f8f9fa;
            border-radius: 50%;
            color: #000;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* dark
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-dark {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-dark li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-dark li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #343A40;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-dark {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-dark li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-dark li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid #343A40;
            background-color: #343A40;
            border-radius: 50%;
            color: #fff;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* transparent
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-circle-not-filled-transparent {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-not-filled-transparent li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-not-filled-transparent li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            border-radius: 50%;
            color: #000;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

ul.numbered-list-circle-filled-transparent {
    counter-reset: li;
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-circle-filled-transparent li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-circle-filled-transparent li:before {
            content: counter(li);
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #000;
            font-weight: 400;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }


/* 2. BULLETED LISTS
------------------------------------------------------------------------------------------------------------------------------------------------ */

/* primary
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-primary {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-primary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-primary li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #007bff;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* secondary
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-secondary {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-secondary li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-secondary li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #6c757d;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* success
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-success {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-success li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-success li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #28a745;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* danger
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-danger {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-danger li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-danger li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #dc3545;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* warning
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-warning {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-warning li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-warning li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #ffc107;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* info
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-info {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-info li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-info li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #17a2b8;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* light
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-light {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-light li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-light li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #f8f9fa;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }

/* dark
------------------------------------------------------------------------------------------------------------------------------------------------ */
ul.numbered-list-bullet-dark {
    list-style-type: none;
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

    ul.numbered-list-bullet-dark li {
        position: relative;
        padding: 5px 0 5px 30px;
    }

        ul.numbered-list-bullet-dark li:before {
            content: "•";
            counter-increment: li;
            height: 20px;
            width: 20px;
            border: 1px solid none;
            background-color: transparent;
            border-radius: 50%;
            color: #343A40;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 4px;
        }