body,
html {
  position: relative;
  z-index: -9999;
  padding: 0;
  margin: 0;
  background: var(--Bg-light-lightest);
}

a:link, a:visited {
  color: rgba(var(--Primary-color));
  text-decoration: none;
}

a:hover, a:active {
  text-decoration: underline;
}

p {
   font-weight: 500;
   margin-block-start: 0;
}

#master-grid {
   display: grid;
   grid-template-areas:
      'content-leftside content-main content-rightside';
   grid-template-columns: auto minmax(800px, 100%) auto;

   box-sizing: border-box;
   width: 100vw;
   height: 100vh;
   align-items: center;
}

#content-leftside {
   grid-area: content-leftside;
}
#content-rightside {
   grid-area: content-rightside;
}

#content-main { 
   display: flex;
   flex-direction: column;
   
   grid-area: content-main;
   height: 100vh;
}

.item1 { 
   grid-area: image;
   overflow: clip;
   position: relative;
   height: 100%;
}
.item1 .background { 
   position: absolute;
   width: 100%;
   height: 100%;
   background: url(../img/bg_login.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   filter: var(--Image-filter);
   z-index: -1;
}

.item1 .content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;    
   height: 100%;
   padding: 32px;         
}

.item1 .content h1 {
   color: #fff;
   text-transform: uppercase;
   line-height: 90%;
   font-weight: 800;
   margin: 0;
   font-size: clamp(2rem, 3.5vw, 5rem);
}

.item2 { 
   grid-area: form;
   display: grid;
   height: 100%;
   justify-content: center;
   align-content: center; 
}

.content-grid-container {
   display: grid;
   grid-template-areas:
      'image form';
   grid-template-columns: minmax(400px, 1fr) minmax(400px, 1.25fr);
   gap: 1.5rem;
   height: 100%;
   padding: 1.5rem;         
}

.content-grid-container > div {
  border-radius: 10px;
}

.btn-back {
   margin-block-start: 1rem;
} 

/*--- Form elements ---*/

form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 400px;
}

form h3 {
   font-size: 1.5rem;
   margin: 0;
   margin-block-end: 1rem;
}

form h3 i {
   color: rgba(var(--Primary-color));
}

form span:not(.alert *) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
   align-self: stretch;
}

label {
   font-size: var(--fs-400);
   font-weight: 600;
}

input {
   display: flex;
   height: 38px;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;

   padding-inline: 0.75rem;
   border-radius: 0.25rem;
   border: 1px solid var(--Thin-line);
   background: var(--Bg-light, #F5F7FC);

   color: var(--Primary-font);
   font-size: inherit;
}

input:focus {
   outline: 2px solid rgba(var(--Primary-color), 0.2);
   border: 1px solid rgba(var(--Primary-color));
}

input[type] + small { 
   /* Helper text for input */
   font-weight: 400;
   color: var(--Primary-font-lighter);
}

button[type=submit] {
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: stretch;
   margin-block: 1.5rem 0.5rem;
   height: 38px;

   border: none;
   border-radius: 0.25rem;
   background: rgba(var(--Primary-color));
   box-shadow: 0px 2px 0px 0px #009161;

   color: #fff;      
   font-size: var(--fs-600);
   font-weight: 600;
}

button[type=submit]:hover {
   cursor: pointer;
   background: #009161;
}

#checkAndForgotWrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   
   justify-content: space-between;
   font-size: var(--fs-400);
   font-weight: 400;
}

#checkAndForgotWrapper span {
   align-self: center;
}

#newUser {
   display: flex;
   gap: 0.5rem;
   justify-content: center;

   font-size: var(--fs-600);
   font-weight: 400;
}

#newUser a {
   font-weight: 700;
}

#logo_easytable_inverted {
   padding: 1rem;
   display: none;
}
#logo_easytable_inverted img, 
#logo_easytable img {
   height: 24px;
}

#logo_easytable_inverted #logo-dark {
   display: var(--Display-switch-inverted);
}

#logo_easytable_inverted #logo-light {
   display: var(--Display-switch);
}

/*--- colorSchemeSwitch ---*/

div:has( > .segmented-controls input[name=colorSchemeSwitch] ) {
   position: absolute;
   inset: 1rem 1rem auto auto;
}

/*--- responsive stuff---*/

@media screen and (max-width: 540px) {
   form {
      width: 100%;
   }
   .item2 {
      justify-content: revert;
      width: calc(100% - 3rem);
   } 
}

@media screen and (max-width: 720px) {

}

@media screen and (max-width: 960px) {

   #master-grid {
      display: grid;
      grid-template-areas:
         'content-main';
      grid-template-columns:100vw;
   }
   .item1, 
   .content-leftside, 
   .content-rightside {
      display: none;
   }
   
   .item2 {
      width: calc(100% - 3rem);
   }  

    .content-grid-container {
      grid-template-areas:
         'form';
      grid-template-columns: 100vw;
   }

   #logo_easytable_inverted {
      display: block;
   }
}

@media screen and (max-width: 1140px) {
  
}