body{
	display: grid;
	height: 100%;
	place-items:  center;
	background: url(../src/signuploginbg.jpg);
	background-size: cover;
}
#modal-loading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background: transparent;
}
.toast{
	z-index: 101 !important;
}
#overlay{
	background: transparent;
	backdrop-filter: blur(8px);
}
.custom-radio * {
    cursor: pointer;
}
.wrapper{
	min-width: 500px;
	max-width: 770px;
	background: #fff;
	border-radius: var(--card-border-radius);
	box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
	overflow: hidden;
}
.wrapper .title{
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 20px 10px;
	background: var(--main-color);
}
.wrapper .slider{
	padding: 10px 20px 40px 20px;
}
.wrapper .field{
	position: relative;
	height: 50px;
	width: 100%;
	margin-top: 20px;
}
.field input.error{
	font-weight: bold;
	border-color: red !important;
}
.field input.error ~ label{
	color: red !important;
}
.wrapper .fields {
    display: flex;
    justify-content: space-evenly;
}
.wrapper .field.margin{
	margin-right: 20px;
}
.no_display{
	display: none;
}
.wrapper .selector {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.wrapper .field input{
	height: 100%;
	width: 100%;
	padding-left: 20px;
	border-radius: var(--card-border-radius);
	outline: none;
	font-size: 17px;
	transition: all 0.2s ease-in;
	border: 1px solid #a3a3a3;
}
.wrapper .field input:valid ~ label,
.wrapper .field input:focus{
	border-color: #4158d0;
}
.wrapper .field input:valid ~ label,
.wrapper .field input:focus ~ label{
	top: 0%;
	font-size: 1rem;
	color: #4158d0;
	font-weight: bold;
	background: #fff;
	transform: translateY(-50%);
}
.wrapper .field label{
	position: absolute;
	top: 50%;
	left: 20px;
	color: #999;
	transform: translateY(-50%);
	pointer-events: none;
	transition: all 0.2s ease-in;
}
.wrapper .pass-link,
.wrapper .sign-up{
	margin-bottom: 20px;
	color: #4158d0;
	text-align: center;
}
.wrapper .field input[type="submit"]{
	color: #fff;
	background: var(--main-color);
	font-size: 18px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	transition: all 0.2s ease-in;
}
.wrapper .field input[type="submit"]:active{
	transform: scale(0.95);
}
.wrapper a{
	text-decoration: none;
	font-weight: bold;
}
section{
	display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: row;
    margin-bottom: 30px;
}
section .details{
	width: 300px;
}
.section_title{
	font-size: 1.7em;
	font-weight: bold;
	color: #4158d0;
}
#privacy_policy{
	margin-top: 20px;
}
#privacy_policy label{
	margin: 0px 10px;
}
.inactive{
	display: none;
}
.custom-checkbox {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

/*

CAROUSEL

*/

.slider {
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  padding: var(--card-padding);

  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  
}
.slides::-webkit-scrollbar {
  display: none;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  margin-right: 50px;
  border-radius: var(--card-border-radius);
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  scroll-margin:  var(--card-padding);
}
.slides > div > div{
	width: 100%;
    padding: var(--card-padding);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
.packages-info{
	margin: 20px;
}
.package-img{
    width: 200px;
    height: 60px;
    margin: auto;
}
img {
  width: 100%;
  height: 100%;
}
.package .option{
	text-align: left;
}
.package .package-name{
	font-weight: bold;
	margin: 5px;
}

.slider > a {
  display: inline-flex;
  height: 1.5rem;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  position: relative;
}
.next {
    padding: var(--card-padding) calc(var(--card-border-radius) * 10);
    background: var(--main-color);
    color: #fff;
    border-radius: var(--card-border-radius);
    margin-bottom: 20px;
	width: max-content;
}
.next i{
    margin-left: 20px;
}

.day{
    display: flex;
    align-items: center;
}
.day > div {
    flex: 1;
}
.hidden {
    display: none !important;
}

/*

MOBILE

*/

@media screen and (max-width: 768px){
	.wrapper{
		background: transparent;
		border-radius: 0px;
		box-shadow: none;
		min-width: 0px;
		width: 100vw;
	}
	.wrapper::before{
    	transform: translate(-120px, 68px);
    	width: 406px;
    	height: 350px;
	}
	.wrapper .title{
		border-radius: none;
		background: transparent;
		color: #4158d0;
	}

	.wrapper .field{
		height: 36px;
		margin-top: 12px;
	}
	.wrapper .fields{
		flex-direction: column;
	}
	.wrapper .slider {
	    padding: 0px;
	}
	.slides > div > div {
	    padding-bottom: var(--card-padding);
	}
	.wrapper .title {
	    padding: 10px;
	}
	.wrapper .selector{
	    max-height: 50vh;
	    overflow: auto;
	}
}