.zdhcprojects_task_item,
.zdhcprojects_project_header {
    border-bottom: 1px solid #333;
    display: flex;
}

.zdhcprojects_calendar_item {
    border-bottom: 3px solid #333;
}

.zdhcprojects_calendar_outer {
    width: 1210px;
    margin: auto;
    background: #FFF;
    position: relative;
    padding: 50px;
}


.project.project_cat_0 {background: #73bc5b;}
.project.project_cat_1 {background: #ffb300;}
.project.project_cat_2 {background: #459fc5;}

.project.project_cat_4 {background: #4B60F6;}
.project.project_cat_5 {background: #A5ADFB;}
.project.project_cat_6 {background: #FF3366;}
.project.project_cat_7 {background: #0E0E52;}
.project.project_cat_8 {background: #9A65F8;}

.project.project_cat_9 {background: #73bc5b;}
.project.project_cat_10 {background: #f6b300;}
.project.project_cat_11 {background: #459fc6;}

.project_cat_0::after {
	content: " ";

	position: absolute; right: 20px; top: 5px;
}

.project_cat_1::after {
	content: " ";
	position: absolute; right: 20px; top: 5px;
}

.project_cat_2::after {
	content: " ";
	position: absolute; right: 20px; top: 5px;
}


.zdhcprojects_project_timespan {
    background: #DEF;
    font-size: 10px;
    overflow: hidden;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 20px;
    white-space: nowrap;
    width: 100%;
    margin-left: 7px;
}

.zdhcprojects_task_item_timespan {
    background: #DDD;
    font-size: 10px;
    overflow: hidden;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 20px;
    white-space: nowrap;
}

.week_item {
    width: 20px;
    height: 20px;
    border: 1px solid #EEE;
    background: #CCC;
    box-sizing: border-box;
    font-size: 11px;
    text-align: center;
}

.weekheader {
    display: flex;
}

.name_placeholder { width: 170px; }
.col_projectname {
    width: 170px;
    padding: 10px;
    position: relative;
}

.col_taskname {
    width: 170px;
    padding: 10px;
    padding-left: 30px;
}

.zdhcprojects_calendar_outer .options {
    opacity: 0;
    transition: opacity 0.5s;
    top: 10px;
    position: absolute;
    left: -40px;
    background: #FFF;
    border-left: 1px solid #DDD;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #DDD;
}

.zdhcprojects_project_header .options {
    left: -85px;
}

.zdhcprojects_project_header,
.zdhcprojects_task_item { position: relative; }

.zdhcprojects_task_item:hover .options,
.zdhcprojects_project_header:hover .options {
    opacity: 1;    
}

@media(max-width: 1400px)
{
    .zdhcprojects_calendar_outer {
        width: 100%;
    }
    #todaymarker { display: none; }
    .zdhcprojects_task_item_timespan { display: none; }
    .weekheader { display: none; }
    
    .zdhcprojects_project_timespan {
        margin-left: 0px !important;
        width: 100% !important;
    }
}

.options > .fa {
    padding: 2px;
    margin: 3px;
}

.form_big_outer  { max-width: 800px; margin: auto; background: #FFF; padding: 30px; }

.form_outer,
.taskedit_form,
.taskcreate_form,
.projectedit_form { max-width: 500px; margin: auto; }


span.userlistitem {
    padding: 2px 8px;
    margin: 2px;
    background: #ACD;
    border-radius: 10px;
    opacity: 0.5;
    transition: opacity 0.5s, transform 0.5s;
    transform: scale(1.0);
    white-space: nowrap;
    display: inline-block;
    max-width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
    
}

span.userlistitem .fa { padding-right: 5px; }

span.userlistitem:hover {
    opacity: 1;
    transform: scale(1.2);
    z-index: 100;
    position: relative;
    max-width: 300px;
}

input#searchuserbox {
    font-size: 12px;
    height: 26px;
    background: #EEE;
    border: 0px;
}

.userselectoption {
    border-radius: 10px;
    padding: 2px 10px;
    margin: 2px;
}

.userselectoption .fa {
    margin-right: 5px;
}

.userselectoption .fa-close { cursor: pointer; }

.selectableuserslist .userselectoption {
    background: #007bff;
    border: 1px solid #EEE;
    color: #FFF;
    cursor: pointer;
}

div#todaymarker {
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 2px;
    background: rgba(1,0,0,0.5);
    z-index: 100;
    opacity: 0.4;

}

.task_archive_outer {
    width: 600px;
}

.task_archive_item {
    padding: 30px 10px;
    border-bottom: 1px solid #DDD;
}


.projectsContainer {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.projectOuter {
    border-top: 1px solid #cecece;
}

.zdhc_projects .col {
    padding-right: 0;
    padding-left:0;
}

.project, .task {
    transition: max-width 0.5s;
    position:relative;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.task {
/*    background-color: #888;*/
border: 2px solid #888;
color: #000;
    padding: 3px 20px 3px 20px;
    margin-left: 10px;
    white-space: nowrap;
}


.project_cat_0 .task {border: 2px solid #73bc5b;}
.project_cat_1 .task {border: 2px solid #ffb300;}
.project_cat_2 .task {border: 2px solid #459fc5;}

.project_cat_4 .task {border: 2px solid #4B60F6;}
.project_cat_5 .task {border: 2px solid #A5ADFB;}
.project_cat_6 .task {border: 2px solid #FF3366;}
.project_cat_7 .task {border: 2px solid #0E0E52;}
.project_cat_8 .task {border: 2px solid #9A65F8;}

.project_cat_9 .task {border: 2px solid #73bc5b;}
.project_cat_10 .task {border: 2px solid #f6b300;}
.project_cat_11 .task {border: 2px solid #459fc6;}

.project {
    background-color: #1c4374;
    white-space: nowrap;
}

.task:hover,
.project:hover {    overflow: visible;}

.task:hover span,
.task:hover strong { cursor: pointer; }

.project:hover span,
.project:hover strong {     text-shadow: 0px 0px 3px #000; }
.task a.gototask { border: 1px solid #333; color: #333; border-radius: 10px; margin-left: 30px; padding: 2px 20px }
.project a.gotoproject { border: 1px solid #FFF; color: #FFF; border-radius: 10px; margin-left: 30px; padding: 2px 20px }
.project:hover a.gotoproject { border: 1px solid #333; color: #333; }
.project.project_cat_3:hover a.gotoproject { border: 1px solid #FFF; color: #FFF; }

.optionbar {
    display: none;
    position: absolute;
    left: -130px;
    top: -6px;
    background-color: rgb(206,206,206,0.5);
    border-radius: 10px;
    padding: 5px 10px;
}

.optionbar.small {
    left: -80px;
}

.optionbar .options {
    display: flex;
}

.projects {
    position: relative;
}

.projects_current {
    left: 40.5%;
    position: absolute;
    top: 0px;
    height: 100%;
    width: 1px;
    background: rgba(0,0,0,0.3);
}