/*
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * This is the css style sheet for pagelayout-report.
 *
 * You can have a rather longer description of the file as well,
 * if you like, and it can span multiple lines.
 *
 * @package    mod_videoassessment
 * @copyright  2024 Don Hinkleman (hinkelman@mac.com)
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

@charset "UTF-8";

.path-mod-videoassessment {
    .pagelayout-report #report-main-content .region-content table {
        background:none;
    }

    .center {
        text-align: center;
    }

    .gradetable {
        width: 100%;
    }


    .red {
        color: #ff0000!important;
    }

    .blue {
        color: #0000ff!important;
    }

    .green {
        color: #40aa55!important;
    }

    .orange {
        color: #ffa500!important;
    }

    .report-rubrics h2.main {
        display: none!important;
    }

    .name-sort i {
        margin-left: 5px;
    }

    .input-select {
        min-width: 270px;
        height: 30px !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #rubrics-beforetraining {
        display: none;
    }
    label[for="id_url"],label[for="id_video"]{
        display: block !important;
        float: right;
    }
    .popup-video-preview {
        width: 100%;
        height: 80%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
    }

    .popup-video-preview button {
        margin: 0 10px;
    }

    .button-firstassess-popup {
        padding: 0 8px !important;
        margin: 0 10px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        color: #000000;
        font-size: 9px;
        font-family: Helvetica, Verdana, sans-serif;
        font-weight: bold;
        text-decoration: none;
        vertical-align: middle;
        white-space: nowrap;
        background-color: #fcae4e;
    }

    .button-assessagain-popup {
        padding: 0 8px !important;
        margin: 0 10px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        color: #000000;
        font-size: 9px;
        font-family: Helvetica, Verdana, sans-serif;
        font-weight: bold;
        text-decoration: none;
        vertical-align: middle;
        white-space: nowrap;
        background-color: #209cfa;
    }
    .popup-video-preview-heading {
        margin: 0;
        text-align: center;
    }
    .youtube-remind{
        position: absolute;
        color: #000;
        font-size: 9px;
        font-family: Helvetica,Verdana,sans-serif;
        font-weight: 700;
        top: 42px;
        left: 25px;
    }
    .youtube-div{
        position: relative;
        width: 140px;
        height: 90px;
        margin: auto;
    }
    .blue.box,.green.box,.red.box{
        width: 110px;
        display: inline-block;
    }
    .card.card-body{
        margin-bottom: 50px;
    }

    .commentbutton{
        margin-left: 20px;
        border-radius: 4px;
        background-color: #fff;
        padding: 3px 12px;
        font-size: 14px;
        border: 1px solid #ccc;
        color: #000;
    }


    #bar-warp{
        display: inline-block;
        margin-left: 15px;
        width:200px;
        height:20px;
        border: 1px solid #cccccc;
        border-radius: 10px;
    }
    #bar{
        width:0px;
        height:20px;
        background:green;
        border-radius: 10px;
    }
    #precent{
        font-size: x-large;
        margin-left: 20px;
    }
    #id_submitbutton{
        color: #fff;
        background-color: #1177d1;
        border-color: #1177d1;
    }
    .comment-grade{
        display: inline-block;
        text-align: center;
    }
    .comment-score-text{
        display: block;
        width: 60px;
        font-size: 70%;
    }
    .comment-score{
        font-size: 150%;
    }
    .fairness{
        color: #A00000;
    }
    .submissioncomment{
        width: 600px;
        display: -webkit-inline-box;
        word-break: break-word;
    }
    .mobile-submissioncomment{
        word-break: break-word;
        display: -webkit-inline-box;
    }
}