﻿* {
    padding: 0rem;
    margin: 0rem;
    box-sizing: border-box;
}

body {
    background-color: rgb(226,231,235);
}

#divLogo {
    position: absolute;
    top: calc(15rem / 16);
    right: calc(15rem / 16);
    max-width: calc(250rem / 16);
    max-height: calc(100rem / 16);
    width: 100%;
    height: auto;
    /*box-shadow: black 0rem 0rem calc(8rem / 16) calc(-3rem / 16);*/
}


#divLogo > img {
    float: right;
    max-width: calc(250rem / 16);
    max-height: calc(100rem / 16);
    width: auto;
    height: auto;
}

span, a, label, input, select {
    font-size: 13pt;
    line-height: calc(40rem / 16);
}

span, a, input, label, h1, h2, select, textarea, li { /*.chosen-single *, .chosen-drop *, */
    font-family: Verdana, sans-serif;
}

select {
    cursor:pointer;
}

    input[type=text], textarea, input[type=password], input[type=submit], input[type=button], input[type=date], button, select {
        line-height: calc(36rem / 16);
        height: calc(40rem / 16);
        width: 100%;
    }

    input[type=text], input[type=password] {
        padding-left: calc(5rem / 16);
    }


    input[type=checkbox], input[type=radio] {
        height: calc(38rem / 16);
        width: calc(38rem / 16);
        cursor: pointer;
    }

    input[type=button], input[type=submit], button {
        border-radius: calc(15rem /16);
        background-color: rgb(226,231,235);
        color: black;
        border: calc(2rem / 16) solid rgb(195,200,204);
        transition: background-color 0.2s;
    }

        input[type=button]:hover, input[type=submit]:hover, button:hover {
            background-color: rgb(0,94,145);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: black 0rem 0rem calc(5rem / 16) calc(-2rem / 16);
        }

.trHead label {
    font-weight: bold;
}

.fakeTd {
    text-align: center;
    padding: calc(3rem / 16);
}

#lblHeadline {
    text-align: center;
    display: block;
    width: 100%;
    padding-bottom: calc(10rem / 16);
    font-weight: bold;
}

input[type=text], input[type=password] {
    padding-left: calc(5rem / 16);
}

#lblHeadline {
    font-size: 20pt;
}

.d75 {
    width: 75%;
}

.d66 {
    width: 66.6666%;
}

.d50 {
    width: 50%;
}

.d33 {
    width: 33.3333%;
}

.d25 {
    width: 25%;
}

.errorlabel {
    color: red;
}



.imgbtn {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 80%;
    /*background-size: cover;*/
    background-position: center;
    width: calc(36rem / 16);
    height: calc(36rem / 16);
    border: calc(2rem / 16) solid rgb(195, 200, 204);
    border-radius: calc(7rem / 16);
    background-color: rgb(226, 231, 235);
    transition: background-color 0.2s;
}

    .imgbtn:hover {
        background-color: rgb(0,94,145);
        border: calc(2rem / 16) solid transparent;
        box-shadow: black 0rem 0rem calc(5rem / 16) calc(-2rem / 16);
    }

    .imgbtn.placeholder {
        visibility:hidden;
    }

    .imgbtn.edit {
        background-image: url('../img/icon_edit.png');
    }

    .imgbtn.assignment {
        background-image: url('../img/icon_assignment.png');
    }

    .imgbtn.user {
        background-image: url('../img/icon_user.png');
    }

    .imgbtn.mailtouser {
        background-image: url('../img/icon_mailtouser.png');
    }

    .imgbtn.delete {
        background-image: url('../img/icon_delete.svg');
    }

    .imgbtn.arrowup {
        background-image: url('../img/icon_arrowup.svg');
    }

    .imgbtn.arrowdown {
        background-image: url('../img/icon_arrowdown.svg');
    }

    .imgbtn.plus {
        background-image: url('../img/icon_plus.svg');
    }

    .imgbtn.certificate {
        background-image: url('../img/icon_certificate.svg');
    }

    .imgbtn.schooling {
        background-image: url('../img/icon_schooling.svg');
    }

    .imgbtn.exam {
        background-image: url('../img/icon_exam.svg');
    }

    .imgbtn.door {
        background-image: url('../img/icon_door.svg');
    }

    .imgbtn.key {
        background-image: url('../img/icon_key.svg');
    }

    .imgbtn.edit:hover {
        background-image: url('../img/_icon_edit.png');
    }

    .imgbtn.assignment:hover {
        background-image: url('../img/_icon_assignment.png');
    }

    .imgbtn.user:hover {
        background-image: url('../img/_icon_user.png');
    }

    .imgbtn.mailtouser:hover {
        background-image: url('../img/_icon_mailtouser.png');
    }

    .imgbtn.delete:hover {
        background-image: url('../img/_icon_delete.svg');
    }

    .imgbtn.arrowup:hover {
        background-image: url('../img/_icon_arrowup.svg');
    }

    .imgbtn.arrowdown:hover {
        background-image: url('../img/_icon_arrowdown.svg');
    }

    .imgbtn.plus:hover {
        background-image: url('../img/_icon_plus.svg');
    }

    .imgbtn.certificate:hover {
        background-image: url('../img/_icon_certificate.svg');
    }

    .imgbtn.schooling:hover {
        background-image: url('../img/_icon_schooling.svg');
    }

    .imgbtn.exam:hover {
        background-image: url('../img/_icon_exam.svg');
    }

    .imgbtn.door:hover {
        background-image: url('../img/_icon_door.svg');
    }

    .imgbtn.key:hover {
        background-image: url('../img/_icon_key.svg');
    }



.tooltip {
    position: relative;
    display: inline-block;
}

.tooltiptext {
    font-size: 12pt;
    line-height: calc(20rem / 16);
    visibility: hidden;
    width: max-content;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: calc(5rem / 16) calc(8rem / 16);
    border-radius: calc(7rem / 16);
    position: absolute;
    z-index: 1;
    bottom: 125%; /* über dem Element */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*Temporär, data aktuell noch nicht umsetzbar*/
/*.assignment {
    opacity:0.5;
}*/