iobroker.telegram-menu 2.2.0 → 2.2.1

package/admin/css/style.css

@@ -1,4 +1,4 @@
-@import "./input.css";
+@import "input-select.css";
 @import "./edit-container.css";
 @import "./button.css";
 @import "./editor-header.css";
@@ -10,131 +10,57 @@
 @import "./tab-action.css";
 @import "./custom_classes.css";
 @import "./description.css";
+@import "./colors.css";
+@import "./scrollbar.css";
 
 body {
     height: 100vh;
     overflow: auto;
 }
 
-/* Tab-Navigation */
-.App-TabList {
-    background-color: #3399cc;
-    padding-bottom: 5px;
+h1 {
+    text-decoration: underline;
+    padding-bottom: 2rem;
+    padding-left: 5px;
 }
 
-.dark .App-TabList {
-    background-color: rgb(59, 59, 59);
+.App.row {
+    height: 100% !important;
 }
 
-.App-TabList button {
-    border-radius: 6px;
-    border: 3px solid #aaa !important;
-    margin: 5px 0 0 5px;
-    width: 110px;
-    height: 30px;
-    background-color: #ddd !important;
+label p {
+    font-size: 0.8rem;
+    color: var(--text-primary);
 }
 
-.App-TabList button.active {
-    border: 3px solid #333 !important;
+/* Tab-Navigation */
+.app__navigation_row {
+    background-color: var(--iobroker-color);
+    padding-bottom: 5px;
 }
 
-
-.App-TabList button:last-child {
+.app__navigation_row button:last-child {
     margin-right: 5px;
 }
 
-.App-TabList button.icon {
-    width: 30px;
-    padding: 0;
-}
-
-
-.dark .App-TabList button {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Hover */
-.light .App-TabList button:hover,
-.light .MenuPopupCard-Popup button:hover .colored .App-TabList button:hover {
-    background-color: #eee !important;
-    border-color: #888 !important;
-}
-
-.dark .App-TabList button:hover,
-.dark .MenuPopupCard-Popup button:hover {
-    background-color: #333 !important;
-    border-color: #888 !important;
-}
-
-.blue .App-TabList button:hover,
-.blue .MenuPopupCard-Popup button:hover {
-    background-color: #333 !important;
-    border-color: #888 !important;
-}
-
 /* HeaderMenu */
-.MenuPopupCard-Popup {
+.menu__list_popup {
     display: inline-block;
     width: 160px;
     position: absolute;
     z-index: 1500;
-    top: 138px;
-    left: 5px;
+    top: calc(30px + 0.5rem);
+    left: 0.5rem;
     border: 2px solid #333;
     border-radius: 4px;
-    max-height: 74%;
+    max-height: 74vh;
     overflow: auto;
+    background-color: var(--background-primary);
 }
 
-.light .MenuPopupCard-Popup,
-.colored .MenuPopupCard-Popup {
-    background-color: #fff;
-}
-
-.dark .MenuPopupCard-Popup {
-    background-color: #333;
-}
-
-.blue .MenuPopupCard-Popup {
-    background-color: rgb(62, 68, 72);
-}
-
-.MenuPopupCard-Popup button {
-    color: #3399cc !important;
-    border: 2px solid #aaa !important;
-}
-
-.light .MenuPopupCard-Popup button,
-.colored .MenuPopupCard-Popup button {
-    background-color: #ddd !important;
-}
-
-.dark .MenuPopupCard-Popup button {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-}
 
-.blue .MenuPopupCard-Popup button {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-}
-
-.MenuCard button {
-    border-radius: 5px !important;
-}
-
-.HeaderMenu-menuPopupCard {
-    display: inline-block;
-}
-
-.dark .header__menu_container,
-.blue .header__menu_container {
-    color: white;
-}
-
-.header__menu_container {
-    margin-top: 0.5rem;
+.header__button_row {
     font-size: 0.8rem;
-    padding-top: 0.25rem;
     height: auto !important;
     display: flex;
     flex-wrap: wrap;
@@ -143,16 +69,13 @@ body {
 }
 
 /* Header Telegram User */
-.HeaderThirdRow-ButtonAction {
-    display: inline-block;
-    width: 200px;
-}
+
 
 .telegram__errorMessage {
-    color: red;
+    color: var(--destructive);
     font-size: 0.7rem;
     padding: 0.5rem 1rem;
-    border: 1px solid red;
+    border: 1px solid var(--destructive);
     margin-left: 20px
 }
 
@@ -166,28 +89,22 @@ body {
 }
 
 /* error */
-.ErrorDoubleTrigger-Container {
-    color: red;
+.error__container-double_trigger {
+    color: var(--destructive);
     position: absolute;
     top: 5px;
     max-width: 400px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
-    border: 1px solid red;
-    background-color: white;
+    border: var(--destructive);
+    background-color: var(--background-primary);
 }
 
-.ErrorDoubleTrigger-Container .Error-Header {
+.error__container-double_trigger .error__header {
     margin: 2px 5px;
 }
 
-.ErrorDoubleTrigger-Container .Error-Items {
-    display: inline;
-    padding: 0 10px;
-}
-
-/* get mistake */
 /* Grid Main Content */
 
 div.MuiTabPanel-root {
@@ -195,32 +112,34 @@ div.MuiTabPanel-root {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: auto;
-    width: calc(100%) !important;
-    padding: 2px 5px 5px 5px;
+    width: 100% !important;
+    padding: 2px 5px 0 0;
 }
 
 /* NavigationMenu */
-/* Table ist in Allgemein */
+.navigation__container {
+    height: calc(100% - 0.5rem) !important;
+}
 
-.MenuNavigation-Container .startSideActive:not(.row__active) {
-    background-color: #96d15a !important;
+.navigation__container .startside__active {
+    background-color: var(--startside) !important;
 }
 
-.MenuNavigation-Container .startSideInactive {
-    background-color: #99c0f9 !important;
+.navigation__container .startside__active td {
+    color: var(--dark) !important;
 }
 
-.MenuNavigation-Container .startSideHideInfo {
-    display: none;
+.navigation__container .startside__inactive {
+    background-color: var(--startside-none) !important;
 }
 
-.MenuNavigation-Container .textSubmenuInfo {
+.navigation__container .textSubmenuInfo {
     font-size: 1rem;
     font-weight: 900;
 }
 
-.MenuNavigation-Container,
-.ActionCard-Container {
+.navigation__container,
+.action__container {
     padding: 0 !important;
     flex-grow: 1;
     flex-shrink: 1;
@@ -228,59 +147,20 @@ div.MuiTabPanel-root {
     overflow-y: auto;
 }
 
-.MenuNavigation-Container {
-    height: calc(100% - 10px) !important;
-}
-
-.ActionCard-Container {
+.action__container {
     height: inherit;
 }
 
-.TabPanel-Action,
-.TabPanel-Action > div.MuiTabPanel-root {
-    height: calc(100% - 30px) !important;
+.tab__action,
+.tab__action > div.MuiTabPanel-root {
+    height: calc(100% - 0.5rem) !important;
     padding-left: 0 !important;
 }
 
-/* Für Webkit-Browser wie Chrome und Safari */
-.MenuNavigation-Container::-webkit-scrollbar,
-.ActionCard-Container::-webkit-scrollbar {
-    width: 10px; /* Breite der Scrollbar */
-}
-
-.MenuNavigation-Container::-webkit-scrollbar-thumb,
-.ActionCard-Container::-webkit-scrollbar-thumb {
-    background: #888; /* Farbe des beweglichen Teils der Scrollbar */
-}
-
-.MenuNavigation-Container::-webkit-scrollbar-thumb:hover,
-.ActionCard-Container::-webkit-scrollbar-thumb:hover {
-    background: #555; /* Farbe des beweglichen Teils der Scrollbar beim Überfahren mit der Maus */
-}
-
-/* Für Firefox */
-.MenuNavigation-Container, .ActionCard-Container {
-    scrollbar-width: thin; /* Breite der Scrollbar */
-    scrollbar-color: #888 #f5f5f5; /* Farbe des beweglichen Teils der Scrollbar und Hintergrundfarbe der Scrollbar */
-}
-
-
-/* Settings */
-.Settings h1 {
-    text-decoration: underline;
-    padding-bottom: 2rem;
-    padding-left: 5px;
-}
-
-.Settings select {
-    border: none;
-    border-bottom: 1px solid #aaa;
-}
-
 /* DialogContainer */
 
-.DialogBackground {
-    background-color: rgba(0, 0, 0, 0.5);
+.dialog__card_wrapper {
+    background-color: var(--dialog-bg);
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -289,7 +169,7 @@ div.MuiTabPanel-root {
     z-index: 1100;
 }
 
-.DialogContainer-Header {
+.dialog__card_header {
     font-family: "Roboto,Helvetica,Arial,sans-serif", serif;
     font-size: 1.25rem;
     font-weight: 500;
@@ -297,31 +177,18 @@ div.MuiTabPanel-root {
     padding: 10px 10px 10px 30px;
     margin: 5px 5px 5px 5px;
     border-radius: 4px;
+    color: var(--text-header);
+    background: var(--iobroker-color);
 }
 
-.light .DialogContainer-Header,
-.colored .DialogContainer-Header {
-    background-color: #3399cc;
-}
-
-.dark .DialogContainer-Header {
-    background-color: #333;
-    color: white;
-}
-
-.blue .DialogContainer-Header {
-    background-color: rgb(62, 68, 72);
-    color: white;
-}
-
-.DialogContainer-Footer {
+.dialog__card_footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     text-align: right;
 }
 
-.DialogContainer-Footer button {
+.dialog__card_footer button {
     padding: 0 30px !important;
     margin: 0 8px 10px 8px !important;
     border: none !important;
@@ -330,48 +197,31 @@ div.MuiTabPanel-root {
     height: 40px !important;
 }
 
-.dark .DialogContainer {
-    background-color: #444 !important;
-}
-
-.blue .DialogContainer {
-    background-color: rgb(34, 42, 46) !important;
+.dialog__card {
+    background-color: var(--background-primary) !important;
 }
 
-.dialogContainer__body {
+.dialog__card_content {
     padding: 0 0.5rem 0 0.5rem;
+    height: calc(100% - 145px);
 }
 
-.DialogContainer select {
-    color: #3399cc;
-    width: 200px;
-    border: none;
-    border-bottom: 1px solid black;
-}
-
-.DialogContainer select:focus {
-    outline: none;
-}
-
-/* DropBox */
-.DropBox-PopupContainer {
+.dropbox__container {
     background-color: transparent !important;
-    /* top: 105px !important; */
     height: 44% !important;
-    width: 212px !important;
-    /* right: 5px !important; */
+    width: 250px !important;
     left: auto !important;
     cursor: move;
 }
 
-.DropBox-PopupContainer > div.DialogContainer {
+.dropbox__container > div.dialog__card {
     transform: none !important;
     top: 0 !important;
     left: auto !important;
     height: 100% !important;
 }
 
-.Dropbox--PopupContainer-RenameCard {
+.dropbox__dialog_rename-wrapper {
     position: fixed;
     top: -200px;
     right: 0;
@@ -380,89 +230,52 @@ div.MuiTabPanel-root {
     bottom: 500px;
 }
 
-.DropBox {
-    background-color: #eee;
+.dropbox__drag_in_field {
+    background-color: var(--background-primary);
+    color: var(--text-primary);
     width: 90%;
     margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     height: 40%;
-    border: 2px solid black;
-}
-
-.dark .DropBox {
-    background-color: #333;
-    color: white;
-}
-
-.blue .DropBox {
-    background-color: rgb(62, 68, 72);
-    color: white;
-}
-
-.DropBox .Select select {
-    font-size: 0.9rem !important;
+    border: 2px solid var(--dark);
+    padding: 10px;
 }
 
-.DropBox-Background {
+.dropbox__dialog_rename-card {
     bottom: -250px !important;
 }
 
-.DropBox p {
+.dropbox__drag_in_field p {
     text-align: center;
     font-weight: 500;
     font-size: 1.5rem;
     margin-top: 10px;
-    color: #3399cc;
+    color: var(--iobroker-blue);
     text-decoration: underline;
     margin-bottom: 10px;
 }
 
-.DropBox p.DropBox-Content {
+.dropbox__drag_in_field p.DropBox-Content {
     font-size: 0.7rem;
     margin-top: 0;
     text-decoration: none;
 }
 
-.dark .DropBox-Container label,
-.blue .DropBox-Container label {
-    color: white !important;
-}
-
-/* HelperCard */
-.HelperText .DialogContainer {
-    min-width: 750px !important;
-}
-
-.HelperCard {
-    max-height: 320px;
-}
-
-.HelperCard button {
-    background-color: #3399cc !important;
+.dropbox__content label {
+    color: var(--text-primary) !important;
 }
 
-.HelperCard ~ .Input-Container .InputField {
-    width: 90% !important;
-    margin-top: 40px !important;
-    font-size: 0.9rem !important;
-}
-
-.HelperText label p {
-    margin-left: 0.5% !important;
-    margin-top: 0 !important;
-}
-
-.HelperCard-BtnSearch {
+.helper__btn_search {
     position: absolute;
     margin-left: 8px !important;
 }
 
-.BtnCircleAdd {
+.btn__circle_add {
     border-radius: 50%;
     width: 24px;
     height: 24px;
-    color: #3399cc;
+    color: var(--iobroker-blue);
     border: none;
     display: inline-block;
     cursor: pointer;
@@ -471,61 +284,25 @@ div.MuiTabPanel-root {
 
 /* Edit cards */
 
-.RenameCard .Input-Container {
-    display: block !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
+.rename__card {
+    display: flex;
+    justify-content: center;
 }
 
-.cellIcon {
-    padding: 1px !important;
-    width: 30px !important;
-}
 
-.MenuHeader-ActiveMenu {
-    margin-left: 19px;
+.rename__card input {
+    margin-top: 1rem !important;
 }
 
-.menu__header-active {
-    border: 3px solid #96d15a;
-    padding: 4px 5px;
+.table__cell_icon {
+    padding: 1px !important;
+    width: 30px !important;
 }
 
 /* Allgemein */
 /* label */
-label p {
-    font-size: 0.8rem;
-    color: #777;
-    /* margin-left: px; */
-}
-
-/* Button */
-
-button {
-    cursor: pointer;
-}
-
-.dark .button__expand button {
-    background-color: #555 !important;
-    border-color: #aaa !important;
-}
-
-.blue .button__expand button {
-    background-color: rgb(62, 68, 72) !important;
-    border-color: #aaa !important;
-}
-
-.dark .button__expand button:hover,
-.blue .button__expand button:hover {
-    background-color: #333 !important;
-    border-color: #888 !important;
-}
-
-.dark .button__expand span,
-.blue .button__expand span {
-    color: white !important;
-}
 
+/*Wird generiert in actionUtils */
 button.buttonTrue,
 button.buttonFalse {
     border-radius: 5px;
@@ -533,45 +310,23 @@ button.buttonFalse {
     width: 20px;
     height: 20px;
     padding: 0;
-    margin-top: 4px
-}
-
-button.buttonTrue i,
-button.buttonFalse i {
-    margin-top: 1px;
-    font-size: 1.2rem;
-    text-align: center;
-}
-
-tr td:has(button.buttonTrue),
-tr td:has(button.buttonFalse) {
-    padding: 0 !important;
-    margin: 0 !important;
-    width: 20px !important;
+    margin-top: 4px;
+    color: var(--button-color-boolean);
 }
 
 button.buttonTrue {
-    background-color: #96d15a !important;
-    color: #333;
+    background-color: var(--button-bg-true) !important;
 }
 
 button.buttonFalse {
-    background-color: #ff0033 !important;
-    color: #333;
-}
-
-/* Select */
-
-.dark select {
-    background-color: #333 !important;
-    color: white !important;
-    border: 2px solid #aaa !important;
+    background-color: var(--button-bg-false) !important;
 }
 
-.blue select {
-    background-color: rgb(62, 68, 72) !important;
-    color: white !important;
-    border: 2px solid #aaa !important;
+button.buttonTrue i,
+button.buttonFalse i {
+    margin-top: 1px;
+    font-size: 1.2rem;
+    text-align: center;
 }
 
 p.inUse {
@@ -580,28 +335,15 @@ p.inUse {
     left: 5px;
 }
 
-.Select span {
-    display: block;
-    margin-left: 5px;
-}
 
-.Select select {
-    margin: 5px;
+.settings__tab {
+    color: var(--text-primary);
 }
 
-/* Settings */
-.Settings h1 {
-    margin: 1px;
-}
-
-.light .Settings,
-.colored .Settings {
-    color: black;
-}
-
-.dark .Settings,
-.blue .Settings {
-    color: white;
+.telegram__users_container {
+    display: flex;
+    margin-right: 0.5rem;
+    margin-left: 0.25rem
 }
 
 .telegram__users_card {
@@ -619,19 +361,11 @@ p.inUse {
 
 .telegramm__userCard-content {
     padding: 0.25rem 0.5rem;
-    border: 1px solid #000000;
+    border: 1px solid var(--border-primary);
     width: auto;
     display: inline-block;
     margin-right: 0.5rem !important;
-}
-
-.dark .telegramm__userCard-content {
-    border: 1px solid white;
-    color: white
-}
-
-.dark label.checkbox {
-    color: white;
+    color: var(--text-primary)
 }
 
 .telegramm__userCard-content p {
@@ -645,44 +379,21 @@ p.inUse {
     margin-top: 0;
 }
 
-.TelegramUserCard-User {
+.telegram__user {
     margin-top: 5px;
 }
 
-.TelegramUserCard-name,
-.TelegramUserCard-content > div.Checkbox {
+.telegram__user-name {
     display: inline !important;
 }
 
-.TelegramUserCard-ChatID {
+.telegram__user_chat-id {
     font-size: 0.7rem;
 }
 
-.disabled {
-    pointer-events: none;
-    opacity: 0.4;
-}
-
-.MuiTabs-root div.MuiTabs-fixed {
-    /*position: fixed;*/
-    background-color: white;
-    width: 100%;
-    z-index: 100;
-}
-
-.telegram__users_container {
-    display: flex;
-    margin-right: 0.5rem;
-    margin-left: 0.25rem
-}
-
-span[title],
-.title {
-    cursor: help;
-}
 
 /* Trigger Overview */
-.Menu-list-container {
+.trigger__overview_wrapper {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
@@ -690,67 +401,52 @@ span[title],
     overflow: auto;
 }
 
-.Menu-list-container li {
+.trigger__overview_wrapper li {
     cursor: help;
     padding-left: 4px;
 }
 
 /* Für die .Menu-list-card Elemente */
-.Menu-list-card {
+.menu__card_container {
     display: inline-block;
     vertical-align: top; /* Um sicherzustellen, dass die Karten oben ausgerichtet sind */
     margin: 3px 3px;
     padding: 0 3px;
-    background-color: #eee;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
     width: max-content;
 }
 
-.dark .Menu-list-card,
-.blue .Menu-list-card {
-    background-color: #333;
-    color: #ddd;
-}
-
-.Action-list li,
-.Menu-list-card li {
+.menu__action_list li,
+.menu__card_container li {
     list-style-type: none;
     font-size: 0.7rem;
     line-height: 0.75rem;
 }
 
 /* Für die <p> und <ul> Elemente innerhalb der .Menu-list-card */
-.Menu-list-card > p,
-.Menu-list-card > ul {
+.menu__card_container > p,
+.menu__card_container > ul {
     display: block;
 }
 
-.Menu-list-card ul {
+.menu__card_container ul {
     padding-left: 20px;
 }
 
-.Menu-list {
-    margin: 2px 0 0 0;
-    font-weight: 500;
-    border-bottom: 1px solid currentColor;
+.trigger__overview_user-list {
+    background-color: var(--background-primary);
 }
 
-.User-list-container {
-    background-color: #ddd;
-}
 
-.dark .User-list-container,
-.blue .User-list-container {
-    background-color: #aaa;
-}
-
-.User-list-container p {
+.trigger__overview_user-list p {
     margin-top: 4px;
     margin-bottom: 0;
     padding: 0 5px;
-    color: black;
+    color: var(--dark);
 }
 
-.User-list ~ p {
+.trigger__overview_user ~ p {
     font-size: 0.75rem;
     padding-bottom: 2px;
     font-weight: 500;
@@ -758,101 +454,48 @@ span[title],
     margin-top: 0;
 }
 
-.createdTrigger li {
+.list__created-trigger li {
     padding-left: 5px;
 }
 
-.menu-startside {
-    background-color: #96d15a;
-    color: black;
-}
-
-.menu-disabled {
-    background-color: rgb(242, 101, 101);
-    color: black;
+.trigger__overview_menu-startside {
+    background-color: var(--success);
+    color: var(--dark);
 }
 
-.Menu-list-container ul li ul li {
+.trigger__overview_wrapper ul li ul li {
     font-size: 0.75rem;
     line-height: 0.75rem;
 }
 
-.strong {
-    margin-top: 5px;
-    font-weight: 500;
-    text-decoration: underline;
-}
-
-.squareText {
-    font-size: 0.7rem;
-    cursor: default;
-}
-
-.noMargin {
-    margin: 0;
-    padding-left: 5px;
-}
-
-.textRight {
-    padding: 0 5px 0 5px;
-    margin: 3px 3px 0 0;
-}
-
-.inlineBlock {
-    display: inline-block;
-    flex-grow: 1;
-}
-
-.active {
-    background-color: #b5fb6f;
-}
-
-.inactive {
-    background-color: #ff0033;
-}
-
-.menuDescription {
+.trigger__overview_menu-description {
     margin: 2px 0 4px 0;
     text-decoration: underline;
     font-size: 0.8rem;
     font-weight: 500;
 }
 
-#ar_dialog_selectid_title ~ div.MuiDialogContent-root {
-    overflow: auto !important;
-}
-
-.breakingChange {
-    color: red;
-    font-weight: 500;
-}
-
-.PopupContainer__copy .DialogContainer {
-    width: 100% !important;
-    height: 100% !important;
-    top: 52rem !important;
-    margin-left: 0.9rem;
-    cursor: default;
-}
-
 .editor__modal_container {
     margin-top: 4rem;
     margin-left: 2rem;
     margin-right: 2rem;
 }
 
-.header__actions {
+.header__menu_buttons {
+    margin: 0.5rem 0.5rem 0 0.5rem;
     display: flex;
-    gap: 0.25rem;
+    gap: 0.5rem;
     flex-wrap: wrap;
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
 }
 
-.row__container:has(.row__button) {
+.header__menu_buttons input {
+    height: calc(30px - 1rem);
+}
+
+.table__row_container:has(.row__button) {
     margin: 0.5rem 0 0.5rem 0;
-    border: 1px solid black;
-    background: #84b9ec !important;
+    border: 1px solid var(--border-row-container);
+    background: var(--row-container);
 }
 
 .nav__row {
@@ -867,33 +510,75 @@ span[title],
     margin: 1px 0.1rem 1px 0.1rem !important;
     padding: 0.1rem 0.5rem;
     font-size: 0.7rem !important;
-    border: 2px solid #aaa;
+    border: 2px solid var(--border-row-buttons) !important;
     border-radius: 5px;
     display: inline-block !important;
     flex: 1;
     text-align: center;
-    background: #f1e4b0;
+    background: var(--row-button) !important;
+    color: var(--row-button-text)
 }
 
-.dark .row__button {
-    background: #777;
-    color: white;
+.row__button:hover {
+    opacity: 0.8;
 }
 
 .row__submenu {
-    background: peachpuff !important;
+    background: var(--menu-function-row) !important;
+    color: var(--dark)
 }
 
-.dark .row__submenu {
-    color: black
+.disabled {
+    pointer-events: none;
+    opacity: 0.4;
 }
 
-.nav__trigger_list {
-    margin: 1rem 0 1rem 0;
-    display: flex;
-    justify-content: start;
+.strong {
+    margin-top: 5px;
+    font-weight: 500;
+    text-decoration: underline;
+}
+
+.squareText {
+    font-size: 0.7rem;
+    cursor: default;
 }
 
-.row__active {
-    background: #ffb8b1 !important;
+.noMargin {
+    margin: 0;
+    padding-left: 5px;
+}
+
+.textRight {
+    padding: 0 5px 0 5px;
+    margin: 3px 3px 0 0;
+}
+
+.inlineBlock {
+    display: inline-block;
+    flex-grow: 1;
+}
+
+.active {
+    background-color: var(--success);
+}
+
+.inactive {
+    background-color: var(--destructive);
+}
+
+
+#ar_dialog_selectid_title ~ div.MuiDialogContent-root {
+    overflow: auto !important;
+}
+
+.MuiTabs-root div.MuiTabs-fixed {
+    background-color: var(--background-primary);
+    width: 100%;
+    z-index: 100;
+}
+
+span[title],
+.title {
+    cursor: help;
 }