:root {
    --bonegrey: rgb(192,192,172);
    --pearlwhite: rgb(246, 244, 243);
    --sandbeach: rgb(213, 181, 138);
    --harvestgold: rgb(247, 169, 64);
    --rubbyred: rgb(198, 21, 53);
    --midnightblue: rgb(49, 41, 120);
    --seablue: rgb(9, 103, 177);
    --harvestgold: rgb(247, 169, 64);
}
body {
    font-size: 1.2rem;
    font-family: customFont;
}
h1 {
    color: var(--harvestgold);
    margin: 10px 5px;
    padding-top:50px;
}
.center {
    text-align: justify-all;
    align-items: center;
    align-content: center;
    display: flex;
    width: 70vw;
    min-width: 352px;
    max-width: 1099px;
    margin: auto;
    top: 5%;
    background-color: var(--pearlwhite);
    flex-direction: column;
    justify-content: center;
    background-image: url("../pictures/Foxconn_Brej-zen_Formular_Background_1080x1920_V2.png");
    background-size: contain;
}
.background {
    background-size: cover;
    background-repeat: no-repeat
}
label, input, select, textarea, fieldset, canvas, form ol,.header,.titleImage {
    margin: 8px calc(70vw / 15);
    display: inline-block;
}
option{
    font-family:customFont;
    font-size:1.1rem;
}
label {
    width: 90%;
    padding: 1px 5px;
    
}
.question {
   
    font-size: 0.8rem;
    line-height: 0.9;
}
input[type=submit], .fileInput {
    width: 40%;
    background-color: var(--rubbyred);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: customFont;
    font-size: 1.2rem;
}

input[type=file] {
    opacity: 0;
}

.fileInput {
    background-color: var(--midnightblue);
    text-align: center;
}

input[type=text], select, input[type=number], textarea {
    width: 80%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--bonegrey);
}
textarea{
    height:200px;
}
input[type=submit]:hover, .fileInput:hover {
    background-color: var(--seablue);
}
input:focus, textarea:focus {
    background-color: var(--pearlwhite);
    border: 3px solid var(--midnightblue);
}

fieldset {
    width: 77%;
    padding: 6px 10px;
    border:none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    margin: 8px 5px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 /*Create a custom checkbox*/
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--bonegrey);
}

.container:hover input ~ .checkmark{
    background-color: var(--pearlwhite);
    border: solid var(--midnightblue);
    border-width: 2px;
}

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

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

 /*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after{
    display: block;
}

 /*Style the checkmark/indicator*/ 
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

div{
    width:100%;
}

/*mobile screen*/
@media screen and (max-width: 693px){
    }
    h1{
        padding-top:0px;
    }
canvas {
    /*prevent interaction with the canvas*/
    pointer-events: none;
    padding: 12px 20px;
    border: solid 2px black;
    background:var(--pearlwhite);
}
@font-face {
    font-family: customFont;
    src: url(fonts/amplesoftpro-regular.woff);
}
@font-face {
    font-family: customFontBold;
    src: url(fonts/AmpleSoftPro-Bold.woff);
    font-weight: bold;
}
form ol {
    padding-left: 0;
    width: 80%;
    border-radius: 4px;
}

form li, div > p {
    background: var(--bonegrey);
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    border-radius: 4px;
}

form img {
    height: 64px;
    order: 1;
}

form p {
    line-height: 32px;
    margin: 8px 10px;
    width: 80%;
    border-radius: 4px;
}
#fileattachment{
    margin:0px;
}
.boldFont {
    font-family: customFontBold;
    font-weight:bold;
}
.titleImage{
    height:200px;
    margin-right:5px
}
.header {
    display: inline-flex;
   padding-top:40px;
   
}
.required:after {
    content: " *";
    color: red;
}
.invalid{
    color:red;
    font-weight:bold;
}
.notdisplay{
    display:none;
}
button {
    background-color: var(--midnightblue);
    border-radius: 8px;
    transition-duration: 0.4s;
    width: 30%;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: customFont;
    font-size: 1.2rem;
}
button:hover {
    background-color: var(--seablue);
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}