:root {
    /* Background Colors */
     --Background-Image: url(/Packages/Images/Background/background_03.png);
   
     --color1: rgba(36, 36, 36, 0.8);
     --color1-hover: rgba(58, 58, 58, 0.8);
     --color1-active: rgba(70, 70, 70, 0.8);
     --color2: rgba(19, 19, 19, 0.65);
     --color2-solid: rgba(19, 19, 19, 0.9);
     --gradient: linear-gradient(135deg, var(--color1), var(--color2));
   
     --white:  rgba(360, 360, 360, 1);
     --soft-white: rgba(360, 360, 360, .7);
   
   
   
     --red1:  rgba(270, 60, 60, .6);
     --red2: rgba(210, 50, 50, .55);
     --red3: rgba(170, 40, 40, .5);
     --green1:  rgba(60, 270, 60, .6);
     --green2: rgba(50, 210, 50, .55);
     --green3: rgba(40, 170, 40, .5);
   
     /* Fonts */
   
     --font-family1: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   
     /* UI */
     --Add: url(C://../Packages/Images/UI/Add_Plus-symbol.png);
     --Arrow: url(../../Packages/Images/UI/Tab_Arrow.png);
     --Error: url(../../Packages/Images/UI/Error-symbol.png);
     --Confirm: url(../../Packages/Images/UI/Save_Checkmark\ symbol.png);
     --DeleteCancel: url(../../Packages/Images/UI/Cancel_Delete_X\ symbol.png);
     --Comment: url(../../Packages/Images/UI/Comment-symbol.png);
     --Edit: url(../../Packages/Images/UI/Edit-symbol.png);
     --Save: url(../../Packages/Images/UI/Save_Checkmark\ symbol.png);
   }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  background-image: var(--Background-Image);
  background-size: cover, contain;

  color: var(--white);

  font-family: var(--font-family1);
  font-size: x-large;
  user-select: none;
}
#login-box {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0px 12px;

  height: 130px;
  width: 300px;
  background-color: var(--color2);
  border: 1px solid var(--soft-white);
  border-radius: 6px;
  margin: auto;

  font-size: large;

  transition: 1s ease;
}
#login-box:hover {
  background-color: var(--color2-solid);
}
.entry-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.box {
  flex: 1;
  text-align: right;
  padding-right: 14px;
}
.login-entry {
  flex: 2;
  background-color: var(--color1);
  color: var(--white);
  border: 1px;
  border-radius: 4px;

  height: 30px;
}
.login-entry:focus {
  border-width: 2px;
  border-color: var(--soft-white);
  outline: none;
  background-color: var(--color1);
}
.login-entry:-webkit-autofill,
.login-entry:-webkit-autofill:hover,
.login-entry:-webkit-autofill:focus,
.login-entry:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color1) inset !important;
  -webkit-text-fill-color: var(--white) !important;
  transition: background-color 5000s ease-in-out 0s;
}
#login-button {
  flex: 1;
  background-color: var(--color1);

  color: var(--white);

  border: 1px solid var(--soft-white);
  border-radius: 4px;

  height: 30px;

  transition: .1s ease-in;
}
#login-button:hover {
  background-color: var(--color1-active);
}
#login-button:active {
  background-color: var(--color1-hover);
}
.popup-box {
  position: absolute;
  top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 6px 12px;

  min-height: 80px;
  width: 250px;

  background-image: var(--Error);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  background-color: var(--color2);
  border: 1px solid var(--red3);
  border-radius: 6px;

  font-size: medium;
}
.popup-text {
 flex: 4;
 text-align: center;
 margin: 2px;
}
.popup-button {
  flex: 3;
  background-color: var(--color1);

  color: var(--white);

  border: 1px solid var(--soft-white);
  border-radius: 4px;

  transition: .1s ease-in;
}
.popup-button:hover {
  background-color: var(--color1-active);
}
.popup-button:active {
  background-color: var(--color1-hover);
}