/*##################################################################################
#
#               - COPYRIGHT AND CONFIDENTIALITY NOTICE -
#                  TYNDALL FX CONFIDENTIAL INFORMATION
#
# All rights reserved to TYNDALL FX SAS, a company incorporated
# and existing under the laws of France, with headquarters
# at 35 Bd des Princes 06210 Mandelieu-La Napoule, FRANCE registered under
# company number 948 609 573 - "TYNDALL FX SAS".
#
# The source code is proprietary and confidential information of TYNDALL FX SAS.
# Except as expressly permitted under applicable law or by written
# agreement, it is prohibited to, directly or indirectly, modify, copy, analyze,
# reverse engineer, disassemble or otherwise attempt to derive the source code or
# to permit or encourage a third-party to do so.
#
# For any question about terms and conditions, contact: contact@tyndallfx.com
# Copyright (c) 2023-2025 TYNDALL FX SAS
##################################################################################*/
/* !!! WARNING !!!
   This file is auto-generated.
   Do not manually edit. */

/* style-crafted-bits.css */
/*
** ====================================================================================
** Base
** ====================================================================================
*/
:root
{
	--tfx-red: #C1666B;
	--tfx-blue: #8484EB;
	--tfx-green: #57E59F;
	--tfx-white: #ebebeb;
	--tfx-yellow: #EBFF96;
	--tfx-grey: #575C60;
	--tfx-dark-grey: #393838;
	--tfx-bright-grey: #A1A6AA;
	--tfx-black: #101010;
}

html
{
	font-size: 70%;
}

body
{
	font-family: 'Work Sans', sans-serif;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background-color: transparent;
	overscroll-behavior: none; /*disable bounce effects when scrolling on the edge of the view*/
	user-select: none;
	overflow-x: hidden;
}

.hidden
{
	display: none !important;
}

.big-text
{
	font-size: 30pt;
}

.tfx-button
{
	--tfx-button-height: 70px;
	--tfx-button-font-size: 28px;
	--tfx-button-border: 6px;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	height: var(--tfx-button-height);
	font-size: var(--tfx-button-font-size);
	color: var(--tfx-yellow);
	background: transparent;
	border: var(--tfx-button-border) solid var(--tfx-yellow);
	border-radius: calc(2 * var(--tfx-button-border));
	text-align: center;
	cursor: pointer;
	font-family: var(--tfx-font-regular);
	user-select: none;
}

.tfx-button-disabled
{
	color: var(--tfx-grey);
	border-color: var(--tfx-grey);
	cursor: not-allowed;
	opacity: 0.6;
}

.page.terrain-background
{
	background-image: url("background.png");
	background-size: cover;
}

.page > .header
{
	font-size: 30pt;
	display: flex;
}

.page.transparent_background
{
	background-color: transparent;
}

.page.opaque_background
{
	background-color: #000;
}

/*
** ====================================================================================
** Main page
** ====================================================================================
*/
#main-page main
{
	padding-bottom: 10rem;
}

#main-page.is-selecting .not-during-selection,
#main-page:not(.is-selecting) .during-selection,
#main-page:not(.show-license-dialogue) .license-dialogue
{
	display: none;
}

#main-page .license-list
{
	display: grid;
	grid-template-columns: auto auto;
}

#main-page .license-item
{
	display: contents
}

/*
** ====================================================================================
** Loading page
** ====================================================================================
*/
#tfx-loading-page .c-progress-bar .text
{
	width: 3em;
	text-align: right;
}

#tfx-loading-page .tfx-loading-text
{
	white-space: nowrap;
}

/*
** ====================================================================================
** View 3D
** ====================================================================================
*/

#view-3d-page
{
	--header-height: 50px;
	--header-background: #00000088;
	--panel-background: #00000088;
	--corner: 10px;
	--tab-inactive-text: #ffffff;
	--tab-active-text: #333333;
	--tab-selector-border-size: 3px;
	--button-inactive: #dddddd;
	--dialog-border-size: 3px;
}

#view-3d-page .view-panel
{
	position: absolute;
	bottom: 0;
	left: 0;
	text-wrap: nowrap;
	padding: 1em;
	display: flex;
	color: #ffffff;
	flex-direction: column;
	background-color: var(--panel-background);
	border-radius: 0 0 0 var(--corner);
	transition: transform 0.1s ease-out 0s;
}

#view-3d-page:not(.show-view-panel) .view-panel
{
	display: none;
}

#view-3d-page .view-panel .warning
{
	font-size: 125%;
	color: #ffaa00;
}

#view-3d-page.is-gps-enabled .view-panel .warning
{
	display: none;
}

#view-3d-page .view-panel > .params-group
{
	display: grid;
	grid-template-columns: auto auto;
	font-size: 200%;
}

#view-3d-page .view-panel > .params-group > div
{
	padding: 0.1em 0.5em;
}

#view-3d-page .view-panel > .params-group > input[type="checkbox"]
{
	zoom: 200%;
}

#view-3d-page:not(.show-view-panel) .features-panel,
#view-3d-page:not(.show-edit-annotations-panel) .edit-annotations-panel,
#view-3d-page:not(.show-edit-measures-panel) .edit-measures-panel
{
	display: none;
}

#view-3d-page .features-panel .tabs
{
	display: flex;
	border: var(--tab-selector-border-size) solid var(--tfx-yellow);
	border-radius: calc(var(--corner) + var(--tab-selector-border-size));
	margin: 0.2em;
}

#view-3d-page .features-panel .tabs > div
{
	padding: 0 1em;
	border-radius: 0;
	font-weight: bold;
	color: var(--tab-inactive-text);
}

#view-3d-page .features-panel .tabs > div:first-child
{
	border-radius: var(--corner) 0 0 var(--corner);
}

#view-3d-page .features-panel .tabs > div:last-child
{
	border-radius: 0 var(--corner) var(--corner) 0;
}

#view-3d-page:not(.is-tab-edit) .features-panel .tabs > .view-tab,
#view-3d-page.is-tab-edit > .features-panel .tabs > .edit-tab
{
	background-color: var(--tfx-yellow);
	color: var(--tab-active-text);
}

#view-3d-page:not(.is-tab-edit) .edit-tab-only,
#view-3d-page.is-tab-edit .view-tab-only
{
	display: none;
}

#view-3d-page .features-panel > .tab-content
{
	padding: 0.2em 0;
}

#view-3d-page .features-panel .warning
{
	color: #ffaa00;
}

#view-3d-page.is-gps-enabled .features-panel .warning
{
	display: none;
}

#view-3d-page .features-panel > .tab-content > .checkbox-group label
{
	display: block;
	margin: 0.2em 0;
}

#view-3d-page .features-panel > .tab-content > .edit-tab-content select,
#view-3d-page .features-panel > .tab-content > .edit-tab-content input
{
	margin: 0.2em;
	font-size: 100%;
	max-width: 200px;
	max-height: 50px;
}

#view-3d-page .features-panel > .tab-content > .edit-tab-content div
{
	margin: 0.2em;
	font-size: 100%;
	max-width: 200px;
	max-height: 100px;
}

#view-3d-page .save-panel
{
	font-size: 200%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #333333aa;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 4em;
	color: #fff;
	--tfx-red: #f55;
}

#view-3d-page .save-panel .container,
#main-page .tfx-delete-panel .container
{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #00000088;
	border-radius: var(--corner);
	border: var(--dialog-border-size) solid var(--tfx-yellow);
	padding: 1em;
}

#view-3d-page .save-panel .filename
{
	width: 30em;
	height: 2em;
	margin: 0.5em;
}

#view-3d-page .save-panel .actions,
#main-page .tfx-delete-panel .actions
{
	display: flex;
	border-radius: calc(var(--corner) + var(--dialog-border-size));

	--action-color-border: var(--tfx-bright-grey);
	--action-color-hover: var(--tfx-bright-grey);
	--action-color-active: var(--tfx-grey);
}

#view-3d-page .save-panel .actions > .action:first-child,
#main-page .tfx-delete-panel .actions > .action:first-child
{
	border-radius: var(--corner) 0 0 var(--corner);
}

#view-3d-page .save-panel .actions > .action:last-child,
#main-page .tfx-delete-panel .actions > .action:last-child
{
	border-radius: 0 var(--corner) var(--corner) 0;
}

#view-3d-page .save-panel .action,
#main-page .tfx-delete-panel .action
{
	padding: 0.5em 1em;
	margin: 1em 0.1em;
	border: var(--dialog-border-size) solid var(--action-color-border);
	border-radius: 0;
	font-weight: bold;
}

#view-3d-page .save-panel .action:hover,
#main-page .tfx-delete-panel .action:hover
{
	background-color: var(--action-color-hover);
}

#view-3d-page .save-panel .action:active,
#main-page .tfx-delete-panel .action:active
{
	background-color: var(--action-color-active);
}

#view-3d-page .save-panel .action.action-save,
#main-page .tfx-delete-panel .action.action-delete
{
	--action-color-border: var(--tfx-yellow);
	--action-color-hover: var(--tfx-yellow);
	--action-color-active: var(--tfx-white);
}

#view-3d-page .save-panel .action.action-save:hover,
#view-3d-page .save-panel .action.action-save:active,
#main-page .tfx-delete-panel .action.action-delete:hover,
#main-page .tfx-delete-panel .action.action-delete:active
{
	color: #000;
}

#view-3d-page .save-panel .filename:invalid
{
	background-color: #faa;
}

#view-3d-page .save-panel .filename:invalid ~ .actions .action.action-save
{
	--action-color-border: var(--tfx-red);
	--action-color-hover: transparent;
	--action-color-active: transparent;
	color: var(--tfx-red);
}

#view-3d-page .save-panel .invalid-filename-help,
#view-3d-page .save-capture-dialog .invalid-filename-help
{
	display: none;
}

#view-3d-page .save-panel .filename:invalid ~ .invalid-filename-help,
#view-3d-page .save-capture-dialog .filename:invalid ~ .invalid-filename-help
{
	display: block;
	color: var(--tfx-red);
	font-weight: bold;
}

#view-3d-page .logo-bottom-right
{
	position: fixed;
	z-index: 1;
	pointer-events: none;
	bottom: 2.5rem;
	right: 2.5rem;
	max-width: 6rem;
}

#view-3d-page .stop-capture-button,
#view-3d-page .new-capture-button
{
	position: fixed;
	z-index: 1;
	bottom: 2.5rem;
	right: 10rem;
}

#view-3d-page .alert-banner
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	color: white;
	text-align: center;
	padding: 0.75em;
	font-weight: bold;
	font-size: 1em;
	z-index: 9999;
	display: none;
}

#view-3d-page .start-3D-first-attempt,
#view-3d-page .start-3D-several-attempts
{
	background-color: #f0ad4e;
}

#view-3d-page .connection-warning,
#view-3d-page .start-3D-many-attempts
{
	background-color: #d9534f;
}

#view-3d-page .stream-change-warning
{
	background-color: #f0ad4e;
}

#view-3d-page .viewpoint-date-card
{
	width: 23.375rem;
}

#view-3d-page:not(.is-reconstruction) .reconstruction-only,
#view-3d-page.is-reconstruction .view-only,
#view-3d-page:not(.is-tab-fly) .tab-fly-only,
#view-3d-page.is-tab-fly .tab-3d-only,
#view-3d-page.is-tab-fly .view-panel,
#view-3d-page.show-info-panel .hidden-by-info-panel,
#view-3d-page:not(.show-info-panel) .info-panel,
#view-3d-page:not(.is-3D-started) .button-stop-3d,
#view-3d-page:not(.stopped-capture) .after-stop-capture-only,
#view-3d-page:not(.show-annotations) .annotations-shown,
#view-3d-page:not(.show-distances) .distances-shown,
#view-3d-page:not(.is-gps-enabled) .gps-only-else-remove,
#view-3d-page:not(.is-map-shown) .map-only
{
	display: none;
}

#view-3d-page.start-3D-first-attempt .start-3D-first-attempt,
#view-3d-page.start-3D-several-attempts .start-3D-several-attempts,
#view-3d-page.start-3D-many-attempts .start-3D-many-attempts
{
	display: block;
}

#view-3d-page.connection-lost .connection-warning
{
	display: block;
}

#view-3d-page.stream-changed .stream-change-warning
{
	display: block;
}

#view-3d-page:not(.is-gps-enabled) .gps-only
{
	opacity: 0.5; /* Visually faded */
	pointer-events: none; /* Prevent clicks, hovers, etc. */
	cursor: default; /* Ensures the cursor doesn't show as a pointer (hand icon), giving better UX */
}

#view-3d-page .c-info-panel,
#view-3d-page .c-options-panel
{
	overflow: auto;
}

#view-3d-page .features-panel,
#view-3d-page .edit-annotations-panel,
#view-3d-page .edit-measures-panel
{
	margin-left: 6rem;
}

#view-3d-page.show-edit-annotations-panel button.tool-edit-annotations,
#view-3d-page.show-edit-measures-panel button.tool-edit-measures,
#view-3d-page.show-view-panel button.tool-3d-params
{
	border-radius: 2.5rem 0% 0% 2.5rem;
	border-right: none;
	width: 8.5rem;
	padding-right: 3.5rem;
}

#view-3d-page .param.map-height-slider
{
	width: 100%;
	margin-top: 1em;
}

#view-3d-page dialog.add-annotation-dialog h2
{
	margin-bottom: 1.25rem;
}

#view-3d-page dialog.add-annotation-dialog input
{
	margin-top: 0;
}

#view-3d-page dialog.add-annotation-dialog .h-stack
{
	align-items: center;
}

#view-3d-page button:disabled
{
	opacity: 0.4;
}

/* Temporarily disable useless buttons */
#view-3d-page .c-screenshot-buttons
{
	display: none;
}

#view-3d-page .c-options-panel
{
	width: 20rem;
}

#view-3d-page .features-panel.c-options-panel
{
	width: 26rem;
}

/*
** ====================================================================================
** Setup the connection
** ====================================================================================
*/

#setup-page
{
	--selection-border: #cccccc;
	--selection-item-background-hover: #eeeeee;
	--selection-item-background-active: var(--selection-border);
	--selection-item-background-selected: var(--tfx-yellow);
	--selection-item-background-selected-hover: var(--tfx-yellow);
	--selection-item-background-selected-active: var(--tfx-yellow);
}

#setup-page #setup-connection-adress
{
	font-size: 160%;
}

#setup-page:not(.has_connection) .configuration,
#setup-page.hide_stream .selection.select-stream,
#setup-page.hide_calib .selection.select-calib,
#setup-page.has_connection .until-connection,
#setup-page.has_stream .until-stream,
#setup-page.has_calibration .until-calibration,
#setup-page.is_ready .until-ready,
#setup-page:not(.has_connection) .from-connection,
#setup-page:not(.has_stream) .from-stream,
#setup-page:not(.has_calibration) .from-calibration,
#setup-page:not(.is_ready) .from-ready,
#setup-page.setup-dji :not(.setup-dji),
#setup-page.setup-manual :not(.setup-manual),
#setup-page.setup-rover :not(.setup-rover),
#setup-page.setup-gopro :not(.setup-gopro),
#setup-page.setup-dji .selection.select-calib > ul.items
{
	display: none;
}

@keyframes blink-action-done
{
	0%  { background-color: var(--done-enabled); }
	50% { background-color: var(--done-enabled-highlight); }
}

#setup-page .selection
{
	padding: 0;
	background-color: var(--selection-background);
	color: #fff;
	margin-bottom: 1em;
}

#setup-page .selection > .title
{
	padding: 0.5em;
	background-color: var(--selection-title-background);
	position: sticky;
	top: 0;
}

#setup-page .selection > ul.items
{
	color: #000;
	list-style: none;
	background-color: #fdfdfd;
	padding: 0;
	margin: 0;
	border: 2px solid var(--selection-border);
}

#setup-page .selection > ul.items > li
{
	padding: 0.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#setup-page .selection > ul.items > li:not(:last-child)
{
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--selection-border);
}

#setup-page .selection > ul.items > li.selected
{
	font-weight: bold;
	background-color: var(--selection-item-background-selected);
	box-shadow: 0 0 4px 0 var(--selection-border) inset;
}

#setup-page .selection > ul.items > li:hover
{
	background-color: var(--selection-item-background-hover);
}

#setup-page .selection > ul.items > li:active
{
	background-color: var(--selection-item-background-active);
}

#setup-page .selection > ul.items > li.selected:hover
{
	background-color: var(--selection-item-background-selected-hover);
	box-shadow: 0 0 6px 0 var(--selection-border) inset;
}

#setup-page .selection > ul.items > li.selected:active
{
	background-color: var(--selection-item-background-selected-active);
}

/*
** ====================================================================================
** Calibration
** ====================================================================================
*/

#calibration-page > .guides
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#calibration-page > .guides svg
{
	transform: scaleX(-1);
}

#calibration-page.is_ready .in-progress-only,
#calibration-page:not(.is_ready) .done-only,
#calibration-page:not(.is_started) .started-only,
#calibration-page.is_started .not-started-only
{
	display: none;
}

#calibration-page .c-navbar
{
	background: none;
}

/*
** ====================================================================================
** Calibration
** ====================================================================================
*/
#calibration-tutorial-page .instructions .instruction-step:first-child
{
	margin-top: 0;
}

#calibration-tutorial-page .calibration-tutorial-video {
	position: fixed;
	top: 12.5rem;
	left: 50rem;
	right: 2.5rem;
	bottom: 10rem;
	overflow: hidden
}


/* craftedbits.css */
@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

*,
*:before,
*:after {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0;
    font: inherit
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

p {
    text-wrap: pretty
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance
}

body {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

a {
    color: #e7ff8a;
    text-decoration: none
}

a:hover,
a:focus {
    text-decoration: underline
}

button {
    background: none;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: ease
}

button:hover:not(:disabled),
button:focus:not(:disabled) {
    transform: scale(1.03)
}

button:disabled {
    opacity: .4;
    cursor: not-allowed
}

.primary-button,
.secondary-button,
.destructive-button {
    display: inline-flex;
    align-items: center;
    gap: .9375rem;
    height: 5rem;
    border-radius: .9375rem;
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600
}

.primary-button img,
.secondary-button img,
.destructive-button img {
    width: 2.5rem;
    height: 2.5rem
}

.primary-button {
    color: #000;
    background-color: #e7ff8a;
    padding: 0 1.875rem
}

.secondary-button {
    color: #e7ff8a;
    border: .1875rem solid #E7FF8A;
    padding: 0 1.6875rem;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .secondary-button {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.destructive-button {
    color: #fff;
    background-color: #e64950;
    padding: 0 1.875rem
}

.back-button {
    display: block
}

.back-button img {
    width: 5rem;
    height: 5rem
}

.card-button {
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1.875rem;
    height: auto;
    text-align: center
}

.card-button.secondary-button {
    padding: 2.3125rem 1.6875rem
}

.card-button img {
    width: 5rem;
    height: 5rem
}

.round-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .round-button {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.round-button {
    border: .1875rem solid rgba(255, 255, 255, .25)
}

.round-button img {
    width: 2.5rem;
    height: 2.5rem
}

.stop-recording-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    height: 5rem;
    border-radius: 2.5rem;
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .stop-recording-button {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.stop-recording-button {
    border: .1875rem solid rgba(255, 255, 255, .25)
}

.stop-recording-button {
    color: #ff453a;
    border-color: #ff453a
}

.stop-recording-button img {
    width: 1.875rem;
    height: 1.875rem
}

img.cover, video.cover {
    width: 100%;
    height: 100%;
    object-fit: cover
}

input[type=text] {
    height: 5rem;
    color: #000;
    border: none;
    outline: none;
    border-radius: .9375rem;
    background-color: #fff3;
    padding: 0 1.875rem;
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 500;
    color: #e6e6e6
}

input[type=text]:disabled {
    opacity: .4;
    cursor: not-allowed
}

.instructions {
    padding: 2.5rem;
    border-radius: .9375rem;
    background-color: #272727
}

.instructions h2 {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 24px;
    font-weight: 600;
    color: #fff
}

.instructions .instruction-step {
    margin-top: 2.5rem
}

.instructions .instruction-step .title {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .625rem
}

.instructions .instruction-step .title img {
    width: 2rem;
    height: 2rem
}

.instructions .instruction-step .description {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6;
    margin-top: .9375rem
}

.instructions .instruction-step .code {
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
    font-size: 16px;
    font-weight: 700;
    color: #f6ffc7;
    margin-top: .9375rem
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr));
    gap: 1.25rem
}

.sections-with-cards section:not(:first-child) {
    margin-top: 3.75rem
}

.sections-with-cards h2 {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1.25rem
}

.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.v-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.h-stack {
    display: flex;
    gap: 1.25rem
}

.floating-top-left,
.floating-top-right,
.floating-top-center,
.floating-bottom-left,
.floating-bottom-right,
.floating-bottom-center,
.floating-center-center {
    position: fixed;
    z-index: 1
}

.floating-top-left,
.floating-top-right,
.floating-top-center {
    top: 2.5rem
}

.floating-top-left.avoid-navbar,
.floating-top-right.avoid-navbar,
.floating-top-center.avoid-navbar {
    top: 12.5rem
}

.floating-bottom-left,
.floating-bottom-right,
.floating-bottom-center {
    bottom: 2.5rem
}

.floating-top-left,
.floating-bottom-left {
    left: 2.5rem
}

.floating-top-right,
.floating-bottom-right {
    right: 2.5rem
}

.floating-top-center,
.floating-bottom-center {
    left: 50%;
    transform: translate(-50%)
}

.floating-center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.card-status-column {
    width: min(31.25rem, 50% - 2.5rem - 1.25rem);
    max-height: calc(100vh - 21.25rem);
    max-height: calc(100svh - 21.25rem);
    overflow: auto
}

.instructions-column {
    width: min(43.75rem, 50% - 2.5rem - 1.25rem);
    max-height: calc(100vh - 15rem);
    max-height: calc(100svh - 15rem);
    overflow: auto
}

.page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column
}

.page>.c-navbar {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 10rem
}

.page>main {
    flex: 1 1 0;
    padding: 2.5rem
}

.panel {
    padding: 1.25rem;
    border-radius: 2.5rem;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .panel {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.panel {
    border: .1875rem solid rgba(255, 255, 255, .25)
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

dialog {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(62.5rem, 100% - 5rem);
    padding: 2.5rem;
    border-radius: 2.5rem;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    dialog {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

dialog {
    border: .1875rem solid rgba(255, 255, 255, .25)
}

dialog::backdrop {
    background-color: #0009
}

dialog h2 {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 24px;
    font-weight: 600;
    color: #fff
}

dialog p {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6;
    margin-top: .9375rem
}

dialog input[type=text] {
    display: block;
    width: 100%;
    margin-top: 1.25rem
}

dialog .buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-top: 2.5rem
}

dialog .buttons .group {
    display: flex;
    gap: 1.25rem
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-card-image {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: .9375rem;
    overflow: hidden;
    background-color: #272727
}

.c-card-image .selection-icon {
    display: none;
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: 1.25rem;
    right: 1.25rem
}

.c-card-image .image {
    width: 100%;
    height: 10.625rem;
    object-fit: cover
}

.c-card-image .title {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-align: left;
    margin: .9375rem .9375rem 0
}

.c-card-image .title:last-child {
    margin-bottom: .9375rem
}

.c-card-image .subtitle {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 14px;
    font-weight: 400;
    color: #e6e6e6;
    text-align: left;
    margin: .3125rem .9375rem .9375rem
}

.c-card-image.selected .selection-icon {
    display: block
}

.c-card-image.selected .image {
    opacity: .4
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10rem;
    overflow: hidden;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .c-navbar {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.c-navbar h1 {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 56px;
    font-weight: 600;
    color: #fff;
    text-align: center
}

.c-navbar .logo {
    height: 2.5rem
}

.c-navbar .back-button {
    position: absolute;
    left: 2.5rem
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-screenshot-buttons {
    position: relative;
    display: flex;
    gap: 1.25rem
}

.c-screenshot-buttons .stop-recording-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none
}

.c-screenshot-buttons.recording-in-progress .round-button {
    opacity: 0
}

.c-screenshot-buttons.recording-in-progress .stop-recording-button {
    opacity: 1;
    pointer-events: auto
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-info-panel {
    display: flex;
    flex-direction: column;
    width: 23.375rem;
    max-height: calc(100vh - 11.25rem);
    max-height: calc(100svh - 11.25rem);
    overflow: scroll
}

.c-info-panel .icon {
    align-self: flex-end;
    margin: -.1875rem -.1875rem 0 0;
    width: 2.5rem;
    height: 2.5rem
}

.c-info-panel .group {
    margin-top: 1.25rem
}

.c-info-panel .group .title {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: .3125rem
}

.c-info-panel .group .value {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-switch-input {
    position: relative;
    display: inline-block;
    width: 3.75rem;
    height: 1.875rem
}

.c-switch-input input {
    opacity: 0;
    width: 0;
    height: 0
}

.c-switch-input .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff3;
    border-radius: 1.875rem;
    transition: .1s
}

.c-switch-input .slider:before {
    position: absolute;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    left: .1875rem;
    bottom: .1875rem;
    background-color: #fff;
    border-radius: 50%;
    transition: .1s
}

.c-switch-input input:checked+.slider {
    background-color: #e7ff8a
}

.c-switch-input input:focus+.slider {
    box-shadow: 0 0 .0625rem #e7ff8a
}

.c-switch-input input:checked+.slider:before {
    background-color: #000;
    transform: translate(1.875rem)
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-options-panel {
    display: flex;
    flex-direction: column;
    width: 23.375rem;
    max-height: calc(100vh - 15rem);
    max-height: calc(100svh - 15rem);
    overflow: scroll
}

.c-options-panel .icon {
    align-self: flex-start;
    margin: 0 0 -.1875rem -.1875rem;
    width: 2.5rem;
    height: 2.5rem
}

.c-options-panel .group {
    margin-bottom: 1.25rem
}

.c-options-panel .group .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff
}

.c-options-panel .group .link {
    display: block;
    margin-top: .9375rem;
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6
}

.c-options-panel .group .link {
    color: #e7ff8a
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-progress-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.c-progress-bar .bar {
    flex: 1 1 0;
    width: 12.5rem;
    height: 1.25rem;
    border-radius: .625rem;
    background-color: #fff3
}

.c-progress-bar .bar .value {
    height: 100%;
    border-radius: .625rem;
    background-color: #e7ff8a;
    overflow: hidden
}

.c-progress-bar .text {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
    flex: 0 0 auto;
    color: #e7ff8a
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-card-status {
    padding: 1.25rem;
    border-radius: .9375rem;
    background-color: #272727
}

.c-card-status .title {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .625rem
}

.c-card-status .title img {
    width: 2rem;
    height: 2rem
}

.c-card-status .description {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-top: .9375rem
}

.c-card-status .content {
    margin-top: 1.25rem
}

.c-card-status .content:empty {
    display: none
}

.c-card-status.type-success .title {
    color: #00d861
}

.c-card-status.type-error .title {
    color: #e64950
}

.c-card-status.type-info .title {
    color: #fff
}

.c-card-status.type-loading .title {
    color: #76a6d9
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-card-metric {
    padding: .9375rem 1.25rem;
    border-radius: .9375rem;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .c-card-metric {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.c-card-metric .title {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: .3125rem
}

.c-card-metric .value {
    font-family: Work Sans, system-ui, sans-serif;
    line-height: 1.18;
    font-size: 16px;
    font-weight: 400;
    color: #e6e6e6
}

@font-face {
    font-family: Work Sans;
    src: url(work-sans-variable.ttf) format("truetype-variations");
    font-style: normal;
    font-weight: 100 900
}

.c-segmented-control {
    display: flex;
    gap: .625rem;
    padding: .625rem;
    border-radius: .9375rem;
    background-color: #000000e6
}

@supports (backdrop-filter: blur(30px)) {
    .c-segmented-control {
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        background-color: #000000b3
    }
}

.c-segmented-control {
    border: .1875rem solid rgba(255, 255, 255, .25)
}

.c-segmented-control button.selected {
    background-color: #fff;
    cursor: auto
}

.c-segmented-control button.selected:hover,
.c-segmented-control button.selected:focus {
    transform: none
}

.c-segmented-control button:not(.selected) {
    filter: invert(1);
    background-color: transparent
}

.c-segmented-control button:disabled {
    opacity: 1
}


/* style-footer-bar.css */
:root {
  --app-version: "Version 0.0.0";
  --app-commit-hash: "00000000";
  --tfx-yellow: #EBFF96;
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  background: #000;
  z-index: 1000;
}

.bottom-left-link {
  font-size: 0.85em;
  font-weight: bold;
}

.bottom-left-link a {
  color: var(--tfx-yellow);
  text-decoration: none;
}

.bottom-left-link a:hover,
.bottom-left-link a:focus {
  text-decoration: underline;
}

.bottom-right-version-license
{
  align-items: center;
}

.license-button
{
    width: 2.5rem;
    height: 2.5rem;
}

.version-tag
{
    font-size: 0.85em;
    color: var(--tfx-yellow);
    font-weight: bold;
	white-space: nowrap;
}

.version-tag::after {
  content: var(--app-version) " (" var(--app-commit-hash) ")";
  color: var(--tfx-yellow);
}