/* Global Styles for Next.js Application */
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800&subset=latin-ext');

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

a {
  color: #66676b;
  transition: 0.3s;
  text-decoration: none;
}

a:focus,
a:hover {
  text-decoration: none;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  cursor: pointer;
  outline: none !important;
}

a,
button {
  outline: none !important;
}

/* Form Elements Base Styles */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  outline: none;
  font-size: 16px;
  color: #808080;
  margin: 0 0 16px 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: block;
  background-color: #fff;
  font-weight: 500;
  opacity: 1;
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12);
  transition: all 0.1s ease-in-out;
}

select {
  padding: 15px 18px;
  cursor: pointer;
}

input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  color: #808080;
  transition: box-shadow 0.2s !important;
  opacity: 1;
  border: none;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12);
}

input:-webkit-autofill:focus,
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #808080 !important;
}

/* Input Placeholder Color */
::placeholder {
  color: #808080;
  opacity: 1;
}

textarea {
  height: auto;
  line-height: 27px;
  padding: 20px;
  min-height: 130px;
  transition: none !important;
  min-width: 100%;
}

label,
legend {
  display: block;
  font-weight: bold;
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 8px;
}

label span,
legend span {
  font-weight: normal;
  font-size: 14px;
  color: #444;
}

fieldset {
  padding: 0;
  border: none;
}

input[type="checkbox"] {
  display: inline;
}

input[type="radio"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  box-shadow: none;
}

input[type="submit"] {
  border: none;
  padding: 11px 18px;
  width: auto;
}

/* With Border Variant */
input.with-border,
input[type="text"].with-border,
input[type="password"].with-border,
input[type="email"].with-border,
input[type="number"].with-border,
textarea.with-border,
select.with-border {
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.05);
}

input.with-border:focus,
input[type="text"].with-border:focus,
input[type="password"].with-border:focus,
input[type="email"].with-border:focus,
input[type="number"].with-border:focus,
textarea.with-border:focus {
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08);
}