body{
    overflow-x: hidden;
    font-family: Raleway,serif;
}

/* -- Element generell -- */
button, input, select{
    font-family: inherit;
}

/* -- Error-Button -- */
#errorButton{
    width: 200px;
    height: 32px;
    border-radius: 5px;
    border: none;
    color: black;
    background-color: red;
    cursor: pointer;
    display: block;
    font-weight: bold;
    position: fixed;
    margin-bottom: 10px;
    bottom: 0;
}

.window{
    top: 150px;
    background-color: white;
    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    text-align: center;
    position: fixed;
    z-index: 10000;
}

.windowShader{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.75;
}

#errorSendButton, #errorCancelButton{
    width: 200px;
    height: 32px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    float: right;
}

#errorText{
    padding: 4px;
    width: 98%;
}

#windowHead{
    border-bottom: 1px solid black;
    background-color: lavender;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    font-size: large;
    font-weight: bold;
}

#errorWindowCloseButton{
    height: 29px;
    width: 29px;
    margin-top: -4px;
    background-color: red;
    float: right;
    border: none;
}

/* -- IDs Loginmaske -- */
#logo{
    width: 100px;
    margin-top: 40px;
    margin-left: 40px;
}

#loginDiv, #registerDiv{
    width: 13%;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}

#login, #registerReg{
    width: 100%;
    height: 32px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
}

#admin, #register, #backToLogin{
    width: 150px;
    height: 32px;
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
}

#admin{
    margin-right: 170px;
}

#username, #password, #usermail{
    width: 100%;
    height: 32px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border-radius: 5px;
    border: none;
    background-color: #fbe400;
    padding: 5px;
    display: block;
}

/* -- IDs Prompt-Window -- */
#promptWindow{
    width: 30%;
    height: 20%;
    margin-left: 35%;
    margin-top: -10%;
    border: 1.5px solid black;
    position: absolute;
    z-index: 100;
    background-color: white;
}

/* -- Klassen Prompt-Window -- */
.promptButton{
    width: 150px;
    height: 30px;
    margin-left: 265px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
}

.promptHeader{
    width: 100%;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
    padding-top: 4px;
    background-color: lavender;
}

.promptText{
    width: 80%;
    height: 32px;
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border-radius: 5px;
    border: none;
    background-color: #fbe400;
    padding: 5px;
    display: block;
}

/* -- Klassen Registrierung -- */
.userError{
    background-color: red !important;
}

/* -- IDs Adminbereich -- */
#adminAreaOne,
#adminAreaTwo,
#adminAreaThree{
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

#adminAreaOne{
    background-color: darksalmon;
}

#adminAreaTwo{
    background-color: thistle;
}

#adminAreaThree{
    background-color: khaki;
}

#adminAreaButton{
    width: 150px;
    right: 10px;
    top: 0;
    position: absolute;
}

#backToMain{
    width: 150px;
    height: 32px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
}

#areaOneText,
#moduleName,
#moduleDescription,
#modulgroupName,
#modulgroupDescription{
    width: 250px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    box-sizing: border-box;
    border-radius: 5px;
    border: none;
    background-color: #fbe400;
    padding: 5px;
    display: block;
}

/* -- Klassen Adminbereich -- */
.adminButtons{
    width: 250px;
    height: 32px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.adminHeaders{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.adminSelect{
    height: 35px;
    width: 250px;
    margin-top: 15px;
    border-radius: 5px;
    border: none;
    background-color: darkgray;
    text-align: center;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.adminSelect option{
    background-color: #fbe400;
}

/* -- Element Fachauswahl -- */
input[type="radio"]{
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

input[type="radio"]:after{
    background-color: #fbe400;
}

/* -- IDs Logoutmaske -- */
#head{
    top: 10px;
    position: absolute;
}

#logout{
    display: block;
    margin-bottom: 10px;
    color: black;
    background-color: #fbe400;
    padding: 5px;
    border-radius: 5px;
}

#logoutButton{
    width: 150px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
}

/* -- IDs Fachauswahl -- */
#choseLocation{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#courseHeader{
    width: 50%;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#radioDiv{
    margin-top: 25px;
    width: 96px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* -- Mobile Fachauswahl -- */
@media only screen and (max-width: 600px) and (orientation: portrait) {
    .dropDownDiv{
        display: block !important;
        width: 100% !important;
        height: 100px;
        margin-bottom: 30px;
    }

    .dropDownMenu{
        width: 80% !important;
    }

    #dropDownMenuUser{
        width: 80% !important;
    }
}

/* -- Klassen Fachauswahl -- */
.dropDownDiv{
    width: calc(100% / 3);
    text-align: center;
    display: inline-block;
}

.dropDownMenu{
    height: 35px;
    width: 235px;
    margin-top: 30px;
    border-radius: 5px;
    border: none;
    background-color: darkgray;
    text-align: center;
    cursor: pointer;
}

.dropDownMenu option{
    background-color: #fbe400;
}

.radioLabel{
    font-size: large;
    vertical-align: text-bottom;
    cursor: pointer;
    width: 70px;
    display: inline-block;
}

#userDropDownDiv{
    text-align: center;
}

/* -- Klassen Helptext -- */
.helpIcon{
    height: 35px;
    width: 35px;
    cursor: pointer;
    margin-bottom: -13px;
}

.helpIconBody{
    margin-left: 20%;
    display: block;
    margin-bottom: 0 !important;
}

.helpIconInspector{
    display: block;
    position: absolute;
    margin-top: 5px;
}

.helpIconLayout{
    display: block;
    position: absolute;
}

.helpWindow{
    top: 150px;
    background-color: white;
    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    text-align: center;
    position: absolute;
    z-index: 10000;
}

.helpWindow p{
    padding: 4px;
}

.helpWindowShader{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.75;
}

#helpWindowHead{
    border-bottom: 1px solid black;
    background-color: lavender;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    font-size: large;
    font-weight: bold;
}

#helpWindowCloseButton{
    height: 29px;
    width: 29px;
    margin-top: -4px;
    background-color: red;
    float: right;
    border: none;
}

/* -- Modulgruppenauswahl -- */
#modulgroupWindow{
    width: 35%;
    max-height: 60%;
    margin-left: 37.5%;
    overflow-y: scroll;
}

#modulgroupWindowHead{
    border-bottom: 1px solid black;
    background-color: lavender;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    font-size: large;
    font-weight: bold;
}

#modulgroupButtonDiv{
    height: 40px;
    background-color: lavender;
}

#modulgroupSendButton,
#modulgroupCancelButton{
    width: 200px;
    height: 32px;
    border-radius: 5px;
    border: none;
    color:
	white;
    background-color:
	black;
    cursor: pointer;
    display: inline;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.modulgroupSelect{
    display: inline-block;
    width: 33%;
}

/* -- IDs Katalogauswahl -- */
#catalogHeader{
    width: 50%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#confirmButton,
#modulgroupSelectButton{
    height: 35px;
    width: 200px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
}

#dropDownMenuUser{
    height: 35px;
    width: 335px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background-color: darkgray;
    text-align: center;
}

#dropDownMenuUser option{
    background-color: #fbe400;
}

/* -- IDs SideMenu -- */
#sideMenu{
    width: 20%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fbe400;
    position: fixed;
    text-align: center;
}

#inspector{
    width: 100%;
    margin-top: 5px;
    border-top: 1px solid black;
}

#inspector p{
    margin: 10px 0 10px 0;
}

/* -- Klassen SideMenu -- */
.disabled{
    background-color: grey !important;
    cursor: default !important;
}

.sideMenuButton{
    width: 50%;
    height: 30px;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    border: none;
    color: white;
    background-color: black;
    cursor: pointer;
    display: block;
}

.sideMenuRadioLabel{
    width: 140px;
    margin-top: 5px;
    vertical-align: text-bottom;
    cursor: pointer;
    display: inline-block;
}

/* -- IDs Speichermaske -- */
#catalogLabel{
    margin-top: 25px;
    margin-bottom: 2px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: max-content;
}

#catalogName{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
}

#logoSide{
    width: 100px;
}

/* -- Element Tabellen -- */
th{
    height:27px;
    text-align: center;
    border: 1px solid black;
    background-color: lavender;
}

/* -- Klassen Tabellen -- */
.cell{
    width: 84px;
    border: 1px solid black;
    height: 45px;
    text-align: center;
}

.emptyCell{
    background-color: grey;
    color: orange;
}

.emptyFooterCell{
    width: 20%;
    height: 25px;
    background-color: white;
    border: 1px solid black;
}

.firstColumn{
    width: 64px;
    height: 35px;
    text-align: center;
    border: 1px solid black;
}

.footerCell{
    width: 20%;
    height: 25px;
    background-color: lightskyblue;
    text-align: center;
    border: 1px solid black;
    cursor: pointer;
}

.footerCellColor{
    background-color: lightskyblue;
}

.footerHeadCell{
    width: 100%;
    font-weight: bold;
    display: block;
}

.footerHeader{
    height: 25px;
    border: 1px solid black;
}

.footerTable{
    width: 75%;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: 1px solid black;
}

.footerRow{
    border: 1px solid black;
}

.miniCell{
    height: 10px !important;
}

.miniTable{
    width: 30px !important;
    font-size: 2px;
    display: inline-table;
    margin-right: 5px;
}

.stundenplanMuttenz{
    width: 80%;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: #FFEFEE;
}

.stundenplanWindisch{
    width: 80%;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: #EBF5FB; 
}

.tableDiv{
    page-break-after: always;
}

.tableDivOneColumn{
    height: 50%;
    width: 100%;
    padding-bottom: 20px;
    display: block;
}

.tableDivTwoColumns{
    width: 50%;
    display: inline-block;
}

.timecell{
    font-weight: bold;
}

.type1{
    background-color: #2E9AFE;
}

.type2{
    background-color: #AC58FA;
}

.type3{
    background-color: lawngreen;
}

.type4{
    background-color: yellow;
}

.type5{
    background-color: gold;
}

.type6{
    background-color: #FFB62F;
}

.type99{
    background-color: grey;
}

/* -- IDs Tabellen -- */
#mainDiv{
    width: 80%;
    height: 100%;
    float: right;
    margin-bottom: 15px;
}

#mainDivPrint{
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
}

/* -- Zielzellenmenü -- */
.errorSlot{
    color: red;
}

.targetCellMenu{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 1.5px solid black;
    position: absolute;
    z-index: 100;
    background-color: white;
}

.headerTab{
    width: 100%;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
    padding-top: 4px;
    background-color: lavender;
}

.targetCell{
    width: 100%;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
    padding-top: 4px;
    cursor: pointer;
}

.targetCell:hover{
    background-color: orange; 
}

/* -- Menu für privaten Termin -- */
.privateDateMenu{
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    border: 1.5px solid black;
    position: absolute;
    z-index: 100;
    background-color: white;
}

.privateDateSlot{
    width: 100%;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
    padding-top: 4px;
    cursor: pointer;
}

.privateDateSlot:hover{
    background-color: orange;
}

.removeDateMenu{
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    border: 1.5px solid black;
    position: absolute;
    z-index: 100;
    background-color: white;
}

.removeDateSlot{
    width: 100%;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
    padding-top: 4px;
    cursor: pointer;
}

.removeDateSlot:hover{
    background-color: orange;
}

/* -- ToDoList-Styles -- */
#orderSelect{
    margin-top: 5px;
}

#toDoListHeader{
    height: 30px;
    background-color: lavender;
    text-align: center;
}

#toDoListTable{
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

.creditpointCell{
    background-color: #FA3C5A;
}

.flagInvisible{
    display: none;
}

.flagStandard{
    width: 45px;
    margin-left: -5px;
    margin-top: 8px;
    position: absolute;
    transform: rotate(-30deg);
}

.flagToDo{
    width: 45px;
    margin-left: -3px;
    margin-top: 2px;
    position: absolute;
    transform: rotate(-30deg);
}

.flagTwoColumns{
    width: 45px;
    margin-left: -42px;
    margin-top: 17px;
    position: absolute;
}

.iconToDo{
    width: 20px;
    position: absolute;
    margin-left: -70px;
    margin-top: 1px;
}

.greyCell{
    background-color: grey;
}

.invisibleElement{
    display: none !important;
}

.toDoListCell{
    width: 160px;
}

.totalCreditpointCell{
    background-color: red;
}