/* Main Style */
@import url("https://fonts.googleapis.com/css?family=Montserrat");
body {
  background-color: white;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  animation: all ease-in-out 0.3s;
  -webkit-animation: all ease-in-out 0.3s;
}
.container {
  margin: 20px auto;
  max-width: 970px;
  width: 85%;
 font-family: "Roboto", sans-serif;
}
/* Page Header */
.page-header {
  margin: 15px 0;
}
.page-header h1 {
  text-align: center;
}

/* Result Container */
.result-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, auto);
  grid-gap: 12px;
  background-color: #29465a;
  border-radius: 6px;
  padding: 20px 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.result-container .info-item {
  margin: 0 auto;
  grid-column: span 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.result-container .info-item.main-item {
  margin: 0 auto;
  grid-column: span 2;
  font-weight: bold;
}

.result-container .info-item .name {
  color: white;
}
.result-container .info-item .value {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

/* Form Area */
.form-area {
  background: #f8f8f8;
  border-radius: 6px;
  margin: 16px auto;
  padding: 10px 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-gap: 12px;
  grid-template-areas:
    ". salary salary salary salary ."
    "children children rent rent mortgage mortgage"
    "marital marital retired retired patagonico patagonico"
    ". . button button . .";
}

form > div {
  text-align: center;
  color: #0d1e36;
  margin: 5px 0;
}

.salary {
  grid-area: salary;
}

.children {
  grid-area: children;
}

.rent {
  grid-area: rent;
}

.mortgage {
  grid-area: mortgage;
}

.marital {
  grid-area: marital;
}

.retired {
  grid-area: retired;
}

.patagonico {
  grid-area: patagonico;
}

.button {
  grid-area: button;
}

.radio-label {
  font-weight: 400;
}

.help-block {
  color: #0d1e36;
  font-size: 12px;
  font-weight: 500;
  margin: 4px 0 0 0;
  text-align: left;
}

label {
  display: block;
  font-weight: 700;
  color: #333;
  width: 100%;
  margin-bottom: 8px;
  margin-top: 18px;
}

input,
select,
textarea,
button {
  display: block;
  font-family: "Montserrat", sans-serif;
  padding: 12px 18px;
  width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #bbb;
  letter-spacing: 1px;
  box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: 0px 0px 1px 1px #0d1e36;
  outline: 0;
}

input[type="radio"] {
  display: inline;
  width: auto;
}

button {
  margin-top: 20px;
  background: #0d74bf;
  color: white;
  font-size: 18px;
  font-weight: 700;
  border: none;
  transition: 0.3s;
}

button:hover {
  cursor: pointer;
  background: #0d74bf;
}

.btn-secondary {
  color: #fff;
  background-color: #d9d9d9;
  border-color: #d9d9d9;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #0d74bf;
  border-color: #0d1e36;
}

@media screen and (max-width: 768px) {
  .result-container .info-item {
    margin: 0;
  }

  form {
    grid-template-areas:
      "salary salary salary salary salary salary"
      "children children children children children children"
      "rent rent rent rent rent rent"
      "mortgage mortgage mortgage mortgage mortgage mortgage"
      "marital marital marital marital marital marital"
      "retired retired retired retired retired retired"
      "patagonico patagonico patagonico patagonico patagonico patagonico"
      "button button button button button button";
  }

  .result-container .info-item {
    grid-column: span 6;
  }

  .result-container .info-item.main-item {
    grid-row: 1 / auto;
    grid-column: span 6;
  }
}

.footer-area {
    margin: 30px auto;
    font-size: 10px;
    text-align: center;