@font-face {
    font-family: 'Mohave';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/Mohave-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'kkFont';
    font-weight: normal;
    font-style: italic;
    src: url('fonts/Mohave-Italic-VariableFont_wght.ttf') format('truetype');
}

* {
	font-family: Mohave, Sans Serif, Arial;
	font-size: 1em;
    margin: 0;
    max-width: 100vw;
}

body {
	background: #FFFFFF;
    max-width: 1980px;
    min-width: 860px;
}

h1, h2, h3, p {
    color: #000000;
}

a.disable {
	pointer-events: none;
	cursor: default;
	color: #CCCCCC;
}

input:not([type="checkbox"]):not([type="radio"]), textarea {
    border: none;
    box-shadow: inset 2px 2px 6px #222222;
	padding: 10px;
    width: 450px;
}

input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
}

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
}

td {
    min-width: 20px;
}

.noWordBreak {
    white-space: nowrap;
}

button {
    border: none;
    background-color: #FFFFFF00;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 5px 0px #222222;
    transition: all ease-in-out 0.5s;
    margin: 0px 5px 5px 0px;
    padding: 20px 32px;
}

button:hover {
    box-shadow: 10px 10px 15px 0px #004286;
}

main:not(#main) {
	position: relative;
	top: 60px;
    min-width: 600px;
    max-width: 100vw;
    min-height: 420px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 200px;
}

main#main {
    position: relative;
    top: 0px !important;
    min-width: 860px;
    margin-bottom: -75px;
    overflow: hidden;
}

h1 {
	font-size: 1.5em;
    line-height: 22px;
	margin-bottom: 20px;
}

h2 {
	font-size: 1.2em;
    line-height: 30px;
    margin-top: 40px;
    margin-bottom: 12px;
}

p {
	margin-bottom: 10pt;
    word-spacing: 0.22em;
    line-height: 22px;
}

main:not(#main) > h1, main:not(#main) > h2, main:not(#main) > p {
    min-width: 100%;
}

select {
    float: right;
    width: 200px;
}

input, textarea {
    -webkit-appearance: none;
}

input[type='checkbox'], input[type='radio'] {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0px 10px;
    border: 2px solid #FFFFFF;
    box-shadow: 2px 2px 6px #222222;
}

input[type='checkbox']:hover, input[type='radio']:hover {
    box-shadow: 2px 2px 10px #004286;
}

input[type='checkbox']:checked, input[type='radio']:checked {
    background-color: #004286;
}

form label {
    position: relative;
    top: 0px;
    margin-right: 10px;
}

td.centered {
    text-align: center;
    max-width: 80px;
    width: 80px;
}

input[type="radio"] {
    max-width: 40px;
    margin: auto;
}

div.links a.disabled {
    color: #222222;
}

div a {
    text-decoration: none;
}
    
@media screen and (max-width: 1260px){
    img.headerimage {
        position: absolute;
        top: -50px;
    }
}

.inputFieldC {
    display: none;
}

main.kontakt {
    min-width: 600px;
}

main.kontakt p {
    min-width: 600px;
}

main.kontakt input[type="text"], main.kontakt input[type="email"] {
    min-width: 400px;
}

main.kontakt textarea.inputfield {
    max-width: 450px;
    min-width: 450px;
    max-height: 150px;
    min-height: 150px;
}

td.red {
    color: #EE4242;
}

button.deactivatedPayButton {
    pointer-events: none;
    color: #868686;
}

main#downloadSite > div.downloadSubBox {
    position: relative;
    display: flex;
    flex-direction: column;
}

main#downloadSite > div.downloadSubBox > div, main#downloadSite > div:not(.downloadSubBox) {
    display: flex;
    flex-wrap: wrap;
}

a.downloadLink {
    text-decoration: none;
}

div.downloadLink {
    position: relative;
    height: 62px;
    width: 220px;
    text-align: center;
    margin: 0px 10px 10px 0px;
    box-shadow: 2px 2px 5px 0px #222222;
    transition: all ease-in-out 0.5s;
    display: flex;
    justify-content: center;
}

div.downloadLink:hover {
    box-shadow: 10px 10px 15px 0px #004286;
}

a.downloadLink p {
    margin: auto;
}

table#deliveryTable {
    border: 1px solid #222222;
    border-spacing: 0px;
    margin-bottom: 10px;
}

table#deliveryTable td {
    border: 1px solid #222222;
    min-width: 120px;
    max-width: 100vw;
    text-align: center;
}

table#deliveryTable thead {
    font-weight: bold;
}

p.note {
    font-size: 0.8em;
    line-height: 1em;
}

p.subNote {
    font-size: 0.6em;
    line-height: 0.8em;
}

p#shopNote {
    text-align: center;
    margin-top: 6px;
    font-size: 0.8em;
    color: #868686;
}

form {
	text-align: left;
}

div#supportBox {
    position: relative;
    width: 100%;
    display: flex;
}

form#supportForm {
    position: relative;
    top: 20px;
    margin: auto;
}

form#dataShopForm {
    position: relative;
    top: -40px;
    margin: 0px auto;
}

form#supportForm div, form#dataShopForm div {
    position: relative;
    min-height: 50px;
    margin: auto;
    min-width: 580px;
    width: 580px;
}

form#supportForm div:not(.checkbox) label, form#dataShopForm div label:not(#boxDeliveryAdress > label) {
    position: absolute;
    left: 0px;
    top: 8px;
    width: 100px;
    text-align: right;
}

form#supportForm div input, form#supportForm div textarea, form#dataShopForm div :not(div#boxDeliveryAdress > label) input, form#d#dataShopForm div textarea {
    position: absolute;
    top: 0px;
    right: 0px;
}

form#dataShopForm div#boxDeliveryAdress > label {
    line-height: 50px;
}

form#supportForm div.textarea {
    height: 186px;
}

form#dataShopForm div select {
    box-shadow: 2px 2px 6px #222222;
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

form#dataShopForm div select:hover {
    box-shadow: 2px 2px 6px #004286;
}

form#supportForm div input:not([type="checkbox"]):hover, form#supportForm div textarea:hover, form#dataShopForm div input:not([type="checkbox"]):hover, form#dataShopForm div textarea:hover {
    box-shadow: inset 2px 2px 10px #004286AA;
}

form#supportForm div input:not([type="checkbox"]):focus, form#supportForm div textarea:focus, form#dataShopForm div input:not([type="checkbox"]):focus, form#dataShopForm div textarea:focus {
    box-shadow: inset 2px 2px 10px #004286;
}

form button {
    position: relative;
    top: 10px;
}

form textarea {
    vertical-align: top;
}

form input[type='checkbox'] {
    position: relative;
    top: 0px;
}

p.formError {
    position: relative;
    top: -20px;
    color: #FF2222;
}

main.kontakt p.formError {
    position: relative;
    left: 100px;
    top: -5px;
    color: #222222;
}

div#alertBox {
    position: fixed;
    top: 0px;
    left: 0px;
    border: 1px solid #FFFFFF;
    display: none;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 6px #222222;
    border-radius: 10px 10px 10px 0px;
}

div#alertBox p {
    float: left;
    margin: auto 6px auto 6px;
    color: #222222;
    font-weight: bold;
}

div.information {
    position: relative;
}

p.information {
    font-size: 0.9em;
    line-height: 12px;
}

main#main img {
    max-width: 500px;
}

div#cardSymbols_info {
    position: relative;
    top: 20px;
    margin: 0px;
}

div#cardSymbols_info img {
    width: 60px;
    margin-right: 20px;
    font-size: 2em;
    vertical-align: middle;
}

.whiteText {
    color: #FFFFFF;
}