testio-tailwind 0.1.0 → 0.2.1

package/src/static/app.compiled.css

@@ -4048,9 +4048,9 @@ footer.actionbar summary > .btn, .splitview-list-actionbar  summary > .btn, .spl
   color: rgba(35, 106, 132, var(--tw-text-opacity));
 }
 
-.btn-inverted,
-input[type="submit"].btn-inverted,
-.btn-primary-inverted,
+.btn-inverted,
+input[type="submit"].btn-inverted,
+.btn-primary-inverted,
 input[type="submit"].btn-primary-inverted{
   .icon {
     --tw-text-opacity: 1;
@@ -4067,12 +4067,12 @@ input[type="submit"].btn-primary-inverted{
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.btn-outline-primary-inverted,
-.btn-secondary-inverted,
-input[type="submit"].btn-secondary-inverted,
-.btn-white-secondary,
-input[type="submit"].btn-white-secondary,
-input.btn-white-secondary,
+.btn-outline-primary-inverted,
+.btn-secondary-inverted,
+input[type="submit"].btn-secondary-inverted,
+.btn-white-secondary,
+input[type="submit"].btn-white-secondary,
+input.btn-white-secondary,
 input[type="submit"].btn-white-secondary{
   .icon {
     --tw-text-opacity: 1;
@@ -4567,9 +4567,9 @@ input[type="submit"].btn-white-secondary{
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.header .navlink,
-.header a.navlink,
-.header .dropdown-link,
+.header .navlink,
+.header a.navlink,
+.header .dropdown-link,
 .header-dropdown .dropdown-link{
   line-height: 1.1;
 }
@@ -4853,7 +4853,7 @@ details[open].header-dropdown .dropdown-menu.profile-dropdown {
   line-height: 13px;
 }
 
-.header .profile-name,
+.header .profile-name,
 .header .profile-role{
   line-height: 1.1;
 }
@@ -4903,10 +4903,10 @@ details[open].header-dropdown .dropdown-menu.profile-dropdown {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgba(29, 29, 29, var(--tw-text-opacity));
-  grid-template-areas:  "header header header"
-                        "sidebar test-header test-header"
-                        "sidebar main aside"
-                        "sidebar chat-container chat-container"
+  grid-template-areas:  "header header header"
+                        "sidebar test-header test-header"
+                        "sidebar main aside"
+                        "sidebar chat-container chat-container"
                         "sidebar footer footer";
   grid-template-columns: auto minmax(0, 1fr) auto;
   grid-template-rows: auto auto minmax(0, 1fr) auto auto;
@@ -4963,50 +4963,6 @@ details[open].header-dropdown .dropdown-menu.profile-dropdown {
   padding-bottom: 50px;
 }
 
-/* @media (max-width: $sidebar-breakpoint) {
-  .offset .content-wrapper, .meta-header {
-    transition: all .25s ease-out;
-
-  }
-  .content-wrapper, .meta-header {
-    transition: all .25s ease-out;
-  }
-} */
-
-/* @media (min-width: $sidebar-breakpoint) {
-  .content-wrapper {
-    padding-left: $sidebar-width;
-    overflow-x: hidden;
-  }
-  .meta-header {
-    padding-left: $sidebar-width;
-  }
-} */
-
-/* .page-header {
-  padding: $spacing $body-padding-desktop;
-
-  .page-title {
-    margin: 0;
-
-    .label {
-      padding: 0;
-      vertical-align: super;
-      color: $gray;
-      background: transparent;
-      font-weight:normal;
-      font-size:.35em;
-      position:relative;
-      top:-7px;
-    }
-
-  }
-
-  @include media-breakpoint-down(sm) {
-    padding: $spacing $body-padding-mobile;
-  }
-} */
-
 nav.sidebar, .mobile-menu.sidebar{
   position: relative;
   display: none;
@@ -5032,7 +4988,7 @@ nav.sidebar, .mobile-menu.sidebar{
   }
 }
 
-nav.sidebar,
+nav.sidebar,
 .mobile-menu.sidebar{
   grid-area: sidebar;
   overflow-x: auto;
@@ -5043,7 +4999,7 @@ nav.sidebar,
   border-right: none;
 }
 
-nav.sidebar::-webkit-scrollbar,
+nav.sidebar::-webkit-scrollbar,
 nav.sidebar .navlinks::-webkit-scrollbar {
   display: none;
   -ms-overflow-style: none;  /* IE and Edge */
@@ -5072,10 +5028,10 @@ nav.sidebar .navlinks::-webkit-scrollbar {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.sidebar .navlink,
-.sidebar a.navlink, 
-.sidebar.mobile-menu .navlink,
-.sidebar .header-dropdown .navlink,
+.sidebar .navlink,
+.sidebar a.navlink, 
+.sidebar.mobile-menu .navlink,
+.sidebar .header-dropdown .navlink,
 .sidebar .header-dropdown .dropdown-link{
   margin-bottom: 1px;
   -webkit-user-select: none;
@@ -5216,7 +5172,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.sidebar summary.navlink:after,
+.sidebar summary.navlink:after,
 .sidebar .header-dropdown summary.navlink::after{
   content: "";
   top: 12px;
@@ -5226,7 +5182,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
           mask-repeat: no-repeat;
 }
 
-.sidebar details[open] summary.navlink:after,
+.sidebar details[open] summary.navlink:after,
 .sidebar .header-dropdown[open] summary.navlink::after {
   -webkit-mask-image: url("/assets/images/triangle-centered-down.svg");
           mask-image: url("/assets/images/triangle-centered-down.svg");
@@ -5244,8 +5200,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
 }
 
-.sidebar details[open],
-.header .sidebar details[open],
+.sidebar details[open],
+.header .sidebar details[open],
 .sidebar .header-dropdown[open]{
   padding: 0 0 1px 0;
 }
@@ -5411,8 +5367,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(121, 84, 255, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.purple .navlink:hover,
-.sidebar details.marked-collapse.purple .navlink:focus,
+.sidebar details.marked-collapse.purple .navlink:hover,
+.sidebar details.marked-collapse.purple .navlink:focus,
 .sidebar details.marked-collapse.purple .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5450,8 +5406,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(244, 141, 33, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.orange .navlink:hover,
-.sidebar details.marked-collapse.orange .navlink:focus,
+.sidebar details.marked-collapse.orange .navlink:hover,
+.sidebar details.marked-collapse.orange .navlink:focus,
 .sidebar details.marked-collapse.orange .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5489,8 +5445,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(216, 206, 13, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.yellow .navlink:hover,
-.sidebar details.marked-collapse.yellow .navlink:focus,
+.sidebar details.marked-collapse.yellow .navlink:hover,
+.sidebar details.marked-collapse.yellow .navlink:focus,
 .sidebar details.marked-collapse.yellow .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5528,8 +5484,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(255, 49, 49, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.red-light .navlink:hover,
-.sidebar details.marked-collapse.red-light .navlink:focus,
+.sidebar details.marked-collapse.red-light .navlink:hover,
+.sidebar details.marked-collapse.red-light .navlink:focus,
 .sidebar details.marked-collapse.red-light .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5567,8 +5523,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(232, 62, 140, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.pink .navlink:hover,
-.sidebar details.marked-collapse.pink .navlink:focus,
+.sidebar details.marked-collapse.pink .navlink:hover,
+.sidebar details.marked-collapse.pink .navlink:focus,
 .sidebar details.marked-collapse.pink .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5606,8 +5562,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(50, 109, 209, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.blue .navlink:hover,
-.sidebar details.marked-collapse.blue .navlink:focus,
+.sidebar details.marked-collapse.blue .navlink:hover,
+.sidebar details.marked-collapse.blue .navlink:focus,
 .sidebar details.marked-collapse.blue .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -5645,8 +5601,8 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(140, 189, 36, var(--tw-text-opacity));
 }
 
-.sidebar details.marked-collapse.green .navlink:hover,
-.sidebar details.marked-collapse.green .navlink:focus,
+.sidebar details.marked-collapse.green .navlink:hover,
+.sidebar details.marked-collapse.green .navlink:focus,
 .sidebar details.marked-collapse.green .navlink.active:hover{
   .icon {
     --tw-text-opacity: 1;
@@ -10762,6 +10718,7 @@ ul.bullet-list li::before {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
   .icon {
     vertical-align: middle;
   }
@@ -10828,12 +10785,13 @@ ul.bullet-list li::before {
 }
 
 .section-collapsable .section-title {
-  padding-left: 15px;
-  --tw-text-opacity: 1;
-  color: rgba(35, 106, 132, var(--tw-text-opacity));
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  padding-left: 15px;
+  --tw-text-opacity: 1;
+  color: rgba(35, 106, 132, var(--tw-text-opacity));
 }
 
 .section-collapsable .section-title::before {
@@ -10854,8 +10812,8 @@ ul.bullet-list li::before {
   z-index: 1;
 }
 
-.section-collapsable .section-header:hover,
-.section-collapsable .section-header:focus,
+.section-collapsable .section-header:hover,
+.section-collapsable .section-header:focus,
 .section-collapsable .section-header:active {
   .section-title {
     --tw-text-opacity: 1;
@@ -10871,8 +10829,8 @@ ul.bullet-list li::before {
   position: relative;
 }
 
-.dropdown-actions,
-.dropdown-wrapper,
+.dropdown-actions,
+.dropdown-wrapper,
 .popover-wrapper{
   width: -moz-fit-content;
   width: fit-content;
@@ -10890,8 +10848,8 @@ details.dropdown-actions[open] summary:after, .dropdown-wrapper[open] summary:af
   background-color: transparent;
 }
 
-details.dropdown-actions[open] summary:after,
-.dropdown-wrapper[open] summary:after,
+details.dropdown-actions[open] summary:after,
+.dropdown-wrapper[open] summary:after,
 .popover-wrapper[open] summary:after{
   content: "";
 }
@@ -10908,7 +10866,7 @@ details.dropdown-actions[open] summary:after,
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.popover-menu, 
+.popover-menu, 
 .dropdown-menu{
   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
 }
@@ -10928,9 +10886,9 @@ details.dropdown-actions[open].dropup .dropdown-menu, details.dropdown-actions[o
   margin-top: 0px;
 }
 
-details.dropdown-actions[open].dropup .dropdown-menu,
-details.dropdown-actions[open].dropup .popover-menu,
-.dropdown-wrapper[open].dropup .dropdown-menu,
+details.dropdown-actions[open].dropup .dropdown-menu,
+details.dropdown-actions[open].dropup .popover-menu,
+.dropdown-wrapper[open].dropup .dropdown-menu,
 .popover-wrapper[open].dropup .popover-menu{
   margin-bottom: 2px;
 }
@@ -10954,7 +10912,7 @@ details.dropdown-actions[open].dropright .dropdown-menu, details.dropdown-action
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.popover-menu .popover-action, 
+.popover-menu .popover-action, 
 .dropdown-menu .dropdown-action{
   font-weight: 600;
   line-height: 1.2;
@@ -11007,7 +10965,7 @@ details.dropdown-actions[open].dropright .dropdown-menu, details.dropdown-action
   font-weight: 600;
 }
 
-.popover-menu.info .popover-title, 
+.popover-menu.info .popover-title, 
 .dropdown-menu.info .popover-title{
   line-height: 1.1;
 }
@@ -11028,6 +10986,9 @@ details.dropdown-actions[open].dropright .dropdown-menu, details.dropdown-action
 .listitem, details.listitem .listitem-header{
   position: relative;
   display: grid;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto auto;
   align-items: stretch;
@@ -11040,9 +11001,9 @@ details.dropdown-actions[open].dropright .dropdown-menu, details.dropdown-action
   }
 }
 
-.listitem, 
+.listitem, 
 details.listitem .listitem-header{
-  grid-template-areas:  "badge title actions"
+  grid-template-areas:  "badge title actions"
                         "badge metrics actions";
   grid-template-columns: auto 1fr auto;
   @media (min-width: 640px) {
@@ -11050,6 +11011,15 @@ details.listitem .listitem-header{
   }
 }
 
+details.listitem .listitem-title {
+  cursor: pointer;
+}
+
+details.listitem .listitem-title:hover{
+  --tw-text-opacity: 1;
+  color: rgba(33, 190, 244, var(--tw-text-opacity));
+}
+
 .listitem {
   border-radius: 5px;
   border-width: 1px;
@@ -11499,26 +11469,26 @@ a.listitem:hover {
   gap: 15px;
 }
 
-.list-tasks,
+.list-tasks,
 .list-issues{
   display: grid;
 }
 
-.task-item,
+.task-item,
 .issue-item {
   display: grid;
-  grid-template-areas: "item-icon item-title item-metrics"
+  grid-template-areas: "item-icon item-title item-metrics"
                        "item-icon item-info item-info";
   grid-template-columns: auto 1fr;
 }
 
-.task-item-wrapper,
+.task-item-wrapper,
 .issue-item-wrapper {
   display: grid;
   grid-template-columns: 1fr auto;
 }
 
-.task-item:hover,
+.task-item:hover,
 .issue-item:hover {
   .task-icon, .task-title, .task-info, .task-metrics .icon, .issue-icon, .issue-title, .issue-info, .issue-metrics .icon{
     --tw-text-opacity: 1;
@@ -11537,7 +11507,7 @@ a.listitem:hover {
   color: rgba(29, 29, 29, var(--tw-text-opacity));
 }
 
-.task-item .task-title,
+.task-item .task-title,
 .issue-item .issue-title{
   grid-area: item-title;
   overflow: hidden;
@@ -11556,7 +11526,7 @@ a.listitem:hover {
   color: rgba(95, 101, 109, var(--tw-text-opacity));
 }
 
-.task-item .task-info,
+.task-item .task-info,
 .issue-item .issue-info{
   grid-area: item-info;
   overflow: hidden;
@@ -11568,12 +11538,12 @@ a.listitem:hover {
   line-height: 1.2;
 }
 
-.task-item .task-action
+.task-item .task-action
 .issue-item .issue-action {
   grid-area: item-actions;
 }
 
-.task-item .task-metrics,
+.task-item .task-metrics,
 .issue-item .issue-metrics {
   grid-area: item-metrics;
 }
@@ -11702,11 +11672,30 @@ a.listitem:hover {
   flex: 1 1 0%;
   align-items: center;
   justify-content: center;
+  border-radius: 0px
+}
+
+.device-wrapper .device-actions a:first-child{
+  border-top-right-radius: 5px;
+}
+
+.device-wrapper .device-actions a:last-child{
+  border-bottom-right-radius: 5px;
+}
+
+.device-wrapper .device-actions a{
   border-top-width: 1px;
+}
+
+.device-wrapper .device-actions a:first-child{
+  border-top-width: 0px;
+}
+
+.device-wrapper .device-actions a{
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
 .device-wrapper .device-actions a:hover {
@@ -11714,17 +11703,6 @@ a.listitem:hover {
   background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
 }
 
-.device-wrapper .device-actions a:first-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  border-top-width: 0px;
-}
-
-.device-wrapper .device-actions a:last-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
 .profile-thumb {
   height: 30px;
   width: 30px;
@@ -11950,7 +11928,7 @@ a.listitem:hover {
   top: 1px;
 }
 
-.toggle-switch input:disabled + .slider,
+.toggle-switch input:disabled + .slider,
 .toggle-switch input:disabled + label {
   background-color: transparent;
 }
@@ -12074,7 +12052,7 @@ a.listitem:hover {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.selectable-token input:checked + label,
+.selectable-token input:checked + label,
 .selectable-token.inverted input:checked + label{
   background-image: none;
 }
@@ -12137,11 +12115,11 @@ a.listitem:hover {
   color: rgba(191, 193, 197, var(--tw-text-opacity));
 }
 
-.selectable-token input:checked:disabled + label,
-.selectable-token.disabled input:checked + label,
-.selectable-token.disabled input + label,
-.selectable-token input:disabled + label,
-.selectable-token input.disabled + label,
+.selectable-token input:checked:disabled + label,
+.selectable-token.disabled input:checked + label,
+.selectable-token.disabled input + label,
+.selectable-token input:disabled + label,
+.selectable-token input.disabled + label,
 .selectable-token input.disabled:checked + label{
   background-image: url("/assets/images/pattern-striped-bright.png");
   background-repeat: repeat;
@@ -12152,11 +12130,11 @@ a.listitem:hover {
   background-color: rgba(191, 193, 197, var(--tw-bg-opacity));
 }
 
-.selectable-token input:checked:disabled + label,
-.selectable-token.disabled input:checked + label,
-.selectable-token.disabled input + label,
-.selectable-token input:disabled + label,
-.selectable-token input.disabled + label,
+.selectable-token input:checked:disabled + label,
+.selectable-token.disabled input:checked + label,
+.selectable-token.disabled input + label,
+.selectable-token input:disabled + label,
+.selectable-token input.disabled + label,
 .selectable-token input.disabled:checked + label {
   .icon {
     --tw-text-opacity: 1;
@@ -12175,12 +12153,12 @@ a.listitem:hover {
   color: rgba(95, 101, 109, var(--tw-text-opacity));
 }
 
-.selectable-token.inverted input:checked:disabled + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted.disabled input:checked + label,
-.selectable-token.inverted.disabled input + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted input.disabled + label,
+.selectable-token.inverted input:checked:disabled + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted.disabled input:checked + label,
+.selectable-token.inverted.disabled input + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted input.disabled + label,
 .selectable-token.inverted input.disabled:checked + label{
   background-image: url("/assets/images/pattern-striped-dark.png");
 }
@@ -12190,12 +12168,12 @@ a.listitem:hover {
   background-color: rgba(95, 101, 109, var(--tw-bg-opacity));
 }
 
-.selectable-token.inverted input:checked:disabled + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted.disabled input:checked + label,
-.selectable-token.inverted.disabled input + label,
-.selectable-token.inverted input:disabled + label,
-.selectable-token.inverted input.disabled + label,
+.selectable-token.inverted input:checked:disabled + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted.disabled input:checked + label,
+.selectable-token.inverted.disabled input + label,
+.selectable-token.inverted input:disabled + label,
+.selectable-token.inverted input.disabled + label,
 .selectable-token.inverted input.disabled:checked + label {
   .icon {
     --tw-text-opacity: 1;
@@ -12277,7 +12255,7 @@ a.listitem:hover {
   color: rgba(35, 106, 132, var(--tw-text-opacity));
 }
 
-.selectable-token.lg label,
+.selectable-token.lg label,
 .selectable-token.lg input:checked + label{
   line-height: 1;
   text-align: center;
@@ -12331,8 +12309,8 @@ a.listitem:hover {
   color: rgba(191, 193, 197, var(--tw-text-opacity));
 }
 
-.selectable-token.lg input:disabled + label,
-.selectable-token.lg input.disabled + label,
+.selectable-token.lg input:disabled + label,
+.selectable-token.lg input.disabled + label,
 .selectable-token.lg input.disabled:checked + label{
   background-image: none;
 }
@@ -12365,8 +12343,8 @@ a.listitem:hover {
   color: rgba(95, 101, 109, var(--tw-text-opacity));
 }
 
-.selectable-token.inverted.lg input:disabled + label,
-.selectable-token.inverted.lg input.disabled + label,
+.selectable-token.inverted.lg input:disabled + label,
+.selectable-token.inverted.lg input.disabled + label,
 .selectable-token.inverted.lg input.disabled:checked{
   background-image: none;
 }
@@ -12400,7 +12378,7 @@ a.listitem:hover {
 
 /*///// Checkboxes and Radiobuttons /////*/
 
-.form-check, 
+.form-check, 
 .form-radio {
   display: flex;
   align-items: start;
@@ -12416,7 +12394,7 @@ a.listitem:hover {
   color: rgba(29, 29, 29, var(--tw-text-opacity));
 }
 
-.form-radio label, 
+.form-radio label, 
 .form-check label{
   padding-top: 0.25rem;
   cursor: pointer;
@@ -12492,11 +12470,11 @@ a.listitem:hover {
   border-color: rgba(191, 193, 197, var(--tw-border-opacity));
 }
 
-.form-check input[type=checkbox]:checked:disabled,
-.form-check.disabled input[type=checkbox]:checked,
-.form-check.disabled input,
-.form-check input:disabled,
-.form-check input.disabled,
+.form-check input[type=checkbox]:checked:disabled,
+.form-check.disabled input[type=checkbox]:checked,
+.form-check.disabled input,
+.form-check input:disabled,
+.form-check input.disabled,
 .form-check input.disabled[type=checkbox]:checked{
   background-image: url("/assets/images/pattern-striped-bright.png");
   background-repeat: repeat;
@@ -12515,17 +12493,17 @@ a.listitem:hover {
   border-color: rgba(124, 129, 136, var(--tw-border-opacity));
 }
 
-.form-check.inverted input:checked:disabled,
-.form-check.inverted.disabled input:checked,
-.form-check.inverted.disabled input,
-.form-check.inverted input:disabled,
-.form-check.inverted input.disabled,
-.form-check.inverted input.disabled:checked,
-.form-check.inverted.sm input:checked:disabled,
-.form-check.inverted.sm.disabled input:checked,
-.form-check.inverted.sm.disabled input,
-.form-check.inverted.sm input:disabled,
-.form-check.inverted.sm input.disabled,
+.form-check.inverted input:checked:disabled,
+.form-check.inverted.disabled input:checked,
+.form-check.inverted.disabled input,
+.form-check.inverted input:disabled,
+.form-check.inverted input.disabled,
+.form-check.inverted input.disabled:checked,
+.form-check.inverted.sm input:checked:disabled,
+.form-check.inverted.sm.disabled input:checked,
+.form-check.inverted.sm.disabled input,
+.form-check.inverted.sm input:disabled,
+.form-check.inverted.sm input.disabled,
 .form-check.inverted.sm input.disabled:checked{
   background-image: url("/assets/images/pattern-striped-dark.png");
 }
@@ -12770,9 +12748,9 @@ textarea.form-control {
 }
 
 .form-control-search {
-  /* padding-right: ($input-padding-x * 3);
-  background-repeat: no-repeat;
-  background-position: center right ($input-height * .25);
+  /* padding-right: ($input-padding-x * 3);
+  background-repeat: no-repeat;
+  background-position: center right ($input-height * .25);
   background-size: ($input-height * .50) ($input-height * .50); */
 }
 
@@ -12853,9 +12831,9 @@ textarea.form-control {
 .form-search input[type=search]::-ms-reveal { display: none; width: 0; height: 0;
 }
 
-.form-search input[type=search]::-webkit-search-decoration,
-  .form-search input[type=search]::-webkit-search-cancel-button,
-  .form-search input[type=search]::-webkit-search-results-button,
+.form-search input[type=search]::-webkit-search-decoration,
+  .form-search input[type=search]::-webkit-search-cancel-button,
+  .form-search input[type=search]::-webkit-search-results-button,
   .form-search input[type=search]::-webkit-search-results-decoration { display: none;
 }
 
@@ -12962,7 +12940,7 @@ textarea.form-control {
   background-color: rgba(38, 51, 64, var(--tw-bg-opacity));
 }
 
-.popover-menu.search, 
+.popover-menu.search, 
 .dropdown-menu.search{
   input {
     border: none;
@@ -12982,7 +12960,7 @@ textarea.form-control {
   padding-top: 10px;
 }
 
-.popover-menu .list-searchresults,
+.popover-menu .list-searchresults,
 .dropdown-menu .list-searchresults{
   max-height: 500px;
 }
@@ -13274,8 +13252,8 @@ textarea.form-control {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.field_with_errors .ts-control::before,
-.form-select.inverted .field_with_errors .ts-control::before,
+.field_with_errors .ts-control::before,
+.form-select.inverted .field_with_errors .ts-control::before,
 .form-group.inverted .field_with_errors .ts-control::before{
   content: "";
 }
@@ -13297,7 +13275,7 @@ textarea.form-control {
   color: rgba(95, 101, 109, var(--tw-text-opacity));
 }
 
-.ts-wrapper.disabled .ts-control,
+.ts-wrapper.disabled .ts-control,
 .ts-wrapper.locked .ts-control{
   background-image: url("/assets/images/pattern-striped-bright.png");
   background-repeat: repeat;
@@ -13332,7 +13310,7 @@ textarea.form-control {
   gap: 20px;
   grid-template-rows: auto;
   @media (min-width: 768px) {
-    grid-template-areas: "label trix-toolbar"
+    grid-template-areas: "label trix-toolbar"
                          "label trix-editor";
   }
 }
@@ -14165,7 +14143,7 @@ a.user-item:hover, .user-item.linked:hover{
   color: rgba(33, 190, 244, var(--tw-text-opacity));
 }
 
-a.user-item:hover,
+a.user-item:hover,
 .user-item.linked:hover{
   img {
     outline: 2px solid #21bef4;
@@ -14343,8 +14321,8 @@ a.user-item:hover,
   background-color: rgba(236, 4, 4, var(--tw-bg-opacity));
 }
 
-.alert-warning,
-.alert-danger,
+.alert-warning,
+.alert-danger,
 .alert-error{
   .icon {
     --tw-text-opacity: 1;
@@ -14531,7 +14509,7 @@ a.user-item:hover,
     margin-top: 15px;
     margin-bottom: 15px;
   }
-  em strong,
+  em strong,
   strong em {
     font-family: sans-serif;
   }
@@ -14712,8 +14690,8 @@ a.user-item:hover,
   background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
 }
 
-.nav-tabs::-webkit-scrollbar,
-.nav-pills::-webkit-scrollbar,
+.nav-tabs::-webkit-scrollbar,
+.nav-pills::-webkit-scrollbar,
 .nav-tabs .navlinks::-webkit-scrollbar {
   display: none;
   -ms-overflow-style: none;  /* IE and Edge */
@@ -14742,7 +14720,7 @@ h1, h1, h2, h2, h3, h3, h4, h4, h5, h5, .text-heading-1, .text-heading-1, .text-
   color: rgba(35, 106, 132, var(--tw-text-opacity));
 }
 
-.nav-tabs .navlink, 
+.nav-tabs .navlink, 
 .nav-tabs .nav-link{
   margin-bottom: -1px;
   line-height: 1;
@@ -15083,7 +15061,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   border-color: rgba(95, 101, 109, var(--tw-border-opacity));
 }
 
-.drawer-content .section-header,
+.drawer-content .section-header,
 .drawer-content .section-collapsable .section-title {
   .section-title {
     --tw-bg-opacity: 1;
@@ -15263,7 +15241,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.modal-footer .btn.disabled,
+.modal-footer .btn.disabled,
 .modal-footer .btn:disabled{
   background-image: url("/assets/images/pattern-striped-bright.png");
   background-color: transparent;
@@ -15421,7 +15399,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
     }
   }
   @keyframes color {
-    100%,
+    100%,
     0% {
       stroke: #e6e6e6;
     }
@@ -15848,7 +15826,7 @@ details.result-item .result-item::before {
   max-width: 700px;
   position: relative;
   display: grid;
-  grid-template-areas:  "chat-avatar chat-header chat-header"
+  grid-template-areas:  "chat-avatar chat-header chat-header"
                         "chat-avatar chat-message chat-actions";
   grid-template-columns: auto auto 1fr;
 }
@@ -15960,7 +15938,7 @@ img.chat-avatar {
   }
 }
 
-.chat-actions .dropdown-actions[open] .dropdown-menu,
+.chat-actions .dropdown-actions[open] .dropdown-menu,
 .chat-actions .dropdown-actions[open] .popover-menu {
   right: 0;
   left: auto;
@@ -16004,7 +15982,7 @@ img.chat-avatar {
 /*///// Your message /////*/
 
 .chat-message-item.your-message {
-  grid-template-areas:  "chat-header chat-header chat-avatar "
+  grid-template-areas:  "chat-header chat-header chat-avatar "
                         "chat-actions chat-message chat-avatar";
   grid-template-columns: 1fr auto auto;
   place-self: end;
@@ -16054,7 +16032,7 @@ img.chat-avatar {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
+.chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
 .chat-message-item.your-message .chat-actions .dropdown-actions[open] .popover-menu {
   left: 0;
   right: auto;
@@ -16374,9 +16352,9 @@ img.chat-avatar {
   display: grid;
   max-height: 100%;
   overflow: hidden;
-  grid-template-areas:  "splitview-header splitview-header"
-                        "splitview-list-header splitview-details"
-                        "splitview-list splitview-details"
+  grid-template-areas:  "splitview-header splitview-header"
+                        "splitview-list-header splitview-details"
+                        "splitview-list splitview-details"
                         "splitview-list-actionbar splitview-details-actionbar";
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr auto;
@@ -16388,6 +16366,9 @@ img.chat-avatar {
     grid-template-columns: 1fr 2fr;
   }
   @media (min-width: 1536px) {
+    grid-template-columns: 2fr 3fr;
+  }
+  @media (min-width: 1930px) {
     grid-template-columns: 1fr 3fr;
   }
 }
@@ -16979,7 +16960,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   font-weight: 600;
 }
 
-.table tr:first-child td,
+.table tr:first-child td,
 .table.tbody tr:first-child td {
   border-top: 0;
 }
@@ -16996,18 +16977,18 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   color: rgba(33, 190, 244, var(--tw-text-opacity));
 }
 
-.table-bordered,
-.table-bordered thead,
+.table-bordered,
+.table-bordered thead,
 .table-bordered tbody {
   border: 0;
 }
 
-.table-bordered tr th:first-child,
+.table-bordered tr th:first-child,
 .table-bordered tr td:first-child {
   border-left: 0;
 }
 
-.table-bordered tr td:last-child,
+.table-bordered tr td:last-child,
 .table-bordered tr th:last-child {
   border-right: 0;
 }
@@ -17308,7 +17289,7 @@ h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-hea
   padding-left: 15px;
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
-  grid-template-areas:  "badge title"
+  grid-template-areas:  "badge title"
                         "content content";
   grid-template-columns: auto 1fr;
   line-height: 1.3;
@@ -17880,6 +17861,353 @@ select {
   background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
 }
 
+.test-header.tester {
+  display: grid;
+  --tw-bg-opacity: 1;
+  background-color: rgba(29, 29, 29, var(--tw-bg-opacity));
+  padding: 0px;
+  padding-left: 15px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  grid-area: test-header;
+  grid-template-areas:   "test-title session-info test-actions"
+                          "test-progress test-progress test-progress"
+                          "nav-tabs nav-tabs nav-tabs";
+  grid-template-columns: 1fr auto auto;
+  grid-template-rows: auto;
+  @media (min-width: 640px){
+    grid-template-areas:  "test-title test-progress session-info test-actions"
+                          "nav-tabs nav-tabs nav-tabs nav-tabs";
+
+    grid-template-columns: auto 1fr auto auto;
+
+    grid-template-rows: auto;
+
+    padding-top: 10px;
+
+    padding-right: 20px;
+
+    padding-bottom: 0px;
+
+    padding-left: 20px;
+  }
+  @media (min-width: 768px){
+    padding-top: 10px;
+
+    padding-right: 20px;
+
+    padding-bottom: 0px;
+
+    padding-left: 50px;
+  }
+}
+
+.test-header.tester.ready {
+  --tw-bg-opacity: 1;
+  background-color: rgba(38, 51, 64, var(--tw-bg-opacity));
+}
+
+.test-header.tester.recording {
+  --tw-bg-opacity: 1;
+  background-color: rgba(35, 106, 132, var(--tw-bg-opacity));
+}
+
+.test-header.tester.danger {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 4, 4, var(--tw-bg-opacity));
+}
+
+.test-header.tester.minimized {
+  align-items: center;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  grid-template-areas:  "nav-tabs session-info test-actions";
+  grid-template-columns: 1fr auto auto;
+  .test-title, .test-progress-wrapper {
+    display: none;
+  }
+  .session-info {
+    padding-top: 0;
+  }
+  .nav-tabs {
+    padding-top: 5px;
+    padding-bottom: 10px;
+  }
+  @media (min-width: 640px){
+    padding-top: 5px;
+
+    padding-bottom: 5px;
+  }
+}
+
+.test-header .nav-tabs {
+  margin-bottom: 0px;
+  border-bottom-width: 0px;
+  padding-bottom: 10px;
+  grid-area: nav-tabs;
+}
+
+.test-header.tester .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(29,29,29,0) 0%, rgba(29,29,29,1) 90%);
+}
+
+.test-header.ready .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(38,51,64,0) 0%, rgba(38,51,64,1) 90%);
+}
+
+.test-header.tester.recording .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(35,106,132,0) 0%, rgba(35,106,132,1) 90%);
+}
+
+.test-header.tester.danger .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(236,4,4,0) 0%, rgba(236,4,4,1) 90%);
+}
+
+.test-header .navlink {
+  height: 20px;
+  border-bottom-width: 0px;
+  font-size: 14px;
+  line-height: 18px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.test-header .navlink.active, .test-header .navlink:hover, .test-header .navlink:focus {
+  border-bottom-width: 2px;
+}
+
+.test-header.tester.recording .navlink.active {
+  --tw-border-opacity: 1;
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+}
+
+.test-header.tester.recording .navlink.active:hover{
+  --tw-border-opacity: 1;
+  border-color: rgba(33, 190, 244, var(--tw-border-opacity));
+}
+
+.test-header.tester.recording .navlink.active:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
+}
+
+h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-heading-5 {
+  font-weight: 300;
+}
+
+.test-header .test-title{
+  margin-bottom: 0px;
+  padding-top: 10px;
+  padding-right: 20px;
+  font-size: 1.125rem;
+  line-height: 1.125rem;
+}
+
+@media (min-width: 640px){
+  .test-header .test-title{
+    padding-top: 0px;
+    font-size: 1.375rem;
+    line-height: 1.375rem;
+  }
+}
+
+.test-header .test-title{
+  grid-area: test-title;
+  line-height: 1;
+}
+
+.test-header .test-progress-wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding-right: 20px;
+  grid-area: test-progress;
+}
+
+.test-header .meta-info {
+  margin-bottom: 5px;
+  font-size: 13px;
+  line-height: 13px;
+  --tw-text-opacity: 1;
+  color: rgba(191, 193, 197, var(--tw-text-opacity));
+}
+
+.test-header .test-progress {
+  margin-bottom: 10px;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 2px;
+}
+
+.test-progress::-webkit-progress-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
+}
+
+.test-progress::-webkit-progress-value {
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
+}
+
+.session-info {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  padding-top: 10px;
+  padding-right: 20px;
+}
+
+@media (min-width: 640px){
+  .session-info{
+    padding-top: 0px;
+  }
+}
+
+.session-info{
+  grid-area: session-info;
+  line-height: 1;
+}
+
+.session-label {
+  display: none;
+  font-size: 11px;
+  line-height: 11px;
+}
+
+@media (min-width: 640px){
+  .session-label{
+    display: block;
+  }
+}
+
+.session-timer {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+@media (min-width: 640px){
+  .session-timer{
+    align-items: baseline;
+    font-size: 1.563rem;
+    line-height: 1.563rem;
+    font-weight: 300;
+  }
+}
+
+.session-timer::before {
+  margin-right: 10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+@media (min-width: 640px){
+  .session-timer::before{
+    margin-top: 5px;
+  }
+}
+
+.session-timer::before{
+  content: "";
+  -webkit-mask-image: url("/assets/images/test.svg");
+          mask-image: url("/assets/images/test.svg");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.session-timer::after {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin-right: 10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 4, 4, var(--tw-bg-opacity));
+}
+
+@media (min-width: 640px){
+  .session-timer::after{
+    margin-top: 5px;
+  }
+}
+
+.session-timer::after{
+  content: "";
+  -webkit-mask-image: url("/assets/images/circle-sm-filled.svg");
+          mask-image: url("/assets/images/circle-sm-filled.svg");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.test-header.danger .session-timer::after {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+.session-addon {
+  margin-left: 5px;
+  display: none;
+  font-size: 13px;
+  line-height: 13px;
+}
+
+@media (min-width: 640px){
+  .session-addon{
+    display: inline;
+  }
+}
+
+.test-actions {
+  display: flex;
+  grid-area: test-actions;
+}
+
+.test-actions .btn {
+  height: 40px;
+  width: 40px;
+  justify-content: center;
+  border-radius: 0px;
+  border-left-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(29, 29, 29, var(--tw-border-opacity));
+  padding: 0px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+@media (min-width: 640px){
+  .test-actions .btn{
+    margin-right: 10px;
+    border-radius: 5px;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+    padding: 10px;
+  }
+}
+
+.test-actions .btn:hover {
+  border: none;
+}
+
+.test-actions .btn-recording {
+  --tw-text-opacity: 1;
+  color: rgba(236, 4, 4, var(--tw-text-opacity));
+}
+
+.test-actions .btn:last-child {
+  margin-right: 0;
+}
+
 /*///////// Customer Header /////////*/
 
 .header.customer {
@@ -18890,7 +19218,7 @@ details.card-section[open] .card-section-header {
   background-color: rgba(34, 34, 34, var(--tw-bg-opacity));
 }
 
-.ds-app-body main, 
+.ds-app-body main, 
 .ds-app-body form.main-content {
   grid-area: main;
 }
@@ -468882,6 +469210,6 @@ details.card-section[open] .card-section-header {
   .\33xl\:line-clamp-none{
     -webkit-line-clamp: unset;
   }
-}
-
+}
+
 /*# sourceMappingURL=app.compiled.css.map */