/**
 * @copyright 2015 MarkCon
 * @link http://www.markcon.hu
 */

@CHARSET "UTF-8";

/* Results oldal

    Mindegyik elején: #results
*/

/*  ----------  AXPLANATION  ----------  */

    #results .Explanation {
        margin-top: 32px;
    }

    #results .Explanation h4 {
        color: #3db9de;
        text-transform: uppercase;
        font-size: 26px;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        font-weight: normal;
        line-height: 1.2em;
        margin: 0;
    }

    #results .Explanation p {
        font-size: 18px;
        color: #9f9f9f;
        line-height: 1.4em;
    }

/*  ----------  CHART  ----------  */

    #results .Chart.Vertical {
        height: 210px;
        margin: 32px 0;
        padding: 0;
    }

    #results .Chart .Data .Label {
        font-size: 18px;
        line-height: 32px;
    }

    #results .Chart.Horizontal .Data .Label {
        height: 32px;
    }

    #results .Chart .Data .Label .Value {
        display: block;
    }

    #results .Chart.Vertical .Data .Label .Name {
        bottom: -32px;
        color: #1ce4ae;
    }

    #results .Chart.Horizontal .Data .Label .Name {
        color: #3db9de;
        margin: 0 10px;
        float: right;
    }

    #results .Chart.Horizontal .Data.Inactive .Label .Name,
    #results .Chart.Horizontal .Data.Inactive .Label .Value {
        color: rgba(150,150,150,0.5) !important;
    }

    #results .Chart.Horizontal .Data .Label .Value {
        float: left;
    }

    #results .Chart.Vertical .Data .Bar {
        background-color: #ebebeb;
    }

    #results .Chart.Horizontal .Data .Bar {
        height: 16px;
    }

    #results .Chart.Vertical .Data .Bar .Value {
        background-color: #1ce4ae;
        border-top: 1px solid #fff;
    }

    #results .Chart.Horizontal .Data .Bar .Value {
        background-color: #1ce4ae;
        border-right: 1px solid #fff;
    }

    #results .Chart.Horizontal .Data .Bar .Value.Average {
        background-color: rgba(0,0,0,0.1);
        border-right: 1px solid rgba(0,0,0,0.2);;
    }

    #results .Chart.Horizontal .Data .Bar .Value.Average:after {
        content: " ";
        position: absolute;
        right: -5px;
        bottom: -9px;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 8px solid #969696;
        border-left: 4px solid transparent;
    }

    #results .Chart.Vertical.Monthly .Data {
        width: 3.57%;
    }

/*  ----------  MONTHLY ACTIVITY  ----------  */

    /* Responsive */
    @media (max-width: 768px) {
        #results .MonthlyActivity .Chart .Data .Label {
            font-size: 14px;
        }

        #results .MonthlyActivity .Chart .Data:nth-of-type(odd) .Label {
            display: none;
        }
    }

/*  ----------  STUDY MATERIALS  ----------  */

    #results .StudyMaterials .Chart .Data .Label .Name {
        color: #969696;
    }

    #results .StudyMaterials .Chart > .Column {
        padding: 15px;
    }

    #results .StudyMaterials .Chart > .Column > .Column {
        padding: 0;
        margin: 5px 0;
    }

    #results .StudyMaterials .Chart .Subject {
        float: none;
    }

    #results .StudyMaterials .Chart .Subject .IconContainer {
        width: 40px;
        height: 45px;
        float: left;
        margin-right: 10px;
    }

    #results .StudyMaterials .Chart .Subject .Label {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        color: #42b3e5;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 1.2em;
        white-space: nowrap;
        float: left;
        line-height: 45px;
    }