/* 
  Template Name: Authlab
	Template URI: https://authlab.netlify.app/
  Author: Alissio
  File Description: Main Css file of the template
	Version: 1.0.0
*/

/****************************************\

01.variables
02.general
03.helper
04.components

*****************************************/

:root {
  --primary-color: "#ff409a";
  --secondary-color: "#0cf0cf"
}

body {
  background-color: #e3e8ee;

  font-family: "Nunito", sans-serif;
}

a {
  text-decoration: none;
}

.min-h-screen {
  min-height: 100vh;
}

.min-h-24 {
  min-height: 6rem;
  /* 96px */
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-16 {
  height: 4rem;
  /* 64px */
}

.p-10 {
  padding: 2.5rem;
  /* 40px */
}

.py-10 {
  padding-top: 2.5rem;
  /* 40px */
  padding-bottom: 2.5rem;
  /* 40px */
}

.px-16 {
  padding-left: 4rem;
  /* 64px */
  padding-right: 4rem;
  /* 64px */
}

.px-20 {
  padding-left: 5rem;
  /* 80px */
  padding-right: 5rem;
  /* 80px */
}

.pr-11 {
  padding-right: 2.75rem;
  /* 44px */
}

.w-full {
  width: 100%;
}

.w-4 {
  width: 1rem;
  /* 16px */
}

.w-8 {
  width: 2rem;
  /* 32px */
}

.w-16 {
  width: 4rem;
  /* 64px */
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.overflow-clip {
  overflow: clip;
}

.text-left {
  text-align: left;
}

.text-sm {
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.25rem;
  /* 20px */
}

.text-base {
  font-size: 1rem;
  /* 16px */
  line-height: 1.5rem;
  /* 24px */
}

.text-lg {
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.75rem;
  /* 28px */
}

.text-xl {
  font-size: 1.25rem;
  /* 20px */
  line-height: 1.75rem;
  /* 28px */
}

.text-2xl {
  font-size: 1.5rem;
  /* 24px */
  line-height: 2rem;
  /* 32px */
}

.text-cyan-400 {
  color: #22d3ee;
}

.hover\:text-cyan-500:hover {
  color: #06b6d4;
}

.text-gray-200 {
  color: rgb(229 231 235);
}

.text-gray-600 {
  color: rgb(75 85 99);
}

.text-zinc-700 {
  color: rgb(63 63 70);
}

.gap-x-1 {
  -webkit-column-gap: .25rem;
  -moz-column-gap: .25rem;
  column-gap: .25rem;
  /* 4px */
}

.gap-x-2 {
  -webkit-column-gap: .5rem;
  -moz-column-gap: .5rem;
  column-gap: .5rem;
  /* 8px */
}

.gap-x-4 {
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  /* 16px */
}

.gap-y-1 {
  row-gap: .25rem;
  /* 4px */
}

.bg-cyan-200 {
  background-color: #a5f3fc;
}

.bg-cyan-400 {
  background-color: #22d3ee;
}

.bg-indigo-950 {
  background-color: #1e1b4b;
}

.border-cyan-400 {
  border-color: rgb(34 211 238);
}

.btn-primary {
  background-color: #ec4899;
  border-color: #ec4899;
}

.btn-primary:hover {
  background-color: #db2777;
  border-color: #db2777;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}

.opacity-80 {
  opacity: .8;
}

.z-1 {
  z-index: 1;
}

.no-underline {
  -webkit-text-decoration-line: none;
  text-decoration-line: none;
}

.font-bold {
  font-weight: bold;
}

.list-none {
  list-style-type: none;
}

.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.rounded-lg {
  border-radius: 0.5rem;
  /* 8px */
}

.bg-overlay {
  background: -webkit-gradient(linear, left top, left bottom, from(#1b183f), to(rgba(27, 24, 63, .4))) padding-box, -webkit-gradient(linear, left top, left bottom, from(#cb17e9), to(rgba(192, 30, 213, 0))) border-box;
  background: -o-linear-gradient(#1b183f, rgba(27, 24, 63, .4)) padding-box, -o-linear-gradient(top, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  background: linear-gradient(#1b183f, rgba(27, 24, 63, .4)) padding-box, linear-gradient(180deg, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0px;
  top: 0px;
}

.auth-carousel {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.border-gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(rgb(255 255 255 / 100%))) padding-box, -webkit-gradient(linear, left top, left bottom, from(#cb17e9), to(rgba(192, 30, 213, 0))) border-box;
  background: -o-linear-gradient(#ffffff, rgb(255 255 255 / 100%)) padding-box, -o-linear-gradient(top, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  background: linear-gradient(#ffffff, rgb(255 255 255 / 100%)) padding-box, linear-gradient(180deg, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  border: 4px solid transparent;
}

.form-label {
  font-size: 14px;
  margin-bottom: .25rem;
}

.form-check-label {
  font-size: 14px;
}

.line-x {
  width: 100%;
  height: 1px;
  background-color: #ced4da;
}

.line-x-pos {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.btn-metamask {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #000;
  border-radius: 6px;
  margin: 0 auto;
  min-width: 230px;
  padding: .5rem 1rem;
}

.btn-metamask:hover {
  background-color: #e5e7eb;
}

.form-check-input:checked {
  background-color: #ec4899;
  border-color: #ec4899;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(236, 72, 153, .25);
  box-shadow: 0 0 0 0.25rem rgba(236, 72, 153, .25);
}

.form-check-input:focus {
  border-color: #ec4899;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(236, 72, 153, .25);
  box-shadow: 0 0 0 0.25rem rgba(236, 72, 153, .25);
}

.success-icon i {
  font-size: 3.5rem;
  color: #22c55e;
}

.form-layout {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  padding-left: 5rem;
  padding-right: 5rem;
  min-width: 50%;
  margin: 0 auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#1b183f), to(rgba(27, 24, 63, .6))) padding-box, -webkit-gradient(linear, left top, left bottom, from(#cb17e9), to(rgba(192, 30, 213, 0))) border-box;
  background: -o-linear-gradient(#1b183f, rgba(27, 24, 63, .6)) padding-box, -o-linear-gradient(top, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  background: linear-gradient(#1b183f, rgba(27, 24, 63, .6)) padding-box, linear-gradient(180deg, #cb17e9, rgba(192, 30, 213, 0)) border-box;
  border: 4px solid transparent;
  border-radius: 20px;
}

.form-control {
  background-color: #5b5a99;
  color: #fff;
}

.form-control:focus {
  background-color: #5b5a99;
  color: #fff;
}

.img-thumbnail {
  background-color: #5b5a99;
}