.modal-wrapper {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.5);

  &.hidden {
    display: none;
  }

  .modal {
    max-width: 40rem;
    margin: 5rem auto;

    border-radius: .25rem;
    background-clip: padding-box;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.3);

    > * {
      box-sizing: border-box;
      padding: 1rem;

      background-color: white;
    }

    > .modal-header {
      width: 100%;
      margin: 0;

      border-bottom: 1px solid #AAA;
      border-radius: .25rem .25rem 0 0;

      font-size: 1.5rem;
    }

    > .modal-content {
    }

    > .modal-footer {
      border-top: 1px solid #AAA;
      border-radius: 0 0 .25rem .25rem;
    }
  }
}

.table {
  display: table;

  table-layout: fixed;

  .entry {
    display: table-row;

    .key, .val {
      display: table-cell;

      box-sizing: border-box;
      padding: .25rem;
    }

    .key {
      width: 7.5rem;

      text-align: right;

      font-weight: bold;

    }
    .val {
      width: calc(100% - 7.5rem);
    }
  }
}

.info-modal h3 {
  margin: 1rem 0;
  &:first-of-type {
    margin-top: 0;
  }
}

.download-error {
  .data {
    line-height: 1.5;

    .path {
      font-style: italic;
    }
  }

.cookie-modal h2{
  margin: 1rem 0;
  &:first-of-type {
    margin-top: 0;
  }
}

  .footer {
    display: block;

    width: 16rem;
    margin-left: auto;
  }
}

.space-login {
  input {
    display: block;

    box-sizing: border-box;
    width: 100%;
    margin: 1rem 0 1.0625rem;
    padding: .5rem;

    border: none;
    border-bottom: .0625rem solid $border-color;
    border-radius: .25rem .25rem 0 0;
    background-color: white;

    &:hover {
      border-bottom: .0625rem solid $main-color;
    }

    &:focus {
      margin-bottom: 1rem;

      border-bottom: .125rem solid $main-color;
    }
  }

  .right-aligner {
    display: inline-block;
    float: right;
  }

  button {
    display: inline-block;

    margin-left: auto;
    padding: .375rem 1rem;

    text-transform: uppercase;

    border: none;
    background-color: $main-color;

    &:hover {
      background-color: $dark-color;
    }
  }
}

 .space-register {
   input {
     display: block;
 
     box-sizing: border-box;
     width: 100%;
     margin: 1rem 0 0.0625rem;
     padding: .5rem;
 
     border: none;
     border-bottom: .0625rem solid $border-color;
     border-radius: .25rem .25rem 0 0;
     background-color: white;
 
     &:hover {
       border-bottom: .0625rem solid $main-color;
     }
 
     &:focus {
       margin-bottom: 1rem;
 
       border-bottom: .125rem solid $main-color;
     }
   }
 
   .right-aligner {
     display:inline-block;
     float: right;
     }

 
   button {
     display:inline-block;
     
     margin-left: auto;
     padding: .375rem 1rem;
 
     text-transform: uppercase;
 
     border: none;
     background-color: $main-color;
 
     &:hover {
       background-color: $dark-color;
     } 
   }
 }
