:root {
   --anim-time-faster: 0.3s;
   --anim-time-default: 0.5s;
   --anim-transition-function: ease-out;

   --authScreenTopPadding: 15px;
   --authScreenHeaderHeight: 150px;
   --authScreenHeaderOuterHeight: calc(var(--authScreenHeaderHeight));
   --authScreenLogoSize: 62px;
   --authScreenMenuWidth: 280px;

   --authScreenSize: calc(min(1500px, 95%));
   --z-index-header: 1000;
   --contentHorizontalPadding: calc(0.5*calc(100% - var(--authScreenSize)));
}

.Polaris-LegacyCard {
   overflow: visible;
}

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

/**
 * header floating on top
 */
.authScreenHeader {
   
   --positionLeft: calc(var(--contentHorizontalPadding) + var(--authScreenMenuWidth)); 

   height: var(--authScreenHeaderHeight);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-screen-background);
   position: fixed;
   top: 0;
   left: var(--positionLeft);
   width: calc(100% - var(--positionLeft) - var(--contentHorizontalPadding));
   z-index: var(--z-index-header);

}

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

.authScreenHeader .Polaris-Page--fullWidth, .nonAuthScreenHeader .Polaris-Page--fullWidth {
   width: 100%;
}

.authScreenHeader .Polaris-Layout__Section {
   height: calc(var(--authScreenHeaderHeight) - var(--p-space-400));
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.authScreenHeader .titleBar {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   border-bottom: 1px solid #CCC;
   margin-top: var(--authScreenTopPadding);
}

.authScreenHeader .titleBar h1 {
   margin-bottom: var(--spacing-vertical-small);
}

.authScreenHeader .titleBar a {
   color: #000;
   text-decoration: none;
}

.authScreenHeader .titleBar .titleWithIcon {
   display: flex;
}

.authScreenHeader .titleBar .titleWithIcon .component-icon {
   width: 48px;
   margin-right: 10px;
}

.authScreenHeader .actionBar, .authScreenHeader .actionBar #actionButtonsDefaultWrapper {
   justify-content: flex-end;
   align-items: center;
   column-gap: var(--p-space-400);
   display: flex;
}





/** 
 * ==============================================
 * Auth screen wrapper, menu, content
 * ==============================================
 */

.authScreenWrapper {
   width: var(--authScreenSize);
   display: flex;
   justify-content: space-between;
   margin: auto;
   padding-left: var(--authScreenMenuWidth); /* leave space for fixed-position menu */
}

.authScreenMenuWrapper {
   width: var(--authScreenMenuWidth);
   margin-top: var(--authScreenTopPadding);
   position: fixed;
   left: var(--contentHorizontalPadding);
}

.authScreenMenuWrapper .headerLogo {
   width: var(--authScreenLogoSize);
   height: var(--authScreenLogoSize);
}

/**
 * The menu card - top-align with content based on how much space logo takes up
 */
.authScreenMenuWrapper .Polaris-LegacyCard {
   margin-top: calc(var(--authScreenHeaderOuterHeight) - var(--authScreenTopPadding) - var(--authScreenLogoSize));
   background: var(--p-color-bg-inverse);
}

.authScreenMenuWrapper a {
   color: #FFF;
   width: 100%;
   display: block;
   margin-bottom: var(--p-space-400);
   text-decoration: none;
   display: flex;
   align-content: center;
   padding: var(--p-space-100);
}

.authScreenMenuWrapper a.selected {
   color: #000;
   background: #D2D7D2;
}

.authScreenMenuWrapper a:last-child {
   margin-bottom: 0;
}

.authScreenMenuWrapper .component-icon {
   margin-right: 5px;
   margin-left: -2px;
}

.authScreenMenuWrapper a .component-icon img {
   filter: invert(100%) sepia(44%) saturate(76%) hue-rotate(167deg) brightness(107%) contrast(106%);
}

.authScreenMenuWrapper a.selected .component-icon img {
   filter: invert(0%) sepia(6%) saturate(7500%) hue-rotate(317deg) brightness(90%) contrast(106%);
}

.authScreenContentWrapper {
   width: 100%; /* already padded-left next to fixed-position menu */
   padding-top: var(--authScreenHeaderHeight); /* leave space for fixed-position header bar */
}


/**
 * ---------------------------------
 * Animation on hover
 * ---------------------------------
 */

.authScreenMenuWrapper a span {
   transition: var(--anim-time-default);
   transition-timing-function: var(--anim-transition-function);
}

.authScreenMenuWrapper a:hover:not(.selected) span {
   margin-left: 8px;
}

.authScreenMenuWrapper a.selected span {
   margin-left: 8px;
}

/**
 * ---------------------------------
 * Disabled menu
 * ---------------------------------
 */

.mainMenu.disabled a {
   color: #949894;
   cursor: default;
   pointer-events: none; /* disable click */
}

.mainMenu.disabled a .component-icon img {
   filter: invert(71%) sepia(8%) saturate(118%) hue-rotate(71deg) brightness(83%) contrast(88%);
}

.mainMenu.disabled a:hover span {
   margin-left: 0px;
}

/** 
 * ==============================================
 * Screen card preloader
 * ==============================================
 */

.cardSpinner {
   padding-top: var(--spacing-vertical-normal);
}



/** 
 * ==============================================
 * Generic animation classes
 * ==============================================
 */

.animated {
   transition: var(--anim-time-default);
   transition-timing-function: var(--anim-transition-function);
   opacity: 1;
}

.anim-fadeOut {
   opacity: 0;
}