* {
  box-sizing: border-box;
  margin: 0;
}

html 
{
  font-family: Arial, Helvetica, sans-serif;
}

body 
{
  background-color: #00000008;
  position: relative;
  height: 100vh;
}


.wrap 
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer
{
  min-height: 4rem;
}

.content 
{
  flex: 1;

  display: grid;
  margin: 0 4rem;
  box-shadow: 0 0 32px 2px #00000016;
}

.content--1 
{
  grid-template-columns: 1fr 1fr;
}

.content--2 
{
  grid-template-columns: 1fr 2fr;
}

.content__aside 
{
  grid-column: 1 / span 1;
  background-color: aliceblue;
}

.content__main 
{
  grid-column: 2 / span 1;

  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.message 
{
  font-size: 2rem;
  padding: 1rem;
  min-height: 4rem;
  text-align: center;
}

.message--success 
{
  color: green;
  background-color:lightgreen;
}

.message--error 
{
  color: red;
  background-color:pink;
}

.form 
{
  position: relative;
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;

  padding: 3rem;
}

.form__step 
{
  position: absolute;
  top: 0;
  right: 3rem;

  font-size: xx-large;
  letter-spacing: 4px;
}

.form__header 
{
  display: flex;
  flex-direction: column;
  gap:1rem;
  text-align: left;
  align-self: center;
  width: 26rem;
}

.form__title 
{
  font-size: xx-large;
}

.form__description 
{
  font-size: x-small;
  color: #686868;
}

.form__fields 
{
  align-self: center;
}

.form__fields--1 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.form__fields--2 
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.field-box 
{
  width: 40%;
  min-width: 26rem;
}

.field-box * 
{
  font-size: large;
}

.label-container
{
  margin-bottom: 8px;
  color: #646464;
}

.input-container *:not([type="checkbox"])
{
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border:medium solid #00000016;
  transition: border-color .3s;
}

.input-container *:focus
{
  outline: none;
  border-color: #00aaff;
}

.form__controller 
{
  width:100%;
  display:flex;
  flex-direction: row-reverse;
  justify-content:center;
  gap:2rem;
}

.btn
{
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  /* width: 26rem; */
  font-size: large;
  padding: 1rem;

  min-width:0;
  width: 100%;
  max-width: 26rem;
}

.btn--register,
.btn--next
{
  background-color: #46aedf;
  color: #fff;
  border: none;
}

.btn--register:hover,
.btn--next:hover
{
  background-color: #3b96c0;
}

.btn--previous 
{
  border: none;
}
.btn--previous:hover 
{
  background-color: #00000027;
}

.required
{
  color: red;
}

.flex--row 
{
  display:flex;
  gap:1rem;
}

/* PLACEHOLDER STYLE */
/* Link styles */
a {
  color: #00aaff; /* Set link color */
  text-decoration: none; /* Remove underline by default */
}

/* Link hover styles */
a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* Visited link styles */
a:visited {
  color: #00aaff; /* Set color for visited links */
}

/* Active link styles */
a:active {
  color: #dc3545; /* Set color for active links */
}

/* Link styles for when a link is focused */
a:focus {
  outline: none; /* Remove outline by default */
  box-shadow: 0 0 2px #0076b1; /* Add a box shadow on focus */
}

/* Link styles for when a link is disabled */
a.disabled {
  color: #6c757d; /* Set color for disabled links */
  pointer-events: none; /* Disable pointer events on the link */
  cursor: default; /* Set default cursor for disabled links */
  text-decoration: none; /* Remove underline for disabled links */
}

/* END PLACE HOLDER STYLES */


@media screen and (max-width: 1199px) {
  /* CSS rules for small desktops */
  /* Place your styles here */
  .form__fields--2 
  {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  /* CSS rules for mobile phones */
  /* Place your styles here */
  header, footer
  {
    min-height: 2rem;
  }
  .content
  {
    margin: 0 2rem;
  }


  .content * 
  {
    word-wrap:break-word;
  }

  .content__aside 
  {
    display: none;
  }

  .content__main 
  {
    grid-column: 1 / -1;
  }
  .form__header 
  {
    min-width:0;
    width: 100%;
    max-width: 26rem;
  }
  .form__title 
  {
    font-size: x-large;
  }
  .form__fields 
  {
    width: 100%;
    align-items: center;
  }
  .field-box 
  {
    min-width:0;
    width: 100%;
    max-width: 26rem;
  }
  .btn
  {
    min-width:0;
    width: 100%;
    max-width: 26rem;
  }
}

@media screen and (max-width: 496px) {
  header, footer
  {
    min-height: 0rem;
  }
  .content
  {
    margin: 0rem;
  }
}