.planung_timeline_container {
    background-color: #fff;
    height: 150px;
    border-radius: 8px;
    padding: 8px;
}

.planung_timeline {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100%;
}

.planung_timeline_monat {
    display: inline-block;
    vertical-align: top;
    padding: 1px;
    margin-right: 16px;
}

.planung_timeline_monat_titel {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
}

.planung_timeline_woche {
    white-space: nowrap;
    cursor: pointer;
    border-radius: 4px;
}

.planung_timeline_woche:hover {
    outline: 1px solid #960000;
}

.planung_timeline_woche_markiert {
    outline: 1px solid #960000;
}

.planung_timeline_tag {
    display: inline-block;
    background-color: #e9e9e9;
    border-radius: 4px;
    width: 23px;
    font-size: 11px;
    font-weight: bold;
    color: #525252;
    text-align: center;
    padding: 2px 0px 2px 0px;
    margin: 2px;
}

.planung_timeline_tag.leer {
    background-color: #fff;
}

.planung_timeline_tag.wochenende {
    color: #960000;
}

.planung_timeline_tag.heute {
    background-color: #bb0000;
    color: #fff;
}



.planung_woche_container {
    background-color: #fff;
    height: calc(100% - 192px);
    margin-top: 8px;
    border-radius: 8px;
    padding: 8px;
}

.planung_woche {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
}



.planung_tag_container {
    padding: 0px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 2px solid #c7c7c7;
    border-left: 7px solid #777777;
}

.planung_tag_container_spalte {
    display: inline-block;
    width: calc(50% - 34px);
    padding: 16px;
    vertical-align: top;
}

.planung_tag_container_spalte:first-of-type {
    background-color: #e9e9e9;
}

.planung_tag_ueberschrift {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 36px);
}



.planung_tag_knopf {
    display: inline-block;
    width: 32px;
    vertical-align: middle;
    font-size: 28px;
    color: #929292;
    transition: all 0.2s;
    cursor: pointer;
    left: 33px;
    position: relative;
}

.planung_tag_knopf:hover {
    color: #bb0000;
    transform: scale(1.2);
}



.planung_einsatz {
    background-color: #ffc0c0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    transition: transform 0.2s, opacity 0.2s;
    outline: 0px dashed #000000;
}

.planung_einsatz.lowlight {
    opacity: 0.5;
    transform: scale(0.99);
}

.planung_einsatz.highlight {
    transform: scale(1.01);
}

.planung_einsatz.drag_over {
    outline: 2px dashed #000000;
}

.planung_einsatz_zeile {
    margin-bottom: 6px;
}

.planung_einsatz_todo {
    font-weight: bold;
}

.planung_einsatz_daten {
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    max-width: calc(100% - 30px);
}

.planung_einsatz_spalte.schmal {
    display: inline-block;
    vertical-align: top;
    width: 32px;
    min-width: unset;
    margin-right: 8px;
}

.planung_einsatz_spalte.schmal .gicon {
    background-color: #fff;
    border-radius: 50%;
    padding: 6px;
    font-size: 16px;
    transition: all 0.2s;
    opacity: 0.7;
    cursor: pointer;
    color: #000;
}

.planung_einsatz_spalte.schmal .gicon:hover {
    transform: scale(1.2);
}

.planung_einsatz_spalte {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 42px);
    min-width: 200px;
    margin-right: 16px;
}



.planung_tag_mitarbeiter {
    margin-top: 8px;
}

.planung_mitarbeiter {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    padding: 6px;
    text-align: center;
    color: #fff;
    display: inline-block;
    margin: 2px;
    cursor: grab;
    transition: all 0.2s;
}

.planung_mitarbeiter:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

.planung_mitarbeiter.gesperrt {
    filter: grayscale(1);
    cursor: not-allowed;
}

.planung_mitarbeiter_initialen {
    font-size: 18px;
    border-bottom: 1px solid #fff;
}

.planung_mitarbeiter_anzahl {
    font-weight: bold;
    font-size: 11px;
}



.planung_mitarbeiter_klein {
    height: 18px;
    width: 28px;
    border-radius: 50%;
    padding: 11px 4px 7px 4px;
    text-align: center;
    color: #fff;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.planung_mitarbeiter_klein:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}



.planung_tag_ressourcen {
    margin-top: 8px;
}

.planung_ressource {
    border-radius: 8px;
    padding: 6px;
    text-align: center;
    background-color: #3f3f3f;
    color: #fff;
    display: inline-block;
    margin: 2px;
    cursor: grab;
    transition: all 0.2s;
}

.planung_ressource:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

.planung_ressource_titel {
    font-size: 13px;
    border-bottom: 1px solid #fff;
}

.planung_ressource_anzahl {
    font-weight: bold;
    font-size: 11px;
}



.planung_ressource_klein {
    border-radius: 8;
    padding: 6px;
    text-align: center;
    background-color: #3f3f3f;
    color: #fff;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.planung_ressource_klein:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}