/*
8888888b.                            888    
888   Y88b                           888    
888    888                           888    
888   d88P .d88b.  .d8888b   .d88b.  888888 
8888888P" d8P  Y8b 88K      d8P  Y8b 888    
888 T88b  88888888 "Y8888b. 88888888 888    
888  T88b Y8b.          X88 Y8b.     Y88b.  
888   T88b "Y8888   88888P'  "Y8888   "Y888 
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*
888     888                 d8b          888      888                   
888     888                 Y8P          888      888                   
888     888                              888      888                   
Y88b   d88P 8888b.  888d888 888  8888b.  88888b.  888  .d88b.  .d8888b  
 Y88b d88P     "88b 888P"   888     "88b 888 "88b 888 d8P  Y8b 88K      
  Y88o88P  .d888888 888     888 .d888888 888  888 888 88888888 "Y8888b. 
   Y888P   888  888 888     888 888  888 888 d88P 888 Y8b.          X88 
    Y8P    "Y888888 888     888 "Y888888 88888P"  888  "Y8888   88888P' 
*/
:root {
  /*colours*/
  --black: #000000;
  --white: #FFFFFF;
  --gold: #B59855;
  --red: #fa6450;
  --green: #18d178;
  --yellow: #ffc937;
  --blue: #7cb9f1;
  --orange: #ffa722;
  --pink: #e3538f;
  --pink-light: #f486a7;
  --indigo: #6166ff;
  --indigo-light: : #8b8eec;
  /*status*/
  --complete: var(--green);
  --ready: var(--yellow);
  --pending: #e9e9e9;
  --failed: #a6a6a6;
  --processing: var(--blue);
  --alert: var(--red);
  /*theme*/
  --accent: var(--gold);
  --bg: var(--white);
  /*	--bg: var(--black);*/
  --text: var(--black);
  /*	--bg: var(--black);*/
  /*	--text: var(--white);*/
  /*	--grey40: color-mix(in srgb, var(--text) 4%, transparent);  //#f5f5f5;
	--grey60: color-mix(in srgb, var(--text) 6%, transparent);  //#f0f0f0;
	--grey90: color-mix(in srgb, var(--text) 9%, transparent);  //#e9e9e9;
	--grey110: color-mix(in srgb, var(--text) 11%, transparent);  //#e3e3e3;
	--grey150: color-mix(in srgb, var(--text) 15%, transparent);  //#dadada;
	--grey350: color-mix(in srgb, var(--text) 35%, transparent);  //#a6a6a6;
	--grey570: color-mix(in srgb, var(--text) 57%, transparent);  //#6e6e6f;*/
  --grey40: color-mix(in srgb, var(--text) 4%, var(--bg));
  --grey60: color-mix(in srgb, var(--text) 6%, var(--bg));
  --grey90: color-mix(in srgb, var(--text) 9%, var(--bg));
  --grey110: color-mix(in srgb, var(--text) 11%, var(--bg));
  --grey150: color-mix(in srgb, var(--text) 15%, var(--bg));
  --grey350: color-mix(in srgb, var(--text) 35%, var(--bg));
  --grey570: color-mix(in srgb, var(--text) 57%, var(--bg));
  --grey730: color-mix(in srgb, var(--text) 75%, var(--bg));
  --grey750: var(--grey730);
  --header-bg: var(--black);
  --header-link: var(--white);
  --nav-link: var(--white);
  --title-border: var(--grey150);
  /*sizes*/
  --px2: 0.125rem;
  --px4: 0.25rem;
  --px5: 0.3125rem;
  --px6: 0.375rem;
  --px7: 0.4375rem;
  --px8: 0.5rem;
  --px9: 0.5625rem;
  --px10: 0.625rem;
  --px11: 0.6875rem;
  --px12: 0.75rem;
  --px13: 0.8125rem;
  --px14: 0.875rem;
  --px15: 0.9375rem;
  --px16: 1rem;
  --px17: 1.0625rem;
  --px18: 1.125rem;
  --px19: 1.1875rem;
  --px20: 1.25rem;
  --px24: 1.5rem;
  --px30: 1.875rem;
  --px32: 2rem;
  --px36: 2.25rem;
  --px40: 2.5rem;
  --px44: 2.75rem;
  --px50: 3.125rem;
  --px64: 4rem;
  --px80: 5rem;
  --px96: 6rem;
  --px128: 8rem;
  --px320: 20rem;
  /*font weights*/
  --thin: 100;
  --extralight: 200;
  --light: 300;
  --normal: 400;
  --regular: var(--normal);
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --extrabold: 800;
  /*	--black: 900; need to rename to something that doesn't conflict with colour*/
  /*transition*/
  --transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/*
8888888888                888             
888                       888             
888                       888             
8888888  .d88b.  88888b.  888888 .d8888b  
888     d88""88b 888 "88b 888    88K      
888     888  888 888  888 888    "Y8888b. 
888     Y88..88P 888  888 Y88b.       X88 
888      "Y88P"  888  888  "Y888  88888P'
*/
/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype');
}
body,
input,
textarea {
  font-family: 'Inter';
  color: var(--text);
}
/*
88888888888                         
    888                             
    888                             
    888  888  888 88888b.   .d88b.  
    888  888  888 888 "88b d8P  Y8b 
    888  888  888 888  888 88888888 
    888  Y88b 888 888 d88P Y8b.     
    888   "Y88888 88888P"   "Y8888  
              888 888               
         Y8b d88P 888               
          "Y88P"  888  
*/
h1 {
  font-size: var(--px24);
  font-weight: var(--semibold);
}
h2 {
  font-size: var(--px18);
  font-weight: var(--semibold);
}
h3 {
  font-size: var(--px16);
  font-weight: var(--semibold);
}
h4 {
  font-size: var(--px13);
  font-weight: var(--semibold);
}
.meta {
  font-size: var(--px13);
  color: var(--grey350);
  font-weight: var(--regular);
}
/*
888                                          888    
888                                          888    
888                                          888    
888       8888b.  888  888  .d88b.  888  888 888888 
888          "88b 888  888 d88""88b 888  888 888    
888      .d888888 888  888 888  888 888  888 888    
888      888  888 Y88b 888 Y88..88P Y88b 888 Y88b.  
88888888 "Y888888  "Y88888  "Y88P"   "Y88888  "Y888 
                       888                          
                  Y8b d88P                          
                   "Y88P" 
*/
body {
  background-color: var(--bg);
}
main {
  padding: 0 var(--px24);
}
.container .row {
  display: flex;
  gap: var(--px32);
}
.container .column {
  display: flex;
  flex-direction: column;
  gap: var(--px32);
}
.container .column.fill {
  width: 100%;
  overflow-x: scroll;
}
.container .column.fill::-webkit-scrollbar {
  display: none;
}
.segment {
  background-color: var(--grey40);
  border-radius: var(--px8);
}
/*
888888b.            888    888                              
888  "88b           888    888                              
888  .88P           888    888                              
8888888K.  888  888 888888 888888 .d88b.  88888b.  .d8888b  
888  "Y88b 888  888 888    888   d88""88b 888 "88b 88K      
888    888 888  888 888    888   888  888 888  888 "Y8888b. 
888   d88P Y88b 888 Y88b.  Y88b. Y88..88P 888  888      X88 
8888888P"   "Y88888  "Y888  "Y888 "Y88P"  888  888  88888P' 
*/
button,
a.button {
  font-size: var(--px13);
  font-weight: var(--semibold);
  line-height: var(--px16);
  display: inline-flex;
  box-sizing: border-box;
  cursor: pointer;
  padding: var(--px8) var(--px16);
  border-radius: var(--px4);
  border: none;
  /*	min-height: var(--px32);*/
  align-items: center;
  text-decoration: none;
}
button i,
a.button i {
  margin-right: var(--px12);
}
button.primary,
a.button.primary {
  background-color: var(--accent);
  color: var(--bg);
}
button.primary i,
a.button.primary i {
  margin-right: var(--px12);
}
button.primary:hover,
a.button.primary:hover {
  background-color: color-mix(in srgb, var(--accent) 83%, var(--text));
}
button.secondary,
a.button.secondary {
  background-color: var(--bg);
  color: var(--accent);
  box-shadow: inset 0px 0px 0px 1px var(--grey350);
}
button.secondary i,
a.button.secondary i {
  margin-right: var(--px12);
}
button.secondary:hover,
a.button.secondary:hover {
  /*			background-color: color-mix(in srgb, var(--text) 5%, transparent);*/
  background-color: var(--grey60);
  /*			box-shadow: inset 0px 0px 0px 1px var(--accent);*/
}
button.tertiary,
a.button.tertiary {
  background-color: var(--bg);
  color: var(--accent);
}
button.tertiary i,
a.button.tertiary i {
  margin-right: var(--px12);
}
button.tertiary:hover,
a.button.tertiary:hover {
  background-color: color-mix(in srgb, var(--text) 5%, transparent);
}
button.action,
a.button.action {
  /*		background-color: var(--bg);*/
  background-color: transparent;
  width: var(--px32);
  height: var(--px32);
  padding: var(--px8) 0;
  justify-content: center;
}
button.action i,
a.button.action i {
  margin-right: 0;
  font-size: var(--px20);
}
button.action:hover,
a.button.action:hover {
  background-color: color-mix(in srgb, var(--text) 5%, transparent);
}
button.filter,
a.button.filter {
  background-color: var(--bg);
  color: var(--text);
  box-shadow: inset 0px 0px 0px 1px var(--grey350);
  padding-right: 0;
  align-items: center;
}
button.filter i,
a.button.filter i {
  font-size: var(--px11);
  width: var(--px32);
  margin-right: 0;
}
button.filter:hover,
a.button.filter:hover {
  box-shadow: inset 0px 0px 0px 1px var(--accent);
}
/*
88888888888       888      888          
    888           888      888          
    888           888      888          
    888   8888b.  88888b.  888  .d88b.  
    888      "88b 888 "88b 888 d8P  Y8b 
    888  .d888888 888  888 888 88888888 
    888  888  888 888 d88P 888 Y8b.     
    888  "Y888888 88888P"  888  "Y8888 
*/
.datatable {
  /*	box-sizing: border-box;*/
  /*	max-width: 100vw;*/
  /*	overflow-x: auto;*/
  /*	position: relative;*/
  overflow-x: scroll;
  /*	overflow-y: hidden;*/
  overflow-y: clip;
}
.datatable::-webkit-scrollbar {
  display: none;
}
.datatable table {
  z-index: -1;
}
.datatable table thead {
  /*			position: absolute;*/
  /*			top: 0;*/
}
.datatable table thead tr th {
  font-size: var(--px11);
  line-height: var(--px13);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px16);
  white-space: nowrap;
  text-align: left;
}
.datatable table thead tr th .sort {
  /*						display: inline-flex;*/
  margin-left: var(--px8);
  color: var(--grey150);
}
.datatable table thead tr th.allocation {
  padding-left: var(--px4);
  padding-right: 0;
}
.datatable table thead tr th:last-child {
  padding-right: var(--px4);
}
.datatable table tbody tr td {
  background-color: var(--grey40);
  white-space: nowrap;
  padding: var(--px4) var(--px16);
  border-bottom: 1px solid var(--bg);
  font-size: var(--px13);
  line-height: var(--16px);
}
.datatable table tbody tr td.allocation {
  padding-left: var(--px4);
  padding-right: 0;
  border-radius: var(--px2) 0 0 var(--px2);
}
.datatable table tbody tr td.allocation.unallocated {
  background-color: var(--grey90);
}
.datatable table tbody tr td.allocation.internal {
  background-color: var(--grey570);
}
.datatable table tbody tr td.allocation.hybrid {
  background-color: #7cb9f1;
}
.datatable table tbody tr td.allocation.external {
  background-color: var(--accent);
}
.datatable table tbody tr td:last-child {
  padding-right: var(--px4);
}
.datatable table tbody tr:hover td {
  background-color: var(--grey90);
  cursor: pointer;
}
/*
888    888                        888                  
888    888                        888                  
888    888                        888                  
8888888888  .d88b.   8888b.   .d88888  .d88b.  888d888 
888    888 d8P  Y8b     "88b d88" 888 d8P  Y8b 888P"   
888    888 88888888 .d888888 888  888 88888888 888     
888    888 Y8b.     888  888 Y88b 888 Y8b.     888     
888    888  "Y8888  "Y888888  "Y88888  "Y8888  888 
*/
header {
  background-color: var(--header-bg);
  height: 3.125rem;
  display: flex;
  justify-content: space-between;
  color: var(--nav-link);
  padding: 0 var(--px24);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1;
}
header .left {
  display: flex;
  align-items: center;
}
header .left .logo {
  height: 1.5rem;
}
header .left nav {
  display: flex;
  margin-left: var(--px40);
}
header .left nav a {
  height: 100%;
  box-sizing: border-box;
  font-size: var(--px20);
  font-weight: var(--regular);
  padding: var(--px13) var(--px20);
  cursor: pointer;
  text-decoration: none;
  color: var(--header-link);
}
header .left nav a.active {
  border-bottom: 4px solid var(--accent);
}
header .right {
  display: flex;
  align-items: center;
}
header .right .utilities {
  display: flex;
  height: 100%;
  margin-right: var(--px24);
  gap: var(--px8);
}
header .right .utilities a,
header .right .utilities button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--header-link);
  font-size: var(--px24);
  background: none;
  border: none;
  height: 100%;
  width: var(--px44);
  box-sizing: border-box;
  cursor: pointer;
}
header .right .utilities a i,
header .right .utilities button i {
  margin-right: 0;
}
header .right button.user {
  display: flex;
  align-items: center;
  border: none;
  height: 100%;
  padding: 0 var(--px18);
  background-color: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 0;
}
header .right button.user i {
  margin-right: 0;
}
header .right button.user .label {
  text-align: right;
  color: var(--header-link);
}
header .right button.user .label .name {
  font-size: var(--px16);
  font-weight: var(--regular);
}
header .right button.user .label .group {
  font-size: var(--px12);
  font-weight: var(--regular);
}
header .right button.user .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--header-link);
  color: var(--header-bg);
  border-radius: 50%;
  width: var(--px30);
  height: var(--px30);
  margin: 0 var(--px12);
  font-weight: var(--light);
}
header .right button.user .icon {
  color: var(--header-link);
}
/*
88888888888 d8b 888    888               888888b.                                             
    888     Y8P 888    888               888  "88b                                            
    888         888    888               888  .88P                                            
    888     888 888888 888  .d88b.       8888888K.   8888b.  888d888                          
    888     888 888    888 d8P  Y8b      888  "Y88b     "88b 888P"                            
    888     888 888    888 88888888      888    888 .d888888 888                              
    888     888 Y88b.  888 Y8b.          888   d88P 888  888 888                              
    888     888  "Y888 888  "Y8888       8888888P"  "Y888888 888                              
                                                                                     
888888b.                                 888                                         888      
888  "88b                                888                                         888      
888  .88P                                888                                         888      
8888888K.  888d888 .d88b.   8888b.   .d88888  .d8888b 888d888 888  888 88888b.d88b.  88888b.  
888  "Y88b 888P"  d8P  Y8b     "88b d88" 888 d88P"    888P"   888  888 888 "888 "88b 888 "88b 
888    888 888    88888888 .d888888 888  888 888      888     888  888 888  888  888 888  888 
888   d88P 888    Y8b.     888  888 Y88b 888 Y88b.    888     Y88b 888 888  888  888 888 d88P 
8888888P"  888     "Y8888  "Y888888  "Y88888  "Y8888P 888      "Y88888 888  888  888 88888P" 
*/
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--px24) 0 var(--px12) 0;
  /*	border-bottom: 1px solid var(--title-border);*/
  /*	margin-bottom: var(--px24);*/
}
.title-bar .breadcrumb {
  display: flex;
  align-items: center;
}
.title-bar .breadcrumb .home {
  display: flex;
  align-items: center;
}
.title-bar .breadcrumb .home a {
  text-decoration: none;
}
.title-bar .breadcrumb .home a svg {
  fill: var(--text);
  width: var(--px20);
  height: var(--px20);
}
.title-bar .breadcrumb .home::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Pro';
  font-size: var(--px13);
  color: var(--grey570);
  width: var(--px32);
  text-align: center;
}
.title-bar .breadcrumb .current {
  font-size: var(--px24);
  font-weight: var(--semibold);
}
.title-bar .actions {
  display: flex;
  gap: var(--px12);
}
/*
8888888888 d8b 888 888                             
888        Y8P 888 888                             
888            888 888                             
8888888    888 888 888888 .d88b.  888d888 .d8888b  
888        888 888 888   d8P  Y8b 888P"   88K      
888        888 888 888   88888888 888     "Y8888b. 
888        888 888 Y88b. Y8b.     888          X88 
888        888 888  "Y888 "Y8888  888      88888P'
*/
.filters {
  display: flex;
  gap: var(--px8);
  margin-bottom: var(--px12);
  margin-top: var(--px12);
}
.filters .search {
  position: relative;
}
.filters .search i {
  font-size: var(--px14);
  position: absolute;
  pointer-events: none;
  left: var(--px10);
  top: var(--px8);
}
.filters .search input {
  border: none;
  box-sizing: border-box;
  font-size: var(--px13);
  border-radius: var(--px4);
  line-height: var(--px16);
  padding: var(--px7);
  border: 1px solid var(--grey350);
  width: 34px;
  outline: none;
  transition: width var(--transition);
}
.filters .search input:hover {
  border: 1px solid var(--accent);
}
.filters .search input:focus,
.filters .search input:not(:placeholder-shown) {
  width: 190px;
  padding: var(--px7) var(--px10) var(--px7) var(--px32);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
/*
88888888888       888               
    888           888               
    888           888               
    888   8888b.  88888b.  .d8888b  
    888      "88b 888 "88b 88K      
    888  .d888888 888  888 "Y8888b. 
    888  888  888 888 d88P      X88 
    888  "Y888888 88888P"   88888P' 
*/
.tab-menu {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey110);
  align-items: center;
}
.tab-menu .tabs {
  display: flex;
  gap: var(--px32);
}
.tab-menu .tabs .tab {
  position: relative;
  box-sizing: border-box;
  font-size: var(--px16);
  font-weight: var(--semibold);
  color: var(--grey570);
  background: none;
  padding: var(--px16) 0;
  border-radius: 0;
  border-bottom: 4px solid transparent;
}
.tab-menu .tabs .tab .count {
  font-size: var(--px13);
  font-weight: var(--medium);
  color: var(--grey570);
  margin-left: var(--px4);
}
.tab-menu .tabs .tab i {
  font-size: var(--px11);
  margin-left: var(--px12);
  margin-right: 0;
}
.tab-menu .tabs .tab.active {
  color: var(--text);
  border-bottom: 4px solid var(--accent);
}
.tab-menu .tabs .tab::after {
  position: absolute;
  top: var(--px8);
  right: calc(var(--px12) * -1);
  content: '';
  width: var(--px8);
  height: var(--px8);
  border-radius: 50%;
  background-color: var(--alert);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  transition-delay: 0.5s;
}
.tab-menu .tabs .tab.alert::after {
  opacity: 1;
}
.tab-content .tab {
  display: none;
  position: relative;
}
.tab-content .tab.active {
  display: block;
}
/*
       d8888                                      888 d8b                   
      d88888                                      888 Y8P                   
     d88P888                                      888                       
    d88P 888  .d8888b .d8888b .d88b.  888d888 .d88888 888  .d88b.  88888b.  
   d88P  888 d88P"   d88P"   d88""88b 888P"  d88" 888 888 d88""88b 888 "88b 
  d88P   888 888     888     888  888 888    888  888 888 888  888 888  888 
 d8888888888 Y88b.   Y88b.   Y88..88P 888    Y88b 888 888 Y88..88P 888  888 
d88P     888  "Y8888P "Y8888P "Y88P"  888     "Y88888 888  "Y88P"  888  888 
*/
.accordion {
  border-radius: var(--px8);
  overflow: hidden;
}
.accordion .item .header {
  background-color: var(--grey40);
  padding: var(--px8) var(--px8) var(--px8) var(--px16);
  border-bottom: 1px solid var(--grey150);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--px50);
  box-sizing: border-box;
  cursor: pointer;
}
.accordion .item .header .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
}
.accordion .item .header .title::before {
  display: inline-flex;
  content: '\f054';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: var(--px14);
  margin-right: var(--px12);
  transform: rotate(0deg);
  transition: transform var(--transition);
}
.accordion .item .content {
  display: none;
  background-color: var(--grey90);
  padding: var(--px20);
  /*			border-bottom: 1px solid var(--grey150);*/
}
.accordion .item.active .header .title::before {
  transform: rotate(90deg);
}
.accordion .item.active .content {
  /*				display: flex;*/
}
.accordion .item:last-child .header {
  border-bottom: 0px;
}
.accordion .item:last-child .content {
  border-bottom: 0px;
}
/*
8888888b.                                888                                 
888  "Y88b                               888                                 
888    888                               888                                 
888    888 888d888 .d88b.  88888b.   .d88888  .d88b.  888  888  888 88888b.  
888    888 888P"  d88""88b 888 "88b d88" 888 d88""88b 888  888  888 888 "88b 
888    888 888    888  888 888  888 888  888 888  888 888  888  888 888  888 
888  .d88P 888    Y88..88P 888 d88P Y88b 888 Y88..88P Y88b 888 d88P 888  888 
8888888P"  888     "Y88P"  88888P"   "Y88888  "Y88P"   "Y8888888P"  888  888 
                           888                                               
                           888                                               
                           888 
*/
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.dropdown-wrapper .dropdown {
  position: absolute;
  margin-top: var(--px8);
  background-color: var(--bg);
  border-radius: var(--px8);
  box-shadow: 0 var(--px4) var(--px8) color-mix(in srgb, var(--black) 25%, transparent);
  padding: var(--px8);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 9;
}
.dropdown-wrapper .dropdown.active {
  opacity: 1;
  pointer-events: auto;
}
.dropdown-wrapper .dropdown .item {
  background: none;
  display: inline-flex;
  align-items: center;
  border-radius: var(--px4);
  font-size: var(--px16);
  font-weight: var(--medium);
  line-height: var(--px20);
  height: var(--px32);
  padding: 0 var(--px8);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-wrapper .dropdown .item .status {
  display: inline-block;
  width: var(--px12);
  height: var(--px12);
  border-radius: 50%;
  margin-right: var(--px8);
}
.dropdown-wrapper .dropdown .item .status.red {
  background-color: var(--red);
}
.dropdown-wrapper .dropdown .item .status.yellow {
  background-color: var(--yellow);
}
.dropdown-wrapper .dropdown .item .status.green {
  background-color: var(--green);
}
.dropdown-wrapper .dropdown .item:hover {
  background-color: var(--grey60);
}
.dropdown-wrapper .dropdown.small .item {
  font-size: var(--px13);
}
.dropdown-wrapper button i {
  margin-right: 0;
  margin-left: var(--px12);
}
/*
 .d8888b.  888      d8b                   
d88P  Y88b 888      Y8P                   
888    888 888                            
888        88888b.  888 88888b.  .d8888b  
888        888 "88b 888 888 "88b 88K      
888    888 888  888 888 888  888 "Y8888b. 
Y88b  d88P 888  888 888 888 d88P      X88 
 "Y8888P"  888  888 888 88888P"   88888P' 
                        888               
                        888               
                        888 
*/
.chips {
  display: flex;
}
.chips .chip {
  display: flex;
  align-items: center;
  font-size: var(--px13);
  font-weight: var(--medium);
  height: var(--px32);
  padding: 0 var(--px16);
  box-sizing: border-box;
  border: 1px solid var(--grey350);
  border-radius: var(--px16);
  margin: var(--px4) var(--px4) 0 0;
  background-color: var(--grey90);
}
/*
888888b.                 888                   
888  "88b                888                   
888  .88P                888                   
8888888K.   8888b.   .d88888  .d88b.   .d88b.  
888  "Y88b     "88b d88" 888 d88P"88b d8P  Y8b 
888    888 .d888888 888  888 888  888 88888888 
888   d88P 888  888 Y88b 888 Y88b 888 Y8b.     
8888888P"  "Y888888  "Y88888  "Y88888  "Y8888  
                                  888          
                             Y8b d88P          
                              "Y88P" 
*/
.badge {
  font-size: var(--px13);
  font-weight: var(--semibold);
  color: var(--bg);
  padding: var(--px4) var(--px8);
  border-radius: var(--px96);
  line-height: var(--px13);
}
.badge.red {
  background-color: var(--red);
}
.badge.green {
  background-color: var(--green);
}
.badge.yellow {
  background-color: var(--yellow);
}
.badge.grey {
  background-color: var(--grey570);
}
/*
888b     d888               888          888 
8888b   d8888               888          888 
88888b.d88888               888          888 
888Y88888P888  .d88b.   .d88888  8888b.  888 
888 Y888P 888 d88""88b d88" 888     "88b 888 
888  Y8P  888 888  888 888  888 .d888888 888 
888   "   888 Y88..88P Y88b 888 888  888 888 
888       888  "Y88P"   "Y88888 "Y888888 888
*/
body:has(.modal.active) {
  overflow: hidden;
}
.modal {
  display: none;
  display: flex;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  transition: background-color var(--transition-slow);
}
.modal .dialog {
  background-color: var(--bg);
  width: 750px;
  max-height: calc(100vh - 80px);
  border-radius: var(--px8);
  overflow-y: scroll;
  transform: scale(0);
  transition: transform var(--transition-slow);
}
.modal .dialog .top {
  padding: var(--px24) var(--px32) var(--px24) var(--px32);
  position: sticky;
  top: 0;
  background-color: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal .dialog .content {
  /*			height: 100%;*/
  padding: 0 var(--px32) var(--px20) var(--px32);
}
.modal.fullscreen .dialog {
  width: 100vw;
  height: 100vh;
  max-height: initial;
  border-radius: 0;
}
.modal.zoom {
  /*		position: absolute;*/
  /*		top: 0;*/
  /*		left: 0;*/
  /*		width: 100%;*/
  /*		height: 100%;*/
}
.modal.zoom .dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.modal.zoom .dialog .top {
  background-color: transparent;
}
.modal.zoom .dialog .top .action {
  background-color: var(--black);
  color: var(--white);
  border-radius: var(--px96);
}
.modal.zoom .dialog .content {
  max-width: 100%;
  overflow: scroll;
}
.modal.zoom .dialog .content img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  width: auto;
}
.modal.active {
  display: flex;
  opacity: 1;
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  pointer-events: initial;
}
.modal.active .dialog {
  transform: scale(1);
}
/*
 .d8888b.  888                                        
d88P  Y88b 888                                        
Y88b.      888                                        
 "Y888b.   888888  8888b.   .d88b.   .d88b.  .d8888b  
    "Y88b. 888        "88b d88P"88b d8P  Y8b 88K      
      "888 888    .d888888 888  888 88888888 "Y8888b. 
Y88b  d88P Y88b.  888  888 Y88b 888 Y8b.          X88 
 "Y8888P"   "Y888 "Y888888  "Y88888  "Y8888   88888P' 
                                888                   
                           Y8b d88P                   
                            "Y88P"
*/
.stages {
  display: flex;
  gap: var(--px2);
  /*	width: 100%;*/
}
.stages .stage {
  display: flex;
  flex-direction: column;
  background-color: var(--grey40);
  flex-grow: 1;
  min-width: 8rem;
}
.stages .stage:first-child {
  border-radius: var(--px8) 0 0 var(--px8);
  overflow: hidden;
}
.stages .stage:last-child {
  border-radius: 0 var(--px8) var(--px8) 0;
  overflow: hidden;
}
.stages .stage .name {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--px40);
  padding: 0 var(--px4);
  /*			background-color: var(--grey40);*/
}
.stages .stage .name .icon {
  margin-right: var(--px8);
}
.stages .stage .name .label {
  font-size: 13px;
  font-weight: var(--medium);
}
.stages .stage .status {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--px40);
  font-size: 13px;
  font-weight: var(--medium);
}
.stages .stage .status.complete {
  background-color: var(--complete);
  color: var(--bg);
}
.stages .stage .status.ready {
  background-color: var(--ready);
  color: var(--bg);
}
.stages .stage .status.processing {
  background-color: var(--processing);
  color: var(--bg);
}
.stages .stage .status.pending {
  background-color: var(--pending);
  color: var(--grey350);
}
/*
  _____                      
 |  __ \                     
 | |__) |_ _  __ _  ___  ___ 
 |  ___/ _` |/ _` |/ _ \/ __|
 | |  | (_| | (_| |  __/\__ \
 |_|   \__,_|\__, |\___||___/
              __/ |          
             |___/  
*/
/*
  888888          888               
    "88b          888               
     888          888               
     888  .d88b.  88888b.  .d8888b  
     888 d88""88b 888 "88b 88K      
     888 888  888 888  888 "Y8888b. 
     88P Y88..88P 888 d88P      X88 
     888  "Y88P"  88888P"   88888P' 
   .d88P                            
 .d88P"                             
888P"     
*/
#dashboard-tabs {
  position: sticky;
  top: 50px;
  background-color: var(--bg);
  z-index: 1;
}
#jobs {
  position: relative;
  /*	height: 1200px;*/
}
#jobs thead {
  /*			position: sticky;*/
  /*			top: 10px;*/
}
#jobs thead tr {
  background-color: var(--bg);
}
/*
  888888          888      
    "88b          888      
     888          888      
     888  .d88b.  88888b.  
     888 d88""88b 888 "88b 
     888 888  888 888  888 
     88P Y88..88P 888 d88P 
     888  "Y88P"  88888P"  
   .d88P                   
 .d88P"                    
888P"   
*/
#job-tabs {
  position: sticky;
  top: 50px;
  background-color: var(--bg);
  z-index: 1;
  /*	margin-bottom: var(--px24);*/
}
.tab-content[data-tab-group="job"] .tab {
  padding-top: var(--px24);
}
#job-summary #job-details {
  width: 350px;
}
#job-summary #job-details .thumbnail {
  width: 100%;
  border-radius: var(--px4);
  margin-bottom: var(--px8);
}
#job-summary #job-details .details-list {
  display: flex;
  flex-direction: column;
}
#job-summary #job-details .details-list .item {
  display: flex;
  align-items: center;
  gap: var(--px12);
  font-size: var(--px13);
  line-height: var(--px16);
  height: var(--px32);
  /*				padding: var(--px8) 0;*/
}
#job-summary #job-details .details-list .item .label {
  width: 33.333%;
  font-weight: var(--semibold);
}
#summary-top {
  /*	position: sticky;*/
  /*	top: 124px;*/
  gap: var(--px16);
  /*	flex-wrap: wrap;*/
}
#transactions-summary {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 20rem;
  padding: var(--px20);
}
#transactions-summary .top {
  display: flex;
  justify-content: space-between;
}
#transactions-summary .top .title {
  font-weight: var(--semibold);
  font-size: var(--px13);
}
#transactions-summary .top .title .count {
  font-weight: var(--regular);
  margin-left: var(--px8);
}
#transactions-summary .top .completed {
  font-size: var(--px13);
  color: var(--grey570);
}
.time-date {
  display: flex;
  height: var(--px80);
}
.time-date > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: var(--px128);
}
.time-date .label {
  font-weight: var(--semibold);
  font-size: var(--px13);
  display: flex;
  align-items: center;
}
.time-date .label i {
  font-size: var(--px20);
  margin-right: var(--px8);
}
.time-date .value {
  font-size: var(--px13);
}
.time-date .date {
  color: var(--white);
  background-color: var(--grey750);
  border-radius: 0 var(--px8) var(--px8) 0;
}
#job-transactions {
  background-color: var(--grey40);
  border-radius: var(--px8) var(--px8) 0 0;
}
#job-transactions .title {
  font-size: var(--px24);
  font-weight: var(--semibold);
  padding: var(--px20) var(--px20) 0 var(--px20);
}
.transactions-table {
  overflow-x: scroll;
}
.transactions-table::-webkit-scrollbar {
  display: none;
}
.transactions-table table thead tr th {
  height: var(--px40);
  vertical-align: middle;
  text-align: left;
  font-size: var(--px11);
  font-weight: var(--semibold);
  padding: 0 var(--px16);
  border-bottom: 1px solid var(--grey150);
}
.transactions-table table thead tr th:first-child {
  border-left: 8px solid transparent;
}
.transactions-table table tbody tr.type td:first-child {
  border-left: 8px solid;
}
.transactions-table table tbody tr.type.bedc td:first-child {
  border-left-color: var(--accent);
}
.transactions-table table tbody tr td {
  font-size: var(--px13);
  vertical-align: middle;
  padding: 0 var(--px16);
  white-space: nowrap;
  height: var(--px40);
  border-bottom: 1px solid var(--grey150);
}
.transactions-table table tbody tr td .type {
  width: var(--px8);
  height: var(--px40);
}
.transactions-table table tbody tr td .type.bedc {
  background-color: var(--accent);
}
.transactions-table table tbody tr:hover td {
  background-color: var(--grey90);
  cursor: pointer;
}
#floor-plan-match-widget .title {
  font-size: var(--px24);
  font-weight: var(--semibold);
  padding: var(--px20) var(--px20) 0 var(--px20);
  /*		vertical-align: middle;*/
  display: flex;
  align-items: center;
}
#floor-plan-match-widget .title .badge {
  margin-left: var(--px8);
  /*			vertical-align: top;*/
}
#floor-plan-match-widget .pages {
  padding: var(--px20) var(--px20) var(--px20) var(--px20);
  display: flex;
  gap: var(--px12);
}
#floor-plan-match-widget .pages .page {
  background: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--grey110);
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match-widget .pages .page .label {
  position: absolute;
  bottom: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match-widget .pages .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match-widget .pages .page img {
  height: var(--px128);
  width: auto;
}
#floor-plan-match-widget .pages .page:hover {
  border: 1px solid var(--accent);
}
#plan-match-widget .title {
  font-size: var(--px24);
  font-weight: var(--semibold);
  padding: var(--px20) var(--px20) var(--px16) var(--px20);
  display: flex;
  align-items: center;
  display: inline-block;
}
#plan-match-widget .title:hover {
  color: var(--accent);
  cursor: pointer;
}
#plan-match-widget .matches {
  display: flex;
  flex-direction: column;
}
#plan-match-widget .matches .match {
  display: flex;
  padding: var(--px8) var(--px20);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--grey150);
  font-size: var(--px13);
}
#plan-match-widget .matches .match .left {
  display: flex;
  align-items: center;
}
#plan-match-widget .matches .match .left .badge {
  margin-right: var(--px8);
}
#plan-match-widget .matches .match:hover {
  background-color: var(--grey90);
  cursor: pointer;
}
#plan-match-widget .matches .match:last-child {
  border-radius: 0 0 var(--px8) var(--px8);
}
/*
8888888888 888                                8888888b.  888                   
888        888                                888   Y88b 888                   
888        888                                888    888 888                   
8888888    888  .d88b.   .d88b.  888d888      888   d88P 888  8888b.  88888b.  
888        888 d88""88b d88""88b 888P"        8888888P"  888     "88b 888 "88b 
888        888 888  888 888  888 888          888        888 .d888888 888  888 
888        888 Y88..88P Y88..88P 888          888        888 888  888 888  888 
888        888  "Y88P"   "Y88P"  888          888        888 "Y888888 888  888 
                                  
888b     d888          888            888                                      
8888b   d8888          888            888                                      
88888b.d88888          888            888                                      
888Y88888P888  8888b.  888888 .d8888b 88888b.                                  
888 Y888P 888     "88b 888   d88P"    888 "88b                                 
888  Y8P  888 .d888888 888   888      888  888                                 
888   "   888 888  888 Y88b. Y88b.    888  888                                 
888       888 "Y888888  "Y888 "Y8888P 888  888   
*/
#floor-plan-match #source {
  width: 280px;
  position: sticky;
  top: 126px;
}
#floor-plan-match #source .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px20);
  border-bottom: 1px solid var(--grey150);
}
#floor-plan-match #source .pages {
  padding: var(--px20);
  display: flex;
  flex-direction: column;
  gap: var(--px12);
}
#floor-plan-match #source .pages .page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match #source .pages .page.active {
  border: 4px solid var(--accent);
}
#floor-plan-match #source .pages .page:hover:not(.active) {
  border: 4px solid var(--grey150);
}
#floor-plan-match #source .pages .page .label {
  position: absolute;
  bottom: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match #source .pages .page img {
  width: 100%;
  height: auto;
}
#floor-plan-match #results {
  width: calc(100vw - 280px - 80px);
}
#floor-plan-match #results .matches {
  font-size: var(--px16);
  font-weight: var(--semibold);
  margin-bottom: var(--px12);
}
#floor-plan-match #results .result {
  width: 100%;
  margin-bottom: var(--px36);
}
#floor-plan-match #results .result .pages {
  position: relative;
  display: flex;
  gap: var(--px12);
}
#floor-plan-match #results .result .pages .score {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match #results .result .pages .page {
  width: 33.333%;
  border: 1px solid var(--grey110);
  border-radius: var(--px8);
  overflow: hidden;
  padding: 0;
  transition: border var(--transition);
}
#floor-plan-match #results .result .pages .page img {
  width: 100%;
  height: auto;
}
#floor-plan-match #results .result .pages .page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match #results .result .details {
  margin: var(--px12) 0;
}
#floor-plan-match #results .result .details .item {
  font-size: var(--px13);
  font-weight: var(--regular);
  display: flex;
  align-items: center;
  height: var(--px32);
}
#floor-plan-match #results .result .details .item .label {
  width: var(--px96);
  font-weight: var(--semibold);
}
#floor-plan-match #results .result .details .actions {
  margin-top: var(--px12);
}
#floor-plan-match2 {
  position: relative;
}
#floor-plan-match2 #source {
  width: 280px;
  position: sticky;
  top: 126px;
}
#floor-plan-match2 #source .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px20);
  border-bottom: 1px solid var(--grey150);
}
#floor-plan-match2 #source .pages {
  padding: var(--px20);
  display: flex;
  flex-direction: column;
  gap: var(--px12);
}
#floor-plan-match2 #source .pages .page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match2 #source .pages .page.active {
  border: 4px solid var(--accent);
}
#floor-plan-match2 #source .pages .page:hover:not(.active) {
  border: 4px solid var(--grey150);
}
#floor-plan-match2 #source .pages .page .label {
  position: absolute;
  bottom: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match2 #source .pages .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match2 #source .pages .page img {
  width: 100%;
  height: auto;
}
#floor-plan-match2 #results {
  width: calc(100vw - 280px - 80px);
}
#floor-plan-match2 #results .match-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--px12);
}
#floor-plan-match2 #results .match-title-bar .left {
  display: flex;
  align-items: baseline;
}
#floor-plan-match2 #results .match-title-bar .left .matches {
  font-size: var(--px16);
  font-weight: var(--semibold);
}
#floor-plan-match2 #results .match-title-bar .left .timestamp {
  font-size: var(--px13);
  margin-left: var(--px8);
  color: var(--grey350);
}
#floor-plan-match2 #results .result {
  width: 100%;
  margin-bottom: var(--px36);
  display: flex;
  gap: var(--px20);
}
#floor-plan-match2 #results .result .left {
  width: calc(100% - 400px);
}
#floor-plan-match2 #results .result .left .page {
  background: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--grey110);
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match2 #results .result .left .page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match2 #results .result .left .page img {
  /*						height: var(--px320);*/
  /*						width: auto;*/
  height: auto;
  width: 100%;
}
#floor-plan-match2 #results .result .left .page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match2 #results .result .left .page::after {
  content: '\e0a4';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px64);
  font-weight: 300;
  transform: rotate(90deg);
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match2 #results .result .left .page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match2 #results .result .left .page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match2 #results .result .left .page:hover::after {
  opacity: 1;
}
#floor-plan-match2 #results .result .right {
  width: 400px;
}
#floor-plan-match2 #results .result .right .other-pages {
  display: flex;
  gap: var(--px8);
  flex-wrap: wrap;
}
#floor-plan-match2 #results .result .right .other-pages .page {
  background: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--grey110);
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match2 #results .result .right .other-pages .page img {
  height: var(--px80);
  width: auto;
}
#floor-plan-match2 #results .result .right .other-pages .page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match2 #results .result .right .other-pages .page::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px24);
  font-weight: 300;
  transform: rotate(90deg);
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match2 #results .result .right .other-pages .page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match2 #results .result .right .other-pages .page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match2 #results .result .right .other-pages .page:hover::after {
  opacity: 1;
}
#floor-plan-match2 #results .result .right .details {
  margin: var(--px20) 0;
  display: flex;
  flex-direction: column;
  gap: var(--px8);
}
#floor-plan-match2 #results .result .right .details a {
  text-decoration: none;
  cursor: pointer;
}
#floor-plan-match2 #results .result .right .details a:hover {
  text-decoration: underline;
  color: var(--accent);
}
#floor-plan-match2 #results .result .right .details .item {
  display: flex;
}
#floor-plan-match2 #results .result .right .details .item .label {
  font-size: var(--px13);
  font-weight: var(--semibold);
  /*							width: var(--px96);*/
  width: var(--px128);
}
#floor-plan-match2 #results .result .right .details .item .value {
  font-size: var(--px13);
}
#floor-plan-match2 #results .result .right .details .item .value .transaction {
  display: flex;
  align-items: center;
  margin-bottom: var(--px4);
}
#floor-plan-match2 #results .result .right .details .item .value .transaction .status {
  display: inline-block;
  width: var(--px12);
  height: var(--px12);
  border-radius: 50%;
  margin-right: var(--px8);
}
#floor-plan-match2 #results .result .right .details .item .value .transaction .status.red {
  background-color: var(--red);
}
#floor-plan-match2 #results .result .right .details .item .value .transaction .status.yellow {
  background-color: var(--yellow);
}
#floor-plan-match2 #results .result .right .details .item .value .transaction .status.green {
  background-color: var(--green);
}
.modal[data-modal="match"] sl-split-panel {
  height: calc(100vh - 110px);
  border: 1px solid var(--grey150);
  border-radius: var(--px8);
  overflow: hidden;
}
.modal[data-modal="match"] sl-split-panel slot {
  background-color: var(--grey570);
}
.modal[data-modal="match"] sl-split-panel .label {
  position: absolute;
  top: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
.modal[data-modal="match"] sl-split-panel .label.left {
  left: var(--px8);
}
.modal[data-modal="match"] sl-split-panel .label.right {
  right: var(--px8);
}
.modal[data-modal="match"] sl-split-panel .page img {
  width: 100%;
  height: auto;
}
#floor-plan-match3 {
  position: relative;
}
#floor-plan-match3 #source {
  /*		width: 280px;*/
  position: sticky;
  top: 126px;
  max-height: calc(100vh - 146px);
  overflow-y: auto;
}
#floor-plan-match3 #source .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px20);
  border-bottom: 1px solid var(--grey150);
}
#floor-plan-match3 #source .selected-page-container {
  padding: var(--px20) var(--px20) var(--px8) var(--px20);
  position: relative;
}
#floor-plan-match3 #source .selected-page-container .selected-page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  border: 1px solid var(--grey110);
  font-size: 0;
  cursor: pointer;
}
#floor-plan-match3 #source .selected-page-container .selected-page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match3 #source .selected-page-container .selected-page img {
  width: 100%;
  height: auto;
}
#floor-plan-match3 #source .selected-page-container .selected-page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match3 #source .selected-page-container .selected-page::after {
  top: 0;
  left: 0;
  content: '\f00e';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px64);
  font-weight: 300;
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match3 #source .selected-page-container .selected-page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match3 #source .selected-page-container .selected-page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match3 #source .selected-page-container .selected-page:hover::after {
  opacity: 1;
}
#floor-plan-match3 #source .pages {
  padding: 0 var(--px20) var(--px20) var(--px20);
  display: flex;
  /*			flex-direction: column;*/
  gap: var(--px12);
}
#floor-plan-match3 #source .pages .page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  font-family: inherit;
  outline: 1px solid var(--grey150);
  outline-offset: -4px;
}
#floor-plan-match3 #source .pages .page.active {
  border: 4px solid var(--accent);
  outline: 1px solid transparent;
}
#floor-plan-match3 #source .pages .page:hover:not(.active) {
  outline: 1px solid var(--accent);
  /*					border: 4px solid var(--grey150);*/
}
#floor-plan-match3 #source .pages .page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match3 #source .pages .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match3 #source .pages .page img {
  /*					width: 100%;*/
  height: 80px;
  width: auto;
}
#floor-plan-match3 #results {
  /*		width: calc(100vw - 280px - 80px);*/
  padding: 0 var(--px20);
}
#floor-plan-match3 #results .match-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--px12);
  padding: var(--px12) 0;
}
#floor-plan-match3 #results .match-title-bar .left {
  display: flex;
  align-items: baseline;
}
#floor-plan-match3 #results .match-title-bar .left .matches {
  font-size: var(--px16);
  font-weight: var(--semibold);
}
#floor-plan-match3 #results .match-title-bar .left .timestamp {
  font-size: var(--px13);
  margin-left: var(--px8);
  color: var(--grey350);
}
#floor-plan-match3 #results .result {
  width: 100%;
  margin-bottom: var(--px64);
  display: flex;
  gap: var(--px20);
  flex-direction: column;
}
#floor-plan-match3 #results .result .top {
  /*				width: calc(100% - 400px);*/
}
#floor-plan-match3 #results .result .top .page {
  background: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--grey110);
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match3 #results .result .top .page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match3 #results .result .top .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match3 #results .result .top .page img {
  /*						height: var(--px320);*/
  /*						width: auto;*/
  height: auto;
  width: 100%;
}
#floor-plan-match3 #results .result .top .page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match3 #results .result .top .page::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px64);
  font-weight: 300;
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match3 #results .result .top .page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match3 #results .result .top .page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match3 #results .result .top .page:hover::after {
  opacity: 1;
}
#floor-plan-match3 #results .result .bottom {
  /*				width: 400px;*/
}
#floor-plan-match3 #results .result .bottom .other-pages {
  display: flex;
  gap: var(--px8);
  flex-wrap: wrap;
}
#floor-plan-match3 #results .result .bottom .other-pages .page {
  background: none;
  position: relative;
  padding: 0;
  outline: 1px solid var(--grey150);
  outline-offset: -4px;
  /*						border: 4px solid var(--grey110);*/
  border: 4px solid transparent;
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match3 #results .result .bottom .other-pages .page img {
  height: var(--px80);
  width: auto;
}
#floor-plan-match3 #results .result .bottom .other-pages .page:hover:not(.active) {
  /*							border: 4px solid var(--accent);*/
  outline: 1px solid var(--accent);
}
#floor-plan-match3 #results .result .bottom .other-pages .page:hover:not(.active)::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match3 #results .result .bottom .other-pages .page:hover:not(.active)::after {
  opacity: 1;
}
#floor-plan-match3 #results .result .bottom .other-pages .page.active {
  border: 4px solid var(--accent);
}
#floor-plan-match3 #results .result .bottom .details {
  margin: var(--px20) 0;
  display: flex;
  flex-direction: column;
  gap: var(--px8);
}
#floor-plan-match3 #results .result .bottom .details a {
  text-decoration: none;
  cursor: pointer;
}
#floor-plan-match3 #results .result .bottom .details a:hover {
  text-decoration: underline;
  color: var(--accent);
}
#floor-plan-match3 #results .result .bottom .details .item {
  display: flex;
}
#floor-plan-match3 #results .result .bottom .details .item .label {
  font-size: var(--px13);
  font-weight: var(--semibold);
  /*							width: var(--px96);*/
  width: var(--px128);
}
#floor-plan-match3 #results .result .bottom .details .item .value {
  font-size: var(--px13);
}
#floor-plan-match3 #results .result .bottom .details .item .value .transaction {
  display: flex;
  align-items: center;
  margin-bottom: var(--px4);
}
#floor-plan-match3 #results .result .bottom .details .item .value .transaction .status {
  display: inline-block;
  width: var(--px12);
  height: var(--px12);
  border-radius: 50%;
  margin-right: var(--px8);
}
#floor-plan-match3 #results .result .bottom .details .item .value .transaction .status.red {
  background-color: var(--red);
}
#floor-plan-match3 #results .result .bottom .details .item .value .transaction .status.yellow {
  background-color: var(--yellow);
}
#floor-plan-match3 #results .result .bottom .details .item .value .transaction .status.green {
  background-color: var(--green);
}
#floor-plan-match4 {
  position: relative;
}
#floor-plan-match4 #plan-match-title-bar {
  margin-bottom: var(--px20);
}
#floor-plan-match4 #plan-match-title-bar .matches-title .meta {
  margin-left: var(--px8);
}
#floor-plan-match4 #source {
  /*		width: 280px;*/
  position: sticky;
  top: 126px;
  max-height: calc(100vh - 146px);
  overflow-y: auto;
}
#floor-plan-match4 #source .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px20);
  border-bottom: 1px solid var(--grey150);
}
#floor-plan-match4 #source .selected-page-container {
  padding: var(--px20) var(--px20) var(--px20) var(--px20);
  position: relative;
}
#floor-plan-match4 #source .selected-page-container .selected-page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  border: 1px solid var(--grey110);
  font-size: 0;
  cursor: pointer;
}
#floor-plan-match4 #source .selected-page-container .selected-page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match4 #source .selected-page-container .selected-page img {
  width: 100%;
  height: auto;
}
#floor-plan-match4 #source .selected-page-container .selected-page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match4 #source .selected-page-container .selected-page::after {
  top: 0;
  left: 0;
  content: '\f00e';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px64);
  font-weight: 300;
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match4 #source .selected-page-container .selected-page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match4 #source .selected-page-container .selected-page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match4 #source .selected-page-container .selected-page:hover::after {
  opacity: 1;
}
#floor-plan-match4 #source .pages {
  padding: 0 var(--px20) var(--px20) var(--px20);
  display: flex;
  /*			flex-direction: column;*/
  gap: var(--px12);
}
#floor-plan-match4 #source .pages .page {
  position: relative;
  padding: 0;
  border-radius: var(--px4);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: transparent;
  transition: border var(--transition);
  font-family: inherit;
  outline: 1px solid var(--grey150);
  outline-offset: -4px;
}
#floor-plan-match4 #source .pages .page.active {
  border: 4px solid var(--accent);
  outline: 1px solid transparent;
}
#floor-plan-match4 #source .pages .page:hover:not(.active) {
  outline: 1px solid var(--accent);
  /*					border: 4px solid var(--grey150);*/
}
#floor-plan-match4 #source .pages .page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match4 #source .pages .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match4 #source .pages .page img {
  /*					width: 100%;*/
  height: 80px;
  width: auto;
}
#floor-plan-match4 #results {
  /*		width: calc(100vw - 280px - 80px);*/
  /*		padding: 0 var(--px20);*/
}
#floor-plan-match4 #results .result {
  width: 100%;
  margin-bottom: var(--px32);
  display: flex;
  gap: var(--px20);
  flex-direction: column;
}
#floor-plan-match4 #results .result .title {
  font-size: var(--px16);
  font-weight: var(--semibold);
  padding: var(--px12) var(--px20);
  border-bottom: 1px solid var(--grey150);
}
#floor-plan-match4 #results .result .title .badge {
  margin-right: var(--px8);
}
#floor-plan-match4 #results .result .title a {
  cursor: pointer;
}
#floor-plan-match4 #results .result .title a:hover {
  color: var(--accent);
}
#floor-plan-match4 #results .result .top {
  /*				width: calc(100% - 400px);*/
  padding: 0 var(--px20) 0 var(--px20);
}
#floor-plan-match4 #results .result .top .page {
  background: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--grey110);
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match4 #results .result .top .page .label {
  position: absolute;
  top: var(--px8);
  left: var(--px8);
  padding: var(--px8);
  background-color: color-mix(in srgb, var(--text) 80%, transparent);
  color: var(--bg);
  border-radius: var(--px4);
  font-size: var(--px13);
  font-weight: var(--medium);
}
#floor-plan-match4 #results .result .top .page .label .meta {
  font-size: var(--px11);
  font-weight: var(--regular);
  margin-left: var(--px8);
  opacity: 0.8;
}
#floor-plan-match4 #results .result .top .page img {
  /*						height: var(--px320);*/
  /*						width: auto;*/
  height: auto;
  width: 100%;
}
#floor-plan-match4 #results .result .top .page::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition);
}
#floor-plan-match4 #results .result .top .page::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: var(--px64);
  font-weight: 300;
  opacity: 0;
  transition: opacity var(--transition);
}
#floor-plan-match4 #results .result .top .page:hover {
  border: 1px solid var(--accent);
}
#floor-plan-match4 #results .result .top .page:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match4 #results .result .top .page:hover::after {
  opacity: 1;
}
#floor-plan-match4 #results .result .bottom {
  /*				width: 400px;*/
  padding: 0 var(--px20) var(--px20) var(--px20);
}
#floor-plan-match4 #results .result .bottom .other-pages {
  display: flex;
  gap: var(--px8);
  flex-wrap: wrap;
}
#floor-plan-match4 #results .result .bottom .other-pages .page {
  background: none;
  position: relative;
  padding: 0;
  outline: 1px solid var(--grey150);
  outline-offset: -4px;
  /*						border: 4px solid var(--grey110);*/
  border: 4px solid transparent;
  border-radius: var(--px4);
  overflow: hidden;
  transition: border var(--transition);
  font-family: inherit;
}
#floor-plan-match4 #results .result .bottom .other-pages .page img {
  height: var(--px80);
  width: auto;
}
#floor-plan-match4 #results .result .bottom .other-pages .page:hover:not(.active) {
  /*							border: 4px solid var(--accent);*/
  outline: 1px solid var(--accent);
}
#floor-plan-match4 #results .result .bottom .other-pages .page:hover:not(.active)::before {
  background-color: rgba(0, 0, 0, 0.5);
}
#floor-plan-match4 #results .result .bottom .other-pages .page:hover:not(.active)::after {
  opacity: 1;
}
#floor-plan-match4 #results .result .bottom .other-pages .page.active {
  border: 4px solid var(--accent);
}
#floor-plan-match4 #results .result .bottom .details {
  margin: var(--px20) 0;
  display: flex;
  flex-direction: column;
  gap: var(--px8);
}
#floor-plan-match4 #results .result .bottom .details a {
  text-decoration: none;
  cursor: pointer;
}
#floor-plan-match4 #results .result .bottom .details a:hover {
  text-decoration: underline;
  color: var(--accent);
}
#floor-plan-match4 #results .result .bottom .details .item {
  display: flex;
  line-height: var(--px16);
}
#floor-plan-match4 #results .result .bottom .details .item .label {
  font-size: var(--px13);
  font-weight: var(--semibold);
  /*							width: var(--px96);*/
  width: var(--px128);
}
#floor-plan-match4 #results .result .bottom .details .item .value {
  font-size: var(--px13);
}
#floor-plan-match4 #results .result .bottom .details .item .value .transaction {
  display: flex;
  align-items: center;
  margin-bottom: var(--px4);
}
#floor-plan-match4 #results .result .bottom .details .item .value .transaction .status {
  display: inline-block;
  width: var(--px12);
  height: var(--px12);
  border-radius: 50%;
  margin-right: var(--px8);
}
#floor-plan-match4 #results .result .bottom .details .item .value .transaction .status.red {
  background-color: var(--red);
}
#floor-plan-match4 #results .result .bottom .details .item .value .transaction .status.yellow {
  background-color: var(--yellow);
}
#floor-plan-match4 #results .result .bottom .details .item .value .transaction .status.green {
  background-color: var(--green);
}
#floor-plan-match4 #results .result .bottom .actions .dropdown .item .meta {
  margin-left: var(--px8);
}
/*
88888888888                                                  888    d8b                   
    888                                                      888    Y8P                   
    888                                                      888                          
    888  888d888 8888b.  88888b.  .d8888b   8888b.   .d8888b 888888 888  .d88b.  88888b.  
    888  888P"      "88b 888 "88b 88K          "88b d88P"    888    888 d88""88b 888 "88b 
    888  888    .d888888 888  888 "Y8888b. .d888888 888      888    888 888  888 888  888 
    888  888    888  888 888  888      X88 888  888 Y88b.    Y88b.  888 Y88..88P 888  888 
    888  888    "Y888888 888  888  88888P' "Y888888  "Y8888P  "Y888 888  "Y88P"  888  888
*/