/* CSS Document */

/* BASIC STYLES */

body {
    font-size: 20px;
    font-weight: 300;
}


.content {
    padding-top: 0rem;
}

/* HEADER STYLES */

#header {
    margin: 2rem 0 5rem 0;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    
    #header {
        margin: 1rem 0 3rem 0;
        text-align: center;
    }
    
}



/* CONTENT STYLES */

@media only screen and (max-width: 768px) {
    
    h2 {
        font-size: 2rem;
        font-weight: 700;
    }
    
}

.progress-bar {
    background-color: #00458e;
}

a {
    color: #00458e;
}
a:hover {
    color: #f29d4b;
}

#footer {
    color: #999;
}
#footer a {
    color: #999;
} 
#footer a:hover {
    color: #f29d4b;
} 


/* FORMULAR ELEMENTE */

/* BUTTON */
.btn-primary {
    color: #fff;
    background-color: #1fca03;
    border-color: #bad9b4;
    border-width: 5px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #00519e;
    border-color: #00519e;
}
.btn {
    height: auto;
}


/* RADIO-BOX STYLES */
.wrapper{
    display: inline-flex;
    width: 100%;
}
.wrapper .option {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    cursor: pointer;
    padding: 0 10px;
    border: 2px solid lightgrey;
    transition: all 0.3s ease;
}
.wrapper .option + .option{
    margin-left: 10px;
}
.wrapper .option .dot{
    height: 20px;
    width: 20px;
    background: #d9d9d9;
    border-radius: 50%;
    position: relative;
    margin: 20px 10px;
}
.wrapper .option .dot::before{
    position: absolute;
    content: "";
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background: #0069d9;
    border-radius: 50%;
    opacity: 0;
    transform: scale(1.5);
    transition: all 0.3s ease;
}
input[type="radio"]{
    display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2,
#option-3:checked:checked ~ .option-3,
#option-4:checked:checked ~ .option-4,
#option-5:checked:checked ~ .option-5 {
    border-color: #0069d9;
    background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot,
#option-4:checked:checked ~ .option-4 .dot,
#option-5:checked:checked ~ .option-5 .dot {
    background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before,
#option-4:checked:checked ~ .option-4 .dot::before,
#option-5:checked:checked ~ .option-5 .dot::before {
    opacity: 1;
    transform: scale(1);
}
.wrapper .option span{
    font-size: 18px;
    color: #808080;
    margin-right: 20px;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span,
#option-4:checked:checked ~ .option-4 span,
#option-5:checked:checked ~ .option-5 span {
    color: #fff;
}




/* INPUT FIELDS */

.inputWrapper {
    margin-bottom: 16px;
}


input[type=number] {
    border: 3px solid #ccc;
    padding: 10px;
    font-weight: bold;
}

label.labelInput {
    display: none;
    margin: 0;
    padding: 2px 16px;
    font-size: 79%;
    background-color: #0069d9;
    color: #fff;
    width: 75%;
}

input[type=text],
input[type=email] {
    display: block;
    border: 2px solid #0069d9;
    border-radius: 0;
    font-weight: bold;
    padding: 4px 12px;
    color: #444;
    width: 75%;
}




/* DATENSCHUTZ CHECKBOX */


.toggle{
  --uiToggleSize: var(--toggleSize, 1.5rem);
  --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
  --uiToggleColor: var(--toggleColor, #0069d9);

  display: var(--toggleDisplay, inline-flex);
  position: relative;
}

.toggle__input{
  /*
  The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
  */
  width: var(--uiToggleSize);
  height: var(--uiToggleSize);
  opacity: 0;

  position: absolute;
  top: 5px;
  left: 0;
  margin: 0;
}

/*
1. Calculation of the gap for the custom checkbox
*/

.toggle__label{
  display: inline-flex;
  min-height: var(--uiToggleSize);
  padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, .4em));
}

.toggle__input:not(:disabled) ~ .toggle__label{
  cursor: pointer;
}

/*
1. Ems helps to calculate size of the checkbox
*/

.toggle__label::after{
  content: "";
  box-sizing: border-box;  
  width: 1em;
  height: 1em;
  font-size: var(--uiToggleSize); /* 1 */

  background-color: transparent;
  border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);

  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.toggle__input:checked ~ .toggle__label::after{
  background-color: var(--uiToggleColor);
}

.toggle__text{
  margin-top: auto;
  margin-bottom: auto;
    font-size: 79%;
}

/*
The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle

1. Ems helps to calculate size and position of the arrow
*/

.toggle__label::before{
  content: "";
  width: 0;
  height: 0;
  font-size: var(--uiToggleSize); /* 1 */

  border-left-width: 0;
  border-bottom-width: 0;
  border-left-style: solid;
  border-bottom-style: solid;
  border-color: var(--toggleArrowColor, #fff);

  position: absolute;
  top: .5428em;
  left: .25em;
  z-index: 3;

  transform-origin: left top;
  transform: rotate(-40deg) skew(10deg);
}

.toggle__input:checked ~ .toggle__label::before{
  --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);

  width: .4em;
  height: .2em;
  border-left-width: var(--uiToggleArrowWidth);
  border-bottom-width: var(--uiToggleArrowWidth);
}

/*
States
*/

/* focus state */

.toggle:focus-within{
  outline: var(--toggleOutlineWidthFocus, 3px) solid var(--toggleOutlineColorFocus, currentColor);
  outline-offset: var(--toggleOutlineOffsetFocus, 5px);
}

/* disabled state */

.toggle__input:disabled ~ .toggle__label{
  opacity: var(--toggleOpacityDisabled, .24);
  cursor: var(--toggleCursorDisabled, not-allowed);
  user-select: none;
}

/*
=====
PRESENTATION STYLES
=====
*/

/* 
The demo skin
*/

.toggle__label::after{
  border-radius: var(--toggleBorderRadius, 2px);
}

/* 
The animation of switching states
*/

.toggle__input:not(:disabled) ~ .toggle__label::before{
  will-change: width, height;
  opacity: 0;
}

.toggle__input:not(:disabled):checked ~ .toggle__label::before{
  opacity: 1;
  transition: opacity .1s ease-out .25s, width .1s ease-out .5s, height .2s ease-out .3s;
}

.toggle__input:not(:disabled) ~ .toggle__label::after{
  will-change: background-color;
  transition: background-color .2s ease-out;
}

/*
=====
SETTINGS
=====
*/

.page__custom-settings{
  --toggleColor: #690e90;
  --toggleOutlineColorFocus: #690e90;
  --toggleSize: 2rem;
}




/* ERROR STYLES */
input[type=text].formError,
input[type=email].formError {
    background-color: #ffd9d9;
    border: 2px solid #800 !important;
}
.formError::-webkit-input-placeholder {
    color: #800;
}


.toggle__label.formError::after{
  border-color: #800 ;
    background-color: #ffd9d9;
}





/* COUNTER */

.handle-counter { 
    overflow: hidden; 
}

.handle-counter .counter-minus,  
.handle-counter .counter-plus,  
.handle-counter input {
  float: left;
  text-align: center;
}

.handle-counter .counter-minus,  
.handle-counter .counter-plus { 
    text-align: center; 
}

.handle-counter .counter-minus {
    border-right: none;
}

.handle-counter .counter-plus {
    border-left: none;
}

.handle-counter input {
    width: 150px;
    border: 2px solid #0069d9;
    border-radius: 0;
    height: 40px;
}

.handle-counter .btn {
    padding: 6px 12px;
    border: 2px solid transparent;
    color: #fff;
    font-weight: 600;
    height: 40px;
}

.handle-counter .btn:disabled, 
.handle-counter .btn:disabled:hover {
    background-color: darkgrey;
    cursor: not-allowed;
}

.handle-counter .btn-primary { 
    background-color: #0069d9; 
    border-radius: 0;
}

.handle-counter .btn-primary:hover, 
.handle-counter .btn-primary:focus { 
    background-color: #0486b9; 
}



/* MODAL CUSTOM STYLES */

.modal-header {
    border-bottom: none;
    background-color: #800;
    color: #fff;
    text-transform: uppercase;
}
.modal-body {
    font-size: 80%;
}
.modal-footer {
    border-top: none;
}