:root {
   --color-screen-background: #F6F7F5;
   
   --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);
}

.horizontalContainer {
   align-items: center;
   column-gap: var(--p-space-400);
   display: flex;
}

.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;
   margin-top: var(--spacing-vertical-normal);
}

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

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

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

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

/** 
 * ==============================================
 * Polaris overrides
 * ==============================================
 */

/**
 * ---------------------------------
 * Fonts
 * ---------------------------------
 */

.Polaris-Text--root, .Polaris-Select__Input, .Polaris-TextField__Input, body {
   font-family: "DM Sans", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
}

h1.Polaris-Text--root, h1 .Polaris-Text--root, .authScreenMenuWrapper .Polaris-Text--root.Polaris-Text--headingLg { 
   font-family: "Anonymous Pro", monospace;
   font-weight: 1000;
   font-style: normal;
}

/**
 * ---------------------------------
 * Colors
 * ---------------------------------
 */

:root {
   --p-color-text-link: #145e77;
   --p-color-text-link-hover: #309ec3;
   --p-color-text-success: #676700;
   --p-color-text-critical: #933811;
}


/**
 * ---------------------------------
 * Other
 * ---------------------------------
 */

.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(22%) sepia(81%) saturate(1183%) hue-rotate(351deg) brightness(99%) contrast(95%);
}

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

.Polaris-Text--success img {
   filter: invert(30%) sepia(47%) saturate(1926%) hue-rotate(38deg) brightness(102%) contrast(102%);
}

/**
 * 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));
}