:root {
  --colorR1: #000000;
  --colorR2: #212921;
  --colorR3: #D1D1D5;
  --colorR4: #535653;
  --colorR5: #3154AE;
}

/* error field information field */
.field__error,
.field__emptyForm {
  display: none;
  position: fixed;
  left: 50%;
  top: 20%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 340px;
  padding: 10px;
  background-color: var(--colorR2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--colorR3);
  border: 2px solid var(--colorR3);
  border-radius: 10px;
  z-index: 2;
}

/*do zakomentowania!!!*/
/* .field__error {
  display: block;
} */

.field__error.active,
.field__emptyForm.active {
  display: block;
}

.field__error-info,
.field__emptyForm-info {
  padding: 10px;
}

.field__error-info img,
.field__emptyForm-info img {
  display: block;
  margin: 0 auto;
  width: 60px;
}

.field__error-btn,
.field__emptyForm-btn {
  display: block;
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  background-color: var(--colorR5);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--colorR3);
  cursor: pointer;
}

.blur {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  z-index: 1;
}

.blur.active {
  display: block;
}