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