* {
margin:0;
padding:0;
}

html {
    font-size: 100%;
    font-family: Arial, Arial, Helvetica, sans-serif;
    color: #e6e6e6;
    background-color: rgb(53,53,55);
    line-height: 1;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
}

.page {
    margin:0 auto;
    max-width: 1500px;
    font-family: Arial, Helvetica, sans-serif;
    color: #efefef;
    font-size: 1rem;
    background-color: rgb(97,129,151);
    padding:2%;
}

.block {
    display:block;
}

.center {
    text-align:center;
}

.profile {
    font-size: 1.2rem;
    
}
.profile .profil-color{
    padding: 5px 10px;
    display: inline;

}


h1 {
    margin: auto;
    text-align: center;
    margin-bottom: 70px;

}
.profile span {
    width: 300px;
    display: inline-block;
    margin: 10px; 
}

section {
    float: left;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    width: 380px;
    font-family: Arial, Helvetica, sans-serif;
    color: #efefef;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    line-height: 1;
}
  /* Login Seite */ 
    /* Full-width inputs */
    input[type=email], input[type=text], input[type=password] 
    {
        width: 40%;
        padding: 12px 20px;
        margin: 8px 0;
        display: block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    /* Set a style for all buttons */
    .button {
        background-color: #4CAF50;
        font-size: 1.2rem;
        color: white;
        height: 40px;
        /*padding: 14px 20px;*/
        margin: 8px 0;
        border: none;
        font-size: 1.2rem;
        font-weight: 700;
        cursor: pointer;
        width: 100%;
    }
    .profileButton{
        width: 40%;
    }
    #cancel{
        background-color:  Maroon;
        margin-top:10px;  
    }
            
    /* Add padding to containers */
    .container {
        min-width:220px;
        max-width:400px;
        margin:0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .container > * {
        display:block !important;
        width:100% !important;
    }
#wcm {
    margin-top: 40px;
    margin-bottom: 60px;
}

.flexcontainer {
display: flex;
justify-content:center;
}

.flexcontainer + .flexcontainer {
    margin-top:20px;
}

.flexitem {
flex-shrink:0;
}
.monthbox,
.teaserweek,
.planningweek,
.monthmenu {
    background: rgba(192,192,192,0.5);
    height: auto;
    width: 350px;
    padding: 10px;
    margin:0 10px;
}

.monthtitle,
.cw {
height:30px;
text-align:center;
font-size:1.2rem;
font-weight:700;
display: flex;
justify-content:space-between;
align-items: center;
margin-bottom:10px;
}

.cw-availlable{
    margin-left: 10px;
}

.cw-booked{
    margin-left: 1px;
}

/* DayButtons */
.days {
    display:flex;
    flex-wrap:wrap;
    height:350px;
    align-items:flex-start;
    align-content: flex-start;
}
.day
{
    display:inline-block;
    width:40px;
    height:40px;
    border:2px solid #efefef;
    font-size: 1.2rem;
    font-weight: 700;
    line-height:42px;
    text-align:center;
    margin:3px;
    cursor:pointer;
}

.appointment.today,
.day.today {
outline:gold solid 3px;
}
    
.day.noborder,
.cw-day.noborder {
    border-color:transparent;
    cursor:default;
}

.day.small {
font-size: 1rem;
}

.day.notime {
background-color: rgb(96,96,102);
}
.day.notime:hover {
background-color: rgb(141,141,147);
}
.day.available {
background-color: rgb(255,204,102);
border:2px solid rgb(122,134,99);
}

.day.booked {
background-color: rgb(167,183,137);
border:2px solid rgb(122,134,99);
cursor:default;
}

.day.booking-canceled{
background-color: rgb(142,54,54);
border:2px solid #efefef;
cursor:default;
}

.day.open{
background-color: rgb(96,96,102);
}

.day.closed {
    opacity:0.5;
}
.day.open:not(.non-clickable):hover {
background-color: rgb(141,141,147);
}
.day.closed:not(.non-clickable):hover{
    opacity:1;
}

.day.djclosed{
    opacity:0.5;
    cursor:default;
}
.day.non-clickable{
    cursor:default;
}

.day.has-note {
    position:relative;
}

.day.has-note::after {
    position:absolute;
    content:' ';
    right:0;
    top:0;
    background-image: linear-gradient(45deg, transparent 0px, transparent 7px, red 8px, red 12px );
    height:12px;
    width:12px;
}

input[type=text].note {
    color: black;
    width: 100%;
}

.releasedate {
    line-height:30px;
}

.location-badge {
    display:inline-block;
    width:40px;
    height:30px;
    border:2px solid #efefef;
    font-size: 1rem;
    font-weight: 700;
    line-height:32px;
    text-align:center;
    margin:3px;
    opacity:0.5;
}

.location-badge.released {
    opacity:1;
    background-color: rgb(167,183,137);
}

/* appointmentButtons */
.appointment {
display:inline-block;
width:180px;
height:40px;
border:2px solid #efefef;
font-size: 1.2rem;
font-weight: 900;
line-height:36px;
text-align:center;
margin:10px;
background-color: rgb(142,54,54);
vertical-align:top;
box-sizing:border-box;
}

.appointment.notime {
background-color: rgb(142,54,54);
}

.appointment.available {
background-color: rgb(255,204,102);
border:2px solid rgb(122,134,99);
}

.appointment.booked {
background-color: rgb(167,183,137);
border:2px solid rgb(122,134,99);
}

.appointment.requested {
    background-color: rgb(66,134,244);
    border:2px solid rgb(45,87,155);
}

label {
    font-family: Arial, Helvetica, sans-serif;
    color: #efefef;
    font-size: 1.2rem;
}

select {
    height: 40px;
    width: 180px;
    font-size: 1.2rem;    
    color: #efefef;
    background-color: rgb(96,96,102);
    outline: none;
}

/*Menu-Lauout*/
ul {
    list-style-type: none;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 5px;
    overflow: hidden;
    background-color: rgb(146,169,185);
    margin-bottom:2%;
}

li {
    float: left;
    background-color: rgb(96,96,102);
    width: 175px;
    margin-left: 5px;
    margin-right: 5px;
}

li a {
    display: block;
    color: #efefef;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover,
li a.selected {
    background-color: rgb(141,141,147);
}

.active {
    background-color: #4CAF50;
}
.logout {
    background-color: Maroon;
    width: 175px;
    float: right;

}

.thethingthatspinswhileloading {
text-align:center;
margin-top:120px;
width:100%;
}

.management .workarea,
.management .workplace,
.management .employee
{
display:flex;
padding:1rem;
margin-bottom: 0.3rem;
justify-content:space-between; 
}

.management > div{
margin-top: 2rem;
}

.management .workarea {
background-color:rgba(192, 192, 192, 0.5);
}

.management .workplace {
background-color:rgba(192, 192, 192, 0.7);
margin-left: 2rem;
}

.management .employee {
background-color:rgba(192, 192, 192, 0.9);
margin-right:0.3rem;
}

.management .employees {
display:flex;
align-content:flex-start;
margin-left:4rem;
}

.management .workarea.workarea-add,
.management .workplace.workplace-add,
.management .employee.employee-add {
justify-content:center;
background-color:rgba(192, 192, 192, 0.2);
}

.management input.management-input{
width: 20rem;
}