@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

.tile-wrapper-container {
    width: 100%;
}

    .tile-wrapper-container h3 {
        color: #fff !important;
        text-align: center;
    }

.tile-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 2.5vh;
}

.tile-badge {
    margin: 20px;
}

.tile-item {
    margin: 20px;
}

/*    .tile-item #badge {
        position: relative;
        right: 10px;
        top: 0px;
        font-size: 20px;
        font-weight: 300;
    }*/

.tile {
    background-color: #fff;
    width: 14em;
    min-height: 8vh;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
    float: left;
}

    .tile .header {
        height: 4.5em;
        background-color: #f4f4f4;
        border-radius: 10px 10px 0 0;
        color: white;
        font-weight: 300;
        vertical-align: middle;
        padding: 10px 15px;
    }
      
    .tile.wide .header .left, .tile.wide .header .right {
        width: 160px;
        float: left;
    }

    .tile .header .count {
        text-align: right;
        color: #000;
        font-size: 32px;
        font-weight: 600;
    }

    .tile .header .title {
        text-align: left;
        font-size: 18px;
        font-weight: 600;
    }

    .tile .body {
        min-height: 2.6em;
        border-radius: 0 0 10px 10px;
        color: #333333;
        background-color: white;
    }

        .tile .body .title {
            text-align: left;
            padding-top: 2%;
            padding-left: 2%;
        }

        .tile .body .count {
            float:right;
            text-align: right;
        }

    .tile.wide .body .title {
        padding: 4%;
    }

    .tile.job .header {
        background: linear-gradient(to top, #DC911B, #D78D19 25%, #F4B149 100%);
    }

    .tile.job .body {
        color: #D78D19;
    }

    .tile.resource .header {
        background: linear-gradient(to bottom right, #ef7f00, #f7b200);
    }

    .tile.resource .body {
        color: #ef7f00;
    }

    .tile.quote .header {
        background: linear-gradient(to bottom right, #1f6abb, #4f9cf2);
    }

    .tile.quote .body {
        color: #1f6abb;
    }

    .tile.invoice .header {
        background: linear-gradient(to bottom right, #0aa361, #1adc88);
    }

    .tile.invoice .body {
        color: #0aa361;
    }
.flexRowItem .balanceCol {
    width: 33%;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

table#balanceKpiTable {
    table-layout: fixed;
    width:100%;
}
    table#balanceKpiTable th {
        width: 50%;
        font-size: 18px;
        font-weight: 400;
    }

    table#balanceKpiTable td {
        color: #000;
        width: 25%;
        font-size: 18px;
        font-weight: 400;
    }
        table#balanceKpiTable td#comparison {
            width: 10%;
            font-size: 10px;
            font-weight: 400;
        }

.kpiTile {
    background-color: #fff;
    width: 12em;
    min-height: 8vh;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
    float: left;
}
    .kpiTile.balance {
        width: 19em;
    }

    .kpiTile .header {
        height: 6em;
        background-color: #f4f4f4;
        border-radius: 10px 10px 0 0;
        color: white;
        font-weight: 300;
        vertical-align: middle;
        padding: 2% 2%;
    }

    .kpiTile .header .title {
        vertical-align: top;
        text-align: left;
        padding: 2% 2%;
    }

    .kpiTile .header .value {
        color: #000;
        vertical-align: middle;
        font-size: 32px;
        font-weight: 600;
    }

    .kpiTile .header .value .subValue {
        float: right;
        padding: 4% 2%;
        text-align: right;
        color: #000;
        vertical-align: middle;
        font-size: 18px;
        font-weight: 400;
    }

    .kpiTile .body {
        min-height: 2.6em;
        border-radius: 0 0 10px 10px;
        color: #333333;
        background-color: white;
        padding: 2% 2%;
    }
        .kpiTile .body .row {
            padding: 2% 2%;
        }

        .kpiTile .body .title {
            text-align: left;
            padding-top: 2%;
            padding-left: 2%;
        }

        .kpiTile .body .value {
            text-align: left;
            color: #000;
            font-size: 20px;
            font-weight: 600;
        }

        .kpiTile .body .subValue {
            text-align: right;
            color: #000;
            font-size: 14px;
            font-weight: 400;
        }

        .kpiTile .body .value .subValue {
            float:right;
            padding: 2% 2%;
            text-align: right;
            color: #000;
            font-size: 14px;
            font-weight: 400;
        }

        .kpiTile .body .balanceValue .subValue {
            float: right;
            padding: 2% 2%;
            text-align: right;
            color: #000;
            font-size: 14px;
            font-weight: 400;
        }

.kpiTileAll {
    background-color: #fff;
    width: 20em;
    min-height: 15vh;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);
    float: left;
}

    .kpiTileAll .header {
        height: 10em;
        background-color: #f4f4f4;
        border-radius: 10px 10px 0 0;
        color: white;
        font-weight: 300;
        vertical-align: middle;
        padding: 2% 2%;
    }

    .kpiTileAll .body {
        min-height: 2.6em;
        border-radius: 0 0 10px 10px;
        color: #333333;
        background-color: white;
        padding: 2% 2%;
    }

    .kpiTileAll .bodyAll {
        float: right;
        min-height: 17.6em;
        border-radius: 0 0 10px 10px;
        color: #333333;
        background-color: white;
        padding: 2% 2%;
    }

    .kpiTileAll .header .value {
        color: #000;
        vertical-align: middle;
        font-size: 32px;
        font-weight: 600;
    }

    .kpiTileAll .header .value .subValue {
        float: right;
        padding: 4% 2%;
        text-align: right;
        color: #000;
        vertical-align: middle;
        font-size: 18px;
        font-weight: 400;
    }



.kpiTile.job .header {
    background: linear-gradient(to top, #DC911B, #D78D19 25%, #F4B149 100%);
}

.kpiTile.job .body {
    color: #D78D19;
}

.kpiTileAll.job .header {
    background: linear-gradient(to top, #DC911B, #D78D19 25%, #F4B149 100%);
}

.kpiTileAll.job .body {
    color: #D78D19;
}

.bodyContent {
    padding: 6px 8px;
    width: 100%;
    max-height: inherit;
}

    .bodyContent a {
        color: #DC931E;
        font-size: 14px;
        vertical-align: middle;
    }

    .bodyContent a:hover {
        opacity: 0.5;
        text-decoration: none;
    }

    .bodyContent a img {
        height: 1.5em !important;
    }

.tileHover:hover {
    cursor: pointer;
}

    .tileHover:hover > .title {
        opacity: 0.5;
    }