.page-content {
    /* max-width: 1500px; */
    /* margin: auto; */
    z-index: 0;
    height: 100%;
    overflow: visible;
    overflow-x: hidden;
    padding: 10px 20px;
    /* top: 28px; */
    background-color: rgb(250, 250, 250);
    height: calc(100% - 39px);
}

.time-sheet.review-page.page-content {}
.black-theme .page-content {
    background-color: rgb(45, 43, 43);
}

.page-content.time-sheet {
    
}

.page-header {/* height: 33px; */width: 100%;/* border-top: 1px solid #d6d6d6; */border-bottom: 1px solid #d6d6d6;padding: 9px 0;/* background-color: rgb(245, 245, 245); */}
.user-page-graphWrapper {
}

.user-page-graph-activeJob-content {
    padding: 20px 40px 20px 40px;
    background-color: #B8FF84;
    background-color: #bcf576;
    flex: 1;
    font-weight: 100;
    transition: background-color .2s ease-in-out;
    transition-property: color, background-color;
    font-size: 14px;
    min-width: 370px;
    /* max-height: 100px; */
    overflow: hidden;
}

.user-page-graph-activeJob-content:hover {
    background-color: hsla(95, 76%, 76%, 1) !important;
}

.user-page-graph-activeJob-deadline-date {
    background-color: whitesmoke;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity .25s ease-in-out;
    color: #3D3D3D;
    display: flex;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.user-page-graph-activeJob-deadline-diff {
    position: absolute;
    width: 100px;
    background-color: #F5F5F5;
    color: #1A1B1A;
    font-weight: 100;
    height: 100%;
    vertical-align: middle;
    align-items: center;
    align-content: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.user-page-graph-activeJob-pastDeadLine .user-page-graph-activeJob-deadline-date {
    /* background-color: rgb(255, 105, 70); */
}

.user-page-graph-activeJob-deadline {
    position: relative;
    width: 100px;
}
.jobs-content {
    /* min-width: 700px; */
    /* max-width: 960px; */
    /* margin: auto; */
}

.content-main {
    position: relative;
    flex: 1;
    height: 100%;
    margin: auto;
    min-width: 540px;
    z-index: 1;
}

.page-topbar {
    display: flex;
    justify-content: center;
    position: relative;
    /* margin: auto; */
    z-index: 1;
    \: rgb(245, 245, 245);
    flex-wrap: wrap;
    /* border-bottom: 1px solid #d6d6d6; */
    /* background-color: rgb(245, 245, 245); */
}

.jobs-topbar-menu-right {
    display: flex;
    padding-right: 14px;
    /* border-left: 2px solid #D5D5D5; */
}

.page-tab-topbar {
    position: absolute;
    z-index: 2;
    background-color: white;
    width: 100%;
    border-bottom: 1px solid #D6D6D6;
    height: 30px;
    top:0px;
    left: 0;
}

.jobs-page .page-tab-topbar {
    top: 40px;
}

.page-tab .layout-base {
    top: 30px;
}

.jobs-page {
    /* margin-top: 23px; */
    height: calc(100% - 45px);
}

.user-page {
    height: calc(100% - 100px);
}

.user-page-graph-activeJob {
    position: relative;
    /* background-color: #B8FF84; */
    display: flex;
    /* min-height: 44px; */
    width: 100%;
}

.user-page-graphWrapper {
    /* padding: 37px 0; */
    /* padding-top: 0; */
    /* margin-top: 20px; */
    /* margin-bottom: 70px; */
    /* position: relative; */
    /* border-bottom: 1px solid hsl(0, 0%, 76%); */
    /* box-shadow: 0 0 37px -2px rgba(0, 0, 0, 0.23); */
    /* border-radius: 6px; */
    /* margin-bottom: 10px; */
    max-width: 960px;
    min-width: 500px;
    margin: auto;
}

.user-page-graph-activeJob-deadline {
    /* background-color: #F1F1F1; */
    /* text-align: justify; */
    /* align-self: center; */
    /* height: 100%; */
}

.user-page-graph-activeJob-deadline-hovered {
    opacity: 0;
    /* flex: 0; */
}

.user-page-graph-otherJobs {
    position: relative;
    width: 100%;
    /* height: 80px; */
    margin-top: 14px;
}

.user-page-graph-otherJob {
    position: absolute;
    height: 87px;
    width: 88px;
    /* border-left: 1px solid black; */
    /* opacity: 0.5; */
    z-index: 100;
    background-position: center;
    transition: opacity .2s ease-in-out;
}

.user-page-graph-otherJob-content {
    height: 60px;
    font-size: 12px;
    padding: 9px 7px;
    overflow: hidden;
}

.user-page-graph-otherJob-deadline {
    font-size: 13px;
    text-align: center;
    /* height: 28px; */
    padding: 1px;
    min-zoom: 10%;
}

.user-page-graph-otherJob-innerWrapper {
    background-image: url('../img/deadline-bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    position: relative;
    left: -17px;
    top: 4px;
    transition: background-image .2s ease-in-out;
    /* transition-property: color, background-color; */
}

.user-page-graph-line {
    /* position: relative; */
    /* width: 100%; */
    /* width: calc(100% - 100px); */
    height: 4px;
    background-color: hsla(11, 100%, 64%, 0.58);
    /* position: absolute; */
    /* top: 89px; */
    margin-top: 51px;
    /* left: 100px; */
}

.user-page-graph {
    position: relative;
    width: calc(100% - 130px);
    margin-left: 109px;
    /* margin-right: 60px; */
    /* margin: 0 30px; */
    /* left: 110px; */
    display: none;
}

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

.user-page-graph-activeJob-warning {
    /* background-color: #FFFFFF; */
    width: 100%;
    padding: 19px 30px 19px 80px;
    color: hsla(0, 0%, 40%, 1);
    text-align: center;
    align-self: center;
    /* border-bottom: 2px solid #D6D6D6; */
}

.user-page-graph-activeJobMarker {
    position: absolute;
    height: 30px;
    width: 28px;
    top: -51px;
    /* border-left: 1px solid black; */
    ;
}

.user-page-graph-activeJobMarker-innerWrapper {
    position: absolute;
    background-image: url('../img/activejob-markerx2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 30px;
    width: 60px;
    left: -30px;
}

.user-page-graph-now {
    position: absolute;
    left: -103px;
    text-align: center;
    top: -35px;
    width: 100px;
    font-size: 24px;
    /* background-color: #FAFAFA; */
    color: #53A0C2;
    z-index: 101;
    /* text-shadow: 0px 0px 2px  rgba(0, 0, 0, 0.19); */
    /* box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.53); */
    border-radius: 3px;
    padding: 4px;
}

.user-page-graph-userMarker {
    background-image: url('../img/usericon-w-markerx2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 50px;
    top: -52px;
    left: -15px;
    position: absolute;
    z-index: 102;
    display: none;
}

.user-page-graph-otherJob-innerWrapper:hover {
    background-image: url("../img/deadline-bg-active.png");
    /* z-index: 101; */
    /* opacity: 1; */
}

.user-page-graph-activeJob-content:hover {
    background-color: #A1CFE4 !important;
}

.user-page-graph-otherJob-deadline-date {
    position: relative;
    /* height: 60px; */
    /* width: 100px; */
    text-align: center;
    background-color: #EEEEEE;
    transition: opacity .25s ease-in-out;
    /* padding: 17px 20px; */
    height: 23px;
}

.user-page-graph-otherJob-deadline-diff {
    position: absolute;
    height: 23px;
    width: calc(100% - 2px);
    /* padding: 17px 20px; */
    text-align: center;
    background-color: #A1CFE4;
    color: white;
    font-weight: 400;
}

.user-page-graph-otherJob-deadline-hovered {
    opacity: 0;
}

.project-view-page {
    height: calc(100% - 43px);
}

.job-detailPage-info-serverPath-wrapper {
    width: 100%;
    display: flex;
}

.job-detailPage-info-scope {
    width: 100%;
    font-size: 14px;
    padding: 8px;
}

.note-add {
    height: 170px;
    background: url(../img_new/new-note.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #DD9D95;
}
.job-detailPage-notes-content::-webkit-scrollbar-thumb {
    /* border-radius: 4px; */
    background-color: hsl(0, 0%, 84%);
}
.job-detailPage-notes-content::-webkit-scrollbar {
    height: 6px;
}

.job-detailPage-notes-content {
    display: flex;
    overflow-x: auto;
    min-height: 140px;
    max-height: 200px;
    align-items: stretch;
    /* padding: 10px 0px; */
    /* margin: 2px 10px; */
}

.note-wrapper {
    border-right: 1px solid #D6D6D6;
    /* border-color: #dd9d95; */
    /* border-radius: 6px; */
    /* margin: 4px; */
    padding: 10px;
    font-size: 14px;
    position: relative;
    min-width: 180px;
    max-width: 190px;
    flex: 1;
    background-color: white;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    font-size: 12px;
    -webkit-user-select: all;
    background-color: rgba(255, 105, 70, 0.23);
}

.note-wrapper:nth-child(2){
    border-left: 1px solid #D6D6D6;
}

.note-wrapper:last-child {
    margin-right: 70px;
}

.note-add {
    /* width: 50px; */
    height: 40px;
    background: url(../img_new/new-note.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #d6d6d6;
    border-radius: 46px;
    margin: 20px;
    cursor: pointer;
    max-width: 40px;
    min-width: 40px;
    align-self: center;
    background-color: white;
}

.note-user {
    position: absolute;
    bottom: 5px;
    right: 12px;
}

.note-new .note-user {
    position: relative;
    bottom: initial;
    height: 5px;
}

.note-content {
    max-height: 100%;
    margin-bottom: 16px;
    margin-right: 13px;
    overflow-y: auto;
    overflow: scroll;
    font-size: 12px;
    -webkit-user-select: all;
    cursor: initial;
}

.note-read {
    border-color: #D6D6D6;
    background-color: rgb(255, 255, 255);
}


.job-detailPage-statsWrapper {
    /* width: 100%; */
    /* background-color: rgb(241, 241, 241); */
    /* align-items: center; */
    display: flex;
    flex-wrap: wrap;
    /* padding: 0 40px; */
    /* margin-bottom: 20px; */
    margin-right: 20px;
    padding: 10px;
}

.job-detailPage-stats {
    padding: 16px 10px;
    display: flex;
    flex: 1;
    background-color: rgb(250, 250, 250);
    align-items: center;
}

.job-detailPage-stats-head {
    color: rgb(161, 207, 228);
    font-size: 14px;
    vertical-align: text-bottom;
    /* height: 100px; */
}

.job-detailPage-stats-value {
    font-size: 15px;
    line-height: 25px;
}

.job-detailPage-header-category {
    position: absolute;
    /* height: 100%; */
    /* text-align: right; */
    top: -31px;
    right: 20px;
    padding: 4px 15px;
    background-color: rgb(238, 238, 238);
    border-top: 2px solid #53A0C2;
    /* border-color: initial; */
}

.job-detailPage-info {
    /* border-right: 1px solid rgb(176, 176, 176); */
    margin: 16px 25px;
    flex: 2;
    display: flex;
    flex-wrap: wrap;
}

.job-detailPage-notes {
    /* padding: 10px; */
    /* padding-left: 0; */
    /* flex: 1; */
    /* position: relative; */
    /* display: flex; */
    border-top: 1px solid #D5D5D5;
}

.job-detailPage-info-projectName {
    font-size: 14px;
    align-self: flex-end;
    color: rgb(114, 114, 114);
}

.job-detailPage-info-userName {
    height: 36px;
    font-size: 30px;
    padding-right: 10px;
    align-self: stretch;
    color: rgb(76, 76, 76);
}

.job-detailPage-info-content {
    padding: 18px 0px;
    width: 100%;
    padding-right: 10px;
    font-size: 14px;
    -webkit-user-select: initial;
    cursor: text;
}

.job-detailPage-notes-head {
    color: rgb(255, 105, 70);
    display: none;
}

.job-detailPage-notes-showDeleted {
    position: absolute;
    right: 22px;
    top: 30px;
    font-size: 13px;
    color: rgb(82, 180, 226);
}

.job-detailPage {
    /* position: absolute; */
    /* align-self: center; */
    /* width: 90%; */
    margin: auto;
    vertical-align: 1;
    /* display: none; */
    z-index: 101;
    min-width: 50%;
    max-width: 900px;
    min-width: 700px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    border: 1px solid rgb(214, 214, 214);
}

.note-input {
    width: 100%;
    /* min-height: 140px; */
}

.user-page-graph-activeJob-finishButton {
    width: 40px;
    min-height: 50%;
    position: absolute;
}

.user-page-graph-activeJob-timeBudget {
    
}

.note-approve {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.note-time {
    position: absolute;
    font-size: 10px;
    bottom: 6px;
    left: 12px;
    color: #AAAAAA;
}
.note-content::-webkit-scrollbar-thumb {
    /* border-radius: 4px; */
    background-color: hsl(0, 1%, 54%);
}
.note-content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.jobs-topbar-menu-button {
    display: inline-block;
    align-self: center;
    line-height: 21px;
    padding: 0 9px;
    margin: 0 2px;
    transition: background-color .1s ease-in-out;
    transition-property: color, background-color, color;
    border-radius: 10px;
    font-size: 12px;
}

.jobs-topbar-menu-button-active {
    background-color: #D6D6D6;
}

.jobs-topbar-menu-button:hover {
    background-color: #e1e1e1;
    /* color: white; */
}

.note-delete {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 15px;
    height: 15px;
    background-size: 100%;
}

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

.page-menu {
    position: relative;
    display: flex;
    flex: 1;
    max-width: 1200px;
    min-width: 700px;
    margin: auto;
    justify-content: space-between;
    padding: 0 20px;
}

.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 {
    background-color: #FF6946;
    color: white;
    text-align: center;
    font-size: 21px;
    /* padding: 4px 0px; */
    margin: auto;
    border-radius: 5px;
    position: absolute;
    box-shadow: 0 0 7px -1px rgba(0, 0, 0, 0.43);
    border-radius: 0 0 6px 6px;
    padding: 13px 0 0 0;
    padding-top: 8px;
    /* padding-top: 25px; */
    border-bottom: 1px solid rgba(116, 116, 116, 0.29);
    z-index: 1;
    top: 0px;
    width: 30%;
    left: 35%;
}



.user-page-dayEndButton {
    background-color: rgba(0, 0, 0, 0);
    color: #DD9D95;
    /* font-size: 17px; */
}


.page-content-inner {
    /* max-width: 1750px; */
    margin: auto;
}

.user-page-groupButton {
    position: absolute;
    right: 20px;
}

.note-new {
    border-color: #cccccc;
    background-color: rgb(255, 255, 255);
}

.detailPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 200;
    /* height: calc(100% - 117px); */
    /* height: 100%; */
    /* height: 100%; */
}

.detailPage-bg {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,0.85);
    z-index: 100;
}

.detailPage-content {
    position: relative;
    /* z-index: 101; */
    /* align-self: center; */
    /* width: 100%; */
    /* background-color: rgb(230, 230, 230); */
    /* border-top: 10px solid rgb(83, 160, 194); */
    /* border-bottom: 2px solid rgb(83, 160, 194); */
    /* box-shadow: 0px 0px 45px 16.1px rgba(0, 0, 0, 0.14); */
    /* max-width: 900px; */
    min-width: 800px;
    /* margin: auto; */
    /* height: auto; */
    /* border: 1px solid rgb(214, 214, 214); */
}

.detailPage-header {
    position: relative;
    /* background-color: #53A0C2; */
    /* height: 10px; */
    text-align: right;
    /* width: auto; */
}

.job-detailPage-row1 {
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: stretch;
    /* height: 100px; */
    /* position: relative; */
}

.job-detailPage-row2 {
    /* height: 40%; */
    position: relative;
    background-color: rgb(250, 250, 250);
    /* display: flex; */
    align-items: stretch;
}

.detailPage-menu {
    position: absolute;
    bottom: -31px;
    /* width: 100%; */
    display: flex;
    display: hidden !important;
}

.job-detailPage-graph {
    position: relative;
    background-color: rgb(184, 184, 184);
    height: 5px;
    /* padding: 5px; */
    /* width: 100%; */
}

.job-detailPage-graph {}

.job-detailPage-graph-dateRange {
    height: 100%;
    position: absolute;
    background-color: rgb(82, 180, 226);
    border-right: 1px solid whitesmoke;
    border-left: 1px solid whitesmoke;
    min-width: 5px;
}

.detailPage-menu-close {
    width: 50px;
    height: 50px;
    background-color: rgb(111, 111, 111);
    position: absolute;
    right: 40px;
    /* top: 0; */
}

.job-detailPage-graphWrapper {
    padding: 115px 80px;
    flex: 1;
    /* height: 160px; */
    background-color: rgb(250, 250, 250);
    display: none;
}

.page-tab {
    /* position: relative; */
}

.job-row-customJob input[type="text"] {
    font-size: 13px;
    border: 0;
    padding: 8px;
}
.job-row-customJob input[type="text"]:focus {
    background-color: white;
    outline-color: #2098d1;
}

.jobs-approveAll {
    /* position: relative; */
    /* top: 38px; */
    width: 100%;
    padding: 11px 12px;
    border-bottom: 1px solid #cccccc;
    order: -3;
}

.note-wrapper:hover {
    /* background-color: #fafafa; */
}
.note-add:hover {
    /* border-color: #3D3D3D; */
    background-color: rgba(192, 192, 192, 0.6);
}

.user-page-graph-button-container {
    /* min-height: 100px; */
    position: relative;
}

.user-page-graph-activeJob-pauseButton {
    width: 40px;
    min-height: 50%;
    position: absolute;
    bottom: 0;
}

.dayOff-page.page-content {
    /* max-width: 780px; */
    height: calc(100%);
}

.dayOff-page .page-content-inner {
    max-width: 1170px;
    align-items: flex-start;
}

.dayOff-page .send-but {
    margin: 10px;
    text-align: right;
}

.dayOffPage-adminList {
    width: 200px !important;
    max-height: 600px;
    overflow: auto;
}

.dayOffPage-form {
    width: auto;
}

.dayOffPage-adminList {
    max-width: 110px;
}

.dayOffPage-adminList-item {
    width: 20px;
    border: 1px solid rgb(161, 207, 228);
    margin-bottom: 10px;
    cursor: pointer;
}

.dayOffPage-adminList-item:hover {background-color: #e1e1e1;}

.dayOffPage-list {
    align-self: flex-start;
    justify-content: space-around;
}

.dayOffPage-adminList-header {
    /* height: 10px; */
    /* align-self: flex-start; */
    display: inline-table;
    /* margin: auto !important; */
    border-bottom: 1px solid #e1e1e1 !important;
}

.dayOffPage-adminList-item.active {
    background-color: rgb(161, 207, 228);
}


@media print {
  body * {
    visibility: hidden;
  }
  /*.dayOffPage-form, .dayOffPage-form * {
    visibility: visible;
  }
  .dayOffPage-form {
    position: fixed !important;
    max-width: 1170px;
    margin: auto !important;
    left: 0;
    top: 0;
  }*/
  
  
  .animationChart-cams {
      margin: 200px;
  } 
  
  .--print, .--print * {
    visibility: visible;
    /*padding: 200px;*/
  }
  .--print {
    position: fixed !important;
    max-width: 1170px;
    margin: auto !important;
    left: 0;
    top: 0;
  }
}

.dayOffPage-form-head {
    justify-content: center;
    border: none !important;
    align-self: center;
}

.grid.--inner.--flex.--border.dayOffPage-form-logo {
    border: none !important;
    padding: 4px;
    /* max-width: 50px; */
    max-height: 55px;
    align-self: center;
    margin-left: 20px;
}


.dayOff-page .--border {
    border: 1px solid #A8A8A8;
}

.dayOff-page .--border-bottom {
    border-bottom: 1px solid #A8A8A8;
}

.dayOff-page .--border-right {
    border-right: 1px solid #A8A8A8;
}

.dayOff-page .--inner {
    /* margin: 10px; */
    padding: 6px;
}

.dayOff-page .--row {
    /* margin: 4px; */
    /* padding: 0; */
    /* box-shadow: none; */
    /* border: 0; */
}

.adminPage-favJobs-leftMenu {
    width: 85px;
    align-self: baseline;
    justify-content: flex-end;
}

.--row.admin-page-newSketch {
    width: 60px;
    height: 60px;
}

.admin-page {/* zoom: 0.85; */height: calc(100% - 1px);}

.page-topbar-menu {
    display: flex;
    margin: 5px;
}

.job-detailPage-info-userAdded {
    color: #cccccc;
    margin: 7px 0 0 0;
}