:root 
{ 
	--wwmkonfig_color1: #E30613; 
	--wwmkonfig_color2: #404040;
}


#konfiguratorForm { margin: 20px 0; }

input { padding: 10px; border: 1px solid var(--wwmkonfig_color2); box-sizing: border-box; }
input[type="text"] { width: 100%; margin: 0 0 15px 0; }

.tabtitle { color: var(--wwmkonfig_color1); font-style: italic; font-weight: bold; margin: 0 0 15px 0; }
.tabsection { margin: 0 0 30px 0; }
.tabsectiontitle { color: var(--wwmkonfig_color1); font-weight: bold; }

.radioButtonsSquare input { display: none; }
.radioButtonsSquare label { display: block; padding: 10px 0px; cursor: pointer; }
.radioButtonsSquare label span { position: relative; line-height: 22px; }
.radioButtonsSquare label span:before, .radioButtonsSquare label span:after { content: ''; }
.radioButtonsSquare label span:before { border: 1px solid var(--wwmkonfig_color2); width: 20px; height: 20px; margin-right: 10px; display: inline-block; vertical-align: top; }
.radioButtonsSquare label span:after { background: var(--wwmkonfig_color1); width: 20px; height: 20px; position: absolute; top: -1px; left: 1px; transition: 300ms; opacity: 0; }
.radioButtonsSquare label input:checked + span:after { opacity: 1; }

.radioButtonsImage { margin: 10px 0 0 0; }
.radioButtonsImage .container { height: 200px; width: 150px; background-color: #ffffff; box-shadow: 0 0 25px rgba(17, 1, 68, 0.08); position: relative; cursor: pointer; 
    border: 1px solid var(--wwmkonfig_color2); text-align: center; display: inline-block; margin: 0 10px 0 0; }
.radioButtonsImage input[type="radio"] { -webkit-appearance: none; position: relative; width: 100%; cursor: pointer; border: none; height: 200px; z-index: 10; } 
.radioButtonsImage .container img { width: 100%; position: absolute; left: 0; right: 0; top: 20px; cursor: pointer; z-index: 5; }
.radioButtonsImage label span { display: block; position: absolute; bottom: 10px; left: 0; right: 0; z-index: 5; }
.radioButtonsImage input[type="radio"]:after { position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f111"; font-size: 28px; 
    color: transparent; right: 5px; top: 5px; }
.radioButtonsImage input[type="radio"]:checked:after { font-weight: 900; content: "\f058"; color: var(--wwmkonfig_color1); }

.checkButtonsImage { margin: 10px 0 0 0; }
.checkButtonsImage .container { height: 200px; width: 150px; background-color: #ffffff; box-shadow: 0 0 25px rgba(17, 1, 68, 0.08); position: relative; cursor: pointer; 
    border: 1px solid var(--wwmkonfig_color2); text-align: center; display: inline-block; margin: 0 10px 0 0; }
.checkButtonsImage input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 100%; cursor: pointer; border: none; height: 200px; z-index: 10; } 
.checkButtonsImage .container img { width: 100%; position: absolute; left: 0; right: 0; top: 20px; cursor: pointer; z-index: 5; }
.checkButtonsImage label span { display: block; position: absolute; bottom: 10px; left: 0; right: 0; z-index: 5; }
.checkButtonsImage input[type="checkbox"]:after { position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f111"; font-size: 28px; 
    color: transparent; right: 5px; top: 5px; }
.checkButtonsImage input[type="checkbox"]:checked:after { font-weight: 900; content: "\f058"; color: var(--wwmkonfig_color1); }

.checkButtonsSquare input { display: none; }
.checkButtonsSquare label { display: block; padding: 10px 0px; cursor: pointer; }
.checkButtonsSquare label span { position: relative; line-height: 22px; }
.checkButtonsSquare label span:before, .checkButtonsSquare label span:after { content: ''; }
.checkButtonsSquare label span:before { border: 1px solid var(--wwmkonfig_color2); width: 20px; height: 20px; margin-right: 10px; display: inline-block; vertical-align: top; }
.checkButtonsSquare label span:after { background: var(--wwmkonfig_color1); width: 20px; height: 20px; position: absolute; top: -1px; left: 1px; transition: 300ms; opacity: 0; }
.checkButtonsSquare label input:checked + span:after { opacity: 1; }



.switchContainer { position: relative; top: 10px; font-weight: bold; }
.switchContainer .switch { position: relative; display: inline-block; width: 60px; height: 34px; top: -4px; margin: 0 20px; }
.switchContainer .switch input { opacity: 0; width: 0; height: 0; }
.switchContainer .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switchContainer .slider::before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; 
    -webkit-transition: .4s; transition: .4s; }
.switchContainer input:checked + .slider { background-color: var(--wwmkonfig_color1); }
.switchContainer input:focus + .slider { box-shadow: 0 0 1px var(--wwmkonfig_color1); }
.switchContainer input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.switchContainer .slider.round { border-radius: 34px; } 
.switchContainer .slider.round::before { border-radius: 50%; }

.wwm-uebersicht-table { margin: 0 0 15px 0; }
.wwm-uebersicht-table td { border: none; padding: 0; }
.wwm-uebersicht-table td:first-child { width: 300px; }
.wwm-uebersicht-table th, .wwm-uebersicht-table tr:first-child td { padding: 0; background: none; color: unset; }




.invalid { border: 1px solid #ff0000; background: #edc0c0; }

.tab { display: none; }

.step { height: 10px; width: 100px; margin: 0 5px 0 0; background: transparent; border: 1px solid var(--wwmkonfig_color1); display: inline-block; }
.step.active { opacity: 1; background-color: var(--wwmkonfig_color1); }
.step.finish { background-color: var(--wwmkonfig_color1); }

button { background-color: var(--wwmkonfig_color2); color: var(--wwmkonfig_color1); border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; }
#prevBtn { color: #fff; }

.konfigNavigationButtons { float:right; }

@media only screen and (max-width: 1024px)
{
    #konfiguratorForm .container { width: 95% !important; box-sizing: border-box; }
    #konfiguratorForm .radioButtonsImage .container img { width: 150px; left: 50%; transform: translate(-50%); }
    #konfiguratorForm .checkButtonsImage .container img { width: 150px; left: 50%; transform: translate(-50%); }
}

@media only screen and (max-width: 768px)
{
    #konfiguratorForm .container .col_nml_6, .container .col_nmr_6 { width: 100%; padding: 0; }
    #konfiguratorForm .konfigNavigationButtons { float: left; }
}