﻿.campaign-report {
    .summary-row {
        font-weight: bold;
        border-top: 1px solid @table-border-color;
    }

    .summary-row:last-child {        
        border-bottom: 1px solid @table-border-color;
    }

    .summary-row td {
        vertical-align: middle;
        line-height: @btn-line-height;
    }

    .separator-row {
        border-bottom: 1px solid @table-border-color;

        td {
            padding: 0;
            line-height: @line-height-50;
        }

        td:hover {
            background-color: transparent;
            border-top-color: transparent;
            border-bottom-color: @table-border-color;
        }
    }

    .separator-row:hover{
        background-color: transparent;
    }

    table {
        table-layout: fixed;
        word-wrap: break-word;

        tr {
            border-bottom: transparent;
        }

        td, th > a {
            white-space: normal;
        }
    }

    .main-column-icon-size {
        width: @icon-size-80;
    }

    .blue {
        color: @color-blue-100;
    }

    .campaign-objective {
        background-color: @color-gray-155;
        padding: @padding-large-vertical @padding-large-horizontal @padding-large-horizontal @padding-large-horizontal;
        clear: both;
        overflow: hidden;

        &.met {
            background-color: @color-green-130;
        }

        .objective-header {
            padding: 0;

            h4 {
                color: @text-color;
                margin-bottom: @margin-50 * 0.5;
            }
        }

        .objective-result {
            font-size: @font-size-huge;
            font-weight: bold;
            text-align: right;
            padding-top: @padding-large-vertical;
        }

        .objective-detail {
            padding: 0;

            dl {
                margin: 0;
                padding: 0;
                float: right;

                dt {
                    .h4;
                    color: @text-color;
                    text-align: left;
                    margin-bottom: @margin-50 * 0.5;
                }

                dd {
                    margin-bottom: 0;
                    text-align: left;
                }
            }
        }
    }
}

.campaign-table-chart-container {
    @column-width: @base-unit * 15;
    @column-width-with-padding: @column-width + 2 * @padding-small-horizontal;

    .column-chart {
        height: @base-unit * 15;
    }

    .legend {
        padding-bottom: @base-unit;
        overflow: auto;

        .legend-item {
            float: left;
            width: @column-width;
            word-wrap: break-word;
            white-space: normal;
            padding: @padding-small-vertical @padding-small-horizontal;
            text-align: center;
            font-weight: bold;
        }
    }

    .table-with-fixed-column-width {
        table-layout: fixed;
        width: auto;

        tr {
            & th, & td {
                @rate: 0.75;
                width: @column-width-with-padding * @rate;
                max-width: @column-width-with-padding * @rate;
                min-width: @column-width-with-padding * @rate;
                word-wrap: break-word;
                white-space: normal;
                text-align: right;
                padding-left: 0;
                padding-right: @column-width-with-padding * (1 - @rate);
                // Since IE9 is not able to wrap word following style resolves this issue.
                span {
                    display: block;
                    width: @column-width;
                }
            }
        }

        & tr:nth-child(1) th, & tr td:nth-child(1), & tr td:nth-child(2) {
            width: @column-width;
            max-width: @column-width;
            min-width: @column-width;
            padding-right: @padding-small-horizontal;
            padding-left: @padding-small-horizontal;
        }

        & tr:nth-child(1) th {
            text-align: center;
        }

        & tr td:nth-child(1), & tr td:nth-child(2), & tr th:nth-child(2) {
            text-align: left;
        }
    }
}

.campaign-description-text {
    font-size: @font-size-base;
    display: block;
    max-width: @explanation-text-max-width;
}

.campaign-tab-switcher {
    overflow: auto;

    .btn-group {
        float: right;
    }
}
