/* basic stylings ------------------------------------------ */

/* form starting stylings ------------------------------- */
.group_first {
margin-top: 40px;
}
.group {
  position:relative;
  margin-bottom:40px;
  width: 100%;
  flex: 1;
  padding-right: 0;
}

.gender_flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 40px;
  color: white;
}

.gender_group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  
}

.radio-button {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-button .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 1px solid var(--default_orange_color);
  background: none;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.radio-button:hover input ~ .checkmark {
  border-radius: 5px;
  background-color: rgba(255, 102, 0, 0.3);
}

/* When the radio button is checked, add a blue background */
.radio-button input:checked ~ .checkmark {
  background-color: var(--default_orange_color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-button .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-button input:checked ~ .checkmark:after {
  display: block;
}

.radio-button .checkmark:after {
  left: 8px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input:not(:last-child) 				{
  font-size:16px;
  padding:10px 10px 10px 5px;
  display:block;
  flex: 1;
  border:none;
  width: 100%;
  border-bottom:1px solid var(--default_orange_color);
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
.group label 				 {
  color: white;
  font-size:16px;
  font-weight:400;
  position:absolute;
  pointer-events:none;
  left:0px;
  top:10px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-15px;
  font-size:16px;
  color:white;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width: 100%; background: var(--default_orange_color);}
.bar:before, .bar:after 	{
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background: var(--default_orange_color);
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

input {
    background: none;
    color: white;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:var(--default_orange_color); }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:var(--default_orange_color); }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:var(--default_orange_color); }
  to 	{ width:0; background:transparent; }
}

@media only screen and (min-width: 750px) {

      .group {
        width: auto;
        padding-right: 0px;
      }
      
}