@import "./msg.css";
@import "./mobil.css";

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Message */
#msgBack,
#msgBox,
#msgBox > div > .msgBoxHeader,
#msgBox > div > .msgBoxBody,
#msgBox > div > .msgBoxFooter{
    display: none;
}

/* Header */
header{
    width: 100%;
    background: #c8005c;
}
header > section{
    padding: 1.5rem;
    text-align: center;
    color: #f2f2f2;
}
header > section .headerText{
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}
header > section .headerSlogan{
    font-size: 1.2rem;
    font-weight: 600;
    font-style: italic;
}

/* Navigation */
nav{
    width: 100%;
}
nav > section ul{
    background: #192e5b;
    padding: 2rem;
    margin: 0;
    display: flex;
}
nav > section ul li{
    list-style: none;
}
nav > section ul li a{
    color: #f2f2f2;
    padding: 1rem;
    text-decoration: none;
    transition: all 0.3s linear;
}
nav > section ul li a:hover{
    background: #244283;
}
nav > section ul li a.active{
    border-bottom: 0.1rem solid #8c8c8c;
}

/* Content */
main{
    width: 50%;
    min-height: 100%;
    background: #fff;
    margin: 1rem auto;
}
main > section{
    padding: 3rem 2rem 3rem 2rem;
}
main > section h1{
    font-size: 3rem;
}
main > section h3{
    font-size: 1rem;
}

main > section .start-table{
    width: 70%;
    margin: 0 auto;
}

main > section a{
    text-decoration: none;
    cursor: pointer;
    color: #C8005C;
    transition: all 0.3s linear;
}
main > section a:hover{
    color: #244283;
}

main > section input[type="text"],
main > section input[type="password"],
main > section textarea{
    min-width: 40%;
    appearance: none;
    outline: none;
    border: 0.1rem solid rgba(165,165,165,0.5);
    border-radius: 0.2rem;
    padding: 0.8rem;
    resize: none;
    box-shadow: 0.1rem -0.1rem 0.3rem rgba(0,0,0,0.35);
    transition: all 0.3s linear;
}
main > section input[type="text"]:hover,
main > section input[type="password"]:hover,
main > section textarea:hover{
    border-color: #C8005C;
}
main > section input[type="text"]:focus,
main > section input[type="password"]:focus,
main > section textarea:focus{
    border-color: #244283;
    color: #C8005C;
}
main > section input[type="submit"]{
    appearance: none;
    outline: none;
    border: none;
    border-radius: 0.3rem;
    color: #fff;
    background: #C8005C;
    padding: 0.8rem;
    cursor: pointer;
    transition: all 0.3s linear;
}
main > section input[type="submit"]:hover{
    background: #244283;
}

/* Footer*/
footer{
    margin-top: auto; /* Schiebt dieses Element an den unteren Rand */
    background: #c8005c;
    padding: 20px;
    width: 100%;
    color: #f2f2f2;
}
footer > span{
    display: block;
    margin: 0.5rem;
    text-align: center;
}


/* Einstellungen */
hr{
    border-top: 0.1rem solid #192e5b;
}

.small-gray-text{
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
}

.right-text{
    text-align: right;
}

.btn-delete{
    appearance: none;
    font-weight: 700;
    outline: none;
    border: 0.1rem solid #dc3545;
    border-radius: 0.3rem;
    color: #dc3545;
    background: none;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.3s linear;
}
.btn-delete:hover{
    background: #dc3545;
    color: #fff;
}