/* main-base.css */

/* Importação de fontes */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ------------------------------------- */
/*              Animações               */
/* ------------------------------------- */

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ------------------------------------- */
/*               Base/Reset             */
/* ------------------------------------- */

body {
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 300;
  height: 100vh;
  line-height: 1em;
  margin: 0;
  padding: 20px;
  position: relative;
  line-height: 1.2;
}

select, figure, iframe {
  display: block;
  border: 0;
  margin: 0;
}

a, .transition {
  transition: all 0.3s ease;
}

a, a:focus, a:hover {
  outline: none;
  text-decoration: none;
}

/* ------------------------------------- */
/*               Textos                 */
/* ------------------------------------- */

p {
  color: #555;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

span {
  color: #777;
  display: block;
  font-weight: 300;
  margin-top: 5px;
}

b, sup, sub, u, del {
  color: #75afdc;
}

.common-input {
  background: #fafafa;
}

/* Placeholder */
::placeholder {
  color: #ADADAD;
  font-weight: 300;
  opacity: 1;
}

/* Seleção de texto */
::selection,
::-moz-selection {
  background-color: #f0f0f0;
  color: #fff;
}

/* ------------------------------------- */
/*              Cabeçalhos              */
/* ------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #222;
  font-weight: 600;
  margin: 0;
}

h1, .h1 { font-size: 36px; }
h2, .h2,
h3, .h3 { font-size: 24px; }
h4, .h4, .fz-18 { font-size: 18px; }
h5, .h5, .fz-14 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* ------------------------------------- */
/*              Utilitários             */
/* ------------------------------------- */

.clear::before, .clear::after {
  content: " ";
  display: table;
}
.clear::after {
  clear: both;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.flex        { display: -webkit-box; }
.inline-flex { display: -webkit-inline-box; }

.space-between { justify-content: space-between; }
.space-around  { justify-content: space-around; }

.flex-cell { display: -webkit-box; flex-grow: 1; }
.display-table { display: table; }

.dark { color: #222; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* ------------------------------------- */
/*           Elementos Especiais        */
/* ------------------------------------- */

#loadingSpinner {
  animation: spin 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 9999;
}