/*******************************************************************************************
CSS Framework based on SMACSS
State rules are ways to describe how our modules or layouts will
look when in a particular state. Is it hidden or expanded? Is it active
or inactive? They are about describing how a module or layout
looks on screens that are smaller or bigger. They are also about describing
how a module might look in different views like the home
page or the inside page.
*******************************************************************************************/

.tile-active {
    background-color:rgb(0,66,80) !important;
    color:white;
}

.k-state-selected { /* NOTE:  this is to offset the orange highlighted that kendo applies by default */
    background-color:rgb(0,66,80) !important;
}
.k-state-selected  > .gridcellvalue { 
    background-color:rgb(0,66,80) !important;
}

.approvalstatus_ {
    background-color:#e9e9e9;  
}
.kpi-goal-above, .kpi-goal-indicator-1, .approvalstatus_approved {
    background-color:#69BE28;
}
.kpi-goal-close, .kpi-goal-indicator-0, .approvalstatus_preapproved {
    background-color:#EBD247;
}
.kpi-goal-below, .kpi-goal-indicator--1, .approvalstatus_notapproved {
    background-color:#f31b1b;
}
.kpi-goal-notset, .kpi-goal-indicator-2 {
    background-color:rgb(0,66,80); /*#c9cac8; #8b8d8e dark blue*/
}
.kpi-goal-nodata {
    background-color:gray;
}
.kpi-trend-up, .kpi-trend-indicator-1 {
    background-image:url("images/arrow-up-16.png");
    background-repeat:no-repeat;
    background-position-y:center;
    background-position-x:center;
}
.kpi-trend-down, .kpi-trend-indicator--1 {
    background-image:url("images/arrow-down-16.png");
    background-repeat:no-repeat;
    background-position-y:center;
    background-position-x:center;
}
.kpi-trend-same, .kpi-trend-indicator-0 {
    background-image:url("images/arrow-right-16-gray.png");
    background-repeat:no-repeat;
    background-position-y:center;
    background-position-x:center;
}
/*
                // status  trend  combo
            //    2      1     12
            //    2      0     11
            //    2      -1    10     //status=2 is an unknown goal
            //    1      1      9
            //    1      0      8
            //    1      -1     7
            //    0      1      6
            //    0      0      5
            //    0      -1     4
            //    -1     1      3
            //    -1     0      2
            //    -1     -1     1
    */
.kpi-indicator-1  { background-color: #f31b1b; background-image:url("images/arrow-down-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-2  { background-color: #f31b1b; background-image:url("images/arrow-right-16-gray.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-3  { background-color: #f31b1b; background-image:url("images/arrow-up-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-4  { background-color: #EBD247; background-image:url("images/arrow-down-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-5  { background-color: #EBD247; background-image:url("images/arrow-right-16-gray.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-6  { background-color: #EBD247; background-image:url("images/arrow-up-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-7  { background-color: #69BE28; background-image:url("images/arrow-down-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-8  { background-color: #69BE28; background-image:url("images/arrow-right-16-gray.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-9  { background-color: #69BE28; background-image:url("images/arrow-up-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-10 { background-color: rgb(0,66,80); background-image:url("images/arrow-down-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-11 { background-color: rgb(0,66,80); background-image:url("images/arrow-right-16-gray.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }
.kpi-indicator-12 { background-color: rgb(0,66,80); background-image:url("images/arrow-up-16.png"); background-repeat:no-repeat; background-position-y:center;background-position-x:left; }



.area-featured-orange {
    border:solid 2px orange;
}

.area-featured {
    border:solid 4px gray;
}
.area-featured-top {
    border-top:solid 6px gray;
}
.area-featured-bottom .tile {
    /*border-bottom:solid 6px gray;*/
    border:solid 2px gray !important;
}

.area-transparent-25 {
    opacity:0.25;
    filter:alpha(opacity=25); /* For IE8 and earlier */
}
.area-transparent-50 {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}
.area-transparent-75 {
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
}

.form-success {
    background-color: rgb(220, 243, 228);
    border:solid 1px #008d32;
    color:green;
}
.form-warning {
    border: 1px solid rgb(163, 25, 25); 
    color: rgb(163, 25, 25);
    background-color: rgb(255, 255, 221); 
}
.form-failure {
    border: 1px solid rgb(163, 25, 25); 
    color: rgb(163, 25, 25);
    background-color: rgb(255, 255, 221); 
}

.clearfix {
    clear: both;
}
.position-relative {
    position:relative;
}

.autocomplete-input-active {
    border:solid 1px rgb(0,66,80) !important;
}

.datafreshness {
    cursor:pointer;
    width:20px;
    display:inline-block;
    background-repeat:no-repeat;
    background-position-x:3px;
    background-position-y:2px;
}
.datafreshness-best {
    background-image:url('images/lqr/datafreshness-donut-best-16.png');
}
.datafreshness-good {
    background-image:url('images/lqr/datafreshness-donut-good-16.png');
}
.datafreshness-poor {
    background-image:url('images/lqr/datafreshness-donut-poor-16.png');
}
.datafreshness-error {
    background-image:url('images/lqr/datafreshness-bars-error-16.png');
}
.datafreshness-auto {
    background-image:url('images/lqr/refresh-16-gray.png');
    background-size: 50%;
    background-position: center;
}

.highlighted {
    position: relative;
    z-index: 100000;
    xbackground-color:#E17000 !important;
    background-color:white !important;
    border: solid 3px #c9cac8;
    xcolor:gray !important;
    xfont-weight:bold;
    padding:10px 20px 10px 20px;
}