@clayui/css 3.54.0 → 3.57.0

package/lib/css/base.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.37.0
+ * Clay 3.57.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -479,7 +479,7 @@ mark:before,
 }
 
 .c-kbd > .c-kbd {
-  border-width: 0;
+  border-width: 0px;
   font-size: inherit;
   font-weight: inherit;
   height: auto;
@@ -511,7 +511,7 @@ mark:before,
 }
 
 .c-kbd-inline {
-  border-width: 0;
+  border-width: 0px;
   font-weight: 300;
   height: auto;
   line-height: inherit;
@@ -1356,7 +1356,6 @@ input[type=button].btn-block {
 .btn-primary:focus, .focus.btn-primary {
   background-color: #0069d9;
   border-color: #0062cc;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   color: #fff;
 }
 .btn-primary:active {
@@ -1364,9 +1363,6 @@ input[type=button].btn-block {
   border-color: #005cbf;
   color: #fff;
 }
-.btn-primary:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-}
 .active.btn-primary {
   background-color: #0062cc;
   border-color: #005cbf;
@@ -1385,7 +1381,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-primary {
   background-color: #0069d9;
   border-color: #0062cc;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   color: #fff;
 }
 .btn-secondary {
@@ -1401,7 +1396,6 @@ input[type=button].btn-block {
 .btn-secondary:focus, .focus.btn-secondary {
   background-color: #5a6268;
   border-color: #545b62;
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
   color: #fff;
 }
 .btn-secondary:active {
@@ -1409,9 +1403,6 @@ input[type=button].btn-block {
   border-color: #4e555b;
   color: #fff;
 }
-.btn-secondary:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
-}
 .active.btn-secondary {
   background-color: #545b62;
   border-color: #4e555b;
@@ -1430,7 +1421,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-secondary {
   background-color: #5a6268;
   border-color: #545b62;
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
   color: #fff;
 }
 .btn-success {
@@ -1446,7 +1436,6 @@ input[type=button].btn-block {
 .btn-success:focus, .focus.btn-success {
   background-color: #218838;
   border-color: #1e7e34;
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
   color: #fff;
 }
 .btn-success:active {
@@ -1454,9 +1443,6 @@ input[type=button].btn-block {
   border-color: #1c7430;
   color: #fff;
 }
-.btn-success:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
-}
 .active.btn-success {
   background-color: #1e7e34;
   border-color: #1c7430;
@@ -1475,7 +1461,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-success {
   background-color: #218838;
   border-color: #1e7e34;
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
   color: #fff;
 }
 .btn-info {
@@ -1491,7 +1476,6 @@ input[type=button].btn-block {
 .btn-info:focus, .focus.btn-info {
   background-color: #138496;
   border-color: #117a8b;
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
   color: #fff;
 }
 .btn-info:active {
@@ -1499,9 +1483,6 @@ input[type=button].btn-block {
   border-color: #10707f;
   color: #fff;
 }
-.btn-info:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
-}
 .active.btn-info {
   background-color: #117a8b;
   border-color: #10707f;
@@ -1530,7 +1511,6 @@ input[type=button].btn-block {
 .btn-warning:focus, .focus.btn-warning {
   background-color: #e0a800;
   border-color: #d39e00;
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
   color: #212529;
 }
 .btn-warning:active {
@@ -1538,9 +1518,6 @@ input[type=button].btn-block {
   border-color: #c69500;
   color: #212529;
 }
-.btn-warning:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
-}
 .active.btn-warning {
   background-color: #d39e00;
   border-color: #c69500;
@@ -1559,7 +1536,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-warning {
   background-color: #e0a800;
   border-color: #d39e00;
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
   color: #212529;
 }
 .btn-danger {
@@ -1575,7 +1551,6 @@ input[type=button].btn-block {
 .btn-danger:focus, .focus.btn-danger {
   background-color: #c82333;
   border-color: #bd2130;
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
   color: #fff;
 }
 .btn-danger:active {
@@ -1583,9 +1558,6 @@ input[type=button].btn-block {
   border-color: #b21f2d;
   color: #fff;
 }
-.btn-danger:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
-}
 .active.btn-danger {
   background-color: #bd2130;
   border-color: #b21f2d;
@@ -1604,7 +1576,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-danger {
   background-color: #c82333;
   border-color: #bd2130;
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
   color: #fff;
 }
 .btn-light {
@@ -1620,7 +1591,6 @@ input[type=button].btn-block {
 .btn-light:focus, .focus.btn-light {
   background-color: #e2e6ea;
   border-color: #dae0e5;
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
   color: #212529;
 }
 .btn-light:active {
@@ -1628,9 +1598,6 @@ input[type=button].btn-block {
   border-color: #d3d9df;
   color: #212529;
 }
-.btn-light:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
-}
 .active.btn-light {
   background-color: #dae0e5;
   border-color: #d3d9df;
@@ -1649,7 +1616,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-light {
   background-color: #e2e6ea;
   border-color: #dae0e5;
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
   color: #212529;
 }
 .btn-dark {
@@ -1665,7 +1631,6 @@ input[type=button].btn-block {
 .btn-dark:focus, .focus.btn-dark {
   background-color: #23272b;
   border-color: #1d2124;
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
   color: #fff;
 }
 .btn-dark:active {
@@ -1673,9 +1638,6 @@ input[type=button].btn-block {
   border-color: #171a1d;
   color: #fff;
 }
-.btn-dark:active:focus {
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
-}
 .active.btn-dark {
   background-color: #1d2124;
   border-color: #171a1d;
@@ -1694,7 +1656,6 @@ input[type=button].btn-block {
 .form-file-input:focus + .btn-dark {
   background-color: #23272b;
   border-color: #1d2124;
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
   color: #fff;
 }
 .btn-link {
@@ -1736,6 +1697,9 @@ input[type=button].btn-block {
   border-color: #007bff;
   color: #fff;
 }
+.btn-outline-primary:active:focus {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
 .active.btn-outline-primary {
   background-color: #007bff;
   border-color: #007bff;
@@ -4154,13 +4118,6 @@ input[type=button].btn-block {
   color: #0056b3;
   text-decoration: underline;
 }
-.breadcrumb-link > .breadcrumb-text-truncate {
-  text-decoration: none;
-}
-.breadcrumb-link > .breadcrumb-text-truncate:hover, .breadcrumb-link > .breadcrumb-text-truncate:focus {
-  text-decoration: underline;
-}
-
 .breadcrumb-item {
   margin-right: 0.5em;
   position: relative;
@@ -4169,6 +4126,9 @@ input[type=button].btn-block {
 .breadcrumb-item .active {
   color: #6c757d;
 }
+.breadcrumb-item > span {
+  text-transform: inherit;
+}
 .breadcrumb-item + .breadcrumb-item {
   padding-left: 1em;
 }
@@ -4182,9 +4142,7 @@ input[type=button].btn-block {
   content: "";
   height: 0.75em;
   left: 0;
-  margin-top: calc(
-					-0.75em / 2
-				);
+  margin-top: calc(-0.75em / 2);
   padding: 0;
   position: absolute;
   top: 50%;
@@ -4199,17 +4157,20 @@ input[type=button].btn-block {
 .breadcrumb-item .dropdown-toggle {
   text-decoration: none;
 }
-.breadcrumb-item .dropdown-toggle:hover, .breadcrumb-item .dropdown-toggle:focus {
+.breadcrumb-item .dropdown-toggle:hover {
+  text-decoration: none;
+}
+.breadcrumb-item .dropdown-toggle:focus, .breadcrumb-item .dropdown-toggle.focus {
   text-decoration: none;
 }
-
 .breadcrumb-text-truncate {
   display: inline-block;
   max-width: 17.875rem;
   overflow: hidden;
+  text-decoration: inherit;
   text-overflow: ellipsis;
-  white-space: nowrap;
   vertical-align: bottom;
+  white-space: nowrap;
 }
 
 .btn-group,
@@ -5442,49 +5403,49 @@ input[type=button].btn-block {
 .rounded-0 .card-header,
 .rounded-0 .card-item-first {
   border-top-left-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
   border-top-right-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
 }
 .rounded-0 .card-footer,
 .rounded-0 .card-item-last {
   border-bottom-left-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
   border-bottom-right-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
 }
 .rounded-0 .autofit-col:first-child {
   border-bottom-left-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
   border-top-left-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
 }
 .rounded-0 .autofit-col:first-child .card-item-first {
   border-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 ) 0 0 calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
 }
 .rounded-0 .autofit-col:last-child {
   border-bottom-right-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
   border-top-right-radius: calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 );
 }
 .rounded-0 .autofit-col:last-child .card-item-last {
   border-radius: 0 calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 ) calc(
-	0 - 0.0625rem
+	0px - 0.0625rem
 ) 0;
 }
 
@@ -6109,7 +6070,7 @@ input[type=button].btn-block {
   color: #212529;
 }
 .card-type-template .aspect-ratio {
-  border-width: 0;
+  border-width: 0px;
   color: #6c757d;
   text-align: center;
   padding-bottom: calc(9 / 16 * 100%);
@@ -6207,8 +6168,8 @@ input[type=button].btn-block {
 
 .dropdown-item {
   background-color: transparent;
-  border-radius: 0;
-  border-width: 0;
+  border-radius: 0px;
+  border-width: 0px;
   clear: both;
   color: #212529;
   cursor: pointer;
@@ -7246,7 +7207,7 @@ div.form-control-sm {
 }
 .form-control-inset {
   background-color: transparent;
-  border-width: 0;
+  border-width: 0px;
   color: #495057;
   flex-grow: 1;
   margin-bottom: 0.125rem;
@@ -7861,7 +7822,7 @@ button.link-outline {
   background-color: transparent;
   border-color: transparent;
   border-radius: 0.25rem;
-  border-width: 0;
+  border-width: 0px;
   color: #6c757d;
   display: inline-flex;
   height: 1.9375rem;
@@ -7931,7 +7892,7 @@ button.link-outline {
   flex-direction: column;
 }
 .clay-range .input-group-text {
-  border-width: 0;
+  border-width: 0px;
   color: #212529;
   font-size: 0.875rem;
   font-weight: 500;
@@ -7968,11 +7929,16 @@ button.link-outline {
   width: 100%;
 }
 .clay-range-input .tooltip {
-  margin-left: 0.75rem;
+  margin-left: 0.8125rem;
   transition: opacity 0.15s linear;
   visibility: hidden;
   white-space: nowrap;
 }
+@media (prefers-reduced-motion: reduce) {
+  .clay-range-input .tooltip {
+    transition: none;
+  }
+}
 .clay-range-input .tooltip-inner {
   padding: 0.25rem 0.5rem;
 }
@@ -7987,7 +7953,7 @@ button.link-outline {
   transform: translateX(-50%);
 }
 .clay-range-input .clay-tooltip-bottom .tooltip-arrow {
-  margin-left: -0.1875rem;
+  margin-left: -0.25rem;
 }
 .clay-range-input .clay-tooltip-top {
   bottom: 100%;
@@ -7996,9 +7962,12 @@ button.link-outline {
   transform: translateX(-50%);
 }
 .clay-range-input .clay-tooltip-top .tooltip-arrow {
-  margin-left: -0.1875rem;
+  margin-left: -0.25rem;
 }
 .clay-range-input .clay-range-track {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
   background-color: #dee2e6;
   border-radius: 100px;
   height: 0.25rem;
@@ -8007,19 +7976,22 @@ button.link-outline {
   top: 50%;
   width: 100%;
 }
+.clay-range-input .clay-range-track::-ms-expand {
+  display: none;
+}
 .clay-range-input .clay-range-progress {
   background-color: #007bff;
   border-radius: 100px 0 0 100px;
-  height: 0.25rem;
-  margin-top: -0.125rem;
   position: absolute;
   top: 50%;
   width: 50%;
+  height: 0.25rem;
+  margin-top: -0.125rem;
 }
 .clay-range-input .clay-range-thumb {
   background-color: #fff;
   border-radius: 100px;
-  border-width: 0;
+  border-width: 0px;
   box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3);
   height: 1.5rem;
   margin-top: -0.75rem;
@@ -8034,22 +8006,26 @@ button.link-outline {
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
-  content: "1.5rem";
   height: 2.375rem;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: 1;
+  content: "1.5rem";
+}
+.clay-range-input .form-control-range::-ms-expand {
+  display: none;
 }
 .clay-range-input .form-control-range::-moz-focus-outer {
   border-width: 0;
 }
 .clay-range-input .form-control-range::-moz-range-thumb {
   -moz-appearance: none;
+  -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
   border-radius: 100px;
-  border-width: 0;
+  border-width: 0px;
   box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3);
   height: 1.5rem;
   margin-top: -0.75rem;
@@ -8057,6 +8033,9 @@ button.link-outline {
   top: 50%;
   width: 1.5rem;
 }
+.clay-range-input .form-control-range::-moz-range-thumb::-ms-expand {
+  display: none;
+}
 .clay-range-input .form-control-range::-moz-range-track {
   -moz-appearance: none;
   appearance: none;
@@ -8069,13 +8048,12 @@ button.link-outline {
   background-color: transparent;
 }
 .clay-range-input .form-control-range::-ms-thumb {
+  -moz-appearance: none;
+  -webkit-appearance: none;
   appearance: none;
-  background-color: #fff;
-  border-radius: 100px;
-  border-width: 0;
-  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3);
-  height: 1.5rem;
-  width: 1.5rem;
+}
+.clay-range-input .form-control-range::-ms-thumb::-ms-expand {
+  display: none;
 }
 .clay-range-input .form-control-range::-ms-tooltip {
   display: none;
@@ -8094,11 +8072,12 @@ button.link-outline {
   height: 100%;
 }
 .clay-range-input .form-control-range::-webkit-slider-thumb {
+  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
   border-radius: 100px;
-  border-width: 0;
+  border-width: 0px;
   box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3);
   height: 1.5rem;
   margin-top: -0.75rem;
@@ -8106,6 +8085,9 @@ button.link-outline {
   top: 50%;
   width: 1.5rem;
 }
+.clay-range-input .form-control-range::-webkit-slider-thumb::-ms-expand {
+  display: none;
+}
 .clay-range-input .form-control-range:hover {
   cursor: pointer;
 }
@@ -8116,22 +8098,10 @@ button.link-outline {
 .clay-range-input .form-control-range:focus, .clay-range-input .form-control-range.focus {
   outline: 0;
 }
-.clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb, .clay-range-input .form-control-range.focus ~ .clay-range-progress .clay-range-thumb {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
 .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip, .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip {
   visibility: visible;
   opacity: 1;
 }
-.clay-range-input .form-control-range:focus::-moz-range-thumb, .clay-range-input .form-control-range.focus::-moz-range-thumb {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-.clay-range-input .form-control-range:focus::-ms-thumb, .clay-range-input .form-control-range.focus::-ms-thumb {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-.clay-range-input .form-control-range:focus::-webkit-slider-thumb, .clay-range-input .form-control-range.focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
 .clay-range-input .form-control-range:disabled {
   color: #6c757d;
   cursor: not-allowed;
@@ -9001,7 +8971,7 @@ label.custom-control-label {
 .clay-time-inner-spin .btn {
   align-items: center;
   border-radius: 8px;
-  border-width: 0;
+  border-width: 0px;
   display: inline-flex;
   font-size: 8px;
   height: auto;
@@ -9116,7 +9086,7 @@ label.custom-control-label {
 
 .date-picker-calendar-item {
   align-items: center;
-  border-width: 0;
+  border-width: 0px;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: 500;
@@ -10848,8 +10818,8 @@ label.custom-control-label {
 }
 .list-group-notification .list-group-item-primary {
   background-color: #fff;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: 0px;
+  border-top-left-radius: 0px;
   box-shadow: inset 0.5rem 0 #b8daff, inset -0.0625rem 0 rgba(0, 0, 0, 0.125), inset 0 0.0625rem rgba(0, 0, 0, 0.125), inset 0 -0.0625rem rgba(0, 0, 0, 0.125);
 }
 .list-group-notification .list-group-item-primary.active {
@@ -11522,7 +11492,7 @@ label.custom-control-label {
   align-items: center;
   background-color: #e9ecef;
   border-radius: 0.25rem;
-  border-width: 0;
+  border-width: 0px;
   color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   display: flex;
@@ -15876,7 +15846,7 @@ label.custom-control-label {
 .page-link {
   align-items: center;
   background-color: #fff;
-  border-radius: 0;
+  border-radius: 0px;
   border-color: #dee2e6;
   border-style: solid;
   border-width: 0.0625rem;
@@ -16434,13 +16404,13 @@ label.custom-control-label {
 }
 .panel-unstyled {
   background-color: transparent;
-  border-radius: 0;
-  border-width: 0;
+  border-radius: 0px;
+  border-width: 0px;
   margin-bottom: 1.5rem;
 }
 .panel-unstyled .panel-header {
   border-color: #adb5bd;
-  border-radius: 0;
+  border-radius: 0px;
   border-style: solid;
   border-width: 0 0 1px 0;
   padding-left: 0;
@@ -17140,7 +17110,7 @@ a.sheet-subtitle:hover {
 }
 
 .sheet-dataset-content .sheet-header {
-  border-width: 0;
+  border-width: 0px;
   margin: -1.5rem -1.5rem 1.5rem;
   padding: 1rem 1.5rem;
 }
@@ -17294,6 +17264,8 @@ a.sheet-subtitle:hover {
 .sidebar-header .component-title {
   font-size: 1.5rem;
   font-weight: 500;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 }
 .sidebar-header .component-title[href],
 .sidebar-header .component-title [href] {
@@ -17303,6 +17275,8 @@ a.sheet-subtitle:hover {
   font-size: 1.125rem;
   font-weight: 500;
   margin-bottom: 0;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 }
 .sidebar-body {
   overflow: auto;
@@ -17687,8 +17661,8 @@ caption {
 .table thead td,
 .table thead th {
   background-color: #fff;
-  border-bottom: 0.125rem solid #dee2e6;
-  border-top-width: 0;
+  border-bottom: calc(2 * 0.0625rem) solid #dee2e6;
+  border-top-width: 0px;
   vertical-align: bottom;
 }
 .table th {
@@ -17703,8 +17677,8 @@ caption {
 .table td {
   background-clip: padding-box;
   border-bottom-width: 0.0625rem;
-  border-left-width: 0;
-  border-right-width: 0;
+  border-left-width: 0px;
+  border-right-width: 0px;
   border-top-width: 0.0625rem;
   border-color: #dee2e6;
   border-style: solid;
@@ -17723,7 +17697,7 @@ caption {
   padding-right: 15px;
 }
 .table tbody + tbody {
-  border-top: 0.125rem solid #dee2e6;
+  border-top: calc(2 * 0.0625rem) solid #dee2e6;
 }
 .table caption {
   caption-side: top;
@@ -17760,8 +17734,7 @@ caption {
 }
 .table-bordered thead td,
 .table-bordered thead th {
-  border-bottom-width: 0.125rem;
-  border-top-width: 0.0625rem;
+  border-bottom-width: calc(2 * 0.0625rem);
 }
 .table-bordered td,
 .table-bordered th {
@@ -18915,8 +18888,8 @@ caption {
   padding-right: 0.25rem;
 }
 .subnav-tbar-primary .tbar-link-monospaced {
-  border-radius: 0;
-  border-width: 0;
+  border-radius: 0px;
+  border-width: 0px;
   height: 3rem;
   margin-bottom: -0.625rem;
   margin-top: -0.625rem;
@@ -19004,8 +18977,8 @@ caption {
 }
 .tbar-stacked .tbar-btn-monospaced {
   border-color: transparent;
-  border-radius: 0;
-  border-width: 0;
+  border-radius: 0px;
+  border-width: 0px;
   color: inherit;
   height: 2.5rem;
   margin-bottom: 0;
@@ -19019,10 +18992,10 @@ caption {
   width: 2.5rem;
 }
 .tbar-stacked .tbar-btn-monospaced:focus, .tbar-stacked .tbar-btn-monospaced.focus {
-  box-shadow: inset 0 0 0 0.125rem #75b8ff , inset 0 0 0 0.25rem #fff;
+  box-shadow: inset 0 0 0 0.125rem #75b8ff, inset 0 0 0 0.25rem #fff;
 }
 .tbar-stacked .tbar-btn-monospaced:active:focus {
-  box-shadow: inset 0 0 0 0.125rem #75b8ff , inset 0 0 0 0.25rem #fff;
+  box-shadow: inset 0 0 0 0.125rem #75b8ff, inset 0 0 0 0.25rem #fff;
 }
 .tbar-stacked .tbar-btn-monospaced .c-inner {
   margin-bottom: 0;
@@ -19035,7 +19008,7 @@ caption {
 }
 .tbar-light {
   background-color: #fff;
-  box-shadow: inset 1px 0 0 0 #e9ecef , inset -1px 0 0 0 #e9ecef;
+  box-shadow: inset 1px 0 0 0 #e9ecef, inset -1px 0 0 0 #e9ecef;
   color: #6c757d;
 }
 .tbar-light .tbar-divider-before::before {
@@ -19070,7 +19043,7 @@ caption {
 }
 .tbar-dark-l2 {
   background-color: #828e9a;
-  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06) , inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
+  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.06);
   color: #adb5bd;
 }
@@ -19106,7 +19079,7 @@ caption {
 }
 .tbar-dark-d1 {
   background-color: #23272b;
-  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06) , inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
+  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
   color: #adb5bd;
 }
 .tbar-dark-d1 .tbar-divider-before::before {
@@ -19990,7 +19963,7 @@ caption {
   padding: 2px 0;
 }
 .treeview .btn-monospaced {
-  font-size: 14px;
+  font-size: inherit;
   height: 24px;
   width: 24px;
 }
@@ -20005,11 +19978,15 @@ caption {
   margin-right: 4px;
   margin-top: 1.5px;
 }
+.treeview .component-expander {
+  font-size: 10px;
+}
 .treeview .component-expander .lexicon-icon:not(.component-expanded-d-none) {
   display: none;
 }
 .treeview .component-action {
   display: none;
+  font-size: 16px;
   margin-left: 2px;
   margin-right: 2px;
 }
@@ -20030,12 +20007,16 @@ caption {
   background-color: transparent;
 }
 .treeview .component-icon {
-  display: inline;
+  display: inline-block;
+  font-size: 16px;
   height: auto;
-  margin-left: 4px;
-  margin-right: 4px;
+  margin: auto 4px;
+  vertical-align: middle;
   width: auto;
 }
+.treeview .component-icon .lexicon-icon {
+  display: block;
+}
 .treeview .component-text {
   padding-bottom: 1.5px;
   padding-left: 4px;
@@ -20232,7 +20213,7 @@ caption {
   appearance: none;
   background-color: transparent;
   border-radius: 0.2rem;
-  border-width: 0;
+  border-width: 0px;
   color: #000;
   cursor: pointer;
   display: inline-flex;
@@ -23176,7 +23157,7 @@ button.bg-dark:focus {
 }
 
 .rounded-0 {
-  border-radius: 0 !important;
+  border-radius: 0px !important;
 }
 
 .clearfix::after {