.customer-body {
    margin: 20px;
    background: #fff;
    -webkit-print-color-adjust: exact;
}
.customer-body--empty{
    width: 1000px;
    margin: 20px auto;
    vertical-align: middle;
    text-align: center;
}
.customer-select{
    float: right;
    margin: 20px;
}
.customer-select-option{
    width: auto;
}
.customer-name {
    width: 80%;
    font-size: 32px;
    text-align: center;
}
.customer-info-wrap{
    float: left;
    margin: auto 20px;
}
.customer-dash-card{
    margin: 20px;
    float: left;
    width: 30%;
}
.customer-dash-card label{
    height: 24px;
    line-height: 24px;
    width: 200px;
    background: #999;
    color: antiquewhite;
    padding: 0px 20px;
    border-radius: 4px 4px 0px 0px;
}
.customer-dash-card--projects{
    width: 90%;
}
.customer-dash-card-list{
    max-height: 300px;
    overflow: auto;
}
.customer-dash-row{
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    /* border: 1px solid #ccc; */
    background: #ddd;
    margin: 2px auto;
}
.customer-dash-row-title{
    float: left;
    width: 95%;
    padding: 0px 12px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
.customer-dash-row-title:focus{
    outline: none;
}
.customer-dash-row-controls{
    float: right;
    width: 5%;
}
.customer-dash-row:hover{
    background: #eee;
}
.customer-dash-row .btn--edit {
    position: relative;
    float: right;
}
.customer-info{
    background: green;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: antiquewhite;
    height: 100px;
    width: 300px;
    float: left;
}
.customer-body .fa-exclamation-triangle {
    color: #ff3100;
}
.customer-info-item{
    float: left;
    margin: auto 10px;
    width: 100%;
}
.customer-info-item .fa-info-circle{
    font-size: 26px;
    margin: 6px 12px;
}
.customer .fa-info-circle{
    color: green;
}
.customer-info-item--icon{
    width: 90px;
}
.customer-info-item--icon .fa-info-circle{
    color: antiquewhite;
}

.customer-info-header {
    padding-top: 10px;
    position: relative;
    margin: 20px auto;
    clear: both;
}

/*  SCHEDULE  */

.customer-schedule-wrap{
    padding-top: 10px;
    position: relative;
    margin: 0 auto;
    clear: both;
}

.customer-schedule-behind{
    color: #ff3100;
    left: -20px;
}
.customer-summary-cell{
    display: inline-block;
    height: 24px;
    width: 2.5%;  /*8px;*/
    position:relative;
    font-size:12px;
    color: #fff;    
    text-align: center; 
    fill:#fff;
}
.customer-summary-cell--customer{
    width: 14px;
}

/* ##### MAP ##### */
#customer-map{
    position: relative;
    margin: 20px auto;
    width: 1000px;
    height: 600px;
    background: #999;
}


.sub-row
{
    clear:both;
    border-bottom:solid 1px #bbb;
    width:1060px;
    margin:0px auto;
    /*height:20px;*/
    height:35px;
    line-height:35px;
}
.sub-row[old_sub='true']{
    color:#999;
}
.sub-row[is_disabled='true'] {
    background: #eee;
}
.sub-row[is_future_sub='true']{
    font-style:italic;
    font-size: 12px;
}
.sub-row[old_sub='true'] .sub-col--icon{
    display: none;
}
/*.sub-row[has_renewal='true'] .sub-col--enddate{
    color:#090; 
}*/
/*.sub-row[has_renewal='false'] .sub-col--enddate[is_expiring='true']{
    color: #f00;
}*/
[is_wide='true'] .sub-row {
    width: 1580px;
}
.sub-col--dynamic {
    display: inline-block;
    float: left;
    padding-left: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
}
.sub-col
{
    display:inline-block;
    float:left;
    width:120px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    margin-right:5px;
}
.sub-col--wide
{
    width:325px;
}
.sub-col--xtrawide 
{
    width: 300px;
}
.sub-col--narrow
{
    width:100px;
}
.sub-col--status
{
    width:25px;
    text-align:center;
}
.sub-col--date
{
    width:85px;
}
.sub-col.sub-col--icon {
    position:absolute;
}
.sub-col--edit
{
    width:20px;
}
.sub-edit-form {
    position: relative;
    margin: 30px auto;
    width: 810px;
    border-bottom:solid 1px #000;
    padding-bottom:40px;
}
.sub-edit-row
{
    width:810px;
    height:35px;
    clear:both;
}
.sub-edit-col
{
    display:inline-block;
    float:left;
    width:33%;
}
.sub-edit-col--narrow
{
    display:inline-block;
    float:left;
    width:25%;
}
.sub-col[sub_status_two='1'] {
    background: #fa0a0a !important;
}
.sub-col[sub_status_two='2'] {
    background: #fb3030 !important;
}
.sub-col[sub_status_two='3'] {
    background: #fc7e7d !important;
}
.sub-col[sub_status_two='4'] {
    background: #febebd !important;
}
.sub-col[sub_status_two='5'] {
    background: #fff !important;
}
.sub-col[sub_status_two='6'] {
    background: #ffeff0 !important;
}
.sub-col[sub_status_two='7'] {
    background: #bcffd2 !important;
}
.sub-col[sub_status_two='8'] {
    background: #68ff99 !important;
}
.sub-col[sub_status_two='9'] {
    background: #31ff75 !important;
}
.sub-col[sub_status_two='10'] {
    background: #02fe55 !important;
}
.sub-col[sub_status_two='0'] {
    color: #fff !important;
}

.sub-col[sub_status_one='1'] {
    background: #e9feff !important;
}
.sub-col[sub_status_one='2'] {
    background: #cffeff !important;
}
.sub-col[sub_status_one='3'] {
    background: #b9fdff !important;
}
.sub-col[sub_status_one='4'] {
    background: #a0fbff !important;
}
.sub-col[sub_status_one='5'] {
    background: #7bfaff !important;
}
.sub-col[sub_status_one='6'] {
    background: #69faff !important;
}
.sub-col[sub_status_one='7'] {
    background: #62f9ff !important;
}
.sub-col[sub_status_one='8'] {
    background: #46f8ff !important;
}
.sub-col[sub_status_one='9'] {
    background: #2ef8ff !important;
}
.sub-col[sub_status_one='10'] {
    background: #20f7ff !important;
}
.sub-col[sub_status_one='0'] {
    color: #fff !important;
}
.sub-kpi-wrapper {
    
}
.sub-kpi-controls {
    font-weight: 300;
    float: right;
}
.customer-summary-cell--customerweek{
    width:21px;
    border-bottom:solid #ccc 1px;
    border-right:solid #eee 1px;
    padding-top:5px;
    position:relative;
    overflow: hidden;
}
.customer-summary-row--dates .customer-summary-cell--customerweek {
    border: none;
    width: 21px;
    overflow: visible;
    line-height: 14px;
    font-size: 9px;
    left: -24px;
}

.customer-summary-cell--customerweek [week_cell]{
    height:15px;
    /*color:#000!important;*/
}
.customer-summary-cell--customerweek [week_cell='1'] {
    background: #ccc !important;
}
.customer-summary-cell--customerweek [week_cell='live'] {
    background: #3cb77a !important;
}
.customer-summary-cell--customerweek [week_cell='test'] {
    background: #9d2956 !important;
}
.customer-summary-cell--customerweek [week_cell='build'] {
    background: #327faa !important;
}
.customer-summary-cell--customerweek [week_cell='design'] {
    background: #ed6e22 !important;
}
.customer-summary-cell--customerweek [week_cell='liveWeek'] {
    background: #3cb77a !important;
}
.customer-summary-cell--customerweek [week_cell='testWeek'] {
    background: #9d2956 !important;
}
.customer-summary-cell--customerweek [week_cell='buildWeek'] {
    background: #327faa !important;
}
.customer-summary-cell--customerweek [week_cell='designWeek'] {
    background: #ed6e22 !important;
}
.customer-summary-cell--customerweek [week_cell='buildWeek'] svg {
    margin: 0px 0px 1px 0px;
    padding: 2px;
}
.customer-summary-cell--customerweek [week_cell='designWeek'] svg {
    margin: 0px 0px 1px 0px;
    padding: 2px;
}
.customer-summary-cell--customerweek .fa {
    font-size: 12px;
    position: absolute;
    top: 6px;
    left: 2px;
    color: #fff;
}
.customer-summary-cell--customerweek [week_cell='testWeek'] .fa {
    font-size: 14px;
    margin-left: -1px;
}
.customer-summary-cell--customerweek [week_cell='liveWeek'] .fa {
    font-size: 11px;
    margin-top: 1px;
}
.customerweek-login {
    position: absolute;
    color: #000 !important;
    line-height: 21px;
    top: 2px;
    left: 0px;
    font-size: 9px;
    text-align: center;
    width: 100%;
}
[is_start_week='true']
{
    border-left:solid 2px #000;
}
.customer-section-head {
    font-weight: bold;
    border-bottom: solid 1px #ddd;
    margin: 10px 0px 10px 0px;
    background: #eee;
    padding: 2px 12px;
}
.customer-name-col {
    display: inline-block;
    font-size: 12px;
    width: 12%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 23px;
    line-height: 23px;
    padding-left: 3px;
    position: relative;
    text-align:left;
    left:2%;
}

.customerweek-login[num_participants] { color:#000;text-align:right;width:100%; }
.customerweek-login[num_participants='0'] { color:#fff; }

[cust_mode_highlight='true'] { background:#099;color:#fff; }

.customer-summary-row{
    height:23px;
    position:relative;
    transition: height 0.5s, margin 0.5s;
    min-width: 1310px;
}
/*.customer-summary-row[show_site_info='true']{
    height:180px;
    outline:solid 1px #999;
    margin:10px 0px;
    border-bottom:none;
    padding:10px 0px;
    overflow:hidden;
}*/
.customer-summary-row[show_user_info='true'],
.customer-summary-row[show_site_info='true'] {
    height: auto;
    width: 1200px;
    border: solid 1px #8a8a8a;
    margin: 10px 0px;
    padding: 10px 0px;
    border-radius: 8px;
    clear: both;
    min-height: 185px;
}
.customer-summary-row--dates .customer-summary-cell--customerweek .fa[show_week_date='true']
{
    color:#999;
    position:absolute;
    top:2px;
    left:42px;
}
:not([show_user_info=true]):not([show_site_info=true]).customer-summary-row:hover {
    background: #ddd;
}
.customer-summary-row:focus{
    outline: none;
} 
.customer-summary-row [stage_sync='true'] {
    background: pink;
}
.customerweek-date[show_week_date='true'] {
    color: #000;
    position: absolute;
    left: 8px;
    top: 0px;
    width: 50px;
    text-align: left;
    font-size: 11px;
}

[show_week_date='false'] { visibility:hidden; }

.customer-total {
    font-size:11px;
    float:right;
    margin:10px 8px;
    font-weight:bold;
}
.customer-summary-icon {
    width: 23px;
    height: 23px;
    position: absolute;

}
.customer-project-phase{
    width: 22px;
    height: 22px;
    padding: 2px 3px;
}
.customer-project-phase {
    color: #fff;
    fill:#fff;
    border-radius: 4px;
}
.customer-project-phase--design {
    background: #ed6e22!important;
    fill:#fff;
}
.customer-summary-table {
    table-layout: auto;
        width: 95%;
}
.schedule-summary-grid .customer-project-phase--design svg {
    margin: -1px 0px 0px 0px;
}
.customer-summary-table .customer-project-phase--design svg {
    margin: 1px 0px 0px 0px;
}
.customer-project-phase--build {
    background: #327faa !important;
}
.customer-project-phase--review {
    background: #9d2956 !important;
}
.customer-project-phase--launch {
    background: #3cb77a !important;
}
/*.customer-project-phase--design {
    background: #e8a43d;
}
.customer-project-phase--build {
    background: #56aaf3;
}
.customer-project-phase--review {
    background: #099;
}
.customer-project-phase--launch {
    background: #31bf38;
}*/
.customer-project-phase--end {
    background: #999 !important;
}
.customer-project-phase--delayed {
    background: #666 !important;
}
.customer-project-phase--archive {
    background: #444 !important;
}
.customer-summary-item {
    /*color: #fff;
    float: left;
    width: 14%;
    height: 20px;
    text-align: center;*/
    color: #fff;
    fill:#fff;
    float: left;
    width: 6%;
    height: 20px;
    text-align: center;
    margin-left: 1%;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px;
}
customer-summary-cell--customerweek .fa-check-square {
    margin: 0px 0px 0px 2px;
}
.customer-archived {
    background: #111;
    border: 1px solid #111;
}
.customer-summary{
    width: 79%;
    float: right;
}
.customer-summary-wrap{
    width: 20%;
    float: left;
}
.customer-summary-current {
    clear: both;
    float: left;
}
.customer-accountmanager-edit{
    margin-left: 10px;
}
.customer-info-header label {
    width: 200px;
}
.customer-saving-info{
    margin-left: 20px;
}
.customer-saving-info .fa-check{
    color: #080;
}
.customer-saving-info .fa-exclamation-triangle {
    color: #600;
}

.customer-user-list-item--newuser,
.customer-user-list-item--newuser:hover{
    width: 360px;
    background-color: #080;
    color: #fff;
    margin: 20px 100px;
}
.customer-users-list {
    position: absolute;
    width: 300px;
    top: 80px;
    right: 0px;
    min-height: 200px;
    height: 70%;
    overflow: auto;
    color: #333;
}
.customer-users-wrap label {
    position: absolute;
    top: 50px;
    right: 260px;
}
.customer-summary-more{
    float: right;
}

/* MULTI USER */
.customer-user-multiuser-wrap {
    width: 500px;
    padding: 50px 20px;
}
.customer-users-list-item[is_new="true"] {
    background: #080;
    color: #fff;
    border-radius: 4px;
}
.customer-name-col--open {
    font-size: 22px;
    color: #327faa;
}
.customer-toggle {
    float: right;
    margin: 0 6px;
}
.customer-toggle .btn.btn-default {
    width:160px;
}
.sub-row-info {
    display:inline-block;
    float:left;
    /*background:#888;*/
    width:625px;
}
[is_wide='true'] .sub-row-info {
    width: 1145px;
}
.customer-kpi-bar {
    height: 52px;
    line-height: 20px;
    width: 32px;
    margin: 0px 2px;
    position: relative;
    float: left;
    text-align: center;
    font-size: 12px;
}
[isWeekly='true'].customer-kpi-bar{
    width:19px;
}
.customer-kpi-bar-value {
    position: absolute;
    left: 0;
    bottom: -4px;
    right: 0;
    font-size:11px;
    line-height:18px;
    transition: margin-bottom 1s ease-in-out;
}
.customer-kpi-bar-graph {
    position: absolute;
    height:0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    border-radius: 3px 3px 0px 0px;
    transition: height 1s ease-in-out;
}
.sub-row--kpi {
    height: 54px;
    line-height: 54px;
    padding: 0px 0px;
    transition: height 1s ease-in-out, line-height 1s ease-in-out;
    /*margin-bottom:9px;*/
}
.sub-col--kpi {
    height:43px;
    width: 30px;
    font-weight: 300;
    font-size: 12px;
    transform: rotate(-60deg);
    position:relative;
    left:18px;
    overflow:visible;
}
[isWeekly='true'].sub-col--kpi {
    margin-right: -20px;
}
.sub-row--labels{
    height:40px;
}
.sub-col--total{
    width: 40px;
    float: right;
}
.customer-kpi-total {
    text-align: center;
    /*width: 60px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    float: right;
    margin-top: -1px;*/

}
.sub-edit-row i {
    color: darkgoldenrod;
    position: absolute;
    margin: 3px;
}
.cust-required-prompt {
    padding-left: 24px;
}

/* ##### NOTES ##### */

.customer-notes__wrap{
    width: 1150px;
    height: auto;
    margin: 0px auto;
}
.customer-notes__note {
    position: relative;
    width: 100%;
    height:auto;
    min-height: 24px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 2px auto;
}
.customer-notes__note[is_new='true'] {
    border: 1px solid #3cb77a;
}
.customer-notes__note[has_error='true'] {
    border: 1px solid #ff3100;
}
.customer-note__info{
    text-align: right;
    margin: 4px 12px;
}
.customer-note__title {
    float: left;
    margin: 4px 12px;
}
/*.customer-note__title-static {
    width: 650px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}*/

.customer-note__title span {
    position: absolute;
    font-size: 10px;
    color: #777;
    left: 630px;
    top: 4px;
    background: rgba(255,255,255,.8);
    border-radius: 4px;
    padding: 3px;
}
.customer-note__body {
    position: relative;
}
.customer-note__body span{
    position: absolute;
    font-size: 10px;
    color: #777;
    right: 30px;
    top: 4px;
    background: rgba(255,255,255,.8);
    border-radius: 4px;
    padding: 3px;
}
.customer-note__type {
    float: left;
    margin: 4px 12px;
    width: 20px;
}
.customer-note__type select {
    /*border-radius:4px;*/
    border: none;
}
.customer-note__title input {
    border: none;
    width: 650px;
}
.customer-notes__note textarea {
    display: none;
}
.customer-notes__note[is_open='true'] textarea{
    display:block;
    width: 1100px;
    max-width:1100px;
    min-width:1100px;
    min-height: 28px;
    margin: 0px 24px 4px;
}
.customer-note__expand-controls {
    position: absolute;
    left: -18px;
    top: 0px;
    font-size: 18px;
}
.customer-note__expand-controls .fa{
    /*color:#080;*/
}
.customer-note__remove {
    position: absolute;
    right: -24px;
    top: 0px;
    font-size: 18px;
}
.customer-note__remove .fa-times-circle{
    color: #999;
}
.customer-notes-prompts {
    display: inline-block;
    margin: 0px 24px;
    line-height:24px;
}
.customer-notes__projects {
    float: left;
    margin: 4px auto;
}
.customer-notes__projects select {
    /*border-radius: 4px;*/
    border: none;
    max-width: 220px;
    width: 220px;
}
.customer-notes__filters {
    position: relative;
    width: 100%;
    margin: 0px 0px 12px 0px;
}
.customer-note__filters {
    display: inline-block;
    text-align: center;
}
.customer-note__filters--title{
    width: 59%;
}
.customer-note__filters--type {
    width: 30%;
}
.customer-note__filters--date {
    width: 10%;
}
.customer-note__filters[is_selected='true']{
    font-weight: 700;
}
.customer-note__footer {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0px 24px;
}
.customer-note__info--edit {
    float: left;
    color: #999;
}
.customer-note__info--create {
    float: right;
}
.customer-notes__head-control {
    float: right;
    font-size: 12px;
    font-weight: 300;
    margin: 3px 12px;
}
.customer-notes__head-control:focus{
    outline: none;
}

.customer-note__mask{
    background:rgba(255,255,255,0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
/* ####   exFORM SUB   #### */
.customer-sub-row {
    width: 100%;
    margin: 12px auto;
    height: auto;
}
.customer-sub-row .fa-asterisk{
    color: goldenrod;
    font-size:10px;
    margin-top: -4px;
}
.customer-sub-col {
    display: inline-block;
    margin: 0px 6px 0px 0px;
}
.customer-sub-col--prompt {
    float: left;
    margin: 2px 24px;
}
.customer-sub-col--prompt-icon {
    display: inline-block;
    width: 48px;
    text-align: center;
    margin: 0px auto;
}
.customer-sub-col--prompt-icon .fa-check{
    color: #080;
}
    .customer-sub-col--prompt-icon .fa-exclamation-triangle {
        color: #ff3100;
    }