/* MAIN STYLES */
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  background-color: #2c3e50;
  color: #2c3e50;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  font-weight: 500;
}

.btn {
  margin-right: 10px;
  padding: 7px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #ffff;
  border-radius: 99px;
  border: 1px solid #42b983;
  color: #42b983;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
  outline: none;
  -webkit-transition: all 0.22s;
  transition: all 0.22s;
}

.btn:hover {
  cursor: pointer;
  opacity: 0.8;
}

.btn:active {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
          box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.btn.green {
  background: #42b983;
  color: #ffff;
}

.btn.danger {
  background: #e53935;
  border-color: #e53935;
  color: #ffff;
}

.btn.warning {
  background: #ffc107;
  border-color: #ffc107;
  color: #ffff;
}

#btn {
  display: none;
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 15px;
}

.app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 15px;
  background: #ffff;
  border-radius: 10px;
  -webkit-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
}

.app__comments {
  margin-top: 10px;
}

.app__comments-title {
  margin-bottom: 10px;
}

.app__comments .comment {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 20px;
  border: 2px solid #ccc;
  color: #2c3e50;
}

.app__comments .comment__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.app__comments .comment__header-date {
  font-size: 15px;
}

.app__comments .comment__content {
  margin-bottom: 15px;
  font-size: 17px;
}

.form__control {
  margin: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.form__control .form__group {
  margin-bottom: 15px;
  position: relative;
}

.form__control .form__group.error input {
  border: 3px solid #e53935;
}

.form__control .form__group.error textarea {
  border: 3px solid #e53935;
}

.form__control .form__group.error .error__text {
  visibility: visible;
}

.form__control .form__group.success input {
  border: 3px solid #42b983;
}

.form__control .form__group.success textarea {
  border: 3px solid #42b983;
}

.inputAndArea {
  width: 100%;
  padding: 10px 20px;
  display: block;
  outline: none;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  color: #2c3e50;
}

.error__text {
  position: absolute;
  bottom: -15px;
  left: 0;
  margin-left: 10px;
  visibility: hidden;
  font-weight: 700;
  color: #e53935;
}

.notification {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #ffff;
  border-radius: 5px;
  padding: 16px 32px;
  margin: 8px;
  font-size: 20px;
  color: #42b983;
}
/*# sourceMappingURL=style.css.map */