:root{
    --ct-dark: #313a46;
    --ct-primary: #727cf5;
    --ct-secondary: #6c757d;
    --ct-success: #0acf97;
    --ct-info: #39afd1;
    --ct-warning: #ffc35a;
    --ct-danger: #fa5c7c;
    --ct-light: #eef2f7;
    --ct-dark: #313a46;

        --ct-primary-rgb: 114, 124, 245;
    --ct-secondary-rgb: 108, 117, 125;
    --ct-success-rgb: 10, 207, 151;
    --ct-info-rgb: 57, 175, 209;
    --ct-warning-rgb: 255, 195, 90;
    --ct-danger-rgb: 250, 92, 124;
    --ct-light-rgb: 238, 242, 247;
    
    --ct-primary-bg-subtle: #f1f2fe;
    --ct-secondary-bg-subtle: #f6f7fb;
    --ct-success-bg-subtle: #e7faf5;
    --ct-info-bg-subtle: #ebf7fa;
    --ct-warning-bg-subtle: #fff9ef;
    --ct-danger-bg-subtle: #ffeff2;
    --ct-light-bg-subtle: #fbfbfd;
    --ct-dark-bg-subtle: #ced4da;
    --ct-border-radius-pill: 50rem;
}

/*COLORS*/

.bg-primary {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-primary-rgb),var(--ct-bg-opacity))!important
}

.bg-secondary {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-secondary-rgb),var(--ct-bg-opacity))!important
}

.bg-success {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-success-rgb),var(--ct-bg-opacity))!important
}

.bg-info {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-info-rgb),var(--ct-bg-opacity))!important
}

.bg-warning {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-warning-rgb),var(--ct-bg-opacity))!important
}

.bg-danger {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-danger-rgb),var(--ct-bg-opacity))!important
}

.bg-light {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-light-rgb),var(--ct-bg-opacity))!important
}

.bg-dark {
    --ct-bg-opacity: 1;
    background-color: #313a46 !important
}

.bg-black {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-black-rgb),var(--ct-bg-opacity))!important
}

.bg-white {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-white-rgb),var(--ct-bg-opacity))!important
}

.bg-body {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-body-bg-rgb),var(--ct-bg-opacity))!important
}

.bg-transparent {
    --ct-bg-opacity: 1;
    background-color: transparent!important
}

.bg-body-secondary {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-secondary-bg-rgb),var(--ct-bg-opacity))!important
}

.bg-body-tertiary {
    --ct-bg-opacity: 1;
    background-color: rgba(var(--ct-tertiary-bg-rgb),var(--ct-bg-opacity))!important
}

.bg-opacity-10 {
    --ct-bg-opacity: 0.1
}

.bg-opacity-25 {
    --ct-bg-opacity: 0.25
}

.bg-opacity-50 {
    --ct-bg-opacity: 0.5
}

.bg-opacity-75 {
    --ct-bg-opacity: 0.75
}

.bg-opacity-100 {
    --ct-bg-opacity: 1
}

.bg-primary-subtle {
    background-color: var(--ct-primary-bg-subtle)!important
}

.bg-secondary-subtle {
    background-color: var(--ct-secondary-bg-subtle)!important
}

.bg-success-subtle {
    background-color: var(--ct-success-bg-subtle)!important
}

.bg-info-subtle {
    background-color: var(--ct-info-bg-subtle)!important
}

.bg-warning-subtle {
    background-color: var(--ct-warning-bg-subtle)!important
}

.bg-danger-subtle {
    background-color: var(--ct-danger-bg-subtle)!important
}

.bg-light-subtle {
    background-color: var(--ct-light-bg-subtle)!important
}

.bg-dark-subtle {
    background-color: var(--ct-dark-bg-subtle)!important
}

.bg-gradient {
    background-image: var(--ct-gradient)!important
}

/*BUTTONS*/

.btn {
    --ct-btn-padding-x: 0.9rem;
    --ct-btn-padding-y: 0.45rem;
    --ct-btn-font-size: 0.9rem;
    --ct-btn-font-weight: 400;
    --ct-btn-line-height: 1.5;
    --ct-btn-color: #6c757d;
    --ct-btn-bg: transparent;
    --ct-btn-border-width: 1px;
    --ct-btn-border-color: transparent;
    --ct-btn-border-radius: 0.15rem;
    --ct-btn-hover-border-color: transparent;
    --ct-btn-box-shadow: 0px 2px 6px 0px;
    --ct-btn-disabled-opacity: 0.65;
    --ct-btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--ct-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--ct-btn-padding-y) var(--ct-btn-padding-x);
    font-family: var(--ct-btn-font-family);
    font-size: var(--ct-btn-font-size);
    font-weight: var(--ct-btn-font-weight);
    line-height: var(--ct-btn-line-height);
    color: var(--ct-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--ct-btn-border-width) solid var(--ct-btn-border-color);
    border-radius: var(--ct-btn-border-radius);
    background-color: var(--ct-btn-bg);
    -webkit-transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, -webkit-box-shadow .15sease-in-out;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, -webkit-box-shadow .15sease-in-out;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out, -webkit-box-shadow .15sease-in-out;
}

.btn:hover {
    color: var(--ct-btn-hover-color);
    background-color: var(--ct-btn-hover-bg);
    border-color: var(--ct-btn-hover-border-color)
}

.btn-check+.btn:hover {
    color: var(--ct-btn-color);
    background-color: var(--ct-btn-bg);
    border-color: var(--ct-btn-border-color)
}

.btn:focus-visible {
    color: var(--ct-btn-hover-color);
    background-color: var(--ct-btn-hover-bg);
    border-color: var(--ct-btn-hover-border-color);
    outline: 0;
    -webkit-box-shadow: var(--ct-btn-focus-box-shadow);
    box-shadow: var(--ct-btn-focus-box-shadow)
}

.btn-check:focus-visible+.btn {
    border-color: var(--ct-btn-hover-border-color);
    outline: 0;
    -webkit-box-shadow: var(--ct-btn-focus-box-shadow);
    box-shadow: var(--ct-btn-focus-box-shadow)
}

.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active {
    color: var(--ct-btn-active-color);
    background-color: var(--ct-btn-active-bg);
    border-color: var(--ct-btn-active-border-color)
}

.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible {
    -webkit-box-shadow: var(--ct-btn-focus-box-shadow);
    box-shadow: var(--ct-btn-focus-box-shadow)
}

.btn-check:checked:focus-visible+.btn {
    -webkit-box-shadow: var(--ct-btn-focus-box-shadow);
    box-shadow: var(--ct-btn-focus-box-shadow)
}

.btn.disabled,.btn:disabled,fieldset:disabled .btn {
    color: var(--ct-btn-disabled-color);
    pointer-events: none;
    background-color: var(--ct-btn-disabled-bg);
    border-color: var(--ct-btn-disabled-border-color);
    opacity: var(--ct-btn-disabled-opacity)
}

.btn-primary {
    --ct-btn-color: #fff;
    --ct-btn-bg: #727cf5;
    --ct-btn-border-color: #727cf5;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #6973e3;
    --ct-btn-hover-border-color: #6973e3;
    --ct-btn-focus-shadow-rgb: 135,144,247;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #6973e3;
    --ct-btn-active-border-color: #6973e3;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #727cf5;
    --ct-btn-disabled-border-color: #727cf5
}

.btn-secondary {
    --ct-btn-color: #fff;
    --ct-btn-bg: #6c757d;
    --ct-btn-border-color: #6c757d;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #646c74;
    --ct-btn-hover-border-color: #646c74;
    --ct-btn-focus-shadow-rgb: 130,138,145;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #646c74;
    --ct-btn-active-border-color: #646c74;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #6c757d;
    --ct-btn-disabled-border-color: #6c757d
}

.btn-success {
    --ct-btn-color: #fff;
    --ct-btn-bg: #0acf97;
    --ct-btn-border-color: #0acf97;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #09bf8c;
    --ct-btn-hover-border-color: #09bf8c;
    --ct-btn-focus-shadow-rgb: 47,214,167;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #09bf8c;
    --ct-btn-active-border-color: #09bf8c;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #0acf97;
    --ct-btn-disabled-border-color: #0acf97
}

.btn-info {
    --ct-btn-color: #fff;
    --ct-btn-bg: #39afd1;
    --ct-btn-border-color: #39afd1;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #35a2c1;
    --ct-btn-hover-border-color: #35a2c1;
    --ct-btn-focus-shadow-rgb: 87,187,216;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #35a2c1;
    --ct-btn-active-border-color: #35a2c1;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #39afd1;
    --ct-btn-disabled-border-color: #39afd1
}

.btn-warning {
    --ct-btn-color: #fff;
    --ct-btn-bg: #ffc35a;
    --ct-btn-border-color: #ffc35a;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #ecb453;
    --ct-btn-hover-border-color: #ecb453;
    --ct-btn-focus-shadow-rgb: 255,204,115;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #ecb453;
    --ct-btn-active-border-color: #ecb453;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #ffc35a;
    --ct-btn-disabled-border-color: #ffc35a
}

.btn-danger {
    --ct-btn-color: #fff;
    --ct-btn-bg: #fa5c7c;
    --ct-btn-border-color: #fa5c7c;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #e75573;
    --ct-btn-hover-border-color: #e75573;
    --ct-btn-focus-shadow-rgb: 251,116,144;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #e75573;
    --ct-btn-active-border-color: #e75573;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #fa5c7c;
    --ct-btn-disabled-border-color: #fa5c7c
}

.btn-light {
    --ct-btn-color: #313a46;
    --ct-btn-bg: #eef2f7;
    --ct-btn-border-color: #eef2f7;
    --ct-btn-hover-color: #313a46;
    --ct-btn-hover-bg: #dce0e4;
    --ct-btn-hover-border-color: #dce0e4;
    --ct-btn-focus-shadow-rgb: 210,214,220;
    --ct-btn-active-color: #313a46;
    --ct-btn-active-bg: #dce0e4;
    --ct-btn-active-border-color: #dce0e4;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #313a46;
    --ct-btn-disabled-bg: #eef2f7;
    --ct-btn-disabled-border-color: #eef2f7
}

.btn-dark {
    --ct-btn-color: #fff;
    --ct-btn-bg: #313a46;
    --ct-btn-border-color: #313a46;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #505862;
    --ct-btn-hover-border-color: #464e59;
    --ct-btn-focus-shadow-rgb: 80,88,98;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #505862;
    --ct-btn-active-border-color: #464e59;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #313a46;
    --ct-btn-disabled-border-color: #313a46
}

.btn-outline-primary {
    --ct-btn-color: #727cf5;
    --ct-btn-border-color: #727cf5;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #727cf5;
    --ct-btn-hover-border-color: #727cf5;
    --ct-btn-focus-shadow-rgb: 114,124,245;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #727cf5;
    --ct-btn-active-border-color: #727cf5;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #727cf5;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #727cf5;
    --ct-gradient: none
}

.btn-outline-secondary {
    --ct-btn-color: #6c757d;
    --ct-btn-border-color: #6c757d;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #6c757d;
    --ct-btn-hover-border-color: #6c757d;
    --ct-btn-focus-shadow-rgb: 108,117,125;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #6c757d;
    --ct-btn-active-border-color: #6c757d;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #6c757d;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #6c757d;
    --ct-gradient: none
}

.btn-outline-success {
    --ct-btn-color: #0acf97;
    --ct-btn-border-color: #0acf97;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #0acf97;
    --ct-btn-hover-border-color: #0acf97;
    --ct-btn-focus-shadow-rgb: 10,207,151;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #0acf97;
    --ct-btn-active-border-color: #0acf97;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #0acf97;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #0acf97;
    --ct-gradient: none
}

.btn-outline-info {
    --ct-btn-color: #39afd1;
    --ct-btn-border-color: #39afd1;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #39afd1;
    --ct-btn-hover-border-color: #39afd1;
    --ct-btn-focus-shadow-rgb: 57,175,209;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #39afd1;
    --ct-btn-active-border-color: #39afd1;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #39afd1;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #39afd1;
    --ct-gradient: none
}

.btn-outline-warning {
    --ct-btn-color: #ffc35a;
    --ct-btn-border-color: #ffc35a;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #ffc35a;
    --ct-btn-hover-border-color: #ffc35a;
    --ct-btn-focus-shadow-rgb: 255,195,90;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #ffc35a;
    --ct-btn-active-border-color: #ffc35a;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #ffc35a;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #ffc35a;
    --ct-gradient: none
}

.btn-outline-danger {
    --ct-btn-color: #fa5c7c;
    --ct-btn-border-color: #fa5c7c;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #fa5c7c;
    --ct-btn-hover-border-color: #fa5c7c;
    --ct-btn-focus-shadow-rgb: 250,92,124;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #fa5c7c;
    --ct-btn-active-border-color: #fa5c7c;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fa5c7c;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #fa5c7c;
    --ct-gradient: none
}

.btn-outline-light {
    --ct-btn-color: #eef2f7;
    --ct-btn-border-color: #eef2f7;
    --ct-btn-hover-color: #313a46;
    --ct-btn-hover-bg: #eef2f7;
    --ct-btn-hover-border-color: #eef2f7;
    --ct-btn-focus-shadow-rgb: 238,242,247;
    --ct-btn-active-color: #313a46;
    --ct-btn-active-bg: #eef2f7;
    --ct-btn-active-border-color: #eef2f7;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #eef2f7;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #eef2f7;
    --ct-gradient: none
}

.btn-outline-dark {
    --ct-btn-color: #313a46;
    --ct-btn-border-color: #313a46;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #313a46;
    --ct-btn-hover-border-color: #313a46;
    --ct-btn-focus-shadow-rgb: 49,58,70;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #313a46;
    --ct-btn-active-border-color: #313a46;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #313a46;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #313a46;
    --ct-gradient: none
}

.btn-link {
    --ct-btn-font-weight: 400;
    --ct-btn-color: var(--ct-link-color);
    --ct-btn-bg: transparent;
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: var(--ct-link-hover-color);
    --ct-btn-hover-border-color: transparent;
    --ct-btn-active-color: var(--ct-link-hover-color);
    --ct-btn-active-border-color: transparent;
    --ct-btn-disabled-color: #8a969c;
    --ct-btn-disabled-border-color: transparent;
    --ct-btn-box-shadow: 0 0 0 #000;
    --ct-btn-focus-shadow-rgb: 135,144,247;
    text-decoration: none
}

.btn-link:focus-visible {
    color: var(--ct-btn-color)
}

.btn-link:hover {
    color: var(--ct-btn-hover-color)
}

.btn-group-lg>.btn,.btn-lg {
    --ct-btn-padding-y: 0.5rem;
    --ct-btn-padding-x: 1rem;
    --ct-btn-font-size: calc(1.2501rem + 0.0012vw);
    --ct-btn-border-radius: 0.3rem
}

@media (min-width: 1200px) {
    .btn-group-lg>.btn,.btn-lg {
        --ct-btn-font-size:1.251rem
    }
}

.btn-group-sm>.btn,.btn-sm {
    --ct-btn-padding-y: 0.28rem;
    --ct-btn-padding-x: 0.8rem;
    --ct-btn-font-size: 0.875rem;
    --ct-btn-border-radius: 0.2rem
}


/*BAGES*/
.badge {
    --ct-badge-padding-x: 0.4em;
    --ct-badge-padding-y: 0.25em;
    --ct-badge-font-size: 0.75em;
    --ct-badge-font-weight: 700;
    --ct-badge-color: #fff;
    --ct-badge-border-radius: 0.25rem;
    display: inline-block;
    padding: var(--ct-badge-padding-y) var(--ct-badge-padding-x);
    font-size: var(--ct-badge-font-size);
    font-weight: var(--ct-badge-font-weight);
    line-height: 1;
    color: var(--ct-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--ct-badge-border-radius)
}

.badge-primary-lighten {
    --ct-badge-color: var(--ct-primary);
    background-color: var(--ct-primary-bg-subtle)
}

.badge-primary-lighten[href] {
    color: var(--ct-primary);
    text-decoration: none;
    background-color: var(--ct-primary-bg-subtle)
}

.badge-primary-lighten[href]:is(:hover,:focus) {
    color: var(--ct-primary);
    text-decoration: none;
    background-color: var(--ct-primary-bg-subtle)
}

.badge-secondary-lighten {
    --ct-badge-color: var(--ct-secondary);
    background-color: var(--ct-secondary-bg-subtle)
}

.badge-secondary-lighten[href] {
    color: var(--ct-secondary);
    text-decoration: none;
    background-color: var(--ct-secondary-bg-subtle)
}

.badge-secondary-lighten[href]:is(:hover,:focus) {
    color: var(--ct-secondary);
    text-decoration: none;
    background-color: var(--ct-secondary-bg-subtle)
}

.badge-success-lighten {
    --ct-badge-color: var(--ct-success);
    background-color: var(--ct-success-bg-subtle)
}

.badge-success-lighten[href] {
    color: var(--ct-success);
    text-decoration: none;
    background-color: var(--ct-success-bg-subtle)
}

.badge-success-lighten[href]:is(:hover,:focus) {
    color: var(--ct-success);
    text-decoration: none;
    background-color: var(--ct-success-bg-subtle)
}

.badge-info-lighten {
    --ct-badge-color: var(--ct-info);
    background-color: var(--ct-info-bg-subtle)
}

.badge-info-lighten[href] {
    color: var(--ct-info);
    text-decoration: none;
    background-color: var(--ct-info-bg-subtle)
}

.badge-info-lighten[href]:is(:hover,:focus) {
    color: var(--ct-info);
    text-decoration: none;
    background-color: var(--ct-info-bg-subtle)
}

.badge-warning-lighten {
    --ct-badge-color: var(--ct-warning);
    background-color: var(--ct-warning-bg-subtle)
}

.badge-warning-lighten[href] {
    color: var(--ct-warning);
    text-decoration: none;
    background-color: var(--ct-warning-bg-subtle)
}

.badge-warning-lighten[href]:is(:hover,:focus) {
    color: var(--ct-warning);
    text-decoration: none;
    background-color: var(--ct-warning-bg-subtle)
}

.badge-danger-lighten {
    --ct-badge-color: var(--ct-danger);
    background-color: var(--ct-danger-bg-subtle)
}

.badge-danger-lighten[href] {
    color: var(--ct-danger);
    text-decoration: none;
    background-color: var(--ct-danger-bg-subtle)
}

.badge-danger-lighten[href]:is(:hover,:focus) {
    color: var(--ct-danger);
    text-decoration: none;
    background-color: var(--ct-danger-bg-subtle)
}

.badge-light-lighten {
    --ct-badge-color: var(--ct-light);
    background-color: var(--ct-light-bg-subtle)
}

.badge-light-lighten[href] {
    color: var(--ct-light);
    text-decoration: none;
    background-color: var(--ct-light-bg-subtle)
}

.badge-light-lighten[href]:is(:hover,:focus) {
    color: var(--ct-light);
    text-decoration: none;
    background-color: var(--ct-light-bg-subtle)
}

.badge-dark-lighten {
    --ct-badge-color: var(--ct-dark);
    background-color: var(--ct-dark-bg-subtle)
}

.badge-dark-lighten[href] {
    color: var(--ct-dark);
    text-decoration: none;
    background-color: var(--ct-dark-bg-subtle)
}

.badge-dark-lighten[href]:is(:hover,:focus) {
    color: var(--ct-dark);
    text-decoration: none;
    background-color: var(--ct-dark-bg-subtle)
}

.badge-outline-primary {
    --ct-badge-color: var(--ct-primary);
    border: 1px solid var(--ct-primary);
    background-color: transparent
}

.badge-outline-primary[href] {
    color: var(--ct-primary);
    text-decoration: none;
    background-color: var(--ct-primary-bg-subtle)
}

.badge-outline-primary[href]:is(:hover,:focus) {
    color: var(--ct-primary);
    text-decoration: none;
    background-color: var(--ct-primary-bg-subtle)
}

.badge-outline-secondary {
    --ct-badge-color: var(--ct-secondary);
    border: 1px solid var(--ct-secondary);
    background-color: transparent
}

.badge-outline-secondary[href] {
    color: var(--ct-secondary);
    text-decoration: none;
    background-color: var(--ct-secondary-bg-subtle)
}

.badge-outline-secondary[href]:is(:hover,:focus) {
    color: var(--ct-secondary);
    text-decoration: none;
    background-color: var(--ct-secondary-bg-subtle)
}

.badge-outline-success {
    --ct-badge-color: var(--ct-success);
    border: 1px solid var(--ct-success);
    background-color: transparent
}

.badge-outline-success[href] {
    color: var(--ct-success);
    text-decoration: none;
    background-color: var(--ct-success-bg-subtle)
}

.badge-outline-success[href]:is(:hover,:focus) {
    color: var(--ct-success);
    text-decoration: none;
    background-color: var(--ct-success-bg-subtle)
}

.badge-outline-info {
    --ct-badge-color: var(--ct-info);
    border: 1px solid var(--ct-info);
    background-color: transparent
}

.badge-outline-info[href] {
    color: var(--ct-info);
    text-decoration: none;
    background-color: var(--ct-info-bg-subtle)
}

.badge-outline-info[href]:is(:hover,:focus) {
    color: var(--ct-info);
    text-decoration: none;
    background-color: var(--ct-info-bg-subtle)
}

.badge-outline-warning {
    --ct-badge-color: var(--ct-warning);
    border: 1px solid var(--ct-warning);
    background-color: transparent
}

.badge-outline-warning[href] {
    color: var(--ct-warning);
    text-decoration: none;
    background-color: var(--ct-warning-bg-subtle)
}

.badge-outline-warning[href]:is(:hover,:focus) {
    color: var(--ct-warning);
    text-decoration: none;
    background-color: var(--ct-warning-bg-subtle)
}

.badge-outline-danger {
    --ct-badge-color: var(--ct-danger);
    border: 1px solid var(--ct-danger);
    background-color: transparent
}

.badge-outline-danger[href] {
    color: var(--ct-danger);
    text-decoration: none;
    background-color: var(--ct-danger-bg-subtle)
}

.badge-outline-danger[href]:is(:hover,:focus) {
    color: var(--ct-danger);
    text-decoration: none;
    background-color: var(--ct-danger-bg-subtle)
}

.badge-outline-light {
    --ct-badge-color: var(--ct-light);
    border: 1px solid var(--ct-light);
    background-color: transparent
}

.badge-outline-light[href] {
    color: var(--ct-light);
    text-decoration: none;
    background-color: var(--ct-light-bg-subtle)
}

.badge-outline-light[href]:is(:hover,:focus) {
    color: var(--ct-light);
    text-decoration: none;
    background-color: var(--ct-light-bg-subtle)
}

.badge-outline-dark {
    --ct-badge-color: var(--ct-dark);
    border: 1px solid var(--ct-dark);
    background-color: transparent
}

.badge-outline-dark[href] {
    color: var(--ct-dark);
    text-decoration: none;
    background-color: var(--ct-dark-bg-subtle)
}

.badge-outline-dark[href]:is(:hover,:focus) {
    color: var(--ct-dark);
    text-decoration: none;
    background-color: var(--ct-dark-bg-subtle)
}

.badge {
    vertical-align: middle
}

.badge.badge-lg {
    padding: .5em 1em;
    font-size: .85em
}

.rounded-pill {
    border-radius: var(--ct-border-radius-pill)!important
}


/*OTHER STUFF*/

.comment-content p{
    margin-bottom: .5rem !important;
}

.avatar-sm {
    height: 3rem;
    width: 3rem;
}

.avatar-xs {
    height: 1.5rem;
    width: 1.5rem;
    font-size: .75rem;
}

.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--ct-primary);
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 600;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}