/* Calin's site specific .css */

.body {
    clear: both;
}
/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 7px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #999; 
    border-radius: 4px;
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777; 
}

.header {
    min-height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0px;
    padding: 6px;
    z-index: 1;
    background-color: #111;
}
.header-menu, .header-page-menu {
    min-height: 32px;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    margin-right: 0px;
    padding-top: 8px;
    z-index: 1;
    background-color: transparent;
}
.header-page-menu {
    right: 90px;
}
.logo {
    display: inline-block;
    margin-left: 10px;
}
.header-title {
    display: inline-block;
    color: #bbb;
    font-size: 16px;
    margin: 5px;
}
.header-title-menu {
    display: inline-block;
    color: #bbb;
    font-size: 16px;
    margin: 0px;
    padding: 0px 15px 0px 0px;
}
.header-main-menu {
    display: inline-block;
    color: #bbb;
    font-size: 16px;
    font-weight: normal;
    margin: 0px;
    padding: 0px 15px;
    border-left: 1px solid #bbb;
}
.menu {
    float: right;
    list-style-type: none;
    margin-top: 0px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
}
.tools-icons {
    padding: 0px 5px;
}
.setup-color-tags-button {
    float: right;
    padding: 4px 10px 6px;
}
.color-tag-owner {
    font-size:14px;
    font-weight:normal;
}
.color-tag-user {
    font-size:12px;
    font-weight:normal;
}

.restore-archived-jobs {
    float: right;
    margin-right: 10px;
    padding: 3px 10px 6px;
}

.logged-in-member {
    float: right;
    line-height: 1;
    font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    min-width: 20px;
    width: 20px;
    color: #aaa;
    background-color: transparent;
    border: 1px solid #888;
    border-radius: 14px;
    margin: 1px 5px 0px 5px;
    padding: 6px 2px 6px 2px;
}

.logout {
    float: right;
    margin: 0px 5px 0px 5px;
    padding: 2px 10px 5px;
}
.login-message {
    margin: 150px auto 20px;
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    text-align:center;
    width: 30%;
    color: #ccc;
}
.register-message {
    margin: 30px auto 20px;
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 45px;
    text-align:center;
    width: 30%;
    color: #ccc;
    border-top: 1px solid #ccc;
}
.message-button, .message-button:focus {
    color: #ccc;
    margin: 5px;
    padding: 10px 22px 12px;
    border: 1px solid #ccc;
}
.message-button:hover {
    color: #fff;
    border: 1px solid #fff;
    background-color: #444;
}
.message-button:active {
    color: #fff;
    border: 1px solid #ccc;
    background-color: #2d2d2d;
}
.register-text, .login-text, .change-text {
    color: #666;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0px 10px;
}
.register-button, .register-button:focus,
.login-button, .login-button:focus,
.change-button, .change-button:focus {
    float: right;
    box-sizing: initial;
    text-align:center;
    color: #666;
    font-size: 14px;
    width: 45%;
    margin: 0px;
    margin-top: -10px;
    padding: 8px 0px 10px 0px;
    border: 1px solid #bbb;
}
.register-button:hover, .login-button:hover, .change-button:hover {
    color: #444;
    border: 1px solid transparent;
    border-bottom: 1px solid #bdbdbd;
    background-color: #e0e0e0;
}
.register-button:active, .login-button:active, .change-button:active {
    color: #333;
    border: 1px solid transparent;
    border-bottom: 1px solid #bdbdbd;
    background-color: #d8d8d8;
}


/* Main class */
main {
    margin: 0px;
}

/* Classes for Workload page */

.workloads-container-plus {
    display: block;
    padding: 55px 10px 40px 10px;
}
.workloads-container {
    display: block;
    width: 100%;
    padding: 0px;
    transition: width 0.3s;
}
.workload-container {
    display: block;
    position: relative;
    padding: 15px 0px 0px;
    margin: 0px;
}
.workload-container:hover,
.workload-container:active,
.workload-container:focus {
    background-color: #303030;
}
.workload-placeholder-background {
    display: block;
    padding: 0px;
    font-size: 20px;
    position: relative;
    margin: 0px;
    background-color: #222;
}

.workload-name {
    display: inline-block;
    margin: 0px 0px 0px;
    padding: 0px 10px 0px 0px;
    font-size: 20px;
    font-weight: normal;
    color:#eee;
    cursor: pointer;
    cursor: grab;
}
.workload-users {
    font-size: 12px;
    font-weight: normal;
    color: #999;
    margin-top: 5px;
    padding-left: 5px;
}
.workload-members {
    width: 290px;
}
.job-members {
    width: 600px;
}
.add-remove-members-text {
    font-size:12px;
    font-weight:bold;
    padding: 10px 0px 0px 10px;
    margin: 10px 0px 0px;
    color:#999;
}
.workload-container .collapse-workload-button {
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px;
    margin: 0px 5px 0px 5px;
}
.workload-container .expand-workload-button {
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px;
    margin: 0px 5px 0px 5px;
}
.workload-container .edit-workload-button,
.workload-container .delete-workload-button {
    visibility: hidden;
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0px 0px 0px;
    margin: 0px 5px 0px 5px;
}
.workload-container:hover .edit-workload-button,
.workload-container:hover .delete-workload-button {
    visibility: visible;
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0px 0px 0px;
    margin: 0px 5px 0px 5px;
    background-color: transparent;
}
.add-workload-button {
    display: block;
    text-align: center;
    margin: 30px 3px;
    padding: 25px 0px 15px;
    height: 100px;
    width: 302px;
    background-color: rgba(255,255,255,.03);
    font-weight: normal;
    font-size: 14px;
    color: #999;
}
.add-workload-button:hover {
    display: block;
    text-align: center;
    margin: 30px 3px;
    padding: 25px 0px 15px;
    height: 100px;
    width: 302px;
    background-color: rgba(255,255,255,.06);
    font-size: 14px;
    color: #999;
}
.steps-plus-container {
    display: block;
    white-space: nowrap;
    font-size: 0;
    margin-top: 5px;
    max-height: 150vh;
    overflow-y: hidden;
    transition: max-height 0.6s;
}
.steps-container {
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    margin-top: 5px;
    padding: 0px 0px 15px;
}
.step-container {
    display: inline-block;
    vertical-align: top;
    background-color: #e8e8e8;
    font-size: 16px;
    margin: 0px 5px 5px;
    padding: 0px 0px 0px;
    width: 300px;
    white-space: normal;
}
.step-placeholder-background {
    display: inline-block;
    background-color: #b8b8b8;
    font-size: 16px;
    margin: 5px;
    padding: 0px;
    width: 300px;
    border: none; 
    white-space: normal;
}
.job-step-name {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 5px 6px 12px;
    font-size: 16px;
    font-weight: bold; 
    margin: 0px;
    color: #555;
    max-width: 190px;
    cursor: pointer;
    cursor: grab;
}
.add-step-button {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 5px;
    padding: 20px 0 8px;
    height: 78px;
    width: 300px;
    background-color: rgba(255,255,255,.03);
    font-weight: normal;
    font-size: 14px;
    color: #999;
}
.add-step-button:hover {
    display: inline-block;
    text-align: center;
    margin: 5px;
    padding: 20px 0 8px;
    height: 78px;
    width: 300px;
    background-color: rgba(255,255,255,.06);
    font-size: 14px;
    color: #999;
}
.step-container .edit-step-button,
.step-container .delete-step-button {
    visibility: hidden;
    display: inline-block;
    vertical-align: top;
    padding: 3px 2px 3px 6px;
    margin: 5px 0px 0px;
}
.step-container:hover .edit-step-button,
.step-container:hover .delete-step-button {
    visibility: visible;
    display: inline-block;
    vertical-align: top;
    padding: 3px 2px 3px 4px;
    margin: 5px 0px 0px;
    background-color: transparent;
}
.step-container .add-job-button {
    visibility: visible;
    float: right;
    padding: 2px 7px 5px 1px;
    margin: 5px 7px 5px 1px;
}
.step-container .add-job-text {
    visibility: visible;
    display: block;
    margin: 0px;
    padding: 10px 0px 10px 15px;
    color: #666;
    border-top: 1px solid #ccc;
    font-size: 14px;
    font-weight: normal;
}
.step-container .add-job-text:hover {
    color: #000;
}
.step-sums {
    margin: 0px;
    padding: 10px 0px 10px 15px;
    font-size: 14px;
    font-weight: bold;
}

.job-step-users {
    font-size: 12px;
    font-weight: normal;
    color: #999;
    margin-top: 25px;
}
.job-list {
    padding: 0px 8px 2px 8px;
    margin: 0px;
    width: 284px;
    min-height: 64px;
    overflow-y: auto;
    background-color: #d4d4d4;
    border-top: 1px solid #acacac;
}
.job-card {
    position: relative;
    display: block;
    margin: 8px 0px 8px; 
    padding: 12px 0px 9px 10px;
    border: none; 
    border-bottom: 1px solid #acacac;
    background-color: #f5f5f5;
}
.job-card:hover { 
    border: none; 
    border-bottom: 1px solid #acacac;
    background-color: #fff;
    cursor: pointer;
}
.job-card:active { 
    border: none; 
    border-bottom: 1px solid #acacac;
    background-color: #fff;
    -moz-box-shadow: 1px 2px 5px #999;
    -webkit-box-shadow: 1px 2px 5px #999;
    box-shadow: 1px 2px 5px #999;
    cursor: pointer;
    cursor: grabbing;
}
.job-placeholder-background {
    background: #b8b8b8;
    padding: 12px 0px 10px 10px;
    margin: 8px 0px;
    display: block;
    border: none; 
}
.job-list .job-card-color-tags {
    max-width: 250px;
    font-size: 8px;
}
.job-list .color-tag-job-card {
    display: inline-block;
    width: 40px;
    height: 10px;
    margin: 0px 4px 4px 0px;
    border-radius:0px;
    border: solid 1px #e4e4e4;
    cursor: default;
}
main .job-name {
    display: block;
    padding: 5px 0px;
    margin: 0px;
    max-width: 250px;
    clear: both;
    font-size: 14px ; 
    font-weight: bold;
    line-height: 1;
    color: #444;
    cursor: pointer;
    cursor: grab;
}
.job-card .edit-job-button {
    visibility: hidden;
    position: absolute;
    right: 4px;
    top: 0px;
    width: 18px;
    padding: 0px 0px 0px;
    margin: 0px 0px 0px;
}
.job-card:hover .edit-job-button {
    visibility: visible;
    width: 18px;
    padding: 0px 0px 0px;
    margin: 0px 0px 0px;
}
.job-list .job-reference-card-text {
    float: left;
    font-size: 12px;
    vertical-align: top;
    color: #000;
    font-weight: normal;
    margin: -2px 10px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.job-list .job-description-card-text {
    font-size: 12px;
    color: #888;
    font-weight: normal;
    padding: 2px 0px 5px;
}
.job-list .complete-card-text {
    font-size: 12px;
    color: #888;
    font-weight: normal;
    padding: 1px 0px 0px;
}
.job-list .complete {
    height: 4px;
    margin: 0px 0px 8px;
    background-color: rgb(85, 194, 91);
}
.features-card-icons {
    margin: 0px 0px 0px;
}
.job-list .due-date-card {
    display: inline-block;
    vertical-align: middle;
    color: #888;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px 3px 0px;
}
.job-list .overdue-date-card {
    display: inline-block;
    vertical-align: middle;
    background-color:#ee2b2b;
    color: #ffffff;
    margin: 0px 10px 0px 0px;
    padding: 0px 8px 3px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
}
.job-list .due-today-date-card {
    display: inline-block;
    vertical-align: middle;
    background-color:#ffff00;
    color: #2b5bee;
    margin: 0px 10px 0px 0px;
    padding: 0px 8px 3px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
}
.job-list .date-card-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
}
.job-list .date-card-text {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    margin-left: -2px;
    padding: 0px;
}
.job-list .completed-date-card {
    display: inline-block;
    vertical-align: middle;
    color: #888;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px 3px 0px;
}
.job-list .job-notes-card-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px 4px 0px;
    padding: 0px;
}
.job-list .job-budget-card-text {
    display: inline-block;
    font-size: 12px;
    color: #888;
    font-weight: bold;
    margin: 0px 15px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.job-card-details {
    display: block;
}
.job-name-detail {
    width: 450px;
    display: inline-block;
}
.job-description-detail {
    width: 450px;
    display: inline-block;
}
.job-reference-detail {
    float: right;
    width: 140px;
}
.job-budget-detail {
    float: right;
    width: 140px;
}
.job-users {
    font-size: 14px;
    font-weight: normal;
    color: #999;
    margin: 0px;
    padding: 5px 0px 10px;
}
.job-card-container {
    width:auto;
    height:auto;
    margin:0px;
}
.job-card-user {
    float: right;
    line-height: 1;
    /* font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; */
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    min-width: 18px;
    width: 18px;
    color: #888;
    background-color: transparent;
    border: 1px solid #d8d8d8;
    border-radius: 13px;
    margin: -17px 4px 0px 0px;
    padding: 4px 1px 5px 1px;
}

.job-color-tags {
    display: inline-block;
    width: auto;
    margin-top: 2px;
}
.edit-color-tag-button {
    display: inline-block;
    width: auto;
    padding: 6px 20px 7px;
    margin: 0px 10px 20px 0px;
    border: solid 1px #e4e4e4;
    border-radius: 0px;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
}
/* .edit-color-tag-button:hover, .edit-color-tag-button:focus {
    opacity: 0.9;
} */
/* .edit-color-tag-button:active {
    opacity: 1;
} */
.add-color-tag-button {
    display: inline-block;
    padding: 2px 5px 4px;
    margin-bottom: 20px;
    border-radius: 0px;
    cursor: pointer;
}
.add-color-tag-button:hover, .add-color-tag-button:focus {
    background-color: #e4e4e4
}
.add-color-tag-button:active {
    background-color: #d8d8d8
}

.add-select-color-tags, .edit-select-color-tags, 
.setup-color-tags {
    min-height: 0px;
    max-height: 180px;
    width: 100%;
    overflow: auto;
    margin: 0px;
    padding: 0px;
}
.add-select-color-tag, .edit-select-color-tag,
.setup-color-tag {
    margin: 5px 0px;
    padding: 10px;
    padding-right: 5px;
    height: 20px;
    color: #444;
    cursor: pointer;
}

/* Inputs classes */

.progress-container {
    display: inline-block;
    margin-bottom: 20px;
    height: 60px;
    width: 440px;
}
.progressbar {
    position: relative;
    background-color: transparent;
    height: 30px;
    border: solid 1px #e0e0e0;
    margin: 0px 0px 10px;
}
.progress {
    float: left;
    width: 0%;
    height: 30px;
    background-color: rgb(195, 230, 205);
    border: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .progress-input {
        position: absolute;
        right: 50%;
        text-align: right;
        height: 30px;
        width: 50px;
        padding: 0px 1px 0px 0px;
        border: none;
        color: #333;
        font-size: 14px;
        font-weight: bold;
        background-color: transparent;
    }
    .progress-input::-ms-clear {
        display: none;
    }
}
input.progress-input {
    position: absolute;
    right: 50%;
    text-align: right;
    height: 30px;
    width: 50px;
    padding-right: 1px;
    border: none;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    background-color: transparent;
}
.progress-label {
    position: absolute;
    top: 5px;
    left:50%;
    height: 30px;
    text-align: left;
    padding-left: 2px;
    width: auto;
    border: none;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    background-color: transparent;
}

.tag-name-input {
    font-size: 15px;
    margin: 5px 0px 15px;
}
.add-tag-display {
    font-size: 15px;
    margin: 30px 0px 0px;
    font-weight: bold;
    height: 20px;
    color: #333;
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    padding: 10px 8px;
}
.edit-tag-display {
    font-size: 15px;
    margin: 0px 0px 20px;
    font-weight: bold;
    height: 20px;
    color: #333;
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    padding: 10px 8px;
}
.name-input {
    font-size: 16px;
    margin: 0px 0px 0px 0px;
    margin-right: 0px;
    font-weight: bold;
    color: #333;
    background-color: transparent;
    border: solid 1px transparent;
    padding: 12px 5px;
}
.job-budget-input, .job-reference-input {
    display: inline-block;
    width: 125px;
    text-align: left;
    font-weight: bold;
    color: #333;
    background-color: transparent;
    border: solid 1px transparent;
    padding: 12px 5px;
    margin-left: 2px;
}
.tag-name-input {
    font-weight: bold;
    color: #333;
    background-color: transparent;
    border: solid 1px #e0e0e0;
    padding: 12px 5px;
}
.name-input:hover, .tag-name-input:hover, .job-budget-input:hover, .job-reference-input:hover {
    border: solid 1px  #f0f0f0;
    border-bottom: solid 1px  #d8d8d8;
    background-color: #fff;
}
.name-input:focus, .name-input:active,
.tag-name-input:focus, .tag-name-input:active,
.job-budget-input:focus, .job-budget-input:active,
.job-reference-input:focus, .job-reference-input:active {
    border: solid 1px  #f0f0f0;
    border-bottom: solid 1px  #d8d8d8;
    background-color: #fff;
}
.describe-name-input {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    margin: 0px 0px 0px 5px;
}
.job-transfer-description {
    font-size: 12px;
    font-weight: normal;
    color: #888;
    margin: 0px 0px 0px 5px;
}

.text-input {
    background-color: transparent;
    border: solid 1px transparent;
    margin: 5px 0px 20px;
    padding: 6px 4px;
}
.textarea-input {
    font-size: 14px;
    font-weight: normal;
    color: #555;
    padding: 10px 5px;
    margin: 0px;
    line-height: 1.5;
    background-color: transparent;
    border: solid 1px transparent;
}
.textarea-input:hover {
    border: solid 1px  #f0f0f0;
    border-bottom: solid 1px  #d8d8d8;
    background-color: #fff;
}
.textarea-input:focus, .textarea-input:active {
    border: solid 1px  #f0f0f0;
    border-bottom: solid 1px  #d8d8d8;
    background-color: #fff;
}
.textarea-note-input {
    font-size: 12px;
    font-weight: normal;
    color: #555;
    margin-bottom:15px;
    border: solid 1px  #d8d8d8;
    background-color: #f6f6f6;
    border-radius:5px;
}
.textarea-note-input:hover,
.textarea-note-input:focus,
.textarea-note-input:active {
    border: solid 1px  #f0f0f0;
    border-bottom: solid 1px  #d8d8d8;
    background-color: #fff;
}
.date-container {
    float: right;
    width: 145px;
}
/* Due date button */
.due-date {
    float: right;
    width: 145px;
    margin-top: -1px;
    /* margin-bottom: 0px; */
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-bottom: 1px solid #d8d8d8;
}
.due-date:hover, .due-date:focus {
    background-color: #eeeeee;
    border: 1px solid #e4e4e4;
    border-bottom: 1px solid #d0d0d0;
}
.due-date:active {
    background-color: #e8e8e8;
    border: 1px solid #e0e0e0;
    border-bottom: 1px solid #d0d0d0;
}

.date-icon-button {
    float: left;
    padding: 3px 5px 3px 6px;
    border-right: 1px solid #d8d8d8;
}
input.date-input {
    /* display: inline-block; */
    /* float: left; */
    font-size: 14px;
    width: 105px;
    background-color: transparent;
    /* margin-left: -51px; */
    padding: 6px 0px 6px 15px;
    border: none;
    cursor: pointer;
    color: #333;
}
.was-due {
    font-size: 12px;
    padding-left: 5px;
}
/* Send email job notes button */
.email-job-notes-button {
    float: left;
    margin: 0px;
    padding: 2px 4px 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}
.email-job-notes-checked {
    display: none;
    float: left;
    margin: 0px;
    padding: 2px 4px 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}
.email-job-notes-button:hover, .email-job-notes-button:focus {
    background-color: #e4e4e4;
}
.email-job-notes-button:active {
    background-color: #d8d8d8;
}

/* Archive job button */
.archive-job-button {
    float: left;
    margin: 0px;
    padding: 6px 8px 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
  }
.archive-job-button:hover, .archive-job-button:focus {
    background-color: #e4e4e4;
}
.archive-job-button:active {
    background-color: #d8d8d8;
}

/* Delete color tag button */
.delete-color-tag-button {
    float: right;
    margin-top: -4px;
    padding: 3px 1px 1px 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
    border: solid 1px transparent;
}
.delete-color-tag-button:hover, .delete-color-tag-button:focus {
    border: solid 1px #666;
}
.delete-color-tag-button:active {
    border: solid 1px #666;
}

/* Restore archived job button */
.restore-archived-job-form {
    vertical-align: middle;
}
.restore-archived-job-button {
    float: right;
    padding: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    border: solid 1px transparent;
}
.restore-archived-job-form:hover .restore-archived-job-button,
.restore-archived-job-form:focus .restore-archived-job-button {
    border: solid 1px #bbb;
}
.restore-archived-job-form:active .restore-archived-job-button {
    border: solid 1px #bbb;
}
/* Restore archived job name */
.restore-archived-job-name {
    display:inline-block;
    color:#333;
    font-size:12px;
    padding: 6px 0px;
    max-width:260px;
}
.restore-archived-job-message {
    color:#222;
    font-size:18px;
    text-align: center;
    line-height: 5;
}

/* Delete job color tag button */
.delete-select-color-tag {
    float: left;
    margin: 0px;
    padding: 6px 6px 6px 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
    border: solid 1px transparent;
}
.delete-select-color-tag:hover, .delete-select-color-tag:focus {
    background-color: #e4e4e4;
}
.delete-select-color-tag:active {
    background-color: #d8d8d8;
}

.job-details-and-tags {
    width: 600px;
    padding: 18px 15px 0px 0px;
    border-right: solid 1px #cccccc;
}
.job-notes-container {
    float: right;
    width: 300px;
    margin: 18px 0px 15px;
}
.job-notes {
    max-height: 490px;
    overflow-y: auto;
}
.display-job-note-container {
    padding:5px 5px 2px;
    margin:0px 0px 10px 0px;
    background-color:#ececec;
    border: solid 1px #e0e0e0;
    border-bottom: solid 1px #cccccc;
    border-radius:6px;
}
.display-job-note {
    font-size:12px;
    color: #222;
}
jobnotecontent ul {
    list-style-type: disc;
    margin: 5px;
    padding: 5px;
}
jobnotecontent ol {
    list-style-type: decimal;
    margin: 5px;
    padding: 5px;
}
.display-job-note-date {
    font-size: 10px;
    padding: 10px 0px 0px 0px;
    color: #555;
}
.job-note-owner {
    font-size: 10px;
    padding: 7px 3px 0px 0px;
    color: #555;
}
.amend-job-note, .remove-job-note {
    float: right;
    font-size: 10px;
    text-decoration: underline;
    padding: 6px 3px 0px 10px;
    color: #888;
}
.amend-job-note:hover, .remove-job-note:hover {
    color: #222;
    cursor: pointer;
}
/* Filter buttons */
.filter-button {
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    display: inline-block;
    width: 45%;
    margin: 0px 6px;
    padding: 9px 20px;
    border-bottom: 1px solid #bdbdbd;
    text-align: center;
    color: #111;
    cursor: pointer;
    background-color: #eee;
}
.filter-clear-button {
    font-size: 15px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    display: inline-block;
    width: 45%;
    margin: 0px 6px;
    padding: 9px 20px;
    border: 1px solid #999;
    font-weight: normal;
    text-align: center;
    color: #ccc;
    cursor: pointer;
    background-color: transparent;
}
.filter-button:hover {
    background-color: #bbb;
}
.filter-button:focus {
    background-color: #aaa;
}
.filter-button:active {
    background-color: #ccc;
}
.filter-clear-button:hover {
    background-color: #333;
}
.filter-clear-button:focus {
    background-color: transparent;
}
.filter-clear-button:active {
    background-color: #444;
}
/* Update button (for jobs and tags) */
.edit-input-job-button {
    float: right;
    width: auto;
    max-width: 160px;
    margin: 0px 0% 0px 0%;
    padding: 9px 20px;
    border-bottom: 1px solid #bdbdbd;
    text-align: center;
    cursor: pointer;
    background-color: #e0e0e0;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.send-job-notification-button {
    float: right;
    width: auto;
    margin: 0px 0px 15px 0px;
    padding: 9px 20px;
    border-bottom: 1px solid #bdbdbd;
    text-align: center;
    cursor: pointer;
    background-color: #e0e0e0;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.edit-select-color-tag-button {
    float: right;
    width: auto;
    margin: 0px 0% 0px 0%;
    padding: 8px 18px;
    border-bottom: 1px solid #bdbdbd;
    cursor: pointer;
    background-color: #e0e0e0;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.save-note-button {
    float: right;
    width: auto;
    margin: 0px 0% 0px 0%;
    padding: 8px 15px;
    border-bottom: 1px solid #bdbdbd;
    cursor: pointer;
    background-color: #e0e0e0;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}
.edit-input-job-button:hover,
.send-job-notification-button:hover,
.edit-select-color-tag-button:hover, 
.save-note-button:hover {
    background-color: #d8d8d8;
}
.edit-input-job-button:focus,
.send-job-notification-button:focus,
.edit-select-color-tag-button:focus,
.save-note-button:focus {
    background-color: #e0e0e0;
}
.edit-input-job-button:active,
.send-job-notification-button:active,
.edit-select-color-tag-button:active,
.save-note-button:active {
    background-color: #d0d0d0;
}

.footer-buttons {
    height: 60px;
}
.input-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
}
.input-button, .delete-button,
.add-select-color-tag-button,
.delete-job-color-tag-button,
.update-select-color-tag-button,
.remove-note-button,
.amend-note-button {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    display: block;
    padding: 12px 10px 12px 10px;
    margin: 0px 0px 0px 0px;
    border: 1px solid #e0e0e0;
    border-image: none;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    text-align: center;
    border-bottom: 1px solid #bdbdbd;
    cursor: pointer;
    background-color: #e0e0e0;
}
.input-button:hover, .input-button:focus,
.delete-button:hover, .delete-button:focus,
.add-select-color-tag-button:hover, .add-select-color-tag-button:focus,
.delete-job-color-tag-button:hover, .delete-job-color-tag-button:focus,
.remove-note-button:hover, .remove-note-button:focus,
.amend-note-button:hover, .amend-note-button:focus {
    background-color: #d8d8d8;
}
.input-button:active, .delete-button:active,
.add-select-color-tag-button:active,
.delete-job-color-tag-button:active,
.remove-note-button:active,
.amend-note-button:active {
    background-color: #d0d0d0;
}
.delete-warning {
    font-size: 16px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-top: 5px;
}
.delete-modal-text {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #333;
}
.delete-modal-note {
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #333;
}
.archive-warning {
    font-size: 16px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-top: 5px;
}
.archive-modal-text {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #333;
}
.archive-modal-note {
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* Job Notification */
.job-notification-from,
.job-notification-to,
.job-notification-message {
    padding: 10px 5px;
    font-size: 14px;
}

/* Loader */
.loader {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border: 6px solid #333;
    border-radius: 50%;
    border-top: 6px solid #eee;
    border-bottom: 6px solid #eee;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loader-text {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    margin: -10px 0 0 -35px;
    font-size: 16px;
    -webkit-animation: spin-text 3s linear infinite;
    animation: spin-text 3s linear infinite;
}
/* Safari */
@-webkit-keyframes spin-text {
0% { color: #000; }
50% { color: #fff; }
100% { color: #000; }
}
@keyframes spin-text {
0% { color: #000; }
50% { color: #fff; }
100% { color: #000; }
}