/* RGB */
@color1: rgba(34, 116, 165, 1);
@color2: rgba(34, 72, 112, 1);
@color3: rgba(163, 206, 241, 1);
@color4: rgba(231, 236, 239, 1);
@color5: rgba(48, 50, 56, 1);

/* Always show scrollarbar, so width of browser window doesn't change and refloaw content*/
html {overflow-y: scroll; font-size: 12pt;}

.overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal{
  border: 2px black solid;
  background-color: white;
}

.messages-box{
  position: fixed;
  top: 5px;
  
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  }
.messages-box > .error{
  border: 1px red solid;
  background-color: pink;
  }
.messages-box > .notification{
  border: 1px green solid;
  background-color: lightgreen;
  }
.messages-box > .error, .messages-box > .notification {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 6px;
  padding-bottom: 6px;
  }
/* Colors */
form {
  input[type=text] {
    outline: none;
    border: 1px solid @color4;
    border-radius: 3px;
  }
}
button {
  border: none;
  border-radius: 4px;
  color: rgba(250, 252, 255, 1);
  font-size: 1.5em;
  font-weight: bold;
}
button.blue {
  background-color: rgba(55, 139, 250, 1)
}
button.blue:active {
  background-color: rgba(43, 122, 227, 1)
}
button.green {
  background-color: rgba(91, 196, 4, 1)
}
button.green:active {
  background-color: rgba(81, 166, 10, 1)
}
button.red {
  background-color: rgba(240, 29, 57, 1)
}
button.red:active {
  background-color: rgba(212, 23, 48, 1)
}

/* Positioning */

.cart {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 90%;
  border: 1px black solid;
  border-radius: 6px;
  background-color: white;
  transition: right 0.3s ease-out;
  
  .heading {
    background-color: @color1;
    text-align: center;
  }
  .line-item-list{
    list-style-type: none;
    /*padding-inline-start: 10px;*/
    .line-item {
      /*display: grid;*/
    }
  }
}
.cart.hidden{
  right: -90%;
  transition: right 0.3s ease-out;
}



.login-form {
  position:fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  transition: top 0.3s ease-out;
  
  input{
    display:block;
    width: 100%;
  }
}
.login-form.hidden {
  top: -100px;
  transition: top 0.3s ease-out;
}
.login-button {
}
.show-application-button{
}


/* Navigation Menu */
.navigation {
  position:fixed;
  width: 90%;
  top: 0px;
  left: 0px;
  background-color: grey;
  transition: left 0.3s ease-out;
}
.navigation.hidden{
  left: -90%;
  transition: left 0.3s ease-in;
}

/* For large screens: */
@media only screen and (min-width: 600px) {

}