mod/assign/styles.css

   1 /* stylelint-disable max-line-length */
   2 /* FIXME: MDL-55370: remove this stylelint disable */
   3 .path-mod-assign div.gradingnavigation div {
   4     float: left;
   5     margin-left: 2em;
   6 }
   7
   8 .path-mod-assign div.submissionstatustable,
   9 .path-mod-assign div.submissionfull,
  10 .path-mod-assign div.submissionlinks,
  11 .path-mod-assign div.usersummary,
  12 .path-mod-assign div.feedback,
  13 .path-mod-assign div.gradingsummary {
  14     margin-bottom: 5em;
  15 }
  16
  17 .path-mod-assign div.submissionstatus .generaltable,
  18 .path-mod-assign div.submissionlinks .generaltable,
  19 .path-mod-assign div.feedback .generaltable,
  20 .path-mod-assign div.submissionsummarytable .generaltable,
  21 .path-mod-assign div.attempthistory table,
  22 .path-mod-assign div.gradingsummary .generaltable {
  23     width: 100%;
  24 }
  25
  26 .path-mod-assign table.generaltable table td {
  27     border: 0 none;
  28 }
  29
  30 .path-mod-assign .gradingsummarytable,
  31 .path-mod-assign .feedbacktable,
  32 .path-mod-assign .lockedsubmission,
  33 .path-mod-assign .submissionsummarytable {
  34     margin-top: 1em;
  35 }
  36
  37 .path-mod-assign div.submissionsummarytable table tbody tr td.c0 {
  38     width: 30%;
  39 }
  40
  41 .path-mod-assign .submittedlate {
  42     color: red;
  43     font-weight: 900;
  44 }
  45
  46 .path-mod-assign.jsenabled .gradingoptionsform [type=submit] {
  47     display: none;
  48 }
  49
  50 .path-mod-assign.jsenabled .gradingtable .c1 select {
  51     display: none;
  52 }
  53
  54 .path-mod-assign .quickgradingform .mform fieldset {
  55     margin: 0;
  56     padding: 0;
  57 }
  58
  59 .path-mod-assign .gradingbatchoperationsform .mform fieldset {
  60     margin: 0;
  61     padding: 0;
  62 }
  63
  64 .path-mod-assign td.submissionstatus,
  65 .path-mod-assign div.submissionstatus,
  66 .path-mod-assign a:link.submissionstatus {
  67     color: black;
  68     background-color: #efefef;
  69 }
  70
  71 .path-mod-assign td.submissionstatusdraft,
  72 .path-mod-assign div.submissionstatusdraft,
  73 .path-mod-assign a:link.submissionstatusdraft {
  74     color: black;
  75     background-color: #efefcf;
  76 }
  77
  78 .path-mod-assign td.submissionstatussubmitted,
  79 .path-mod-assign div.submissionstatussubmitted,
  80 .path-mod-assign a:link.submissionstatussubmitted {
  81     color: black;
  82     background-color: #cfefcf;
  83 }
  84
  85 .path-mod-assign td.submissionlocked,
  86 .path-mod-assign div.submissionlocked {
  87     color: black;
  88     background-color: #efefcf;
  89 }
  90
  91 .path-mod-assign td.submissionreopened,
  92 .path-mod-assign div.submissionreopened {
  93     color: black;
  94     background-color: #efefef;
  95 }
  96
  97 .path-mod-assign td.submissiongraded,
  98 .path-mod-assign div.submissiongraded {
  99     color: black;
 100     background-color: #cfefcf;
 101 }
 102
 103 .path-mod-assign td.submissionnotgraded,
 104 .path-mod-assign div.submissionnotgraded {
 105     color: black;
 106     background-color: #efefef;
 107 }
 108
 109 .path-mod-assign td.latesubmission,
 110 .path-mod-assign a:link.latesubmission,
 111 .path-mod-assign div.latesubmission {
 112     color: black;
 113     background-color: #efcfcf;
 114 }
 115
 116 .path-mod-assign td.earlysubmission,
 117 .path-mod-assign div.earlysubmission {
 118     color: black;
 119     background-color: #cfefcf;
 120 }
 121
 122 .path-mod-assign .gradingtable .c0 {
 123     display: none;
 124 }
 125
 126 .path-mod-assign.jsenabled .gradingtable .c0 {
 127     display: table-cell;
 128 }
 129
 130 .path-mod-assign .gradingbatchoperationsform {
 131     display: none;
 132 }
 133
 134 .path-mod-assign.jsenabled .gradingbatchoperationsform {
 135     display: block;
 136 }
 137
 138 .path-mod-assign .gradingtable tr.selectedrow td {
 139     background-color: #fec;
 140 }
 141
 142 .path-mod-assign .gradingtable tr.unselectedrow td {
 143     background-color: white;
 144 }
 145
 146 .path-mod-assign .gradingtable .c0 div.selectall {
 147     margin-left: 7px;
 148 }
 149
 150 .path-mod-assign .gradingtable .yui3-menu ul {
 151     margin: 0;
 152 }
 153
 154 .path-mod-assign .gradingtable .yui3-menu-label {
 155     padding-left: 0;
 156     line-height: 12px;
 157 }
 158
 159 .path-mod-assign .gradingtable .yui3-menu-label img {
 160     padding: 0 3px;
 161 }
 162
 163 .path-mod-assign .gradingtable .yui3-menu li {
 164     list-style-type: none;
 165 }
 166
 167 .path-mod-assign.jsenabled .gradingtable .yui3-loading {
 168     display: none;
 169 }
 170
 171 .path-mod-assign .gradingtable .yui3-menu .yui3-menu-content {
 172     border: 0;
 173     padding-top: 0;
 174 }
 175
 176 .path-mod-assign div.gradingtable tr .quickgrademodified {
 177     background-color: #fc9;
 178 }
 179
 180 .path-mod-assign td.submissioneditable {
 181     color: red;
 182 }
 183
 184 .path-mod-assign .expandsummaryicon {
 185     cursor: pointer;
 186     display: none;
 187 }
 188
 189 .path-mod-assign.jsenabled .expandsummaryicon {
 190     display: inline;
 191 }
 192
 193 .path-mod-assign .hidefull {
 194     display: none;
 195 }
 196
 197 .path-mod-assign .quickgradingform form .commentscontainer input,
 198 .path-mod-assign .quickgradingform form .commentscontainer textarea {
 199     display: none;
 200 }
 201
 202 .path-mod-assign.jsenabled .quickgradingform form .commentscontainer input,
 203 .path-mod-assign.jsenabled .quickgradingform form .commentscontainer textarea {
 204     display: inline;
 205 }
 206
 207 .path-mod-assign .previousfeedbackwarning {
 208     font-size: 140%;
 209     font-weight: bold;
 210     text-align: center;
 211     color: #500;
 212 }
 213
 214 .path-mod-assign .submissionhistory {
 215     background-color: #b0b0b0;
 216 }
 217
 218 .path-mod-assign .submissionhistory .cell.historytitle {
 219     background-color: #808080;
 220 }
 221
 222 .path-mod-assign .submissionhistory .cell {
 223     background-color: #d0d0d0;
 224 }
 225
 226 .path-mod-assign.jsenabled .mod-assign-history-link {
 227     display: block;
 228     cursor: pointer;
 229     margin-bottom: 7px;
 230 }
 231
 232 .path-mod-assign.jsenabled .mod-assign-history-link h4 {
 233     display: inline;
 234 }
 235
 236 .path-mod-assign.jsenabled .attempthistory h4 {
 237     margin-bottom: 7px;
 238     text-align: left;
 239 }
 240
 241 .path-mod-assign.jsenabled.dir_rtl .attempthistory h4 {
 242     text-align: right;
 243 }
 244
 245 .path-mod-assign.jsenabled .mod-assign-history-link-open {
 246     padding: 0 5px 0 20px;
 247     background: url([[pix:t/expanded]]) 2px center no-repeat;
 248 }
 249
 250 .path-mod-assign.jsenabled .mod-assign-history-link-closed {
 251     padding: 0 5px 0 20px;
 252     background: url([[pix:t/collapsed]]) 2px center no-repeat;
 253 }
 254
 255 /*rtl:raw:
 256 .path-mod-assign.jsenabled .mod-assign-history-link-closed {
 257     background-image: url([[pix:t/collapsed_rtl]]);
 258 }
 259 */
 260
 261 .path-mod-assign .submithelp {
 262     padding: 1em;
 263 }
 264
 265 .path-mod-assign .feedbacktitle {
 266     font-weight: bold;
 267 }
 268
 269 .path-mod-assign .submitconfirm,
 270 .path-mod-assign .submissionlinks,
 271 .path-mod-assign .submissionaction {
 272     text-align: center;
 273 }
 274
 275 .path-mod-assign .submissionsummarytable .c0,
 276 .path-mod-assign .mod-assign-history-panel .c0 {
 277     width: 150px;
 278 }
 279
 280 .path-mod-assign .gradingtable .moodle-actionmenu {
 281     white-space: nowrap;
 282 }
 283
 284 .path-mod-assign .gradingtable .moodle-actionmenu[data-enhanced].show .menu a {
 285     padding-left: 12px;
 286     padding-right: 12px;
 287 }
 288
 289 .path-mod-assign .gradingtable .menu-action img {
 290     display: none;
 291 }
 292
 293 .path-mod-assign .editsubmissionform input[name="submissionstatement"] {
 294     vertical-align: top;
 295 }
 296
 297 .path-mod-assign .editsubmissionform label[for="id_submissionstatement"] {
 298     display: inline-block;
 299 }
 300
 301 .path-mod-assign.layout-option-nonavbar {
 302     padding-top: 0;
 303 }
 304
 305 .path-mod-assign [data-region="user-selector"] select {
 306     margin-bottom: 0;
 307 }
 308
 309 .path-mod-assign [data-region="user-selector"] .alignment {
 310     float: right;
 311     width: 320px;
 312     text-align: center;
 313     margin-top: 7px;
 314 }
 315
 316 .path-mod-assign [data-region="user-selector"] [data-action="previous-user"],
 317 .path-mod-assign [data-region="user-selector"] [data-action="next-user"] {
 318     font-size: 26px;
 319 }
 320
 321 .path-mod-assign [data-region="user-selector"] [data-action="next-user"] {
 322     margin-left: -10px;
 323 }
 324
 325 .path-mod-assign [data-region="user-selector"] .alignment input {
 326     margin-bottom: 5px;
 327 }
 328
 329 .path-mod-assign [data-region="user-selector"] .alignment .form-autocomplete-downarrow {
 330     top: 0;
 331 }
 332
 333 .path-mod-assign [data-region="user-selector"] .form-autocomplete-selection {
 334     display: none;
 335 }
 336
 337 .path-mod-assign [data-region="user-selector"] .form-autocomplete-suggestions {
 338     text-align: left;
 339 }
 340
 341 .path-mod-assign [data-region="user-selector"] .form-autocomplete-suggestions {
 342     margin-left: 48px;
 343 }
 344
 345 .path-mod-assign [data-region="user-filters"] {
 346     font-size: small;
 347 }
 348
 349 .path-mod-assign [data-region="configure-filters"] {
 350     display: none;
 351     text-align: left;
 352     width: auto;
 353     background-color: #fff;
 354     background-clip: padding-box;
 355     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 356     border-radius: 6px;
 357     position: absolute;
 358     margin-top: 28px;
 359     margin-left: -140px;
 360     padding: 10px 0;
 361     z-index: 1;
 362 }
 363
 364 .path-mod-assign [data-region="configure-filters"]::before,
 365 .path-mod-assign [data-region="configure-filters"]::after {
 366     position: absolute;
 367     left: auto;
 368     display: inline-block;
 369     content: '';
 370     border-style: solid;
 371     border-color: transparent;
 372     border-top: none;
 373 }
 374
 375 .path-mod-assign [data-region="configure-filters"]::before {
 376     top: -7px;
 377     right: 12px;
 378     border-width: 7px;
 379     border-bottom-color: rgba(0, 0, 0, 0.2);
 380 }
 381
 382 .path-mod-assign [data-region="configure-filters"]::after {
 383     top: -6px;
 384     right: 13px;
 385     border-width: 6px;
 386     border-bottom-color: #fff;
 387 }
 388
 389 .path-mod-assign [data-region="configure-filters"] label {
 390     display: block;
 391     padding: 3px 20px;
 392 }
 393
 394 .path-mod-assign .alignment [data-region="configure-filters"] input {
 395     margin-bottom: 0;
 396 }
 397
 398 .path-mod-assign [data-region="grading-navigation-panel"] {
 399     position: absolute;
 400     top: 0;
 401     left: 0;
 402     width: 100%;
 403     height: 6em;
 404     margin: 0;
 405     border-bottom: 1px solid #ddd;
 406 }
 407
 408 .path-mod-assign [data-region="grading-navigation"] {
 409     padding: 1em;
 410 }
 411 .path-mod-assign [data-region="assignment-info"] {
 412     white-space: nowrap;
 413     overflow-x: hidden;
 414     text-overflow: ellipsis;
 415 }
 416 .path-mod-assign [data-region="assignment-info"] small[data-region="assignment-tooltip"] {
 417     margin-left: 0.5em;
 418 }
 419
 420 .path-mod-assign [data-region="user-info"] {
 421     height: 60px;
 422 }
 423
 424 .path-mod-assign [data-region="user-info"] a {
 425     text-decoration: none;
 426 }
 427
 428 .path-mod-assign [data-region="user-info"] .img-rounded {
 429     display: block;
 430     float: left;
 431     margin-top: -3px;
 432     margin-right: 10px;
 433 }
 434
 435 .path-mod-assign [data-region="user-info"] em {
 436     display: block;
 437     font-style: normal;
 438 }
 439
 440 .path-mod-assign [data-region="user-info"] em.nowrap {
 441     white-space: nowrap;
 442     overflow: hidden;
 443     text-overflow: ellipsis;
 444 }
 445
 446 .path-mod-assign [data-region="grading-actions-form"] label {
 447     display: inline-block;
 448 }
 449
 450 .path-mod-assign.pagelayout-embedded {
 451     overflow: hidden;
 452 }
 453
 454 .path-mod-assign [data-region="review-panel"] {
 455     position: absolute;
 456     top: 85px;
 457     bottom: 60px;
 458     left: 0;
 459     right: 30%;
 460     width: auto;
 461     box-sizing: border-box;
 462     -webkit-transition: right 0.5s, left 0.5s;
 463     -moz-transition: right 0.5s, left 0.5s;
 464     transition: right 0.5s, left 0.5s;
 465 }
 466
 467 .path-mod-assign [data-region="review-panel"].grade-panel-collapsed {
 468     right: 30px;
 469 }
 470
 471 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
 472     display: none;
 473     height: 30px;
 474     width: 30px;
 475     position: absolute;
 476     top: 0;
 477     right: 0;
 478     left: auto;
 479     box-sizing: border-box;
 480     border-radius: 0 0 0 4px;
 481     border: 1px solid #ccc;
 482     border-top: none;
 483     background-color: #fff;
 484     z-index: 99999;
 485 }
 486
 487 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
 488 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
 489     width: 100%;
 490     height: 100%;
 491     text-align: center;
 492     line-height: 30px;
 493 }
 494
 495 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
 496 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
 497     visibility: hidden;
 498     opacity: 0;
 499     height: 0;
 500     overflow: hidden;
 501 }
 502
 503 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] img {
 504     height: 100%;
 505     float: right;
 506 }
 507
 508 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon {
 509     display: none;
 510 }
 511
 512 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
 513     display: block;
 514 }
 515
 516 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon.full-width {
 517     display: none;
 518 }
 519
 520 .path-mod-assign [data-region="review-panel"] .pageheader {
 521     border-right: 1px solid #ddd;
 522 }
 523
 524 .path-mod-assign [data-region="review-panel"] + [data-region="grade-panel"] [data-region="grade"] {
 525     margin-left: auto;
 526     margin-right: auto;
 527     max-width: 100%;
 528     -webkit-transition: max-width 0.5s;
 529     -moz-transition: max-width 0.5s;
 530     transition: max-width 0.5s;
 531 }
 532
 533 .path-mod-assign [data-region="review-panel"] .drawingregion {
 534     left: 0;
 535     right: 0;
 536     border-color: #ddd;
 537 }
 538
 539 .path-mod-assign [data-region="review-panel"].collapsed {
 540     left: calc(30px - 70%);
 541     right: calc(100% - 30px);
 542     -webkit-transition: right 0.5s, left 0.5s;
 543     -moz-transition: right 0.5s, left 0.5s;
 544     transition: right 0.5s, left 0.5s;
 545 }
 546
 547 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-content"] {
 548     visibility: hidden;
 549     -webkit-transition: visibility 0 0.5s;
 550     -moz-transition: visibility 0 0.5s;
 551     transition: visibility 0 0.5s;
 552 }
 553
 554 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .expand-icon {
 555     display: block;
 556 }
 557
 558 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
 559     display: none;
 560 }
 561
 562 .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] {
 563     position: absolute;
 564     left: 30px;
 565     right: 0;
 566     width: calc(100% - 30px);
 567     overflow: auto;
 568     -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
 569     -moz-transition: width 0.5s, right 0.5s, left 0.5s;
 570     transition: width 0.5s, right 0.5s, left 0.5s;
 571 }
 572
 573 .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] [data-region="grade"],
 574 .path-mod-assign [data-region="grade-panel"].fullwidth [data-region="grade"] {
 575     max-width: 800px;
 576     margin-left: auto;
 577     margin-right: auto;
 578 }
 579
 580 .path-mod-assign [data-region="grade-panel"] {
 581     position: absolute;
 582     top: 85px;
 583     bottom: 60px;
 584     right: 0;
 585     left: 70%;
 586     width: 30%;
 587     overflow: auto;
 588     box-sizing: border-box;
 589     background-color: #f5f5f5;
 590     padding: 15px;
 591     padding-top: 0;
 592     -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
 593     -moz-transition: width 0.5s, right 0.5s, left 0.5s;
 594     transition: width 0.5s, right 0.5s, left 0.5s;
 595 }
 596
 597 .path-mod-assign [data-region="grade-panel"].collapsed {
 598     left: calc(100% - 30px);
 599     right: calc(30px - 100%);
 600     visibility: hidden;
 601     -webkit-transition: right 0.5s, left 0.5s, visibility 0 0.5s;
 602     -moz-transition: right 0.5s, left 0.5s, visibility 0 0.5s;
 603     transition: right 0.5s, left 0.5s, visibility 0 0.5s;
 604 }
 605
 606 .path-mod-assign [data-region="grade-panel"].fullwidth {
 607     left: 0;
 608     width: 100%;
 609     overflow: auto;
 610 }
 611
 612 .path-mod-assign [data-region="grade-panel"] h3 {
 613     font-size: 18px;
 614     font-weight: 500;
 615 }
 616
 617 /***** Start submission status *****/
 618
 619 .path-mod-assign [data-region="grade-panel"] div.submissionstatustable {
 620     margin-bottom: 2em;
 621 }
 622
 623 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable {
 624     margin-left: 5px;
 625     margin-right: 5px;
 626 }
 627
 628 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable table.generaltable td {
 629     padding: 8px 0;
 630     background-color: transparent;
 631 }
 632
 633 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable .generaltable tbody > tr:nth-child(2n+1) > td,
 634 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable .generaltable tbody tr:hover > td {
 635     background-color: transparent;
 636 }
 637
 638 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr td.c0 {
 639     width: auto;
 640 }
 641
 642 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr.lastrow td.c0,
 643 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr.lastrow td.c1 {
 644     border-bottom: 1px solid #ddd;
 645 }
 646
 647 .path-mod-assign [data-region="grade-panel"] td.submissionnotgraded,
 648 .path-mod-assign [data-region="grade-panel"] div.submissionnotgraded {
 649     color: red;
 650     background-color: transparent;
 651 }
 652
 653 /***** End submission status *****/
 654
 655 .path-mod-assign [data-region="grade-panel"] #id_gradeheader {
 656     display: table-cell;
 657     min-width: 0;
 658 }
 659
 660 .path-mod-assign [data-region="grade-panel"] #id_gradeheader > legend {
 661     visibility: hidden;
 662     height: 0;
 663     margin-bottom: 0;
 664 }
 665
 666 .path-mod-assign [data-region="grade-panel"] .comment-area textarea[cols] {
 667     width: 100%;
 668     box-sizing: border-box;
 669 }
 670
 671 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ftext,
 672 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_f,
 673 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_feditor,
 674 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_fgrading,
 675 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ffilemanager {
 676     background-color: #fff;
 677     border: 1px solid #ddd;
 678     margin-bottom: 20px;
 679 }
 680
 681 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ftext .fitemtitle,
 682 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_f .fitemtitle,
 683 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_feditor .fitemtitle,
 684 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_fgrading .fitemtitle,
 685 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ffilemanager .fitemtitle {
 686     padding-left: 5px;
 687     padding-right: 5px;
 688 }
 689
 690 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_ftext .felement,
 691 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_f .felement,
 692 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_feditor .felement,
 693 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_fgrading .felement,
 694 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_ffilemanager .felement {
 695     padding: 6px 10px 10px;
 696     box-sizing: border-box;
 697 }
 698
 699 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_ftext .fitemtitle,
 700 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_f .fitemtitle,
 701 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_feditor .fitemtitle,
 702 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_fgrading .fitemtitle,
 703 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_ffilemanager .fitemtitle {
 704     border-bottom: 1px solid #ddd;
 705     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 706     padding: 6px 10px 3px;
 707     box-sizing: border-box;
 708 }
 709
 710 .path-mod-assign #page-content [data-region="grade-panel"] [data-region="popout-button"] img {
 711     margin-left: 2px;
 712     margin-right: 2px;
 713     margin-top: -2px;
 714 }
 715
 716 .path-mod-assign #page-content [data-region="grade-panel"] .popout [data-region="popout-button"] img {
 717     margin-left: -6px;
 718     margin-right: -6px;
 719     margin-top: 4px;
 720 }
 721
 722 .path-mod-assign [data-region="grade-panel"] .fitem .fstaticlabel,
 723 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem .fitemtitle label {
 724     font-weight: 500;
 725 }
 726
 727 /***** Start grade *****/
 728
 729 .path-mod-assign [data-region="grade-panel"] .mform #fitem_id_grade.fitem {
 730     padding-top: 5px;
 731 }
 732
 733 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #fitem_id_grade.fitem .fitemtitle {
 734     display: inline-block;
 735     width: auto;
 736     border-bottom: none;
 737     box-shadow: none;
 738 }
 739
 740 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #fitem_id_grade.fitem .felement {
 741     width: auto;
 742     float: right;
 743 }
 744
 745 .path-mod-assign #page-content .mform:not(.unresponsive) #fitem_id_grade.fitem .felement input {
 746     width: 80px;
 747     margin-bottom: 0;
 748 }
 749
 750 /***** End grade *****/
 751
 752 /***** Start rubric *****/
 753
 754 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric {
 755     padding-bottom: 0;
 756     max-width: none;
 757 }
 758
 759 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .description {
 760     font-weight: 500;
 761     min-width: 150px;
 762 }
 763
 764 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels {
 765     background-color: #fff;
 766 }
 767
 768 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion,
 769 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion.even {
 770     background-color: transparent;
 771 }
 772
 773 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric.evaluate .criterion .levels .level:hover {
 774     background-color: #dff0d8;
 775 }
 776
 777 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level.checked {
 778     background-color: #dff0d8;
 779     border: none;
 780     border-left: 1px solid #ddd;
 781 }
 782
 783 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level .score {
 784     color: #468847;
 785     font-weight: 500;
 786     font-style: normal;
 787     margin-top: 20px;
 788 }
 789
 790 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .remark textarea {
 791     margin-bottom: 0;
 792 }
 793
 794 /***** End rubric *****/
 795
 796 /***** Start marking guide *****/
 797
 798 .path-mod-assign [data-region="grade-panel"] .gradingform_guide {
 799     margin-bottom: 10px;
 800 }
 801
 802 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .descriptionreadonly,
 803 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark,
 804 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score {
 805     display: block;
 806 }
 807
 808 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .descriptionreadonly {
 809     padding-top: 10px;
 810 }
 811
 812 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criteriondescription {
 813     margin-top: 5px;
 814 }
 815
 816 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criteriondescriptionmarkers {
 817     width: auto;
 818     margin-top: 5px;
 819 }
 820
 821 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
 822     margin-bottom: 10px;
 823 }
 824
 825 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
 826     float: right;
 827     margin-top: 2px;
 828     margin-left: 0;
 829 }
 830
 831 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score {
 832     float: left;
 833     padding-bottom: 8px;
 834 }
 835
 836 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score input,
 837 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score div {
 838     display: inline-block;
 839 }
 840
 841 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criterion,
 842 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criterion.even {
 843     background-color: transparent;
 844     border-width: 0 0 1px 0;
 845     padding: 8px 0;
 846 }
 847
 848 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
 849 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
 850     background-color: #f5f5f5;
 851     padding: 10px;
 852 }
 853
 854 /***** End marking guide *****/
 855
 856 .path-mod-assign [data-region="grade-panel"] .fitem.fitem_ffilemanager {
 857     margin-bottom: 0;
 858 }
 859
 860 /***** Start popout dialogue *****/
 861
 862 .path-mod-assign [data-region="grade-panel"] .fitem.popout {
 863     position: fixed;
 864     left: 20%;
 865     right: 20%;
 866     top: 20%;
 867     bottom: 20%;
 868     z-index: 1000;
 869     border: 1px solid rgba(0, 0, 0, 0.3);
 870     border-radius: 6px;
 871     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 872 }
 873
 874 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .fitemtitle {
 875     text-align: center;
 876     padding-left: 15px;
 877     padding-right: 15px;
 878     height: 45px;
 879 }
 880
 881 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .fitemtitle label {
 882     font-size: 16px;
 883     line-height: 30px;
 884 }
 885
 886 .path-mod-assign #page-content [data-region="grade-panel"] [data-region="popout-button"] {
 887     float: right;
 888 }
 889
 890 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.popout .fitemtitle [data-region="popout-button"] img {
 891     margin-top: -10px;
 892     margin-right: -7px;
 893 }
 894
 895 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
 896     padding: 10px 15px 15px;
 897     height: calc(100% - 54px);
 898     overflow: auto;
 899 }
 900
 901 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement .gradingform_rubric {
 902     overflow: visible;
 903 }
 904
 905 /***** End popout dialogue *****/
 906
 907 /***** Start attempt settings *****/
 908
 909 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings > legend {
 910     font-size: 18px;
 911     font-weight: 500;
 912     line-height: 40px;
 913     border-bottom: 0;
 914     margin-bottom: 10px;
 915 }
 916
 917 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings .fcontainer {
 918     display: table;
 919     width: 100%;
 920     padding-left: 5px;
 921     padding-right: 5px;
 922     margin-bottom: 10px;
 923     box-sizing: border-box;
 924 }
 925
 926 .path-mod-assign [data-region="grade-panel"] .mform #id_attemptsettings .fitem {
 927     display: table-row;
 928 }
 929
 930 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem:last-of-type .fitemtitle,
 931 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem:last-of-type .felement {
 932     border-bottom: 1px solid #ddd;
 933 }
 934
 935 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings .fitem .fstaticlabel,
 936 .path-mod-assign [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem .fitemtitle label {
 937     font-weight: 400;
 938 }
 939
 940 .path-mod-assign [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem .felement select {
 941     margin-bottom: 0;
 942 }
 943
 944 .path-mod-assign [data-region="grade-panel"] [data-region="attempt-chooser"] {
 945     margin-bottom: 10px;
 946     vertical-align: text-bottom;
 947 }
 948
 949 /***** End attempt settings *****/
 950
 951 .path-mod-assign [data-region="grade-actions-panel"] {
 952     border-top: 1px solid #ddd;
 953     position: absolute;
 954     bottom: 0;
 955     left: 0;
 956     width: 100%;
 957     height: 60px;
 958 }
 959
 960 /*rtl:ignore*/
 961 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
 962     position: absolute;
 963     top: 0;
 964     left: auto;
 965     right: 15px;
 966     margin: 0;
 967     height: 100%;
 968     line-height: 60px;
 969 }
 970
 971 .path-mod-assign [data-region="grade-actions"] {
 972     padding: 1em;
 973     text-align: center;
 974 }
 975
 976 .path-mod-assign [data-region="submissions-list"] {
 977     text-align: inherit;
 978 }
 979
 980 .path-mod-assign [data-region="submissions-list"] label.radio input {
 981     margin-top: 4px;
 982     min-width: inherit;
 983 }
 984
 985 .path-mod-assign [data-region="overlay"] {
 986     display: none;
 987     z-index: 100;
 988     position: absolute;
 989     top: 0;
 990     left: 0;
 991     width: 100%;
 992     overflow: auto;
 993     bottom: 0;
 994     background-color: #ddd;
 995     opacity: 0.4;
 996     padding-top: 4em;
 997     text-align: center;
 998 }
 999
1000 @media (max-width: 767px) {
1001     .path-mod-assign.pagelayout-embedded {
1002         overflow: auto;
1003     }
1004
1005     .path-mod-assign [data-region="assignment-info"] {
1006         border-bottom: 1px solid #ddd;
1007         padding-bottom: 5px;
1008     }
1009
1010     .path-mod-assign .page-context-header .page-header-headings {
1011         margin-top: 13px;
1012     }
1013
1014     .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1015         display: none;
1016     }
1017
1018     .path-mod-assign [data-region="grading-navigation-panel"],
1019     .path-mod-assign [data-region="review-panel"],
1020     .path-mod-assign [data-region="grade-panel"],
1021     .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"],
1022     .path-mod-assign [data-region="grade-actions-panel"] {
1023         position: inherit;
1024         width: 100%;
1025         top: 0;
1026         left: 0;
1027         right: auto;
1028         overflow: auto;
1029         height: auto;
1030         margin-bottom: 1em;
1031     }
1032
1033     .path-mod-assign [data-region="grade-panel"].collapsed {
1034         visibility: visible;
1035     }
1036
1037     .path-mod-assign [data-region="grading-navigation"] {
1038         padding: 0;
1039         text-align: center;
1040     }
1041
1042     .path-mod-assign [data-region="grade-panel"] {
1043         margin-bottom: 2em;
1044     }
1045
1046     .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
1047         display: none;
1048     }
1049
1050     .path-mod-assign [data-region="review-panel"] {
1051         position: relative;
1052         max-height: 2000px;
1053         -webkit-transition: max-height 0.25s linear;
1054         -moz-transition: max-height 0.25s linear;
1055         transition: max-height 0.25s linear;
1056     }
1057
1058     .path-mod-assign [data-region="review-panel"] .pageheader {
1059         border-right: none;
1060         padding-right: 20px;
1061         padding-left: 40px;
1062     }
1063
1064     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
1065         display: block;
1066         height: 20px;
1067         width: 20px;
1068         position: absolute;
1069         top: 0;
1070         left: 0;
1071         right: auto;
1072         box-sizing: border-box;
1073         border: 1px solid #ccc;
1074         border-radius: 0 0 4px 0;
1075         background-color: #fff;
1076         z-index: 99999;
1077     }
1078
1079     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
1080     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
1081         width: 100%;
1082         height: 100%;
1083         text-align: center;
1084         line-height: 30px;
1085     }
1086
1087     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon,
1088     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
1089         height: 100%;
1090     }
1091
1092     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon {
1093         float: left;
1094     }
1095
1096     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
1097         float: right;
1098     }
1099
1100     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
1101     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
1102         line-height: 20px;
1103         visibility: visible;
1104         opacity: 1;
1105         height: auto;
1106         -webkit-transition: visibility 0 0.25s, opacity 0 0.25s;
1107         -moz-transition: visibility 0 0.25s, opacity 0 0.25s;
1108         transition: visibility 0 0.25s, opacity 0 0.25s;
1109     }
1110
1111     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .rtl-icon {
1112         display: none;
1113     }
1114
1115     .path-mod-assign [data-region="review-panel"].collapsed {
1116         max-height: 20px;
1117         top: 0;
1118         left: 0;
1119         overflow: hidden;
1120         -webkit-transition: max-height 0.25s linear;
1121         -moz-transition: max-height 0.25s linear;
1122         transition: max-height 0.25s linear;
1123     }
1124
1125     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] {
1126         width: 100%;
1127         border-radius: 0 0 0 0;
1128         -webkit-transition: all 0 0.25s;
1129         -moz-transition: all 0 0.25s;
1130         transition: all 0 0.25s;
1131     }
1132
1133     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] img {
1134         height: 100%;
1135     }
1136
1137     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
1138         display: block;
1139     }
1140
1141     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
1142         display: none;
1143     }
1144
1145     .path-mod-assign.pagelayout-popup {
1146         overflow: inherit;
1147     }
1148
1149     .path-mod-assign [data-region="grading-navigation"] [data-region="user-info"] {
1150         text-align: left;
1151         width: auto;
1152         display: inline-block;
1153         margin: 0 auto;
1154     }
1155
1156     .path-mod-assign [data-region="user-selector"] .alignment {
1157         float: none;
1158         margin: 0 auto 10px;
1159     }
1160 }
1161
1162 /** Start of CSS to make forms vertical in the grading panel (taken from theme/bootstrapbase/less/moodle/forms.less). */
1163
1164 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fitemtitle {
1165     display: block;
1166     margin-top: 4px;
1167     margin-bottom: 4px;
1168     text-align: left;
1169     width: 100%;
1170 }
1171
1172 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1173     margin-left: 0;
1174     width: 100%;
1175     float: left;
1176     padding-left: 0;
1177     padding-right: 0;
1178 }
1179
1180 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fstatic:empty {
1181     display: none;
1182 }
1183
1184 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fcheckbox > span,
1185 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fradio > span,
1186 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fgroup > span {
1187     margin-top: 4px;
1188 }
1189
1190 .path-mod-assign [data-region="grade-panel"] .mform .femptylabel .fitemtitle {
1191     display: inline-block;
1192     width: auto;
1193     margin-right: 8px;
1194 }
1195
1196 .path-mod-assign [data-region="grade-panel"] .mform .femptylabel .felement {
1197     display: inline-block;
1198     margin-top: 4px;
1199     padding-top: 5px;
1200     width: auto;
1201 }
1202
1203 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .fitemtitle,
1204 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .felement {
1205     display: inline-block;
1206     width: auto;
1207 }
1208
1209 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .felement {
1210     padding: 6px;
1211 }
1212
1213 /** End of CSS to make forms vertical in the grading panel (taken from theme/bootstrapbase/less/moodle/forms.less). */
1214
1215 /** Styles to fix base theme **/
1216 .path-mod-assign #page,
1217 .path-mod-assign #page-content {
1218     position: inherit;
1219 }
1220 /** End of base fixes **/