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

@CHARSET "UTF-8";

/* Exan oldal

    Mindegyik elején: #exam
    Alváltozatok: #exam.Index, #exam.Details, #exam.Search
*/

@media (min-width: 768px) {
    #exam .ResultTable .Column.AverageResult {
        width: 10%;
    }

    #exam .ResultTable .Column.Difficulty {
        width: 10%;
    }

    #exam .ResultTable .Column.Owner {
        width: 16%;
    }

    #exam .ResultTable .Column.Popularity {
        width: 10%;
    }

    #exam .ResultTable .Column.Score {
        width: 12%;
    }

    #exam .ResultTable .Column.Status {
        width: 10%;
    }

    #exam .ResultTable .Column.Subject {
        width: 25%;
    }

    #exam .ResultTable .Column.Title {
        width: 45%;
    }

    #exam .ResultTable .Column.Year {
        width: 10%;
    }

    #exam.InvitedList .ResultTable .Column.Subject {
        width: 18%;
    }

    #exam.InvitedList .ResultTable .Column.Title {
        width: 34%;
    }

    #exam.OwnList .ResultTable .Column.Title {
        width: 35%;
    }

    #exam.FillList .ResultTable .Column.UserName {
       width: 60%;
    }

    #exam.FillList .ResultTable .Column.DateTime {
        width: 20%;
    }

    #exam.FillList .ResultTable .Column.Score  {
        width: 20%;
    }
}

    #exam.InvitedList .Tabs .Tab {
        padding: 0;
    }

    #exam .OwnList > .Container {
        padding-bottom: 30px;
    }

    #exam.Search .Tabs .Tab {
        padding-bottom: 0;
    }

/*  ----------  DETAILS  ----------  */

    #exam.Details,
    #exam.FillList {
        padding-top: 50px;
    }

    #exam.Details .Header,
    #exam.FillList .Header {
        margin-bottom: 2em;
    }

    #exam.Details .Header .IconContainer,
    #exam.FillList .Header .IconContainer {
        width: 50px;
        height: 56px;
        float: left;
    }

    #exam.Details .Header .Title,
    #exam.Details .Header .Description,
    #exam.FillList .Header .Title {
        line-height: 1.85em;
        padding-left: 74px;
    }

    #exam.Details .Header .Title,
    #exam.FillList .Header .Title {
        padding-top: 8px;
    }

    #exam.Details .Header .Name,
    #exam.FillList .Header .Name {
        color: #42b3e5;
        font-size: 36px;
    }

    #exam.Details .Header .Category,
    #exam.FillList .Header .Category {
        color: #21deb5;
        text-transform: uppercase;
        font-size: 26px;
    }

    #exam.Details .Header .Category .Point,
    #exam.FillList .Header .Category .Point {
        font-weight: bold;
    }

    #exam.Details .Header .Description {
        color: #21deb5;
        font-size: 26px;
    }

    #exam.Details .Stat .Data {
        display: table;
        width: 100%;
        font-size: 26px;
        font-family: 'PT Sans Narrow';
        line-height: 1.2em;
        margin: 14px 0;
    }

    #exam.Details .Stat .Data .Label,
    #exam.Details .Stat .Data .Value {
        display: table-cell;
    }

    #exam.Details .Stat .Data .Label {
        color: #21deb5;
        text-align: left;
    }

    #exam.Details .Stat .Data .Value {
        color: #3db9de;
        text-align: right;
        font-weight: bold;
    }

    #exam.Details .Footer {
        height: 102px;
        margin-top: 50px;
        text-align: right;
        position: relative;
    }

    #exam.Details .Footer .Column {
        height: 100%;
    }

    #exam.Details .Footer:before {
        content: " ";
        position: absolute;
        left: -50%;
        right: -50%;
        height: 100%;
        background-color: #fefefe;
        z-index: -1;
        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
        display: block;
    }

    #exam.Details .Footer button {
        background-color: transparent;
        background-image: url("image/button-start.png");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: contain;
        color: #3db9de;
        cursor: pointer;
        font-family: "PT Sans Narrow", "Arial", "Verdana";
        font-size: 44px;
        height: 59px;
        padding-right: 70px;
        position: relative;
        text-transform: uppercase;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    #exam.Details .Description {
        color: #9f9f9f;
        font-size: 18px;
        line-height: 1.4em;
        margin-bottom: 15px;
    }

    #exam.Details .Subjects {
        font-family: "PT Sans Narrow","Arial","Verdana";
        margin-bottom: 15px;
    }

    #exam.Details .Subjects .Label {
        color: #3db9de;
        font-size: 26px;
        font-weight: normal;
        line-height: 1.2em;
        text-transform: uppercase;
    }

    #exam.Details .Subjects .Subject {
        font-size: 18px;
        color: #9f9f9f;
        margin: 5px 0;
    }

    #exam.Details .Subjects .Subject .IconContainer {
        display: inline-block;
        height: 45px;
        margin-right: 5px;
        position: relative;
        vertical-align: middle;
        width: 40px;
    }

    #exam.Details .Subjects .Subject .Name {
        display: inline-block;
        font-weight: bold;
        text-transform: uppercase;
        color: #3db9de;
    }

    #exam.Details .ShareUrl {
        margin-bottom: 15px;
    }

    #exam.Details .ShareUrl .Label {
        font-family: "PT Sans Narrow","Arial","Verdana";
        color: #3db9de;
        font-size: 26px;
        font-weight: normal;
        line-height: 1.2em;
        text-transform: uppercase;
    }

    #exam.Details .Buttons {
        text-align: center;
        margin-top: 30px;
    }

    #exam.Details .Buttons .Button {
        width: 48%;
        margin: 0 1%;
        display: block;
        float: left;
    }

    /* Responsive */
    @media (max-width: 991px) {
        #exam.Details .Buttons .Button {
            width: 100%;
            margin: 0 0 15px 0;
            float: none;
        }
    }

    @media (max-width: 767px) {
        #exam.Details .Stat .Data {
            font-size: 18px;
        }

        #exam.Details .Header .IconContainer {
            display: none;
        }

        #exam.Details .Header .Title {
            padding: 0;
        }

        #exam.Details .Header .Name {
            font-size: 26px;
            line-height: 1.2em;
        }

        #exam.Details .Header .Category {
            display: block;
            font-size: 18px;
        }

        #exam.Details .Footer {
            text-align: center;
        }

        #exam.Details .Footer button {
            font-size: 30px;
            height: 45px;
            padding-right: 50px;
        }

    }

/*  ----------  FILL LIST  ----------  */

    #exam.FillList .ResultTable .Header {
        margin-bottom: 0;
    }

/*  ----------  EDIT  ----------  */

    #exam.Edit {
        font-size: 12pt;
        line-height: 1.2em;
        color: #888;
    }

    #exam.Edit h4 {
        border-bottom: 1px solid #d3d7da;
    }

    #exam.Edit h4 span {
        font-size: 2em;
        font-weight: bold;
        color: #0ec0bf;
        line-height: 1em;
    }

    #exam.Edit .Title {
        font-size: 26px;
        text-transform: uppercase;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        line-height: 30px;
        padding: 0 10px;
    }

    #exam.Edit .Title .Toggle {
        float: left;
        width: 24px;
        height: 24px;
        display: block;
        background-color: #1ce4ae;
        margin: 3px 10px 0 0;
        border-radius: 3px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px auto;
    }

    #exam.Edit .Title .Toggle.Up {
        background-image: url("../../Global/image/icon/button-arrow-up.png");
    }

    #exam.Edit .Title .Toggle.Down {
        background-image: url("../../Global/image/icon/button-arrow-down.png");
    }

    #exam.Edit > .Container {
        padding-top: 50px;
        padding-bottom: 50px;
        position: relative;
    }

    #exam.Edit > .Container.Bottom:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: -50%;
        right: -50%;
        height: 100%;
        z-index: -1;
        display: block;
        background-image: url("../../Global/image/pattern-blue.png");
    }

    #exam.Edit .Form .Element {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        float: left;
        margin-bottom: 15px;
    }

    #exam.Edit .Form .Element:nth-child(1) {
        width: 75%;
    }

    #exam.Edit .Form .Element:nth-child(2) {
        width: 25%;
        padding-top: 30px;
    }

    #exam.Edit .Form .Element:nth-child(3) {
        width: 100%;
    }

    #exam.Edit .Form .Element.Hidden {
        min-height: 0;
        margin: 0;
    }

    #exam.Edit .DataBox {
        border: 1px solid #d3d7da;
        background: #fff;
        margin: 0;
        padding: 10px;
        height: 300px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #exam.Edit .CenterText {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 18px;
        line-height: 24px;
        background-repeat: no-repeat;
        background-position: left top;
        background-size: contain;
        padding-left: 30px;
        color: #42b3e5;
        white-space: nowrap;
    }

    #exam.Edit .CenterText.Info {
        background-image: url("../../Global/image/message-notice.png");
    }

    #exam.Edit .CenterText.Loading {
        background-image: url("../../Global/image/preloader-blue.gif");
    }

    #exam.Edit .ExamFilter {
        margin-bottom: 15px;
    }

    /* Form */
    #exam.Edit .Form label {
        color: #1ce4ae;
        display: block;
        font-family: "PT Sans Narrow";
        font-size: 26px;
        line-height: 30px;
        padding-left: 10px;
        text-transform: uppercase;
    }

    #exam.Edit .Container.Bottom .Form label {
        color: #fff;
    }

    #exam.Edit .Form .Owned {
        padding-top: 30px;
    }

    #exam.Edit .Form .Owned label {
        padding: 0;
        line-height: 44px;
    }

    #exam.Edit .Form .Checkbox {
        display: block;
        float: left;
        margin: 9px 10px 9px 0;
    }

    #exam.Edit .Form > div > span {
        color: #fff;
        display: block;
        float: left;
        font-size: 18px;
        line-height: 44px;
    }

    /* Category & Quiz */
    #exam.Edit .Quiz,
    #exam.Edit .Category {
        line-height: 1.2em;
        position: relative;
        padding: 5px;
        margin: 1px 0;
    }

    #exam.Edit .Quizes.Added .Quiz {
        padding: 5px 40px 5px 55px;
        cursor: default;
    }

    #exam.Edit .Quizes .Quiz:nth-of-type(odd) {
        background-color: #f6f6f6;
    }

    #exam.Edit .Quiz,
    #exam.Edit .Category.Selectable {
        position: relative;
        cursor: pointer;
    }

    #exam.Edit .Category.Selectable {
        color: #42b3e5;
    }

    #exam.Edit .Category.Selectable:hover {
        background-color: rgba(66,179,229,0.25);
    }

    #exam.Edit .Category.Selectable.Selected {
        background-color: #42b3e5;
    }

    #exam.Edit .Category.Selected .Name {
        color: #fff;
    }

    #exam.Edit .Browser .Title {
        color: #1ce4ae;
    }

    #exam.Edit .Browser .Quiz:hover {
        background-color: rgba(28,228,174,0.25) !important;
    }

    #exam.Edit .Browser .Quiz.Added {
        background-color: #1ce4ae !important;
    }

    #exam.Edit .Browser .Quiz.Added .Question {
        color: #fff;
    }

    #exam.Edit .Quiz .Point {
        position: absolute;
        left: 0;
        top: 0;
        width: 35px;
        height: 40px;
        margin: 5px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
    }

    #exam.Edit .Quiz .Question {
        color: #888;
        font-size: 16px;
    }

    #exam.Edit .Quizes.Added .Quiz .Question {
        color: #1ce4ae;
    }

    #exam.Edit .Quiz .CategoryName {
        font-size: 14px;
        color: #42b3e5;
    }

    #exam.Edit .Quiz .RemoveButton {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
        margin: 15px 10px;
        background-color: #e46e4e;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
        cursor: pointer;
        border-radius: 2px;
        background-image: url("../../Global/image/icon/cross.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px;
    }

    #exam.Edit .Browser .Quiz .Point,
    #exam.Edit .Browser .Quiz .CategoryName,
    #exam.Edit .Browser .Quiz .RemoveButton {
        display: none;
    }

    #exam.Edit .Category.Level-0 { font-size: 18px; font-weight: bold; }
    #exam.Edit .Category.Level-1 { font-size: 16px; margin-left: 20px; }
    #exam.Edit .Category.Level-2 { font-size: 14px; margin-left: 40px; }
    #exam.Edit .Category.Level-3 { font-size: 12px; margin-left: 60px; }
    #exam.Edit .Category.Level-4 { font-size: 12px; margin-left: 80px; }
    #exam.Edit .Category.Level-5 { font-size: 12px; margin-left: 100px; }

    /* Feedback */
    #exam.Edit .Feedback {
        background-color: #ebebeb;
        margin: 0;
        border: 1px solid #d3d7da;
    }

    #exam.Edit .Feedback > div {
        font-size: 20px;
        padding: 10px 15px;
    }

    #exam.Edit .Feedback > div > span {
        color: #42b3e5;
    }

    #exam.Edit .Feedback:after {
        display: table;
        content: " ";
        clear: both;
    }

    #exam.Edit .Feedback .Submit {
        text-align: right;
    }

    #exam.Edit .Feedback .Submit .Button {
        margin: 0;
    }

    #exam.Edit .Feedback .Count {
        line-height: 44px;
        font-family: "PT Sans Narrow","Arial","Verdana";
        font-weight: bold;
        text-transform: uppercase;
    }

    #exam.Edit .Feedback div.NeedQuiz,
    #exam.Edit .Feedback div.EnoughQuiz {
        display: none;
        line-height: 44px;
        text-align: center;
        font-weight: bold;
    }

    #exam.Edit .Feedback.NeedQuiz div.NeedQuiz {
        display: inline-block;
    }

    #exam.Edit .Feedback.EnoughQuiz div.EnoughQuiz {
        display: inline-block;
    }

    /* Responsive */
    @media (max-width: 991px) {
        #exam .Container .Browser .Column {
            margin-bottom: 15px;
        }

        #exam.Edit .Feedback .Submit {
            text-align: center;
        }

        #exam.Edit .Feedback .Submit .Button {
            margin: 0;
            width: 100%;
        }

        #exam.Edit .Feedback .Count {
            line-height: 1.2em;
        }

        #exam.Edit .Feedback div.NeedQuiz,
        #exam.Edit .Feedback div.EnoughQuiz {
            line-height: 1.2em;
        }

        #exam.Edit .Feedback div.NeedQuiz {
            text-align: right;
        }

        #exam.Edit .Form .Element:nth-child(1),
        #exam.Edit .Form .Element:nth-child(2) {
            width: 50%;
        }

    }

    @media (max-width: 767px) {
        #exam.Edit .ExamFilter .Column {
            margin-bottom: 15px;
        }

        #exam.Edit .Form .Owned {
            padding-top: 0;
        }

        #exam.Edit .Feedback .Count,
        #exam.Edit .Feedback div.NeedQuiz,
        #exam.Edit .Feedback div.EnoughQuiz {
            text-align: center;
        }

        #exam.Edit .Form .Element:nth-child(1),
        #exam.Edit .Form .Element:nth-child(2) {
            width: 100%;
            padding-top: 0;
        }

    }