*{
    margin: auto;
    overflow: visible;
}

/*Preliminary header style*/
.header {
    position: relative;
    display: flex;

    width: 100vw;
    height: 100px;

    background-color: #9e4646;
    color: white;

    z-index: 2;
}

.header h1 {
    font-size: clamp(30px,3vw,50px);
    margin-left: 0;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.header img {
    width: 50px;
    height: 50px;
    margin-left: 20px;
    margin-right: 10px;
}

.headContent {
    display: flex;
    width: fit-content;
    max-width: 60vw;
    height: 100%;

    margin-left: 0;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

body {
    overflow: visible;
    height: 100vh;
}

h2 {
    text-align: center;
}

h2#kategorieDisp, h2#nameDispConf {
    font-size: clamp(3rem,10vw,6rem);
    margin-top: 50px;
}

h2#listHeader {
    font-size: clamp(1.5rem,2vw,4rem);
    text-align: left;
}

input {
    transition: border-bottom .2s;
}

.container {
    width: 100%;
    height: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

.headLine {
    width: 100vw;
    height: 80px;
    background-color: #9e4646;
    margin: auto;

    display: table-cell;
    vertical-align: middle;
}

.logo {
    width: 50px;
    height: 50px;
    float: left;
    margin: 7px;
    margin-left: 10px;
}

h1 {
    font-size: 50px;
    text-align: left;
    margin-left: 75px;
    color: white;
}

h1#name {
    letter-spacing: .7vw;
}

.login h1 {
    color: black;
    text-align: center;
    font-size: clamp(2rem,8vw,10rem);
    margin: auto;
    margin-top: 50px;.logoutButton {
        width: clamp(150px,15%,250px);
        height: 50px;
    
    
        border: none;
        outline: none;
        overflow: hidden;
        border-radius: 2px;
    
        color: white;
        background-color: rgb(77, 197, 29);
    
        font-size: 25px;
        text-align: center;
        text-decoration: none;
    
        justify-content: center;
        align-items: center;
    
        transition-duration: 0.1s;
        cursor: pointer;
    
        
        
        box-shadow: 0 5px 7.5px rgba(0,0,0,.8);
        
        
        margin-right: 1vw;
    }
}

h3#aufsichtNameDisp {
    position: absolute;
    bottom: 10px;
    left: 80px;
}

.nameDisp {
    font-size: max(min(80px, 8vmin), 40px);
    padding-bottom: 1%;
}

#kat {
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 15px;

    font-size: clamp(2rem,5.5vw,5rem);

    min-width: 200px;

    width: 70%;
    height: 125px;

    text-align: center;
    color: black;
    border: none;
    border-bottom: 3px solid #9e4646;
    border-radius: 0;

    background-color: rgba(0,0,0,.11);
}

#selector {
    margin-top: 10%;
}

#scoreInput {
    display: flex;
    flex-direction: column;
    width: min-content;

    margin-top: 20px;
    font-size: 75px;
}

.scoreInputChild {
    display: flex;
    flex-direction: row;
    transition: transform .3s;
}

.scoreInputChild input {
    min-width: 120px;
    margin-right: 5px;
    width: 10vw;
    max-width: 400px;
    height: auto;
    /*height: 14vw;*/

    text-align: center;
    font-size: clamp(6rem,8vw,10rem);

    border: 0;
    border-radius: 5px;
    border-bottom: 5px black solid;

}

.scoreInputChild input:focus {
    border: 0;
    border-bottom: 5px #9e4646 solid;
    outline: none;
}

.inPageButtons {
    display: flex;
    flex-direction: row;
    width: 35%;
    min-width: 425px;

    padding: 55px;
}

.inPageButtons button {
    width: 48%;
    
}

#backToLogin, #sSubmit,#tSubmit {
    min-width: 450px;
    font-size: clamp(2rem,4vw,5rem);
}

.wertText {
    margin-right: 15px;
    margin-bottom:0;
}

.pointsSum {
    font-size:  max(min(40px, 2vmin), 10px);
    padding-bottom: 3%;
}

table {
    width: 90%;
    border-collapse: collapse;
}

table tr th:first-child,
table tr td:first-child {
    border-left: none;
}
table tr th:last-child,
table tr td:last-child {
    border-right: none;
}

th {
    text-align: center;
    font-size: max(min(60px, 6vmin), 30px);
    margin-left: 5%;
    margin-right: 5%;
    border: 2px black solid;
    border-top: 0;
}
td {
    font-size: max(min(50px, 4vmin), 20px);
    text-align: center;
    border-left: 2px black solid;
    border-right: 2px black solid;
}

.qrCode {
    max-width:95%;
    max-height:95%;
    min-width: 30%;
    min-width: 30%;
}

.logoutButton {
    width: clamp(150px,15%,250px);
    height: 50px;


    border: none;
    outline: none;
    overflow: hidden;
    border-radius: 2px;

    color: white;
    background-color: rgb(77, 197, 29);

    font-size: 25px;
    text-align: center;
    text-decoration: none;

    justify-content: center;
    align-items: center;

    transition-duration: 0.1s;
    cursor: pointer;

    
    
    box-shadow: 0 5px 7.5px rgba(0,0,0,.8);
    
    
    margin-right: 1vw;
}

.logoutButton:hover {
    background-color: rgb(54, 138, 21);
    color: white;

}

.logoutButton:active {
    box-shadow: 0 0px 0px rgba(0,0,0,.8);
}

#idInput.teacherInput {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    text-align: center;
    grid-gap: 10px;

    width: 90%;

    margin-bottom: 20px;
}

.studentInput {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    text-align: center;
    grid-gap: 10px;

    width: 90%;

    margin-bottom: 20px;
}

.punkteDiv {
    text-align: center;
}

.clickText {
    font-size: min(3vw, 30px);
    text-align: center;
    text-decoration: underline;
    margin: 1vmin;
}

.clickText:hover {
    cursor: pointer;
}

#inPage {
    text-align: center;
}

.numberInput, .numberInputStudent {
    text-align: center;
    min-height: 120px;
    font-size: clamp(2rem,8vw,10rem);
    height: 17vw;
    width: 100%;

    border: 0;
    border-bottom: 5px black solid;
    border-radius: 5px;
    
    
}

.numberInput:focus, .numberInputStudent:focus {
    outline: none;
    border: 0;
    border-bottom: 5px #9e4646 solid;
}

.idQuery {
    margin-top: 10%;

    display: block;
    justify-content: center;
    align-items: center;

}

#nameDisp {
    margin-top: 20px;
    text-align: center;
}

.login {
    text-align: center;
    align-items: center;
}

.output {
    display: none;
    text-align: center;
    margin-top: 5%;
}

.reader {
    width: 95%;
    position: absolute;
    left: 0;
    margin-left: 50%;
    transform: translateX(-50%);

}

.uiContainer {
    margin-top: -60px;
}

.button#turnCamera {
    max-width: none;
    width: 47%;
    position: absolute;
    left: 0;
    height: 100px;
    min-height: fit-content;
    margin-left: 2.5%;

    font-size: 50px;
}

.button#manualInputButton {
    max-width: none;
    width: 47%;
    height: 100px;
    
    position: absolute;
    right: 0;
    margin-right: 2.5%;

    font-size: 50px;    
    overflow: hidden;
    text-overflow: ellipsis
}

.button#scanButton {
    width: 800px;
    height: 800px;
    max-width: none;
    max-height: none;
    margin-bottom: -50px;

    border-radius: 1000px;

    font-size: 150px;

    
}

.button#changeToScanner {
    width: 50%;
    height: 200px;

    max-width: none;
    max-height: none;
    margin-bottom: -50px;

    border-radius: 15px;

    font-size: 150px;

    
}

.button#wertSubmit, .button#back, .button#showSchueler {
    margin-top: 30px;
    margin-bottom: 10px;
    min-width: min(400px,80vw);
    font-size: clamp(2rem,2.5vw,5rem);
    width: 40vw;
}

.button#back {
    margin-bottom: 100px;
}

.listContainer {
    margin-top: 40px;
    margin-bottom: 70px;

    width: min-content;
    float: left;
    text-align: left;
    margin-left: 50vw;
    transform: translateX(-50%);
}

#pList {
    width: max-content;
    font-size: clamp(1.5rem,2vw,4rem);
}

.buttons {
    display: flex;
    width: 40%;
}

.button {
    background-color: #9e4646;
    border: none;
    border-radius: 2px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    transition-duration: 0.1s;
    cursor: pointer;

    margin-top: 80px;

    position: relative;
    display: block;
    justify-content: center;
    align-items: center;


    margin-bottom: 40px;

    box-shadow: 0 5px 7.5px rgba(0,0,0,.8);

}
.button:hover {
    background-color: #6e5959;
    color: white;

}

.button:active {
    box-shadow: 0 0px 0px rgba(0,0,0,.8);
}

@media screen and (max-width:800px){
    .buttons {
        width: 80%;
    }
}

.hovertext {
    position: relative;
    border-bottom: 1px dotted black;
}

.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    transition: opacity 1s ease-in-out;

    position: absolute;
    z-index: 1;
    left: 0;
    top: 110%;
}

.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}
  
#loading-gif {
    width: 50%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translateX(-50%);
}

.confEntry {
    text-align: center;
}

@media screen and (max-width: 1300px) {
    .button#manualInputButton,
    .button#turnCamera {
        font-size: 40px;
    }
    
}

@media screen and (max-width: 1100px) {
    .button#manualInputButton,
    .button#turnCamera {
        font-size: 30px;
    }

    #kat {
        width: 70%;
        height: 100px;
    }
}

@media screen and (max-width: 800px) {
    .button#manualInputButton,
    .button#turnCamera {
        font-size: 20px;
    }

    .button#scanButton {
        width: 750px;
        height: 750px;
    }
    
}

@media screen and (max-width: 750px) {

    .button#scanButton {
        width: 700px;
        height: 700px;
    }
    
}

@media screen and (max-width: 700px) {

    .button#scanButton {
        width: 650px;
        height: 650px;
    }
    
}

@media screen and (max-width: 650px) {

    .button#scanButton {
        width: 600px;
        height: 600px;
    }
    
}

@media screen and (max-width: 600px) {

    .button#scanButton {
        width: 550px;
        height: 550px;
        font-size: 120px;
    }

    .inPageButtons {
        flex-direction: column;
        min-width: 0px;
    }

    .inPageButtons button {
        left: 50%;
        transform: translateX(-50%);
        min-width: calc(425px*0.48);
    }

    .scoreInputChild {
        transform: scale(0.75);
    }
    
}

@media screen and (max-width: 550px) {

    .button#scanButton {
        width: 95%;
        height: 500px;
        border-radius: 0px;
    }
    
}