:root {
  --primary: #0091D2;
  --secondary: #0150AD;
}

html {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  margin: 0%;
  padding: 0%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
}

img {
  max-width: 100%;
}

input[type=radio] {
  margin-right: 2vh;
}

label {
  background-color: var(--primary);
  border: 3px solid var(--secondary);
  border-radius: 2vh;

  font-weight: bold;
  
  display: flex;
  align-items: center;
  padding: 1vh;
  height: 5vh;
}

button, select {
  color: white;
  background-color: var(--primary);
  border: 3px solid var(--secondary);
  border-radius: 2vh;

  font-weight: bold;

  padding: 1vh;
  height: 7vh;

  cursor: pointer;
}

select {
  width: 100%;
}

button:hover {
  background-color: var(--secondary);
}

/*select {
  color: white;
  background-color: var(--primary);
  border: 3px solid var(--secondary);
  border-radius: 2vh;

  font-weight: bold;

  padding: 1vh;
  height: 7vh;
}*/

input[type=text] {
  color: var(--primary);
  background-color: white;
  border: none;
  border-radius: 2vh;
  border-bottom: 3px solid var(--secondary);

  font-weight: bold;
  font-size: large;

  padding: 2vh 1vh;
  width: 100%;
}

input[type=number] {
  color: var(--primary);
  border:  3px solid var(--secondary);
  border-radius: 2vh;

  padding: 1vh;
  height: 4vh;
  
  font-size: large;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

td, th {
  border: 1px solid var(--secondary);
  padding: 0.5vh;
}

.info-box {
  margin: 5vh 0 5vh 0;
}

.valor-financiado {
  padding: 1vh;
  border-radius: 2vh;
  background-color: var(--secondary);

  text-align: center;
  font-size: x-large;
  font-weight: bold;
}

.header {
  display: none;
  background: white;
  padding: 1vh;
  color: var(--secondary);
}

.step {
  padding: 1em;
  border-radius: 1em;

  margin: auto;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--primary);
}

.right {
  color: white;
  background-color: var(--primary);
  padding: 0vh 30vh 0vh 5vh;
  /*height: 100%;*/
}

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vh 5vh;
}

.title {
  margin: 10vh 0;
}

.incr {
  font-weight: bold;
  font-size: large;
}

.letrinhas {
  display:  none;
  font-size: smaller;
  color: gray;
}

.tabela {
  display: grid;
  border: 1px solid var(--secondary);
  border-bottom: none;
  border-right: none;
}
.tabela div {
  text-align: center;
  border: 1px solid var(--secondary);
  border-top: none;
  border-left: none;
}
@media only screen and (max-width: 600px) {
  .tabela {
    grid-template-columns: 1fr !important;
  }
}

@media only screen and (max-width: 800px) {
  body {
    display: block;
    background-color: var(--primary);
  }

  table {
    width: 60%;
    text-align: center;
  }

  h2 {
    margin: 0%;
  }

  .header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*gap: 10vh 2vh;*/
    padding: 4vh;
    align-items: center;
    justify-items: center;
  }

  .title {
    margin: 0vh;
  }

  .left {
    display: none;
    margin: 0vh;
    padding: 0vh;
  }

  .right {
    padding: 6vh 2vh;
  }
}