*{

    position: relative;
}
@media print
{    
    .no_print, .no_print *
    {
        display: none !important;
    }
    #main_right_panel{
        width:100%!important;
        height:auto!important;
    }
    html,body,#all_panels,#all_panels>.panel{
        height:auto!important;
        overflow: visible!important;
    }
    .section_body{
        min-height: 0px!important;
        border:none!important;
    }
    .file_dropper,.hotlist{
        display: none!important;
    }
    .section_header{
        background: none!important;
        text-align:left!important;
        border:none!important;
        border-bottom: 1px solid black!important;
    }
    .section_buttons{
        display: none!important;
    }
    .no_items{
        padding:5px!important;
        font-size:12px!important;
    }
    .no_items>i{
        font-size:13px!important;
    }
}
#sync_loader{
    position: absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    height:15px;
    background: linear-gradient(to bottom, rgba(58,58,58,1) 1%,rgba(33,33,33,1) 100%);
}
#sync_loader .sync_progress_outer{
    display: block;
    width: 100%;
    height:15px;
    color:#fff;
    text-align: center;
    pointer-events: none;
}
#sync_loader .sync_progress_outer>div{
    height:100%;
    width:0px;
    opacity: .6;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100;Blue+Gloss+%232 */
    background: rgb(59,103,158); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    transition: .1s all ease;
}
#sync_loader .sync_progress_outer>span{
    height:100%;
    width:100%;
    position: absolute;
    display:block;
    top:0px;
    left:0px;
    font-size:10px;
    height:15px;
    line-height:15px;
    opacity: .8;
}

#main_customers_table_holder{
    width:100%;
    height:calc(100% - 300px);
    overflow:auto;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    position: absolute;
    width:280px;
    bottom:50px;
    right:5px;
    background:#fff;
}

#main_customers_table_holder.extended{
    width:690px;
}

#main_customers_table_holder .extended_cell{
    display:none;
}

#main_customers_table_holder.extended .extended_cell{
    display:inline-block;
}

#main_customers_table .sort_icon{
    position: absolute;
    right:5px;
    top:10px;
    font-size: 12px;
    color:#009966;
    width:10px;
    pointer-events: none;
}
#main_right_panel,#main_central_panel{
    white-space: normal!important;
}
#main_central_panel{
    padding-bottom: 15px;
}
#main_central_panel.extended{
    width:500px!important;
}

#main_right_panel.extended{
    width:calc(100% - 700px)!important;
}

.no_items{
    background: none;
    font-size: 16px;
    color:rgba(0,0,0,.4);
    text-align: center;
    padding: 50px;
}
.no_items>i{
    font-size: 32px;
    vertical-align: middle;
}

#main_customer_loader{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    z-index: 10000000;
    background: rgba(255,255,255,.9);
    color:#006699;
    font-size: 18px;
    padding: 50px;
    text-align: center;
}

.loader{
    background: rgba(0,0,0,.05);
    color:#006699;
    font-size: 12px;
    text-align: center;
    padding: 40px;
}
.loader>i{
    font-size: 32px;
    vertical-align: middle;
}
#main_customers_table .heat{
    margin: 5px;
    width:15px;
    height:15px;
    background:#ddd;
    padding: 0px;
    border-radius:10px;
}
#main_customers_table .company_details{
    padding: 2px;
    line-height: 11px;
    height:auto;
    width:200px;
}

#main_customers_table .contract >i.icon{
    font-size: 18px;
    z-index: 1;
    margin-top: 5px;
    color:#777;

}
#main_customers_table .contract >i.status{
    font-size: 10px;
    border-radius: 100%;
    padding:1px;
    position: absolute;
    z-index: 10;
    top:15px;
    right:5px;
    font-size: 10px;
}

#main_customers_table .machines,#main_customers_table .files{
    line-height:20px;
}
#main_customers_table .machines >i{
    font-size: 14px;
    color:#aaa;
    z-index: 1;

}
#main_customers_table .machines >span{
    font-size: 14px;
    color:#fff;
    background: #006699;
    border-radius: 3px;
    padding:0px 3px;
    position: absolute;
    z-index: 10;
    top:15px;
    right:10px;
    font-size: 10px;
    line-height:12px;
}
#main_customers_table .last_contact{
    position: absolute;
    right:5px;
    bottom:0px;
    font-size: 9px;
    color:#999;
    font-style: italic;
    height:10px;
    line-height:10px;
}

#main_customers_table .files >i{
    font-size: 12px;
    color:#444;
    z-index: 1;

}
#main_customers_table .files >span{
    color:#fff;
    background: #006699;
    border-radius: 1px;
    padding:0px 3px;
    position: absolute;
    z-index: 10;
    top:7px;
    right:9px;
    font-size: 10px;
    line-height:12px;
}
#main_customers_table .is_client >i{
    margin-top: 0px;
    border-radius: 1px;
    width:16px;
    height:16px;
    line-height: 16px;
    text-align: center;
    color:#fff;
    font-size: 11px;
    display: inline-block;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#50cc3d+0,299a0b+100 */
    background: rgb(80,204,61); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(80,204,61,1) 0%, rgba(41,154,11,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(80,204,61,1) 0%,rgba(41,154,11,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(80,204,61,1) 0%,rgba(41,154,11,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50cc3d', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}

#main_customers_table .company_details .company_name{
    white-space: nowrap;
    font-weight: 500;
    text-transform: uppercase;
    overflow: hidden;
}

#main_customers_table .company_details .company_address{
    white-space: nowrap;
    font-size:.95em;
    color:#444;
    height:12px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width:calc(100% - 55px);
}
#main_customers_table .company_details .company_postcode{
    white-space: nowrap;
    font-size:.95em;
    color:#777;
    height:12px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width:50px;
    text-transform: uppercase;
    color:#111;
    text-align: right;
}


#customer_supplier_filter{
    text-align: left;
    width:100%;
    position: absolute;
    bottom:60px;
}
#customer_supplier_filter>span {
    font-size: 10px;
    color:#777;
    display: inline-block;
    vertical-align: top;
    height: 15px;
    width:100%;
    /*width: 40px;*/
    line-height: 30px;
    text-align: left;
    margin-right: 5px;
}

#customer_hotlist_filter{
    text-align: left;
    width:100%;
    position: absolute;
    bottom:5px;
}
#customer_hotlist_filter>span {
    font-size: 10px;
    color:#777;
    display: inline-block;
    vertical-align: top;
    height: 15px;
    width:100%;
    /*width: 40px;*/
    line-height: 12px;
    text-align: left;
    margin-right: 5px;
}
#customer_hotlist_filter>div {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 20px;
    margin: 0px 1px;
    transition: .1s all ease;
    outline:2px solid transparent;
    user-select: none;
}
#customer_hotlist_filter >div >div {
    width: 100%;
    height: 100%;
    height: 20px;
    line-height: 20px;
    color: rgba(255,255,255,.8);
    font-size: 10px;
    text-align: center;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 );
}
#customer_hotlist_filter >div.active{
    outline-color:rgba(0,0,0,.5);
}
#customer_hotlist_filter >div:hover{
    outline-color:rgba(0,0,0,.1);
}
#customer_search {
    /*background: #fff;*/
    max-width: 20rem;
    margin: 5px auto;
    height:200px;
}

#customer_search input {
    /*position: absolute;*/
    outline: none;
    width: 15rem;
    padding: 0px 15px;
    height:40px;
    line-height:40px;
    float: right;
    border: 0;
    background: #fff;
    border-radius: 3px 0 0 3px;
    max-width: calc(100% - 80px);
    overflow: hidden;
    border-radius: 0 3px 3px 0;
}
#customer_search .search_handle {
    overflow: visible;
    font-size: 16px;
    position: relative;
    float: left;
    border: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 72px;
    color: #fff;
    background: #0cace8;
    overflow: hidden;
    border-radius:  3px 0 0 3px ;
}
/*#customer_search button:before {
    content: '';
    position: absolute;
    border-width:  8px 0 8px 8px;
    border-style: solid ;
    border-color: transparent #0cace8 transparent;
    top: 12px;
    right: -8px;
}*/

.customer_equipment>.item{
    width:100%;
    margin-bottom: 5px;
}
.customer_equipment>.item>.quantity{
    display: inline-block;
    width:30px;
    vertical-align: top;
}
.customer_equipment>.item>.name{
    display: inline-block;
    width:150px;
    vertical-align: top;
}
.customer_equipment>.item>.name>span{
    font-style: italic;
    color:#777;
}
.customer_equipment>.item>.meters{
    display: inline-block;
    width:450px;
    vertical-align: top;
}

.customer_equipment>.item>.meters>.sequence {
    width:100%;
    margin-bottom:5px;
}
.customer_equipment>.item>.meters>.sequence >.name{
    display: inline-block;
    vertical-align: top;
    width:100px;
    color:#006699;
}
.customer_equipment>.item>.meters>.sequence >.name >span{
    font-size:.9em;
    color:#777;
}
.customer_equipment>.item>.meters>.sequence >.readings{
    display: inline-block;
    vertical-align: top;
    width:350px;
}
.customer_equipment>.item>.meters>.sequence >.readings .value{
    display: inline-block;
    vertical-align: top;
    width:50px;
    font-size: 10px;
}
.customer_equipment>.item>.meters>.sequence >.readings .value{
    display: inline-block;
    vertical-align: top;
    width:70px;
}
.customer_equipment>.item>.meters>.sequence >.readings .date{
    display: inline-block;
    vertical-align: top;
    width:80px;
}
.customer_equipment>.item>.meters>.sequence >.readings .CBC,.customer_equipment>.item>.meters>.sequence >.readings .MAU{
    display: inline-block;
    vertical-align: top;
    width:80px;
}    

#all_buttons{
    width:100%;
    height:30px;
    padding: 5px;
    text-align: center;
}
#all_buttons>button.active{
    color:#006699;
    font-weight: 600;
}

#all_panels{
    width:100%;
    height:100%;
    white-space: nowrap;
}
#all_panels>.panel{
    display: none;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#e5e5e5;
}
#all_panels>.panel.active{
    display: block;
}
#all_panels>.panel >.header{
    width:100%;
    height:30px;
    line-height:20px;
    padding: 5px;
    font-size: 18px;
    color:#009966;
}
#all_panels>.panel >.body{
    width:100%;
    height:calc(100% - 30px);
    background: #f0f0f0;
    overflow:auto;
}

.person_card{
    position:relative;
    border-radius: 3px;
    width:130px;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    border:1px solid #ddd;
    padding:5px;
    padding-top: 20px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
.person_card .is_vantage{
    width:100%;
    position: absolute;
    top:0;
    left:0;
    height:15px;
    line-height:15px;
    color:#fff;
    font-size: 11px;
    background: #999;
}
.person_card >.name{
    line-height:13px;
    font-size: 12px;
    color:#006699;
    z-index: 100;
}
.person_card >.role{
    width:100%;
    line-height:11px;
    font-size: 10px;
    color:#444;
    z-index: 100;
    white-space: nowrap;
}
.person_card >.icon{
    position:absolute;
    top:-5px;
    left:-5px;
    width:25px;
    height:25px;
    line-height:25px;
    font-size: 18px;
    color:rgba(255,255,255,.8);
    z-index: 0;
}
.person_card >.email{
    display: block;
    text-decoration: none;
    color:#009966;
    height:11px;
    line-height:11px;
    font-size: 10px;
    margin-top: 2px;
    cursor: pointer;
    overflow: hidden;
    z-index: 100;
    opacity:0;
    pointer-events: none;
    white-space: nowrap;
}

.person_card >.phone{
    color:#009966;
    height:10px;
    line-height:10px;
    font-size: 10px;
    margin: 1px 0px;
    cursor: pointer;
    z-index: 100;
    opacity:0;
    pointer-events: none;
    white-space: nowrap;
}
.person_card >.phone:hover,.person_card >.email:hover{
    color:#006699;
    text-decoration: underline;
    z-index: 100;
}

.person_card >.phone.active,.person_card >.email.active{
    opacity:1;
    pointer-events: auto;
}

.person_card >.roles{
    width:100%;
    text-align: center;
    margin: 10px 0px;
}

.person_card >.roles>i{
    font-size:11px;
    width:20px;
    height:20px;
    line-height:20px;
    border-radius: 1px;
    background:#ddd;
    color:#777;
    margin: 1px;
    display: inline-block;
    vertical-align: top;
    border:1px solid rgba(0,0,0,.1);
}

.person_card >.roles>i:hover{

    border-color: #006699;
    color: #006699;
}
.person_card >.roles>i.active{
    color:#fff;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#299a0b+0,197213+99 */
    background: #299a0b; /* Old browsers */
    background: -moz-linear-gradient(top, #299a0b 0%, #197213 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #299a0b 0%,#197213 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #299a0b 0%,#197213 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#197213',GradientType=0 ); /* IE6-9 */
}

.equipment_card{
    width:100%;
    font-size:0px;
}
.equipment_card .headers{
    width:100%;
    font-size:10px;
    height:11px;
    line-height:11px;
    margin-bottom:5px;
}
.equipment_card >.details{
    width:calc(100% - 40px);
    display:inline-block;
    vertical-align:top;
}
.equipment_card >.icon{
    width:30px;
    height:30px;
    line-height:30px;
    color:#777;
    font-size:16px;
    text-align:center;
    display:inline-block;
    vertical-align:top;
}
.equipment_card >.meter_readings{
    width:450px;
    display:inline-block;
    vertical-align:top;
}

.equipment_card .meters{
    display: inline-block;
    width:450px;
    vertical-align: top;
}

.equipment_card .meters>.sequence {
    width:100%;
    font-size: 10px;
    margin-bottom:5px;
}
.equipment_card .meters>.sequence >.name{
    display: inline-block;
    vertical-align: top;
    width:100px;
    padding-right: 10px;
    text-align: right;
    color:#006699;
}
.equipment_card .meters>.sequence >.name >span{
    font-size:.9em;
    color:#777;
}
.equipment_card .meters>.sequence >.readings{
    display: inline-block;
    vertical-align: top;
    width:350px;
}
.equipment_card .meters>.sequence >.readings .value{
    display: inline-block;
    vertical-align: top;
    width:50px;
    font-size: 10px;
}
.equipment_card .meters>.sequence >.readings .value{
    display: inline-block;
    vertical-align: top;
    width:60px;
}
.equipment_card .meters>.sequence >.readings .date{
    display: inline-block;
    vertical-align: top;
    width:60px;
}
.equipment_card .meters>.sequence >.readings .CBC,.equipment_card .meters>.sequence >.readings .MAU
,.equipment_card .meters>.sequence >.readings .CPC,.equipment_card .meters>.sequence >.readings .INV{
    display: inline-block;
    vertical-align: top;
    width:55px;
}   

.note_card{
    display: inline-block;
    vertical-align: top;
    width: 200px;
    /*min-width: 175px;*/
    padding:10px;
    margin:5px;
    position: relative;
    background: lightyellow;  
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

.note_card .pinned{
    position: absolute;
    top:-5px;
    font-size: 18px;
    right:0px;
    color:#ccc;
    transition:.1s all ease;
}
.note_card .pinned:hover{
    color:#009966;
}
.note_card .pinned:active{
    transform:scale(.9);
}
.note_card .pinned.yes{
    color:#009966;
}
.note_card .icon{
    position: absolute;
    top:2px;
    left:2px;
    font-size: 18px;
    color:#C1AB00;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.note_card .date{
    color:#006699;
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 5px;
    text-align: right;
}
.note_card .notes{
    color:#111;
    font-size: 11px;
    line-height: 12px;
}

.file_dropper{
    z-index: 100000;
    position: absolute;
    top: -5px;
    right: -5px;
    width:100px;
    height:150px;
    line-height: 150px;
    border:1px solid #008FC4;
    background:#A9DAE8;
    color:rgba(255,255,255,.5);
    font-size: 12px;
    text-align: center;
}
.file_dropper:hover{
    background: #5FA7BF;
}
.file_dropper:active{
    background: #D0E4EA;
}

.file_card{
    width:100%;
    display: inline-block;
    vertical-align: top;
    padding:2px;
    border:1px solid #aaa;
    background: #f0f0f0;
    margin: 1px;
    text-align: left;
    position: relative;
}

.file_card .icon{
    margin-right: 5px;
    font-size: 14px;
    text-align: center;
    color:rgba(255,255,255,.9);
    width:20px;
    height:20px;
    line-height:20px;
    display:inline-block;
    vertical-align: top;
    position: relative;
}

.file_card .icon>div{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.28+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.28) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.28) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#47000000',GradientType=0 ); /* IE6-9 */
}

.file_card .date{
    text-align: left;
    font-size: 10px;
    color:#444;
    width:60px;
    height:20px;
    line-height:10px;
    display:inline-block;
    vertical-align: top;
    overflow: hidden;
}

.file_card .size{
    text-align: left;
    font-size: 10px;
    color:#777;
    font-style: italic;
    width:60px;
    height:20px;
    line-height:10px;
    display:inline-block;
    vertical-align: top;
    overflow: hidden;
}

.file_card .name{
    text-align: left;
    font-weight: 600;
    color:#111;
    font-size: 10px;
    width:200px;
    height:20px;
    line-height:20px;
    display:inline-block;
    vertical-align: top;
    overflow: hidden;
}


.contract_card{
    width:400px;
    display: inline-block;
    vertical-align: top;
    border:1px solid #aaa;
    background: #f0f0f0;
    margin: 5px;
    text-align: center;
    position: relative;
}

.contract_card .ref{
    width:100%;
    height:25px;
    font-size:11px;
    color:#111;
    background: #e5e5e5;
    text-align: left;
    line-height:25px;
    padding-left:30px;
    position: relative;
    margin-bottom: 10px;
}
.contract_card .ref >i{
    display: block;
    position: absolute;
    top:-5px;
    left:-5px;
    color:#444;
    font-size: 24px;
}

.contract_card .icon{
    width:100%;
    height:32px;
    line-height:32px;
}

.contract_card .val{
    width:100%;
    font-size:10px;
    /*height:11px;*/
    line-height:12px;
    text-align: left;
    padding: 1px;
}
.contract_card .status_icons{
    position:absolute;
    top:-5px;
    right:-5px;
}
.contract_card .status_icons >i{
    width:25px;
    height:25px;
    line-height:25px;
    font-size: 12px;
    margin: 1px;
    color:rgba(255,255,255,.7);
    border-radius: 2px;
    display: inline-block;
    vertical-align: top;
}
.contract_card .square_val{
    display: inline-block;
    vertical-align: top;
    border:1px solid #006699;
    margin:10px 1px;
    text-align:center;
    font-size: 16px;
    width:60px;
    padding-bottom: 10px;
}

.contract_card .square_val >b{
    display:block;
    font-weight:400;
    width:100%;
    line-height:10px;
    height:25px;
    padding:2px;
    background:#006699;
    font-size: 10px;
    color:#fff;
    margin-bottom: 10px;
}
.contract_card .modifed_by{
    background:#ddd;
    color:#006699;
    font-size: 10px;
    line-height:11px;
    padding: 5px;
}



.lease_card{
    width:190px;
    display: inline-block;
    vertical-align: top;
    padding:0px;
    border:1px solid #aaa;
    background: #f0f0f0;
    margin: 5px;
    text-align: center;
    position: relative;
}

.lease_card >.ref{
    width:100%;
    height:20px;
    line-height:20px;
    padding-left:30px;
    font-size:11px;
    color:#777;
    background: #e5e5e5;
    text-align: left;
    position: relative;
    margin-bottom: 10px;
}
.lease_card >.ref >i{
    display: block;
    position: absolute;
    top:-10px;
    left:-10px;
    font-size: 24px;
}
.lease_card >.company{
    width:100%;
    height:25px;
    line-height:12px;
    font-size:11px;
    overflow: hidden;
    color:#006699;
    text-align: left;
}

.lease_card >.icon{
    width:100%;
    height:32px;
    line-height:32px;

}
.lease_card >.val{
    width:100%;
    font-size:10px;
    /*height:11px;*/
    line-height:12px;
    text-align: left;
    padding: 1px;
}

.lease_card >.status_icons{
    position:absolute;
    top:-5px;
    right:-5px;
}

.lease_card >.status_icons >i{
    width:25px;
    height:25px;
    line-height:25px;
    font-size: 12px;
    margin: 1px;
    color:rgba(255,255,255,.7);
    border-radius: 2px;
    display: inline-block;
    vertical-align: top;
}
.lease_card .square_val{
    display: inline-block;
    vertical-align: top;
    border:1px solid #006699;
    margin:10px 1px;
    text-align:center;
    font-size: 11px;
    width:55px;
    padding-bottom: 5px;
}

.lease_card .square_val >b{
    display:block;
    font-weight:400;
    width:100%;
    line-height:10px;
    height:25px;
    padding:2px;
    background:#006699;
    font-size: 10px;
    color:#fff;
    margin-bottom: 10px;
}
.lease_card .modifed_by{
    background:#aaa;
    color:#111;
    font-size: 10px;
    line-height:11px;
    padding:5px;
}

.lease_card .equipment{
    width:100%;
    font-size: 0px;
    margin: 10px 0px;
}
.lease_card .equipment >.item .quantity{
    width:20px;
    font-size: 12px;

    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 20px;
    color:#006699;
    padding: 5px;
}

.lease_card .equipment >.item .details{
    width:calc(100% - 20px);
    font-size: 10px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    line-height: 10px;
    padding: 5px;
}

.ticket_card{
    width:100%;
    font-size: 0px;
    margin-bottom: 10px;
}

.ticket_card >.date{
    width:60px;
    line-height:11px;
    margin-left: 5px;
    font-size:10px;
    color:#777;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.ticket_card >.details{
    width:calc(100% - 65px);
    line-height:11px;
    color:#111;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
.ticket_card >.details>.ref{
    color:#006699;
    font-size:10px;
}
.ticket_card >.details>.name{
    color:#111;
    font-weight:600;
    font-size:10px;
}
.ticket_card >.details>.part,.ticket_card >.details>.serial{
    color:#777;
    font-weight:600;
    width:50%;
    height:11px;
    line-height: 11px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    font-size:10px;
}
.ticket_card >.details>.units{
    color:#111;
    padding-left: 20px;
    font-size:10px;
}
.ticket_card >.details>.units>.item{
    position: relative;
    margin:5px 0px;
    padding-left: 20px;
}
.ticket_card >.details>.units>.item>i{
    position: absolute;
    top:0px;
    left:2px;
    color:#006699;
    font-size: 16px;
}
.ticket_card >.details>.units>.item>.symptoms{
    color:#111;
}
.ticket_card >.details>.units>.item>.symptoms{
    color:#777;
    font-style: italic;
}

.call_card{
    border-bottom: 1px solid rgba(0,0,0,.1);
    width:100%;
    font-size: 0px;
    margin-bottom: 2px;
    padding: 2px 0px;
    position: relative;
}

.call_card >.date{
    width:100px;
    line-height:11px;
    margin-left: 5px;
    font-size:10px;
    color:#777;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    position: relative;
}
.call_card >.notes{
    width:calc(100% - 160px);
    line-height:10px;
    color:#111;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 9.5px;
    position: relative;
}


.call_card >.notes>.followup{
    width:100%;
    line-height:10px;
    color:#444;
    font-style: italic;
    padding: 5px 10px;
    padding-left: 110px;    
    font-size: 9.5px;
    margin-top: 5px;
    position: relative;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.15+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.call_card >.notes>.followup>.date{
    color:#006699;
    position: absolute;
    top:5px;
    left:0px;
    width:100px;
    text-align: right;
}

.call_card >.comment{
    width:45px;
    margin:0px;
}

.reminder_card{
    border-bottom: 1px solid rgba(0,0,0,.1);
    width:100%;
    font-size: 0px;
    margin-bottom: 2px;
    padding: 2px 0px;
    position: relative;
}

.reminder_card >.date{
    width:100px;
    line-height:11px;
    margin-left: 5px;
    font-size:10px;
    color:#777;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    position: relative;
}
.reminder_card >.notes{
    width:calc(100% - 200px);
    line-height:10px;
    color:#111;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 9.5px;
    position: relative;
}


.reminder_card >.notes>.state{
    font-size: 10px;
    color:#006699;
}
.reminder_card >.btn{
    width:45px;
    margin:0px 1px;
}

#richards_hover{
    position: fixed;
    top:5px;
    left:5px;
    height:230px;
    width:690px;
    background: #fff;
    background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(249,249,249,1) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    border:1px solid #aaa;

}
#richards_hover.active{
    opacity: 1;

}


.hover_show{
    opacity:0;
    pointer-events: none;
}
.hover_show_container:hover .hover_show{
    opacity:1;
    pointer-events: auto;
}


.merge_item{
    padding:5px;
    width:100%;
    border:1px solid #aaa;
}
.clickable{
    pointer-events: cursor;
}
.clickable:hover{
    text-decoration: underline;
}