@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root{
  --main: #00A99D;
  --main-hover: #02c1ae;
  --cafe: #3b2314;
  --cafe-hover: #5C3924;
  --rojo-alerta: #EA0000;
  --texto: #303e3f;
}

body{
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
  color: var(--texto);
}

h1{
  font-weight: 300;
  font-size: 2rem;
}

h2{
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--cafe);
}

/* BGs */
.bg-main{
  background-color: var(--main);
}

/* textos */

.title{
  font-size: 1.2rem;
  margin: 0;
}

.space{
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 0 rgba(40,40,47,0.10), 2px 2px 8px 0 rgba(40,40,47,0.10);
}

.info-title{
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}

#pdf-canvas{
  min-height: 600px;
}

.messages .error{
  padding: 1rem;
  background-color: var(--rojo-alerta);
}

.messages p{
  color: #fff;
  font-weight: 600;
  margin: 0;
}

/* Forms */
.medium-form-container{
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

input.form-control:read-only{
  background-color: #f0f0f0;
}

/* tools */
.tools-container{
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  justify-content: center;
}

.tool{
  width: 320px;
}

.tool h3{
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
  color: var(--texto);
}

.tool a{
  text-decoration: none;
}