@import '../../variables.scss';

.modal {
  position: relative;
  width: 40%;
  margin: 50px auto;
  position: absolute;
  top: auto;
  left: 20%;
  right: 0;
  bottom: auto;
  background: $white;
  outline: none;
  z-index: -2;
  border: 1px solid $darkgrey;
}

.modalClose {
  position: absolute;
  top: -13px;
  right: -13px;
  display: block;
  font-size: 16px;
  line-height: 27px;
  width: 32px;
  height: 32px;
  background: $white;
  border-radius: 50%;
  color: $darkestgrey;
  cursor: pointer;
  text-align: center;
  z-index: 2;
  transition: all 0.25s;
}

.modalClose:hover {
  background: $darkgrey;
}

.header {
   padding: 20px;
   background: $lightgrey;
   text-align: center;
   font-family: 'Jigsaw Light';
   text-transform: uppercase;
   position: relative;
   z-index: -2;
}

.progress {
   transition: all 0.2s ease;
   background: $main;
   position: absolute;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
}