Your IP : 216.73.217.143
@charset "UTF-8";
.fluid {
/**
* Static Colors
*
* Below are a list of colors that are static, meaning that they do not change based on dark or light color schemes or any other contextual change.
*/
--fl-brand-light-blue: #84d5d6;
--fl-brand-dark-blue: #1b7a97;
--fl-brand-red: #ee521f;
--fl-brand-yellow: #fba613;
--fl-brand-green: #64dc87;
--fl-brand-purple: #7461c7;
--fl-brand-cool-neutral: #d9d9cf;
--fl-brand-warm-neutral: #ecdfc3;
--fl-brand-tan: #FFF4DC;
--fluid-hue: 210;
/* Darks */
--fluid-opaque-0: black;
--fluid-opaque-1: hsl( var(--fluid-hue), 10%, 10% );
--fluid-opaque-1-5: hsl( var(--fluid-hue), 10%, 13% );
--fluid-opaque-2: hsl( var(--fluid-hue), 10%, 15% );
--fluid-opaque-3: hsl( var(--fluid-hue), 10%, 20% );
--fluid-opaque-4: hsl( var(--fluid-hue), 10%, 25% );
--fluid-opaque-5: hsl( var(--fluid-hue), 10%, 30% );
--fluid-opaque-6: hsl( var(--fluid-hue), 10%, 35% );
/* Middle Grey */
--fluid-opaque-7: hsl( var(--fluid-hue), 10%, 50% );
/* Lights */
--fluid-opaque-8: hsl( var(--fluid-hue), 27%, 87% );
--fluid-opaque-9: hsl( var(--fluid-hue), 33%, 89% );
--fluid-opaque-10: hsl( var(--fluid-hue), 33%, 91% );
--fluid-opaque-11: hsl( var(--fluid-hue), 33%, 93% );
--fluid-opaque-12: hsl( var(--fluid-hue), 33%, 95% );
--fluid-opaque-13: hsl( var(--fluid-hue), 33%, 97.5% );
--fluid-opaque-14: white;
/* Black can't be mimiced transparently */
--fluid-transparent-1: hsla( var(--fluid-hue), 10%, 10%, 80% );
--fluid-transparent-2: hsla( var(--fluid-hue), 10%, 19%, 80% );
--fluid-transparent-3: hsla( var(--fluid-hue), 10%, 25%, 80% );
--fluid-transparent-4: hsla( var(--fluid-hue), 10%, 31%, 80% );
--fluid-transparent-5: hsla( var(--fluid-hue), 10%, 38%, 80% );
--fluid-transparent-6: hsla( var(--fluid-hue), 10%, 44%, 80% );
/* There is no middle grey in this scale */
--fluid-transparent-8: hsla( var(--fluid-hue), 27%, 84%, 80% );
--fluid-transparent-9: hsla( var(--fluid-hue), 33%, 86%, 80% );
--fluid-transparent-10: hsla( var(--fluid-hue), 33%, 89%, 80% );
--fluid-transparent-11: hsla( var(--fluid-hue), 34%, 90%, 80% );
--fluid-transparent-12: hsla( var(--fluid-hue), 38%, 94%, 80% );
--fluid-transparent-13: hsla( var(--fluid-hue), 38%, 98%, 80% );
/* White can't be mimiced transparently */
/* Blue Scale */
--fluid-blue-hue: var(--fluid-hue);
/* Darks */
--fluid-blue-0: black;
--fluid-blue-1: hsl( var(--fluid-blue-hue), 100%, 10% );
--fluid-blue-2: hsl( var(--fluid-blue-hue), 100%, 15% );
--fluid-blue-3: hsl( var(--fluid-blue-hue), 100%, 20% );
--fluid-blue-4: hsl( var(--fluid-blue-hue), 100%, 25% );
--fluid-blue-5: hsl( var(--fluid-blue-hue), 100%, 30% );
--fluid-blue-6: hsl( var(--fluid-blue-hue), 100%, 35% );
/* Middle Blue */
--fluid-blue-7: hsl( var(--fluid-blue-hue), 100%, 45% );
/* Lights */
--fluid-blue-8: hsl( var(--fluid-blue-hue), 100%, 87% );
--fluid-blue-9: hsl( var(--fluid-blue-hue), 100%, 89% );
--fluid-blue-10: hsl( var(--fluid-blue-hue), 100%, 91% );
--fluid-blue-11: hsl( var(--fluid-blue-hue), 100%, 93% );
--fluid-blue-12: hsl( var(--fluid-blue-hue), 100%, 95% );
--fluid-blue-13: hsl( var(--fluid-blue-hue), 100%, 98% );
--fluid-blue-14: white;
/* Primary Accent Blue */
--fluid-blue: var(--fluid-blue-7);
--fluid-accent: var(--fluid-blue);
accent-color: var(--fluid-accent);
--fluid-dark-background: var(--fluid-opaque-2);
--fluid-dark-color: var(--fluid-opaque-11);
/**
* Dynamic Colors - Colors that change depending on color scheme & context
*/
--fluid-background: var(--fluid-opaque-14);
--fluid-color: var(--fluid-opaque-0);
--fluid-box-background: var(--fluid-transparent-12);
--fluid-box-color: var(--fluid-opaque-3);
--fluid-box-hover-background: var(--fluid-transparent-10);
--fluid-box-hover-color: var(--fluid-opaque-0);
--fluid-inset-background: var(--fluid-opaque-13);
--fluid-inset-color: var(--fluid-opaque-0);
--fluid-primary-background: var(--fluid-blue-7);
--fluid-primary-color: white;
--fluid-primary-hover-background: var(--fluid-blue-6);
--fluid-alert-background: #FEF4EA;
--fluid-alert-color: #A95700;
--fluid-alert-hover-background: #FCE3CA;
--fluid-destructive-background: #FEF3F1;
--fluid-destructive-color: #BC0A00;
--fluid-destructive-hover-background: #F9DAD4;
--fluid-muted-text-color: var(--fluid-opaque-7);
--fluid-line-color: var(--fluid-transparent-11);
--fluid-dark-line-color: var(--fluid-opaque-0);
}
.fluid .fluid-vibrant-background {
--bg-effect: blur(80px) saturate(300%);
background: rgba(128, 128, 128, 0.75);
-webkit-backdrop-filter: var(--bg-effect);
backdrop-filter: var(--bg-effect);
}
.fluid .fluid-color-scheme-dark {
--fluid-background: var(--fluid-dark-background);
--fluid-color: var(--fluid-dark-color);
--fluid-line-color: var(--fluid-dark-line-color);
--fluid-box-background: var(--fluid-opaque-1);
--fluid-box-color: var(--fluid-dark-color);
--fluid-box-hover-background: var(--fluid-opaque-3);
--fluid-inset-background: var(--fluid-opaque-1-5);
--fluid-inset-color: var(--fluid-dark-color);
--fluid-alert-background: hsl(31, 55%, 10%);
--fluid-alert-color: hsl(31, 100%, 72%);
--fluid-alert-hover-background: hsl(31, 45%, 14%);
--fluid-destructive-background: hsl(0, 100%, 7%);
--fluid-destructive-color: hsl(3, 100%, 67%);
--fluid-destructive-hover-background: hsl(0, 80%, 12%);
}
.fluid .fluid-color-scheme-dark .fluid-vibrant-background {
background: rgba(38, 38, 38, 0.75);
}
.fluid {
--fluid-sm-space: 5px;
--fluid-med-space: 10px;
--fluid-lg-space: 20px;
--fluid-font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--fluid-font-family-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--fluid-font-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--fluid-radius: 6px;
--fluid-med-radius: 12px;
--fluid-target-size: 36px;
--fluid-font-size: 13px;
--fluid-font-family: var(--fluid-font-family-sans-serif);
/* Root .fluid Element */
color: var(--fluid-color);
font-family: var(--fluid-font-family);
font-size: var(--fluid-font-size);
font-weight: normal;
line-height: 1.2;
}
.fluid * {
box-sizing: border-box;
}
.fluid hr {
margin: 10px 0;
padding: 0;
}
.fluid img {
display: block;
max-width: 100%;
object-fit: cover;
height: auto;
width: auto;
border: 0;
}
.fluid video {
display: block;
}
.fluid svg {
display: block;
}
.fluid a, .fluid button {
box-sizing: border-box;
-moz-user-select: none;
user-select: none;
cursor: pointer;
letter-spacing: normal;
font-family: inherit;
font-size: inherit;
color: inherit;
background: transparent;
border: none;
user-select: none;
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.fluid a:hover, .fluid button:hover {
color: inherit;
top: 0;
box-shadow: none;
border: none;
background: transparent;
}
.fluid a:focus, .fluid button:focus {
color: inherit;
top: 0;
border: none;
}
.fluid a[disabled], .fluid button[disabled] {
color: inherit;
opacity: 0.6;
pointer-events: none;
}
.fluid a:visited, .fluid button:visited {
color: inherit;
}
.fluid button {
border-radius: var(--fluid-radius);
}
.fluid a {
text-decoration: none;
}
.fluid a:hover {
text-decoration: underline;
}
.fluid button {
min-height: var(--fluid-target-size);
min-width: var(--fluid-target-size);
}
.fluid button:focus {
box-shadow: 0px 0px 0px 2px rgba(128, 128, 128, 0.5);
}
.fluid p,
.fluid h1,
.fluid h2,
.fluid h3,
.fluid h4,
.fluid h5,
.fluid h6,
.fluid blockquote,
.fluid pre,
.fluid form,
.fluid table {
margin: var(--fluid-lg-space) 0;
}
.fluid p:first-child,
.fluid h1:first-child,
.fluid h2:first-child,
.fluid h3:first-child,
.fluid h4:first-child,
.fluid h5:first-child,
.fluid h6:first-child,
.fluid blockquote:first-child,
.fluid pre:first-child,
.fluid form:first-child,
.fluid table:first-child {
margin-top: 0;
}
.fluid h1, .fluid h2, .fluid h3, .fluid h4, .fluid h5, .fluid h6 {
color: inherit;
font-family: var(--fluid-font-family);
font-weight: normal;
}
.fluid h1::before, .fluid h2::before, .fluid h3::before, .fluid h4::before, .fluid h5::before, .fluid h6::before {
all: unset !important;
}
.fluid h1 {
font-size: calc(var(--fluid-font-size) + 14px);
}
.fluid h2 {
font-size: calc(var(--fluid-font-size) + 10px);
}
.fluid h3 {
font-size: calc(var(--fluid-font-size) + 6px);
}
.fluid p {
font-size: 14px;
line-height: 1.3;
}
.fluid ul, .fluid ol {
list-style: none;
margin: var(--fluid-med-space) 0;
padding: 0;
}
.fluid ul li, .fluid ol li {
margin: 0;
padding: 0;
}
.fluid .fluid-mono {
font-family: var(--fluid-font-family-mono);
}
.fluid .fluid-serif {
font-family: var(--fluid-font-family-serif);
}
.fluid .fluid-sans-serif {
font-family: var(--fluid-font-family-sans-serif);
}
.fluid table.fluid-table {
font-size: var(--fluid-font-size);
width: 100%;
border-collapse: collapse;
border: none;
}
.fluid table.fluid-table th, .fluid table.fluid-table td {
text-align: left;
padding: var(--fluid-sm-space) var(--fluid-med-space);
border: none;
border-right: 2px solid var(--fluid-line-color);
}
.fluid table.fluid-table th:first-child, .fluid table.fluid-table td:first-child {
border-top-left-radius: var(--fluid-radius);
border-bottom-left-radius: var(--fluid-radius);
}
.fluid table.fluid-table th:last-child, .fluid table.fluid-table td:last-child {
border-right: 0;
border-top-right-radius: var(--fluid-radius);
border-bottom-right-radius: var(--fluid-radius);
}
.fluid table.fluid-table tr:nth-child(even) th, .fluid table.fluid-table tr:nth-child(even) td {
background: var(--fluid-opaque-13);
}
.fluid .fluid-color-scheme-dark {
color: var(--fluid-color);
}
.fluid .fluid-color-scheme-dark table.fluid-table tr:nth-child(even) th, .fluid .fluid-color-scheme-dark table.fluid-table tr:nth-child(even) td {
background: var(--fluid-opaque-1);
}
.fluid label {
display: flex;
flex-direction: row;
align-items: center;
font-size: inherit;
font-weight: normal;
line-height: 1.2;
color: var(--fl-asst-text-color);
text-transform: none;
text-decoration: none;
text-shadow: none;
margin: 0 0 var(--fluid-med-space);
}
.fluid label abbr {
display: flex;
text-decoration: none;
margin-left: 5px;
color: var(--fl-asst-base-art-color);
}
.fluid .fl-asst-form-input,
.fluid input,
.fluid input[type=text],
.fluid input[type=email],
.fluid input[type=url],
.fluid input[type=password],
.fluid input[type=search],
.fluid input[type=number],
.fluid input[type=tel],
.fluid input[type=date],
.fluid input[type=month],
.fluid input[type=week],
.fluid input[type=time],
.fluid input[type=datetime],
.fluid input[type=datetime-local],
.fluid input[type=color],
.fluid textarea,
.fluid select {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: auto;
flex: 1 1 auto;
font-family: inherit;
font-size: inherit;
font-weight: normal;
line-height: inherit;
letter-spacing: normal;
text-align: left;
margin: 0;
padding: var(--fluid-sm-space);
color: inherit;
border-radius: var(--fluid-radius);
border: none;
outline: none;
background-color: var(--fluid-transparent-13);
box-shadow: inset 0px 0px 0px 1.5px var(--fluid-line-color);
min-height: var(--fluid-target-size);
}
.fluid .fl-asst-form-input::-webkit-input-placeholder,
.fluid input::-webkit-input-placeholder,
.fluid input[type=text]::-webkit-input-placeholder,
.fluid input[type=email]::-webkit-input-placeholder,
.fluid input[type=url]::-webkit-input-placeholder,
.fluid input[type=password]::-webkit-input-placeholder,
.fluid input[type=search]::-webkit-input-placeholder,
.fluid input[type=number]::-webkit-input-placeholder,
.fluid input[type=tel]::-webkit-input-placeholder,
.fluid input[type=date]::-webkit-input-placeholder,
.fluid input[type=month]::-webkit-input-placeholder,
.fluid input[type=week]::-webkit-input-placeholder,
.fluid input[type=time]::-webkit-input-placeholder,
.fluid input[type=datetime]::-webkit-input-placeholder,
.fluid input[type=datetime-local]::-webkit-input-placeholder,
.fluid input[type=color]::-webkit-input-placeholder,
.fluid textarea::-webkit-input-placeholder,
.fluid select::-webkit-input-placeholder {
text-align: left;
color: var(--fluid-muted-text-color);
}
.fluid .fl-asst-form-input::-ms-input-placeholder,
.fluid input::-ms-input-placeholder,
.fluid input[type=text]::-ms-input-placeholder,
.fluid input[type=email]::-ms-input-placeholder,
.fluid input[type=url]::-ms-input-placeholder,
.fluid input[type=password]::-ms-input-placeholder,
.fluid input[type=search]::-ms-input-placeholder,
.fluid input[type=number]::-ms-input-placeholder,
.fluid input[type=tel]::-ms-input-placeholder,
.fluid input[type=date]::-ms-input-placeholder,
.fluid input[type=month]::-ms-input-placeholder,
.fluid input[type=week]::-ms-input-placeholder,
.fluid input[type=time]::-ms-input-placeholder,
.fluid input[type=datetime]::-ms-input-placeholder,
.fluid input[type=datetime-local]::-ms-input-placeholder,
.fluid input[type=color]::-ms-input-placeholder,
.fluid textarea::-ms-input-placeholder,
.fluid select::-ms-input-placeholder {
text-align: left;
color: var(--fluid-muted-text-color);
}
.fluid .fl-asst-form-input::placeholder,
.fluid input::placeholder,
.fluid input[type=text]::placeholder,
.fluid input[type=email]::placeholder,
.fluid input[type=url]::placeholder,
.fluid input[type=password]::placeholder,
.fluid input[type=search]::placeholder,
.fluid input[type=number]::placeholder,
.fluid input[type=tel]::placeholder,
.fluid input[type=date]::placeholder,
.fluid input[type=month]::placeholder,
.fluid input[type=week]::placeholder,
.fluid input[type=time]::placeholder,
.fluid input[type=datetime]::placeholder,
.fluid input[type=datetime-local]::placeholder,
.fluid input[type=color]::placeholder,
.fluid textarea::placeholder,
.fluid select::placeholder {
text-align: left;
color: var(--fluid-muted-text-color);
}
.fluid .fl-asst-form-input:focus, .fluid .fl-asst-form-input:invalid,
.fluid input:focus,
.fluid input:invalid,
.fluid input[type=text]:focus,
.fluid input[type=text]:invalid,
.fluid input[type=email]:focus,
.fluid input[type=email]:invalid,
.fluid input[type=url]:focus,
.fluid input[type=url]:invalid,
.fluid input[type=password]:focus,
.fluid input[type=password]:invalid,
.fluid input[type=search]:focus,
.fluid input[type=search]:invalid,
.fluid input[type=number]:focus,
.fluid input[type=number]:invalid,
.fluid input[type=tel]:focus,
.fluid input[type=tel]:invalid,
.fluid input[type=date]:focus,
.fluid input[type=date]:invalid,
.fluid input[type=month]:focus,
.fluid input[type=month]:invalid,
.fluid input[type=week]:focus,
.fluid input[type=week]:invalid,
.fluid input[type=time]:focus,
.fluid input[type=time]:invalid,
.fluid input[type=datetime]:focus,
.fluid input[type=datetime]:invalid,
.fluid input[type=datetime-local]:focus,
.fluid input[type=datetime-local]:invalid,
.fluid input[type=color]:focus,
.fluid input[type=color]:invalid,
.fluid textarea:focus,
.fluid textarea:invalid,
.fluid select:focus,
.fluid select:invalid {
background-color: var(--fluid-box-background);
border: none;
outline: none;
box-shadow: inset 0px 0px 0px 1.5px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fluid .fl-asst-form-input:focus::-webkit-input-placeholder, .fluid .fl-asst-form-input:invalid::-webkit-input-placeholder,
.fluid input:focus::-webkit-input-placeholder,
.fluid input:invalid::-webkit-input-placeholder,
.fluid input[type=text]:focus::-webkit-input-placeholder,
.fluid input[type=text]:invalid::-webkit-input-placeholder,
.fluid input[type=email]:focus::-webkit-input-placeholder,
.fluid input[type=email]:invalid::-webkit-input-placeholder,
.fluid input[type=url]:focus::-webkit-input-placeholder,
.fluid input[type=url]:invalid::-webkit-input-placeholder,
.fluid input[type=password]:focus::-webkit-input-placeholder,
.fluid input[type=password]:invalid::-webkit-input-placeholder,
.fluid input[type=search]:focus::-webkit-input-placeholder,
.fluid input[type=search]:invalid::-webkit-input-placeholder,
.fluid input[type=number]:focus::-webkit-input-placeholder,
.fluid input[type=number]:invalid::-webkit-input-placeholder,
.fluid input[type=tel]:focus::-webkit-input-placeholder,
.fluid input[type=tel]:invalid::-webkit-input-placeholder,
.fluid input[type=date]:focus::-webkit-input-placeholder,
.fluid input[type=date]:invalid::-webkit-input-placeholder,
.fluid input[type=month]:focus::-webkit-input-placeholder,
.fluid input[type=month]:invalid::-webkit-input-placeholder,
.fluid input[type=week]:focus::-webkit-input-placeholder,
.fluid input[type=week]:invalid::-webkit-input-placeholder,
.fluid input[type=time]:focus::-webkit-input-placeholder,
.fluid input[type=time]:invalid::-webkit-input-placeholder,
.fluid input[type=datetime]:focus::-webkit-input-placeholder,
.fluid input[type=datetime]:invalid::-webkit-input-placeholder,
.fluid input[type=datetime-local]:focus::-webkit-input-placeholder,
.fluid input[type=datetime-local]:invalid::-webkit-input-placeholder,
.fluid input[type=color]:focus::-webkit-input-placeholder,
.fluid input[type=color]:invalid::-webkit-input-placeholder,
.fluid textarea:focus::-webkit-input-placeholder,
.fluid textarea:invalid::-webkit-input-placeholder,
.fluid select:focus::-webkit-input-placeholder,
.fluid select:invalid::-webkit-input-placeholder {
text-align: left;
color: var(--fluid-color);
}
.fluid .fl-asst-form-input:focus::-ms-input-placeholder, .fluid .fl-asst-form-input:invalid::-ms-input-placeholder,
.fluid input:focus::-ms-input-placeholder,
.fluid input:invalid::-ms-input-placeholder,
.fluid input[type=text]:focus::-ms-input-placeholder,
.fluid input[type=text]:invalid::-ms-input-placeholder,
.fluid input[type=email]:focus::-ms-input-placeholder,
.fluid input[type=email]:invalid::-ms-input-placeholder,
.fluid input[type=url]:focus::-ms-input-placeholder,
.fluid input[type=url]:invalid::-ms-input-placeholder,
.fluid input[type=password]:focus::-ms-input-placeholder,
.fluid input[type=password]:invalid::-ms-input-placeholder,
.fluid input[type=search]:focus::-ms-input-placeholder,
.fluid input[type=search]:invalid::-ms-input-placeholder,
.fluid input[type=number]:focus::-ms-input-placeholder,
.fluid input[type=number]:invalid::-ms-input-placeholder,
.fluid input[type=tel]:focus::-ms-input-placeholder,
.fluid input[type=tel]:invalid::-ms-input-placeholder,
.fluid input[type=date]:focus::-ms-input-placeholder,
.fluid input[type=date]:invalid::-ms-input-placeholder,
.fluid input[type=month]:focus::-ms-input-placeholder,
.fluid input[type=month]:invalid::-ms-input-placeholder,
.fluid input[type=week]:focus::-ms-input-placeholder,
.fluid input[type=week]:invalid::-ms-input-placeholder,
.fluid input[type=time]:focus::-ms-input-placeholder,
.fluid input[type=time]:invalid::-ms-input-placeholder,
.fluid input[type=datetime]:focus::-ms-input-placeholder,
.fluid input[type=datetime]:invalid::-ms-input-placeholder,
.fluid input[type=datetime-local]:focus::-ms-input-placeholder,
.fluid input[type=datetime-local]:invalid::-ms-input-placeholder,
.fluid input[type=color]:focus::-ms-input-placeholder,
.fluid input[type=color]:invalid::-ms-input-placeholder,
.fluid textarea:focus::-ms-input-placeholder,
.fluid textarea:invalid::-ms-input-placeholder,
.fluid select:focus::-ms-input-placeholder,
.fluid select:invalid::-ms-input-placeholder {
text-align: left;
color: var(--fluid-color);
}
.fluid .fl-asst-form-input:focus::placeholder, .fluid .fl-asst-form-input:invalid::placeholder,
.fluid input:focus::placeholder,
.fluid input:invalid::placeholder,
.fluid input[type=text]:focus::placeholder,
.fluid input[type=text]:invalid::placeholder,
.fluid input[type=email]:focus::placeholder,
.fluid input[type=email]:invalid::placeholder,
.fluid input[type=url]:focus::placeholder,
.fluid input[type=url]:invalid::placeholder,
.fluid input[type=password]:focus::placeholder,
.fluid input[type=password]:invalid::placeholder,
.fluid input[type=search]:focus::placeholder,
.fluid input[type=search]:invalid::placeholder,
.fluid input[type=number]:focus::placeholder,
.fluid input[type=number]:invalid::placeholder,
.fluid input[type=tel]:focus::placeholder,
.fluid input[type=tel]:invalid::placeholder,
.fluid input[type=date]:focus::placeholder,
.fluid input[type=date]:invalid::placeholder,
.fluid input[type=month]:focus::placeholder,
.fluid input[type=month]:invalid::placeholder,
.fluid input[type=week]:focus::placeholder,
.fluid input[type=week]:invalid::placeholder,
.fluid input[type=time]:focus::placeholder,
.fluid input[type=time]:invalid::placeholder,
.fluid input[type=datetime]:focus::placeholder,
.fluid input[type=datetime]:invalid::placeholder,
.fluid input[type=datetime-local]:focus::placeholder,
.fluid input[type=datetime-local]:invalid::placeholder,
.fluid input[type=color]:focus::placeholder,
.fluid input[type=color]:invalid::placeholder,
.fluid textarea:focus::placeholder,
.fluid textarea:invalid::placeholder,
.fluid select:focus::placeholder,
.fluid select:invalid::placeholder {
text-align: left;
color: var(--fluid-color);
}
.fluid input[type=range] {
-webkit-appearance: slider-horizontal;
}
.fluid input[type=checkbox],
.fluid input[type=radio] {
-moz-appearace: none;
-webkit-appearance: none;
flex: 0 0 auto;
margin: 0;
margin-right: var(--fluid-med-space);
color: white;
width: 22px;
height: 22px;
max-width: 22px;
max-height: 22px;
min-height: 0;
min-width: 0;
border-radius: var(--fluid-radius);
box-shadow: none;
border: none;
background-color: var(--fluid-transparent-11);
}
.fluid input[type=checkbox]:focus,
.fluid input[type=radio]:focus {
box-shadow: inset 0px 0px 0px 1.5px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fluid input[type=checkbox]:checked,
.fluid input[type=radio]:checked {
background-color: var(--fluid-blue);
box-shadow: none;
}
.fluid input[type=checkbox]:checked:focus,
.fluid input[type=radio]:checked:focus {
box-shadow: inset 0px 0px 0px 1.5px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fluid input[type=checkbox]:checked:after,
.fluid input[type=radio]:checked:after {
display: block;
content: "✓";
color: white;
font-family: var(--fluid-font-family);
font-size: 16px !important;
line-height: 1;
font-weight: bold;
text-align: center;
margin-left: -1px;
margin-top: -3px;
}
.fluid input[type=checkbox]:checked:before,
.fluid input[type=radio]:checked:before {
content: "" !important;
display: none !important;
}
.fluid input[type=radio] {
border-radius: 50%;
}
.fluid input[disabled],
.fluid select[disabled],
.fluid textarea[disabled],
.fluid [aria-disabled=true],
.fluid .fluid-is-disabled {
pointer-events: none;
opacity: 0.5;
font-style: italic;
color: var(--fluid-muted-text-color);
}
.fluid select {
padding: var(--fluid-sm-space);
padding-right: 30px;
}
.fluid select:focus {
background-color: var(--fluid-box-background);
color: var(--fluid-color) !important;
border: none;
outline: none;
box-shadow: inset 0px 0px 0px 2px var(--fluid-box-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fluid select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.fluid select::-ms-expand {
display: none;
}
.fluid select[multiple] {
height: auto;
padding: 10px 7px 0;
background-image: none;
}
.fluid select[multiple] option {
padding: 2px 7px;
margin: 1px 0;
border-radius: 3px;
font-weight: normal;
}
@supports (-webkit-appearance: none) {
.fluid select {
-moz-appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
padding-right: 30px;
}
.fluid select::-ms-expand {
display: none;
}
}
.fluid .fluid-color-scheme-dark .fl-asst-form-input,
.fluid .fluid-color-scheme-dark input,
.fluid .fluid-color-scheme-dark input[type=text],
.fluid .fluid-color-scheme-dark input[type=email],
.fluid .fluid-color-scheme-dark input[type=url],
.fluid .fluid-color-scheme-dark input[type=password],
.fluid .fluid-color-scheme-dark input[type=search],
.fluid .fluid-color-scheme-dark input[type=number],
.fluid .fluid-color-scheme-dark input[type=tel],
.fluid .fluid-color-scheme-dark input[type=date],
.fluid .fluid-color-scheme-dark input[type=month],
.fluid .fluid-color-scheme-dark input[type=week],
.fluid .fluid-color-scheme-dark input[type=time],
.fluid .fluid-color-scheme-dark input[type=datetime],
.fluid .fluid-color-scheme-dark input[type=datetime-local],
.fluid .fluid-color-scheme-dark input[type=color],
.fluid .fluid-color-scheme-dark textarea,
.fluid .fluid-color-scheme-dark select {
background-color: var(--fluid-transparent-1);
}
.fluid .fluid-color-scheme-dark input[type=checkbox],
.fluid .fluid-color-scheme-dark input[type=radio] {
background-color: var(--fluid-opaque-0);
}
.fluid .fluid-color-scheme-dark input[type=checkbox]:checked,
.fluid .fluid-color-scheme-dark input[type=radio]:checked {
background-color: var(--fluid-blue);
}
.fl.uid .fluid-text-title {
flex: 0 1 auto;
font-size: 16px;
display: flex;
flex-direction: column;
}
.fl.uid .fluid-text-eyebrow,
.fl.uid .fluid-text-subtitle {
font-size: 12px;
font-weight: 500;
color: var(--fluid-muted-text-color);
}
.fl.uid .fluid-text-eyebrow {
font-size: 13px;
text-transform: uppercase;
}
.fl.uid .fluid-size-med .fluid-text-title {
font-size: 13px;
}
.fl.uid .fluid-size-sm .fluid-text-title {
font-size: 13px;
}
.fluid .fluid-aspect-box {
position: relative;
padding-top: 100%;
background: var(--fluid-box-background);
overflow: hidden;
}
.fluid .fluid-aspect-box > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.fluid .fluid-loading-bar {
flex: 1 1 auto;
border-radius: 10px;
min-height: 20px;
padding: var(--fluid-sm-space);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.fluid .fluid-loading-bar .fluid-dot {
display: inline-flex;
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 3px;
margin: 0 3px;
background: var(--fluid-accent);
-webkit-animation: fl-asst-dot-bounce 1.4s infinite ease-in-out both;
animation: fl-asst-dot-bounce 1.4s infinite ease-in-out both;
}
.fluid .fluid-loading-bar .fluid-dot:first-child {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.fluid .fluid-loading-bar .fluid-dot:nth-child(2n+2) {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
@-webkit-keyframes fl-asst-dot-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes fl-asst-dot-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.fluid .fluid-message {
flex: 0 0 auto;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: var(--fluid-box-background);
color: var(--fluid-box-color);
border-radius: var(--fluid-radius);
min-height: var(--fluid-target-size);
padding: 0 var(--fluid-med-space);
text-decoration: none;
}
.fluid .fluid-message-icon {
margin-right: 7px;
height: 100%;
width: 7%;
}
.fluid .fluid-split {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: row;
min-height: 0;
max-height: 100%;
}
.fluid .fluid-split .fluid-split-pane {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
overflow: auto;
border-right: 2px solid var(--fluid-line-color);
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.fluid .fluid-split .fluid-split-pane:last-child {
border-right: none;
}
.fluid .fluid-toolbar {
flex: 0 0 60px;
display: flex;
flex-direction: row;
align-items: center;
min-height: 60px;
padding: 0 10px;
background: var(--fluid-background);
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.fluid .fluid-toolbar.fluid-is-sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.fluid .fluid-toolbar.fluid-is-selected {
--fluid-background: var(--fluid-blue);
background-color: var(--fluid-blue);
color: white;
}
.fluid .fluid-toolbar.fluid-size-lg {
min-height: 60px;
}
.fluid .fluid-toolbar.fluid-size-med {
min-height: 50px;
}
.fluid .fluid-toolbar.fluid-size-sm {
min-height: 40px;
}
.fluid .fluid-toolbar > * {
margin-right: var(--fluid-sm-space);
}
.fluid .fluid-toolbar > *:last-child {
margin-right: 0;
}
.fluid .fluid-box {
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.fluid .fluid-box.fluid-box-outset {
margin-left: calc(0px - var(--fluid-lg-space));
margin-right: calc(0px - var(--fluid-lg-space));
}
.fluid .fluid-box.fluid-row {
--fluid-gap: 0px;
flex-direction: row;
}
.fluid .fluid-box.fluid-row > * {
margin-right: var(--fluid-gap);
}
.fluid .fluid-box.fluid-row > *:last-child {
margin-right: 0;
}
.fluid .fluid-headline {
font-size: 20px;
font-weight: normal;
word-break: break-word;
}
.fluid .fluid-content-boundary {
width: clamp(40ch, 80ch, 100%);
margin: 0 auto;
padding: 0 var(--fluid-lg-space) var(--fluid-lg-space);
}
.fluid .fluid-drop-area {
flex: 1 1 auto;
display: flex;
flex-direction: column;
max-height: 100%;
min-height: 0;
overflow: auto;
position: relative;
}
.fluid-menu {
width: 180px;
background: var(--fluid-background);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
border-radius: var(--fluid-med-space);
z-index: 1;
display: flex;
flex-direction: column;
padding: var(--fluid-sm-space);
}
.fluid-menu > :first-child {
margin-top: 0;
}
.fluid-menu .fluid-menu-item.fluid-button {
flex: 0 0 var(--fluid-target-size);
justify-content: flex-start;
padding: 0 var(--fluid-lg-space);
}
.fluid-menu .fluid-menu-item.fluid-button > span {
justify-content: flex-start;
flex: 1 1 auto;
}
.fluid-menu .fluid-menu-item.fluid-button.is-selected {
box-shadow: inset 3px 0 0 var(--fluid-accent);
}
.fluid-menu .fluid-menu-item.fluid-button:hover {
transform: scale(1) !important;
}
.fluid-color-scheme-dark .fluid-menu {
background: var(--fluid-box-background);
}
.fluid .fluid-button-group {
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
background: var(--fluid-transparent-12);
color: var(--fluid-color);
border-radius: var(--fluid-radius);
min-height: var(--fluid-target-size);
max-width: 100%;
position: relative;
}
.fluid .fluid-button-group .fluid-button:hover, .fluid .fluid-button-group .fluid-button.is-hovering {
transform: scale(1);
}
.fluid .fluid-button-group > select {
background-color: var(--fluid-transparent-12);
box-shadow: none;
padding: var(--fluid-sm-space);
text-align-last: center;
cursor: pointer;
}
.fluid .fluid-button-group > select:hover {
background-color: var(--fluid-transparent-10);
}
.fluid .fluid-button-group > select:focus {
box-shadow: inset 0px 0px 0px 1.5px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fluid .fluid-button-group.fluid-button-group-row {
align-self: center;
justify-content: flex-start;
}
.fluid .fluid-button-group.fluid-button-group-column {
flex-direction: column;
}
.fluid .fluid-button-group.fluid-button-group-appearance-normal .fluid-button {
white-space: nowrap;
}
.fluid .fluid-button-group.fluid-button-group-appearance-buttons {
display: flex;
flex-direction: row;
gap: var(--fluid-sm-space);
background: transparent;
padding: 2px 0;
min-height: var(--fluid-target-size);
overflow: visible;
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs {
flex: 1 1 auto;
background: var(--fluid-box-background);
padding: 0 var(--fluid-med-space);
padding-right: 2px;
min-height: 40px;
border-radius: 0;
justify-content: flex-start;
align-self: stretch;
overflow: visible;
flex-wrap: nowrap;
max-width: 100%;
min-width: 0;
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button {
margin: 0;
background: transparent;
border: none;
border-radius: 0;
padding: 0 12px;
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button:hover {
background: var(--fluid-box-hover-background);
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button:focus {
border-radius: var(--fluid-radius);
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button.is-selected {
border-radius: 0;
background: var(--fluid-blue-7);
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button.is-selected:focus {
box-shadow: inset 0px 0px 0px 2px var(--fluid-box-background), 0px 0px 0px 1.5 var(--fluid-accent), 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button:last-child {
margin-right: 0;
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button.fluid-more-button {
margin-left: auto !important;
}
.fluid .fluid-button-group.fluid-button-group-appearance-tabs .fluid-button .fluid-count-badge {
margin-left: 5px;
padding: 3px;
background: var(--fluid-primary-background);
color: var(--fluid-primary-color);
border-radius: 3px;
}
.fluid .fluid-button-group .fluid-vertical-divider {
flex: 0 0 auto;
margin: var(--fluid-sm-space) 0;
background: var(--fluid-background);
border: none;
border-radius: 2px;
}
.fluid .fluid-button-group .fluid-horizontal-divider {
flex: 0 0 auto;
margin: 0 var(--fluid-sm-space);
background: var(--fluid-background);
border: none;
border-radius: 2px;
}
.fluid .fluid-button-group .fluid-is-selected + .fluid-divider {
visibility: hidden;
}
.fluid .fluid-button-group.fluid-button-group-appearance-grid {
background: transparent !important;
flex: 1 1 auto;
display: grid;
grid-gap: var(--fluid-sm-space);
grid-template-columns: 1fr 1fr;
margin: -3px;
}
.fluid .fluid-divider.fluid-horizontal-divider {
box-sizing: border-box;
background: var(--fluid-background);
}
.fluid .fluid-divider.fluid-vertical-divider {
box-sizing: border-box;
background: var(--fluid-background);
width: 2px;
height: auto;
}
.fluid .fluid-is-hidden {
visibility: hidden;
}
.fluid .fluid-more-menu {
background: var(--fluid-box-background);
color: var(--fluid-box-color);
border-radius: var(--fluid-radius);
padding: 3px;
display: flex;
flex-direction: column;
}
.fluid .fluid-color-scheme-dark .fluid-button-group {
background: var(--fluid-transparent-1);
}
.fluid .fluid-color-scheme-dark .fluid-button-group > select {
background-color: var(--fluid-transparent-1);
}
.fluid .fluid-color-scheme-dark .fluid-button-group > select:hover {
background-color: var(--fluid-transparent-3);
}
.fl.uid .fluid-button {
--color: var(--fluid-opaque-5);
--background: var(--fluid-transparent-12);
--hover: var(--fluid-transparent-10);
--hover-color: var(--fluid-opaque-0);
box-sizing: border-box;
flex: 0 0 auto;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: var(--background);
color: var(--color);
border-radius: var(--fluid-radius);
box-shadow: 0px 0px 0px transparent;
min-height: var(--fluid-target-size);
min-width: var(--fluid-target-size);
padding: 5px 8px;
text-decoration: none;
font-weight: normal;
text-transform: none;
line-height: 1.1;
}
.fl.uid .fluid-button > span {
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 0;
}
.fl.uid .fluid-button:hover, .fl.uid .fluid-button.is-hovering {
text-decoration: none;
color: var(--hover-color);
background: var(--hover);
z-index: 1;
}
.fl.uid .fluid-button:focus, .fl.uid .fluid-button.is-focused {
top: 0;
z-index: 3;
outline: none;
text-decoration: none;
box-shadow: inset 0px 0px 0px 2px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fl.uid .fluid-button:active, .fl.uid .fluid-button.is-active {
background: var(--hover);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.fl.uid .fluid-button.is-selected {
background: var(--fluid-blue-7);
color: var(--fluid-blue-14);
}
.fl.uid .fluid-button.is-selected:focus, .fl.uid .fluid-button.is-selected.is-focused {
background: var(--fluid-blue-7);
color: var(--fluid-blue-14);
}
.fl.uid .fluid-button.fluid-shape-round {
border-radius: 50%;
}
.fl.uid .fluid-button.fluid-shape-round.fluid-size-sm {
padding: 3px;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
max-width: 30px;
max-height: 30px;
}
.fl.uid .fluid-button.fluid-shape-round.fluid-size-med {
padding: 3px;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
max-width: 36px;
max-height: 36px;
}
.fl.uid .fluid-button.fluid-shape-round.fluid-size-lg {
padding: 3px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
max-width: 44px;
max-height: 44px;
}
.fl.uid .fluid-button.fluid-appearance-elevator {
height: 44px;
width: 44px;
padding: 5px 12px;
border-radius: 50%;
}
.fl.uid .fluid-button.fluid-appearance-pillbox {
border-radius: 30px !important;
}
.fl.uid .fluid-button.fluid-appearance-pillbox:not(.fluid-appearance-transparent) {
padding-left: 15px !important;
padding-right: 15px !important;
}
.fl.uid .fluid-button.fluid-appearance-transparent {
--background: transparent;
box-shadow: none;
border: none;
outline: none;
}
.fl.uid .fluid-button.fluid-appearance-transparent:focus, .fl.uid .fluid-button.fluid-appearance-transparent.is-focused {
box-shadow: inset 0px 0px 0px 2px var(--fluid-background), 0px 0px 0px 1.5px var(--fluid-accent);
}
.fl.uid .fluid-button.fluid-status-primary {
--background: var(--fluid-blue-12);
--color: var(--fluid-blue-5);
--hover: var(--fluid-blue-10);
--hover-color: var(--fluid-blue-3);
}
.fl.uid .fluid-button.fluid-status-primary.fluid-appearance-transparent {
--background: transparent;
--color: var(--fluid-blue-6);
--hover: var(--fluid-blue-12);
--hover-color: var(--fluid-blue-5);
}
.fl.uid .fluid-button.fluid-status-alert {
--fluid-accent: var(--fluid-alert-color);
--hover-color: var(--fluid-alert-color);
--color: var(--fluid-alert-color);
}
.fl.uid .fluid-button.fluid-status-destructive {
--fluid-accent: var(--fluid-destructive-color);
--hover-color: var(--fluid-destructive-color);
--color: var(--fluid-destructive-color);
}
.fl.uid .fluid-button.fluid-size-sm {
font-size: 12px;
padding: 5px;
min-height: 30px;
min-width: 30px;
}
.fl.uid .fluid-button.fluid-size-med {
min-height: var(--fluid-target-size);
min-width: var(--fluid-target-size);
}
.fl.uid .fluid-button.fluid-size-lg {
font-size: 16px;
padding: 5px 12px;
min-height: 44px;
min-width: 44px;
}
.fl.uid .fluid-button .fluid-button-icon {
flex: 0 0 auto;
margin-right: 0.5em;
}
.fl.uid .fluid-button .fluid-button-icon:last-child {
margin-right: 0;
}
.fl.uid .fluid-color-scheme-dark .fluid-button {
--color: var(--fluid-opaque-10);
--background: var(--fluid-transparent-1);
--hover: var(--fluid-transparent-3);
--hover-color: var(--fluid-opaque-14);
}
.fl.uid .fluid-color-scheme-dark .fluid-button:focus, .fl.uid .fluid-color-scheme-dark .fluid-button.is-focused {
background: var(--fluid-opaque-0);
}
.fl.uid .fluid-color-scheme-dark .fluid-button.fluid-appearance-transparent {
--background: transparent;
}
.fl.uid .fluid-color-scheme-dark .fluid-button.fluid-status-primary {
--color: var(--fluid-blue-14);
--background: var(--fluid-blue-7);
--hover: var(--fluid-blue-6);
--hover-color: var(--fluid-blue-13);
}
.fl.uid .fluid-color-scheme-dark .fluid-button.fluid-status-primary.fluid-appearance-transparent {
--background: transparent;
--color: var(--fluid-blue-8);
--hover: var(--fluid-blue-4);
--hover-color: var(--fluid-blue-14);
}
.fl.uid .fluid-color-scheme-dark .fluid-button.fluid-status-destructive {
--fluid-accent: var(--fluid-destructive-color);
--color: var(--fluid-destructive-color);
--hover-color: var(--fluid-destructive-color);
}
.fluid-dialog {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding: var(--fluid-med-space);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
.fluid-dialog-window {
background: var(--fluid-background);
border-radius: var(--fluid-radius);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
padding: var(--fluid-lg-space);
max-width: 460px;
width: 100%;
}
.fluid-dialog-title {
font-size: 20px;
margin-bottom: var(--fluid-med-space);
}
.fluid-dialog-message {
font-size: 14px;
line-height: 1.6;
margin-bottom: var(--fluid-lg-space);
}
.fluid-dialog-buttons {
display: flex;
justify-content: flex-end;
}
.fluid-dialog-buttons button {
margin-left: var(--fluid-sm-space);
min-width: 70px !important;
}
.fluid-modal-root-scrollable {
position: absolute;
width: 100%;
}
.fluid-lightbox {
background-color: rgba(0, 0, 0, 0.75);
padding: var(--fluid-med-space);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
.fluid-lightbox .fluid-lightbox-close,
.fluid-lightbox .fluid-lightbox-close:hover,
.fluid-lightbox .fluid-lightbox-close:active,
.fluid-lightbox .fluid-lightbox-close:focus {
background-color: rgba(0, 0, 0, 0.75) !important;
color: #fff !important;
position: absolute;
position: fixed;
top: 23px !important;
right: 28px !important;
z-index: 2;
}
.fluid-lightbox .fluid-lightbox-left,
.fluid-lightbox .fluid-lightbox-right {
background-color: rgba(0, 0, 0, 0.75) !important;
color: #fff !important;
position: fixed !important;
z-index: 2;
}
.fluid-lightbox.fluid-lightbox-scrollable {
position: relative;
min-height: 100vh;
}
.fluid-lightbox.fluid-lightbox-scrollable .fluid-lightbox-content {
position: relative;
}
.fluid-lightbox.fluid-lightbox-scrollable .fluid-lightbox-content img {
max-width: 80%;
}
.fluid-lightbox .fluid-lightbox-content {
cursor: zoom-out;
display: flex;
align-items: center;
justify-content: center;
padding: var(--fluid-lg-space);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.fluid-lightbox .fluid-lightbox-content img {
max-width: 100%;
max-height: 100%;
}
.fl.uid .fluid-page .fluid-section {
display: flex;
flex-direction: column;
flex: 0 0 auto;
margin: 0 calc(0px - var(--fluid-lg-space));
}
.fl.uid .fluid-page .fluid-section .fluid-section-title {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: flex-end;
padding: 9px var(--fluid-lg-space) 0;
text-transform: uppercase;
border-bottom: 2px solid var(--fluid-line-color);
min-height: var(--fluid-target-size);
}
.fl.uid .fluid-page .fluid-section .fluid-section-title .fluid-section-title-text {
display: inline-flex;
max-width: 70%;
box-shadow: 0px 2px 0px 0px currentColor;
align-items: flex-end;
padding: 0 0 5px;
font-weight: 500;
}
.fl.uid .fluid-page .fluid-section .fluid-section-description {
flex: 0 0 auto;
display: flex;
flex-direction: column;
padding: var(--fluid-lg-space);
padding-bottom: 0;
font-style: italic;
}
.fl.uid .fluid-page .fluid-section .fluid-section-description > :first-child {
margin-top: 0;
}
.fl.uid .fluid-page .fluid-section .fluid-section-description > :last-child {
margin-bottom: 0;
}
.fl.uid .fluid-page .fluid-section .fluid-section-content {
flex: 1 0 auto;
display: grid;
grid-row-gap: var(--fluid-sm-space);
}
.fl.uid .fluid-scroller {
box-sizing: border-box;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.fl.uid .fluid-pad {
box-sizing: border-box;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
padding: var(--fluid-lg-space);
}
.fl.uid .fluid-pad-x {
padding-left: var(--fluid-lg-space);
padding-right: var(--fluid-lg-space);
}
.fl.uid .fluid-pad-y {
padding-top: var(--fluid-lg-space);
padding-bottom: var(--fluid-lg-space);
}
.fl.uid .fluid-page {
--fluid-top-inset: 0px;
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: var(--fluid-background);
color: var(--fluid-color);
max-height: 100%;
min-height: 0;
}
.fl.uid .fluid-page .fluid-sticky-element {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: var(--fluid-top-inset);
background: var(--fluid-background);
z-index: 9;
}
.fl.uid .fluid-page .fluid-page-actions {
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.fl.uid .fluid-page .fluid-page-toolbar-content {
position: static;
padding: 0 var(--fluid-med-space);
padding-left: 2px;
flex: 1 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.fl.uid .fluid-page .fluid-page-title-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 20px;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
}
.fl.uid .fluid-page .fluid-page-headline {
font-size: 24px;
font-weight: 600;
}
.fl.uid .fluid-page .fluid-page-content {
box-sizing: border-box;
flex: 1 0 auto;
display: flex;
flex-direction: column;
background: var(--fluid-background);
z-index: 1;
}
.fl.uid .fluid-page-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
min-height: 55px;
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
background: var(--fluid-background);
border-top: 2px solid var(--fluid-box-background);
z-index: 9;
}
.fl.uid .fluid-page-footer > .fluid-button {
margin-right: var(--fluid-sm-space);
}
.fl.uid .fluid-page-footer > .fluid-button:last-child {
margin-right: 0px;
}
.fl.uid .fluid-page-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
}
.fluid .fluid-collection {
--icon-area: 40px;
--accessory-area: 0px;
--thumbnail-brightness: 97%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: var(--fluid-lg-space);
position: relative;
padding: var(--fluid-lg-space);
padding-top: 2px;
margin: 0;
}
.fluid .fluid-collection.fluid-collection-appearance-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.fluid .fluid-collection .fluid-collection-item {
--bg-color: var(--fluid-box-background);
--fg-color: var(--fluid-box-color);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
-webkit-user-select: none;
user-select: none;
}
.fluid .fluid-collection .fluid-collection-item-thumbnail {
flex: 0 0 auto;
transition-property: transform;
transition-duration: 0.15s;
transform-origin: top center;
z-index: 1;
background-color: var(--fluid-inset-background);
}
.fluid .fluid-collection .fluid-collection-item-thumbnail .fluid-aspect-box {
-webkit-filter: brightness(var(--thumbnail-brightness));
filter: brightness(var(--thumbnail-brightness));
}
.fluid .fluid-collection .fluid-collection-item-text {
flex: 1 1 auto;
display: flex;
min-height: 50px;
}
.fluid .fluid-collection .fluid-collection-item-text .fluid-item-title {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
max-width: 100%;
padding: 0 10px;
}
.fluid .fluid-collection .fluid-collection-item-text .fluid-item-title .fluid-item-title-text,
.fluid .fluid-collection .fluid-collection-item-text .fluid-item-title .fluid-item-description {
line-height: 1;
word-break: break-word;
text-align: left;
}
.fluid .fluid-collection .fluid-collection-item-text .fluid-item-title .fluid-item-description {
padding-top: 3px;
opacity: 0.7;
font-size: 11px;
line-height: 1.3;
}
.fluid .fluid-collection .fluid-collection-item-text .fluid-item-title .fluid-truncate {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fluid .fluid-collection .fluid-collection-item-text.item-has-icon .fluid-item-title {
padding-left: 0;
max-width: calc(100% - (var(--icon-area) + var(--accessory-area)));
}
.fluid .fluid-collection .fluid-collection-item-icon,
.fluid .fluid-collection .fluid-collection-item-accessory {
flex: 0 0 var(--icon-area);
width: var(--icon-area);
min-height: var(--icon-area);
display: flex;
justify-content: center;
align-items: center;
}
.fluid .fluid-collection .fluid-button.fluid-collection-item-primary-action {
flex: 1 1 auto;
padding: 0;
color: var(--fg-color) !important;
background: var(--bg-color) !important;
border-radius: var(--fluid-med-radius);
overflow: hidden;
transition-property: background-color box-shadow;
transition-duration: 0.2s;
}
.fluid .fluid-collection .fluid-button.fluid-collection-item-primary-action > span {
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
}
.fluid .fluid-collection .fluid-button.fluid-collection-item-primary-action:focus {
box-shadow: 0 0 0 2px var(--fluid-background), 0 0 0 4px var(--fluid-blue);
}
.fluid .fluid-collection.fluid-collection-appearance-list .fluid-button.fluid-collection-item-primary-action {
border-radius: var(--fluid-radius);
}
.fluid .fluid-collection .fluid-collection-item.is-selected {
--bg-color: var(--fluid-blue);
--fg-color: white;
}
.fluid .fluid-collection .fluid-collection-item.is-selected .fluid-button.fluid-collection-item-primary-action {
box-shadow: 0 0 0 2px var(--fluid-background), 0 0 0 6px var(--fluid-blue);
}
.fluid .fluid-collection .fluid-collection-item.is-selected .fluid-button.fluid-collection-item-primary-action:hover, .fluid .fluid-collection .fluid-collection-item.is-selected .fluid-button.fluid-collection-item-primary-action:focus {
--bg-color: var(--fluid-blue);
}
.fluid .fluid-collection .fluid-collection-item.is-dragover {
padding: 2px;
border: 3px dashed var(--fluid-line-color);
}
.fluid .fluid-collection .fluid-collection-item-list-content {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--fluid-med-space);
}
.fluid .fluid-collection .fluid-collection-item-list-content .fluid-collection-item-thumbnail {
width: 120px;
align-self: stretch;
background-color: var(--fluid-box-background);
}
.fluid .fluid-collection .fluid-collection-item-list-content .fluid-item-title {
font-size: 14px;
}
.fluid .fluid-collection .fluid-collection-item-grid-content {
display: flex;
flex-direction: column;
}
.fluid .fluid-collection .fluid-collection-item-grid-content .fluid-item-title {
font-size: 12px;
}
.fluid .fluid-color-scheme-dark .fluid-collection-item .fluid-button.fluid-collection-item-primary-action {
--fg-color: var(--fluid-opaque-14;)
--bg-color: var(--fluid-opaque-1);
}
.fluid .fluid-color-scheme-dark .fluid-collection-item .fluid-button.fluid-collection-item-primary-action:hover {
--bg-color: var(--fluid-opaque-0);
}
.fluid .fluid-color-scheme-dark .fluid-collection-item.is-selected .fluid-button.fluid-collection-item-primary-action {
--bg-color: var(--fluid-blue);
--fg-color: white;
}
.fluid .fluid-color-scheme-dark .fluid-collection-item.is-dragover {
border: 3px dashed var(--fluid-opaque-4);
}
.fluid-tool-bar .fluid-tool-bar-item {
border-radius: var(--fluid-med-radius) !important;
background-color: var(--fluid-box-background);
color: var(--fluid-box-color);
}
.fluid .fluid-tool-bar {
--toolbar-size: 60px;
--toolbar-background: var(--fluid-inset-background);
--space: 6px;
flex: 0 0 var(--toolbar-size);
min-height: var(--toolbar-size);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space);
padding: 0 16px;
background: var(--toolbar-background);
border-bottom: 1px solid var(--fluid-line-color);
z-index: 1;
}
.fluid .fluid-tool-bar.fluid-is-sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.fluid .fluid-tool-bar.fluid-size-lg {
--toolbar-size: 60px;
}
.fluid .fluid-tool-bar.fluid-size-med {
--toolbar-size: 50px;
}
.fluid .fluid-tool-bar.fluid-size-sm {
--toolbar-size: 40px;
}
.fluid .fluid-tool-bar.fluid-tool-bar-appearance-stack {
flex: 0 0 auto;
flex-direction: column;
align-items: stretch;
min-height: auto;
padding: 0;
}
.fluid .fluid-tool-bar.fluid-tool-bar-appearance-stack > .fluid-tool-bar-section {
flex-direction: column;
gap: 16px;
padding: 16px;
}
.fluid .fluid-tool-bar.fluid-tool-bar-appearance-stack > .fluid-tool-bar-section > * {
flex: 1 1 auto;
}
.fluid .fluid-tool-bar .fluid-tool-bar-section {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
}