/* Workflow Design system */

* {

    font-family: 'Open Sans', Helvetica, Arial, sans-serif;

}

html,body {

    padding: 0;
    margin: 0;
    background: #FAFAFA;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 400;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;

}

select,input,button { outline: none; }

/* Login form */

.login-container {

    max-width: 400px;
    margin: auto;
    margin-top: 6%;
    text-align: center;

}

.login-container img {

    margin-bottom: 12%;

}

.login-wrapper {

    background-color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    padding-bottom: 8px;

}

.login {

    margin: 24px;

}

.login h1 {

    padding-top: 32px;
    color: #171A27;
    font-weight: 600;
    font-size: 1.25em;
    padding-bottom: 16px;

}

.login label {

    font-size: 0.75em;
    color: #747990;
    font-weight: 100;
    margin-bottom: 4px;

}

.login input {

    background-color: #FFF;
    border: 1px solid #D5D8E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 16px;
    height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 0.875em;

}

.login input:hover {

    border: 1px solid #A6AABF;

}

.login input:focus {

    outline: none;
    border: 2px solid #FCB900;

}

.login input:last-of-type {

    margin-bottom: 32px;

}

.login-container p {

    font-size: 0.875em;
    color: #747990;
    font-weight: 100;

}

/*Error handlers*/

.notifyWrapper {

    z-index: 999;
    position: fixed;
    top: 3%;
    right: 2%;

}

.notify_body {

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 16px;

}

/* Sidebar */

.workflow-container {

    background-color: #FAFAFA;
    display: flex;
    flex-direction: row;
    height: 100%;

}

.workflow-menu-wrapper {

    display: flex;
    flex-direction: column;
    width: 12.5%;
    height: 100%;
    overflow-y: hidden;
    max-width: 240px;
    min-width: 200px;
    font-size: 0.875em;
    background: #171A27;
    position: relative;

}
.workflow-container .hamCont{
    display:none;
    position: fixed;
    left: 10px;
    top: 24px;
    cursor: pointer;
    z-index: 999;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #3333336e;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.workflow-menu-wrapper:hover {

    overflow-y: auto;

}

.workflow-menu-logo {

    margin-top: 24px;
    margin-bottom: 16px;
    margin-left: 24px;

}

.workflow-menu {

    margin-top: 8%;
    color: #D5D8E8;
    display: flex;
    flex-direction: column;

}

.workflow-menu li {

    list-style-type: none;
    padding: 16px;
    padding-left: 24px;

}

.workflow-menu li:hover, li.active{

    background-color: #282B39;

}

.divider {

    width: 100%;
    height: 1px;
    background-color: #424653;

}

.workflow-menu-button {

    width: 80%;
    margin: 0 auto;
    margin-top: 40px;

}

.workflow-menu-button .button-large {

    height: 40px;

}

.workflow-menu-favorite {

    display: flex;
    flex-direction: column;
    margin-left: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 24px;
    color: #D5D8E8;
    font-size: 0.875em;
    font-weight: 400;

}

.workflow-menu-projects {

    display: flex;
    flex-direction: column;
    margin-left: 24px;
    margin-top: 8px;
    margin-right: 24px;
    color: #D5D8E8;
    font-size: 0.875em;
    font-weight: 400;

}

.workflow-menu-favorite .headline,.workflow-menu-projects .headline {

    color: #747990;
    font-size: 1em;

}

.workflow-menu-favorite p {

    color: #D5D8E8;
    font-weight: 400;
    font-size: 1em;

}

.workflow-menu li.active {

    color: white;

}

.navItemText {

    font-size: 1em;
    font-weight: 200;

}

.small-indicator {

    width: 8px;
    height: 8px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: 3px;
    margin-bottom: 8px;
    margin-right: 8px;

}

.icon_framer {

    float: left;

}
.icon_framer svg {

    float: left;
    margin-right: 12px;

}


.icon_framer:after {

    content: "";
    display: block;
    clear: both;

}

/* Obsah */

.workflow-content-wrapper {

    display: flex;
    flex-direction: column;
    width: 87.5%;
    height: 100%;
    overflow: hidden;

}

.workflow-content-wrapper h1 {

    font-size: 1.25em;
    padding-top: 24px;
    padding-left: 24px;
    font-weight: 600;
    padding-bottom: 24px;
    margin: 0;

}

.workflow-content{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/*Projects cards*/

.projectList {

    display: flex;
    flex-wrap: wrap;
    margin-top: 1%;
    padding: 16px;
    overflow-y: auto;
    max-height: 90%;

}

.projectList:hover {

    overflow-y: auto;

}

.projectItem-wrapper {

    display: flex;
    flex-direction: column;
    min-width: 240px;
    background-color: #FFF;
    margin-bottom: 16px;
    margin-right: 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    padding: 16px;

}

.projectItem-wrapper:hover {

    -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);

}

.projectItem {

    display: flex;
    width: 100%;
    margin-bottom: 16px;

}

.projectItem .content {

    overflow: hidden;

}

.projectItem .title {

    font-size: 0.875em;
    position: relative;

}

.projectItem .menu{
    position: absolute;
    width: 48px;
    height: 48px;
    top: -12px;
    right: -18px;
    text-align: center;
    user-select: none;
    color: #171A27;
    font-weight: 700;
}
.projectItem .menu:hover { color: #DD215A; }
.projectItem .description{

    color: #747990;
    padding-top: 4px;
    font-size: 0.75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.project_icon {

    width: 44px;
    height: 36px;
    float: left;
    background-color: #53A1EF;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: 300;
    font-size: 1.25em;
    color: #FFF;
    text-align: center;
    padding-top: 8px;
    margin-right: 8px;

}

/* New project */

.ui-dialog {

    padding: 24px;

}

.ui-dialog .ui-dialog-titlebar {

    padding: 0;
    padding-top: 8px;
    padding-bottom: 32px;

}

.ui-dialog .ui-dialog-content {

    padding: 0;
    overflow: hidden;

}

.ui-dialog-content button {
    margin-left: 16px;

}

.ui-button:hover { border: 0; color: #FFF; }

.ui-dialog .ui-dialog-titlebar-close {

    top: 10%;

}

.ui-dialog input {

    background-color: #FFF;
    border: 1px solid #D5D8E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 16px;
    color: #424653;
    height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 0.875em;

}

.ui-dialog .ui-dialog-titlebar-close {

    right: -2%;

}

.ui-dialog .ui-dialog-buttonpane {

    border: 0;

}

.ui-button {

    border: 0;
    background: none;

}

.dialogNewProject input[type=text] {

    margin: 0;

}

.ui-dialog input:hover {

    border: 1px solid #A6AABF;

}

.ui-dialog input:focus {

    outline: none;
    border: 2px solid #FCB900;

}

.ui-dialog-title {

    font-size: 1.125em;
    color: #171A27;
    font-weight: 600;
    padding-left: 16px;

}

.dialogNewProject label {

    font-size: 0.75em;
    color: #747990;
    font-weight: 100;

}

.dialogNewProject textarea {

    background-color: #FFF;
    border: 1px solid #D5D8E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 16px;
    color: #424653;
    min-height: 96px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    font-size: 0.875em;

}

.dialogNewProject textarea:focus {

    outline: none;
    border: 2px solid #FCB900;

}

.dialogNewProject input[type=radio] {

    height: auto;
    cursor: pointer;

}

.dialogNewProject div.visibleRadio {

    margin-top: 32px;

}
.dialogNewProject >*{
    box-sizing: border-box;
}
.visibleRadio label {

    cursor: pointer;
    font-size: 0.875em;
    color: #424653;
    margin-left: 8px;
    margin-top: 2px;

}

.visibleRadio input[type="radio"]:checked+label {

    font-weight: 600;

}

.ui-widget-overlay {

    background: #000;

}

.taskNewItem {

    width: 272px;
    padding: 16px;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}

.taskName_input {

    font-size: 0.875em;
    font-weight: 900;
    margin-left: -2px;

}

.hasDatepicker {

    color: #747990;
    font-size: 0.75em;

}

/* Task list */

.projectTool-wrapper {

    width: 100%;
    background-color: #FFF;
    display: flex;
    border-bottom: 1px solid #F2F3F8;

}

.projectTool-headline{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 24px;
}
.projectTool-headline h1{
    padding-left: 5px;
}
.projectTool-headline .icon{
    background-position: center center;
    width: 15px;
    height: 20px;
}
.projectTool-headline .icon.lock_icon{
    background: url("../img/licon_lock.svg");
    background-repeat: no-repeat;
}

.projectTool-wrapper .occ-ul-cont  {

    margin-top: 22px;
    margin-right: 32px;

}

.userTool-wrapper {

    display: flex;
    flex-direction: row;
    margin-top: 20px;
    padding-right: 24px;

}

.notifications,.app_matrix {

    width: 32px;
    height: 32px;
    background: none;
    border: 0;

}

.indicator {

    position: absolute;
    margin-left: 16px;
    background-color: #DD215A;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: -32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.75em;

}

.occ-ul-ico .remIco {

    background-color: #DD215A;
    padding: 4px;
    margin-top: -4px;
    margin-right: -4px;
   
}
.occ-ul-ico.observer{
    border: 2px solid red;
    /*background-color: transparent !important;*/
    background: url("/assets/icons/eye.svg") center center no-repeat;
    background-size: 130%;
}
.occ-ul-ico.observer:hover{
    color:transparent;
}


.occ-ul-ico .remIco img {

    margin-top: 2px;

}


.user_medalion {

    width: 32px;
    height: 32px;
    background: #D5D8E8;
    border: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-left: 12px;
    color: #FFF;

}

.projectTool {

    background-color: #FFF;
    z-index: 1;
    display: flex;
    flex-direction: row;
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 1px;
    padding-right: 24px;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);

}

.toolTab {

    flex: 1;

}

.toolTab button {

    padding-bottom: 16px;
    background-color: #FFF;
    border: 0;
    margin-right: 32px;
    color: #424653;

}

.toolTab button:hover,.toolTab button.active {

    color: #171A27;
    padding-bottom: 15px;
    border-bottom: 1px solid #171A27;

}

.tools {

    margin-top: -4px;

}

.tools select {

    border: 0px;
    color: #747990;
    background: white;

}

.projectDetail {

    height: 100%;

}
.projectDetail .tab{
    overflow: hidden;
    position: relative;
}

.containerList {

    margin-top: 16px;
    overflow: auto;
    height: 100%;
    position: relative;
    /*padding: 10px;*/
}

.containerList {

    display: flex;
    margin-bottom: auto;
    flex-direction: row;
    width: 100%;
    height: 96%;

}

.containerList .container {

    display:inline;
    margin-left: 0px;
    margin-right: 0px;
    flex: 0 0 305px;
    min-height: 150px;
    width: 305px;
    /*max-height: 100%;*/
    display:flex;
    flex-direction: column;
    padding: 5px 10px 10px 10px;


}

.container .taskList {

    width: 317px;
    overflow-y: hidden;
    padding-left: 16px;
    padding-bottom: 24px;
    /*max-height: 40%;*/

}

.container .taskList:hover {

    overflow-y: auto;

}

.containerList h4 {

    color: #171A27;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 16px;
    margin-left: 16px;

}

.input_title input {

    margin-left: 16px;
    width: 100%;
    margin-bottom: 12px;
    margin-top: -5px;
    background-color: #FFF;
    border: 1px solid #D5D8E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 32px;
    padding-left: 8px;
    padding-right: 16px;
    font-size: 0.875em;
    font-weight: 600;

}

.input_title input:hover {

    border: 1px solid #A6AABF;

}

.input_title input:focus {

    outline: none;
    border: 2px solid #FCB900;

}

.container .addTask {

    width: 100%;
    max-width: 305px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #FFF;
    color: #171A27;
    font-weight: 400;
    font-size: 0.875em;
    margin-bottom: 16px;
    margin-left: 16px;
    margin-right: 16px;
    float: left;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    transition: background-color 0.5s ease;

}

.addTask img {

    margin-right: 12px;

}

.container .addTask:hover {

    -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    background-color: #F5FFFB;

}

.taskList .taskItem {
    position: relative;
    max-width: 305px;
    box-sizing: border-box;
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    padding: 16px;
}
.taskItem .statusIndicator{
    position: absolute;
    right:0;
    bottom: 0;
    width: 4px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.statusIndicator.status_1{
    background-color: #f16a6a;
    height: 25%;
}
.statusIndicator.status_2{
    background-color: orange;
    height: 50%;
}
.statusIndicator.status_3{
    background-color: #8787f1;
    height: 75%;
}
.statusIndicator.status_4{
    background-color: green;
    height: 100%;
    border-top-right-radius: 15px;
}
.taskList .taskItem:last-child{
    margin-bottom: 200px;
} 
.activityIndicator{
    position: absolute;
    right:4px;
    bottom: 0;
    width: 4px;
    height: 100%;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background-color: lightgray;
}
.activityIndicator .bar{
    position: absolute;
    width:100%;
    bottom: 0;
}
/*.activityIndicator .bar.allocated{
    height: 100%;
    background-color: green;
}*/
.activityIndicator .bar.activity{
    background-color: green;
}
.activityIndicator .bar.activity.overTop{
    background-color: red;
}


.taskItem .project_title {

    font-size: 0.75em;

}

.taskItem:hover {

    -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.16);

}

.taskItem .project_header {

    font-size: 0.875em;
    color: #171A27;

}

/*TASKITEM NEW*/

.taskItem-new {

    max-width: 272px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 16px;
    padding-top: 8px;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    margin-top: 32px;
    margin-left: 32px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-left: 4px solid #DD215A;

}

.taskItem-new .project_title {

    display: flex;
    flex-direction: row;
    flex: 1;
    color: #747990;

}

.taskItem-new .project_title img {

    margin-right: 6px;

}

.taskItem-new .project_title p {

    font-size: 0.75em;

}

.taskItem-new .project_header {

    display: flex;
    flex-direction: row;

}

.taskItem-new .project_headline {

    font-size: 1em;
    color: #171A27;

}

.taskItem-new .project_headline h4{

    margin: 0;
    font-weight: 400;
    font-size: 0.875em;

}



.project_priority {

    padding: 4px 8px 6px 8px;
    max-height: 16px;
    font-size: 0.875em;
    color: #424653;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: 600;

}

.project_footer {

    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    margin-top: 16px;
    justify-content: space-between;

}

.project_info {

    display: flex;
    flex-direction: row;

}

.project_info img {

    margin-right: 6px;

}

.project_info p {

    margin-top: 16px;
    margin-right: 16px;
    font-size: 0.75em;
    color: #171A27;

}

.project_info p:last-of-type {

    margin-right: 0;

}

.newMember-wrapper {

    display: flex;
    flex-direction: row;
    margin-top: 16px;

}

.newMember-input {

    flex: 1;

}

.newMember-input input {

    height: 32px;
    border: 1px solid #D5D8E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 88%;

}

.newMember-close button {

    background: none;
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;

}

/*NEW PROJECT ITEM*/

.projectItemNew {
    display: flex;
    min-width: 240px;
    background-color: none;
    margin-bottom: 16px;
    margin-right: 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px dashed #D5D8E8;
    justify-content: center;
    text-align:center;
    padding: 16px;

}

.projectItemNew img {

    margin-right: 12px;

}

.projectItemNew p {

    margin: auto;
    color: #171A27;

}

.projectItemNew:hover {

    border: 1px solid #D5D8E8;

}

.projectItem-footer {

    border-top: 1px solid #EBECF4;

}

.projectItem-footer .occ-ul-cont  {

    margin-top: 16px;

}

.occ-ul-cont-tiny .occ-ul-ico {

    width: 34px;
    height: 34px;

}

#recentList p {cursor:pointer;}
#recentList p:hover { color: #fff; }

.occ-ul-list {

    margin-left: 0px;
}

.occ-ul-cont-tiny .occ-ul-ico:first-of-type {

    margin-left: 0px;

}

.occ-ul-cont-tiny .occ-ul-placeholder {

    width: 22px;
    height: 22px;
    color: #747990;
    border: 1px #D5D8E8 dashed;

}

.occ-ul-placeholder:hover {

    background-color: #F7F7FA;

}

.occ-ul-cont {

    margin-bottom: 0px;

}

.taskItem.ui-sortable-helper {

    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.32);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.32);

}

.ui-state-highlight {

    background-color: #FCF2D0 !important;
    border: 1px dashed #FDD668;

}

.newContainer {

    color: #171A27;
    text-align: center;
    border: 1px dashed #D5D8E8;
    padding-top: 12px;
    padding-bottom: 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-top: -4px;
    border-radius: 4px;

}

.newContainer:hover {

    background-color: white;

}

.container .title_newCont {

    color: #171A27;
    font-size: 0.875em;

}

.newContainer input {

    margin-left: 8px;
    width: 95%;
    margin-bottom: -4px;

}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {

    width: 100%;
    display: flex;
    justify-content: space-between;

}

.ui-dialog .ui-dialog-buttonpane button {

    margin: 0;

}

.ui-widget.ui-widget-content {

    border: 0;

}

/*KALENDÁŘ*/

#calendar {

    background-color: #FAFAFA;
    margin-left: 24px;
    margin-top: 16px;

}

.fc-button-primary {

    background: #171A27;
    border: 0;

}

.fc-today-button {

    background-color: #50BC92;

}

#unassigned {

    overflow-y: scroll;

}

#unassigned .input_title h4 {

    margin-left: 16px;
    margin-bottom: 16px;
    margin-top: 16px;

}

.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {

    border-color: #D5D8E8;

}

.fc-unthemed th {

    background-color: #F7F7FA;
    color: #747990;
    height: 40px;
    vertical-align: middle;

}

.fc-toolbar h2 {

    font-size: 1.5em;
    font-weight: 400;
    color: #171A27;

}

.fc-unthemed td.fc-today {

    background-color: #FFF7E2;

}

.fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active {

    background-color: #424653;

}

.fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-mirror-skeleton td {

    color: #424653;
    font-weight: 400;
    font-size: 1em;

}

.fc-day-number {

    font-size: 0.875em;
    font-weight: 100;
    margin-top: 8px;
    margin-bottom: 8px;

}

.sidePanel {

    background-color: #FFF;
    max-width: 400px;
    width: 20%;
    padding: 24px;
    display: flex;
    flex-direction: column;

}

.sidePanel h4 {

    font-weight: 600;
    color: #171A27;
    font-size: 1.125em;
    margin-bottom: 16px;

}

.sidePanel label {

    display:block;
    text-align: left;
    color: #747990;
    font-size: 0.75em;
    font-weight: 400;
    margin-top: 16px;

}

.sidePanel p {

    margin-bottom: 32px;
    font-size: 0.875em;
    color: #424653;

}

.ui-icon-closethick,.occClose {

    background-image: url('../img/dicon_close.svg')!important;
    background-position: unset;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-top: 16px;

}

.occTaskOptions {
    background-image: url('../img/dicon_color.svg') !important;
    background: no-repeat center;
    background-position: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-top: 16px;
    position: absolute;
    right: 6%;
    z-index: 1;
}
.optMenuWrapper{
    position:relative;
    height: 1px;
    display:none;

}
.optMenu{
    position: absolute;
    top:15px;
    border: 1px solid lightgray;
    background-color: white;
    white-space: nowrap;
    right: 5px;

}
.optMenu>div{
    padding: 2px;
    cursor: pointer;
}
.optMenu>div:hover{
    background-color: lightgray;
}
.optMenuWrapper.active{
    display:block;
}
.occClose {

    position: absolute;
    right: 1%;

}

.ui-icon-trash {

    background-image: url('../img/picon_trash.svg') !important;
    background-position: unset;
    margin-top: 2px;

}

.ui-dialog .ui-dialog-titlebar-close {

    width: 24px;
    height: 24px;

}

.ui-button-icon-only .ui-icon {

    top: 40%;
    left: 40%;

}

.visibleRadio label img {

    margin-right: 12px;

}

.newTask_pickCont { 
    width: 99%;
    margin-top: 70px; 
}

/*Task detail*/

.occModal {



}

.occDialog {

    max-width: 860px;
    width: 100%;
    font-weight: 300;
    height: 80%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0;
    position: absolute;

}

.taskDetail {

    height: 100%;

}

.taskDetail h2 { padding-left: 24px; padding-right :24px; padding-top: 24px; }

.occDialogTitle {

    font-weight: 600;
    font-size: 1.25em;
    margin: 24px;

}

.task-row {

    display: flex;
    flex-direction: row;
    align-items: center;

}

.task-row { padding: 16px; padding-left: 24px; padding-right: 24px; padding-bottom: 8px; }
.task-row .props{
    max-width: 80%;
}
.props {align-items:center;position: relative;}
.template_button_section{ margin: 0;}
.props>*{margin-bottom:0;margin-right:0;}

.occDialog .occ-ul-placeholder {

    margin-left: 0;

}

.repeat-attach button {

    height: 32px;
    padding-left: 16px;
    padding-right: 16px;
    border: 0;
    background: white;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #424653;
    cursor: pointer;

}
.msg-notesInputWrapper {

    position: absolute;
    width: 100%;
    max-width: 860px;
    /*height: 89px;*/
    background: #fff;
    padding: 24px;
    padding-bottom: 5px;
    box-sizing: border-box;
    align-items: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #F7F7FA;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    align-items: baseline;

}

.msg-notesInputWrapper input {
    height: 32px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right: 10px;
    box-sizing: border-box;
    /*margin-bottom: 5px;*/
}
.msg-noteInputWrapper .msg-noteinput{
    width:100%;
}


.occDialog{
    overflow: hidden;
}
.msg-notesInputWrapper{
    /*padding: 24px;*/
    position: relative;

}
.msg-notesInputWrapper .user_medalion {

    margin-left: 0px;
    margin-right: 12px;

}
.taskDetail .msg-send{

}
.taskDetail{
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    box-sizing: border-box;
}
.taskDetail .taskDetail_content{
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
}
.subTaskList{
    max-height: none;
}
.msg-messagebox {
    height: auto;
}
.occDialog label {

    font-size: 0.75em;
    color: #747990;

}

label {

    text-align: left;
    width: 160px;

}

.occDialog select {

    width: auto;
    border: 1px solid #FFF;
    max-width: 175px;
    width: 100%;
    padding-left: 12px;
    height: 32px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #FFF;

}

.occDialog select:hover {
    border: 1px solid #D5D8E8;
}

.props input {

    width: 80px;

}

.taskDetail textArea {

    border: 1px solid #FFF;
    box-sizing: border-box;
    padding: 8px;
    resize: vertical;

}
.props #desc_length{
    display:none;
    position: absolute;
    bottom: -15px;
    right: 5px;
}
.props:focus-within #desc_length{
    display:block;
}

.repeat {

    min-width: 80% !important;
    width: 80% !important;

}

.cal-container {

    display: flex;
    flex-direction: row;
    align-items: center;

}

.cal-icon {

}

.cal-container input{

    border: 0;

}

.subTasks {

    width: 100%;
    /*margin-left: 32px;*/

}

.subTask input { border: 0; }

.taskDetail textArea:hover { border: 1px solid #D5D8E8;box-sizing: border-box; }

.msg-notebox {

    border: 0;
    height: 100%;
    background: #F7F7FA;

}

.msg-messagebox { background: #F7F7FA; }

.msg-notebox h5 {

    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    font-size: 1em;

}

.noteFeed{
    display:flex;
    margin: 16px;
    margin-bottom: 32px;
    padding: 5px;
    /*flex-wrap: wrap;*/
}
.replyWrapper{
    padding-left: 48px;
}
.replyWrapper .noteFeed{
    margin: 2px;
    padding: 2px;
}
.noteFeed.activeReply{
    background-color: lightgrey;
    opacity: 0.9;
}
.noteFeed .noteMedalion{
    width:60px;
    font-size: 0.875em;
    font-weight: 600;
    flex-shrink: 0;
}
.noteFeed .noteContent{
    display: flex;
    flex-direction: column;
}
.replyWrapper{
    width: 100%;
}
.noteContent .noteHeader{
    display:flex;
    margin-bottom: 5px;
    padding-top: 3px;
    align-items: baseline;
}
.noteHeader .noteH_name{
    width: 150px;
    white-space: nowrap;
    color: #171A27;
    font-size: 0.75em;
    font-weight: 400;
}
.noteHeader .noteH_date{
    color: #747990;
    font-size: 0.6em;
    font-weight: 200;
}
.noteMedalion .occ-ul-list{
    background-color: green;
}
.feedNote {
    color: #424653;
    font-weight: 300;
    font-size: 0.75em;
}
.noteReply{
    padding-left: 10px;
    cursor: pointer;
}

.permSection {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.taskName_input { font-weight: 400; }

.taskNewItem { background-color: white; }
.taskNewItem .taskName_input { height: 48px; margin-bottom: 0;}
.taskNewItem label { margin-top: 0; }
.taskNewItem .occ-ul-cont { margin-top: 16px; margin-bottom: 16px; }
.taskNewItem_dialog .occ-ul-cont { margin-top: 0; }
.taskNewItem_dialog label { margin-top: -13px; margin-left: 12px; }
.taskDetail_content .occ-ul-placeholder { margin-left: 8px; }

.task_notes{
    flex: 1;
}
.taskDetail_content{
    display:flex;
    flex-direction: column;
}

.repeatInfo {
    font-size: 0.875em;
    font-weight: 200;
    display: flex;
    align-items: center;
}

.repeatInfo img { margin-right: 8px; }

.actionBox-wrapper {
    position: unset;
    display:flex;
    background: #FFF;
    max-width: 860px;
}

.actionBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
}

.toggle_closed_tasks {
    background-color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-top: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    padding-right: 16px;
    width: 96%;
    color: #171A27;
    font-weight: 200;
    font-size: 0.875em;
    cursor: pointer;
}
.toggle_closed_tasks:hover {
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
}
/*Forcing*/

.no-marginTop img { margin-top: 0; }

.fluid { width: 100%; }

.white-font { color: white; }

.no-background { background-color: none; background: none; }

.conf-item { cursor: pointer; }

/* Buttons */

.button-large {

    text-align: center;
    font-size: 0.875em!important;
    font-weight: 400;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 48px;
    min-width: 120px;
    border: 0;
    cursor: pointer;
    padding-left: 16px;
    padding-right: 16px;

}

.taskNewItem .taskButtonAdd {

    width: 100%;
    margin: 0 auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: background-color 0.5s ease;
    background-color: #FCB900;
    color: #FFF;
    cursor: pointer;
    height: 56px;
    font-size: 0.875em;
    font-weight: 300;

}

.taskNewItem .taskButtonAdd:hover {

    background-color: #DD215A;

}

.button-small {

    text-align: center;
    font-size: 0.875em !important;
    font-weight: 300;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 32px;
    min-width: 96px;
    border: 0;
    cursor: pointer;

}


.primary {

    transition: background-color 0.5s ease;
    background-color: #FCB900;
    color: #FFF;

}
.button-small.primary:disabled{
    background-color: gray;
}
.secondary {

    background-color: #FFF;
    color: #747990;
    font-weight: 200;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);

}

.secondary:hover {

    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08);
    background: #FFF;
    color: #171A27;
    font-weight: 200;

}

.ghost {

    background: none;


}

.ghost:hover {

    transition: background 0.5s ease;
    background: rgba(0, 0, 0, 0.3);

}

.primary:hover {

    background-color: #DD215A;

}

.primary:focus {

    outline: none;
    border: 2px solid #FCB900;

}

.delete-btn {

    color: #DD215A;

}

.delete-btn:hover {

    color: #DD215A;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {

    font-family: 'Open Sans', Arial, Helvetica, sans-serif;

}

/*Scrollbar*/

/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f4f4f4;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#nav_wf_quick{
    display:flex;
}
#nav_wf_quick .inputbox{
    display:none;
    width:80%;
}
#nav_wf_quick .inputbox input{
    width:80%;
    height: 100%;
}
#nav_wf_quick:hover .navItemText{
    display:none;
}
#nav_wf_quick:hover .inputbox{
    display:block;
}
#nav_wf_quick input::-webkit-outer-spin-button,
#nav_wf_quick input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#nav_wf_quick input[type=number] {
    -moz-appearance: textfield;
}
button.trButton{
    background-color: transparent;
    border: none;
    cursor: pointer;
    stroke:#6c6c6c;
}
button.trButton:hover{
    stroke:#525252;
}
#nav_observed_tasks svg{
    width: 20px;
    height: 20px;
}