[Summary view] [Print] [Text view]

   1  /* responsive.less */
   2  
   3  // Should probably be moved to relevant .less files
   4  // after 4095 selector issue is solved
   5  
   6  // TODO: MDL-55142 remove browser hacks in this file:
   7  /* stylelint-disable declaration-block-no-duplicate-properties, no-browser-hacks */
   8  
   9  @media (min-width: 980px) {
  10      .dir-rtl .navbar .nav.pull-right,
  11      .dir-rtl .navbar .logininfo {
  12          float: left;
  13      }
  14      .dir-rtl .navbar .nav {
  15          float: right;
  16          & > li {
  17              float: right;
  18          }
  19      }
  20  
  21  }
  22  
  23  @media (min-width: (@navbarCollapseDesktopWidth)) {
  24  
  25      a[id]:empty::before,
  26      a[name]:empty::before {
  27          display: inline-block;
  28          position: relative;
  29          content: '';
  30          padding-top: @navbarHeight;
  31          margin-top: -@navbarHeight;
  32          vertical-align: top;
  33      }
  34  
  35  }
  36  
  37  @media (min-width: 980px) and (max-width: 1199px) {
  38      // Wider form labels.
  39      .form-item .form-label,
  40      .mform .fitem div.fitemtitle,
  41      .userprofile dl.list dt,
  42      .form-horizontal .control-label {
  43          width: @horizontalComponentOffset980 - 20px;
  44      }
  45      .form-item .form-setting,
  46      .form-item .form-description,
  47      .mform .fitem .felement,
  48      #page-mod-forum-search .c1,
  49      .mform .fdescription.required,
  50      .userprofile dl.list dd,
  51      .form-horizontal .controls {
  52          margin-left: @horizontalComponentOffset980;
  53      }
  54      .dir-rtl {
  55          .form-item .form-setting,
  56          .form-item .form-description,
  57          .mform .fitem .felement,
  58          .mform .fdescription.required,
  59          .userprofile dl.list dd,
  60          .form-horizontal .controls {
  61              margin-right: @horizontalComponentOffset980;
  62          }
  63      }
  64      #page-mod-forum-search.dir-lrt .c1 {
  65          margin-right: @horizontalComponentOffset980;
  66      }
  67      .path-admin .buttons,
  68      .form-buttons {
  69          padding-left: @horizontalComponentOffset980;
  70      }
  71  }
  72  
  73  @media (max-width: 767px) {
  74      .file-picker .fp-repo-area {
  75          width: 100%;
  76          height: auto;
  77          max-height: 220px;
  78          y-scroll: auto;
  79          float: none;
  80          border: 0px;
  81      }
  82      .file-picker .fp-repo-items {
  83          width: 100%;
  84          float: none;
  85          margin-left: 0;
  86      }
  87      .file-picker .fp-login-form .fp-login-input label {
  88          text-align: left;
  89      }
  90      .dir-rtl .file-picker .fp-login-form .fp-login-input label {
  91          text-align: right;
  92      }
  93      .file-picker .fp-content form td {
  94          display: block;
  95          width: 100%;
  96          text-align: left;
  97      }
  98      .dir-rtl .file-picker .fp-content form td {
  99          text-align: right;
 100      }
 101      .fp-content .mdl-right {
 102          text-align: left;
 103      }
 104      .dir-rtl .fp-content .mdl-right {
 105          text-align: right;
 106      }
 107  
 108      .fp-repo-items .fp-navbar {
 109          border-top: 1px solid rgb(187, 187, 187);
 110      }
 111  
 112      .dir-rtl {
 113          .userprofile dl.list dt,
 114          .userprofile dl.list dd {
 115              float: none;
 116              text-align: right;
 117              margin-right: 0;
 118          }
 119      }
 120  
 121      .fp-formset div {
 122          height: auto;
 123      }
 124  }
 125  
 126  @media (min-width: 1200px) {
 127      // Editor on question page
 128      .path-question {
 129          #id_answerhdr div.fitem_feditor {
 130              padding-right: 6px;
 131          }
 132      }
 133      // Login page.
 134      .loginbox.twocolumns .loginpanel {
 135          margin-left: 0;
 136      }
 137      .loginbox.twocolumns .loginpanel,
 138      .loginbox.twocolumns .signuppanel {
 139          width: 48.717948717948715%;
 140          *width: 48.664757228587014%;
 141      }
 142      // Wider form labels.
 143      .form-item .form-label,
 144      .mform .fitem div.fitemtitle,
 145      .userprofile dl.list dt,
 146      .form-horizontal .control-label {
 147          width: @horizontalComponentOffset1200 - 20px;
 148      }
 149      .form-item .form-setting,
 150      .form-item .form-description,
 151      .mform .fitem .felement,
 152      #page-mod-forum-search .c1,
 153      .mform .fdescription.required,
 154      .userprofile dl.list dd,
 155      .form-horizontal .controls {
 156          margin-left: @horizontalComponentOffset1200;
 157      }
 158      .dir-rtl {
 159          .form-item .form-setting,
 160          .form-item .form-description,
 161          .mform .fitem .felement,
 162          .mform .fdescription.required,
 163          .userprofile dl.list dd,
 164          .form-horizontal .controls {
 165              margin-right: (@horizontalComponentOffset1200 - 100px);
 166          }
 167          #page-mod-forum-search .c1 {
 168              margin-right: @horizontalComponentOffset1200;
 169          }
 170          .form-item .form-label,
 171          .mform .fitem div.fitemtitle,
 172          .userprofile dl.list dt,
 173          .form-horizontal .control-label {
 174              width: (@horizontalComponentOffset1200 - 120px);
 175          }
 176  
 177      }
 178      .path-admin .buttons,
 179      .form-buttons {
 180          padding-left: @horizontalComponentOffset1200;
 181      }
 182      .dir-rtl {
 183          .path-admin .buttons,
 184          .form-buttons {
 185              padding-right: @horizontalComponentOffset1200;
 186          }
 187      }
 188  
 189      // Core empty block regions.
 190      .fluid-span (@columns) {
 191          .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 192      }
 193      .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 194      .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 195          #region-main.span8 {
 196              /** increase the span size by 1 **/
 197              .fluid-span(9);
 198          }
 199          #block-region-side-pre.span4 {
 200              /** decrease the span size by 1 **/
 201              .fluid-span(3);
 202          }
 203      }
 204  }
 205  
 206  @media (min-width: 980px) {
 207      .loginbox.twocolumns .loginpanel {
 208          margin-left: 0;
 209      }
 210      .loginbox.twocolumns .loginpanel,
 211      .loginbox.twocolumns .signuppanel {
 212          width: 48.617948717948715%;
 213          *width: 48.664757228587014%;
 214      }
 215  }
 216  
 217  @media (min-width: 768px) and (max-width: 979px) {
 218      // Login page.
 219      .loginbox.twocolumns .loginpanel {
 220          margin-left: 0;
 221      }
 222      .loginbox.twocolumns .loginpanel,
 223      .loginbox.twocolumns .signuppanel {
 224          width: 48.61878453038674%;
 225          *width: 48.56559304102504%;
 226      }
 227      // Core empty block regions.
 228      .fluid-span (@columns) {
 229          .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
 230      }
 231      .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 232      .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 233          #region-main.span8 {
 234              /** increase the span size by 1 **/
 235              .fluid-span(9);
 236          }
 237          #block-region-side-pre.span4 {
 238              /** decrease the span size by 1 **/
 239              .fluid-span(3);
 240          }
 241      }
 242  }
 243  
 244  @media (max-width: 767px) {
 245      .loginbox.twocolumns .loginpanel,
 246      .loginbox.twocolumns .signuppanel {
 247          display: block;
 248          float: none;
 249          width: 100%;
 250          margin-left: 0;
 251          .box-sizing(border-box);
 252      }
 253      #page-mod-quiz-edit div.quizcontents,
 254      .questionbankwindow.block {
 255          width: 100%;
 256          float: none;
 257      }
 258      #page-mod-quiz-edit #block-region-side-pre,
 259      #page-mod-quiz-edit #block-region-side-post {
 260          clear: both;
 261      }
 262  
 263  }
 264  
 265  @media (max-width: 480px) {
 266      // make tabs act like nav-stacked
 267      // (mostly) copied from bootstrap/navs.less
 268      .nav-tabs > li {
 269          float: none;
 270      }
 271      .nav-tabs > li > a {
 272          margin-right: 0; // no need for the gap between nav items
 273      }
 274      .nav-tabs {
 275          border-bottom: 0;
 276      }
 277      .nav-tabs > li > a {
 278          border: 1px solid #ddd;
 279          .border-radius(0);
 280      }
 281      .nav-tabs > .active > a,
 282      .nav-tabs > .active > a:hover {
 283          border: 1px solid #ddd;
 284      }
 285      .nav-tabs > li:first-child > a {
 286          .border-top-radius(4px);
 287      }
 288      .nav-tabs > li:last-child > a {
 289          .border-bottom-radius(4px);
 290      }
 291      .nav-tabs > li > a:hover,
 292      .nav-tabs > li > a:focus {
 293          border-color: #ddd;
 294          z-index: 2;
 295      }
 296      .fp-content-center {
 297          display: block;
 298          vertical-align: top;
 299      }
 300      .course-content ul.topics li.section,
 301      .course-content ul.topics li.section .content,
 302      .course-content ul.weeks li.section .content,
 303      .course-content ul.weeks li.section,
 304      .course-content ul.section {
 305          margin-right: 0;
 306          margin-left: 0;
 307          padding: 0;
 308      }
 309      .activityinstance {
 310          display: block;
 311      }
 312      .editing .course-content .section .activity {
 313          margin-bottom: 0.2em;
 314          padding-bottom: 0.2em;
 315          border-bottom: thin solid #eee;
 316      }
 317      .course-content .section .activity .commands {
 318          text-align: right;
 319      }
 320      /** Handles display of the activity chooser on small screens **/
 321      .jsenabled .choosercontainer #chooseform .alloptions {
 322          max-width: 100%;
 323      }
 324      .jsenabled .choosercontainer #chooseform .instruction,
 325      .jsenabled .choosercontainer #chooseform .typesummary {
 326          position: static;
 327      }
 328      .que .info {
 329          float: none;
 330          width: auto;
 331      }
 332      .que .content {
 333          margin: 0;
 334      }
 335      .path-mod-choice .horizontal  .choices .option {
 336          display: block;
 337      }
 338      .path-mod-forum .forumsearch #search {
 339          width: 120px;
 340      }
 341      .path-mod-forum .forumheaderlist .picture {
 342          display: none;
 343      }
 344  }
 345  
 346  // Stuart's 2,1,3 layout
 347  @media (min-width: 768px) {
 348      .row-fluid .desktop-first-column {
 349          margin-left: 0;
 350      }
 351      #page-navbar .breadcrumb-button {
 352          display: inline;
 353      }
 354  }
 355  
 356  @media (max-width: 767px) {
 357      .row-fluid .desktop-first-column {
 358          clear: both;
 359      }
 360  }
 361  // Forms
 362  @media (max-width: 767px) {
 363      // Remove the horizontal form styles
 364      .form-item .form-label,
 365      .mform .fitem div.fitemtitle {
 366          // copied from .control-label {
 367          float: none;
 368          width: auto;
 369          padding-top: 0;
 370          text-align: left;
 371      }
 372      .form-item .form-label label {
 373          display: inline-block;
 374          margin-right: .5em;
 375      }
 376      .form-item .form-setting .form-checkbox {
 377          margin-top: 0;
 378      }
 379      .form-label span.form-shortname {
 380          display: inline-block;
 381      }
 382      .form-item .form-setting,
 383      .mform .fitem .felement,
 384      .path-backup .mform .fitem .felement,
 385      .mform .fdescription.required,
 386      .form-item .form-description {
 387          margin-left: 0;
 388      }
 389      table#form td.submit,
 390      .form-buttons,
 391      #fitem_id_submitbutton,
 392      .fp-content-center form + div,
 393      #fgroup_id_buttonar,
 394      .form-horizontal .form-actions,
 395      .fitem_fsubmit .felement.fsubmit {
 396          padding-left: 10px;
 397          padding-right: 10px;
 398      }
 399      #helppopupbox {
 400          width: auto !important;
 401          left: 0 !important;
 402      }
 403  }
 404  // Shrink calender when short on space in block
 405  @media (min-width: 768px) and (max-width: 979px) {
 406      .block_calendar_month .content,
 407      .block .minicalendar td {
 408          padding-left: 0;
 409          padding-right: 0;
 410      }
 411  }
 412  
 413  .dir-rtl {
 414      .dropdown-menu {
 415          right: 0;
 416          left: auto;
 417          margin-right: 0px;
 418      }
 419      .navbar .nav > li > .dropdown-menu:before {
 420          right: 9px;
 421          left: auto;
 422      }
 423      .navbar .nav > li > .dropdown-menu:after {
 424          right: 10px;
 425          left: auto;
 426      }
 427      .dropdown-submenu > a:after {
 428          margin-right: 0;
 429          margin-left: -10px;
 430          float: left;
 431          border-right-color: #ccc;
 432          border-left-color: transparent;
 433          border-width: 5px 5px 5px 0px;
 434      }
 435      .dropdown-submenu > .dropdown-menu {
 436          right: 100%;
 437          left: auto;
 438      }
 439  }
 440  
 441  @media (max-width: 979px) {
 442      .nav-collapse {
 443          height: 0;
 444          .nav > li > a {
 445              color: @grayDark;
 446          }
 447          .nav > li > a:hover,
 448          .nav > li > a:focus,
 449          .dropdown-menu a:hover,
 450          .dropdown-menu a:focus,
 451          .dropdown-submenu a:hover,
 452          .dropdown-submenu a:focus,
 453          .dropdown-submenu a:active,
 454          .dropdown-menu > li > a:hover,
 455          .dropdown-menu > li > a:focus,
 456          .dropdown-submenu:hover > a,
 457          .dropdown-submenu:focus > a {
 458              background-image: none;
 459              color: @grayDark;
 460          }
 461      }
 462      .nav-collapse.in {
 463          height: auto;
 464          .usermenu .moodle-actionmenu[data-enhanced] {
 465              .toggle-display {
 466                  display: none;
 467              }
 468              .menu {
 469                  display: block;
 470  
 471                  li {
 472                      margin: 0 0.5em;
 473                  }
 474              }
 475          }
 476      }
 477      .path-mod-data .box > table > tbody > tr > td {
 478          display: block;
 479      }
 480      .path-mod-forum .forumheaderlist {
 481          thead .header {
 482              font-weight: normal;
 483              font-size: round(@fontSizeSmall);
 484          }
 485          .discussion {
 486              .author,
 487              .replies,
 488              .lastpost {
 489                  font-size: round(@fontSizeSmall);
 490              }
 491              .replies .unread a {
 492                  padding: 0;
 493              }
 494          }
 495      }
 496  
 497      .navbar {
 498          .nav-collapse.in {
 499              border-top: 1px solid @navbarBorder;
 500              &.pull-left,
 501              &.pull-right {
 502                  float: none;
 503              }
 504              > .nav {
 505                  margin: 0;
 506  
 507                  // Add padding to first-level links.
 508                  > li > a {
 509                      padding-left: 20px;
 510                      border-radius: 0;
 511                  }
 512                  .dropdown-menu {
 513                      margin: 0 0 0 15px;
 514                      li > a {
 515                          border-radius: 0;
 516                      }
 517                  }
 518              }
 519  
 520              .nav,
 521              .nav .dropdown-menu {
 522                  .dropdown-submenu {
 523                      .dropdown-toggle {
 524                          &:after {
 525                              display: inline-block;
 526                              float: none;
 527                              .caret();
 528                              border-top-color: @navbarBorder;
 529                              margin-left: 4px;
 530                              margin-top: 8px;
 531                          }
 532                      }
 533  
 534                      &.open {
 535                          > a {
 536                              background-color: @navbarBackground;
 537                          }
 538                      }
 539  
 540                      // Suppress showing of submenu menu content on hover.
 541                      &:hover {
 542                          .dropdown-menu {
 543                              display: none;
 544                          }
 545                          &.open {
 546                              > a {
 547                                  background-color: @navbarBackground;
 548                              }
 549                              > .dropdown-menu,
 550                              .open > .dropdown-menu {
 551                                  display: block;
 552                              }
 553                          }
 554                      }
 555                  }
 556                  .divider {
 557                      width: auto;
 558                      display: block;
 559                      height: 0;
 560                      margin: 4px 1px;
 561                      border-left: 0 none;
 562                      border-right: 0 none;
 563                      border-top: 1px solid @navbarBorder;
 564                      border-bottom: 1px solid @navbarBackgroundHighlight;
 565                  }
 566              }
 567          }
 568      }
 569  
 570      .navbar-inverse {
 571          .nav-collapse.in {
 572              border-top-color: @navbarInverseBorder;
 573              .nav,
 574              .nav .dropdown-menu {
 575                  .dropdown-submenu {
 576                      .dropdown-toggle {
 577                          &:after {
 578                              border-top-color: @navbarInverseBorder;
 579                          }
 580                      }
 581                      &.open {
 582                          > a {
 583                              background-color: @navbarInverseBackground;
 584                          }
 585                      }
 586  
 587                      &:hover {
 588                          &.open {
 589                              > a {
 590                                  background-color: @navbarInverseBackground;
 591                              }
 592                          }
 593                      }
 594                  }
 595                  .divider {
 596                      width: auto;
 597                      display: block;
 598                      height: 0;
 599                      margin: 4px 1px;
 600                      border-top: 1px solid @navbarInverseBackground;
 601                      border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
 602                  }
 603              }
 604              .nav {
 605                  > li > a {
 606                      &:hover,
 607                      &:focus {
 608                          color: @navbarInverseLinkColorHover;
 609                      }
 610                  }
 611              }
 612              .dropdown-menu a {
 613                  &:hover,
 614                  &:focus {
 615                      color: @navbarInverseLinkColorHover;
 616                  }
 617                  > li > a {
 618                      &:hover,
 619                      &:focus {
 620                          color: @navbarInverseLinkColorHover;
 621                      }
 622                  }
 623              }
 624              .dropdown-submenu a {
 625                  &:hover,
 626                  &:focus,
 627                  &:active {
 628                      color: @navbarInverseLinkColorHover;
 629                  }
 630              }
 631          }
 632      }
 633  
 634      .dir-rtl {
 635          .navbar {
 636              .nav-collapse.in {
 637                  > .nav {
 638                      margin: 0;
 639                      > li > a {
 640                          padding-left: 0;
 641                          padding-right: 20px;
 642                      }
 643                      .dropdown-menu {
 644                          margin: 0 15px 0 0;
 645                      }
 646                  }
 647                  .dropdown-menu {
 648                      > li {
 649                          > a {
 650                              padding: 9px 15px;
 651                          }
 652                      }
 653                  }
 654                  .nav,
 655                  .nav .dropdown-menu {
 656                      .dropdown-submenu {
 657                          .dropdown-toggle {
 658                              &:after {
 659                                  margin-left: 0;
 660                                  margin-right: 4px;
 661                              }
 662                          }
 663                      }
 664                  }
 665              }
 666          }
 667      }
 668  }
 669  
 670  @media (max-width: 767px) {
 671      // Resize, reflow file-picker on small devices
 672      #filesskin .yui3-panel,
 673      #filesskin .file-picker.fp-generallayout {
 674          width: 100%;
 675          left: 0;
 676      }
 677      .userprofile dl.list {
 678          // copied from dl-horizontal in bootstrap/repsonsive.less
 679          dt {
 680              float: none;
 681              clear: none;
 682              width: auto;
 683              text-align: left;
 684          }
 685          dd {
 686              margin-left: 0;
 687          }
 688      }
 689      // Reset the alignment for required label to display inline on mobile devices
 690      #page-mod-wiki-create .mform .fitem div.fitemtitle {
 691          float: left;
 692      }
 693  
 694      // GRID & CONTAINERS
 695      // -----------------
 696      // Remove width from containers
 697      .container {
 698          width: auto;
 699      }
 700      // Fluid rows
 701      .row-fluid {
 702          width: 100%;
 703      }
 704      .row-fluid .span8.pull-right,
 705      .row-fluid .span9.pull-right {
 706          float: none;
 707      }
 708      // Undo negative margin on rows and thumbnails
 709      .row {
 710          margin-left: 0;
 711      }
 712      // Make all grid-sized elements block level again
 713      [class*="span"],
 714      .row-fluid [class*="span"] {
 715          float: none;
 716          display: block;
 717          width: 100%;
 718          margin-left: 0;
 719          .box-sizing(border-box);
 720      }
 721  
 722      // We need to specify a more specific selector to reset the width for
 723      // cases when we have content in the side-pre blockregion but not in the
 724      // side-post blockregion as there are more specific selectors in
 725      // core.less which take precedence which break responsiveness.
 726      .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 727      .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 728          #block-region-side-pre.span4,
 729          #region-main.span8 {
 730              .fluid-span(12);
 731          }
 732      }
 733  
 734      .row-fluid .span12 {
 735          width: 100%;
 736          .box-sizing(border-box);
 737      }
 738      .row-fluid [class*="offset"]:first-child {
 739          margin-left: 0;
 740      }
 741      div[role=main] {
 742          margin-bottom: 1em;
 743      }
 744      .coursebox {
 745          .info {
 746              .name {
 747                  a {
 748                      background-position: 0 13px;
 749                  }
 750              }
 751          }
 752      }
 753      .category-browse {
 754          .coursebox {
 755              .info {
 756                  .name {
 757                      a {
 758                          background-position: 0 13px;
 759                      }
 760                  }
 761              }
 762          }
 763      }
 764  }
 765  
 766  // All widths between 1200px and 1600px
 767  @media (min-width: 1200px) and (max-width: 1600px) {
 768      .fluid-span (@columns) {
 769          .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 770      }
 771      // CSS for the course management pages.
 772      #course-category-listings.columns-3 {
 773          background-color: @tableBackground;
 774          border: 0;
 775  
 776          #category-listing,
 777          #course-listing {
 778              .fluid-span(6);
 779              margin-left: @fluidGridGutterWidth1200;
 780              *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
 781              &:first-child {
 782                  margin-left: 0;
 783              }
 784          }
 785          #course-detail {
 786              .fluid-span(12);
 787              margin: 1em 0 0;
 788          }
 789      }
 790  }
 791  
 792  // All widths up to 1199px.
 793  @media (max-width: 1199px) {
 794  
 795      // Editor on question pages
 796      .path-question {
 797          #id_answerhdr div.fitem {
 798              padding-right: 6px;
 799              padding-left: 4px;
 800          }
 801      }
 802      // CSS for the course management pages.
 803      #course-category-listings.columns-3 {
 804          background-color: @tableBackground;
 805          border: 0;
 806          #category-listing,
 807          #course-listing,
 808          #course-detail {
 809              .fluid-span(12);
 810              margin: 0 0 1em 0;
 811          }
 812      }
 813  
 814      #page-mod-forum-discuss .discussioncontrols {
 815          text-align: right;
 816          .discussioncontrol {
 817              float: none;
 818              width: auto;
 819              display: inline-block;
 820              margin: 0 3px 0.5em;
 821              select,
 822              input {
 823                  margin-bottom: 0;
 824              }
 825              &.movediscussion {
 826                  margin-right: 0;
 827                  padding-right: 0;
 828              }
 829          }
 830      }
 831  
 832      #page-mod-forum-discuss.dir-rtl .discussioncontrols {
 833          text-align: left;
 834      }
 835  }
 836  
 837  
 838  // File Picker.
 839  @media (max-width: 768px) {
 840      .fp-forminset .control-group .controls {
 841          margin-left: 0;
 842      }
 843      .dir-rtl .fp-formset .control-group {
 844          label.control-label {
 845              text-align: right;
 846              float: none;
 847          }
 848      }
 849      .dir-rtl .fp-forminset .control-group {
 850          label.control-label {
 851              text-align: right;
 852              float: none;
 853          }
 854          .controls {
 855              margin-right: 0;
 856          }
 857      }
 858  }