:root {
	--s-page-width: 500px;
	--c-bg: #fafafa;
	--c-text: #4e4e4e;
	--c-link: #757889;
	--c-link-alert: #d67328;
	--c-light-text: #757889;
	--c-panel: #efefef;
	--c-label: #afb1c1;
	--c-headline: #0dabd3;
	--c-headline-light: #b5bad5;
	--c-accent: #0dabd3;
	--c-cancel: #d70f0f;
	--c-line: #eeeff4;
	--c-list-bg: #fff;
	--c-list-icon: #e2e5ec;
	--c-item-border: #e2e5ec;
	--c-item-bg: #fff;
	--c-item-text: #757889;
	--c-item-placeholder: #9497ac;
	--c-item-disabled-bg: #eee;
	--c-item-disabled-text: #999;
	--c-item-invalid: #e30707;
	--c-item-arrow: #757889;
	--c-check-off: #eeeff4;
	--c-check-on: #39dc00;
	--c-icon-gradient: linear-gradient(#049ec6, #0faed7);
	--c-icon-text: #fff;
	--c-button-gradient: linear-gradient(#049ec6, #0faed7);
	--c-button-gradient-cancel: linear-gradient(#c60404, #d70f0f);
	--c-button-text: #fff;
	--c-button-disabled-bg: #999;
	--c-button-disabled-text: #ccc;
	--c-button-icon-text: #0faed7;
	--c-button-icon-bg: #efefef;
	--c-button-icon-disabled: #e2e5ec;
	--c-header-bg: #1f1e2a;
	--c-brand: #fff;
	--c-brand2: #f08011;
	--c-gradient: linear-gradient(#10cfff 43%, #0b96b9 100%);
	--c-file-icon: #e30707;
	--c-file-disabled: #ddd;
	--c-step-bg: #d9d9d9;
	--c-step-text: #757889;
	--c-step-active-bg: #0dabd3;
	--c-step-active-text: #fff;
	--c-popup-border: #efefef;
	--c-popup-bg: #fafafa;
	--c-popup-text: #9497ac;
	--c-popup-disabled: #ddd;
	--c-popup-hover: #f4f4f4;
	--c-alert-shade: rgba(0,0,0,0.1);
	--c-alert-headline: #4e4e4e;
	--c-alert-message: #696c7b;
	--c-alert-yes: #0dabd3;
	--c-alert-no: #e03939;
	--c-vtr-line: #eeeff4;
	--c-vtr-label-text: #9497ac;
	--c-vtr-value-text: #4e4e4e;
	--f-main: Poppins, Verdana, Arial, sans-serif;
	--i-warning: '\f071';
	--i-info: '\f05a';
	--i-angle-left: '\f104';
	--i-angle-right: '\f105';
	--i-toggle-large-off: '\e5b0';
	--i-toggle-large-on: '\e5b1';
}

@font-face {
  font-family: 'Fontawesome Solid'; font-style: normal; font-weight: 900; font-display: block;
  src: url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-solid-900.woff2") format("woff2"), url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: 'Fontawesome'; font-style: normal; font-weight: 400; font-display: block;
  src: url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-regular-400.woff2") format("woff2"), url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: 'Fontawesome Light'; font-style: normal; font-weight: 300; font-display: block;
  src: url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-light-300.woff2") format("woff2"), url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-light-300.ttf") format("truetype");
}

@font-face {
  font-family: 'Fontawesome Thin'; font-style: normal; font-weight: 100; font-display: block;
  src: url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-thin-100.woff2") format("woff2"), url("//thedevelopers.blob.core.windows.net/fonts-fa-pro-6-3-0/fa-thin-100.ttf") format("truetype");
}

html { min-height: 100%; }
a { color: var(--c-link); text-decoration: none; }
body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-main); font-size: 100px; }

@media (prefers-color-scheme: dark) {
	body { background: var(--c-bg); color: var(--c-text); }
}

@media (min-width: 768px) {
  header { font-size: 0.16em; }
  main { font-size: 0.16em; }
  footer { font-size: 0.16em; }
}

header { margin: 0 auto; max-width: var(--s-page-width); font-size: 0.14em; font-weight: bold; }

nav .top { position: relative; background: var(--c-header-bg); padding: 0.7em 1.1em; }
nav a.brand { font-size: 1.5em; color: var(--c-brand); }
nav a.brand .hi { color: var(--c-brand2); }
nav a.brand .page { font-weight: 400; font-size: 0.75em; color: var(--c-link); }
nav a.button { float: right; margin: 0.3em; font-family: Fontawesome Solid; font-size: 1.2em; }
nav > .menu { height: 0; overflow: hidden; font-weight: normal; transition-property: height; transition-duration: 0.1s; }
nav > .menu > div { margin: 3px 8px 3px; border: 1px solid var(--c-popup-border); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; padding: 0.4em 0.3em; }
nav > .menu a { display: grid; padding: 2px 10px; grid-template-columns: 1.5em 1fr; gap: 0.7em; align-items: center; }
nav > .menu a .icon { font-family: Fontawesome light; color: var(--c-button-icon-text); justify-self: center; }
nav > .menu a .text {}
nav > .menu a.active { background: var(--c-button-icon-bg); border-radius: 0.3em; }
nav > .menu a.disabled { color: var(--c-popup-disabled);  pointer-events: none; }
nav > .menu a.disabled .icon { color: var(--c-popup-disabled); }
nav.expanded > .menu { height: 14.1em; }

main { font-size: 0.14em; }

.main-margin { margin: 1em auto 2em; padding: 0 15px; max-width: var(--s-page-width); }

main h1 { margin: 1em 0 0.5em; color: var(--c-headline); font-weight: 500; font-size: 1.1em; }
main h2 { margin: 1em 0 0.5em; color: var(--c-headline); font-weight: 500; font-size: 1em; }
main h3 { margin: 1em 0 0.5em; color: var(--c-headline); font-weight: 500; font-size: 1em; }
main .headline { margin: 1em 0 0.5em; color: var(--c-headline); }

main h2 .tip { float: right; color: var(--c-link-alert); }
main h2 .tip .text { text-decoration: underline; }
main h2 .tip .icon { margin-left: 0.2em; font-family: Fontawesome Solid; font-size: 1.3em; vertical-align: middle; }

main .panel { margin: 0 -5px; border-radius: 0.6em; padding: 0.2em 0; }
main .panel.white {}
main .panel.colored { display: none; background: var(--c-panel); box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; }
main .panel.colored.visible { display: block; }

main .button-list { margin: 1em 0 0.5em; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1em; }
main .button-list a { position: relative; display: grid; grid-template-rows: 1fr 1em 0; gap: 0.5em; text-align: center; }
main .button-list a .icon { border-radius: 0.5em; background: var(--c-gradient); justify-self: center; width: 90%; aspect-ratio: 1; align-content: center; font-family: Fontawesome Thin; font-size: 2em; color: var(--c-button-text); box-shadow: rgba(0,0,0,0.15) 4px 4px 4px; }
main .button-list a .text-icon { border-radius: 0.67em; background: var(--c-gradient); justify-self: center; width: 90%; aspect-ratio: 1; align-content: center; line-height: 1em; font-size: 1.5em; color: var(--c-button-text); box-shadow: rgba(0,0,0,0.15) 4px 4px 4px; }
main .button-list a .text-icon span { line-height: 0.7em; font-size: 0.7em; }
main .button-list a .text { font-size: 0.9em; }
main .button-list a.flat .icon { background: none; box-shadow: none; font-family: Fontawesome; font-size: 3em; color: var(--c-accent); }
main .button-list a.expanded:after { content: ''; position: relative; justify-self: center; bottom: -0.2em; width: 1em; height: 1em; background: var(--c-panel); rotate: 45deg; }

main .link-list { background: var(--c-line); display: flow-root; }
main .link-list a { margin: 1px 0; background: var(--c-list-bg); display: grid; grid-template-columns: 3em 1fr 3em; height: 3em; align-items: center; color: var(--c-link); }
main .link-list a .icon { justify-self: center; font-family: Fontawesome Light; font-size: 1.3em; color: var(--c-accent); }
main .link-list a .text {}
main .link-list a:after { content: var(--i-angle-right); justify-self: center; font-family: Fontawesome Light; font-size: 1.3em; }

main .back-link { margin: 1em 0; display: grid; grid-template-columns: 1.3em 1fr; align-items: center; color: var(--c-accent); }
main .back-link:before { content: var(--i-angle-left); font-family: Fontawesome; font-size: 1.2em; }

main .settings-list { background: var(--c-line); display: flow-root; }
main .settings-list > div { margin: 1px 0; background: var(--c-list-bg); display: grid; grid-template-columns: 1fr 3em; height: 3em; align-items: center; color: var(--c-link); }
main .settings-list label { padding-left: 1.2em; color: var(--c-light-text); }
main .settings-list input[type=checkbox] { appearance: none; color: var(--c-check-off); font-family: Fontawesome; font-size: 2em; }
main .settings-list input[type=checkbox]:checked { appearance: none; color: var(--c-check-on); }
main .settings-list input[type=checkbox]:after { content: var(--i-toggle-large-off); }
main .settings-list input[type=checkbox]:checked:after { content: var(--i-toggle-large-on); }

main .item { margin: 0.5em 0 0; position: relative; }
main .item label { position: absolute; left: 0.5em; top: 1em; font-size: 1em; color: var(--c-item-placeholder); pointer-events: none; transition: left, top, font-size .05s; }
main .item.moved label { left: 0.7em; top: 0.55em; font-size: 0.78em; }
main .item .select-label { display: none; }
main .item.moved .select-label { display: block; }
main .item input { box-sizing: border-box; border: 1px solid var(--c-item-border); background: var(--c-item-bg); width: 100%; height: 3.22em; padding: 1.33em 0.5em 0.44em; font-family: var(--f-main); font-size: 1em; color: var(--c-item-text); outline: none; }
main .item input::placeholder { opacity: 0; color: var(--c-item-placeholder); }
main .item.moved input::placeholder { opacity: 0.5; }
main .item input.regno { text-transform: uppercase; }
main .item select { border: 1px solid var(--c-item-border); background: var(--c-item-bg); width: 100%; height: 3.22em; padding: 0 0.5em; font-family: var(--f-main); font-size: 1em; color: var(--c-item-placeholder); outline: none; appearance: none; }
main .item select.focus { color: var(--c-item-text); }
main .item.moved select { padding: 1.33em 0.5em 0.44em; color: var(--c-item-text); }
main .item .arrow { position: absolute; right: 1em; top: 1em; font-family: Fontawesome Solid; color: var(--c-item-arrow); pointer-events: none; }
main .item textarea { box-sizing: border-box; border: 1px solid var(--c-item-border); background: var(--c-item-bg); width: 100%; height:10em; padding: 1.39em 0.5em 0.5em; font-family: var(--f-main); font-size: 1em; color: var(--c-item-text); outline: none; resize: none; }
main .item .edit { position: absolute; right: 1em; top: 1em; font-family: Fontawesome; color: var(--c-accent); }
main .item .preview { box-sizing: border-box; border: 1px solid var(--c-item-border); background: var(--c-item-bg); width: 100%; height: 10em; padding: 1.39em 0.5em 0.5em; color: var(--c-item-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
main .item .icon-button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 1.95em; text-align: center; line-height: 2em; font-family: Fontawesome Solid; font-size: 1.5em; background: var(--c-icon-gradient); color: var(--c-icon-text); }
main .item input:disabled { background: var(--c-item-disabled-bg); color: var(--c-item-disabled-text); }
main .item select:disabled { background: var(--c-item-disabled-bg); color: var(--c-item-disabled-text); }
main .item textarea:disabled { background: var(--c-item-disabled-bg); color: var(--c-item-disabled-text); }
main .item .icon-button.disabled { background: var(--c-button-disabled-bg); color: var(--c-button-disabled-text); }

main .item.invalid label { color: var(--c-item-invalid); }
main .item.invalid input { border: 2px solid var(--c-item-invalid); }
main .item.invalid select { border: 2px solid var(--c-item-invalid); color: var(--c-item-invalid); }
main .item.invalid .arrow { display: none; }
main .item .alert { display: none; }
main .item.invalid .alert { display: block; position: absolute; right: 0.4em; top: 0.4em; font-family: Fontawesome Solid; font-size: 1.8em; color: var(--c-item-invalid); cursor: pointer; }
main .item.invalid:has(.icon-button) .alert { right: 2em; }

main .button { display: block; margin: 0.6em 0; border: none; background: var(--c-button-gradient); height: 2.6em; line-height: 2.6em; color: var(--c-button-text); text-align: center; cursor: pointer; }
main button.button { font-family: var(--f-main); width: 100%; }
main .button.disabled { background: var(--c-button-disabled-bg); color: var(--c-button-disabled-text); }
main .button.cancel { background: var(--c-button-gradient-cancel); }
main .button-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
main .button-pair .button { margin: 0; }

main .file-link { margin: 0.5em 0; display: grid; grid-template-columns: 1.5em 1fr; }
main .file-link .icon { font-family: Fontawesome Light; font-size: 1.2em; color: var(--c-file-icon); }
main .file-link .text { text-decoration: underline; color: var(--c-accent); }

main .property-list div { padding: 0.3em 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line); }
main .property-list div.wide { grid-template-columns: 5em 1fr; }
main .property-list span:nth-child(1) { color: var(--c-label); }
main .property-list span:nth-child(2) { text-align: right; }

main .customer-list { margin: 1em 0; }
main .customer-list > * { margin: 1px 0; border-bottom: 1px solid var(--c-line); background: var(--c-bg); padding: 0.1em 0; display: grid; grid-template-columns: 3em 1fr 1.5em; grid-template-rows: 2.5em; color: var(--c-light-text); }
main .customer-list .disabled { color: var(--c-button-icon-disabled); pointer-events: none; }
main .customer-list .company { grid-template-rows: 1.5em 1.0em; }
main .customer-list .person {}
main .customer-list .icon { grid-row: 1/3; align-self: center; }
main .customer-list .icon div { border: 1px solid var(--c-list-icon); border-radius: 50%; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; background: var(--c-list-bg); font-family: Fontawesome Light; font-size: 1.35em; color: var(--c-list-icon); }
main .customer-list .disabled .icon div { border-color: #eee; background: none; color: #eee; }
main .customer-list .name { font-size: 1.1em; font-weight: 500; align-self: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
main .customer-list .company-name { grid-column: 2/3; font-size: 0.7em; align-self: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
main .customer-list .cake { grid-column: 3/4; grid-row: 1/3; font-family: Fontawesome; font-size: 1.3em; color: #f61000; align-self: center; justify-self: center; }

main .drive-info-list:not(:has(.drive-info)):after { content: 'Inget att visa'; color: var(--c-file-disabled); font-size: 0.8em; font-style: italic; }

main .empty-list { color: var(--c-file-disabled); font-size: 0.8em; font-style: italic; }

main .drive-info { margin: 0.5em 0 1em; display: grid; grid-template-columns: 1fr 2.5em; gap: 0.5em; }
main .drive-info .info { display: grid; grid-template-columns: 3em 1fr; grid-template-rows: 1.3em 1em; grid-column-gap: 0.5em; grid-row-gap: 0.3em; }
main .drive-info .info .name { grid-column: 1/3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
main .drive-info .info .status { border-radius: 0.3em; }
main .drive-info .status.none { border: 1px solid #ccc; }
main .drive-info .status.signed { border: 1px solid #999; background: #39dc00; }
main .drive-info .status.started { background: #f68400; }
main .drive-info .status.paused { background: #999; }
main .drive-info .status.late { background: #f60000; }
main .drive-info .status.finished { background: #39dc00; }
main .drive-info .status.archived { background: #999; }
main .drive-info .info .text { font-size: 0.7em; }
main .drive-info .menu { border-radius: 0.5em; background: var(--c-button-icon-bg); text-align: center; line-height: 2em; font-family: Fontawesome Solid; font-size: 1.25em; color: var(--c-button-icon-text); }

.popup-menu { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.02); font-size: 14px; z-index: 1; }
.popup-menu div { position: absolute; left: 10px; top: 10px; box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; border: 1px solid var(--c-popup-border); border-radius: 0.6em; min-width: 12em; background: var(--c-popup-bg); padding: 0.5em 2.2em 0.5em 0.5em; }
.popup-menu div a:not(.close) { margin: 0.4em 0; border-radius: 0.2em; padding: 0 0.5em; display: grid; grid-template-columns: 1.7em 1fr; color: var(--c-popup-text); align-items: center; font-weight: 300; white-space: nowrap; }
.popup-menu div a:not(.close):not(.disabled):hover { background: var(--c-popup-hover); }
.popup-menu div a:not(.close) .icon { font-family: Fontawesome Light; font-size: 1.1em; color: var(--c-button-icon-text); }
.popup-menu div a:not(.close) .icon.cancel { color: var(--c-cancel); }
.popup-menu div a:not(.close).disabled { color: var(--c-popup-disabled); }
.popup-menu div a:not(.close).disabled .icon { color: var(--c-popup-disabled); }
.popup-menu div a.close { position: absolute; right: 0.3em; top: 0.2em; font-family: Fontawesome Solid; font-size: 1.6em; color: var(--c-button-icon-text); }
.popup-menu div .separator { display: block; height: 1px; background: var(--c-line); }

.top-panel { margin: 0 auto; box-sizing: border-box; background: #d9d9d9; max-width: var(--s-page-width); display: flow-root; padding: 0.5em 1em; color: var(--c-light-text); }
.top-panel .customer-icon { margin: 0 auto 0.8em; border-radius: 50%; width: 2.6em; height: 2.6em; line-height: 2.6em; text-align: center; background: var(--c-list-bg); font-size: 1.7em; font-weight: 500; }
.top-panel .name { text-align: center; font-size: 1.4em; font-weight: 500; }
.top-panel .company-name { text-align: center; font-size: 0.7em; font-weight: 500; }

.Login { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #122430 url(/img/bg_login.jpg); background-size: cover; background-position: center; }
.Login .login-box { position: absolute; left: 15vw; right: 15vw; bottom: 10vh; }
.Login .login-box .name { line-height: 1.2em; text-align: right; color: #fff; font-size: 1.7em; font-weight: 600; text-shadow: 0 0 2px rgba(0,0,0,0.3); }
.Login .login-box .name span { color: var(--c-brand2); }
.Login .login-box .version { margin-bottom: 1.3em; text-align: right; color: #fff; font-size: 0.9em; font-weight: 300; text-shadow: 0 0 2px rgba(0,0,0,0.3); }
.Login .login-box a { font-size: 0.9em; color: #fff; }
.Login .login-box input[type=text] { border-radius: 0.5em; }
.Login .login-box input[type=password] { border-radius: 0.5em; }
.Login .login-box input[type=submit] { border: none; border-radius: 0.5em; width: 100%; }
.Login .login-box .msg { border-radius: 0.5em; background: #fa3; padding: 0.5em 1em; text-align: center; color: #000; }

.Index h2 { margin-top: 2.5em; }

.TestDrive .vehicle-list { margin-top: 1em; }
.TestDrive .vehicle-list a { display: grid; border-bottom: 1px solid var(--c-line); padding: 0.5em; grid-template-columns: 5em 1fr; line-height: 1.2em; }
.TestDrive .vehicle-list a .regno { text-transform: uppercase; }

.UploadForm { display: none; }
.TestDrive iframe[name=UploadFrame] { display: none; }

.TestDrive .buttons { margin: 1em 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.TestDrive .buttons .button-upload { position: relative; }
.TestDrive .buttons .box { box-sizing: border-box; border: 1px solid #0dabd3; border-radius: 1em; background: #fff; aspect-ratio: 1.6; align-content: center; }
.TestDrive .buttons button { display: grid; grid-template-rows: 2em 1em; gap: 0.5em; width: 100%; cursor: pointer; }
.TestDrive .buttons button .icon { font-family: Fontawesome light; font-size: 2em; color: #0dabd3; }
.TestDrive .buttons button .text { font-family: var(--f-main); color: var(--c-link); }
.TestDrive .buttons .alert { display: none; }
.TestDrive .buttons .invalid button.box { border: 2px solid var(--c-item-invalid); }
.TestDrive .buttons .invalid .alert { display: block; position: absolute; top: 0.4em; right: 0.4em; font-family: Fontawesome Solid; font-size: 2em; color: var(--c-item-invalid); }
.TestDrive .buttons .msg { display: none; text-align: center; font-size: 1.2em; }
.TestDrive .buttons .image { display: none; }
.TestDrive .buttons .image a.show { display: flex; height: 100%; flex-wrap: wrap; align-content: center; justify-content: center; }
.TestDrive .buttons .image a.delete { position: absolute; right: 0.6em; bottom: 0.6em; border-radius: 0.5em; background: var(--c-button-gradient); color: var(--c-button-text); width: 2em; height: 2em; line-height: 2em; text-align: center; font-family: Fontawesome Light; }
.TestDrive .buttons .image img { max-width: 90%; max-height: 90%; }
.TestDrive .buttons .uploading button { display: none; }
.TestDrive .buttons .uploading .msg { display: block; }
.TestDrive .buttons .uploaded button { display: none; }
.TestDrive .buttons .uploaded .image { display: block; }
.TestDrive .buttons.disabled .box { background: var(--c-item-disabled-bg); }
.TestDrive .buttons.disabled button { pointer-events: none; }
.TestDrive .buttons.disabled button .icon { color: var(--c-item-disabled-text); }
.TestDrive .buttons.disabled button .text { color: var(--c-item-disabled-text); }
.TestDrive .buttons.disabled .image a.delete { background: var(--c-button-disabled-bg); color: var(--c-button-disabled-text); pointer-events: none; }

.Vtr .CertButton { float: right; font-family: Fontawesome Solid; font-size: 2em; color: var(--c-item-disabled-text); }
.Vtr .CertButton.verified { color: var(--c-link-alert); }

.Vtr .Request { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.2em 1em; }
.Vtr .Request .date { grid-column: 1/3; font-size: 0.8em; color: #9497ac; }

.Vtr .Update { margin: 0.5em 0; display: grid; grid-template-columns: 1fr 2.5em; }
.Vtr .Update .info { display: grid; grid-template-columns: 2em 1fr 1.5fr 1.5fr; grid-template-rows: 1.5em 1em; }
.Vtr .Update .icon { font-family: Fontawesome Light; font-size: 1.3em; }
.Vtr .Update .brand { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.Vtr .Update .date { grid-column: 1/5; font-size: 0.8em; color: #9497ac; }
.Vtr .Update .menu { border-radius: 0.5em; background: var(--c-button-icon-bg); text-align: center; line-height: 2em; font-family: Fontawesome Solid; font-size: 1.25em; color: var(--c-button-icon-text); }

.Vtr .buttons { margin: 0.5em 0; display: flex; flex-wrap: wrap; font-size: 1.2em; font-weight: 500; }
.Vtr .buttons a { border-radius: 1.2em; height: 2.4em; line-height: 2.4em; padding: 0 0.4em; }
.Vtr .buttons a.active { background: var(--c-button-gradient); padding: 0 1em; color: var(--c-button-text); }
.Vtr .tab { display: none; }
.Vtr .tab.active { display: block; }

.Vtr .result .info { margin: 1em 0; color: var(--c-vtr-label-text); }
.Vtr .result h2 { margin: 1.5em 0 0.5em; font-size: 1em; font-weight: 500; color: var(--c-headline); }
.Vtr .result .line { margin: 0.4em 0 0.1em; border-bottom: 1px solid var(--c-vtr-line); display: grid; grid-template-columns: 1fr 1fr; gap: 0.2em; }
.Vtr .result .line label { line-height: 1.6em; color: var(--c-vtr-label-text); }
.Vtr .result .line span { line-height: 1.6em; color: var(--c-vtr-value-text); text-align: right; font-weight: 500; }
.Vtr .result .separator { height: 0.8em; }
.Vtr .result .line .mark { display: block; margin: 0 -8px; padding: 0 8px; background: #f00; color: #fff; }
.Vtr .result .line .warning { display: block; margin: 0 -8px; padding: 0 8px; background: #f90; color: #fff; }

.VtrUpdate .steps { display: flow-root; font-size: 1.1em; }
.VtrUpdate .steps > span { float: left; }
.VtrUpdate .steps > span > span { float: left; border-radius: 50%; width: 1.8em; height: 1.8em; line-height: 1.85em; background: var(--c-step-bg); color: var(--c-step-text); text-align: center; }
.VtrUpdate .steps > span:nth-child(1n+2):before { content: ''; float: left; margin: 0.72em 0; width: 1.4em; height: 0.35em; background: var(--c-step-bg); }
.VtrUpdate .steps > span.active > span { background: var(--c-step-active-bg); color: var(--c-step-active-text); }
.VtrUpdate .steps > span.active:nth-child(1n+2):before { background: var(--c-step-active-bg); }

.VtrUpdate .buttons { margin-top: 2em; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5em; }
.VtrUpdate .buttons > * { margin: 0; }
.VtrUpdate .buttons input { border: none; box-sizing: content-box; }

.Settings h2 { color: var(--c-headline-light); }

.Settings .user { margin: 2em 0 2em; background: #eeeff4; display: grid; padding: 1.5em 0.8em; grid-template-columns: 2.7em 1fr; grid-template-rows: 1.5em 1.0em; color: var(--c-light-text); }
.Settings .user .icon { grid-row: 1/3; align-self: center; }
.Settings .user .icon div { border: 1px solid var(--c-list-icon); border-radius: 50%; width: 1.5em; line-height: 1.5em; text-align: center; background: #fff; color: var(--c-list-icon); font-family: Fontawesome Light; font-size: 1.35em; text-align: center; }
.Settings .user .name { font-size: 1.1em; font-weight: 500; align-self: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.Settings .user .company-name { font-size: 0.7em; align-self: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.Settings .file-document { display: grid; grid-template-columns: 3em 1fr 3em; }
.Settings .file-document span { font-family: Fontawesome Light; font-size: 1.3em; color: var(--c-file-disabled); justify-self: center; }
.Settings .file-document .link { color: var(--c-file-disabled); pointer-events: none; }
.Settings .file-document .menu { padding: 0.5em; font-family: Fontawesome; font-size: 1.25em; color: var(--c-button-icon-text); justify-self: center; }
.Settings .file-document.uploaded {}
.Settings .file-document.uploaded span { color: var(--c-file-icon); }
.Settings .file-document.uploaded .link { color: var(--c-accent); text-decoration: underline; pointer-events: all; }
.Settings .file-document.uploaded .menu {}

.Comments .messages > div { margin: 0.5em 0; border: 1px solid var(--c-item-border); border-radius: 0.5em; background: var(--c-item-bg); display: grid; grid-template-columns: 1fr 1fr; color: var(--c-item-text); }
.Comments .messages .name { padding: 0.3em 0.5em; font-size: 0.9em; }
.Comments .messages .date { padding: 0.3em 0.5em; font-size: 0.9em; justify-self: end; }
.Comments .messages .msg { border-top: 1px solid var(--c-item-border); grid-column: 1/3; padding: 0.3em 0.5em; }

.CustomerEdit .customerbutton-list { margin: 1em 0 0.5em; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.8em; }
.CustomerEdit .customerbutton-list a { position: relative; border-radius: 0.5em; background: var(--c-list-bg); padding: 1em 0; display: grid; grid-template-rows: 1.4em 1em; gap: 0.5em; text-align: center; color: var(--c-button-icon-text); }
.CustomerEdit .customerbutton-list a.disabled { color: var(--c-button-icon-disabled); pointer-events: none; }
.CustomerEdit .customerbutton-list a .icon { margin: 0 0.2em; line-height: 2em; font-family: Fontawesome Solid; font-size: 1.1em; }
.CustomerEdit .customerbutton-list a .text { font-size: 0.55em; }

.CustomerEdit .main-margin { margin-top: 1em; }

.CustomerNotes .top-panel { padding-bottom: 1.5em; }
.CustomerNotes .main-margin { margin-top: 1em; }

.CustomerNotes .AddNote { float: right; border: 1px solid var(--c-line); border-radius: 0.7em; background: var(--c-list-bg); padding: 0.9em; display: flex; gap: 0.5em; font-family: Fontawesome Solid; color: var(--c-button-icon-text); }

.CustomerNotes .note { margin: 1em 0; }
.CustomerNotes .note .info { padding: 0 0.3em; font-size: 0.7em; color: var(--c-light-text); display: flow-root; }
.CustomerNotes .note .info * { float: left; }
.CustomerNotes .note .name { }
.CustomerNotes .note .date { }
.CustomerNotes .note .updated { }
.CustomerNotes .note .note-content { border: 1px solid var(--c-line); background: var(--c-list-bg); display: flow-root; }
.CustomerNotes .note .text { padding: 0.8em; line-height: 1.2em; font-size: 0.9em; }
.CustomerNotes .note .note-content:has(.NoteMenu) .text { padding-bottom: 0; }
.CustomerNotes .note .NoteMenu { float: right; padding: 0.3em 0.5em; font-family: Fontawesome; font-size: 1.25em; color: var(--c-button-icon-text); }

.CustomerNotes .NoteEdit { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.1); }
.CustomerNotes .NoteEdit .editor { box-sizing: border-box; align-self: end; justify-self: center; border-top: 1px solid var(--c-popup-border); width: 100%; max-width: var(--s-page-width); background: var(--c-popup-bg); padding: 1em 1em 4.5em; }
.CustomerNotes .NoteEdit .name { padding: 0 0.3em; font-size: 0.7em; color: var(--c-light-text); }
.CustomerNotes .NoteEdit .item { margin: 0; }
.CustomerNotes .NoteEdit .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.CustomerNotes .NoteEdit .buttons a { margin: 0; }

footer { margin: 0 auto; max-width: var(--s-page-width); padding: 1em 10px; text-align: center; font-size: 0.12em; }

.HomeButton { position: fixed; bottom: 15px; left: 15px; width: 2em; height: 2em; border-radius: 0.5em; background: var(--c-gradient); align-content: center; text-align: center; font-family: Fontawesome Light; font-size: 0.20em; color: var(--c-button-text); box-shadow: 4px 4px 4px rgba(0,0,0,0.1); cursor: pointer; }

.FloatingMenu { position: fixed; bottom: 15px; right: 15px; height: 2em; font-size: 0.20em; display: flex; gap: 0.03em; }
.FloatingMenu > div { background: var(--c-gradient); align-content: center; color: var(--c-button-text); box-shadow: 4px 4px 4px rgba(0,0,0,0.1); cursor: pointer; }
.FloatingMenu .cmd { border-radius: 0.5em 0 0 0.5em; padding: 0 0.5em; }
.FloatingMenu .cmd .icon { font-family: Fontawesome Light; font-size: 0.8em; }
.FloatingMenu .cmd .text { margin-left: 0.5em; font-size: 0.7em; }
.FloatingMenu .menu { border-radius: 0.5em; width: 2em; text-align: center; font-family: Fontawesome Light; }
.FloatingMenu:has(.cmd) .menu { border-radius: 0 0.5em 0.5em 0; }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.Working { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.02); }
.Working > div { justify-self: center; align-self: center; box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; border: 1px solid var(--c-popup-border); border-radius: 0.6em; min-width: 10em; background: var(--c-popup-bg); padding: 1em; font-size: 0.16em; }
.Working .icon { text-align: center; font-family: Fontawesome Solid; font-size: 2em; color: var(--c-button-icon-text); animation:spin 3s linear infinite; }
.Working .text { margin-top: 0.5em; text-align: center; color: var(--c-popup-text); }

.Indicator { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
.Indicator > div { position: fixed; left: 10px; bottom: 10px; box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; border: 1px solid var(--c-popup-border); border-radius: 0.6em; width: 3em; height: 3em; background: var(--c-popup-bg); font-size: 0.16em; }
.Indicator .icon { text-align: center; line-height: 1.5em; font-family: Fontawesome Solid; font-size: 2em; color: var(--c-button-icon-text); animation:spin 3s linear infinite; }

.Alert { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: var(--c-alert-shade); }
.Alert > div { box-sizing: border-box; justify-self: center; align-self: center; box-shadow: rgba(0,0,0,0.25) 4px 4px 4px; border: 1px solid var(--c-popup-border); border-radius: 0.6em; min-width: 10em; max-width: 95%; background: var(--c-popup-bg); font-size: 0.14em; overflow: hidden; }
.Alert .headline { margin: 1em 1em 0.8em; font-size: 1.2em; font-weight: 500; text-align: center; }
.Alert .headline .icon { vertical-align: text-bottom; font-family: Fontawesome Solid; font-size: 1.5em; color: var(--c-button-icon-text); }
.Alert .headline .text { margin-top: 0.5em; text-align: center; color: var(--c-alert-headline); }
.Alert .message { margin: 0 1em 2em; text-align: center; line-height: 1.2em; color: var(--c-alert-message); }
.Alert .message p { margin: 1em  0.5em; text-align: left; }
.Alert .message img { width: 50%; }
.Alert .buttons { margin-top: 0.8em; border-top: 1px solid var(--c-popup-border); background: var(--c-popup-border); display: flex; gap: 1px; }
.Alert .buttons a { flex: auto; background: var(--c-popup-bg); padding: 0.7em; font-weight: 500; text-align: center; cursor: pointer; }
.Alert .buttons a.yes { color: var(--c-alert-yes); }
.Alert .buttons a.no { color: var(--c-alert-no); }

.Editor { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.1); }
.Editor .editor { box-sizing: border-box; align-self: end; justify-self: center; border-top: 1px solid var(--c-popup-border); width: 100%; max-width: var(--s-page-width); background: var(--c-popup-bg); padding: 1em 1em 4.5em; }
.Editor .name { padding: 0 0.3em; font-size: 0.78em; color: var(--c-light-text); }
.Editor .item { margin: 0; }
.Editor .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.Editor .buttons a { margin: 0; }
.Editor.large .editor { height: 100%; }
.Editor.large textarea { height: 80vh; }

.button-icon { margin-right: 5px; width: 20px; vertical-align: text-top; }