BODY {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F6F6F6;
    /*    text-align: center;*/
}

@font-face {
    font-family: 'Open Sans1';
    src: url('../fonts/OpenSans-Light.ttf');
    font-weight: 100;
    /*src: url('../fonts/OpenSans-Light.ttf') format('ttf');*/
    /*src: url('../fonts/OpenSans-Regular.ttf') format('ttf');*/
    /*src: url('../fonts/OpenSans-Semiobld.ttf') format('ttf');*/
    /*
    src: url('agencyr.eot?#iefix') format('embedded-opentype'),
         url('agencyr.woff') format('woff'),
         url('AGENCYR.TTF') format('truetype'),
         url('agencyr.svg#AgencyFBRegular') format('svg');*/
}

@font-face {
    font-family: 'Open Sans1';
    src: url('../fonts/OpenSans-Regular.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'Open Sans1';
    src: url('../fonts/OpenSans-Bold.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf');
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf');
    font-weight: 500;
}

div {
    
-webkit-font-smoothing: antialiased;
    
text-shadow: rgba(0,0,0,.01) 0 0 1px;
    
font-family: 'Open Sans1', Helvetica, sans-serif;
    
font-family: 'Roboto';
    
font-weight: 300;
    
font-size: 14px;
    
box-sizing: border-box;
    
cursor: default;
    
-webkit-user-select: none;
    
-moz-user-select: none;
    
-ms-user-select: none;
}
::-webkit-scrollbar {
    width: 9px;
    position: absolute;
}
 
::-webkit-scrollbar-track {
   /* border-top: 4px solid #E0E0E0;
    border-bottom: 4px solid #D0D0D0;*/
   /* background-color: whitesmoke; */
   /* box-shadow: 4px 1px 15px -6.8px rgba(0, 0, 0, 0.46) inset; */
   /* border-left: 2px solid rgb(213, 213, 213); */
}
 
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: hsl(0, 1%, 64%);
    position: absolute;
}


.user-page-jobs-activeJob {
    
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 300;
    box-sizing: border-box;
    cursor: default;
    
    -webkit-user-select: none;     
    -moz-user-select: none;
   -ms-user-select: none;    
    user-select: none;
}

.header {
    position: relative;
    /* height: 148px; */
    /* display: flex; */
    /* margin-bottom: 10px; */
    /* border-bottom: 6px solid rgb(255, 105, 70); */
    z-index: 1;
}


.topbar {
    background-color: rgb(230, 230, 230);
    /* min-height: 58px; */
    /* height: 58px; */
    /* position: relative; */
    /* display: flex; */
    /* width: 100%; */
    /* width: 100%; */
    position: relative;
    /* left: 0; */
    /* bottom: 0; */
    /* border-top: 5px solid rgb(161, 207, 228); */
    border-top: 5px solid rgb(255, 105, 70);
    border-bottom: 12px solid rgb(117, 110, 110);
    box-shadow: -8px 12px 23px -13px rgba(0, 0, 0, 0.53);
    z-index: 1;
}


.project-view-row {
    /* width: 950px; */
    height: 59px;
    /* margin: 10px; */
    max-width: 1000px;
    position: relative;
    margin: 10px auto;
    display: flex;
    /* background-color: white; */
}

.project-view-row-client {
    position: relative;
    display: none;
    /* width: 100%; */
    /* height: 30px; */
    /* padding: 4px 15px; */
    font-size: 14px;
    text-align: end;
}

.project-view-row-name {
    /* position: absolute; */
    top: 0px;
    /* left: 0; */
    background-color: rgba(255, 255, 255, 0.88);
    /* height: 64px; */
    width: 100%;
    padding: 0 12px;
    border: 1px solid rgb(161, 161, 161);
    line-height: 57px;
    height: 100%;
    border-right: 0;
    font-size: 18px;
    color: black;
    font-weight: 300;
    /* flex: 1; */
    overflow: hidden;
}

.project-view-row-categories {
    position: relative;
    /* left: 150px; */
    /* padding: 5px; */
    /* height: 94px; */
    width: calc(100% - 238px);
    background-color: rgba(237, 237, 237, 0.23);
    border: 1px solid rgb(166, 166, 166);
    /* border-left: 0; */
    display: flex;
    flex-wrap: wrap;
    /* overflow-wrap: normal; */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    /* justify-content: center; */
}

.project-view-row-categories {}

.project-view-row-categories-cell {
    position: relative;
    /* display: inline-block; */
    /* height: 80px; */
    /* min-width: 100px; */
    background-color: rgb(255, 255, 255);
    margin: 5px 5px;
    /* padding: 0px; */
    top: 0;
    min-width: 90px;
    max-width: 180px;
    /* float: left; */
    flex: 1;
}

.table-percentView {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(184, 184, 184);
}

.table-percentView-txt {
    position: relative;
    text-align: center;
    color: white;
    font-weight: 600;
}

.table-percentView-fg {
    position: absolute;
    height: 100%;
    background-color: rgb(83, 160, 194);
}

.project-view-row-categories-cell-table {
    position: relative;
    /* height: 22px; */
}

.project-view-row-categories-cell-remainingjobs {
    text-align: center;
    /* color: rgb(255, 105, 70); */
    /* font-size: 25px; */
    /* font-weight: 500; */
}

.remainingjobs-sml {
    font-size: 25px;    font-weight: 500;
}

.remainingjobs-big {
    font-size: 20px;    
    font-weight: 300;
}

.project-view-row-categories-cell-name {
    font-size: 11px;
    margin-bottom: 4px;
    text-align: center;
    background-color: rgb(228, 228, 228);
}

.project-view-page-header {
}

.project-view-page-name {
}

.project-view-page-details {
    display: flex;
    flex: 2;
    align-items: center;
    /* background-color: rgb(236, 236, 236); */
    padding: 0 10px;
}


.project-view-page-categories-cell-tables {
    height: 40px;
    /* border-top: 1px solid black; */
    margin-bottom: 3px;
}

.project-view-page-categories-cell-name .gen-page-cell {
    background-color: rgb(239, 239, 239);
    border-radius: 4px 4px 0 0;
    padding: 4px 10px;
    text-align: center;
    border-bottom: 2px solid rgb(69, 69, 69);
}

.job-reviewCell {
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    height: 123px;
    padding: 5px;
    padding-top: 0;
    max-width: 500px;
}

.job-reviewCell-priority {
    position: absolute;
    width: 25px;
    height: 25px;
    text-align: center;
    font-weight: 500;
    color: white;
    background-color: grey;
}

.job-reviewCell-state {
    position: absolute;
    top: 25px;
    width: 25px;
    /* background-color: rgb(175, 238, 98); */
    height: 93px;
}

.job-reviewCell-content {
    position: relative;
    width: calc(100% - 75px);
    background-color: rgb(250, 245, 241);
    height: 83px;
    left: 25px;
    border: 1px solid rgb(182, 182, 182);
    border-bottom: 0;
    padding: 4px 9px;
}

.job-reviewCell-user {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.job-reviewCell-notes {
    background-color: white;
    width: calc(100% - 85px);
    position: absolute;
    height: 35px;
    top: 83px;
    left: 30px;
    border: 1px solid rgb(182, 182, 182);
    border-top: 0;
    overflow: hidden;
    padding: 8px 10px;
    transition: height .1s ease-in;
    /* transition-duration: .3s; */
    transition-property: height, border-bottom;
    z-index: 100;
}

.job-reviewCell-elapsed {
    position: absolute;
    top: 0;
    right: 5px;
    background-color: white;
    height: 60px;
    width: 50px;
    border: 1px solid rgb(182, 182, 182);
    border-left: 0;
}

.job-reviewCell-deadline {
    position: absolute;    
    right: 5px;    
    bottom: 5px;
    background-color: #FFA894;    
    height: 58px;    width: 50px;
    border: 1px solid rgb(182, 182, 182);
    border-left: 0;
    border-top: 0;
}


.user-page-jobs-activeJob {
    /* max-width: 100% !important; */
    /* height: 180px; */
    /* display: flex; */
    margin-bottom: 20px;
    background-color: rgb(250, 250, 250);
    /* border-bottom: 2px solid rgb(116, 116, 116); */
    padding-bottom: 10px;
    background-color: rgb(227, 244, 207) !important;
}

.user-page-jobs-activeJob-header {
    background-color: #AFEE62!important;
    /* color: black !important; */
    border-radius: 10px 10px 0 0;
    padding: 5px 10px;
    text-align: center;
    border-bottom: 2px solid rgb(116, 116, 116) !important;
}

.user-page-jobs-remainingJobs {
    /* max-width: 50% !important; */
    /* margin: 0 10px 0 0; */
    /* float: left; */
    /* background-color: rgb(250, 250, 250); */
    /* border-bottom: 3px solid rgb(116, 116, 116); */
    /* padding-bottom: 10px; */
}

.user-page-jobs-remainingJobs-header {
    background-color: rgb(213, 213, 213);    
    /* border-radius: 10px 10px 0 0; */    padding: 5px 10px;    text-align: center;
    /* border-bottom: 2px solid rgb(83, 160, 194) !important; */
}

.user-page-jobs-waitingJobs-header {
    background-color: #F0DBA7!important;    
    /* color: black !important; */
    /* border-radius: 10px 10px 0 0; */    padding: 5px 10px;    text-align: center;
    /* border-bottom: 2px solid #F14219 !important; */
}

.job-reviewCellWithHeader {
    margin: 10px auto;
    max-width: 500px;
    /* height: 153px; */
    /* width: 240px; */
}

.user-page-jobs-waitingJobs {
    /* max-width: 100% !important; */
    /* margin: 0 0 0 10px; */
    /* float: left; */
    /* background-color: rgb(250, 250, 250); */
    /* border-bottom: 3px solid rgb(116, 116, 116); */
    /* padding-bottom: 10px; */
    /* display: none; */
}

.user-page {
    /* position: relative; */
    /* height: 100%; */
    /* display: flex; */
    /* justify-content: space-around; */
}

.user-page-leftPane {
    position: absolute;    
    /* display: flex; */
    width: 110px;    
    height: 100%;    border-right: 1px solid rgb(168, 168, 168);
}

.user-page-jobs-secondRow {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.project-view-page {
    /* position: relative; */
    /* top: 30px; */
    /* height: calc(100% - 30px); */
}


.menu-projects {
    background: url(../img_new/menu-projects.png);
}


.project-view-page .table-percentView-txt {
    font-size: 30px;
}

.project-view-row-leftColumn {
    transform: translateZ(0);
    flex-wrap: wrap;
    max-width: 280px;
    min-width: 280px;
    background-color: #FFFFFF;            color: rgb(50, 99, 121);
    /* border-top-left-radius: 10px; */
    transition: max-width 0.3s cubic-bezier(0.4, 0, 1, 1);
    transition-property: max-width, background-color, color;
}

._menu-button {
    height: 100%;      font-size: 16px;      line-height: 30px;      /* font-weight: 400; */      padding: 0 10px;      background-color: rgb(244, 244, 244);      border-right: 1px solid rgb(199, 199, 199);      overflow: hidden;      align-self: flex-end;      vertical-align: super;
}

.gen-page-cell {
    position: relative;    
    min-width: 300px;    
    max-width: 33%;
    flex: 1;
    margin: 10px 10px;    
    background-color: rgb(255, 255, 255);    
    padding: 0px 0px 5px 0px;    
    /* padding: 5px; */
    border-bottom: 2px solid rgb(134, 134, 134);
    /* display: flex; */
    /* flex-wrap: wrap; */
    transition: height 1s ease-in;
}

.admin-page-state {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.gen-page-cell-header {
    background-color: rgb(161, 207, 228);    
    /* border-radius: 10px 10px 0 0; */    padding: 4px 10px;    text-align: center;    
    border-bottom: 2px solid rgb(83, 160, 194);
    color: white;
    font-weight: 600;
    /* display: flex; */
}

.job-reviewCellWithHeader-header {
    position: relative;
    display: flex;
    /* padding: 2px 10px; */
    margin: 5px;
    margin-bottom: 0;
    /* background-color: rgb(224, 224, 224); */    border-radius: 4px 4px 0 0;    
    /* padding: 4px 10px; */    
    /* text-align: center; */    
    /* border-bottom: 2px solid rgb(69, 69, 69); */
    background-color: rgb(221, 221, 221);
    align-content: space-around;
}

.job-reviewCellWithHeader-header-category {
    background-color: rgb(240, 240, 240);    
    padding: 1px 9px;
    min-width: 110px;
    text-align: end;
    color: black;
    height: 100%;
    align-self: flex-end;
    border-left: 1px solid rgb(136, 136, 136);
}

.job-reviewCellWithHeader-header-projectName {
    flex: 2;
    /* border-right: 1px solid rgb(136, 136, 136); */
    /* background-color: rgb(221, 221, 221); */
    padding: 1px 7px;
}

.job-reviewCellWithHeader .job-reviewCell {
    margin-top: 0;
}

.table-percentView:hover {
    background-color: #D5D5D5;
}

.project-view-row-categories-cell-remainingjobs:hover {
    /* color: rgb(83, 160, 194); */
}

.admin-page-category {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
}

.gen-page-cell-header:hover {
    /* background-color: #FFA894; */
}

.logo img {
    height: 100%;
}

.admin-page-user {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.job-reviewCell {}

.job-reviewCell:hover {
    /* padding: 0; */
    /* border: 5px solid black; */
    border-top: 0;
    /* border-right: 25px solid white; */
}

.job-reviewCell-notes:hover {
    height: 150px;
    z-index: 100;
    border-bottom: 10px solid rgb(118, 118, 118);
    /* background-color: rgb(218, 245, 255); */
    opacity: 0.9;
    /* width: 100%; */
    overflow: auto;
}

.project-view-row-leftColumn:hover {
    max-width: 600px;
    /* min-width: 280px; */
    background-color: #FF6946;
    color: white;
}

.job-reviewCellWithHeader:hover {
    z-index: 100;
    /* background-color: blueviolet; */
    /* padding: 10px 0px; */
    /* margin-right: 50px; */
}

.job-reviewCellWithHeader-header:hover {
    background-color: rgb(255, 105, 70);
    color: white;
}

.job-controls-active {
    display: initial;
}

.job-controls {
    position: absolute;
    right: 5px;
    bottom: 6px;
    width: 51px;
    height: 117px;
    z-index: 100;
    background-color: white;
    /* display: flex; */
}

.job-controls-item {
    background-color: white;
    margin-bottom: 2px;
    padding: 0px 2px;
    border: 1px solid rgb(194, 194, 194);
    /* border-left: 0; */
    height: 22px;
    display: flex;
    font-size: 13px;
}

.job-controls-item:hover {
    background-color: rgb(240, 240, 240);
}

.job-controls-admin {
    /* display: flex; */
}

.jobs-topbar-menu-button-active {
}

.jobs-topbar-menu-button:hover {
}

.topbar-add-menu {
    position: absolute;
    left: 20px;
    bottom: -12px;
    /* height: 19px; */
    display: flex;
    z-index: 100;
    font-size: 15px;
    /* border-bottom: 2px solid #756E6E; */
}

.topbar-add-menu-button {
    background-color: rgb(244, 244, 244);
    color: black;
    transition: background-color .2s ease-in-out;    
    transition-property: color, background-color;
    padding: 2px 6px;
}

.topbar-add-menu-button:hover {
    background-color: rgb(255, 105, 70);
    color: white;
}

.topbar-mainpanel {
    position: relative;
    height: 28px;
    background-image: url(../img/noisy-texture-100x100.png)
;
    /* background-color: #A6D1E5; */
}


@media (max-width: 750px) {
  .page-content{
    padding: 20px 0px;   
  }
}

.job-row-expand {
    /* height: 100px; */
    max-height: 200px;
    /* overflow-y: overlay; */
    white-space: normal;
    line-height: 20px;
    border-bottom: 1px solid rgb(155, 151, 151);
    border-top: 1px solid rgb(155, 151, 151);
    background-color: rgb(0, 0, 0) !important;
}

.input-dropdown:hover {
    background-color: rgb(233, 233, 233);
    /* color: white; */
}

.graph-mark-weeks {
    border-left: 1px solid rgb(169, 169, 169);
    position: absolute;
    height: 100%;
    padding-left: 1px;
    font-size: 10px;
    line-height: 12px;
}

.graph-mark-wrapper {
    position: absolute;
    width: 100%;
}

.graph-mark-now {
    position: absolute;
    border-left: 1px solid rgb(41, 41, 41);
    top: 12px;
    padding-top: 20px;
    line-height: 27px;
    /* font-weight: 700; */
    font-size: 20px;
    color: rgb(83, 160, 194);
    padding-left: 4px;
}

.graph-mark-deadline {
    border-left: 3px solid #FF6946;        
    right: -59px;      
    position: absolute;            
    top: -16px;                  
    width: 57px;            
    line-height: 20px;
    padding-left: 4px;
}

.graph-mark-createDate {
    border-right: 3px solid rgb(83, 160, 194);
    position: absolute;
    /* padding-top: 20px; */
    top: -16px;
    left: -60px;
    padding-right: 4px;
    width: 57px;
    text-align: right;
    line-height: 20px;
}

.graph-mark-months {
    position: absolute;
    border-left: 2px solid #949494;
    color: #949494;
    height: 54px;
    padding-left: 6px;
    font-size: 18px;
}

.graph-mark-wrapper-weeks {
    padding-top: 9px;      height: 36px;      overflow: hidden;      position: relative;      top: -25px;      font-size: 13px;      text-align: inherit;      color: darkgrey;
    z-index: 1;
}

.graph-mark-wrapper-months {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 70px;
    /* height: 40px; */
}

.user-page-details {
    display: flex;      flex: 2;      align-items: center;      background-color: rgb(236, 236, 236);      padding: 0 10px;
}

.user-page-graph .graph-mark-wrapper-weeks {
    padding-top: 9px;
    height: 36px;
    overflow: hidden;
    position: relative;      top: -25px;      font-size: 13px;            text-align: inherit;      color: darkgrey;
}

.user-page .graph-mark-months {
    line-height: 40px;
    /* top: -27px; */
    color: #727272;
}

.user-select {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.89);
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;
}

.user-select-innerWrapper {
    /* height: 200px; */
    padding: 50px 40px;
    padding-top: 5px;
    width: 360px;
    background-color: #F4F4F4;
    margin: 90px auto;
    vertical-align: middle;
    display: flex;
    flex-wrap: wrap;
    /* border: 1px dashed #FF6946; */
    box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.53);
    z-index: 1;
}

.user-select-password {
    border: 1px solid black;
    min-width: 100px;
    flex: 1;
}

.user-select-button {
    width: 26px;
    /* background-image: url('../img/green-tick.png'); */
    background-color: #A1CFE4;
    margin-left: 10px;
    background-image: url('../img/green-tick.png');      background-repeat: no-repeat;      
    background-size: 65%;
    background-position: center;
}

.user-select-button:hover {
    background-color: #BCF576;
}

.user-select-dropdownWrapper {
    background-color: #DFDFDF;
    margin-right: 10px;
}

.user-select-logo {
    background-image: url('../img/logoMavi_500px_shadow.png');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
    height: 140px;
    width: 100%;
}

.page-menu-button {
    padding: 1px 6px;
    margin-left: 2px;
    /* background-color: white; */
}

.page-menu-button:hover {
    /* background-color: #A1CFE4; */
    color: #cccccc;
}

.page-menu-button-active {
    /* background-color: #A1CFE4; */
    color: #A1CFE4;
}

.user-page-dayStart {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.67);                                                                              
    z-index: 210;            
    width: 100%;      
    height: 100%;
    left: 0;
    top: 0;
}

.user-page-dayEnd {
};
}

.menu-user-name {
    line-height: 50px !important;
    font-size: 21px;
    font-weight: 100;
}

._menu-button {
    height: 100%;      
    font-size: 16px;      line-height: 30px;      /* font-weight: 400; */      padding: 0 10px;      background-color: rgb(244, 244, 244);      
    border-right: 1px solid rgb(172, 172, 172);      border-top: 1px solid rgb(172, 172, 172);
    overflow: hidden;      align-self: flex-end;      vertical-align: super;
}

.menu-user-logo {
    background-image: url('../img/usericon_gray.png');      background-repeat: no-repeat;      
    background-size: 50%;
    background-position: center;
    /* height: 50px; */
    width: 60px;
}

.page-name {
    margin-top: 10px;
    font-size: 19px;
    color: rgba(0, 0, 0, 0.6);
    /* color: white; */
    /* font-weight: 100; */
    -webkit-user-select: initial;
};
}

.job-detailPage-menu-admin {}

.job-detailPage-menu-admin {
    left: 30px;
}

.job-detailPage-menu-user {
    left: 20px;
    top: -31px;
    bottom: initial;
    display: none;
}

.detailPage-menu-button {
    background-color: #A1CFE4;
    color: #444544;
    padding: 2px 4px;
    font-size: 20px;
}

.detailPage-menu-button:hover {
    background-color: #53A0C2;
}

.job-detailPage-menu-admin-delete {
    background-color: #FF6946;
}

.job-detailPage-menu-admin-delete:hover {
    background-color: #53A0C2;
}
.add-panel-input-date {
    display: flex;      height: 25px;      margin: 4px;
}

div#ui-datepicker-div {
    background-color: white;
    z-index: 300 !important;
    box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.23);
    border: 1px solid rgba(240, 239, 239, 0.33);
}

.add-panel-input-box input {
    line-height: 20px;
    height: 100%;
    position: relative;
}

.add-panel-rightColumn {
    display: flex;
    flex: 3;
    flex-wrap: wrap;
    align-items: center;
}

.add-panel-leftColumn {
    flex: 1;
    /* min-height: 100px; */      
    min-width: 100px;
    /* height: 167px; */
    position: relative;
}

.job-detailPage-graph .graph-mark-wrapper-weeks {
    top: -34px;
    padding-top: 0px;
    padding-bottom: 28px;
    height: 10px;
}

.job-detailPage-graph .graph-mark-wrapper-months {
    top: -59px;
}

.add-panel-addButton:hover {
    background-color: #53A0C2;
}

.graph-mark-days {
    /* border-left: 1px solid rgb(157, 157, 157); */      position: absolute;      
    height: 100%;      padding-left: 1px;
    color: #464646;
    font-size: 12px;
    /* padding-top: 10px; */
    /* background-color: rgba(250, 250, 250, 0.65); */
    /* padding: 0 2px; */
    /* min-width: 10px; */
    text-align: center;
    /* text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4); */
}

.graph-mark-wrapper-days {
    position: absolute;      width: 100%;      overflow: hidden;      
    /* height: 40px; */      /* height: 40px; */;
}

.job-detailPage-graph .graph-mark-wrapper-days {
    top: -7px;
    height: 20px;
}

.user-page-graph .graph-mark-wrapper-days {
    top: -7px;
    padding-bottom: 0;
    /* padding-top: 10px; */
    /* height: 40px; */
    vertical-align: text-top;
    /* left: -4px; */
    height: 15px;
    /* padding: 0 8px; */
}

.user-page-graph .graph-mark-wrapper-weeks {
    top: -30px;
    height: 25px;
}

.user-page-graph .graph-mark-weeks {
    /* padding-top: 3px; */
    /* padding-bottom: 30px; */
    /* line-height: 15px; */
}

.user-page-graph .graph-mark-wrapper-months {
    top: 10px;
    height: 32px;
}

.user-page-graph-otherJob:hover {
    z-index: 101;
    opacity: 1;
}

.ui-dropdown-item:nth-child(even) {
    background-color: #F4F4F4;
}

.user-page-dayStart-txt {      background-color: #6BD369;      color: white;      text-align: center;      font-size: 29px;      margin: auto;      position: absolute;      box-shadow: 0 0 36px -2.3px rgba(0, 0, 0, 0.43);      border-radius: 6px;      
    padding: 28px;      border-bottom: 1px solid rgba(116, 116, 116, 0.29);      z-index: 210;      top: 30%;      width: 30%;      left: 35%;
}

.user-page-dayStart-txt:hover {
    background-color: #A1CFE4;
}

.user-page-graph-activeJob-pastDeadLine .user-page-graph-activeJob-content {
    /* background-color: #B5564B; */
    /* color: white; */
}

.user-page-graph-passedDeadlineJobs {
    position: absolute;
    margin-top: 40px;
    padding: 4px;
    background-color: white;
    box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.53);
    display: none;
}

.user-page-graph-passedDeadlineJob-innerWrapper {
    display: flex;
    font-size: 12px;
}

.user-page-graph-passedDeadlineJob {
    background-color: #EEEEEE;
    color: white;
    /* padding: 1px 3px; */
    margin-bottom: 1px;
}

.user-page-graph-passedDeadlineJob-content {
    padding-right: 4px;
    border-right: 1px solid white;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    color: black;
    /* background-color: chocolate; */
}

.user-page-graph-passedDeadlineJob-deadline {
    background-color: #B5564B;
    padding: 0 2px;
}

.user-page-graph-passedDeadlineJob:hover {
    background-color: #D99087;
}

.graph-mark-days-txt {
    left: -50%;
    position: relative;
    background-color: rgba(250, 250, 250, 0.65);
    padding: 0 2px;;
}

.job-detailPage-editPanel {
    position: absolute;      top: 0;
    z-index: 101;      align-self: center;      width: 100%;      
    /* height: 100%; */
    background-color: rgb(251, 251, 251);      
    /* border-top: 10px solid rgb(83, 160, 194); */      
    /* border-bottom: 2px solid rgb(83, 160, 194); */      box-shadow: 2px 2px 45px -11px rgba(0, 0, 0, 0.84);
      
    /* display: flex; */
    flex-wrap: wrap;
    padding: 19px;
    /* padding-top: 40px; */
    /* align-items: center; */
}

.job-detailPage-editUser {
    /* height: 36px; */      
    /* font-size: 30px; */      
    margin-right: 10px;      
    /* align-self: stretch; */      
    /* color: hsl(199, 55%, 60%); */      
    /* background-color: hsl(0, 0%, 95%); */
    /* font-weight: 400; */
    /* border: 1px solid darkgrey; */
}

.job-detailPage-editProject {
    /* font-size: 14px; */      
    /* align-self: flex-end; */      
    color: rgb(84, 84, 84);
    margin-right: 10px;
    /* flex: 1; */
    background-color: #F3F3F3;
    /* border: 1px solid darkgrey; */
}

.job-detailPage-editUser-row1 {
    /* width: 50%; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
}

.job-detailPage-editInfo {
    flex: 1;
    height: 150px;
    margin: 10px 20px 0 0;
    padding: 0 5px 7px 0;
}

.job-detailPage-editUser-row2 {
    display: flex;
    align-items: flex-end;
}

.job-detailPage-buttonWrapper {
    background-color: 10px 0 0 0;
}

.job-detailPage-cancelButton {
    color: hsl(0, 58%, 58%);      
    background-color: hsl(0, 0%, 95%);      padding: 10px;
    text-align: center;
}

.job-detailPage-acceptButton:hover {
    background-color: gainsboro;
    /* color: #A0D064; */
}

.job-detailPage-cancelButton:hover {
    background-color: gainsboro;
}

.job-detailPage-editDeadline {
    display: flex;
    margin-right: 15px;
    min-width: 200px;
    flex: 1;
}

.job-detailPage-editDeadline-header {
    margin: 2px 11px;
    color: #61AED1;
}

.job-detailPage-editInfo textarea {
    width: 100%;
    height: 100%;
}

.job-detailPage-acceptButton {
    background-color: #F3F3F3;
    color: #9ECE63;
    text-align: center;
    padding: 10px;
}

.job-detailPage-menu-user-start {
    background-color: #B5EB71;
    color: #444444;
}

.user-select-password input {
    width: 100%;
    border: 0;
}

.add-panel-sml-addButton {
    width: 26px;
    height: 26px;
    margin: 2px;
    background-color: #BCF576;      background-image: url('../img/white-cross.png');      background-repeat: no-repeat;      background-size: 65%;      background-position: center;
}

.add-panel-sml-addButton:hover {
    /* background-color: #FF6946; */
}

.project-view-page-categories-cell-jobs {
    display: flex;
    flex-wrap: wrap;
}

.stats-graph {
    width: 400px;
    height: 200px;
}

.project-view-page-stats {
    display: flex;
    flex-wrap: wrap;
}

.project-view-page-stats-cell {
    padding: 10px;
}

.project-view-page-stats-cell-header {
    color: #FF6946;
    margin-bottom: 15px;
    padding: 5px;
    border-bottom: 1px solid #A7A4A4;
}

.project-view-page-stats-cell-content {
    padding: 5px;
}

.job-detailPage-menu-admin-approve {
    background-color: #B5EB71;
    color: #444544;
}

.job-detailPage-menu-user-finish {
    background-color: #B5EB71;
    color: white;
}

.add-menu-button-others-active {
    background-color: #FF6946;
    color: white;
}

.project-view-row-menu {
    text-align: center;
    bottom: 0;
}

.project-view-row-menu-delete {
    background-color: #FF6946;
    color: white;
    padding: 0 2px;
}

.project-view-row-menu-edit {
}

.project-view-row-menu-delete:hover {
    background-color: #C74C30;
}

.project-view-row-menu-edit:hover {
    background-color: #53A0C2;
}

.project-view-row-editPanel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    display: flex;
    justify-content: space-between;
    padding: 5px 16px;
}

.project-view-row-editPanel-buttonWrapper {
    right: -24px;
    top: -4px;
    position: absolute;
    /* background-color: #FFFFFF; */
    /* height: 100%; */
    /* width: 60px; */
    /* text-align: left; */
}

.project-view-row-editPanel-client {
    position: relative;
    margin: 0 40px;
}

.green-button {
    background-color: #BCF576;
    transition: background-color .2s ease-in-out;
    transition-property: background-color, color;
    padding: 1px 2px;
    text-align: center;
    color: black;
    font-size: 14px;
}

.green-button:hover {
    background-color: #93BF5D;
    color: white;
}

.red-button {
    background-color: #FF6946;      transition: background-color .2s ease-in-out;      transition-property: background-color, color;      
    padding: 2px 2px;      text-align: center;
    color: white;
    font-size: 14px;
}

.red-button:hover {
    background-color: #D65233;
}

.project-view-row-editPanel-projectName {
    /* flex: 1; */
    margin-right: 20px;
    z-index: 1;
}
    


.menu-right {
    position: absolute;
    right: 0;
    top: 21px;
    font-size: 0px;
}

.menu-changeUser {
    font-size: 13px;
}

.menu-changeUser:hover {
    background-color: #A1CFE4 !important;
    border-right: 1px solid rgb(161, 207, 228);
}

.job-detailPage-info-projectName:hover {
    color: #FF6946;
}

.add-menu-button-others:hover {
    background-color: #8A8A8A !important;
}

.add-panel-others {
    background-color: #B7B7B7;
}

.add-menu-button-others-active {
    background-color: #B7B7B7;
}


.add-panel-group {
    display: flex;
}

.job-detailPage-editCategory {
    /* border: 1px solid darkgrey; */
    /* margin-right: 10px; */
}

.job-detailPage-editCount {
    display: flex;
    /* width: 100%; */
}

.job-detailPage-editCount-header {
    /* width: 200px; */
    margin-right: 10px;
    /* flex: 1; */
    color: #61AED1;
}

.job-detailPage-editCount-input {
    width: 40px;
    flex: none !important;
    margin-right: 10px;
}

.job-detailPage-editCount input {
    flex: 1;
}

.blue-button {
    background-color: #8DCAE6;
    padding: 2px 2px;
    color: white;
    font-size: 14px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 1, 1);      transition-property: color, background-color, color;  
    text-align: center;
};
}

.red-button {
    background-color: #FF6946;      padding: 2px 2px;      color: white;      font-size: 14px;
}

.user-select .input-dropdown {
    width: 244px;
    min-width: 10px;
}

.job-row:first-child {
}

.job-row.job-state-0:nth-child(even) {
    /* background-color: #E9E9E9; */
}

.job-detailPage-editPanel div {
    margin: 2px;
}

.layout-group-sortRow:hover {
    /* background-color: white; */
}

.job-detailPage-info-serverPath {
    background-color: rgba(161, 207, 228, 0.46);
    padding: 2px 12px;
    border-radius: 15px 0 0 15px;
    font-size: 13px;
    -webkit-user-select: initial;
    cursor: text;
    overflow: hidden;
    /* flex: 1; */
    max-height: 24px;
}

.job-detailPage-info-serverPath:hover {
    /* background-color: #53A0C2; */
    /* color: white; */
}

.job-detailPage-editServerPath {
    display: flex;
}

.job-detailPage-editServerPath-head {
    color: #61AED1;
}

.add-panel textarea {
    /* width: 100%; */
}

.user-page-jobs-customJob-wrapper {
    display: flex;
    /* margin: 10px 0; */
    width: 100%;
}

.green-button {
    /* width: 30px; */
    padding: 6px;
    border: 1px solid #A3A3A3;      border-left: 0;
}

.user-page-jobs-customJob-wrapper input {
    /* flex: 1; */
}



.user-page-graph-activeJob-customJob .user-page-graph-activeJob-content {
    /* background-color: #BCDBE8; */
    /* color: black; */
}

.user-page .layout-group-content {
    margin-top: 0;
}

.user-page-jobs-waitingJobs-content.layout-group-content {
    margin-top: 17px;
}

.job-detailPage-editPriority {
    display: flex;
}

.job-detailPage-editPriority-header {
    color: #61AED1;
}

.context-menu {
    position: absolute;
    background-color: #F3F3F3;
    width: auto;
    min-width: 0px !important;
    /* width: 10px !important; */
}

.confirmation-dialog {
    position: relative;
    z-index: 100;
    margin: auto;
    padding: 20px 10px 6px 10px;
    width: 400px;
    text-align: center;
    top: 100px;
    background-color: white;
    box-shadow: 0 4px 30px 0px #686565;
}

.confirmation-dialog .saydam-button {
    margin: 10px auto;
    width: 120px;
}

.confirmation-dialog-buttons {
    display: flex;
}


.confirmation-dialog-text {
    padding: 10px;
}

.layout-group-header:hover {
    background-color: #e1e1e1;
}

.job-detailPage-info-serverPath-copy {
    margin-left: 2px;
    cursor: pointer;
    border-radius: 0 15px 15px 0;
    padding: 2px 11px 2px 5px;
    font-weight: 500;
    flex: none;
}

.job-detailPage-info-serverPath-copy:hover {
    background-color: #2098d1;
    color: white;
}


.customJob-row .job-row-priorityCell {
    background-color: #A1CFE4 !important;
}

.user-page-overDay {
    position: absolute;      
    /* background-color: rgba(255, 255, 255, 0.67); */      z-index: 210;      
    /* width: 100%; */      
    /* height: 100%; */      left: 0;      top: 0;
    margin: auto;
}

.user-page-overDay-txt {
    background-color: #FF6946;      color: white;      text-align: center;      
    font-size: 19px;      margin: auto;      position: absolute;      box-shadow: 0 0 36px -2.3px rgba(0, 0, 0, 0.43);      border-radius: 6px;      
    padding: 10px;      border-bottom: 1px solid rgba(116, 116, 116, 0.29);      z-index: 210;      
    top: 45%;      
    width: 30%;      
    left: 35%;
}

.blue-button:hover {
    background-color: #63B5DB;
}

input[type="number"] {
    width: 40px;
}

.add-panel .input-dropdown {
    /* width: 250px; */
    flex: 1;
}

.job-detailPage textarea:focus {
    /* width: 100%; */
    /* border: 0; */
    /* outline-style: none; */
    outline: none;
    /* outline-color: rgb(161, 207, 228); */
}

.ui-autocomplete {
    height: 500px; overflow-y: scroll; overflow-x: hidden;
    z-index: 300;
}

.user-page-undoDayEndButton {
    background: 0;
    /* font-size: 18px; */
    color: black;
    width: 120px !important;
    margin: 10px auto !important;
}

.user-select-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.89);
    width: 100%;
    z-index: 0;
}