graphdb-workbench 2.4.0-TR1 → 2.4.0-TR2

package/dist/css/bootstrap-graphdb-theme.css

@@ -4,9 +4,9 @@
 	Colors used in multiple places
 -------------------------------------------------------------*/
 :root {
-    --autocomplete-background: rgba(var(--onto-green-rgb), 0.3);
-    --autocomplete-background-selected: rgba(var(--onto-green-rgb), 0.5);
-    --autocomplete-match: var(--onto-blue);
+    --autocomplete-background: hsla(var(--tertiary-color-hsl), 0.3);
+    --autocomplete-background-selected: hsla(var(--tertiary-color-hsl), 0.5);
+    --autocomplete-match: var(--secondary-color);
 }
 
 /*-------------------------------------------------------------
@@ -481,11 +481,16 @@ select {
 }
 
 a {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
+}
+
+/* Actual links that lead to an external site */
+a[href^="http"] {
+    text-decoration: underline;
 }
 
 a:focus, a:hover {
-    color: var(--onto-blue-light);
+    color: var(--secondary-color-light);
 }
 
 .font-weight-bold {
@@ -509,7 +514,7 @@ a:focus, a:hover {
 }
 
 .text-muted {
-    color: rgba(0, 0, 0, 0.3) !important
+    color: rgba(0, 0, 0, 0.66) !important
 }
 
 .pos-r {
@@ -600,7 +605,7 @@ main menu height*/
 }
 
 .main-menu li a {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     text-decoration: none;
 }
 
@@ -634,7 +639,7 @@ main menu height*/
     -o-transition: all 0.18s ease-out; /* Opera 10.5+ */
     -webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
     transition: all 0.18s ease-out;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     cursor: pointer;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -644,7 +649,7 @@ main menu height*/
 .main-menu .menu-item-icon {
     font-size: 2.5rem;
     vertical-align: middle;
-    color: var(--onto-orange);
+    color: var(--primary-color);
     transform: scale(0.9);
     display: inline-block;
     -moz-transition: all 0.18s ease-out; /* FF4+ */
@@ -660,12 +665,12 @@ main menu height*/
 
 .main-menu .menu-element-root.active,
 .main-menu .menu-element-root.active:hover {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
     color: #fff;
 }
 
 .main-menu .active .menu-item-icon {
-    color: var(--onto-blue);
+    color: var(--icon-on-primary-color);
 }
 
 .main-menu :not(.brand) .menu-element-root {
@@ -673,7 +678,7 @@ main menu height*/
 }
 
 .main-menu .brand {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .main-menu .brand a {
@@ -722,7 +727,7 @@ main menu height*/
 }
 
 .main-menu .sub-menu li.active a {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
     font-weight: 500;
     color: #fff;
 }
@@ -775,7 +780,7 @@ main menu height*/
 }
 
 .toggle-menu:hover {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
 }
 
 .toggle-menu [class^="icon-"] {
@@ -844,7 +849,7 @@ main menu height*/
     text-overflow: ellipsis;
     overflow: hidden;
     padding: 0.5em 0.8rem 0.2em 0;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     margin-left: 0.8rem;
     margin-bottom: 0.5em;
 }
@@ -897,21 +902,21 @@ main menu height*/
 }
 
 .btn-primary {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .btn-primary.active, .btn-primary.focus, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active.focus,
 .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover,
 .btn-primary.disabled:hover, .btn-primary:disabled:hover {
-    background-color: var(--onto-orange-dark);
-    border-color: var(--onto-orange-dark);
+    background-color: var(--primary-color-dark);
+    border-color: var(--primary-color-dark);
 }
 
 .btn-secondary {
     background-color: #EBEBEB;
     border-color: #EBEBEB;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
 }
 
 .btn-secondary.focus,
@@ -923,55 +928,55 @@ main menu height*/
 }
 
 .btn-secondary.active, .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
     color: #fff;
 }
 
 .btn-info {
-    background-color: var(--onto-blue);
-    border-color: var(--onto-blue);
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
 }
 
 .btn-info.active, .btn-info.focus, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active.focus,
 .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover,
 .btn-info.disabled:hover, .btn-info:disabled:hover {
-    background-color: var(--onto-blue-light);
-    border-color: var(--onto-blue-light);
+    background-color: var(--secondary-color-light);
+    border-color: var(--secondary-color-light);
 }
 
 /* outline buttons */
 .btn-outline-primary {
-    color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .btn-outline-primary:hover,
 .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active, .open > .btn-outline-primary.dropdown-toggle,
 .btn-outline-primary.active.focus, .btn-outline-primary.active:focus, .btn-outline-primary.active:hover, .btn-outline-primary:active.focus, .btn-outline-primary:active:focus, .btn-outline-primary:active:hover, .open > .btn-outline-primary.dropdown-toggle.focus, .open > .btn-outline-primary.dropdown-toggle:focus, .open > .btn-outline-primary.dropdown-toggle:hover {
-    color: var(--onto-orange);
-    background-color: rgba(var(--onto-orange-rgb), 0.2);
-    border-color: var(--onto-orange);
+    color: var(--primary-color);
+    background-color: hsla(var(--primary-color-hsl), 0.075);
+    border-color: var(--primary-color);
 }
 
 .btn-outline-secondary {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     background-image: none;
     background-color: transparent;
-    border-color: rgba(var(--onto-blue-rgb), 0.5);
+    border-color: hsla(var(--secondary-color-hsl), 0.5);
 }
 
 .btn-outline-secondary:hover,
 .btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary.active, .btn-outline-secondary:active,
 .btn-outline-secondary.active.focus, .btn-outline-secondary.active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary:active:focus, .btn-outline-secondary:active:hover, .open > .btn-outline-secondary.dropdown-toggle.focus, .open > .btn-outline-secondary.dropdown-toggle:focus, .open > .btn-outline-secondary.dropdown-toggle:hover {
-    color: var(--onto-blue);
-    background-color: rgba(var(--onto-blue-rgb), 0.2);
-    border-color: var(--onto-blue);
+    color: var(--secondary-color);
+    background-color: hsla(var(--secondary-color-hsl), 0.2);
+    border-color: var(--secondary-color);
 }
 
 .btn-outline-secondary.active:hover {
-    background-color: rgba(var(--onto-blue-rgb), 0.2);
-    border-color: var(--onto-blue);
+    background-color: hsla(var(--secondary-color-hsl), 0.2);
+    border-color: var(--secondary-color);
 }
 
 .btn-group-lg > .btn, .btn-lg {
@@ -980,22 +985,22 @@ main menu height*/
 }
 
 .btn-link, .btn-link a {
-    color: var(--onto-orange);
+    color: var(--primary-color);
     padding: .5em .8em;
+    text-decoration: underline;
+    text-decoration-style: dotted !important;
 }
 
 .btn-link.secondary {
-    color: rgba(0, 0, 0, .3);
+    color: rgba(0, 0, 0, .66);
 }
 
 .btn-link:focus, .btn-link:hover, .btn-link.secondary:hover {
-    color: var(--onto-orange-dark);
-    text-decoration: none;
+    color: var(--primary-color-dark);
 }
 
 .btn-link.disabled:focus, .btn-link.disabled:hover, .btn-link.disabled.secondary:hover {
     color: rgba(0, 0, 0, .3);
-    text-decoration: none;
 }
 
 .btn-link.btn-sm {
@@ -1003,7 +1008,7 @@ main menu height*/
 }
 
 .btn-link.active, .btn-link:hover.active, .btn-link:focus.active, .btn-link:active.active {
-    background-color: var(--onto-orange-dark);
+    background-color: var(--primary-color-dark);
     color: #fff;
 }
 
@@ -1131,16 +1136,16 @@ footer.footer .container-fluid.main-container p {
 .open > .btn-secondary.dropdown-toggle:focus,
 .open > .btn-secondary.dropdown-toggle:hover {
     color: #fff;
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .open > .btn-secondary.dropdown-toggle [class^="icon-"] {
-    color: var(--onto-blue) !important;
+    color: var(--icon-on-primary-color) !important;
 }
 
 .btn-secondary.dropdown-toggle [class^="icon-"] {
-    color: var(--onto-orange);
+    color: var(--primary-color);
 }
 
 .dropdown-toggle {
@@ -1168,7 +1173,7 @@ footer.footer .container-fluid.main-container p {
 
 .dropdown-menu {
     border: none;
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
     border-radius: 0;
     padding: 0;
     min-width: 100%;
@@ -1225,19 +1230,19 @@ footer.footer .container-fluid.main-container p {
 }
 
 .text-primary {
-    color: var(--onto-orange) !important;
+    color: var(--primary-color) !important;
 }
 
 .text-secondary {
-    color: var(--onto-blue) !important;
+    color: var(--secondary-color) !important;
 }
 
 .text-tertiary {
-    color: var(--onto-green) !important;
+    color: var(--tertiary-color-dark) !important;
 }
 
 .text-info {
-    color: var(--onto-green) !important;
+    color: var(--tertiary-color) !important;
 }
 
 .rdf-list .hidden-data-value {
@@ -1255,27 +1260,27 @@ footer.footer .container-fluid.main-container p {
 }
 
 .alert-warning, .alert-info, .alert-help, .alert-danger, .alert-success {
-    color: #000000A8;
+    color: #000000AF;
 }
 
 .alert-warning {
-    background-color: #f9e6c0;
+    background-color: rgba(252, 248, 227, 0.7);
 }
 
 .alert-info {
-    background-color: #cfefec;
+    background-color: rgba(203, 238, 234, 0.7);
 }
 
 .alert-help {
-    background-color: #e7f7f5;
+    background-color: #e8f5fe;
 }
 
 .alert-success {
-    background-color: #dff0d8;
+    background-color: rgba(219, 252, 202, 0.7);
 }
 
 .alert-danger {
-    background-color: #fbdbd5;
+    background-color: rgba(242, 222, 222, 0.7);
 }
 
 .alert-info, .alert-warning, .alert-help, .alert-danger, .alert-success {
@@ -1288,13 +1293,13 @@ footer.footer .container-fluid.main-container p {
 .alert-danger:before,
 .alert-success:before {
     font-family: 'icomoon', sans-serif !important;
-    font-size: 1.6em;
+    font-size: 1.5em;
     vertical-align: middle;
     line-height: 1;
     position: absolute;
     left: 0.6em;
     top: 0.6em;
-    color: #00000080;
+    color: #0000008F;
 }
 
 .alert-info:before {
@@ -1359,7 +1364,7 @@ footer.footer .container-fluid.main-container p {
 .nav-tabs .nav-link {
     border-radius: 0;
     cursor: pointer;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     background-color: #eee;
 }
 
@@ -1417,7 +1422,7 @@ ul[class*="style-"] li:before {
     left: 0;
     top: -0.07em;
     font-size: 1.2em;
-    color: var(--onto-green);
+    color: var(--tertiary-color);
 }
 
 .text-white ul[class*="style-"] li:before {
@@ -1504,7 +1509,7 @@ ul.style-arrow li:before {
 .progress-bar {
     height: 2rem;
     color: #000;
-    background-color: rgba(var(--onto-green-rgb), 0.5);
+    background-color: hsla(var(--tertiary-color-hsl), 0.5);
     padding: 0 0.2em;
     text-align: center;
 }
@@ -1523,7 +1528,7 @@ ul.style-arrow li:before {
 .progress-square .progress-bar {
     width: 100%;
     display: block;
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
 }
@@ -1536,16 +1541,16 @@ ul.style-arrow li:before {
 	Background colors
 -------------------------------------------------------------*/
 .bg-primary {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
 }
 
 .bg-secondary {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     color: #fff;
 }
 
 .bg-ternary {
-    background-color: var(--onto-green);
+    background-color: var(--tertiary-color);
 }
 
 .bg-lightgray {
@@ -1610,7 +1615,7 @@ code {
 
 .close:hover::before {
     transform: scale(1.2);
-    color: var(--onto-orange);
+    color: var(--primary-color);
 }
 
 .close.absolute {
@@ -1633,7 +1638,7 @@ code {
 }
 
 .data-value {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     font-weight: 400;
 }
 
@@ -1664,7 +1669,7 @@ code {
 }
 
 .tag-primary {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .tag-inverse {
@@ -1744,7 +1749,7 @@ code {
 }
 
 .card.button:hover {
-    border-color: rgba(var(--onto-orange-rgb), 0.4)
+    border-color: hsla(var(--primary-color-hsl), 0.4)
 }
 
 .card.button .card-block {
@@ -1765,7 +1770,7 @@ code {
 }
 
 .card.button .btn:hover {
-    background-color: rgba(var(--onto-orange-rgb), 0.1)
+    background-color: hsla(var(--primary-color-hsl), 0.1)
 }
 
 .card.button .btn [class^="icon-"] {
@@ -1775,14 +1780,14 @@ code {
 }
 
 .card.active {
-    border-color: var(--onto-blue);
+    border-color: var(--secondary-color);
     min-height: 300px;
 }
 
 .card.active .card-footer {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     color: #fff;
-    border-color: var(--onto-blue);
+    border-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -1952,63 +1957,67 @@ code {
 	Tooltips
 -------------------------------------------------------------*/
 .angular-tooltip {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top-left:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top-right:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 
 .angular-tooltip.angular-tooltip-right-top:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-right:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-right-bottom:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom-left:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom-right:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left:after {
-    border-left-color: var(--onto-blue);
+    border-left-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left-bottom:after {
-    border-left-color: var(--onto-blue);
+    border-left-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left-top:after {
-    border-left-color: var(--onto-blue);
+    border-left-color: var(--secondary-color);
 }
 
 /*-------------------------------------------------------------
 	List groups
 -------------------------------------------------------------*/
+.list-group-item-action {
+    color: var(--secondary-color) !important;
+}
+
 .list-group-item-action:focus, .list-group-item-action:hover {
-    background-color: rgba(var(--onto-orange-rgb), 0.1);
+    background-color: hsla(var(--primary-color-hsl), 0.1);
 }
 
 .list-group-item pre {
@@ -2019,7 +2028,7 @@ code {
     float: right;
     margin-top: 0.7em;
     font-weight: 400;
-    color: var(--onto-orange);
+    color: var(--primary-color);
     cursor: pointer;
     display: none;
 }
@@ -2093,7 +2102,7 @@ li.remote {
 }
 
 .form-control:focus {
-    border-color: rgba(var(--onto-blue-rgb), 0.5);
+    border-color: hsla(var(--secondary-color-hsl), 0.5);
 }
 
 .input-group-btn {
@@ -2216,12 +2225,12 @@ input.switch:empty ~ label:after {
 }
 
 input.switch:checked ~ label:before {
-    background-color: rgba(var(--onto-blue-rgb), .5)
+    background-color: hsla(var(--secondary-color-hsl), .5)
 }
 
 input.switch:checked ~ label:after {
     left: 1.3em;
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .card.active input.switch:checked ~ label:before {
@@ -2261,6 +2270,68 @@ input.switch:checked ~ label:after {
     background-image: none !important;
 }
 
+#toast-container .toast {
+    font-size: 1.2rem;
+    opacity: 1;
+    padding: 25px 25px 25px 60px;
+    width: 450px;
+}
+
+@media (max-width: 1439px) {
+    #toast-container .toast {
+        width: 400px;
+    }
+}
+
+.toast-error {
+    background-color: var(--color-danger-dark);
+}
+
+.toast-warning {
+    background-color: var(--color-warning-dark);
+}
+
+.toast-info {
+    background-color: var(--color-info-dark);
+}
+
+.toast-success {
+    background-color: var(--color-success-dark);
+}
+
+.toast-error:before,
+.toast-warning:before,
+.toast-info:before,
+.toast-success:before {
+    font-family: 'icomoon', sans-serif !important;
+    font-size: 1.5em;
+    position: absolute;
+    left: 0.6em;
+    display: block;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.toast-info:before {
+    content: "\e924";
+}
+
+.toast-warning:before {
+    content: "\e930";
+}
+
+.toast-error:before {
+    content: "\e920";
+}
+
+.toast-success:before {
+    content: "\e914";
+}
+
+
 #toast-container > .toast-error:before,
 #toast-container > .toast-warning:before {
     content: "\e920";
@@ -2397,8 +2468,8 @@ ul.nav.navbar-right.pagination li.disabled a {
 }
 
 #yasr ul.nav.navbar-right.pagination li.active {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 #yasr ul.nav.navbar-right.pagination li.active a {
@@ -2438,6 +2509,66 @@ ul.nav.navbar-right.pagination li.disabled a {
 	SPARQL editor
 -------------------------------------------------------------*/
 
+yasgui-component .yasgui-btn.btn-selected {
+    background-color: var(--primary-color) !important;
+}
+
+yasgui-component .btn-orientation {
+    color: var(--primary-color) !important;
+}
+
+yasgui-component .custom-button {
+    color: var(--primary-color) !important;
+}
+
+yasgui-component .yasqe_queryButton {
+    background-color: var(--primary-color) !important;
+}
+
+yasgui-component .ontotext-dropdown-button,
+yasgui-component .ontotext-dropdown-menu-item {
+    background-color: var(--primary-color) !important;
+}
+yasgui-component .ontotext-dropdown-button.icon-caret-down-after:after,
+yasgui-component .ontotext-dropdown-button.icon-caret-up-after:after {
+    color: #fff !important;
+}
+
+yasgui-component .ok-button,
+yasgui-component .primary-button,
+yasgui-component .confirm-button {
+    background-color: var(--primary-color) !important;
+}
+
+yasgui-component .yasr a,
+yasgui-component .yasr .overlay_content .yasr_btn,
+yasgui-component .yasr .yasr_btn.selected {
+    color: var(--secondary-color-light) !important;
+}
+
+yasgui-component .tabsList a {
+    color: var(--gray-color) !important;
+}
+
+yasgui-component .tabsList .closeTab {
+    color: var(--gray-color) !important;
+    opacity: .8 !important;
+}
+
+yasgui-component .yasr_response_chip,
+yasgui-component .yasr_plugin_control label {
+    color: var(--gray-color) !important;
+}
+
+yasgui-component .CodeMirror-gutter-elt {
+    color: var(--gray-color) !important;
+}
+
+.dialog .dialog-footer .confirm-button {
+    background-color: var(--primary-color) !important;
+}
+
+
 .yasqe .CodeMirror {
     min-height: 330px;
 }
@@ -2598,8 +2729,8 @@ input[name=namespace] {
     border-radius: .25rem;
 }
 .badge-default  { background-color: #aaa }
-.badge-primary  { background-color: var(--onto-blue) }
-.badge-info     { background-color: var(--onto-orange) }
+.badge-primary  { background-color: var(--secondary-color) }
+.badge-info     { background-color: var(--primary-color) }
 .badge-success  { background-color: #5cb85c }
 .badge-warning  { background-color: #f0ad4e }
 
@@ -2670,3 +2801,43 @@ input[name=namespace] {
 .repo-info-home div {
     align-self: center;
 }
+
+.text-danger {
+    color: var(--color-danger-dark) !important;
+}
+
+.text-success {
+    color: var(--color-success-dark) !important;
+}
+
+.text-warning {
+    color: var(--color-warning-dark) !important;
+}
+
+.text-info {
+    color: var(--color-info-dark) !important;
+}
+
+.tag-danger {
+    background-color: var(--color-danger-dark) !important;
+}
+
+.tag-success {
+    background-color: var(--color-success-dark) !important;
+}
+
+.tag-warning {
+    background-color: var(--color-warning-dark) !important;
+}
+
+.tag-info {
+    background-color: var(--color-info-dark) !important;
+}
+
+.rzslider .rz-pointer {
+    background-color: var(--secondary-color) !important;
+}
+
+.rzslider .rz-selection {
+    background: var(--secondary-color) !important;
+}