betterbrime.css

:root {
    --bg-dark: #000000;
    --bg-second-dark: #18181b;
    --bg-second-accent-dark: #14161b;
    --bg-darked: #0e0e10;
    --bg-chat: #1e2129;
    --bg-chat-2: #252a2f;
    --df-color: #313437;
    --font-color: #fff;
}
.BetterBrime-Light {
    --bg-dark: #DEE4E7 !important;
    --bg-second-dark: #ffffff;
    --bg-second-accent-dark: #efeff1;
    --bg-darked: #DEE4E7;
    --bg-chat: #e2e2e2;
    --bg-chat-2: #e4e4e4;
    --df-color: #313437;
    --font-color: #000;
}
.BetterBrime-Light body, .BetterBrime-Light *{
    font-weight: bold!important;
}
.autocomplete-items {
    flex: 1 1 auto;
    z-index: 99;
}
.autocomplete-items div {
    padding: .438rem;
    cursor: pointer;
    background-color: var(--bg-second-dark); 
    border-bottom: 1px solid var(--df-color); 
}
.autocomplete-items div:hover {
    background-color: var(--bg-darked); 
}
.autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}
.emoteInfo{
    position: relative;
    display: inline-block;
}
.emoteInfo .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--bg-dark);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;

    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .emoteInfo .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--bg-dark) transparent transparent transparent;
  }
  
  .emoteInfo:hover .tooltiptext {
    transition-delay: 0.25s;
    visibility: visible;
    opacity: 1;
  }
#bb-pin-container {
    box-shadow: 0 8px 8px -5px #000;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99998;
}
.BetterBrime-Light #bb-pinned-highlight {
    background-color: rgb(0 0 0 / 34%) !important;
}
#bb-pinned-highlight {
    background-color: rgba(255,0,0,.5);
    color: #fff;
    font-size: .8572em;
    font-weight: 700;
    padding: 2px 10px;
}
#bb-pinned-highlight .close {
    fill: #fff;
    cursor: pointer;
}

#bb-pinned-highlight span {
    padding-right: 5px;
}
#bb-pinned-highlight .message {
    word-break: break-word;
}
.emoji-picker__wrapper{
    margin-bottom: 20px !important;
}
.loader-container {
  transition-timing-function: ease-out;
  margin: auto;
}
#bb-settings-container {
    background-color: #1e1e1e;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: -1px 0 0 rgb(0 0 0 / 30%), -2px 0 0 rgb(0 0 0 / 20%), -3px 0 0 rgb(0 0 0 / 10%), 1px 0 0 rgb(0 0 0 / 30%), 2px 0 0 rgb(0 0 0 / 20%), 3px 0 0 rgb(0 0 0 / 10%), 0 -1px 0 rgb(0 0 0 / 30%), 0 -2px 0 rgb(0 0 0 / 20%), 0 -3px 0 rgb(0 0 0 / 10%), 0 1px 0 rgb(0 0 0 / 30%), 0 2px 0 rgb(0 0 0 / 20%), 0 3px 0 rgb(0 0 0 / 10%);
    color: #d3d3d3;
    height: 500px;
    left: 50%;
    margin-left: -400px;
    margin-top: -250px;
    position: absolute;
    top: 50%;
    width: 800px;
    z-index: 9002;

    display: block;
}
#bb-settings-container #header{
    background-color: #282828;
    border-bottom: 1px solid #111;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    line-height: 42px;
    width: 100%;
}
#bb-settings-container #logo {
    font-size: 25px;
    padding: 10px;
    text-shadow: 1px 1px 3px #000;
    vertical-align: bottom;
}
#bb-settings-container .nav {
    display: inline-block;
    list-style: none;
    margin: 0 10px 0 0;
    vertical-align: middle;
}
#bb-settings-container .nav>li {
    float: left;
    line-height: 18px;
}
#bb-settings-container .nav>li>a {
    box-shadow: none;
    color: #adafae;
    font-family: Korolev-Bold,HelveticaNeue-CondensedBold,ArialNarrow-Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 9px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
}
#bb-settings-container .nav>li.active a, #bb-settings-container .nav>li>a:hover {
    border-bottom: 1px solid #03dac6;
    color: #d3d3d3;
}
#bb-settings-container #close {
    color: #fff;
    filter: alpha(opacity=20);
    float: right;
    font-size: 30px;
    opacity: .2;
    position: absolute;
    right: 20px;
    text-shadow: 0 1px 0 #000;
    top: 0;
    vertical-align: center;
    cursor: pointer;
}
#bb-settings-container #bttvSettings div {
    box-sizing: content-box;
}
#bb-settings-container .option:nth-child(2n) {
    background-color: #232323;
}
#bb-settings-container .option {
    background-color: #1e1e1e;
    border-bottom: 1px solid #000!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04)!important;
    color: #999;
    line-height: 30px;
    padding: 3px 10px 2px!important;
    position: relative;
    width: calc(100% - 20px);
}
#bb-settings-container #footer {
    background-color: #282828;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #111;
    bottom: 0;
    box-sizing: content-box;
    color: #777;
    padding: 5px;
    position: absolute;
    width: calc(100% - 10px);
    z-index: inherit;
}
#bb-settings-container #bb-settings-here {
    font: 12px Helvetica Neue,Helvetica,Arial,sans-serif;
    height: 425px;
    overflow-y: scroll;
}
#bb-settings-container #bbChangelog {
    height: 425px;
    overflow-y: scroll;
    padding: 25px;
    display: none;
}
#bb-settings-container h1 {
    color: #d3d3d3;
    font-size: 20px;
}
#bb-settings-container #bbChangelog h2 {
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 20px;
}
.bb-switch {
    text-align: center;;
    background: rgba(0,0,0,.25);
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%), 0 1px rgb(255 255 255 / 10%);
    height: 26px;
    position: absolute;
    right: 7px;
    top: 4px;
    width: 120px;
}
.connectBetterBrime{
    border-bottom: 1px solid #03dac6;
    cursor: pointer;
}
.bb-fullscreen-box{
    position: absolute !important; 
    z-index: 99999; 
    cursor: grab; 
    background-color: var(--bg-darked); 
    opacity: 0.7; 
    display: block; 
    left: 199px; 
    top: 118px; 
    width: 327px; 
    height: 561px;
}
.bb-fullscreen-box .body{
    width: 100%;
    height: 90%;
}
#bbFullScreenPlus{
    display: none;
}
	
.ui-icon {
    width: 16px;
    height: 16px;
    background-position: -80px -224px !important;
    background-image: url('https://cdn.betterbri.me/ui-icons_444444_256x240.png')
    /*{iconsContent}*/
    ;
}
.settings-row{
    position: absolute;
    left: calc(40% - 45px);
    top: 30%;
    border: 2px solid var(--bg-second-accent-dark);
    background: var(--bg-darked);
    border-radius: 17px;
}
.theme-color{
    color: #553bde;
}
.BetterBrime-Light .theme-color{
    color: #6f6f6f!important;
}
body.BetterBrime-Design{
    background-color: var(--bg-darked) !important;
}
.BetterBrime-Design .chat__column-header{
    border-top-color: var(--bg-dark) !important;
    background: var(--bg-darked)!important;
}
.BetterBrime-Design .navbar-sticky .header-navbar.navbar-shadow{
    box-shadow: none !important;
}
.BetterBrime-Design input[type="text"]#message{
    background-color: var(--bg-darked) !important;
}
.BetterBrime-Design .header-navbar {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .main-menu {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .main-menu-content .navigation-main {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .chat__column {
    background: var(--bg-second-dark) !important;
}
.BetterBrime-Design .dropdown-menu {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .main-menu .navbar-header .navbar-brand .brand-text {
    color: #ffffff !important;
}
.BetterBrime-Design .card[data-v-10e4e594], .BetterBrime-Design .card {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .modal .modal-body, .BetterBrime-Design .modal .modal-content, .BetterBrime-Design .modal .modal-footer {
    background-color: var(--bg-second-dark) !important;
}
.BetterBrime-Design .modal .modal-header, .BetterBrime-Design .modal .modal-header[class*=bg-] {
    background-color: var(--bg-second-accent-dark) !important;
}
.BetterBrime-Design [dir] .border-primary, .BetterBrime-Design .border-primary {
    border: 0 !important;
}
.BetterBrime-Design .link__card__wrapper:before{
    background: linear-gradient(90deg,#0e0e10,rgba(17,23,39,.85))!important;
}
.BetterBrime-Design .link__card__wrapper{
    background-color: var(--bg-darked)!important;
}
.BetterBrime-Design .emoji-picker__category-name{
    text-align: center!important;
    color:#7d8285!important;
    border-top: 1px solid #000;
    box-shadow: 0 1px 0 rgb(255 255 255 / 5%) inset;
    background-image: linear-gradient(to top,transparent,rgba(0,0,0,.5));
}
.BetterBrime-Design .emoji-picker__emojis h2.emoji-picker__category-name{
    text-transform: none!important;
}
.BetterBrime-Design .emoji-picker * {
    font-family: Roboto,sans-serif!important;
}
.BetterBrime-Design .emoji-picker__preview{
    border:0;
}
.BetterBrime-Design .emoji-picker__search-not-found h2{
    color: #7d8285!important;
}
.BetterBrime-Light .gif__picker__button svg{
    color: var(--font-color)!important;
}
.BetterBrime-Light .chat__input{
    color: var(--font-color)!important;
}
.BetterBrime-Light .user__info .user__link{
    color: var(--font-color)!important;
}
.BetterBrime-Design .user__card__wrapper{
    background: var(--bg-dark)!important;
}
.BetterBrime-Design .emoji-picker__emoji:hover{
    background-color: var(--bg-second-dark);
}
.BetterBrime-Design #continue-chat{
    background: var(--bg-dark) !important;
}
.BetterBrime-Design.BetterBrime-Light .wrapper.highlighted{
    background: rgb(171 171 171 / 30%)!important;
}
.BetterBrime-Design .wrapper.highlighted {
    background: rgba(255,0,0,.3)!important;
}
.BetterBrime-Design .i__reply {
    background: var(--bg-dark) !important;
}
.BetterBrime-Design .m__mention, .BetterBrime-Design .m__reply{
    background-color: var(--bg-dark) !important;
}
.BetterBrime-Design .reply{
    background-color: var(--bg-darked);
    border-radius: 10px;
    padding: .25rem;
}
.BetterBrime-Design .i__reply .remove:hover{
    background-color: var(--bg-darked);
}
.BetterBrime-Design .m__content__mention{
    padding: 0 0 .25rem 0 !important;
    font-weight: 500;
    background: unset !important;
    color: var(--font-color);
}
.BetterBrime-Design .m__content__mention:hover{
    background: unset;
}
.BetterBrime-Design .m__content__mention:before {
    content: "@";
}
.timestamp{
    font-family: Roboto,sans-serif!important;
    color: #adadb8;
    font-weight: lighter;
}
.BetterBrime-Design .menu-collapsed .main-menu:not(.expanded) .navigation-main li.active>a {
    background: var(--bg-darked) !important;
}

.BetterBrime-Light .navbar-sticky .header-navbar.navbar-shadow {
    border-bottom: 2px solid #b4b7bd;
}
.BetterBrime-Light .main-menu .navbar-header .navbar-brand .brand-text{
    color: var(--font-color)!important;
}
.BetterBrime-Light .chat-thread li{
    text-shadow: 2px 1px 10px #252525b8;
    color: var(--font-color)!important;
}
.BetterBrime-Light .streamTitle {
    color: var(--font-color);
}
.BetterBrime-Light .main-menu-content .navigation-main li a {
    color: var(--font-color)!important;
}
.BetterBrime-Light .channelName{
    color: var(--font-color)!important;
}
.BetterBrime-Light .vod__title {
    color: var(--font-color)!important;
}
.BetterBrime-Light .vod__category, .BetterBrime-Light .vod__date {
    color: var(--font-color)!important;
}
.BetterBrime-Light .emoji-picker__category-name {
    border-top: 1px solid #bdbdbd!important;
    box-shadow: 0 1px 0 rgb(255 255 255 / 5%) inset;
    background-image: none!important;
}
.BetterBrime-Light input[type="text"]#message {
    border: 2px solid;
}
.BetterBrime-Light .btn-outline-primary {
    border: 2px solid #bdbdbd!important;
    background-color: var(--bg-darked) !important;
}

.BetterBrime-Light .settings-row {
    border: 2px solid #bdbdbd;
    color: var(--font-color);
}
.BetterBrime-Light .theme-color{
    color: #6f6f6f;
}
.bb-settings-here h1{
    color: var(--font-color)!important;
}
.BetterBrime-Light .nav-pills .nav-item .nav-link, .BetterBrime-Light .nav-tabs .nav-item .nav-link, .BetterBrime-Light .nav-tabs.nav-justified .nav-item .nav-link {
    color: var(--font-color);
}
.BetterBrime-Light .header-navbar .navbar-container .nav .nav-item .nav-link{
    color: var(--font-color);
}
.BetterBrime-Light .dropdown-menu .dropdown-item {
    color: var(--font-color);
}
.BetterBrime-Light h1, .BetterBrime-Light h2, .BetterBrime-Light h3, .BetterBrime-Light h4, .BetterBrime-Light h5, .BetterBrime-Light h6 {
    color: var(--font-color);
}
.BetterBrime-Light .custom-file-label:not(:focus), .BetterBrime-Light input.form-control:not(:focus), .BetterBrime-Light textarea.form-control:not(:focus) {
    border-color: #b4b7bd !important;
}
.BetterBrime-Light .custom-file-label, .BetterBrime-Light input.form-control, .BetterBrime-Light textarea.form-control {
    background-color: var(--bg-dark) !important;
    color: var(--font-color);
}
.BetterBrime-Light .content-header-left .breadcrumbs-top .content-header-title {
    color: #636363;
}
.BetterBrime-Light #title{
    color: var(--font-color)!important;
}
.BetterBrime-Light .card {
    box-shadow: none !important;
}
.BetterBrime-Light #streamTitle, .BetterBrime-Light #clipper, .BetterBrime-Light #category{
    color: #636363 !important;
}
[dir] .BetterBrime-Light .menu-collapsed .main-menu:not(.expanded) .navigation-main li.active>a {
    background: var(--bg-darked) !important;
}
[dir] .BetterBrime-Design .menu-collapsed .main-menu:not(.expanded) .navigation-main li.active>a {
    background: var(--bg-darked) !important;
}
.BetterBrime-Light a[title="Delete Message"] svg{
    fill: rgb(0 0 0) !important;
}
.BetterBrime-Light li[style="background-color: rgba(255, 255, 255, 0.1); padding-top: 5px !important; padding-bottom: 5px !important; border-left: 4px solid #7367f0 ;"]{
    background-color: rgb(0 0 0 / 10%) !important;
}
.BetterBrime-Light a[href="https://betterbri.me/upload"]{
    color: #9147ff;
}
.BetterBrime-Design ::selection {
    color: #fff;
    background: #7367f0;
}
.BetterBrime-Light ::selection{
    color: var(--font-color)!important;
}
.brimesettings-select{
    cursor: pointer;
}
.brimesettings-select:hover{
    color: #fff;
    border-bottom: 2px solid #ff9f43;
}
.BetterBrime-Light .brimesettings-select:hover{
    color: var(--font-color)!important;
}
#Timestampstype{
    color: #fff;
}
.BetterBrime-Light #Timestampstype{
    color: var(--font-color)!important;
}
/* jquery ui */


.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
    border-radius: 7px;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}	
.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
    border-width: 2px;
}
#bb-settings-container #bbSupporters {
    height: 425px;
    overflow-y: scroll;
    padding: 25px;
    display: none;
}
.BetterBrime-Design .emoji-picker {
    border: 0!important;
    background-color: var(--bg-darked)!important;
}
.BetterBrime-Design input.emoji-picker__search {
    background: var(--bg-second-dark)!important;
    border: 0!important;
    color: #7d8285!important;
}
.BetterBrime-Design .gif__picker input{
    background: var(--bg-second-dark)!important;
}
.BetterBrime-Design .gif__picker .input{
    background: var(--bg-darked)!important;
}
.BetterBrime-Design .gif__picker{
    background: var(--bg-darked)!important;
}
.BetterBrime-Design .input{
    background: var(--bg-darked)!important;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}
.ui-widget-shadow {
    -webkit-box-shadow: 0px 0px 5px #666666;
    box-shadow: 0px 0px 5px #666666;
}

.BetterBrime-theatre .navbar.header-navbar, 
.BetterBrime-theatre .main-menu.menu-fixed, 
.BetterBrime-theatre .content-wrapper .content-body .channelData
{
    display: none;
}
.BetterBrime-theatre .vertical-layout .app-content.content{
    margin-left: 0!important;
}
.BetterBrime-theatre .content-body .row.channel__column{
    position: fixed;
    height: calc(100% - var(--headerHeight));
}

.bb__badge{
    display: inline-block;
    min-width: 1.3rem;
    height: 1.3rem;
    background-position: center;
    vertical-align: middle; 
}
.bb__badge[data-badge="Supporter"]{
    cursor: pointer;
    color: rgb(255,255,255);
    background: url(https://cdn.betterbri.me/badges/v2/Supporter-black.png) #03dac6;
    background-size: 1.3rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.2rem;
}
.BetterBrime-Design .commands{
    background: var(--bg-dark) !important;
}
.BetterBrime-Design .command:hover{
    background: var(--bg-second-dark) !important;
}
.BetterBrime-Design.BetterBrime-Light .command:hover{
    color: var(--font-color) !important;
}