/*                               

  ╦ ╦┌┐ ┬  ╔═╗┌─┐┬─┐┬┌┬┐┌─┐┌─┐    
  ║ ║├┴┐│  ║  ├─┤├┬┘│ │ ├─┤└─┐    
  ╚═╝└─┘┴  ╚═╝┴ ┴┴└─┴ ┴ ┴ ┴└─┘    
  Joomla-template by Egbert Prins 
  Contact: egbertprins@gmail.com
  Version 3.0.13 - Release date 06-07-2024
                
*/
@charset "UTF-8";

form fieldset {
  background-color: var(--color-form-background);
  border-color: var(--color-lines);
  border-style: solid;
  border-width: 1px;
  box-shadow: 2px 2px 5px var(--color-lines);
  display: inline-block;
  margin: 0px 0px var(--padding-default) 0;
  padding: 16px;
  position: relative;

}

form fieldset legend {
  background: var(--color-form-background);
  border-color: var(--color-lines);
  border-radius: var(--border-radius);
  border-style: solid;
  border-width: 1px;
  font-family: var(--h1-font-family);
  font-size: var(--font-text-size-small);
  left: 10px;
  padding: 3px 7px;
  position: absolute;
  top: -14px;
}

form fieldset .control-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 5px 0;
  padding: 0;
}

form fieldset .control-group .control-label {
  position: relative;
}

form fieldset .control-group .control-label label .form-control-feedback {
  display: block;
  position: absolute;
  right: 0;
  top: 9px;
}

form fieldset .control-label ~ .controls.has-danger {
  border-color: red;
}

form fieldset .control-group .controls input[type=text],
form fieldset .control-group .controls input[type=password],
form fieldset .control-group .controls input[type=email],
form fieldset .control-group .controls textarea {
  border-style: none;
  min-height: 40px;
  margin: 0;
  outline: 0px;
  padding: 5px;
  width: 100%;
}

form fieldset .control-group .has-danger input[type=text],
form fieldset .control-group .has-danger input[type=password],
form fieldset .control-group .has-danger input[type=email],
form fieldset .control-group .has-danger textarea {
  background-color: var(--color-canvas);
  border-color: red;
}

form fieldset .control-group.field-spacer {
  min-height: 0;
}

form fieldset .control-group.field-spacer .control-label {
  flex: 0 0 100%;
  font-size: var(--font-text-size-small);
  text-align: right;
}

form fieldset .control-group.field-spacer .controls {
  display: none;
}

form .form-control-feedback {
  font-size: 80%;
}

@media only screen and (min-width: 600px) {
  form fieldset .control-group {
    flex-direction: row;
    min-height: 44px;
  }

  form fieldset .control-group .control-label {
    flex: 0 0 200px;
  }

  form fieldset .control-group .control-label label.invalid .form-control-feedback {
    position: static;
  }

  form fieldset .control-group .controls {
    flex: 1 1 500px;
  }
}

form fieldset .control-group .control-label label.invalid {
  color: red;
}