@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.error-msg-container {
  width: calc(100vw - 20px);
  margin-top: 5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}
.error-msg-container .card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  border-radius: 5px;
  font-size: 1.5rem;
  color: #FFF;
}
.error-msg-container .card .error-title {
  margin-bottom: 10px;
}
.error-msg-container .card .error-msg {
  font-size: 1.3rem;
}
.error-msg-container .card .error-msg:first-letter {
  text-transform: uppercase;
}
.error-msg-container .fatal {
  background-color: #bf3834;
}
.error-msg-container .error {
  background-color: #e6aa2d;
}

.icon-button {
  position: absolute;
  border: none;
  outline: none;
  padding: 5px;
  height: 1em;
  width: 1em;
  background-color: transparent;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  font-size: 1.5rem;
  top: 7px;
  right: 7px;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: background-color 0.1s ease-in-out;
  -o-transition: background-color 0.1s ease-in-out;
  transition: background-color 0.1s ease-in-out;
}
.icon-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.icon {
  font-family: "Material Icons", sans-serif;
  font-style: normal;
  color: #FFF;
}

/*# sourceMappingURL=error-message.css.map */