:root {
   --color-screen-background: #ededed;
   --color-table-header-background: #e1e1e1;
   --color-error: var(--p-color-text-critical);
   --color-text-secondary: var(--p-color-text-secondary);

   --spacing-horizontal-small: var(--p-space-400);
   --spacing-verhorizontaltical-normal: var(--p-space-800);
   --spacing-vertical-small: var(--p-space-400);
   --spacing-vertical-normal: var(--p-space-1200);
}

body {
   margin: 0;
   font: var(--p-font-family-sans);
   background: var(--color-screen-background);

   font-size: var(--p-text-body-lg-font-size);
   font-weight: var(--p-text-body-sm-font-weight);
   letter-spacing: var(--p-text-body-lg-font-letter-spacing);
   line-height: var(--p-text-body-lg-font-line-height);
}

a {
   color: var(--p-color-text-link);
   text-decoration: underline;
}

a:hover {
   color: var(--p-color-text-link-hover);
}

/**
 * Center page preloader to the screen
 */
#pagePreloader {
   margin: auto;
   margin-top: auto;
   width: 100px;
   margin-top: calc(50vh - 30px);
}

/** 
 * ==============================================
 * Small reusable classes
 * ==============================================
 */

.block {
   margin-bottom: var(--spacing-vertical-normal);
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}

.float-none {
   float: none;
}

.hidden {
   visibility: hidden;
}

.subBlock {
   margin-bottom: var(--spacing-vertical-small);
}

.list-none {
   list-style: none;
   padding-left: 0px;
}

.text-note .Polaris-Text--root {
   font-size: 0.9em;
}

.text-warning {
   color: var(--color-error);
}


/** 
 * ==============================================
 * Basic forms (without using JS components)
 * ==============================================
 */

.basicForm {
   min-width: 400px;
}

.basicForm table {
   width: 100%;
   text-align: left;
}

.basicForm td, .basicForm th {
   vertical-align: top;
}

.basicForm label {
   margin-top: 3px;
   display: block;
   margin-right: 10px;
}

.basicForm input:not([type="submit"]) {
   min-width: 300px;
   padding: 5px;
   border-radius: 8px;
   border: 1px solid #999;
}

.basicForm input[type="submit"] {
   background-color: #333;
   border: 1px solid #333;
   border-radius: 8px;
   padding: 5px 10px;
   color: #FFF;
   margin-top: 20px;
   cursor: pointer;
}

.basicForm .helptext ul {
   color: #666;
   margin: 10px 0 20px 30px;
   padding: 0;
}

.basicForm .errorlist {
   position: absolute;
   background: rgba(255,255,255,0.5);
   margin: 0;
   margin-top: 0px;
   margin-top: 30px;
   list-style: none;
   padding: 5px;
   color: #8F2222;
}

/** 
 * ==============================================
 * Screen wrapper
 * ==============================================
 */

.screen {
   width: 100%;
}

.screen-small {
   max-width: 800px;
   margin: auto;
}

/** 
 * ==============================================
 * Header - non-auth screen
 * ==============================================
 */

.nonAuthScreenHeader {
   margin-bottom: var(--spacing-vertical-normal);
}

.nonAuthScreenHeader .Polaris-Layout__Section {
   display: flex;
   align-items: flex-end;
}

.nonAuthScreenHeader #logo {
   width: 150px;
}

.nonAuthScreenHeader #logo img {
   width: 100%;
}

.nonAuthScreenHeader #name {
   font-size: 2em;
   margin-bottom: 30px;
}

/** 
 * ==============================================
 * Footer
 * ==============================================
 */

.screenFooter {
   margin-top: 1.5em;
   text-align: center;
}

/** 
 * ==============================================
 * Firebase overrides
 * ==============================================
 */

.Polaris-Page__Content {
   padding-top: 0;
}

.Polaris-Text--critical a {
   color: inherit;
   text-decoration: underline;
}

.Polaris-Text--root img {
   display: inline-block;
   margin-right: 0.2em;
}

.Polaris-Text--critical img {
   filter: invert(11%) sepia(51%) saturate(6451%) hue-rotate(8deg) brightness(98%) contrast(91%); /* from https://codepen.io/sosuke/pen/Pjoqqp */
}

.Polaris-Text--subdued img {
   filter: invert(62%) sepia(7%) saturate(0%) hue-rotate(15deg) brightness(97%) contrast(96%);
}

.Polaris-Text--success img {
   filter: invert(18%) sepia(75%) saturate(2565%) hue-rotate(143deg) brightness(89%) contrast(84%);
}

/**
 * Make page headings have larger space below them
 */
h2.Polaris-Text--root {
   margin-bottom: var(--p-space-500);
}

/**
 * Make list items have larger space below them
 */

ol.list-largeGaps li, ul.list-largeGaps li {
   margin-bottom: var(--p-space-600);
}

ol.list-largeGaps li:last-child, ul.list-largeGaps li:last-child {
   margin-bottom: 0;
}


.Polaris-BlockStack .Polaris-InlineStack {
   --test: 50%;

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--test), 1fr));
}