:root {


  /*Colors*/
  --main-1 : #8746FB;

  --main-sub-1 : #d9c3fe;

  --sub-1 : rgb(200, 200, 200);
  --sub-2 : rgb(225, 225, 225);

  --delete : #981c1f;

  --valid : #43912f;

  /*Borders*/
  --border-color-1 : black;

  --border-sep : dashed 1px black;

  /*font-size*/
  --font-size-titles-large: 2vw;
  --font-size-titles-medium: 1.2vw;
  --font-size-titles-small: 1.0vw;

  --font-size-content-medium: 0.8vw;
  --font-size-content-medium-small: 0.6vw;
  --font-size-content-small: 0.5vw;
}


/*Global*/
body  {

  /*Position*/


  /*Design*/
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;

  background-color: var(--main-sub-1);
}

/*Applicator*/
.App_MainSub1_BG {
  background-color: var(--main-sub-1);
}
.App_MainSub1_BG_Hovered {
  background-color: var(--main-sub-1-HOVERED);
}
.App_MainSub1_BG_Pressed {
  background-color: var(--main-sub-1-PRESSED);
}


/*Inputs*/
.DefaultInput {

  /*Position*/
  display: flex;
  flex-direction: column;

  /*Design*/

}
.DefaultInput label {

  /*Position*/


  /*Design*/
  font-size: var(--font-size-content-small);
}
.DefaultInput input, .DefaultInput select{

  /*Position*/
  padding: 0 10px;

  /*Design*/
  font-size: var(--font-size-content-medium);

  outline-color: var(--main-1);

  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.DefaultInput p {

  /*Position*/
  display: none;

  margin: 0;

  /*Design*/
  font-size: var(--font-size-content-small);

  color: var(--delete);
}

.DefaultInputCheckbox {

  /*Position*/
  display: flex;
  flex-direction: row;

  /*Design*/

}
.DefaultInputCheckbox label {

  /*Position*/


  /*Design*/
  font-size: var(--font-size-content-small);
}
.DefaultInputCheckbox input{

  /*Position*/
  padding: 0 10px;

  /*Design*/
  font-size: var(--font-size-content-medium);

  outline-color: var(--main-1);

  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*Buttons*/
.DefaultButtons, .DefaultButtons_Hovered, .DefaultButtons_Pressed {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;

  color: white;

  font-size: var(--font-size-content-medium-small);

}

.DefaultButtons {
  /*Design*/
  background-color: var(--main-1);
}
.DefaultButtons_Hovered {
  /*Design*/  
  background-color: var(--main-1-HOVERED);
}
.DefaultButtons_Pressed {
  /*Design*/
  background-color: var(--main-1-PRESSED);
}

.DefaultSelectButtons {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;

  background-color: var(--main-sub-1);

  color: white;
}
.DefaultSelectButtons_Hovered {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;
  
  background-color: var(--main-sub-1-HOVERED);

  color: white;
}
.DefaultSelectButtons_Pressed {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;

  background-color: var(--main-1-sub-PRESSED);

  color: white;
}
.DefaultSelectButtons_Selected {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;

  background-color: var(--main-1);

  color: white;
}
.DefaultSelectButtons_Selected_Hovered {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;
  
  background-color: var(--main-1-HOVERED);

  color: white;
}
.DefaultSelectButtons_Selected_Pressed {

  /*Position*/
  padding: 7px 10px;

  /*Design*/
  border-radius: 100px;

  background-color: var(--main-1-PRESSED);

  color: white;
}



/*User section*/
#User {

  /*Position*/
  display: flex;
  flex-direction: column;

  /*Design*/
}
.User_Comp {

  /*Position*/
  margin: 0px auto 15px auto;

  /*Design*/

}
.User_Comp input {

  /*Position*/
  width: 15vw;

  /*Design*/

}


/*Password section*/
#Password {

  /*Position*/
  display: none;
  flex-direction: column;

  /*Design*/
}
.Password_Comp {

  /*Position*/
  margin: 0px auto 15px auto;

  /*Design*/

}
.Password_Comp input {

  /*Position*/
  width: 15vw;

  /*Design*/

}



/*New account section*/
#NewAccount {

  /*Position*/
  display: none;
  flex-direction: column;

  /*Design*/
}

.NewAccount_Comp {

  /*Position*/
  margin: 0px auto 15px auto;

  /*Design*/

}
.NewAccount_Comp input {

  /*Position*/
  width: 15vw;

  /*Design*/
}

#NewAccount_PasswordCriteria {

  /*Position*/
  display: flex;
  flex-direction: column;
  margin-left: 4.5vw;

  /*Design*/

}
.NewAccount_PasswordCriteria {

  /*Position*/

  /*Design*/
  font-size: var(--font-size-content-small);
}