/**
 * fqf 3c application common CSS file.
 *
 * COPYRIGHT AND OTHER INTELLECTUAL PROPERTY LAWS PROTECT THESE MATERIALS.
 *
 * REPRODUCTION OR TRANSMISSION IN WHOLE OR PART, IN ANY FORM OR BY ANY MEANS,
 * ELECTRONIC, MECHANICAL OR OTHERWISE, WITHOUT THE PRIOR WRITTEN CONSENT OF THE
 * COPYRIGHT OWNER IS PROHIBITED AND IS A VIOLATION OF COPYRIGHT LAW.
 *
 * ALL RIGHTS ARE RESERVED.
 *
 * @package     fqf\common\assets
 * @author      Jon Spain <jon@learningmediaservices.com>
 * @copyright   2016 Learning Media Services Ltd. <www.learningmediaservices.com>
 * @license     < link??? > < Name??? >
 * @link        http://www.learningmediaservices.com/
 *
 * @todo: Use Yii2 less/sass.
 */

/**
 * Main Page.
 */

body, .page-wrap {
    background-color: #545454;
    color: white;
}

.cc_container .cc_btn {
    font-size: 0.8em !important;
}
.cc_container .cc_message {
    font-size: 0.8em !important;
}


/**
 * Top Bar.
 */

#topbar-logo {
    width: 36px;
    height: 36px;
    position: absolute;
    margin-left: -50px;
    z-index: 2;
    background-image: url('images/nav-logo-small.png');
    margin-top: -7px;
}

a.navbar-brand {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white !important;
    padding-left: 60px;
    font-size: 19px;
}

a.navbar-brand strong {
    font-size: 19px;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #545454;
}

.nav > li.sub-item.active > a,
.nav > li.sub-item.active > a:hover,
.nav > li.sub-item.active > a:focus {
    background-color: #F7941E;
}

.nav > li.hide-unless-collapsed {
    display: none;
}

@media (max-width: 992px) {
    .nav > li.hide-unless-collapsed {
        display: inherit;
    }
    .nav > li.show-unless-collapsed {
        display: none;
    }
}

/**
 * Login Pages etc.
*/

body.module-yii2-user,
body.module-yii2-user .page-wrap {
    background-color: #262626;
}

body.module-yii2-user .page-wrap > .container {
    padding: 0px;
}

.guest-header {
    background-color: white;
    height: 100px;
    border-bottom: 1px solid black;
    background-image: url('images/top.png');
    background-repeat: repeat-x;
}

.guest-logo {
    margin: 0 auto;
    width: 239px;
    height: 82px;
    background-image: url('images/top-logo.png');
}

.guest-form {
    background-color: #545454;
}

.guest-form > div > p.guest-ff {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    color: white;
    margin: 18px 0px;
}

.guest-content {
    background-color: #545454;
    color: #F7941E;
    min-height: 250px;
    text-align: center;
}

.guest-footer {
    margin-top: -45px;
    background-image: url('images/bottom.png');
    background-repeat: no-repeat;
    background-position-x: -140px;
}

.guest-clipart {
    width: 200px;
    height: 313px;
    margin-top: -120px;
    background-image: url('images/people.png');
}

.guest-2nd-logo {
    display: none;
    position: absolute;
    width: 115px;
    height: 115px;
    background-image: url('images/logo-large.png');
    bottom: 5px;
    right: 5px;
    background-color: white;
}

.guest-form .form-group {
    margin-bottom: 20px;
}

.guest-form .form-group label {
    /* color: #F7941E; */
}

.form-group.has-error .control-label,
.form-group.has-success .control-label {
    color: white;
}

.form-group.has-error .help-block {
    color: #F7941E;
}

.guest-form .form-control {
    border-radius: 20px;
    height: 40px;
    border-color: black;
    background-color: #262626;
    color: #F7941E;
}

.guest-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFC652;
}

.guest-form .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #FFC652;
}

.guest-form .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #FFC652;
}

.guest-form .form-control:-moz-placeholder { /* Firefox 18- */
  color: #FFC652;
}

.guest-form .btn-primary {
    width: 90px;
    height: 90px;
    padding: 10px 16px;
    font-size: 22px;
    line-height: 1.33;
    border-radius: 45px;
    color: white;
    border: 12px solid #262626 !important;
    margin-top: 40px;
}

#forgotten {
    position: absolute;
    right: 15px;
    bottom: 125px
}

#forgotten a {
    color: white;
    text-decoration: underline;
}

/**
 * Sidebar.
 */

/* Sidebar (base). */
#sidebar > .nav-sidebar > .active > a,
#sidebar > .nav-sidebar > .active > a:hover,
#sidebar > .nav-sidebar > .active > a:focus {
    background-color: #F7941E;
}

#sidebar ul li a:hover {
    background-color: #F7941E;
}

/* Sidebar (displayed on screen). */
@media(min-width:768px) {
    #sidebar {
        background-color: #545454;
        border-right: 1px solid black;
    }
    #sidebar > .nav-sidebar a {
        color: white;
        border-bottom: 1px solid black;
    }
}

/**
 * Admin titles etc.
 */

#admin-content-wrapper h1 {
    margin-top: 0px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    font-size: 30px;
    border-bottom: 1px solid white;
}

#admin-content-wrapper h1 small {
    color: #777777;
    font-style: italic;
    font-size: 55%;
}

select#period, select#user {
    font-style: italic;
    font-size: 18px;
    color: #dddddd;
    background-color: #545454;
    padding:5px;
    border: none;
}

/**
 * Panels.
 */

.panel-default {
    border-color: black;
}

.panel-default > .panel-heading {
    color: white;
    background-color: #383838;
    border-color: black;
}

/**
 * Tables.
 */

.panel thead th,
.panel thead a,
.panel thead a.asc:after,
.panel thead a.desc:after {
    color: #F7941E;
}

.panel tbody {
    color: black;
}

.pagination > li > a, .pagination > li > span {
    color: #F7941E;
}

.summary {
    color: #F7941E;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    border-color: #F7941E;
    background-color: #F7941E;
}

/**
 * Forms.
 */

legend {
    color: white;
}

/**
 * Submission Module Pages.
 */

body.module-task,
body.module-task .page-wrap,
body.module-submission,
body.module-submission .page-wrap {
    background-color: #383838;
}

body.module-submission .navbar-inverse .navbar-nav > .active > a,
body.module-submission .navbar-inverse .navbar-nav > .active > a:hover,
body.module-submission .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #383838;
}

body.module-task .navbar-inverse .navbar-nav > .active > a,
body.module-task .navbar-inverse .navbar-nav > .active > a:hover,
body.module-task .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #383838;
}

.fixed-header {
    color: #F7941E;
}

.fixed-header {
    text-align: center;
}

/**
 * Submission Module Buttons.
 */

.submission-buttons button {
    border-radius: 25px;
}

.btn.btn-grad {
    background-color: #EEE;
    background-image: -webkit-linear-gradient(top, #EEE, #666);
    background-image: -moz-linear-gradient(top, #EEE, #666);
    background-image: -ms-linear-gradient(top, #EEE, #666);
    background-image: -o-linear-gradient(top, #EEE, #666);
    background-image: linear-gradient(to bottom, #EEE, #666);
    border: 1px solid black;
}

.btn.btn-grad:focus,
.btn.btn-grad:active,
.btn.btn-grad:hover {
    outline: none !important;
    background-color: #666;
    background-image: -webkit-linear-gradient(top, #666, #EEE);
    background-image: -moz-linear-gradient(top, #666, #EEE);
    background-image: -ms-linear-gradient(top, #666, #EEE);
    background-image: -o-linear-gradient(top, #666, #EEE);
    background-image: linear-gradient(to bottom, #666, #EEE);
    border: 1px solid black;
}

button.btn-grad.btn-primary {
    background-color: #F7941E;
    border-color: black;
    outline: none !important;
    background-image: -webkit-linear-gradient(top, #F7941E, #F1592A);
    background-image: -moz-linear-gradient(top, #F7941E, #F1592A);
    background-image: -ms-linear-gradient(top, #F7941E, #F1592A);
    background-image: -o-linear-gradient(top, #F7941E, #F1592A);
    background-image: linear-gradient(to bottom, #F7941E, #F1592A);
}

button.btn-grad.btn-primary:focus,
button.btn-grad.btn-primary:active,
button.btn-grad.btn-primary:hover {
    background-color: #F1592A;
    background-image: -webkit-linear-gradient(top, #F1592A, #F7941E);
    background-image: -moz-linear-gradient(top, #F1592A, #F7941E);
    background-image: -ms-linear-gradient(top, #F1592A, #F7941E);
    background-image: -o-linear-gradient(top, #F1592A, #F7941E);
    background-image: linear-gradient(to bottom, #F1592A, #F7941E);
}

/**
 * Star/Traffic Ratings.
 */

.rating-container {
    margin-top: 10px;
    border: 1px solid black;
    padding: 0 0 0 17px;
    border-radius: 34px;
    background-color: #262626;
    height: 70px;
}

.rating-container .filled-stars {
    -webkit-text-stroke: 1px black;
    text-shadow: none;
    color: #F7941E;
}

.rating-container.traffic .filled-stars span.star:nth-child(1) {
    color: red;
}

.rating-container.traffic .filled-stars span.star:nth-child(2) {
    color: orange;
}

.rating-container.traffic .filled-stars span.star:nth-child(3) {
    color: darkolivegreen;
}

.rating-container.traffic .filled-stars span.star:nth-child(4) {
    color: lime;
}

.rating-container.gradient .filled-stars .fa-star:before {
    background: -webkit-linear-gradient(left top, white 25%, #F7941E 45%, #F1592A, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rating-container.gradient.traffic .filled-stars span.star:nth-child(1) .fa-star:before {
    background: -webkit-linear-gradient(left top, white 25%, red 45%, pink, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rating-container.gradient.traffic .filled-stars span.star:nth-child(2) .fa-star:before {
    background: -webkit-linear-gradient(left top, white 25%, orange 45%, orange, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rating-container.gradient.traffic .filled-stars span.star:nth-child(3) .fa-star:before {
    background: -webkit-linear-gradient(left top, white 25%, darkolivegreen 45%, darkolivegreen, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rating-container.gradient.traffic .filled-stars span.star:nth-child(4) .fa-star:before {
    background: -webkit-linear-gradient(left top, white 25%, lime 45%, lime, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.schema-question-inner button {
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    margin-top: 3px;
    border-radius: 35px;
    font-size: 30px;
    line-height: 1.33;
}

/**
 * Info Modal.
 */

.modal-content {
    border-radius: 25px;
    color: black;
    background-color: white;
}

.modal-header {
    background-color: #F8F8F8;
    border-bottom: 1px solid #F8F8F8;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size: 120%;
}

.modal-header .close {
    margin-top: 1px;
}

.modal-body {
    padding: 0;
}

.modal-content ul {
    padding-left: 20px;
}

.modal-footer {
    padding: 0;
    background-color: #F8F8F8;
    border-top: 1px solid #F8F8F8;
    height: 51px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.modal-footer button {
    border-radius: 25px;
    border: none;
    height: 50px;
    width: 100px;
    font-size: 120%;
    text-transform: uppercase;
    border-color: #F7941E !important;
}

/**
 * Advice Page.
 */

.submission-chart {
    padding-top: 20px;
    text-align: center;
}

.schema-question-title {
    background-color: #262626;
    color: #F7941E;
}

.schema-question-title-alt {
    background-color: #383838;
    color: #F7941E;
}

.submission-advice .schema-statement {
    background-color: #262626;
    color: white;
}

.submission-advice .schema-statement-alt {
    background-color: #383838;
}

.submission-advice ul {
    padding-left: 20px;
}

.rating-container.emotion {
    width: 300px;
}

.rating-container.emotion .filled-stars span.star:nth-child(1) { color: red; }
.rating-container.emotion .filled-stars span.star:nth-child(2) { color: orange; }
.rating-container.emotion .filled-stars span.star:nth-child(3) { color: yellow; }
.rating-container.emotion .filled-stars span.star:nth-child(4) { color: darkolivegreen; }
.rating-container.emotion .filled-stars span.star:nth-child(5) { color: green; }

.rating-container.emotion span.star:nth-child(1) .fas:before { content: "\f5b4"; }
.rating-container.emotion span.star:nth-child(2) .fas:before { content: "\f119"; }
.rating-container.emotion span.star:nth-child(3) .fas:before { content: "\f11a"; }
.rating-container.emotion span.star:nth-child(4) .fas:before { content: "\f118"; }
.rating-container.emotion span.star:nth-child(5) .fas:before { content: "\f599"; }