@import url('https://fonts.googleapis.com/css?family=Oxygen:400,400i,700');

@import url('https://fonts.googleapis.com/css?family=Maitree:400,400i,700&subset=latin-ext');

html
{
  font: 15px/21px 'Oxygen', Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: white;
  line-height: 1.5em;
  min-width: 600px;
  filter: none;
  color: #333;
  background-color: #f5f5f5;
  min-width: 80rem;

  /* css colors */
  --bg-color: #56babc;
  --hl-color: #459596;

  /* timing */
  --timing-fast: 0.15s;
  --timing-medium: 0.30s;
  --timing-slow: 0.45s;
}

body
{
  padding: 0;
  margin: 0;
  text-align: center;
}

.body
{
  min-height: calc(100vh - 19.8rem);
}

.header
{
  background-color: white;
  padding: 1rem;
  text-align: center;
  user-select: none;
  filter: drop-shadow(0rem 0.2rem 0.3rem #0003);
  z-index: 999;
  position: relative;
}

.header_sticky
{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}

.header-logo
{
  width: 16.5rem;
  height: 5rem;
  background: url("../img/logo.svg") left top no-repeat;
  background-size: contain;
  display: inline-block;
}

#header-uploadbtn
{
  position: absolute;
  top: 2.5rem;
  left: 1rem;
}

.header-helpbtn
{
  color: #333;
  margin-left: 1.5rem;
  cursor: pointer;
}

.header-helpbtn:hover, .header-helpbtn-selected
{
  color: var(--hl-color);
  text-decoration: underline;
}

.header-helpbtn-icon
{
  background: url("../img/helpico.svg") left top no-repeat;
  background-size: auto;
  background-size: cover;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  vertical-align: -0.45rem;
  margin-left: 0.4rem;
}

.header-helpbtn:hover .header-helpbtn-icon, .header-helpbtn-selected .header-helpbtn-icon
{
  color: var(--hl-color);
  background-position: right top;
}

.help-popup
{
  position: fixed;
  top: 7rem;
  background-color: white;
  border: 1px solid #ccc;
  filter: drop-shadow(0rem 0.2rem 0.3rem #0003);
  right: 0rem;
  width: 28rem;
  padding: 1rem;
  z-index: 998;
  text-align: left;
  display: none;
  opacity: 0;
  transform: translate(0, -12rem);
  transition-timing-function: ease-in-out;
  transition-property: opacity, transform;
  transition-duration: var(--timing-medium);
}

.help-popup-visible
{
  opacity: 1;
  transform: translate(0, 0);
}

.footer
{
  background-color: #b8b6b6;
  padding: 1rem;
  text-align: center;
}

.footer-logo
{
  width: 16.5rem;
  height: 5rem;
  background: url("../img/logo.zucchetti.svg") left top no-repeat;
  background-size: contain;
  display: inline-block;
}

a, .link
{
  text-decoration: none;
  color: var(--hl-color);
  cursor: pointer;
}

a:hover, .link:hover
{
  text-decoration: underline;
}

.login
{
  background-color: white;
  width: 27rem;
  padding: 3.5rem;
  padding-bottom: 2rem;
  border-radius: 1rem;
  margin: 5rem auto;
  text-align: left;
  user-select: none;
}

.login p
{
  text-align: center;
  margin-bottom: 2rem;
}

.login-form-row
{
  padding: 0.5rem 0;
}

.login-error_msg
{
  color: red;
  text-align: center;
  height: 1.5rem;
  line-height: 1.5rem;
}

input
{
  border: 0.05rem solid #333;
  border-radius: 0.5rem;
  padding: 0.4rem;
  font-size: 1rem;
  font-family: 'Oxygen', Arial, Helvetica, sans-serif;
}

/* input[type="date"]::-webkit-inner-spin-button, */
/* input[type="date"]::-webkit-clear-button, */
/* input[type="date"]::-webkit-calendar-picker-indicator { */
/*   display: none; */
/*   -webkit-appearance: none; */
/*   -moz-appearance: none; */
/* } */

#username, #password
{
  width: 20.3rem;
  box-sizing: border-box;
}

#password
{
  padding-right: 2.2rem;
}

.password-container
{
  display: inline-block;
  position: relative;
}

.password-container-viewbtn
{
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url("../img/showpassword.svg") left top no-repeat;
  background-size: 3rem;
  cursor: pointer;
}

.password-container-viewbtn-active
{
  background-position: right top;
}

input:focus
{
  outline: 0.01rem solid var(--bg-color);
  border-color: var(--bg-color);
}

button
{
  background-color: var(--bg-color);
  border: 0.2rem solid var(--bg-color);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  outline: 0;
  transition-duration: var(--timing-fast);
}

button:hover:enabled, button:focus:enabled
{
  background-color: var(--hl-color);
  border-color: var(--hl-color);
}

button:disabled
{
  opacity: 0.5;
  cursor: default;
}

.button-gray
{
  background-color: #777;
  border-color: #777;
}

.button-gray:hover:enabled, .button-gray:focus:enabled
{
  background-color: #555;
  border-color: #555;
}


label
{
  display: inline-block;
  width: 6.3rem;
}

.current-user
{
  position: absolute;
  top: 2.5rem;
  right: 6rem;
}

.modal
{
  width: auto;
  height: auto;
  position: fixed;
  top: 8rem;
  left: 50%;
  background-color: white;
  border-radius: 1rem;
  z-index: 10000000000;
  padding: 0.5rem 1rem 1rem 1rem;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  opacity: 1;
  animation-name: show-modal;
  animation-timing-function: ease-in-out;
  animation-duration: var(--timing-fast);
  animation-fill-mode: forwards;
  transform-origin: left top;
  filter: drop-shadow(0rem 0.2rem 0.3rem #0003);
}

.modal-closebtn
{
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1rem;
  height: 1rem;
  background-color: red;
  cursor: pointer;
  background: url('../img/modalclosebtn.svg') top left no-repeat;
  background-size: 2rem 1rem;
  cursor: pointer;
  border: 0.5rem solid white;
  border-radius: 0.5rem;
  transition-duration: var(--timing-fast);
  transition-property: background-color, border-color;
}

.modal-closebtn:hover
{
  background-position: top right;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}

.modal-title
{
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.modal-contents
{
  text-align: left;
}

.modal-mask
{
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  z-index: 9999999999;
  opacity: 0;
  animation-name: show-mask;
  animation-timing-function: ease-in-out;
  animation-duration: var(--timing-fast);
  animation-fill-mode: forwards;
}

@keyframes show-modal {

  0% {

    transform: scale(0.85) translate(-50%, 3rem);
    opacity: 0;
  }

  100% {

    transform: scale(1) translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes show-mask {

  0% {

    opacity: 0;
  }

  100% {

    opacity: 0.2;
  }
}

.notification
{
  position: fixed;
  top: 9rem;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  background-color: var(--hl-color);
  color: white;
  opacity: 0;
  z-index: 1000000000;
  padding: 0.5rem 1rem;
  filter: drop-shadow(0rem 0.2rem 0.3rem #0003);
  border-radius: 0.5rem;

  /*border-color: var(--hl-color);*/
}

.notification-icon
{

}

.notification-contents
{

}

.notification-visibile, .notification-hidden
{
  animation-name: show-notification;
  animation-timing-function: ease-in-out;
  animation-duration: var(--timing-fast);
  animation-fill-mode: forwards;
  transform-origin: left top;
}

.notification-hidden
{
  animation-name: hide-notification;
}

@keyframes show-notification {

  0% {

    transform: translate(-50%, 0.5rem);
    opacity: 0;
  }

  100% {

    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes hide-notification {

  0% {

    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {

    transform: translate(-50%, -0.5rem);
    opacity: 0;
  }
}