:root {
    --primary: #337ab7;
    --secondary: #1f496e;
    --success: #1ab394;
    --warning: #f7a54a;
    --danger: #ec4758;
    --info: #4fa7f3;
    --muted: #888888;

    --white: #ffffff;
    --black: #000000;
    --dark: #1c1c1c;
    --light: #fafafa;
    --border: #e2e2e2;

    --topbar-text: #ffffff;
    --topbar: #001921;

    --sidebar-text: #ffffff;
    --sidebar: #001921;
    --sidebar-active: #00151c;
    --sidebar-scroll: rgb(255 255 255 / 15%);

    --primary-transparent: rgb(51 122 183 / 5%);
    --light-transparent: rgb(255 255 255 / 15%);
    --dark-transparent: rgb(0 0 0 / 15%);
}

.bg-primary {background-color: var(--primary) !important;}
.text-primary {color: var(--primary) !important;}
.border-primary {border-color: var(--primary) !important;}

.bg-secondary {background: var(--secondary) !important;}
.text-secondary {color: var(--secondary) !important;}
.border-secondary {border-color: var(--secondary) !important;}

.bg-success {background-color: var(--success) !important;}
.text-success {color: var(--success) !important;}
.border-success {border-color: var(--success) !important;}

.bg-warning {background-color: var(--warning) !important;}
.text-warning {color: var(--warning) !important;}
.border-warning {border-color: var(--warning) !important;}

.bg-danger {background-color: var(--danger) !important;}
.text-danger {color: var(--danger) !important;}
.border-danger {border-color: var(--danger) !important;}

.bg-info {background-color: var(--info) !important;}
.text-info {color: var(--info) !important;}
.border-info {border-color: var(--info) !important;}

.bg-muted {background-color: var(--muted) !important;}
.text-muted {color: var(--muted) !important;}
.border-muted {border-color: var(--muted) !important;}

.bg-white {background-color: var(--white) !important;}
.text-white {color: var(--white) !important;}
.border-white {border-color: var(--white) !important;}

.bg-black {background-color: var(--black) !important;}
.text-black {color: var(--black) !important;}
.border-black {border-color: var(--black) !important;}

.bg-dark {background-color: var(--dark) !important;}
.text-dark {color: var(--dark) !important;}
.border-dark {border-color: var(--dark) !important;}

.bg-light {background-color: var(--light) !important;}
.text-light {color: var(--light) !important;}
.border-light {border-color: var(--light) !important;}

.color-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.color-badge {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    overflow: hidden;
}

.color-badge > span {
    flex: 1;
}